{"_id":"@chakra-ui/layout","_rev":"527-b13c5f2c55abd8d214a4da8169f08578","name":"@chakra-ui/layout","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","dev":"0.0.0-dev-20230908144305","latest":"2.3.1"},"versions":{"1.0.0-next.0":{"name":"@chakra-ui/layout","version":"1.0.0-next.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ab005d34c6178165e9e1b0e016153a4cd3ad1eef","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-next.0.tgz","fileCount":123,"integrity":"sha512-MBwbD9D2rBgB0OUgIcFIL3fKKSt9tHtoHTqBOQIpZORXdm8s4pGdHH53cEwbJkx6nn1yO1uVDJdHFuFRZE3OHA==","signatures":[{"sig":"MEQCIHY6ZapybtaRz76W3rDreA/jT3fHPiVesaH7TeaBk4YvAiAmoQWa/0RyI3u5w14xYKUe7IcQy0w0xrr99sQsVeR6fQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":303495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7nTYCRA9TVsSAnZWagAAfsYP/1Mm5gpjO+jgF43niOqf\nzqQHec4/B0u7sXoNw8FSb25hvD8R6JRz012ojkaNK7M9IaMAfuve/kXB8Kf3\npoiuZLybby1AM1mA58Vb14Eceg/Wnclwrm0XSbMgwr2QeLhMNLbDC8kSorIf\nJfYPfWdY6CjLjGqfNEWEnnyHRc39lTPVhAAhIvSNabETJZYfWS7HS+Il98xO\nhIdDJfkQHYATGGc4Ykll//Imt1AKd20h+B3UkFxXRd6OEtOLTUtvAsJVK+ci\nRXWJ8X7Fy5p0ulZCqLp+pydiRr7R6wT8B6vxkp8OcUSpdFaYoqQzgzPuhUXW\nRBvkg/e+hmWSS+zmPPTzQZ5CyZuSP6FbOPoA9DZe4ia+aZvLTV3la22rc2fo\n/3KYqaLdBg7uSnJd8AkjSgkwj6GULVrPCYZOXxdyqY3gtoRFnnvC5czRl9P4\nEWu4xbeXPNK993wKjtSSQEYe7MqHUD4uwyAjTbK/+/2cLIgfE7x8hX3jXwfa\nqSTzKU17mI85JnJNKW2Pkijbc/BiKzoGuVEAc2uSTk1F8l24OUqM9LQfClPp\nyh0LBozEmUnLg6493oRXWVhqe9kbQoKCNVw8au7y4qGRXFotSvM6LLE7JKYr\nYwVk6cI6yrCAc2Ze76L1YuhB8kp2fiXK5TbWObpi4y8sQPXst0T4W/aNg7jT\nJaWE\r\n=CJHy\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 layout components that give you massive speed","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.0","@chakra-ui/utils":"^1.0.0-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"^1.0.0-next.0"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-next.0_1592685783879_0.10200625132692465","host":"s3://npm-registry-packages"}},"1.0.0-next.1":{"name":"@chakra-ui/layout","version":"1.0.0-next.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0d982cdf8d97e02d4eb09c50e131b0d4b5a91013","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-next.1.tgz","fileCount":124,"integrity":"sha512-MMp4jjm3ZIn8qflbghpke1k5x76/K+WSrkgF2XkfRdlcuFfKfNbNF7OCAjjngYn/m9MfwNCO10lRgdbDiuSAOQ==","signatures":[{"sig":"MEUCIBrAfKaqxflxZ6MoKzm6Mc4sOfLZw/FsWd6FUnyGKERnAiEA2TEAjVtnXzHhIeBlTydwWLLRPoGN51wVqLmQUyeo8o0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ytMCRA9TVsSAnZWagAAosMP/jUdbZNgb6vDZVEJn/cr\nG2yjqc2dCfspZbjMoNC2jsEwjMGEog386jR9CYPITJ/E7yAgsKvwXhr6Gld5\nuggMW4hMBzuwA1b3OYmxenU8Bp/D3ShCi5G+09bRtyLDazk6WGCEbPM46NVk\nLvf2ujeKsA5DwSWubmV7r8eGSPNZyd5TXe9jSx7nA0j5IrpMCUj6uAx2pRnr\nWEJmJF97dBDsQiJDB/O+/NmdA9F6ZtiSfKkujyktp3B9EL6kDQazVPMJ0PTX\nW3xBLNogyKw26pjip9fNzEZZcsqDJ8Q/UuOb+DdDfJO0zRLMKtOkeLPSfqq1\njHbimSfWa8Xr06MsTD8TuttEsAuZYX5eHvZnyJyg8tBFqQKaoHYs8bHsaYzd\nDya+c+/mL8+kE2o5aO8RJ283lI/5QeUyonN/8NlFsbvnu+jphaiXdnAqArgW\nGRBrcKGvATshT1qM/QQ75RDiVySA/tPIBAI/D3o+tQqUrzRM5upycWDUPL5h\nNvD6pW1kNno1PgFv7f3UsN0tWQZfWy+tjgDmetPphmytfdTtdY6tlQWDIDgB\nNfbrB5JX0yah2Ms1+xTNKdQXQQyQgiKuVZtQT8OFlPeqUcLpr/Vvb+qJcBmz\nkSRigmC4+Xpf037v8UMwSZz6LTkGl5Iq0MVIQ01g6l+l66mmOBahR8dM0ppI\nuUHJ\r\n=j1vb\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 layout components that give you massive speed","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.1","@chakra-ui/utils":"^1.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"^1.0.0-next.1"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-next.1_1592732492489_0.6063644090084139","host":"s3://npm-registry-packages"}},"1.0.0-next.2":{"name":"@chakra-ui/layout","version":"1.0.0-next.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e376d5a533698bcb21b37c87967c28f8b2da38fb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-next.2.tgz","fileCount":104,"integrity":"sha512-86+IaoaDV6zqv0z01EisSf5ySWKiLmy3RK3+8wIW7DcnuCA6UrrxdRh7gHs9u3JyCVyHXzHCgODfE7OuBBL60w==","signatures":[{"sig":"MEYCIQCg7TwJ0GozVtjV201QxOktly5rE1vGFZb4UTbjP8R01AIhANz+Q+rKzrhX84/aiKGQyd7uYdIA++mje7qDB93akrWp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":296253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8M/uCRA9TVsSAnZWagAAWCYP/0JM8xbPRNo4hF26Mdon\nyGCMXBqAoEuZP4tmoncWfbhRKPFa2f5jNT3qbk4gEUEoPLrIwf778oLlHccV\nhrJ1RRj51EUMg/6DDVxeeK74jAhrEXp6fuftrgmW4EyJzYd5P+HISolmOcUs\nEm0ZojX4tiDcx2D4sVPpvQBiaMZ2yXJxn0Z9c4+3JzmXRBszZUqBT2DGcQH3\nedUwXRC3VzkhA7dmTHudMGFFujSb2N83kfNygzcFzX152WDQN/i5d0kUgsRd\nsEdcBsUqWbGGS5E19Qk6+ubhZ3+CikmrV13J2niFdue4VkeQqogXaviI9WHk\njsqshbUbeDEB3GlpRPecPP5gDHVmP7WeLJE6/nUqT7/qCk+EfnNgeuDt1Vgl\nxHDiuFQ1wVUZ6kUrwEfRGJ1PBgDkaj0p9EGuhJl7aIauchkxrWxh04TmAnLQ\nqBp4HKS7SttRpmaDvv24e093k06g50Vge9xo/Ztql9c0z9x42k0cIyJTwnJ7\nkIkVQuzPFDz+umNALPE4Jd/rbAqfn89EpuMEHpzUBCCf7YdvJuxp91tIbnRm\n0qsTaJaZHx61IoPdlEKI16x8G9aSwYbkdATMihZx0fNHtpiRRgjwQvEgdt2I\nevoaztKJDlxoNG8cNT/0nxQ4Qb66d5Ah+bSJCQfQ14XZBFtyEDKoo4ressDK\n6Qyc\r\n=+e5C\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 --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 layout components that give you massive speed","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.2","@chakra-ui/utils":"^1.0.0-next.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"^1.0.0-next.2"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-next.2_1592840174364_0.9036778968182935","host":"s3://npm-registry-packages"}},"1.0.0-next.3":{"name":"@chakra-ui/layout","version":"1.0.0-next.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6c6d1fdd07400c1bf5260ff47eadf1fa0a7e5596","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-next.3.tgz","fileCount":124,"integrity":"sha512-ECUJyBIY+vHOkuHpXmpLRqz8C7h+RlF+3U/GveD9HizsMF8ov+il+ajYpm/QYygWTMRpZkiOQk3daRzDViIMcg==","signatures":[{"sig":"MEUCIQDaCa7kfmnOvg8jOiJsWt3VrMjlRJ18H8Y/liW5YS/G9QIgH03WAvrDLAOnR3FMqRcqR04hvwDwYqTIyekz+8K6s2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+MbVCRA9TVsSAnZWagAAlXoP/3YzjQPAoCEpofeGjWqv\ntp5zqif6FJtueR/veydSthHT3v4sTQEobmTuwG1EfKxsRiVosJYoxB3ORLgd\nsFveY0UhaaVCPJrRkRQdLBmWmQtbxHbzAL5CtEZNnqOAIdCSmqLhkWnmPH6x\nEXoPyDdJmQI3JlLyBZk4xnqifxcElC00TH/yOg1KsJp8p1xuxmWodfUxjLwV\nvGUBTm1b0xMGRJPTlbPe6mKJoqNTahSWR8A3YnDj5dLY6KJjvnHYsjEqGZjw\nc5lf0rYO9/Nej9ZiiYhUCvyrLDiVn2+Z4paQquPEGvgbTqi8BxA8dZFvDrzf\nSYcV63bNNId7gFqCp8fgOzFgqYWjSm2Gpiz91wjI0y2ZSAru+HGNL0bMw4Hi\n5QAjUHx6Q+EuKThGqSdYlKeLxCwm1YPF5ruNZvcg1evrq0VAQcM9oDDmq+iN\n4bjoKFKSeyIalMY86PBwks6z8qRVd28Q/Bbg7RL8TdBg/6/ijZf+gMbmkpok\nJB+8bcRSC1Lx8NNtM+US1BlaJkvV9paeweNUql7jTl2Ri0ILT8M3rVrqlYaX\nF2NEYpVKgvBG8WQhBSHjoTmkeH66SycMfZd+BKiGFgrTQkZTkn8DxF8I4jG7\noIXf6r7ORMfpczBes9P4cjJxYWlGq4Mx79cfIQaxSGMoaaX3qNR7LvRZ015G\nynKB\r\n=UKiA\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 --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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.3","@chakra-ui/utils":"^1.0.0-next.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"^1.0.0-next.3"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.x"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-next.3_1593362132771_0.3321115976979574","host":"s3://npm-registry-packages"}},"1.0.0-next.4":{"name":"@chakra-ui/layout","version":"1.0.0-next.4","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"826561dcc1675de3317885c723ae2687f069646c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-next.4.tgz","fileCount":124,"integrity":"sha512-ISHBm8N2itXlNkUUCeimndUZHN+kjpGdB7ZUxManQYCHWE+N+fIcsH0o7XNOaDW/aJrr1F9t/wc0D+252Fv29Q==","signatures":[{"sig":"MEUCIQC6StMs9hoSsKzGOaDCjXyVYoG/ikbdpDUMU5OdtpIb6QIgTPCnwYKWtbQZXcyiA2iVzC+R71/3eXiythxHz4xtulU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Mr1CRA9TVsSAnZWagAAUvQP/1gavsqdDssfej/NT3r7\nDr9eIYU8HWL2G/lGajgiG26SfvhlkVCsJuklVKIVe15BYkRXCkqYkSKreuwC\nmJbRGPLUpp0tngGhPa3V68MJQXt6Ww7NqswPr73rBPhTQoFNIhAHXYT6EyKB\nbNAev0mAWxteKB5NX+/5tuGvXMup1SSYLPfhSYPkxHpn0gp6vaWRYcatfyUI\nayZulPO0x6Ua47H3eOXPeYgzwgil3REaWM2+fHRPffNOM71z9vlgQ61+5bjh\nKCI0k4/aZUVny6nVrcKnZFHrYZ4T/IeE/S7Ix0ivaLSBA1nA83Sby7KcMiL2\nQlTtQ25gxU0aR3Kb58cVMSGrKQdMRYQtRd5gCpdHOR69cxCXspPzLpRSzNvY\np91iqEqBfVd/V8tLhDv1Tms/6D5a1wOJ0T9bsIEtra4F7WHhy7swzk6VyBBQ\nB6yc0dMM5eLq8a5cOblbAbNmIF6mdsIm9L3i3YUh3S9vMZSytFlQA9Awp8F3\nWXCJy0MON85uEY8ys8nR7fQfG8/hH4wcxnujVDfI9Tb4wOji5qSGP2GOPf6m\npHQGw0IQA45ncZ1FDxZODXR7jDzeKvwb0IWkjggD0PsDwNdCmBnaQ7qmJet7\nHwbqx282rF3ocl8ABTxeNAs1uON/CVx+Y/oed1s3mBmzdarKAjiXi0ecj8I6\nSpcg\r\n=fs2V\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 --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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.4","@chakra-ui/utils":"^1.0.0-next.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"^1.0.0-next.4"},"peerDependencies":{"react":"16.x","@chakra-ui/system":">0.8"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-next.4_1593625333108_0.44302572857725386","host":"s3://npm-registry-packages"}},"1.0.0-next.5":{"name":"@chakra-ui/layout","version":"1.0.0-next.5","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"36e2d0b9386577281d0931d956fc8b20476431d1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-next.5.tgz","fileCount":124,"integrity":"sha512-8SdVi3AwlimnE/nHwV5CxZdnCZQABrBgfX4QBeAsSp5PqnWaBzehM/H1svBSfK6Abogib9iLMBM2glsTtbsQCQ==","signatures":[{"sig":"MEYCIQCxf6zhQb/aLIuEngMox+JWVvQBN/3OFZqo0w7bRcmZsQIhAPnwXkvL16xBzijzXGvRTqIbGbbbqq0p+bWSI8al9fq5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":441238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDtw+CRA9TVsSAnZWagAA3hEQAICI2pvsmXwtX+SM03qk\nd9gp2aRUe/8uxx/RK1OfwvJ6wXGfyPNZOixqP1XED9aptA8RnxVfPAzb2a/H\nhmF6AlWrZb3Vz0ARud2sCoMjeNHzmIHi1hkv4AkEcCoZVGioTmOUq7UmK77R\n1oTELLXa4S2Dws50G2l1RPQf4wK6xx7LWvFbdITIQk/otuJYwnXybo6qOsEX\nm4O1JIYCe1GJswgucgyYK88h5m15NhhCxQ8C6fcppr9mlfA2o+eI40bmgBLB\nyIeZGEZr0W/bIHoqQLbnHkxdsBpRfjEdEIvtLXBHY2Ye1TkNUuNtQ2ND7Avu\nG2dYQtsbvv9x6A0b/uSK+8tUMIOG7/iREl2Pl8lne4Y/8XaEMqmo8lQ2EeoL\ne6/sBHu5nbC4Nl+zlwOV3Ru/UfyKzRTOexCjICgk0Bh7I05B9LVrx/jNU2UM\nqPO1j0gi60xtAg6nqJCbbZ3hROQ19EMf3J3rvTD4odWC+WXNJDXNeTJ3Ioma\nG2Ym10GXTkBVJyfr7bbbygugpclc+SvZGRwU0x9x1nJFaVUDrq7DN6ElOzUC\nk2tFkHSHUKJsFS0SqUJRmfvOcVx4y/LRr8Zzs/M3j/pdhyKVizCcY15yvCM2\nq7C0t/dyaNnNmcxxo4xgOEjw+pIB4M7Wbmj7m2QoNTYipMMS65SdKcj9W22I\n0RWX\r\n=syn3\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 --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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.5","@chakra-ui/utils":"^1.0.0-next.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"^1.0.0-next.5"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"^1.0.0-next.4"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-next.5_1594809406243_0.38614559747832033","host":"s3://npm-registry-packages"}},"1.0.0-next.6":{"name":"@chakra-ui/layout","version":"1.0.0-next.6","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"93e38080806712c169d25717210327cf4e968c5a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-next.6.tgz","fileCount":104,"integrity":"sha512-yrT4KFPvZE+XcrVYdvl9kBrIb2tbcj3TwjTcQNg0Mxy4An3TkIOZKNJpfWr1rGO4EMyxggF1Pk1OGLl0AfMr+w==","signatures":[{"sig":"MEYCIQCCVf1mwQGvowYCJfILHzQysnJUEpvTpB63vpuwdar8dQIhAPo99Neb6ZzjhC3dVc/lg0ALgopNV5O1diNHT+Lr/k6C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":411498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDyJACRA9TVsSAnZWagAA7ngP/3szxueUQzOepGV6y3an\n08yUXKXdKZrjxXXY2s04COKpNFmnd0G7zWY9N1bahThoARdJf/k+ka5GiqMZ\nyX2Cac66NC5gSWBne8Sx7/YTzQmWKpuSWCxKyw7psikHE06doFbxVF/TgpZ0\nMV+2/gZ5boqzBQH6Ed2vfy5XvpTueO1U3a6CDBCX/JLO2u0EE0MfUP+OXbZq\neQ93xlJgQujlOegEAcIqnrD5pR+cH1aIRjAAElLB10Fbn0hiQB/tTbzDeC7L\nSKCFyqiLmbaomwnLoY+rTIZnSYA8qmNEzl1R0rYArxnziNfZZUCxozeXzqx7\nDT6xvDqxz5eopOLcBsl8DQhO4hXdsdxCoS3eFTszHtCC2dBNCF/V1H28euyL\nq+X2j7FqWZCDhcodxUXy92mcMB7gGRyX8KaxQSx/ljsks0EbR1KJ4Lyny8bb\nTz2+yN+J0irnx0kDM6DK1wV6qmo2MqjmI0DnVWcPgNjq7/bCeLPBu24onFjp\n+ERQotYLfshKFeqhWF3685dTpZOnAvQv8hOZuF671JsClTNUS5U9abbaKjFH\nePS7ZMs/8AN4xqbS09A6LyvTzXf38KonuYwFTHdeu6q2WeKdxQYC9dVMzDqq\nCb0kjsCvYU9nS6GH30XM3LAqYI2S1jB6tsH1SYEoXtWrmQ4QUGtCTzNUTvuq\nZRJN\r\n=sjMY\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.6","@chakra-ui/utils":"^1.0.0-next.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"^1.0.0-next.6"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"^1.0.0-next.5"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-next.6_1594827327664_0.9528848508526384","host":"s3://npm-registry-packages"}},"1.0.0-next.7":{"name":"@chakra-ui/layout","version":"1.0.0-next.7","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"64400f973f462a8f033abbb2a9bc47422fb5223c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-next.7.tgz","fileCount":104,"integrity":"sha512-0QqRgE9LpBVxFWgwRk7oHv7zw4SfZmIEm+CQQXyrmqCVCnTZKqdMl+TBUWgF86fo2AttrZim/Xq3QVE4e+fu1g==","signatures":[{"sig":"MEQCIBZac9ZoGNzvWPXqrstgw83ynIJo8RL+FEecbXxj60rsAiBV2ydDEeQIqdiEwMkxcoY5TZ0PCOIPIOYY0cLQvTz+gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHX0+CRA9TVsSAnZWagAAZd4P/3pwlDyhQ8ne95lwt2v6\nsBG24gbtOAAlzLTrGEhhEmyrBljiA3g6bDABt38ed2SggjZncdcmuG/lipcq\nkx+CQR182c2MLkspooOYbIj6MLl2afHiqco6kloqi6rEyMsg+kvx7xbszCYY\nOsViLdfXUShAtKwWiG1Pkjf2ynL86cSbMvVQ20R6MsOlcQCcsnrjH9hdjCel\nuvWbypUtsl/ICcUSO9/rlUmOAKLginiu5WZRcY+rgCpRaQObFMa4KVoF6P2l\na1pGjys58DW7YbaFaCVukFK9QvHzTE0ziQM4jYudzK9a1ANNv2SbXIiFbwk8\nWwscLXQzrPWg20EZltw70Ay8X3EQqulZ0fOE3FqgegeRbJ+aSRkBMqsdFJ8O\nYBYHOPRPjt+gsoMyJEf5Z1Xc6QLI8KhFLWBaOE2QR0VybO+U7ujYTlUapay7\nfOK0jDzKFCkFlAlslCwIoJppOMRe9XcR6pwty9OZMjJHA12qi37/IKzHZWXL\nCGSYiVIWU3MM2U6MqYodPZUxhUPWkdPLVQJaZHDRz8u37Xv/qEzvk5MQMf8Q\nkKZDF2H3EuzN9EU+uQArQqhgi8IzsI4J8Ifj2u/oEusTVmoL+BnLBkAxouQD\nxv+3RyUc0BZniUrABATXTgWQiCeyU2JGIy3OSOgmeK5hLivMzQL1oHnwX4H7\nSMyB\r\n=wxdo\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"^1.0.0-next.7","@chakra-ui/utils":"^1.0.0-next.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"^1.0.0-next.7"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"^1.0.0-next.7"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-next.7_1595768125888_0.15603821050634603","host":"s3://npm-registry-packages"}},"1.0.0-rc.0":{"name":"@chakra-ui/layout","version":"1.0.0-rc.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b8676bb8427c278a689f3395be970766b4a6c475","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.0.tgz","fileCount":104,"integrity":"sha512-u9F8LM8Ir9EeKLkdE7XK2rWkk36CFmH09klXXeyNx+YoKvzgCoKHZ9q7uiahZkk3RJejYgfB8uN6Ynya6TswKg==","signatures":[{"sig":"MEUCIQDyj2j+EpA+lEChIqKB2wQcBGqZ4VW6ln6CTuKChDBW7wIgIo3XBfJJoJkT1aqZEShThciH/QwtV/veKbLSD7zPXNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":385770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHagECRA9TVsSAnZWagAANREP/3lB/cGAqdA8dxUV3hCd\nuU2I5zhpMcGKLa8nt/tuq1XyJG/7L7Hd3mXRhO4cPPkzT/NrvDDzs1uPQ7uv\nXp44VsKei8msL1oW0dGaPajMMGbIIVux4bX4DtDOhuh7ySYT9frX0tSm2uaF\nt5zRwDeI+zqBTy0AdcEyiNnFwbS8xIFzBfX/geKNSwwEs9HIeHPPHobf1RQn\nw198Kj7WOjItvWBFqwi0CM2/Z0C8x+xJMgCxstjSjflBsINCjSjIinhqS+/X\nCnVbkuQ0VbJAxfwbBT2Zmoyovg+3xb9Dm4YWJWsCF0ohfm4FGVL4KBKE3ZR6\nDZ3UNLVng4Dty+ljBHz4L3sMfimBhxLJLZew/+S49Eqzh96I17icVzUuWm/0\n5NWcj5Wqz99DHbPcV2xFjEdSSWgUYTGk5IfFSQrIQ5an7W265PQ+jhAlFwOc\nGX9x3QfYZv3gJ6+gnrNoYUmMdNTHs8d8IYxPc2CQ6UCAeXMx2bXAPuiw0luC\n+9aFPddcJSFtkJTK4PQ11dLmCSOvSo96v2lnzAMJhq8nxdwn5kg9mw227Nqk\njNY+s+BG1EsKuket3mfhk5nDTEMwkBpa6uCYLD838BEZ4QARk5H9LJ7GMndw\nYWsQoc0PSRF90gLZlnHPgI/RLvbfYbYrx6/HruDqvBoeo/hUuG7U5TJchMvl\n2mZ0\r\n=24T+\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@chakra-ui/icon":"1.0.0-rc.0","@chakra-ui/utils":"1.0.0-rc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.0"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.0_1595779076228_0.6633048801623183","host":"s3://npm-registry-packages"}},"1.0.0-rc.1":{"name":"@chakra-ui/layout","version":"1.0.0-rc.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3292ac84efa81a7dfdc6ec394a42962556db4a97","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.1.tgz","fileCount":99,"integrity":"sha512-hb/O3ByJZpy+uueWzrpRaYnkNNQYZOvysei3CpaDhpBorBLlmwo44k8SnQEBuYpQpadBTp2e1qakzVjjoiBOtA==","signatures":[{"sig":"MEUCIQCgWOSttA50eJ3OhFiIr2lLPHRT8R3cuasIVfLSfqaLRAIgailbvvGJDOGxdYnW2K8gBG+1ptXUS28Mm9dMAck0wlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHLBCRA9TVsSAnZWagAAIWwP+gL6XrXzsSvNjg1gdhdp\nI6EX8k87cnj3Jo9iK/n3yLRQcMu6/QynoTNzrysm/xQd6O0DwkX9gp5wj57L\n+YZsT8ia6TDWT43nTOjzyq+kprAw8DlPlWv2VoEEsknThl74+fYB/z6+TkpI\n3gUcRpzjxg3ZI3YqSwWRTFzJvuPdccI1ssGANa7FcNdRqLdK9Hbu7gzNuLYD\n4Dei5XE8HQC5XO1nWNB5VhO0Hrg5oRsmNTDF3QXDE1jEGnZnfqyfzWrUZeqq\nFzOW1HDXl81xNuALj5k341KF5IHz5lEIYXyICfUhGPekZAl/0IJW2fmhQDCE\n+6rTYSI8PpBa+lkQuUepRoyw+CLp4V46dzJCGb4bnMtL9f/6BY4s9y6Z742I\nKUhic0/NZPLXXItqrzHrp653DYKSg7L+xTaKvTL75y/8EJKV3uCzRAh9toxk\nHUBFMjMH725urdoFauvSVLarYtcMYJ0SleuMcXqh9B9ttjuL9fW8x0TyJJn6\nhQv44+/irFMmNAV7eqZxjV8iLIZBKw8HgUxZk2onCD3VlRplfbFRloDOOQe0\ngTsXCe9VC/gsIOzVGusPFmjZkifPzNvTdlZ8k57D1v8f7UuWqDB1bSouvvBC\n3lc6YfvVYJKIOpxcDty/RXrYgFsazVAZb50+67V1kg3ensBBFaquufIpI54T\nl9O4\r\n=q+/t\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.11.1","dependencies":{"@chakra-ui/icon":"1.0.0-rc.1","@chakra-ui/utils":"1.0.0-rc.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.1"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.1_1596748481336_0.8545561002587234","host":"s3://npm-registry-packages"}},"1.0.0-rc.2":{"name":"@chakra-ui/layout","version":"1.0.0-rc.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d75dedc397eab7ce1a22eba9bb78a64cf6cd2adf","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.2.tgz","fileCount":99,"integrity":"sha512-WY/EJ7waXB+FZ3cQ97EP964dzPiS0A5RmR84MBLcTTpfJB5VjyrawvjThNJ2D5HCQOMOuCZJhbmKnWg+f72hEw==","signatures":[{"sig":"MEUCIQCp0GQVXppK2MMtG5JjzQttLaL5rcS8GImV4vZqB4I1XgIgBaFlEuUKA6Vlii4KlMr7ivQZWAVEF5Z3Q2PYzvS/7i8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfL97KCRA9TVsSAnZWagAAa30P/3cAGIL9Se4TVRUXXcu1\nhn06VgbGRCSXsIGj15qRW9aRNiJ9USyDlnb1oHwfEQvTtl3qRTBjd4s8fS55\nLEz9STpUifP1DeeX3pmGF2JiFNO7l8vRw4gfNvmpwqhhGHV/z0FByzIqeDOZ\n5ijg9dWGMWswJWoJYrBtK+8S0H4QuifRaQvPMHpt4a3+rKK4mFp8ydjOUrKv\nHTmJLVEZwpgYvPOoCTHqD25nQ79cgc+9byCftvQyP+EwFnksEJvsGW+KdEXB\nPAci91jHzpU/7GW0P1IshDxYGd6STjaN/DAqpS6p+0BRUB+9Fy5P5g2v2p5I\nzMH5/6Y/kIhFia3ACpuV9ASXdPaoGq1bjBdPPY96/RTpm2C6oR4uUr4Af6Dn\nf7Wk+7BXNs41I8YDw4xqFbK7tnzjuOsxPa+LrkHOrtexMmZFNTFP5t4KQCDF\naAeTaMe6sfJgXA+OZgC+UKa63XKgWuY2GMKgnqgYEtrVsJYJrr4obMN35AuI\n3qNSvDIVzPGa6pvCLMkrxqWYc2sLNfdMIwYQYEUcsEWGlJyw8DEgCKyc6waa\nOtosoxfZB/dZQU/KENCxW2BdHvRsYlxEbzPC8mjIvCAiKpjEwUmFq5D6FN7j\n8Xobwu9QdxshQxRN9mzmplx6MpoUr3vQWHW5p3j+/mnnTdHX8f614aM9+/C4\n+wfH\r\n=D/cx\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"@chakra-ui/icon":"1.0.0-rc.2","@chakra-ui/utils":"1.0.0-rc.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.2"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.2_1596972745752_0.7007153821937466","host":"s3://npm-registry-packages"}},"1.0.0-rc.3":{"name":"@chakra-ui/layout","version":"1.0.0-rc.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"633fbec976b9186472203dcb0893bd31c019be9a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.3.tgz","fileCount":99,"integrity":"sha512-Pt29DMDUh906+0vip6AOU3R7kMi9o39neczO/k37Xf8AKw8G3B81JAxMmPgI03yToLDphVLoy/Km8XaP20/2HA==","signatures":[{"sig":"MEYCIQCT2z+eWV94VSbI8bB340hBQKQnaYuJwYPafWZR+Ovs9AIhAL8wj3G3ODbUtYF4WOyC3YMan3PUX8mPfQfAe/Dji1IQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":431416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfS8YSCRA9TVsSAnZWagAAaJkQAKQ3XospuViiecFdn7LM\nVx2Ny/c/FccwzYEfa8QYNia5+2T530VdKHDtTzJo2gPZ8b/jWjqFLzPDTwbS\nTL94Y5RFFiz+I1X+0bb1UgyrgDlc+0PSYBexhv4ROhNT862qTuN5oodRAItR\ncEV4QinXA6SDwznznVOXZ7t2yYIlquj5D3Lw+frXsPGDicIR2f6FqGZ4sOZ3\nVJKxV7Ceo2t/qcgd/ypgqY8CJNEkYQB5ceGENfVD769gKjEtAkNgEy/uIDS+\ns1XGzPkCvQXYeUGtgGkmOtElBw0MnAt1lGCqQocmq+fdtezQTx7HWwcSB1Xx\nUEykPv3cfbIhZqQSlpAyxG+CSym60N5ataME94wxkQ1u5Zb/YdO+DSeDs25n\noFePRhZGPk+qHYUaOKgGVzRJqxNwR68RvhGF7DmzLH9Nr5mxtfrQ/TORFuN7\nGRABRPWkjnNEFbIGLNMmRKqE0sXOGSpSjEnS4cB+QfSto9tdMDPfh9Ewl9eS\nwCq4lagHfOKDcD4ftXXq0yKQdN9UPLOI8s0IpUd3JSBlR8po7+MKAE4Y6JxI\nW8zldvBoXY3b3cXsUwDmAj85Rx8X2y6+AcjN8IfZj9YpcTTJBkwrAH0e21f8\nSzFw3k8+tKWY9eeRJUk+T7y/6Dk1VQfxnVQK5zhlF3BYIMXFYj6itFRlHVrP\nUUdS\r\n=v7mg\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.11.1","dependencies":{"@chakra-ui/icon":"1.0.0-rc.3","@chakra-ui/utils":"1.0.0-rc.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.3"},"peerDependencies":{"react":"16.x","@chakra-ui/system":"1.0.0-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.3_1598801419387_0.6380750085693228","host":"s3://npm-registry-packages"}},"1.0.0-rc.4":{"name":"@chakra-ui/layout","version":"1.0.0-rc.4","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b401dfc597a33ab8515a713129f9fd4ba3a39266","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.4.tgz","fileCount":104,"integrity":"sha512-QiipAkrAKCTXi/0zVdNvj54sIYoXhkOwTDPLI4FoqBBh9eGNaahDlQPBNU8F2owI8kJ+On1wEdCmzS85BZaKyA==","signatures":[{"sig":"MEUCIA5E5rtwQHcxK49trqoJDt5pc7DU5UjugQo9TXdEHQKnAiEAtPMwt7SSqCujrIsLbg9zAB/Zvt9rn/2e4C5g897PhOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbfn3CRA9TVsSAnZWagAAqsoP/jOXlsu+qSMNkWO3vqgX\nkmBHb7hBLNggktZ6OTRrOUAzM/pVM9Q76jxJ6JuRX+xGRJSehV55q0xY7yW3\nOHHyQItSXDrxAHpWHqDEJgTlpBGsupQFqGxwnjBi+2Zx0ASY6y6sWMS3qSbZ\nLrzHCwomDykEsm2fLZr22mxa5BAhZ+5WCXsz8OAqDD1a27nJI699nWLAsw1j\nNsrqxf4fW1KEEWqrPWuxagb/ynAx1GB/PxALWlM58MT9W3mFY4lp38db3XPq\n9KkEKuP78HGNegLUJXcHlg3F1Y2q+QuuZMd18ym/TIIA4s8XLRp9JMGfXqMu\nafSF7q+sJ5ETd7Sj+MCzJdQrO/+/UROQOV5JP3EADTuq2f5zxQIdf5Qx7M3g\ntX6APG3HQr3pmrU3qoUEBYY6MFMPKBA6k0TsxB7MFghRGAxUqNy8Kfzt3kK1\nAnCI5LW10Jz9mXPYZeMCHB8cM93c6J1hHjCAOOCksiU9cK4LRecJad/59SgX\n8d3JSASExx2UU98cOSAkrgtNYbFHaVZIjVZmbQgc4MJbx+8m6fSzjbN0scRb\nHQc0kgG6LPLY7FYx2gF8RbXrud8fiqi7NwMUG+g1kVBJobNhLqzhrU2ReFbe\nEWB4ArF22nkfWBkvTcTROWLN/7kBLrE3timvW7xAqmqOFbmZp8Eol9y+jpOr\nFO/w\r\n=Hegk\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@chakra-ui/icon":"1.0.0-rc.4","@chakra-ui/utils":"1.0.0-rc.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.4"},"peerDependencies":{"react":"16.x","@chakra-ui/system":">=1.0.0-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.4_1601042934694_0.3966748521810066","host":"s3://npm-registry-packages"}},"1.0.0-rc.5":{"name":"@chakra-ui/layout","version":"1.0.0-rc.5","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0ce71537f6c43bfa1a42c64872b3f903c37dbb3d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.5.tgz","fileCount":104,"integrity":"sha512-CIFHFe77TyB7TPbhD3iKI+FmwHYcrM/5oTjDrp0829pTL/NWoEMWcoAaPSf4pBkftMFiM0qsfEAvQcdC8fO/YQ==","signatures":[{"sig":"MEUCIQC/SIcJmPSuFmKJ5uK7xcv56MpGsdoyLNVUS32Ny87d4wIgZctxM2RAkWzA8x78MYaswu2723Qghj+JlCPhHxZrGCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcPW9CRA9TVsSAnZWagAAm9EP/ijSomUrRvOTKgy+LTB8\nbx62pLUIcZCnme2ojZ340GPyaS9eZvtjs21wBiUXCpA+llfWqOv5w0r60JWt\nB6tWGvZo+TiBjdYHgTk/8GH/9aL2mfdVTCVZ575mhtKd73QV40SYkH4djecm\nKTqBlBpexchwBuiNK6KkW8mIsJE0tZRA5Tcui2Cb2yhoYRbiLAJgmTHn59by\n9EfDVYR8Kjf8Qi9NIPNj35/M0Gaphoz9XVxowSgUNzWIY2TOiu0VEx4ZqRJ/\nUMjiNEO/PtkHNi/gc0ZRr9+nmSFfChamSQAIQiISZIYtQWo9hs3mHaDwpTE8\nUTCscJ9sX26an1KgWxajK/7sNJsSXQ6Qqy555ZmLPfT16ylDI2wQ9N1G5hwK\nbMAna/jFV1eaWz0+HlJe+1tT+IE8XLvTpu7wiZ+R/P+PWJ1bObdJ+yp325Zo\nO256sUdlrAFEPhcULHAe0Pd4CMuwfg9tMVaXROrpht9ktboLzWFwCSLnK6MU\nGTRUhrtkrFeeF+MheTGScSnuixAKIwiILDWIfR7ojXND88ShQv85RhpYVfzN\nyWU8UfiRTw8x4Csmn3CafnWH2tsEC5z/owzLwPZ0vhanlpm/gdJdgH/aRpOZ\nlgOvMqjpfZFv7eigVR0sc7QLm77xQZ8EH2D3/SdwOrdprMCefpbdW/A4QH+U\nK3XR\r\n=GFLk\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@chakra-ui/icon":"1.0.0-rc.5","@chakra-ui/utils":"1.0.0-rc.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.5"},"peerDependencies":{"react":"16.x","@chakra-ui/system":">=1.0.0-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.5_1601238460741_0.5799388561258219","host":"s3://npm-registry-packages"}},"1.0.0-rc.6":{"name":"@chakra-ui/layout","version":"1.0.0-rc.6","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"258cf4fe63c54ed0dbd865cf2424f5804d7ce24e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.6.tgz","fileCount":104,"integrity":"sha512-k9gDAFIgDVfuLbTtaVoOcUux18UAKggPmqDw/zq4kBUwgC/2ukTDwiOAo49I/Xw9WUvp9YSF0Ptq7/zfoWhHlw==","signatures":[{"sig":"MEQCIHFN0MbTm7I9IYE9pmHOSYkb6aAV98ho8uiiYecQ2lOxAiAoSKSq6cRxk5if8y+fNA2WsdEmfMMt4P3z6mq8vIfXNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":260227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflZ0ICRA9TVsSAnZWagAAiGIP/AnN4+RyJoYkYaSN1QYY\nOKgRLpJXoH31FjAg1nJmQ88FDLbXl4hWsEW2o8uThCpcmiw9CnGiDobqhLdS\nXV8etErDML/WPrpVpLw/0QbB1SpiZTeQdXGrswrD68FfAL6s7gKug7AUy/KV\n0fPEIBSdxR5yY/m3uR5QXL5jHyID3noHW2LRbK0MYHJ/3I2YBl4TDuqnjM8q\nDOopKt6dEGTeX22tzOymllEU0a3QenR9cBi/CQd6nli5BVgvhlrywmXk6fSU\nebOIUvQ7a06ZHRDQkm6jwfSdJRQ6gO7r1HaAsi8+krt21lHhcYJjZ+mbhfVu\nfSMy8w/HaLNNs9A2tt6wSSoIcfBuwBJMR3vfdsix0uIU9Fq0qjxK1R8JVVKN\nlVjEtoa81srd3HfsXXOThJj46Wl8IRwK0a90VYHA7dvimXv8dvYjMKKSBF6m\nlCZLxvU38HuVV9hZGMUU++9Ni21Lq13Hsn6yHjKG3rsOTBDjc3w/KCplzjc+\ngu821rVC8Xb05DctuI7bjCcYVt1qc9i+I5PqXsXm8Eg5wJM4vI6FrqSVv/y4\nkp3+zvBJvy3GnQaP0/D4gxBH9DL7BTWsMiGCR1uktv4PyAAoNvcfn1o0Ke/y\nBXNkJzl1RIv5yuTW3MxNCJI806kYlpbadv8+8WEgCo4vDsM0WnpQkVxzkkwm\n3UTJ\r\n=gx3m\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.0-rc.6","@chakra-ui/utils":"1.0.0-rc.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.6"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.6_1603640583770_0.5285031055442817","host":"s3://npm-registry-packages"}},"1.0.0-rc.7":{"name":"@chakra-ui/layout","version":"1.0.0-rc.7","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d4728dad9576093238ad149af4f301b2d6f96277","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.7.tgz","fileCount":104,"integrity":"sha512-DuFHgj7fbPkoLn2MSCaUEap9oDvcMSYIyovJYY2MDw0/xl7v1Nbp4DaPSWTJxLz7Bohv43ViNFwrYaPkSOO5EQ==","signatures":[{"sig":"MEUCIE9v/DBPpOW//fh1AGjWxvdwarkLxwwEYQf2lg7iEeOkAiEAhg5OGxL7nlEJfN+Mb5P7v1Jz0CsnJtjkaJXFvuL/Vnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":260317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflfBuCRA9TVsSAnZWagAARmUP/jcO/HBWlo++V+ssgi7A\nmThQKF2l5zN2hIQDRjpolxQiYGgMS/P8Bz3jsJ5ctcsuIjtBrojN38krQHyn\nAsJl2pWZClVyKlkDTgpV+1L5/yhlbH/FsucGeTn3sLSGdOgDlA0n0OIAd4NX\n+8VyVQCW9LHAARNxdGIYnYX6OB3zcuEMF28rr/PAZSYD30a6zVNLxw1vqxKe\nGDy0CJnConMGPcwgRcSnpQ70muPNH0eGknh1vHUTY5WcTtzYuq1i4+Y/uTr7\nJGSiH+gg4sYzAh29GJuyqrzWUArYIJQIPJ7GcuTTUT004PkuD56rR+nvAnoB\nXLtQNz7cdbaSZUuTTmSyFWDohVAPjm+H+1nWSxIC0oQpQezyp9ZfnNwK6DTu\niS4XbBe+NJxb+tBefwCVLn/7npB77fCBX8LRgySDswNu9+ZRzF7Fa55XFKmQ\nitEVrdiQpkMoC+YdWUaltpW8fKou9V0dgvmLzkLO8q7WaY2fj4/sUku5/uZ/\nri9YXE4+KJVNla3x9bO8Wh5aDtYOhRwF76RtOq9y75Kgk9oq0nOWHFffx0RZ\nj8WPIS30MElIP6jc84eKU7dQU+Q3emMGflwKmlRODO74EpK5y3hxofNNvi50\nB+pXZwVY+B4U1yPqcchiISLkWuy7uPKdcwrpxwmeZdllua1zyJQmZyv3yrYq\njbGE\r\n=S9ex\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.0-rc.7","@chakra-ui/utils":"1.0.0-rc.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.7"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.7_1603661934024_0.6705868601872345","host":"s3://npm-registry-packages"}},"1.0.0-rc.8":{"name":"@chakra-ui/layout","version":"1.0.0-rc.8","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"62b3eb050d476d8cd4c87efbda48221d4c1b7c61","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0-rc.8.tgz","fileCount":104,"integrity":"sha512-nDocS9eW0f/dnSFtkMYa9aOSUkawbUSOJHmEMRmd696NW/cf8jYWifZPcSWJHqw1V8NR6MYgGLYJ/fgdlT/OGA==","signatures":[{"sig":"MEUCIFQkUzB6BQLkd857izwT9ofDKPGd4ktSBxv2xiq1dGPWAiEAk4xYz77u7iOWu2UrttbHI0dpH6iEmqB6aP7hbG8ncV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyUGCRA9TVsSAnZWagAAbDIP/07vZy+LscRoh+HQj/O9\nVvZE+VoH67GtQwrr2WSKKRlnPdt6xh4Vn/pZC6yQ5qBWezxysCXbP51Met8w\nAanEgbpnuPbsNxQbjzu2UDj5JWYrmxZhBwLYKjnLjkhKDQsIGyIT7n4SVhgm\nqVNnddFz3wWr5P/AKe7yFyfGQtpdrEfCZVkFef83ZVwIBJTCvZy5CExvAjCZ\ndJQixOYkjPnjGbXyxSmVGrqeZ7Nb7neAQIekP5/iueZ+phSs6mhOAzRk7OEd\npWxCnAVLQr7OyN6FqYy/yAf9/C+7+X4GUvH4DoOZZgbzHwtS8WfBDAoj2SxX\nTZelOmCx1qCaYXCCAdYlahGFTkpnyE0NbnIbiHhrDleMp2D00ZKkfdG+Kkm4\nGgp/yQjAa0WqDXGza2C3XqaVPmiCjaDNVRHTO8J7Cpgw0Uu6vpEy8hJWtsas\nntKJgVYcoX/t3uRkti1uKPLFeOL4rZect+rC/VGd+fJJJ7SGgk0GTI+s/6nm\nBOEziKDlHhSog7qGJND3POwU6zp5731DcnwCxWlxL0HD1/BdGdqHb1yzrY8Y\neTWTuR7Es9bA/fxfRfp2sPJvHCCLMIcXapVxmLllNyfJzs7PogE6EhFzUESH\nwyituB9sMbLLTiXozQI30CIpVgK+sxYccFcv4MNPRDafh2z3v/Gcv8SPVcjX\nMjev\r\n=qCxx\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks it's\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain it's child to specific aspect ratio. It's\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It's mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center it's child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container.\nIt's mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.0-rc.8","@chakra-ui/utils":"1.0.0-rc.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@chakra-ui/system":"1.0.0-rc.8"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0-rc.8_1604003078244_0.8767334134984963","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@chakra-ui/layout","version":"1.0.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7258c64cf12b65f81acd98aaf55e7610d6b51aba","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.0.tgz","fileCount":104,"integrity":"sha512-2uXKU/iRRcGxkyXpmHj568Thf5/DjqiymrH9/OtVKsrqhA+JZmzfJERXlnEnTKcg7cws7Eui+ldkeWFHKdGoNQ==","signatures":[{"sig":"MEUCIQDjDKBPmgLEvaxqzK/Zl3keq0akOWM2EhKNT/QO35ynwwIgXhcYvH9zsTkiz+CFb71RzM+GZ3YMU6t+LXaP+ceiLQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":271023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrl4ICRA9TVsSAnZWagAADiwP/2YTkBybiYmkNot0FewA\nJ8bgldHuGBCSw5Z4JTMY7Y9UdbhwMwP2+IPTjMJ58PYbZdIlu2ucLka60uky\nOvQjTE9dzdPFErnuDmPEowqgzsqqLJr4Ee3YaGS0zSX0hgaSvNh9FQHQj80H\nwq3B7+5WkjhN1G3XBUvHgdzNGPRQT9qQC0jh/8iyFny64eeA/EBT+90WEfiM\nWQhNs4BYjP5/G7FJZxOkrb8hIgdX1gUWfRJACGlu3JvMTxr9K03ZDcBlnlGD\nHJ2POzCU5BMLPrNICRb6rX6yoCN86u5ZtQp6F+7ZQDPD1T96eM6yJNoX93uR\nm0YGqBEtCEArdIiDkquto1oIXD8wXunwno1OIXoLh66q0SHKCSiy0BIokLa6\nIm9i7c/p3rdqvfRlk71QVvKuQ7gabqCM+Y+QyXw4MYAjtxXUU3T1InN5IHky\nt7R3vAk2MkCGiWplotIlVi5LGlwGPHF1z/q2b1kK+YElSU0wdQM+76/8bwps\nq7VgJ0KQy/59EoMiV+81KHyNfd0HvOO/8D5b5b+1YNCHhu6iwgrZ4GhkLDrI\nVIhgflRLQKq27NjQ8iB1UxMvwpXESBjXiYA/zEhMAHYCQpA4JZnDqKn8TzoG\nn7nIeEsIO6f/Bhk1d6la3avz9VNbkj4oC1oG7iWqNIixKusAFx1ZGws0t5TV\nj9+R\r\n=2LLS\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.0","@chakra-ui/utils":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@chakra-ui/system":"1.0.0"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.0_1605262855846_0.4732852075407141","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@chakra-ui/layout","version":"1.0.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b09a235c4e2323fa21ebc1334bd3abb6f7b68808","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.0.1.tgz","fileCount":108,"integrity":"sha512-OqUrmnWkPSaJYRgbUU/foXedqan0TyIwX/BmwJr7k+oVIItzPgYKzLBf0TbUwpsqz18iL4wjHbUSFl7EVJcDfw==","signatures":[{"sig":"MEQCIHsgSY9cB+dBFXEAphNIDco6OaWm0kQMKvTcb4n//gtVAiB5002bZcu7WX1NbKEylRP63UTREVORqdCrdEHASldqJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":276449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuB30CRA9TVsSAnZWagAAdLgP/Rk2bY6UQdWZM7g0b7nK\nYXFzRZYsfaAR7MdSoiwEboHzuOcxNPIOgDS/WUoCdbLA7uFhN+IGQYJ1S60H\nlACvNrw72PmJV652yeZC2RqTDIc5OaS6rXZIwbP+CjoHbsAqGuS5bN5jwbK6\nQ8XminZBV8IS+7XSkLhYEV0u2mbYQfhd+fSyTUChOmdUTBWySeMRtHkBHVk7\nBHD2jB3gafZb3NQrdsE48tZePodmGOGk740SSL17Vl7by0VIXi68TKQ1uJqo\nyBL6GkS5Bu/N7huV1ZOuuiGbe7GQMv+ZmV0RhI4UZhHXdecPaLB6RSJtD3bf\nMQvzuhWc5wqxUbVX3yBlqAyuARxH8/mlZb5Yy6IroM0WJfYp6OIl8iC/tC/e\nsKrZDe6UGytSmeI4Promjp/bS/qzPw6DZvGU2zYnlI7jDcO7O/bOUKGeXTu3\n/iGd1G+PXFWjFky5pW8mE17mVMQsWBGAs6YGzuzWGXk1zyhDnsuDqAIgbFiR\njrNVAgas8rxNv+Z9ZCiNB2FBd2FokfEtEXxTapa3LSIheD8PpjyBSHRtqL/4\nfiJ7pOJNwYKW84u49qtImEIPEXfl+DBX9bxgKhpoNbHaxGQ3XabnqaJUfrSI\nNpNhOicS7KPpF/PYKkdRBqKua0R1M8LNqGdXkTB7wa3kQMuweZCGiEsSkwy9\n4ioS\r\n=gisV\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/icon":"1.0.1","@chakra-ui/utils":"1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.0.1"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.0.1_1605901804616_0.49937669249326855","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@chakra-ui/layout","version":"1.1.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.1.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":"a90a74f0a5b3a6f72cd80f3168153519c53ef77e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.1.0.tgz","fileCount":108,"integrity":"sha512-sYRcUjG5cokK4HFYSZAVjRgNrlgnHPwGIez293HT3LIuY+6VuNiYeRcJ+dh3l2gWf1ziSVTZjQN/my5ip5dbPg==","signatures":[{"sig":"MEQCIH/qZDOcx53YH5T6oFsEthFAUsxxsgMv1mQdVTpmezTxAiBKah3tFMoKvTK3oIlU0bpS2ZwjxEtNTHdq23GWkKq1dQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":278638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfySvUCRA9TVsSAnZWagAAL2UP/38itszEz6IqigYIPCjt\nxUHgGne+SlfSeE0MisOxGviq/Uv/bWQwVDGlrY3/xTwTZfn3MBS6q5aPhrHA\nKIYS6ZX99CGR/ZsNB4GVSk17A5ekpZaozzIXvAKZhui9/ik1/iv+UdIGhXPr\ncJT+XJlO2BPDKKmV7tBxItBjknVyFOxrf4j0bbFs6vEjMu7fLYUtxICPkSG2\nYHhkd4EeQgyz9Z48uw/Vv4hQ5ZcXmS5Re0y5CG5DKWdFjXxOg72L61hAnzD0\nS6oPOI6C9kFIsAt8i/WoIZK9n+RyxGdpcl/dsIsTIpbtXx7uJ8c0Yg3yUUBh\nbrONRKLMS3DUzcxFy30fT//bJQW/atq+bN6JUXPMmUopF16x7YQkZD+VG36h\nIViM0FpX2ZmFnMSM+BEfgzoHFfpDCCsII2Rypbot4zGFP/0y3mLtn8/tk05c\nKAZ2R2DJiS10jtSAROkpYsbXfCgzQXPrq9yrxNQmcurKxZNk4HeAnFgSXosj\nnz4qCM90St8E3ftd7R908MMqSRhT+/nit7Qgm4JhO1Ln4pchzng+weJ7Ggiy\nlhV3mwUiA7vGzlbQbYShJPOGKbx1VDimIgoGhMCGRIt1zLaezCKyT6JMfp0n\nY6fpw30fFV1vuJ4AILoCMSYI1pzXakPq/CrB30raoo6WVm/AEHIy29H8gS9P\nqTLf\r\n=VSHn\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.1","@chakra-ui/utils":"1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.0.1"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.1.0_1607019475549_0.3760940430080424","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@chakra-ui/layout","version":"1.1.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8831ff9289c8e207e308e16770503e605ba81975","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.1.1.tgz","fileCount":108,"integrity":"sha512-BHhIwzKRVpUSayQkKaB4/AtMtMiB4V2gCd0WlgCs8d6GTl0yk01oXgUzA99DbTa1mLs5zpmg84qtcuRZnkvjLw==","signatures":[{"sig":"MEUCIQDI7kxZyAbCvmn33w5cKvFaOtay2DNfytFjQF3hnYBc0gIgCeUzY3DYbf5nFY2sazPMwiR626Now81dxg/XxPVC1Rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":277330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf29AZCRA9TVsSAnZWagAAcIYP/1s3b7Spfl8zBoXBPJT3\nw8bRTIhv2Gv52aXrCWM2IGt+DzHaKOnSU6b+YfvS8XYWevO3Azheuafo7bZq\nRdStZ9oD1wZ0igaULzZbU/WgELoyxhcvKWmQY7tKKgNv5PCFAgfLiPE2JqTu\nbau03m9ZLg8OnqLqjO4tVsMqUwTgjkKV+nD4xDezgFG/pOQnXW587o3XpltA\namHXVctO99Dv5sX0kD9hfM2NtNQibWqwgSo9Kdc3H+rVnVwjVh7eU+9PRqWm\nkED5x2EwvBsvq/FOkVHzuViBc1RE0ZJNu49ymivKbSR2SXIqXc3eFc1zXMCG\ny5VzBDmVtkbvWnD1uql/ujlQFTEkFVXz1B3yZqGaDTW2v5rrbsyhXMLih5Lx\nbb//o1ZxPZ7nNtrWjD1szATJNQ0bEgiuyFzXj8sw6Eryc65M3a/SHrvNQxNi\nVmves/nHC7fgWSPDRaTwB95lB+34k2+TcoynyRj4A74eTAHfbs/RoUB7SSzu\nM3Yx9VkQbV5et3LjTTTuO3N4flD57x90QvsLGKPOGQhPyi6hoXHo6lOaL6Yt\neQYYJ8E7QXLQ8G8yOvw9C10nNGfSxtSJNxAi/0fbf1hneOWuNxXRsxW3dwGC\nVst65ogYLNseY8el/DRJrt+nmOXBDrxZ7aDWIOL5Ki5eIXpIuF5H8ejisO5t\nE89c\r\n=YwiH\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.2","@chakra-ui/utils":"1.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.1.0"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.1.1_1608241169152_0.8306740035239968","host":"s3://npm-registry-packages"}},"1.1.2":{"name":"@chakra-ui/layout","version":"1.1.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"bdd33c568bdc38ac81164a7feab190120ff53198","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.1.2.tgz","fileCount":108,"integrity":"sha512-wVc6miUkriXeamFw3Ru4+i+PC7kFMhZxQjzvvoQ0f+KVkvyDbqM1tui8/B6ISAmwtbMy08wbqxQ8Y/sYHDUIIA==","signatures":[{"sig":"MEUCIQDXXr841yrxVtVfIavsF5X9nmzHzDEXXtFnFw9D6LbLHQIgBHeucD1syOM5KlG64HQesPLW+tRbfb/yug7pX6UETyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":278797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8cJcCRA9TVsSAnZWagAAB1QP/R1uWlRnjDYDESxu6Y+X\nxztM36xRsvmSFDPaj7J+3+QBWZceD1jueCUovcFQ3VZWe5XMUQtbZ7fVLpOz\nLOocc/26tRebtVI++O0HQsyZA8X1dMlvd28Lqnj/H8gEfhCjimBG2IsrpF2+\nLdRl4TAx+s5cUeUv2OCnRvCsiLux70F91fE4m2M5prHQSi30qF+mYQ9wu2eZ\ntGq7qP75an5RrQYtoV9FSb5H15dQwMgjmGrAPveE6CtIRyU8ZUuUs313oJl0\nPUP2eR+XLOY9es12eGX76v/Sw/fmmR7tSwrg5tiUBSXbmnuDiXn0z7JaK1z3\nkZIFYQ0bs2FQzGZQt2kL2MCpIFSrAOUFJUA567xmFBBtFKL6tlTGgZuFPwDZ\njmCZjmZFFO6ZQs5ViPeyFuQD9aR5IZP7XOH613TRh77bPC1YJQQk1uM8FWHf\nHd7DW447ogi76q9QIAymXNLa8tcdksSl3kaiklDw5LsqwwNnk2Vu01IdYywy\nRXDVO2NwxwUE/k4DzLPjiDZKatjHRBYTM0hKzuc+n9iEAtQlOkwNSKJ1trg6\nuoxDN2PHr1yga+TqCRNlsJjwY1awoimfXn+WGnV2Pv92E7Gzp1huc8jOSvRZ\nWvLfiaV1Rw2KRozVzL1SzgpwvKJNW6lwnJqJYaSS5Neqjo2BwrN4CACAY7lb\n4sDm\r\n=IJ3p\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.2","@chakra-ui/utils":"1.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.1.2"},"peerDependencies":{"react":"16.x || 17.x","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.1.2_1609679444691_0.4288501991875604","host":"s3://npm-registry-packages"}},"1.1.3":{"name":"@chakra-ui/layout","version":"1.1.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"fda4ac35e5da98a38b5f14981322c5f1c8f0b850","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.1.3.tgz","fileCount":108,"integrity":"sha512-6ndSC2YAtd2LPBwMqCZ9QEBI6IEDgTJ6RrBt6zm3stUxwUu5zoNWJcBV8bBxkk+WDGBPkXSrnBPg10MrIQVg9A==","signatures":[{"sig":"MEUCIC50HCkkacLspEas8EqJAQ5DIUaXVNQOXkpisSHxT/BhAiEAwBmACoJFOrGW3viHfx5N+r1rIVF+7LQvRWC2RHhrj5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":279005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/ISHCRA9TVsSAnZWagAAYhYP/0ivekjfV2zrpidKsxrZ\nZ7ggVLvsAwOqPSKRP2uVM+CAtuOm8TjtGkh9DuLU+KL76GJOqc+NHYK71/II\nOwcMkRmQJjST8eBSFzPRTrmQ3VnyTOv79BcNQGNGFu7t3bLrJaE6MNSWmlhg\n01fQ+McGSaJxXYTfpSNBOI2/Wj92ucMHQKb7/MCFiv+K+OW2+KVy+ARfR9qo\niS8XH1uLmtJfCsmvLHqDHtYYI6fZcqgEgzvC9QxM+52zGNo/b1IERo973dq7\n4KbTMASmjAnq5n8VXiVj0MAUf2U6L14YE55EHMk3iaGrXVRUqXn8qgsZhHYD\n1CboSFF124203MfCZcNRvmhPMaPvmew+SV6CU+PaH5NVcEmR7oO9FDGVNFrO\n1X+Ea2cUVwuTSq1YJt4ywbEUshF5+yfWvnNfNX6hFPabmVMLv4R4gcgcw/GR\nypaoXn7xBJmvL7xiXTPXjtZ+yWHDS37JGrT311fTxc4tphvfOPik8nV4aWv3\nikAMCEshFZUB5X52+pbEt9WK+JKIMz5BuvWOk/mmwqMPP03bwjFK8qb5Raci\nTRdK8l6JX4xEiCUekU4U/MejU7MDEUUcTZjU4JenKnUboXuABDjNL6nrpojH\nQ66woc9l7+3TWqZWMeBHH5SovaT06SmhbojMuEATUxokE4xzBDJfFjeQR8cq\nY2sk\r\n=F6pb\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.3","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.1.5"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.1.3_1610384511995_0.8418364406341039","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@chakra-ui/layout","version":"1.2.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"06e5ad78a4fa9c26335c320a20d832c000507d53","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.2.0.tgz","fileCount":108,"integrity":"sha512-xcMPuVt9t5qJgXbds7IusGDbKUBz2OqXnEKOkIe6VnsdC45nDsZkkVolA1jClJ/o1o4Ff0crY5aNBSZ+NYRGvg==","signatures":[{"sig":"MEUCIQDGCgIMLhQkCHtyedtjVKbc4bd8ozgWYVjsWQZqmbLRmwIgZ+Loc0SDDBoelBGDZGZGtKotrfvbzs8LGtGRQ+YN0x4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":287960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDYu9CRA9TVsSAnZWagAA9Q4P/0wuMKwdZDb9UB3ZASpy\nJjAGimjmXiBOD79YqftsXnZrVd55JG0n6D6PIa5KGEFY0grOXqyEy2ahHAN7\nOUOP14noxydSpgrTj8GHKk63onEHcOcAZ7mEQV1ubph0h2tk4eGp0qDegH0O\nyvIqntAVWrCCtTr0asF66NIyOJyeroy0XxXkqUqNCv4CR7mDlOazlY7PXNaI\ncAETxcDiC2xDbmC1g41PYMhhbnUqs/aTZ3rnDrMI0EOW9fiwk8qxzoSCI/A3\n8K7E4txzxvVE3tWrts440JeJjLqdNl2Wnhrqdn46fkVCfHbdUHtY/6FPGoEk\nNyeJa8DK3FnFSwm0nidJHL+Dq5rv3/s0qtfFMPhanE8PeC8/rFwPXGv1gtB7\n71A5UoN7XFnKqH/wheAI0LFcAfar36J5U26umAUMaUhZvJJ/RGoBihAoQn5t\nHwsJ3VoN+KCMBUtpD7MIudgLZQEHi4CsSpo1+YvFq7B7LY3xLteryUHwKR8x\nh/OsmrrsrRVhGJRernk3tvxQEjVTIDZL0s2ewKozLeZalnfLT4dybs7ubbt/\ntvLvo/uWhAXIlMNhAfufMb0mXMkIcExfMLxGJ/la9yJQuHZ1F6s8L8jnuLzG\nsfRK38IzIRnLc8d9u+ZIZUBLr8CLLgvmLHbmyqPcvOfqMIod+y6erFmp4JiD\nZaYj\r\n=2zBH\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/icon":"1.0.3","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.1.7"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.2.0_1611500468060_0.12665174536707124","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"@chakra-ui/layout","version":"1.3.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b8c893c60a4acfe3e8b5ad135455059c36eddc10","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.3.0.tgz","fileCount":108,"integrity":"sha512-4IrMvVPrW8ua32uRzp5UUmHfYa/+K4E4zP6191pr1TRJifX4Dii/FGDPlK0GFFsXxennyiLFbrdp6EkbjX0xXQ==","signatures":[{"sig":"MEUCICJ+J5TU1sQIwpbdDXNISv+3ZRCleqU0pvpGvCsUWZQFAiEAxpRSMJvLCgNXD9SU3bvU8i13eWsM4fr9KLrv4HgKxlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":293843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFdUuCRA9TVsSAnZWagAA6fcP/3XpmPiHzz5Hv6/TUdmy\nSsxY88k/8o3mCmDC0FnncdCLypJEsmgCDEwxhUyux5lN6athbk7SNhGH+AKp\nW95khaEqasjy2Khqt1WPo+WwKUTmia8xg++h53bwir44dVfjAd0xGN28W93p\n5k6OgSpndAHrIKecVzIZsnXcyYQg9lS/ufg7kjIzbWKTFWPVZPUIgrWo59tQ\nIZgazwgjb9TALOXgN8SLb5p1MzUAPFafmLjvSATxPJ8+IY3FtbOfc6WdjzVj\nXja4AviDwhEHX9IzSa/QOT93Ee7skARJMX9wk6BvMdMHPeg3xxH483TcobdT\nliGIItv2ea5iM0gI/AdLxkhaFHYBQNEAmNYLS8m3DpnlpRYENFfaaBv+RWZZ\nxLT5IS+LW7ctw8e8TJIJS3oRz3If24H17ckcg7d1LFscNiRiBmKVHry2VPof\nfGGApxccHFrq1iLJ1dZaKlQD20WoJ88HIxglisX/cwa9fR0bK+8wns3LYHhl\nXV0sTNNYkZSSpEGiUaDqvlT9flcSzqDvY2l2pibO5M/aLQro32f0Pqng7mv4\nU0AW9fX1iLzQk4uvpQ169LEiim0jYW6LvQ4Ng+zQuMJJ5h97yAVjLiOgbkB1\nRu4wy8y2ZSXmxuuygTjKD2GNHxMRPd3lkR8rfQxiTMuu/jVSvA0scLmQopWq\nRbtD\r\n=W8FT\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/icon":"1.1.0","@chakra-ui/utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.2.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.3.0_1612043558784_0.5066708360202739","host":"s3://npm-registry-packages"}},"1.3.1":{"name":"@chakra-ui/layout","version":"1.3.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5a9e0bc67c3f4ce24e00da75850576d9c0d89d8c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.3.1.tgz","fileCount":108,"integrity":"sha512-xkIemd9Sloq0kOnbyxnXO22W5YFlMxxHVJLkX9cN5+13i+Qi/Fk/da+yyP8wQ4g8zxQORFZb5K47GdJneGOUlQ==","signatures":[{"sig":"MEUCIAxsyzZVfZ+HZ0PmzMCpaJc/5VFMObvSsN5iB7MD0qqoAiEAnxNxTyfqgPpdMnREliRjwdL7LrBl9IMmwcV9fjSFdRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":294266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHoBACRA9TVsSAnZWagAAZo0P/jrH7ThSHKoNtoAWVKn1\nthFqDKJqP4yh4DFqMU4J9Xklg8v4Ul3Bc0So8UIh40QognjHD1mR/G7R2/Ur\ndIAKzltDXKueBwpiPmHunfYLLp7Ht/CEy1iWOxE2UgXh4XIximfX+HatGXaT\nknFriSN6eUUQk/zGbq1zJZHafz0zqZ5tzC4SheDMYtvnrVhPd+pkWhfp6cGB\nBzhI5CdzDc3fIkWuHXise6KT9PUwgj4w4l1o1v25G6+epnJzrCkGn/pX6pzj\nyqcJ00+B2vBR6cZrqqqemt78xBFvqMeiJtktnQ9N0qPlDOqapnQ8yQ40Y5WP\nBvfAgi4khQVR3OclcEosUOhNpQNp1yXkGTrr4B0RcIDlmnPkcAw5OCy4z62G\nmGaxiGLuzWnEjB0haXp9UjydvwDaQsYhlypv7yfnV/3tH1Z6s1xoIFouw7k3\nlJhRgn6EIeu/tuA8LD0DeEFEz5VD5lalFbgaK28vyi9kxj40ycF0ArjMqOvz\nyJrBsJzVtJ15GF19Ej/RPSJRU9WIb0txI40g8APYXhjtY4/wPuLr5DZIpRnj\nOZ4iXce/vqnx6cZdtoCHx0UfrW/IvmNBxFC+V4QO/of6hkno0EZC/CkDhIf3\nyBUFv0OOZgNdKIGBcIKGKJb5bIzOfvczct5g867lBO/w13UGb8X47pK9Vq+g\ndzKz\r\n=TFAH\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/icon":"1.1.1","@chakra-ui/utils":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.3.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.3.1_1612611647508_0.5385166407882795","host":"s3://npm-registry-packages"}},"1.3.2":{"name":"@chakra-ui/layout","version":"1.3.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.3.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":"59524b4971bf299e9b439f8669abd2064976cec2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.3.2.tgz","fileCount":108,"integrity":"sha512-L2dM3yRu2RKkENpuTiuBxz9Vq07LDhIWLo3aeB7uSbjWNi4kD8pVsHUw4489xEUVnVplC1T4XryM4gDck7jIVg==","signatures":[{"sig":"MEYCIQCnxxwrh1+3giUptGP/ak/RwuB5mIc0x8nYdf/Gxe6TswIhAL3GkBpmJW8QjEz6GIVVAbBwzNbkeWNuzAN0v2PazvZn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":293415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQo3nCRA9TVsSAnZWagAAOSkP/ipEaSNzDGn2ond9OgGm\nfbgZuPsb2LRlEktJ+bH5NcDKw+gDJD08tZZLRaDyqr/9+ENE9IkBcPmzROO7\nD20vJO2Zvtv6T4atZWhvk+uxLlzUdeNedSxnHPpxNrKgVNWZdA4UllVUiUJ0\nF79xn1bWImhtPvFvhm09XqjtFo28VUneOjPL3Idn6oo0Wla6DAHzax8TUKpM\nvDThrEa5Zyj01qIQSKlV1Ddvl50PkZUjI7jsmq2dHCjzGN/2Jl8vN8Q3wK9N\ntR+2Tk4FNywRamlGlwBE9j8DxYCMlZ5siqXyzXUc/J4mSh1QshmxnqpVPrpV\nnkRF0QhkOtdeeVZ88bk1Sy+EM1ZG81jFWwvn5gLZobulzFURAk0JGRlj9Nn4\nHu/DvtFHLywLV4KyQmE0GKZR44lSoA+MIvs92wwQNyIVmBP4FuPssvVjRQgu\nTeTRiVrurotg90m6wjdSytDnryCxRdN+ydDXDW2jMyrpgM6x/yRO3l19zKQZ\nTPypT9r4ra0a3kHWLKWBASn0I+LzbpNvP5HnAauZFQ9z4QynUOvvjpjB2tqR\nfKYDRA+hEvCYFVCRv8wWX9x0GOiYvnKIR+58OD6ha4gVxh73IGC+SkEWuTXV\n7pPIw819SkzhKljom6CIyWfTncberC7b+ynKMYznDEfXmlekM1msQzpeRJef\nuV6z\r\n=sHMK\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/icon":"1.1.2","@chakra-ui/utils":"1.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.4.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.3.2_1614974431900_0.6280347364314482","host":"s3://npm-registry-packages"}},"1.3.3":{"name":"@chakra-ui/layout","version":"1.3.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.3.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":"837d2d7be4d2c8f57b3aee2eb9288f740ffbb0d4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.3.3.tgz","fileCount":108,"integrity":"sha512-PvJSNAkTNmeYv10J0tD1oBZdKSeWDkrb0hrF8IrGtmLztL+gA5fGMIkNN4/bWq25mqI7mCRHqwYei4PhhZKYXg==","signatures":[{"sig":"MEUCIHrbg7hUXNbsPn3MGOoF3K2I2DFVQur2QqALl4Dh47uLAiEA/96cwYV7HgxfNiREuLQtqgTaeQH2XkDkdkhuQcCHNNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":294064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVukmCRA9TVsSAnZWagAATq4QAIVEuQ/1Wcy7Q3wSBchF\nWH5EQ+HVZ+gQBdksT6fRsLPWCTrmb3XvC0H027hxV3w9mcUahIGBfkEOPn93\nDvLKyjBaR+1tPq2oX/eVSwktqXkDyMPBND5sNIlRgyagv+Njig0P4T6jixJj\nkpXtq34qt8pFTgZWNzuYAuI4dXMQwZfkrYLJGC1IwrIgu4NiKlxDLA9ibZZ+\n0RG25ArXLYJCwPm/p3Vyu6qtyugS6HDkLSuIWj4hnyCu0N3ysjKdyLu3aFww\nV0vB0rL60dWj2BcPgjvvsioL/8bNsSKM6qc+2wg+0jypmwtgt/Cg2tbndHGS\nB7eIg4qjMCqSEPcZ8H06o3Xl9lhwKv4ZoxyoaUC7FbKm/BbLa+TXpKluXcrZ\nPg4oEu3gK0L8xU6sfXkBBkeZL7euH8e9WoX0dq1kAOE3ZObQZThk7iu0Cxf4\n0UkEi/s6g3+qViHzJSMvtd05pTznTMWTc9g5TXpfVIoBfVZfwfPSWshOtyjv\nkqL41NxdjcfLchFQHQXdxjoeMg6DcROTSmmO2EnpVcFg6xMIVzT+JY4Br8XY\n4ntod8ugz4wDLZHR+9sJGBMqSn9LcojSV4HjtT4SHx0bZhdth2jUynxg8nKU\ngZ+1P1zwckcHMHp9/j3EnbZQOALk3CdWJ/ChL+E5IzqFZAWO0Iz5S/aqIKFa\nh1Zi\r\n=WVjn\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/icon":"1.1.3","@chakra-ui/utils":"1.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.5.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.3.3_1616308511344_0.5950714027595361","host":"s3://npm-registry-packages"}},"1.4.0":{"name":"@chakra-ui/layout","version":"1.4.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d867c4a1189f0d590dc138bc86befbec6dbd09c1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.0.tgz","fileCount":129,"integrity":"sha512-wchLThlDRM78HPI0O1sBKts5kHlyJLjYaxoDfZueGhTrDwzDRlzxr++YRo52fS7IUyKNWELGYI5C7k0hyDcTjw==","signatures":[{"sig":"MEUCIQCJdys/oWQsOHpSQTKDXU4i3ZkFyg63023mY2alCzXLhQIgD3JacBtY8wsSbmYym9CrVJiVWap8lw3bOTTjHNyXfuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":308862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYxjACRA9TVsSAnZWagAANaEQAI7vlDpCTFvltGAUorvE\nKycKj5Jz8KkPcOKRIbl3YnoCbsKiHL5NxEz1zExoLgs/DS44VtQ28UqYE6Kf\nmH2JNiKfGiwNO5vo2nMHCnqeRAEQxdMiONh/YtjFucSAwXZ5qtklekgfmgKF\nHExSbugMr2OM7pJJAnW5RdwnwL2PA0I5hiqqsd5bXq2ONozJUk/RUE/p1+e7\nPq/c01R7Nw4yKeRmJ+tv5ptWUAv/vX1tCwfqDg5nPYGa8d759mwQxw6SEifw\nOpfcqSbg+7t92h3N/mZ7Jwew9z37w2eg9MZVjT2Q5iU24hWw8WROLJsIVjJC\n0ucX/XO1tJuDepOdkUWR8rd7IcuQNwSn5q/U4wb91ZHPYVOMSzoqcnfEMHvJ\n6j3+SBpN4uxS9QkiPubHJgd8fvrWjhdGfLB70FfZhRNseLxvU2H908mktlsM\nnDnUbD034kM9LBjznBnEaoBR3YKPMdZ1vvr/kHgpsnBuMBwS1P+//Gcy//U4\nYiTDNlk/fe6j418/50adwKV3rVGNACn/SCW6noqhdaGQFrq1Kl7uDKxQvfWf\nE4OuxyCJH12DV4KQswOtLfir6J4AZSkkliEbJPl5FVLk5q2JVBp0W/ELFDHH\nlhajxh3VVEVkelZ7PXfPLKVDcrhhNGT/dD9Ypx8CLaN4iRF3zBo6Dr77SKOL\nP6B/\r\n=1/Il\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/icon":"1.1.4","@chakra-ui/utils":"1.5.0","@chakra-ui/react-utils":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.0_1617107129549_0.8306566644920326","host":"s3://npm-registry-packages"}},"1.4.1":{"name":"@chakra-ui/layout","version":"1.4.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.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":"0c369e074391bbdebc698d7c1c3f7ff231023eb4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.1.tgz","fileCount":129,"integrity":"sha512-pnbkYyvOzFosA5NgPFSqYJrrWeJU11KL/0sb1UP4uUb7NkO809Dsz6SVW96YCcQmSWv7n5qNENqSkFWDQKrjsA==","signatures":[{"sig":"MEQCIGEepvRKjBAr57eJxLvGunbQPoNyXBH/rNP+7RGactBtAiATZVjVw3nh/KObM/1aVArBRiwzhKp8XjJcthnocjEvrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":309318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbcqtCRA9TVsSAnZWagAAlN4P/0UINTeOcxBOET3tGVuf\nTuLPc+T5kvD/K5FEP3i6WMkUozYEHQodMfK9UkuRSqY81RbGxehtyO4eRsJu\nygf54baP6ZC7IfwjdX+eEavl/ECdL14z5tsErKW7W9fQsSEfouJF1uiYZ7Nw\nm30kxGxqfn8vd0jSjhm4fgmiROxkeiqx2d/Ov5mbXn6dvKgihO4MFdNTut+Q\nQeXVovz1YMcfKOEzsYk/N+wEbPriWcn9FjmirKaKhVVCHg94hQrfoI/kR+B3\n/vbSOW9yaio0jzWAfCytDj/XlCyd5PU4ww9q8FJGAl/M6Mq0XHOJjoNd7gOz\nXee5vpqD1lPBjFWKliHx4c0RiR4awgFNs4W1qQPyjlcJyVkDy19ut2hGoJ01\ny1/4iUIX0tZ/mTvuO8/4pEA/Am0XIwfEH8QY3RvBpyA/euVNv4S/vaW17VzU\nm+OsODFfR/nEtle/kXCNGfiJv5MkfUOk9htMb40jz9TAKXuPOv006pw6FPmB\n828Nx56yx1sFLhjDKFEh8dD4VgsRFRoCF+5NnulJkemjlnanCZrPxWb/3guI\nio5NaXpxmmnzCmb7fWLES1n5f7/fNadFj+GYf4fvM43vkiUhX5466z/XqZYl\nrFUDSBLOLX0E4wHGFlfnlyX3g1NzIV51lXDB1GgbXC9gApks37em8HnONFoc\nCkFG\r\n=YC4U\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/icon":"1.1.5","@chakra-ui/utils":"1.5.1","@chakra-ui/react-utils":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.1_1617808044787_0.011780276114352839","host":"s3://npm-registry-packages"}},"1.4.2":{"name":"@chakra-ui/layout","version":"1.4.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.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":"3668def5d9a484e3c127b047a6d017af31168b72","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.2.tgz","fileCount":129,"integrity":"sha512-T2XWe1AnhlrPnpLdqA1f2SOJvqCWpjaB+x8qJVQAwqome6sr2uSnie9pp6Sd6B8WuLIdTkOY3IY6oHtJxyrOHg==","signatures":[{"sig":"MEYCIQCQ9Yq8xhbZPKXj0L3Gsjqvkti8V0SCFZrFzucdWIdBLwIhAJ86pjQJ5gQGnuGTqqQdiu2FQ+BFtHleGPiZd4dXgMuv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":309816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdhc1CRA9TVsSAnZWagAAKQUP/2xzko6oBlDYwI6rQF46\nhBgMK78GuQ08vFHg6L5DhlJ5nOnEKk8fxjAjCSiZN7Li0cuRvc1F3g26/KRQ\nDLu1esYgcbo9jqgj/4CFpbHjiEZ4QyzKB6xNwFXyjpS/eRXsy1SlZPJT34Gm\nZ6Pu1y48iqbIexgpOD3oChX6x7sl1/rKO5Zop6jSt6YHDwVzOweesH0whKGz\nM7iiavXBOtTyS1rKWSJccsohFv2ltKekEZ8GZqDoRnS/tHFZCTz1i2m/N1zU\nFYsiFWjL5v6n+LLtiJBLCskKtYXSbA+jkYEdkoeuh4QkJ/3eCCbPGp/ntVnz\nXRKmrx6PJE4uKv10lsTw1UI4DBEGSGIvvGlMTrj/JEW8iltiPL7rtxtkX1AV\nE307NupLYtpZO4fMMXd1pYxnq7+J7ylf4YM8/XnfEdnKP3NdaBOCadc2mJMy\ne5tjurrNQlCtNpRwioUyTH06BHH1yWwwoxyncgVjeKSHicNv7Llvuio+ojgi\nQCA87UsyTSwdeIDfQcQaTeh31OJ9ir2zeHMx82jJ+zcpXiLSrIs7ziHvUzeb\n62rSJjFH7vYh3xykFbQ/DQzukArGes1PZpqmC/e4oEGnjTQ/ZU7uG7YZJl2Y\nm5XxGdhfKL2exw6xqJKqgy/uRGmOnPMlhNAFQTtQUW4B53gOpX5OcaHBxmQH\nBmVU\r\n=LLXG\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.0","dependencies":{"@chakra-ui/icon":"1.1.6","@chakra-ui/utils":"1.5.2","@chakra-ui/react-utils":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.2"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.2_1618351924788_0.011301631136748869","host":"s3://npm-registry-packages"}},"1.4.3":{"name":"@chakra-ui/layout","version":"1.4.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.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":"d577f2cc7ac00f05ea92c64a06cb1db500bcb3dc","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.3.tgz","fileCount":129,"integrity":"sha512-AJb3KtQzMFC6UfcoKaVgt9KAgqljRq2isT5OtY1sDCMxCu5Axonc/8Q/Z+61DVjgUscYTkUyy+3imkk0z7zD5g==","signatures":[{"sig":"MEUCIGVNKYyi+KgLyQeMSF/M41tpeqzxsyMJRMZMxUOPT272AiEA70lPyijw5/oqRRoNbTjCViA+V2lWvM6iODmUy9TQWBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc3tCRA9TVsSAnZWagAA4p0P/1EBidCEkmez8hKYw7cP\nejusHAY6qgC7WSjlmNfMTFEMZ9gkuoSp1hhLcgyoxj+77CIx01LfnUX3MUMo\nqB7/d/Dl2xSlfE03/CvSAfOJ8R8jwSGxry7Wa33dWlXTgW1VYUweQ70TrXGy\nQRzsX77b3QAs5NehxTFpoxrWoEX2KUGOelGddNtyOaFfWzjbzH3DF/2F8Ohd\nENhPY+TO9IW5rWRy/xEYTLw/RiiGRdqMjvgau9PuFbIHnwcNZPrLPlyc7cOK\nguom35Zr9YGRYZPp1A83MwDJt6cUKNQncZwgX0jFoA+2Ld/kwv2sgIRpIguu\nV18sSXcYo/sUbc4+ssqq6NES1CjdUe3L6sfnYzAs+6tZJZRZl68DAYn7SsL6\nbCsPn4Xk1zyToRgCl4FzDC54A/tEJX5TYmChBNyuAzjh3d8kG9bkZjjRO84r\nJw0M/328OZmpBLzYfWowYG9fMwoySL3/5uAktPjRDioo5yhy7/eFMd2RkSVR\nghk0V4JcV2BQByTG0XWIDsEUKKvMozg49o+jB3//go6DbLF5Zwy0Poh8h8en\nFYu92tfqfDp2w/V4XgQvaXsmWNgIBj1u7Oev8iDXkpeayc8Cu/D2DjEcV4Jy\nIghLfTGWqU0ZFQGF9LctKwn84hY85JghBTOumDx4zw9ZMZc8aMQ0aZuh+JQj\nN3Hn\r\n=9OR4\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.7","@chakra-ui/utils":"1.6.0","@chakra-ui/react-utils":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.3_1618857453064_0.9770535560737861","host":"s3://npm-registry-packages"}},"1.4.4":{"name":"@chakra-ui/layout","version":"1.4.4","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.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":"3db5b364b2b44e4c8c7ad6b773357aed41519090","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.4.tgz","fileCount":129,"integrity":"sha512-CtcwgVivcBOM7bn+BHa/BbZ60moLvYWA9V2ukqhKJxLfSBoh/RTqH1q4Qmig+KbQ/xdbKcHTvanJjrMyn1jrpg==","signatures":[{"sig":"MEYCIQDviSBMpriXwQWVVG/hVSeRWvqvTW44yCYP2MHNXIP6BAIhAP+O+AJlraSHS2xOw1BzQ86QaJWrZAI+Ge7keFPrS/cd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwv9CRA9TVsSAnZWagAA6QcP/AmVps9kHvUNz1rAdn3Z\nP+cTCjjAe6hbZzIKI9rG/H/JwwUYcE5ybtueM/Sm/7uK6/8dDIPsoMQbDxje\nn2DU22IY0y9kUP5lU1i3vvBPBDpGRILu/4OIGCQyS+RjIAz4nnAEUwXDzpyA\nccug8DxEOPzHA235JmNalgQPU+xgLokcVir5B45MZslfFCg6bWTH4RVbL9r9\n2LJwe2IVmH2MZerkqD0cQPE+K9BjhI1KA68QIZITGbeFWJAlNW4jtBKRDFb3\n/gotRBE3XXyvY+H/z8iBWyYlcB0AF3qrg65ovIQ4spf59Mtusr8j5nJ4cdCP\nH3sAMw+hUh7/5+DrczD8suTvBLOLOQTyitpDcO+u0IQ1BzhPluSRTEUxB/OM\n3Fa7/SLCGQUOvLZUStNrL20Tst0YAKeVw1vkUDzgchbloEmyqbO3yS6T3jMW\nCh1krzPhGkPHmYywFfvEeHQvpU8RfpQoOZYnb95NEYzT2tObo4E2l08z+idG\nUxQvOtfMJpEuG2f40CsMk2NmjKSHPWzAeRtGPz4XfBItrWPDFDszNAsoQJ+H\nWPy14HuLMhh7fEM20UyO2rausEGWEZvunYbIvM0Vn5In4nJlYwvxJxsnWnC1\ncYaqwDvenLP5d0u00VQEDcbsrP3ObP7vPtSDhXPsgNAkyhLNfsGT3Sm/6nbs\nDyIx\r\n=6yNb\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.8","@chakra-ui/utils":"1.7.0","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.4"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.4_1619201021105_0.8744896755409763","host":"s3://npm-registry-packages"}},"1.4.5":{"name":"@chakra-ui/layout","version":"1.4.5","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.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":"89e6164a752a07b735f0a7a02437ae38ecada154","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.5.tgz","fileCount":129,"integrity":"sha512-+9NczG/9vtditXHZdHSzBvr2k8Sfb59C6PQT1GaDVhwi693tpYDWZEc3vcin4XJbyRS5HNm8L9nwx6A6un/g5g==","signatures":[{"sig":"MEUCIQDtSyl+/2CyrhUrM3D/lqgowHuOz+H0Ir5ZK2IAEGcL0QIgEBGnDjZK1SGySyTXS4SVyFjlrtdLxOSTMjTZAktQXuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkn2xCRA9TVsSAnZWagAAKj4P/1YDAx3QojqtapoJSxTk\nQyFlEIa2dWtlrsLXJrqz/6jqkOB2ogNzI2wvcT5GwRiimE72F+c+tWi/ZKFM\nrDIF4Qm64TB0wO1YGDD4+20bMCwQNAQISn5sNXpWJB8eVT/zjANRwuoQVQJm\nTnFlY3hk9JWuKmcp9bi86fPWyxexz8ZGB82PiLXW01AdA9ys8dQOEAQbPfaF\nALpbBrgfkB9INRq7cxux9W32aEJA1rxxQplhJPeMw3kL+G+eNNMQAw15ZDH/\ngPwVJd9L2O6/UqXr4PB3VdROBYmn75PcJIv4fQhK+tTlShHNbK6MJ234zndo\nGLdRAHaKm2YgMXtEVrIy3qeafkV5GNWW05qABZ6n2t9NFQwNppPY4tmQFbFX\n6Ec3C32jC74BdEdtD/TvozMIMpJ+zSGPRCpaQTeMB4abDRbqv4Kb3UwLihpG\nFMBZ+z602RSL13euYMtMNjo5wHhWXCDBSwe+s4VCgpi4vZLYDSQHbBavlXua\nbEVUj+EgvqPerinBKjU1fwfDcPNU4JR3HhNmpN2nUfMnj/WnVfQnjoO/zUPZ\n5aqVxWnMZifg1AClbQesEeyF77W5Dufb3qoxn1URJUU+BXtLJvyOmgnUfffH\nKBU0F8sgfLFWV10AjNTgdK6fFq9qiFFO0uPjtdi19fULzc5Mf733bjREwYSo\n8ndf\r\n=GAVH\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.9","@chakra-ui/utils":"1.8.0","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.6.5"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.5_1620213168578_0.3306956296736594","host":"s3://npm-registry-packages"}},"1.4.6":{"name":"@chakra-ui/layout","version":"1.4.6","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.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":"887bb65b58a63f37c6691cabda11edfc1967849f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.6.tgz","fileCount":129,"integrity":"sha512-dde/c0SNhFsSHwdgQY4m/JwBzcjY4gSCuODX90AcPJuDVd+CFm2mbRIicaJ9iFj3V83C3oIQUzn+LJlLLnmSig==","signatures":[{"sig":"MEUCIQCbKwhu8X2Yyazn59zX1xKNGZf1JBOucp7HCaJiV9xkEwIgZk1xH1/5/PthLuCnwQsjCFFC09sIA8w+0tqyRXA/HJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzNn2CRA9TVsSAnZWagAA2XQP/1SAxq9LuD8yYVpwwNIR\nBZk+79N7ANh9ZjEKhx/VlVWqy+u73AfYKv4AA7M5/wjSxAxoE5fHg+zeo3W+\nrjXi8w5rsPhtdtx5Ppedg+UcsygTp6fjPxu1yX0yiYVuVg6ExK3nXT36Z8CZ\ngwkjTPqz5IILDnpiQGqmKehLaf2JuDUUgvsSfI6e6AtYY5ngUOPI11v0bje7\nzn+hEQ74ZQdqx2YI7sskFGiULHjqYLnCQEGsIuKAVqkBhl0N1+spwPeYgekQ\nOZGavZ3DguYAVBoKrEa942U2nbGhMo1w1SwLGYVfC07KZfE6plVgcO4kzsNy\nGvcFsrpa0wUxDJbCZuFJhWfyJj8v0BYu8kvmIkS8RzaLla8k1BBPHFA+wgX9\nvyLFIjkEC8kplBMxy5EXahhwht5GZJ2Z9gUnFnIjeBSMuljYMWJmSr6wRAPd\nhAnxdEXKiA86n65eBwcWztjHVt7rCkUO0fFzYPxN+R14IWnwciyv+I77TvjE\nLTO2Mf83zBKKUzkllDSD6/3TxaaRP6wfXE9NKTlnR+p0aBfGSvqYju2D90+i\ny30PWkRCLqq1Oh4pEKtfC9GCneO0PeNUTKvyObeEbYZQRr9gKE6ZB74ET0TN\n1U+VFj7Ar95rhnxypi+HkB49jc4coXJMfcSaGLmsHkRlLe7vK4QEkSIuhDCl\nNuN9\r\n=+4s0\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.9","@chakra-ui/utils":"1.8.0","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.6_1624037878215_0.9098535440194995","host":"s3://npm-registry-packages"}},"1.4.7":{"name":"@chakra-ui/layout","version":"1.4.7","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.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":"64a80ade52cbe70de5451a6081810d49df84c66e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.7.tgz","fileCount":129,"integrity":"sha512-wu1IBz/zg8rj4N88w4MtjS2kC5w+FXEvbxt0r2DqxLtPUFtE/fFmCa8OKsz+jMrDcZ1dRh48YNYrrWdAGEOQ8w==","signatures":[{"sig":"MEUCIBlA95cZX9/U2bLBhdVBJVyNCjrXlQSbBT7XIJmCjp0DAiEAg4GvkR+7YRj7+LiGG8qvaXpE4Fts62+sy+tE6EWtPV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xQ+CRA9TVsSAnZWagAAYVgP/0vvYzqSbfshMMCfCUj6\ncHCSs2yAvqTpKTP1Ee4S9oMbUgTjv9owO7n97ulgeVgVCeArg1lJsI0WJpE+\nqXZDwItvFE2q729qv9dtG/IZoMGfOt+WB7DMbVuPl+0k9/xSw3cZRN8MvnjC\ngEAJKrxqGzdjjp7liDy20j8wn9RkPHaT3jnpE0tVpw2O5PRmn6g9J5KbmaEn\n7yHSLbmovjHdW27ZmteG8WdVJfZO8MoNNfS5ZZ66HGSriMRKbiox/+LPdNOS\nY0mlbN97264c93ZzH6pR6vC6GOT/gROrR3NHvxO6F684CrHgmtdRnJC7md7j\npySrsIDXUdixhDoQx9em74mnZK9LguQH4BzSNZc1JagE8euBVImkDyHROANW\nTrV7/vtWP5wRdTWIK0OzvVUCMCphMTxd+KvYmZ2mNsCX470ufglJOREOdN3M\nJCdGwfVp+2Pm9RyDxJzVcRovTa5KCXDe65BgXMst8e9vrESLS23seOFw6bYO\nh14stVdWn4yVLhLCp2TyyMD0Kw5vJmZAOnqXSdnDGP4G5YLJPthbh3lzd8GH\nQLJ6f1xGZD49Cgq3UbBuLxv5PmWFKW9qG5sxtHC5TT4LTmfRspkqmGJl1Qg7\nAC0jgCfc3t9cP4UQzEayhWdgskmhziVObY1TLkh401qh4VcANLBEeaxV/fAw\nw21B\r\n=h9qp\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 layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/icon":"1.1.10","@chakra-ui/utils":"1.8.1","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.7_1625756734124_0.5024417554919172","host":"s3://npm-registry-packages"}},"1.4.8-next.0":{"name":"@chakra-ui/layout","version":"1.4.8-next.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.8-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":"2554927e08062b5e0d42ec28b240b260ecffc4df","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.8-next.0.tgz","fileCount":129,"integrity":"sha512-atqx4Bgt6lAEKB9r/rZReDafP4JB6IPE71K6Tf9HPecgZW7nsmvOkmU09i4yZ+BIom93a7Bmxu4cPRjuuL7PUw==","signatures":[{"sig":"MEUCIQDusu+3cIHjwiCaWPdVW7R4OGm9YUzGlfIOdMnceOGhWAIgK+iGcmnUpg0CV7ylXL7CahZUcXc8gASVBW4xPG0jex0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDFP+CRA9TVsSAnZWagAATpUQAKT8eNW8SzKZ8DoqwoYb\ntZTq9sBTqIjurMJrzkZxBrNsl2p9rQk+1aEr/Ao9IvnX/V3bwLEZBeF1EahW\n9BFawV9U2OA1058pRTRwC/qnqrpAXvIRNoLjDsdKMxibsKZWNEScOdBLVI/G\nBwV1Sh+9BCZ82wc+KkPZxog8kBg62EqA89+oA1PKgcN1e+9pN/2uejijqxwe\n3CVq8I6uH2tTgQJ7U+M85dlHrUYtecR0KQ/WABgd/5lPg5CI38M2sTgJDVq5\nIBsTMzKjPOJeX2LhnSiRh89sGqcpdDeuW0j+X2FGoXX/RDUzZAx142F1jFma\nKTMySTy8VEehPzYX8uTSbbJg99VD20EI9WXFVvNBgVapkRcB14kRuAU+TA+5\ng6MxKZntgI4iFL1+o9tEKg349SO7ub05Vr5bdvHptpifuLTLK2+WLAkRA4CX\nDwI1uuBavb4TMDP1cgsKS6682G9gZB0imLp05oNBEiWEzRKfPQjTzRdEqwpi\nfJNLgmvnjwSKH85Kl5jVm4iWe4fmRw8c2WM/fSkwgks8nnRVtHIkYdtmCSl7\nGVIvu8JOryKOiigwZknIxrA1RyQ2HvkaB0LsYIeP1jZa3lJRXIzMGbxdP2Cc\nz3JzDUXDaB404UmbR6aD4rH4urx6LQzlf/A24JhP0XoeGPn5yUFaJb6P8P0r\ngFiC\r\n=GqlG\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/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"6.14.14","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"@chakra-ui/icon":"1.1.11-next.0","@chakra-ui/utils":"1.8.2-next.0","@chakra-ui/react-utils":"1.1.3-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.2-next.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.7.2-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.8-next.0_1628197885779_0.9231599352570636","host":"s3://npm-registry-packages"}},"1.4.8":{"name":"@chakra-ui/layout","version":"1.4.8","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.8","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":"3963eb8040dcdb5a8f68747e98abf7aa7af741c8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.8.tgz","fileCount":129,"integrity":"sha512-hBOkbmgbXnYAzQ4gXIaIFJx+WQMfAxAsmnmdkqpGUraGgR18PlgQNPKKo1QkT8THyxStmOAAgppuSwofMDOVHw==","signatures":[{"sig":"MEQCIFwT1rl9+TpjLrMFXuXiWWCfcoJIsX0AHolZmwoPEDGZAiBLUTja5GBlQkKH4I/+AqaGcrUC4jiPmWbX5TTpVNRM8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEQMDCRA9TVsSAnZWagAA3v8P/i+YTfdCdjXONZA+UD1H\nmBguIY4SdmJOHrQcfXE8ROVyFPurp0BTtEuBZO6Qx4Jfa4neB5xv4cf9OaBo\ntAWdBxTJjqLuMTf+slSeoLbUJmjiq+bzPSFWSVgJhtjsj6MjW/KPBKiD2OwJ\nL6TqH/kvnNis+8IvS1dKzk259r5xOIryW11ErNKM7ZeIsAL87gJyLGTL+P8P\n8JY3eSzC35ZnB/WIlj8axMVmXi7wyTgKjMQ0HycLn8OYwU5zjDkjicGZaPw1\nKDCG/8RFP4cRcDRgwxTKUvBPnJBvJDVRfXaI11Qwz2nJ1XB6/Mu/WmeMmJXD\nRG8XROP9RTlM3c3Wv6LTsWCkQRK8vdRwWlwmP3b8UO1OxWZNjejj65lEUZkA\nBOoqCs84JyCIkQgOVrVfGNP2gCl6UdyZaBg8tpUxSxyn/RFx98BnBTjjnT3b\nqcFOWkBvo3VGMu5mgiFL158w+2DZCqoVNRTNM736LdzN6Idm5e3uyCoaZXeh\naT3gn4VhjZmlWH9eIuNkPDfj3ZX59gVi2/y16C8jbpGKNOYjhQeCdQjYg10L\njOBlwxTKoUd/M4t4fMHVnlC6HixqC6YHD02c3j/t3im7/BrPdT/FTTECd+Gn\na/LZKFt4R6F+gRj8/2b8jIrQxktn5YA4BUECvU8fkna2CMWGFsgd9FqwzeCE\nS6j+\r\n=B34U\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/layout"},"_npmVersion":"6.14.14","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"@chakra-ui/icon":"1.1.11","@chakra-ui/utils":"1.8.2","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.2"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.8_1628504835398_0.685337087030738","host":"s3://npm-registry-packages"}},"1.4.9":{"name":"@chakra-ui/layout","version":"1.4.9","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.9","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":"8fa55555d7901d4c76d0b438a4feb9c8ac14ed81","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.9.tgz","fileCount":129,"integrity":"sha512-QfpPnz3/cB9CAk262fl26bdNH3NjsB8t5yl9sAslDQBC3Uxdft8+yKB1faZCWoa59AXm2UfHbAwKobNTECEFtw==","signatures":[{"sig":"MEUCIQCtPqr2Lu+atPkIuxSkpW1BHtum/vvqAQSexQhNyPr0UwIgXfThltJ+tz7Zbvq9xKD7C4/2PXXLOBEBwiOp6lMCUdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhK3UDCRA9TVsSAnZWagAALQgP/Rz9UHHtkFWpaIR8ucb4\nhv4SexFzvBXn4Pm+74LO3ZHsfjXcIhizacuW0VFOp2kNWjTljyVaMrVOpADM\nVnVdCl6scyr4qcwaVuwxC5JWmrV/DBBw4gRFeYkzYwFAJgSOPAQN9hw5cw7G\nGMsSuJnOxVzaHuKDO+6/CUNeeyaoTG2vF+H4NgGdLLOY0ICn73ux3DXTTAH+\n9QNJvnOwJ0R4Zg+Orpx+suqO4qDLdFef0P9RW0Qcl7ODHLuRHVYCIVjzaOB5\nVZ1XRgco/Obz3UkJdRUX4gzF5gWJ5xJCaZ96bMM2P2+O9iD3q0NwvtYs+rJL\n/o1hWoXS04Hamc2mpXL9JlxY8jro+ftm0eWuMvLvAwDmelYlfq+FTd189/Cq\n+ALpBx/IvrjsB4ht+/pioyc0ljJ8QJEIf7DpQYIqe4/+jnmFLX+rpebwBsFF\nmco0TWUv4yKjslWRq9zhqs7YhYjPF3tUT09PwEpTqxX3c5pbKWBPM9NaV/zw\nFraTGVLWRShseQPZtC+dFzyOT5ys1Q/ECDYMWOUpO8Z37RmF5pzm18LaANCy\nsyfurQu0ZjSxgQvkl91v58tebWqvLv534Lh9O3Y7CgrCbmMzAnL7X8jrDIUR\nQnHba+k4qS1O+YnGzaLK8VGy/79CFliLxpwx7oJETkvvsintfbYY63VHzlQb\nGh5l\r\n=TnVD\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/layout"},"_npmVersion":"6.14.14","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.5","dependencies":{"@chakra-ui/icon":"1.1.11","@chakra-ui/utils":"1.8.2","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.9_1630237954862_0.4474460877967379","host":"s3://npm-registry-packages"}},"1.4.10":{"name":"@chakra-ui/layout","version":"1.4.10","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.10","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":"283804f206ea05d9158a7238ce2a1fa6cc954968","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.10.tgz","fileCount":129,"integrity":"sha512-KtJOKCYyCzUBRrBRNAr9SAhvC6KtSxzIM1NynA0dJSGEVHdkeVchfoZRSNfji60T0vNVA6hVGdgBi9DjZlh02Q==","signatures":[{"sig":"MEYCIQDQliuYAYKlQDmOg1PL4hbofha07hMC+6arO5Kiftv4igIhAObMC7kc1tm9XxmalRqqZxxuWYmb8oSuO+w4+HSvkHiN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312356},"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/layout"},"_npmVersion":"6.14.15","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"@chakra-ui/icon":"1.1.12","@chakra-ui/utils":"1.8.3","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.4"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.10_1634254421309_0.9530468280176634","host":"s3://npm-registry-packages"}},"1.4.11":{"name":"@chakra-ui/layout","version":"1.4.11","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.4.11","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":"1b64598d0d48da0e9f7bb3beb125faeb2f1c89b4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.4.11.tgz","fileCount":129,"integrity":"sha512-Aj7W89wJjWH+LPIUO+2IIeam6x+fPWOWDFczzkDwGm/2T/qMy+UJ6sO2Vs00plEvCf1yQamrdR9W3F9o1QIEEA==","signatures":[{"sig":"MEUCIQCGv2xW7SncaDp/fvys/vnICslY7QfPwnWuRKQLbNgG9AIgdEanBVJHE4hENaZAY7k06yF0I9T2wO+hoSUhM8X8EKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312571},"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/layout"},"_npmVersion":"6.14.15","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"@chakra-ui/icon":"1.1.13","@chakra-ui/utils":"1.8.4","@chakra-ui/react-utils":"1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.7.6"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.4.11_1635971580389_0.27222730225266534","host":"s3://npm-registry-packages"}},"1.5.0":{"name":"@chakra-ui/layout","version":"1.5.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"47f68be4d3b00ee978e9a14032f2cdc94429f1fb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.5.0.tgz","fileCount":29,"integrity":"sha512-yPxPJWiOHADsje01xzCykbOjstHyDgysgZxc5hB7BPkksEMdCtNhk6KDc03Prm+BSCOzHEn39RMndrsfyd74gw==","signatures":[{"sig":"MEQCIBGuYUHsN3VO8+zWQYhYeqQJVeeACCmeShcCxuV2e+JmAiBV1drY/pwZMBkEhELJrbtnutZcJBOEzj3pJDpw2WFkVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125339},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"6.14.15","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"@chakra-ui/icon":"1.2.0","@chakra-ui/utils":"1.9.0","@chakra-ui/react-utils":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.8.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.5.0_1636649807075_0.15483180689945697","host":"s3://npm-registry-packages"}},"1.5.1":{"name":"@chakra-ui/layout","version":"1.5.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"be33e8fb5fb187f13c5c0ef66fe94cd293094da6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.5.1.tgz","fileCount":71,"integrity":"sha512-nKiyZ5adjNTbBV3oFIUGIPijwutO1NGdev1jHtnZc3xo2urCIkBvKU8+mVjlX04IwZ7oLKoP3EiDDv0g7+o41Q==","signatures":[{"sig":"MEYCIQDrCMBvzjUyYznjQAl23r9hJHwlK2LvRq01J3mKJcYRPQIhAN5auqaUpheqm8rY1wZHEer1yDebzdTl2x2tBGEyZrzl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193981},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"6.14.15","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"@chakra-ui/icon":"1.2.1","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.8.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.5.1_1636746693386_0.26158762164052884","host":"s3://npm-registry-packages"}},"0.0.0-canary-2021118154929":{"name":"@chakra-ui/layout","version":"0.0.0-canary-2021118154929","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e8cdbc055191fea62c2c8a8d98697c7c2076402c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-canary-2021118154929.tgz","fileCount":70,"integrity":"sha512-HK2jMX2DuZUc94PZmc7qZLVNNll3sb0ic1Fq8wx3WLb+dnPHXN+nHI+qw9nNn/7EM1J5P2tRaBDxs/JsGDzXaw==","signatures":[{"sig":"MEUCIDDjEJrjJfbSCf5IKt5l0HVB+lIb0+Q3JfvPagFdCxK/AiEA9qd7/QMTWNwBTg3B/Mu6z5Th62+N7m0iK/JKobYEMWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNQ3CRA9TVsSAnZWagAATOUP/iN49iOGnfUXqLa+lo3O\ndm3elMbCIWqYKZehjX5N0rDmCAHnBo4wqMebWGZLhMBFwxoG3x4Up3IRDeob\n5dvUJ3k6QlCvAuYM6QuV8oGDxLBY23TCTUs3vSPhn7PWcQ1EtYaqhTNKwZMq\n/z5X8RaAS5/3j7VXm0r2/OYc+kABxLxVcd6yThL6Mv1iSfAwowYhUagF21gH\nLydaZhNkAMl+/m5BEoMXVm2WUYP/Ollt7BPUFNy6DtLXN0EguZP2MWAUGpID\n64nNYvDWPNrbgjtUu6zXqBw1mR9/6wC4EyD9QZBgfem5RvPmrk7EuA/iUi1t\nvmIubKXhYwCIMyduAckGvb3RIEv0KZRJwDl302GKhIXX/bNL0klPPrPJ5yUO\nIRCDbvms/f4UAPUUtg0VGJ7OokPs7/Ni+yHk4kjDm7s+1AlsfaAdqvtafy61\nx+ceFI5qwbkh8f5empifTkLHSqKkY1ZWe0AlrH8XmeLCiuD05iJSbI7oO9nx\nVrSL5YU4V6+2Sa/nLj9GxjKgyskU+U3+jFRs5h57gmdA+lKOjVl4oQz2hqoO\nr50P61U4dBZ+42cRfzokzt9nHVXNFUGAXbtKO28KwlFhHbBwB+t5CeaCL6Ug\nvKASOowTERGcyVNh87bDSfOpV4yyo1xf2leSjIDmwoB2Zx/SPuzSW2BvYwWi\n3o4M\r\n=vcwO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"0.0.0-canary-2021118154929","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-canary-2021118154929"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-canary-2021118154929"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-canary-2021118154929_1638978615425_0.9338335936846358","host":"s3://npm-registry-packages"}},"0.0.0-canary-2021118164051":{"name":"@chakra-ui/layout","version":"0.0.0-canary-2021118164051","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f0bb9f310591f27919bbeeaa3a5cb7ca2923cb96","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-canary-2021118164051.tgz","fileCount":70,"integrity":"sha512-n/Ndiwg3PSut200sxUe05y6vxqVjNP4dyqj2NaVflm2D0mt7jf+GPt1J3oywD3ENvF+GNZWZJSvOQbT7sggQ9w==","signatures":[{"sig":"MEQCIFLGeReD6zOX9qVmd1k5mXQ/W8yncx4f6jn4MDTWLbaRAiAHxe3IajxSUayEo9GRhNtmhIbu6gyjMp1jCwxYq26zGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsOA/CRA9TVsSAnZWagAAzgwP/ifaWLqHKC5mfeLFvgSW\n+BX8siER/idiceiuQum8PAlbD/PbnKoSR8lgJGpPgJNL1UAgL3oLETsnGqQe\nlMRzNTRxl+AwZN2zgdvxI6rDWKS2I0NBEl5+coBhqYE0904OgoH2KbWvLXSg\nfINexrn0xGqkwC60L77FawNtg9fZJnwldn7FPfH2XNfqDZ6RcSoGY9HR/jLh\n3LlQivvYJqL2oMPX/xo356WZSEOTqoNrlUcVCDyKR2Jr1h+ZRuU8xbJ0ap5c\n/WLfx/8kMbooE/nHlDGlusUsYQWdCeDsgtKwjnAyrMm2E0mH70D3BoLr5wsD\nmSlJzLnXGf8/i/CB/FHReSCfMSkjWcumAKGe2epjEuTZcoGuzey0ez8SMw7j\n05YUzPDGoI0cz6qDYbqmwAvdgJtvhQastX7EyA/sSSxse/KHHhxQa6g12UdV\nX9wFB0IVArPulTH+9/ELrWyB9Uudw/QhHfrxlsxyDgv/ncEgMJDXQsCksYfJ\nWltqSjMRW7IgowBI2fjoIeU44cSPiBnmEqv6Hq2esc+BFjyLnOp+5110PZTw\nBHrCMBWbFHf9CWM7isGWcWHHN1ksh07JrJd+sXYP7fzL48YzgqTAHyz9uh+B\nIv/qCUcqQLFiT71Twe9dvYRUi/Kcoo0IQgVtjVcjvreu05wQc4y6vylJ03b9\nBQCH\r\n=QXWf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"0.0.0-canary-2021118164051","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-canary-2021118164051"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-canary-2021118164051"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-canary-2021118164051_1638981695467_0.6841543565931889","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211191288":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211191288","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c92800c59724186ce5b864b864473d6c3154b868","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211191288.tgz","fileCount":70,"integrity":"sha512-sD+/bl9w/IOBb3g8cWYkBCN+g4f3yWXgtperdf2IQTe/p+PEFd2ELKSr01slIAGWo/Fu5A0OvAVdXsZpaytevw==","signatures":[{"sig":"MEUCIQDOqjsc9saI/mUtekKvcTxy6yM/lHKQoZcK7hhgK9J0SAIgD25BZBuN1rEgJPgdwFkVN+ngGoF7fg59PfEprPvzG64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfHHCRA9TVsSAnZWagAAshIP/2ta5CJeUX9SQ9/Jq02Z\nK3kCXfUGyY1sO0aw0/xV7XkyNDXImIyUu8EXgDxDfE5wvyLiEjXa5pYrYAZU\ngOJzF5yDu/Fp2QjuOVpmxQwFgbgAXe+dJIIoOfo53uk9/uCIKoxsZtHcXxKE\nPgVw6bZmgAL/jFmlZbF7z/7Daee7NJY6wSM8grG1MMdDGZxs2MF+84kDUXOv\n/HddZXjOQodqiZUChgfbABaLa9d4OdKqEMM91g5zYoirdYsb7wUfTjsww4Pg\n7xMpEzBrupJeS67vQOiFOorEhv4K46ww1CmbGZKL88N3gClJuScFCftAV8vg\npwDaBEom0K7vs9i5C3PDbQzwZfyYGaDsDLtJTao8U3pyDqqf4bdrNNQMGE2V\nJxtse/VmNiQ8AkGZ6TIPmTlG9VKeDkrM8KVw+bJm1AvQbaGtC6uiT1l5ufDk\nFl5kBHUTWMO9Vs2V8LzUlatE40H7zRlEao7gu7DGn8LFKby84npRaL+z/fEZ\nz1GD7rUsA6PcYrIf0q01bFf/V3VcwCYMxrsYRn32Mhm4u5izrbl2RddzWNm0\nQXPXHOql+lEBq/Dfg51lY3teXzVihNcXGxbefGPz+CYLUpBOSsSnWtDxhxmU\nz04TujbT8ML4WjOhlBZnNhDZUmMudjI4eOT7CgOcZ8nAfipZqTZQpP7vJQr3\n161L\r\n=J86Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211191288","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211191288"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211191288"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211191288_1639051719579_0.33752818259688255","host":"s3://npm-registry-packages"}},"1.6.0":{"name":"@chakra-ui/layout","version":"1.6.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.6.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":"fa45d72420f01f4f6082f5a5a0c202bf7b09a059","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.6.0.tgz","fileCount":70,"integrity":"sha512-WUfQ104y1wNueU33/hPlZsMzYJGjO0dXMpVkQf5ZNhNX3IGDO+5+MO2x2xloP+j45yNPi3p8ti/HBnm3dXI+3Q==","signatures":[{"sig":"MEQCIH+RZJF6NKngrMaVPXVuPhncazIOutbj9GCu3X5hpMcGAiASwoSaZzE1dZpY/q44CNHTg4+cvYEVqW+UeTDO0SNGlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsgTdCRA9TVsSAnZWagAA+3YP/3D2Cg3nCKWnJvhrwGSO\nAf8F3YyTnPvj/fR6dVMW79MFr98wl5iHaYmN0WM8v14HeGtbppbaZgX3/bGr\n07RzVJZCPlyoUxOCiJOXagcEz13j2wanxgqzyCkuKmJF+364VS35eQmM4Ouq\n4N042iiVGYdPHf8tbqzW1FKoLtJL4vZ+4OO1VMwfkC+MMqGKSe9HgJgGe/pA\nmbEb2GctPX/ohZRg9t+AKOwA3lP0Uoz6W0owpqvsqgGN30dqorsKPIWS2FK+\nR+1fwMo1QmEzgBD84z+XGF7/OXQ1B91RvpJpsPF3PEYgvPYu7xsB5Ciiu1wS\n1udcRPAaqKmUncCBh8nSFozX/WuW2b3KUxFRvQeuJtPIBIwvyszm3pArFDF2\nGMp4Jt6w1abRuBwJ+Gt+OtulubywFeLIQ298ZL+bqTcApdvOxTUtmuIqrpbJ\nOY3DgWQnGlt1ThaEKdBvAuIGUCAA7aa9qAWEN6G4Vzrq3h7NTqUVG6H4D7r2\nMrOLpxMGUyf8OmwIaRf0W9Bmy7HoDhqfv/vUbg2RLR9Ben7QU0msyio2LhXx\nJiVzURNyRpJkNQHU6Oi1Wl5K5yk6vclRd/UKzW2Plrw1KnGzfmWI66LzZaS2\nNqDGbh1UU4zDaPIPKcLkWG4QOzVdfJAQBqy8L8dbVnK2BvEj4tzZZP6Nxvmz\nwXRn\r\n=y3X6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.1.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.8.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.6.0_1639056605761_0.44257322963199","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111921327":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202111921327","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7b25c9f84f5b6d65cbcd7baff68b71de65332988","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202111921327.tgz","fileCount":70,"integrity":"sha512-cxjxHal/uBfeijs0+JQ/fSBMOHm68oafNvaArEInBcHU5MEzFlxBrxrrCL3enNmNqinhC2VFtiDT8utQEQIzBQ==","signatures":[{"sig":"MEUCIC/+X9VDO0GhtfAVVmYT5zfVXYgxjdPhPXdVvhs+bfNiAiEAupBXWw+ODIJ/uDhbcKYGMGyyuljN6TkikVSaD/LMJb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsm89CRA9TVsSAnZWagAArsYP/1Hikl2MYlTWerRzlMJp\nDIcj1eXmJ57KClBcBvFgEC7C3pIqaJtMjMR4SKgaanQmWBJVbteeCXQDC8jF\nQGMWtWCHp5FwtJEbC0FUqTXUKSGhOJCkZyuJydDEJQB+X+y14jb6zYxQPtzc\nEa0aDjJl9S+ZQlFl5UsaximHT7FHZTkgN7ewUgmqxHhLl2MlPIC33BnMjTGv\nG7+26uip0Cnr6cTs/vTrig4NymdHsdB4Sk8oH29HoCYA/HatjvbQ+HqBqrDX\nekbnv8dDFHvW56qda97MrCpWGdv8nKznTCUM9PDCoQWmExc+7MM9j2trMToU\nmDccJXtnh3YEnOe/dr6n3ZDtrmHQyCtKR5tMb2C7hhap89+QVyoj403IaBjr\nskwVNsO5L49oF5dlXsyEshp0zO+vPA1AjpXbljdiWTZR0qyi2auPSThK1mED\nLf3bbGwQVoPRCLrkkQGrv98owBM8hQrw0radyiTIG/j532F4pW187AaDOfeT\nZITzh4VethNVLWpk2OWpP4dRPsJL+YCoAjuYOaVksMCIZzY3LbOuYlFLSNc1\nd9IIWyBOa7pjcF4Zl6cxOpJT7f/WN54x4Cfbjpkvovf9XdCUCFTi0SsrKRZb\ndQZzufi3nQq8bgczOQ2Stb5oNNqVda23PcHYCb5kKqeo/Iaguf/gf8Ft8Jdo\nO/ua\r\n=WLr3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202111921327","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202111921327"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202111921327"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202111921327_1639083836946_0.2483442080721956","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113195848":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211113195848","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b97b494fb51ea24b73d6cdf7aec8ee1c3c5ae575","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211113195848.tgz","fileCount":70,"integrity":"sha512-7ubA1InOcbeCgCfLdtCSI50uVenUpYBG86HlpK4a0DCP5h5RzYsL08elQPDt116OaX8bgmbs5r0ZhcbWw3zyqg==","signatures":[{"sig":"MEUCIQCilUj5y0edX9gAbUkXVDJzz79Zt30B2E40MSunWXqUbAIgEBdLX5rqQbZL9jZJD/gmlgRFR7/rhUu3+5a/1lIp8j0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6YRCRA9TVsSAnZWagAApmQQAKEsdXx9VHgs9XwH4dNx\nbNhpFcHvPfC9LFCxxqHSWVU49gS/KsQFTLQ9ekQj0L/lj9FXuCQPgFmtffw1\ngodqBPG+LHXk6+ycx0a0UqbjV7QTaI9NZj4i0r9Y3GoQw1TxzoVyeqGRfBV+\nnBBpStIM/D7V4trOcYeWeyxVD2DZFsC4Nyk4XiRyBjbdSTcejPoFWUp/fXif\n7F+WbVkTpu8IKOzbQ73JHFIMbZO6EX+JFingqzDM4g6/JOGSSven4MKDtNIJ\nGUiOFV7iqygT+ToRbeQSSYqvTEmvujdFfC4Kvz+LwEwu7+dRNUzPhRu34T8Q\nYePareccHMpai/f79E+30Ah+jvNjuiC+hQTIIk4J+BgfEMg7hXGHdv4xqRrQ\nk7SdCENKhiNHI0QrJAjBZpsn0jqxbHM1rf0Uu2s7QFNQGYuATVHRMc9DDV3s\nu92WnuYN6FU8Oj6l2to7lTqY9J3wF6IeWprSqH+DF3zxOZcukD3ivSjXxdMB\nyuC9bom6FqX8WEb42iYKGiXcUDJmxZKvhfbCwFa9xMaEnEHIMmfBHIBXACjj\nFmSA+goCwkaZk9OH2KsZbIZ860JpCxaW/Rx+pGySLczVI7v6qlPVhNb2a3yN\ndIshHmH0yldeFYurMKpn9UQNOI8r/jqtX7Vn/jk7oBPGg99QRyYyGxGmnA2z\nrZ/H\r\n=xaMy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211113195848","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211113195848"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211113195848"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211113195848_1639425553516_0.7301043307743109","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021111320052":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2021111320052","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e023874307aa4b17095f1eb33c96735c020cd766","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2021111320052.tgz","fileCount":70,"integrity":"sha512-Qa+U8Vsfhk1qCLOluzCZf+oFBd7ViLwu5oEA/aIY6ffCJJKNazgWSZe1kYjF5iAnWA7wwqMDnU59pkSUbrqKXA==","signatures":[{"sig":"MEQCIEP9dWDl7c33mB5jwCI8cD2qWyicBSDeMbPmqVE2RVWiAiA+u22IpzNPuaaliv0e13oy7jAyyLelpfZXqIOgViEViA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6aLCRA9TVsSAnZWagAAXVQP/A0B0upEns+2rvBIfEk6\n6cqDri99VplViiGkSQDNh0KPuX+6pPaQBL7VREk/jZv1SqGDaHPAMnNHfyvw\n/IjcJSFBBGM51U9YNORqE4EVSPjwunbtgrtqmlMoNB916+DakcEoFC1CcG5C\n6wX58aV3RiAOCVaxXZCL9UXd+eMIrkPcSd38/doOiB2GAGiqdPhqrVVwkhkP\nrDh+ALeUQ0kehT+ad8yFHl9+gGcKtD6I9FbDOFXtFFtrR4aPidxrhv+CIaop\nOm/qYlQ7lv9TrnhHumCQzWg58Z3TFAwrz4g2e1QbRGKcJ+Kw1gPHjGu40IEh\nLBa3CEjwXj52y9jBvKxr/s+4B6EyX3HiHYDqg5NhNy0BI4jV9Y2IdJqTMSz2\nTPv07zF6/p2rDG9nAvd2O/8GSV2GUdMTHdpjk4wXE16HkUemNOhNQPyNbTJr\nXaCalyoAt/0Vkypq9krFY2PbgE85aVhGBX6j/VMieFFkyHp5CS0PKzsGL07w\n+IPE3039cy6UDDWb8mHsTvjWxL1047T0B2dAAUlCC2THxetG18rZ9TtTEfyZ\n+3zRB15VKPkjwvgGCeUlbZL8QhKb0JJ0Mvbiu9YQ2OaSzIUs/3pxF8b84mUw\n3XpPkTinIoBua1vkc0vGNSbV4gVhEbQZMRSmQl1Hwl7/1KpIWPhpXLcxUI6C\n9yRE\r\n=kX4t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021111320052","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021111320052"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021111320052"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2021111320052_1639425675679_0.6256658721024504","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021111320117":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2021111320117","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e1f83b49ea64398270ac21e0cd039b278cf26f5b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2021111320117.tgz","fileCount":70,"integrity":"sha512-2cLj+TsHn0T/yKA/slOHxunCl36vwbggcdufau1OLpcr9g7W9jI4CMW+Vj5s0GPrOHDMj2S0BqRyRDSM8Ixysw==","signatures":[{"sig":"MEUCIQDW+Ix9DQbcvdKg7z/nUXQzZy7Yt276C2w8iFdzv6HEiwIgVWRwR1MGmSFiTPkyrTgAjSQU59pWu+1pPCwQ7Y0Vmmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6j0CRA9TVsSAnZWagAAIA0QAKROekqpXxcqa1C1UYvt\n3s0rLq/wzyPothZXru97amYaPGgV1ufemUP/hnN8Y54zTM5ATx6V/2z1ma8W\nRHMpphkcMZ9whqTCCmnav+mXtFWnopfWPaMjV2fcMP890bCGGKo475mndPAx\nB+T4/FOgW9nWTn3UyOtf2EGgwtLfNhajoPVs/EceggayQlqzK5vkzIWj9TsG\noU3KhIrlrjDEUzgIk8rRJl2wilSuX71+PaBevOZU25GhWlHlRdXRBuwfujy+\nssvB1v991HODGarlc+v6nXWVyw+ZjNOXiaiiDmPqHUMV+EW30fYNwhfOLJyZ\n07zP0X2TtWRJw28xFXfW4R1ykPGuYqpXdS1I94VlNQQoo5Qyk8340TYUHWsx\nBCS8jWmubZ8NU5NmDXDZGfdZANRmB4TX4/rzLm/wFbHxupe1FzvhCK178TNU\nPHpZlYNyo31rNRoCT2ZY7Cl5APGnYgtoFvnyIVhEklFHXMylRrO4zE6FR51R\nsq9VkR+6HVeaP9bugveplBa0EPOxM4qCBuh5nndyzfEn6tZ+jBU2uslJtnW0\n7YNs+03GvkTPvabXg5X2bETPe6z+9zQiX0z5G5m2jDzED3XsqJDANhtOcj2r\neVL2v3YtCTAq8beFWV/RiP4bbi+Ws51wr5gzkgK/a0V9Pn2Np4bzA4rr0MUz\nlaFM\r\n=+Ll1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021111320117","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021111320117"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021111320117"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2021111320117_1639426292792_0.9135542668086185","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113201444":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211113201444","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"dde5780d269f62ab6c56a0af9abbdf28c82d7a3a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211113201444.tgz","fileCount":70,"integrity":"sha512-dulYUdl8LrGAx+dpbphx6dPY3QMwX3QF7suFkjxv9E+JzZMsDHKR3izpmyPkqYeJmnRWUGDDUJ+KbO/VUIR9cg==","signatures":[{"sig":"MEUCIGcYECCO00HFXMXEl6Ig9dXmeHZjcbUPPaTMINI4xoknAiEAn6ahoJGTBcEqGBYvLdc/Kd2tTLFpZ616aQMWGms4+Cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6nNCRA9TVsSAnZWagAAzf8P/0/1rBeIWvTXKv4uF9Li\nxEXphVeE5xzUW/VCzKYYGcmLPwnTAiCAZU3VM34NT1RzUjE9oV2FymEF10jD\n/ytTZige6pxVa+rJf12//f28mZAHrqLgjbT0aTmBGMe6RHLMp4TwhtohYzca\nZ5cebt60r7Pwa7CGEUNFkPHdezRDyidnMfGoTaJKAIjdV1hPS7u2AZaM4QiV\nQjYBGoE/oe2BpN0sNcn9Kru6e7dtVRD5+EaI9pR2X/ULYYUJgniKad34OxPu\n9GoiwLwHFIjfHPjM0BjY/zIH8XHySPJLXq/ZLvKt8g2ypF2khzP3emEXl359\nNGy4V086T9k29bxqimDUeMNQP3Pt3+0EP9CpVfrQ5KtMBqoui+XFbeUvFUpW\n7MS9COhK4ckp5cwcLv9QukdmeOjy/XGdxSe24ofL6DVq1oV/yl+SxzWFSt0f\nb9vias1DxheUlfgfGotgg+4HCb+SqhK9vLkfOYvLRVKd5agJpY+wwZCc2azZ\n/6T+bGpVekws+X+/Fq0TkVPF8DfqfsYWMdfJiPx7ZAT+hAeIcIxr4ZOrwISL\ndc5Ys/QEJxj+zrVYqVrQ9pAUciLq0YHiHGiBpPpEVsZk0Pl6vVnYEPIObkO5\nTVCkDlA094xlz7ZWs4MLUAZmKkxvmMdawg2CyBL/+/2Tfhf2k7eIEcbAo889\nL3Hf\r\n=u84P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211113201444","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211113201444"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211113201444"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211113201444_1639426509379_0.25182331814608716","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113202333":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211113202333","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4c7929ad6b96580aeda178c87a9add1dbb282132","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211113202333.tgz","fileCount":70,"integrity":"sha512-LU3slBT7A3Xg+uidq8Z47vkkalUZwcGaBUCcbV5n3wgXHjuzRg8JyPZFMX2x8voQ9+VKJcrZ0XviTpojxb5wWQ==","signatures":[{"sig":"MEUCIQCA8GehEw46Q3BSAkgs+yAIcvSt9h0Xz7ArFH3/ZYfFMQIgbBKTBVtmvoDyNU+dBmT/lgKqv70/B/RdlX0bAvhlkTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6vdCRA9TVsSAnZWagAAPgMP/RmT7t2dnIDcOdDIzTOj\nU9UMmMKBbAUtvU86JSU9TaVpXg0d/92e06V8ONi8v7b6miygcooD3PSJmZMq\nt4dfTtxBI7bVbf4DeRWfK7/5eS/XFWIJA1HiY6RFiUP+iSZtWYMUhv16B3ww\nHS69Qv62VjXsShFyPowsIIicIvHX2CUuZqhq4+gpWpsQf6BDmvxuapjxvGz8\nNGkyQ5PrVrNHwDkDyKKJtFlH8aies8gjIXCTJUaFK9FWC/CKivpT4Ss0Uyfe\n+rRHSBAwlKHQtl8q//kpy3QMdq7wB33Js4VyKRTZIav1pnnzRksz/zTmGpe9\n9Y+5OC6U+5njO1WTSBgN8X13uj5nvNDqzyEddXYYMZabGdaJJoASJwB5twlK\niD/WROl1M8cjU2KsNlFnNJ38SpuEsd2GYD/d2kXpw0ZOOGL4Rw7uwz/14BNW\n5ubAVcptaVCfEeE8XnDb7XdUuy2ms2jTRT8kuw/O+iOpV8a4+zpZVJCdayIp\nD+3z925vEOXt8O/KrC5pJew1UXVUSbS6euZav0Lh0Z/NrQjtjdIZ0on57jYQ\n0DhgySEM/X77EuXZXh+Pi/Rdiwj4Ph82i2vQyU2kyYfgay0VxbPz9vib1jCj\n87MBwVONzKz7uB3n7i1umPDH1Ls1AxHH7vfhnvONFhus28rUA3xcrb1PaH9r\nGEoa\r\n=ziHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211113202333","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211113202333"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211113202333"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211113202333_1639427037835_0.10145967174732351","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115102948":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20211115102948","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1b3de0dac0e4ac53d1ad89ffeee23329e998d91f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20211115102948.tgz","fileCount":70,"integrity":"sha512-2C+lDXH366rOob7VlL1kKiz+Sd6FUKo5Xs77FL/iD4KIlEuXtEFCzvzHOuPtGvbSWo4cg7Qi5uiSKE5X4hOlcQ==","signatures":[{"sig":"MEUCIQDuUo0DNGEzMm1cI0lnit4aTWA6k3CuavfV9TeeMJm25wIgD9bCI8A7g6YRUgYs+MwD/Ry7vEVl84MQmFJEhMd+1vE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucO3CRA9TVsSAnZWagAAGbkQAInhuoq5uJ2LrjfeTeoc\nYsejf9FxMblqKR8lpXGNB2Od3JcBR7triD32kM14G98QDvYUc2y6mPGrII3I\nxtA0JOgQEgx9T1+SvV+3LFNIJ98bKtpe54Ski0dwfRKCci3BcIYd36lmws2u\npCe6jAXUvI8kPNkvNpJI+sE6HQwPxp74vskT/KuMJ5uv8s2+A5iSvrmHOhYm\nFHFJ31mv2+OOTd/aIEX1Bwo3u9sh1/FWYpIrzQD3eYaPbPc+mnOo/70J5g5x\nNg+iLOtYNp+4Nh9d5msp17qCxIE+MLWVyPI0+1DVGXw1w69e2g7CueiuqPE/\n0Mlw6vofkLcphtx1zLdI4iYvgRauPcDpkoI+CW6gEpisw5uqAHJUpxAV6QLV\np0L4dmfY8VeBCPKBlxO/aCjCeNWN912mDXnjpIAuiFxVEATleb0xJFXp5DCP\ndlKljw7epg405Ik3ej2XC8G2nlbhiV7E4yT/ymphDXmhq99VI1O58fUBd37T\nWFZzvGEy9NfMza3PuHXDUBtObbkNvbTH/ltFQS49X3RBaCrJ7ZgYNatdtEgJ\nacn++VPZCmEZkCWU5JZqGoxXfD40RuUupHPBdjMY+G7nCtnITDx2qHTljuu0\nGhRPv59yeMFy93/sFaRkK2eKzk3K32G4FpdZD3G/CMCdAy7iZR5aiQpdVTi2\n3MTj\r\n=SUPN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211115102948","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211115102948"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211115102948"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20211115102948_1639564215500_0.3980946892519104","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115103018":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20211115103018","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7a60114c224163b1a0f30b6f634610a0d24ca98c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20211115103018.tgz","fileCount":70,"integrity":"sha512-vmARU86khLj9j8nRjbLmgvzoTDcO9iF8pVBOYKFcXGKhWFr02v4rlTUFQwvNV5OzPk06P3lyXtzzZycnsCaCLw==","signatures":[{"sig":"MEUCIQC8iBJGowFNxXDgkrHO0A6C6scVxg23BqTikrF+/OfiswIgYzVxLf0Ba3RlHTEl9OeKZ9hX/PpQc2fx9lfeFh8jIw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucPYCRA9TVsSAnZWagAA5l4QAJ88/qVg88aWZJ2MCei8\nie8/WidEf5ZdkrCummMRQEnw9H7gwoXO8JPq1sYBfUjHGnt+el8v6LnSCfQO\n6q9b2Asfy1Zvy5MYUDSFo2TZjjgMRIkNRBye5+ZtyapNvQtghjIIWXjY4qST\nuhzWBTuz7/b3kcWEWWI02jIKU6c4Xwf0tM5uB5ijS79YVQX2Ugo6GX+kXQyP\nEFpueWBG4dqXa+7pospQfROI+eHDF9lLCBj7BvBPtz1nbfJYhXq8LQw46PX4\nDeNKw1GHX/2zTr/SYkItBwQPNDv1FvTL7Oa4Y4H50+Tj5tDSx+N+vJ3Ao3bX\n0ToVmlUtoJMyngZZmiQ6kA+DPE1WULokkr13JeHJoXwoOsfGfZXm1OIxuqVM\n0MsvPiFz2nZgBjMAZQ8RTurAXI35XEJRKu3Dptv1gVPeSuTkVu4+2kk25NgG\nKxpe2qwY4SuDuih/NIF7AhjWh6jhGDItU5DK4ZDTZfUDYI2mhT2bCZ1FHSvJ\n0taWi306ZYqVy13U3zo1L0ihZXPOUKz5HF7h2LKVybfrOD8GRH3pW1yL5Drd\nBvbnpozbzh1okgiv4lqqJLK+K56rPMRCSIyCFAaSDs8Pttrq5Xy0KEG8mq5W\nPcXfbkdqh9fr+2lZ8pvSg1PDrXwcbxJXRI7wFStPSCNfDy2nizIx22R/F3P0\nglax\r\n=A6Ap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211115103018","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211115103018"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211115103018"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20211115103018_1639564248037_0.31977601021439894","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211115103050":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211115103050","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"42b7db318bf46bf6dc5dc772bf04127c3362f9ec","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211115103050.tgz","fileCount":70,"integrity":"sha512-nRGU4wwnrQ84bymK25caAxzhSosDA+OXz462glfJJVFCMy2LS5+ia1ZtgBK2qY///g0BZLEnhhNhx/3n4VkK2w==","signatures":[{"sig":"MEYCIQDpa/K44+4NAECt9Y+E4+mAf0GUPIrV4V+nmlKIrtWD8QIhAJGGBdsO0Cx9qxeobnyjl7QPzPUgZP/xMrNI68p4QZhg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucQACRA9TVsSAnZWagAA9Q0P/1ssDbvozcnYrMhgBMzm\nGL7cfur5vho8p4rLNKbHTsFy8VyJl21YiRYtFQFsZ/ZUAaINTu3SXzgHb9rB\nv9ZDLeQAqANCwdXhKQxWzc7+yUxptKais/XVQG+wfj3WbHc7Pwp/D3Z953fF\nk0T0RbP8I85A+zDHKFI0zLQKNFtDaFGe9ESKopFkyrW6RHpiMM9kxpBQDGyZ\nMzdKSfaz4EuOm1fdvJo5o6wG2ZtDB8phq9O2VURQqU2qyDKOlQj/9qgf7Wrl\ngZDb2oszFVwsR4AJp0q9TgWY0yxlAjenX8au48GRYilvOg7HRB4fHRYGayTV\nvV3vaCUEoFPqOIT0IlUbeSACYDNbGFgG4EhRED2Sd4Za1wSDI5bXM8NxEYr7\nDMq3O1+vr62Hfh6mcKoyUpPDmgYqE0leE2n4Qj4jny/WxSLA+SEU2Lr6d26W\nsgfw/k+6ZfchpKdPi7YJdE5T3sRywp7ZebIoeEaUzz0eJK+Fb1+lO7WyicoK\nU+mhN6vNqPGoIXc975rsQ968Jv0ydhCMnhAtMHSFU5VYKBTy+CvOASKlVRzX\ni3BOrqrGS8U6VmB0iogf7AIFDe7qKn7nOHe6L82YjYWgY2VHGYsRJP+WY4GE\nSGJou7Qx9guXKrzg23+LMiJPN4OvYhAieBIgkHgzR2TVA878Kgeurx0GMBU+\nAfGo\r\n=j1U8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211115103050","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211115103050"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211115103050"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211115103050_1639564288472_0.5668167660037073","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115103321":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20211115103321","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b589240631fa48823c7a43e30bc0de62d5055d33","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20211115103321.tgz","fileCount":70,"integrity":"sha512-+cxP0icIgWqcv/V/V4h7UdPdEzbQ15XThnmpOkoAKkvO8WTJHE3XcHzgVxMXFOXF6Ykzv2CfwFf5LiqMxkSmGQ==","signatures":[{"sig":"MEQCIAM8nKWevlXopWd6jRpMnBMM4wsDAKAjyC1NqOlA1TkbAiB8qBdWHQS32EoFLY72YmCZ0k1pNixu2cyNPDG3mLd7Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucSSCRA9TVsSAnZWagAA6OUP/1cEaekqfJ4pNiKaROCB\n4MSLHoB2mkAPgT5XFNSTnhNN7PY4aaAIcHkomNmwI0DU1raWrBCL9LsKyvsa\nUwM9zbUoRLKCqYUvgWFoAw28tsCERI3gbyyJhcEPCfYkNirNXSEfcJTiwFrZ\n52CbGftz6fOVooC7SAxUpc+hFjyrkQdmF/Gb3gYSEussAyG31LWwktPfU1uH\nb39osvGzqDTklLtHzdiY9bG/vuAMUGgi6SFrTz8zRRdfClcR4CC6r8VFEVbx\nPNd0O+EZT0EPYyjnuoNZd28nthylQVNFE/v0rCZIML23aaU9OKO7ST+Lapxn\nsa55FQha6hCCJBGO0c8YangSnXn++cw9sqkldmsLCf4q94Hmeb6bL70/g+Kg\nV0F/vAXd4ETAUiJc67eRd2zpf/p9SoEVYQ1BzjZAr8LLyfZnEz39O86PNW20\nsefGyEiq8p1Wsj8hDyrq3q9PvqN1X/ajQnT4U7aIVzkpUKhjHSPkJ/LAdXu5\nGk/7kbtK2JxtdqgOg871X4DwvKgyasLntyOREIfjFELI8YWas9dLoN7TT3bP\nrFxjoPIHGiG6TnoD2q/31nm0yKKOySOpUyWlYOzt+3tq/r871zeDpvcm6eKO\nekJRjVyHP6HgBDoJ9tnTvqRAhOJVrVzoc+8LSI436JH/0sIgpB/7eq++2dqY\ndOTZ\r\n=rm/O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211115103321","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211115103321"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211115103321"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20211115103321_1639564433901_0.43474617878325517","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021111913282":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2021111913282","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5037834422c242f8e6df7fb16aae774a2c28378d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2021111913282.tgz","fileCount":70,"integrity":"sha512-QNp5PWk8NZ9xIf+g+iPHyBsQyN9CZviKH4rX2T53oioDVnCyPald1Jr8HGBo5TQMmJUkiA9h+iXm7ysYa7nX1g==","signatures":[{"sig":"MEUCIQCAbM26VDpiq2xkySyQ2XrYL7ynXrJLuviEM4IYnH/FqQIgFQni1EMOLMeohm3hGoTW/kQTZ1EViU2NlPCoK9tdtiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvzODCRA9TVsSAnZWagAAGxMP/ix2ij/01CSsI8u285Mf\nJdunullrPka6wWZJ9U5BETrKNmH9GXecxg36bsDNvNLszjiVvBEt+8mSOG3f\nW8Z+GPM7ohLnFN11SOU4e59bbz7eRRvCWkTrnrH4EMJrJRCoDnqlxHqPn7db\nmTd9VU8/0QfD9lmq9YVcTLn+6i1oBMdoDRX7/gSSsGXV/7pzx0HtSsnQo1lx\nyXD1lBT7poZrpaRdTAKqYIwYK2O6QofkZYUYT2reLZcs6c3AjzeRbZOMRnLq\nqiz9Z8WxY4XVmgeAMf0Eb3+FRUfhFO4wM3Ait2ra29B+V/JdHHfDSBNlmKuJ\nQ0GxbvB3lC2vhLkV3kXTkIvxJV9OzWqlBUvZco21Wvqp3VQ2tbSMfN1cEov+\nnkuyhTNL4pstckCDyQEMjXGodgcfNiEG3wIiBONWi2V/ocIbOBDg2Ny/DkyI\nfVnACTB6/kRHj8OLNfK21BlS38u+NDwz1OseQKK7YXMA1uVzfNIgVCoTIz/e\n4qs5/ICc2xBnPhHD3FqRIfVnuJSKdA5ylelFULALiEvjOviCp2Dm1MKqbFlR\nmVzJDUR8B4uaTi2EeZJvhxYAthfEYYHAhP02CxF+G7LygqOU7cOq8a1AQByx\nFrzS14yr0mWWnTpuRWAt4aACtrGdbA1IvssrXinwqOiqfzeAgWm+iYwTITkL\nOvT3\r\n=RztB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021111913282","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021111913282"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021111913282"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2021111913282_1639920515813_0.17118043791096405","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112024830":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2021112024830","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"45b8cf8aa00df8bc9efb5b2d19b7ad65eedc29cd","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2021112024830.tgz","fileCount":70,"integrity":"sha512-ESet4xEepUsqcYaXAd08yx7KllED+74buAY1dc3CYn9aNbfJeBZUSXDdj0K0lHXsAg3K5onp2FhnGlM4NmC7GQ==","signatures":[{"sig":"MEQCIFyXDbMGZyzedIfSNq+S9hg3hu2MDxcFg+x396Gz0O5tAiAU0zydlsP+e87lMrpvyieMiZVJCLiJxWZIbvecj0ladQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv+8cCRA9TVsSAnZWagAAgiQP/iQ2wUsGGblnBXwPGeb+\nAVbYL854BwcQyzv0xBjyenIPQwY69GCP0Q5DRoQDT8pkH5mfWHlvqg+M+HUC\n0xmrvXWdpDlL41sniXEdiKBhP8Nw1rJzzqShNM8/QHjmu7XVn0iuIMpKgpcS\n2xZq38rFAdGGRTGM5cX1t229ztY0sBKWfJ+AoAhgOhl46jAEHZ0WZBp3xz8b\nQWp16JpJk65ICl3cnUZzwLCpJ73FriwfIG8Yu3b/RtOruej0XbpXlMRnGgI7\nquGOJIqrIrq+ci/2xflfbdkOV/xwTmK2E32w2va4lq/n0nzJKwrykeBQWOld\n+JmFjlM0/SwWb9gtH34AD7EPL+lq2JpKCSZMICW0Ax6wHfTtFiIT2dPtxhuB\nTobFP0iyFKnMetP6F0MGomctSs67jRU4Z7E9d2Ff5QSMN5zZkQV9J7iMb19L\n6glevGBeb1FJdNe58w3GhjNmY0lMDE7OLW/Y/J4lmjG6ef8lkpdQ0bgNGJBw\niCHpnZkMsrUh1Ti6wQ5bhkJdUuXpKsrmaUtDMLFRLSHW3b57Bx2fPM6D6RT2\nXkx1Y1Icu/8JDlQm2cLt4aY8M/zhcO/MrXg2zaCwPQN3BMTtujHEuy7CSjmr\nJydvUZQXyNvRTVne1Yry+aeIfwq0bW/ly5lgQQoGkSgo0RcROBEwLh/3L3Na\n4THv\r\n=2eGv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021112024830","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021112024830"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021112024830"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2021112024830_1639968540418_0.0964668445126653","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112031456":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2021112031456","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ac8d9d5057e049187a14705c5732490f07b89501","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2021112031456.tgz","fileCount":70,"integrity":"sha512-ST6PX3Fxu6sXOBJll1oQiSSGMCIZfzRhNrRXsF6uhFlvq6nRs/pXqUIqqdorlhgnSenIDSx6odrd5efvQkMRPg==","signatures":[{"sig":"MEQCIHrEpoRiNN+j2BT9Et6CoMnE3E6Iz70BL22jMJX2wTVVAiAVj5Ym04BKCfy3z1PUCheWHmt06SEx7GqoArOyf1b9EA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv/VRCRA9TVsSAnZWagAAGk0P/2+MsdgSF31lXsw1tyhC\nFVQuNanXJlSuN23LWEPEtomsj5F28DUcxDGHAJZrC1i5ptqBEVlJhem4T2Pw\nLMQISOjd5ttiZJK1UE3/9fwYcpPFER1Kod7cq6g0V2ZdHxetnBrFWtglabAz\nlyPLUPLTBC9j2QODc1NixMZu944fuvf2eJQHjpo4IxQAHvBTfuMGrlGqWI9W\n1iZuJM5cW0gdEuktByHHSyNADpZzi7KBByI0hNHv3kcx31g63x2es5LDWZVm\nNPZmbzFt7MkHiQq3pJoGIo1F43JD0pJi7yD/UobwM5nnjHzEefBrvY4i3wtx\nptCtySRi9xphrZRego4u178gSJlmBtGbbpW9Ox0BPzPvCJV+M7UJ8aS26Om+\n3TvilqHp+kW/NPHqyGDTZV9X52J3SevAbmPbgzNRqwubK/VIIJp1IQcdOgAF\n+K2ggg+Io53Wo6NMtA4C3muDX5R1ENbNYEmdR1Q1MiioKaC6RA0I/2ZfyWsY\nP2raBbvfbR4+PFJdmXn+GyvuxdimkIaSEmEYkgL9dsg+bl7QeQggdUXDG1UN\nLBWAQCkF+OHHakJygDU7B3k60kwuRLet8xExa+/n9jTku1XaeUn5E6tZVanZ\nzJ/YNpo73nrTuvgxeyoy9DV53Hxms469oXXZUdYb+ImRpdpcpThyo7D44sxl\n+MyK\r\n=gVSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021112031456","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021112031456"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021112031456"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2021112031456_1639970129004_0.11629648812145854","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112031622":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2021112031622","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3ed3a606b0ec0f361b79e14b41d541444dab1049","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2021112031622.tgz","fileCount":70,"integrity":"sha512-Hj8OVSLtVERKRSHrYg1NLyL/I0PKKq+s4VKsBfd0fd05HczM8+pGDLBux9Pyp4+qrNc/K8TnSSzwkTx9kvYoZQ==","signatures":[{"sig":"MEUCIA9MrkyfmVAdD1mVpCZRaWNR0ujAyjhWSL3RX2ZlJS84AiEA43HqydPxSm6Gk7TLB3PiTWqhG2F/soWGpotm0bgniTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv/WnCRA9TVsSAnZWagAAsi0P/0Dxlqg0a694o+2ZpLXW\nu4Y8Qq+x7m7g/UKTMmK8JznI7B/fhxK3JCKiu2CKdqyZkPWobhHKsS1tv0h5\nNVJOrqct+hhvWYWcKeNuN+DzOxisVISCXQ8unqaQwdCSuqB/sec1rLg4EuDB\nUbRZUKq6W+a0OYlHGgHKNg3/F2Qg3CgU9NRHfs5NMHHpsk2nevKAHWDT4QOt\nUxrgEwKt0gts3PAj1ebDW8Avz6S6zytwosYcp9Gn9uKojVkdC40CWAT07+C0\nW731gq4DBiCusmqMWPhjlmJ1Cdy0bayyNnHrTFygN1UZou4CWmwUyRgbmFsa\nYVZUt9s3Py2nWe284va+TSZ7YIflOmXgGY7yZcLtQua1noBwrlc0OAnsnDuZ\nNrZtWxmnYvb90kHYmPcer+W1xedtTestzWKV07exQs32/SFgaepbM1TpXb/l\n2fHTcYvegRuGcwe+lYmZeLhX9oQdp1kEgn5JWh98J7UpLd9nu06CGgWLfO9N\no+gSItMsT4Vu2cdr/j6uH4oF/rQhIFmAFGUgLHoiOqeM0SivfIeUZ4Y7mXLk\nWhmbYvEx5yT3pKbfSHma4fv1olavejbjIREvQkCC5ORrTSAfdV7zjNUCZd8i\n4QrGApRHOEcG1ZOxlsAIMI2NrnaWt556onJPcdFZTAiyo2bZukkVOH3pft8p\ntybM\r\n=J/Je\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021112031622","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021112031622"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021112031622"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2021112031622_1639970215561_0.001180343159977948","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120212826":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211120212826","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"09451841f0f5d8a1bcdb711752527e8925255c59","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211120212826.tgz","fileCount":70,"integrity":"sha512-KGEnsJNIXf3mKgp7ODMOHdYSn2TQJWWWWwmBRVOWlsR7XFssCJzjdKeWbHSZP0D1hyR0K811QDrBT5Ay34ZZkg==","signatures":[{"sig":"MEQCIDcCR+OU2zr1BlCAMMc/xfLFqJx/lTmdfX/leMvuAHq3AiBD1BJDH1ICR/6pYjbzMGHARwXHF+lY+eDbk61laMH6FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPWXCRA9TVsSAnZWagAAyuQP/ibqnvYMFS2RmC4zj7Wv\n6IjEFbJj3L8jWMla88ir9mud21Tl1qFKWjYnxkoOvfftniPeXbdykjr64G8H\nReV3K9kIn+IzyVbG45k1ypKX2871VF1dobjcoZ5YAupkD3s/a5Nbo8+5ImLR\nQ/VD0jyPNKBDHMVYkV5cXZVPKEel9I/qnPJT3hqVhIe1ATOatTribYcdnsBx\nETuGdCNStHXkTCPcxxNAqhNMvioRDWhy4yUxWifhrDeOt3swvHnHNUaq+eVc\nATc+TeB5wDGjrS01g2idacGJRjwkUptupfDWnZe3lkxMmkKpf87T1F4wMegz\nqvQFRY9o1oQP4/voCBY8sCffHjMlXC1/X3JKHCZLDJsjcI9+nnTanwJdM/cr\nW+a7WG/7Ks4A6C0/YleFbYxrX7pJX923azUbXCcTBLW0fkP74MZSRcAQyf/+\n59rCNMR4xMNu7/oVUIC6V3GsKw0vnP4zID4TLSukB50DIcf7Zx8jn9zTNsgx\n/hN5YkFhU3VCqF6J701k2SxmjyCb2RmD267H49ceSF92IoLbJtTpJsTt5gIr\noDD/u0uIH/wdB5dLkxO6nwusYj/LWsL3puIvhmTdX4BMKK6AR7muMLHt+4a0\nu7bk9Q1JUBml7bCK+39VgVLyzbkwcUBIRqUazcJpUW5rZCYQnmrNbmk195Gn\nwi04\r\n=i8R+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120212826","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120212826"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120212826"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211120212826_1640035735386_0.024673556576504163","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120212927":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211120212927","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0fdd7105f010fe11f0f54bb5cf93f0e63014cebc","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211120212927.tgz","fileCount":70,"integrity":"sha512-wqwerVUP0RhpP5K/CPS6BltcpkP/eU4lh/GnpaI68jrOUysAc9JlSzF/ilAW7rWU8q9+R5X3w98jLolh1oLzMg==","signatures":[{"sig":"MEYCIQCsHbu3R4G+mfA6jPbwDyEodHtz9m5y3AEpHfsSMYA2jgIhALgrvPT+26FnmCxLXSDgIBvH5xheckmSb34M9o9HrCBD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPXUCRA9TVsSAnZWagAAvFwP/3RZFh9fdB7+hk3MTZLq\nj+NybXAR9vSUGF2E66FIsJag2KJqmCn/iSgITdfQo2FmcjtLM5JLAtfvMeje\nWsohOEVvj/mzic1VSG/DWcngxIegBIYew48dyxsfk5VanoTVH4gCiXo5eryC\nyxBrqqpBu9Z8iK1bwXRE8pT4qfUVx2ztJB7P0K7ButDdx9FfXAGKk1ehrxRU\nwu0mYvRZjzlVcOn2cdCINZ4v3s2UdXVNe+wDDjVyMGSMIcf6SsRcG1CwzFzQ\nYnRBihJqNVjsTslLc0yXY9tohargisVg/Kk4XvHD6DfTSLLp6s61Pg3jfBLv\nJBHk3sGz5AUIYc0hEWBLJ8P0A3lnM8ma94S+bynaQ8NSQ9XTHLmR4Woay3Bc\nxyiEIvdySP/zB6xKhNZKGRTAgZoP6AFSVbyHwHQIQDiGYN1w1XRT58DkmYO9\nZ44OV5MBZ5d16wAKMqQ171Q7u7y9GlRuMJx0SA2LmhhXgV1pxaW2SobD+Xn1\nj6McmWgGxl04urNaRWfFb7H2ujmYs6s3rg810qNbRow2971T31I/wMZOu3hI\nnFvHoIU/cqigEbBbLmcFe0bLNm6bN8UuCHP4j/JUvPcxtSQ1rOONXQgWW1dz\nI35IoWebZ8Z3YQ/46jvq6dW4OW5uXNiGlLK4+jPV6ubCCAXhOfBDNIPR51vG\nc3dH\r\n=GMis\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120212927","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120212927"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120212927"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211120212927_1640035796554_0.2818492987127559","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120213315":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211120213315","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a3588e36cdc4e2491853b7fa72bd9714a26048f7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211120213315.tgz","fileCount":70,"integrity":"sha512-MghmYl85cvWajZTL8ABQKYk844RBKFy966LSdCUWc5gZE5QqnDU0iH467cmRMVtsK9IIj+A7FqFJZDpxImpe9Q==","signatures":[{"sig":"MEQCIDvTRfQeYPgQveuPbP7X8bYpsaeuzYU99hNtZpx4mxdCAiBps2UQOnosDDUVEGmOAKmNUYjSBN1H7LIdKTVaJW4iuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPa4CRA9TVsSAnZWagAAx/oP/2t/PXIaPvSoTVT9QxxB\ndeaK90VBsba/USKw/biSxc1dRjmZnDiblGkjTmahK1gUwQnWZGpdqBtItdu5\nMJ0fUGYGjYySwUQbB93rSkO6YCPOIxX6lgN84GBnFLAcjX+5hxnM88eT2XTN\ntIMpm6YQK2cQOfnW4wjJVgLM4ML1Ve1TcmBoTWXUliWYXZz448bHDCx4nZ8K\nWITSoSXk2y5j5/oGpRoO1hWkPya2o5MayqQUZSdvA00adSovZS5CIA3evAo9\nbrnFD9WcrS1YW6E5S2CqELFDT9wd1AIrntiqQGQvmg3klBfgDWcSJ2xgOYf5\nP0nXLtJ5ORnq1puVpnu7e8FMRBdDsS+Gt4U69T3q1jPCpOs9ldIX4mAArkTy\natYLQcm0T2+SZbtxinRFEiyvxq9jBYDnRGH2Ys+3TVtk4kscgHlHOZdxlwnC\nnIOTkqr078aBM4QgT1hp8IOrRMNwNMpGTWNKtuYoTupIFC2l6Rc9nG7k4H3R\nj1jPttwBcTrIMh1FuE/62WZRelLKSex7usQxWpW86mMKzZ49KOYO0F3gbgBE\nD4jxbNHQoyFZKs8jbY0M7WH/YUv/qOIsS+6OYokuIjK3q6zAheiQ31NL68t0\nzsJtSzwCvqU3CvUBQJDRr4vNWP+GwEVEuNTuL6sIoYrTr6y5smEn4OECWH3j\nnPv6\r\n=MFbG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120213315","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120213315"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120213315"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211120213315_1640036024695_0.18820597737448685","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120214314":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211120214314","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6003ddfbf634e329bb82eba148d1e0a015c83e34","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211120214314.tgz","fileCount":70,"integrity":"sha512-WHmn38b67QA8L0+k+zdSTpGRuPvH3ZJTd74gqez+5OTDuFioWFI6pddBeg2zyUVB2ifUKfavQSUbtAMrBLHkJA==","signatures":[{"sig":"MEYCIQCq8ezaf2je+dJs6/zBCFOGt8/lydd6fVwImwCaaJnvPAIhAO2i6DY/Eic55S6euQl3RfeXj+H8X0vwqk2OUubm9O+r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPkTCRA9TVsSAnZWagAA8BkP/iui8AJQmJd2bby5w6cK\nO2T1A9C5G9kaBNbN4acv+wLa0BKvhxO53l7xEOlzW/H0So2zE6RqXsHZAGym\nj1+xyeDMGPAb/x7vSBS6YbYlOV8qCyaQj8Ql8phjdatUPsJ/B5K6kejpjNW2\n4kM5AwYwPXDbnQfXbK8Aq+esoCIi/wYNM6vIjOugVAdui3WrYrO/yXVYhsn6\nrGnxBdczZGp+CjLuzqFMaSnu4WcPjXp0L7LzDU4D3GGXSZdqnoXLiwTPW8G5\nS71ar8DdmhJwurFGvqXiycUZ/KPYCaFpEhmOhI2hSdNq9W95CKktdcUoOq7x\nxcQVDopxRwGa9gesIHckLjM7WnrY37RmlUtmtzMa1pt2i5TB8IajWfpZUp5M\ny3H+901uRS030YZTSUxhF7JuvEP94l9f6uhHcePm+ZnoazMtpByTyoa4Py+t\nzF9MOiOcOAie3p5DDd8Jq6IGwxtt8hOX0IBCaL3QMg1AivDRTzlpi2ztrUOc\nH1p+Z86N0F463sEkc2O3cXtakVBKJbt2lAn1sGk449hDA7reNwenPj3NgK3e\nVgjLsMY8vjADlefVeJp/R+gENGmvidVWUbkRLwAjJaV7ZDj4+fJibNbpBiM0\n2kKd6PpBUYWatFu7ZQAKRXnZNHj98uhRpLtbOBitg5/P//bma2SF07p6IijA\nttPV\r\n=Cbnz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120214314","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120214314"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120214314"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211120214314_1640036626871_0.2723337255831699","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211120215621":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20211120215621","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5921d0400e24693dae88070073cbce8589f62c86","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20211120215621.tgz","fileCount":70,"integrity":"sha512-mVahkWaSq4Ph+/6gvDZggP9Ffow3FHDFlVa673zZ3GF4ZDgGXm0xc7wwSWDE5GPcumSm/PM9Z2ZqIwxRQc05Tg==","signatures":[{"sig":"MEUCIQDFKtXpN3xJ2VBuY4ayzuSIAjJH/nw7JBawDoKpFpXZ+wIgRoVJsslgF44hXFLSxysArjpflcjoIvQs3scQvf7EejE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPwoCRA9TVsSAnZWagAAEH8P/iNfyfZpIDiwX1VQjc+r\nQ/TnwbSBroMjXnv9nxGCF1mQD1tkHh2dlyFBDqmS6fSx/h+reSfcSLqTtDzb\ntj5xtdmIQhXuBlDP94IlPdk3Mt6sI9oymNgQymEJZ6eo5QDyJ2j4KHj3cys9\nz239zAK0j74CT7zQscMkvgsSyqwMYgp6MxDmX6R60p6lVbsLdxrIiC9t2J0T\n1nYl3ixrbfAfrSPcY5KPGrxecWALkkGH91uHD2LKkJfSbiBW8kaCFgNG+rUG\nkj6mn4Y48WtCvLNU+W++PjQNfaCzBBjqTQ05cbpdtSJ4RzSuWFg7v/mnyWFF\nijzTwZ9ZKvYPo71fzmBaCc+FT7Q69HeHYW67ZJRY5WMaQyIY4Zo+7P4E5AE0\nXPTy0QR7FD06kMKICB2HUh5pJcS2bjkiHIBXDCTgrH0AhRnkjiEd7mqJgq0R\nanr9pkuKG+s8yjAmtM6OQKI4Vz0VUb/ViF6lCFwXRNdYOG8fakkwhi1bPVq0\nZLwupuuL//o87K5Qob9wRimr1uHYynRjKTUo6gzUiFNL9KWrcXwt3U8bkZGL\n2PTiJiOn4eulNYDQ0CEoHWoYLfLaKWKUYOIfDG0NJFDxEn+E5VDF3ePt3+DL\n3RZTgRmtZcPxnScct8JoZcrWM1NS59WiGUk2DXDwTrLTmDnqE53d/oNgCRt7\nQgFZ\r\n=kvPY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211120215621","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211120215621"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211120215621"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20211120215621_1640037416250_0.16864482876200437","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120215645":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211120215645","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"022406585907701339c3dc130e36d0cfe7980bc3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211120215645.tgz","fileCount":70,"integrity":"sha512-vpMRYHJiGy+C1kYXAZpFVw1aVhB3lT5lnxcUypvQSj7klbkahqsECIuCzSzzI4ZheC8OD+z4W8MprWBghZzg2A==","signatures":[{"sig":"MEYCIQDjmeDNd/c7QKPNRQMeIa313cM7iW32RNv9PeEnpHxGWAIhAJyl6w0JOLyLMMUtgP6+CnwbyEoYl563LMc/Pw+ODr+A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPxDCRA9TVsSAnZWagAAjNcQAI4cC83DE2W4mDXJIpRX\nvrkgeCDsK9nIY+m6j/sI2WstLUFC5edVJga5OVOGfRTpqhuFakA5ibs4v7fH\nr+TdNPWIbbxp68MBtsFf7JIa6LeJGY4d19rdRq/7VJZ1qCWz7Rkf7w/lSt4v\nJBYNKrSr6hRlJiZVd/8ONPdgZoxLoUEmNz9GdkStEI1cGp7SiTIDwC7WCkes\nI9OVgvn7a0ltXXmxgWFyykPCdEFCR1HD6tO1SiMPcF0wMpYTL33ALf2sDel5\n3d3fDu3aAyoVu6tLVJODTnDEtEPxc/BRTlZCLTwt8EiTtq3QhyytC15GWNPW\npmaEdQw5jOLJfZcnsfT7h5FCJ2o0LM49wGRjujAchYfucZkzf1HIsrQ2W8kn\nC5ytIzJMxUQyppSlkfrt7ki06UFP6De+8OHEq9yOBLfqQXc00UedHLj1X+/Q\neKaibdYyWc+TS+hx+9TvRR6Mqt5sVO8JtVw8O17cgs/d6W6ymnZrmGIgiPWv\nTUrpgJvFaoFNjyF9j15+fDbjq8ib+m7ZWsH8QDulhBlx5o7ApqXfLucv0O+3\n7kCtMKjzVlNsH26uFnliMwP/fRZFy7OOJC1HGGv2izONJ/2PKa+oxvummn7s\ngjlElutrRzDBh9GrzL3eAwQP471eOiaQ4HM3k50M5qbyp/FMlLVMtZbPwiTQ\nZePE\r\n=1Ser\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211120215645","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211120215645"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211120215645"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211120215645_1640037442943_0.12644861740153246","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126151058":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211126151058","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4a3bad10e81334aef227327e8996de3b457f975f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211126151058.tgz","fileCount":70,"integrity":"sha512-OyKqlS2RBzC3Hus8jRkXLkrGNRZA4kiUyDfAV1197MF4p3yMywgJkHyZw9qLXuK63kFWuo7vjImh3dwHWvji7A==","signatures":[{"sig":"MEQCIFb3Qacpea0f5codMOSiBpRTL9fv0LOOdS4AkO3f+jdTAiAlEJXOsBrJtgFNkDfW+1L0QCQ6t7AwMnG+NTrBEQoheA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIYiCRA9TVsSAnZWagAAPV0QAIg/eHqPt2casr4KtPZ7\nopLzpVXwlcSCJJI45W5aoltszxlc98nmBf6rIaMsLYtTG5VxFTtqacXqQ4kA\nmUsfJSXstpkbCObum/6KJc2v2SkjwFYNzM4EDsZ1UhZFKHdKc3dTv+CKfCKb\nGdaouxI9DkZsP65B+y8w6tXypHQ67iwz6T9PUenRGowlNbQZW5xtTIiMz5NN\nihavFP0dDXg8YZdPaqJszblv8OY0aOtZsxs9NdG1BlhJeUIo49DqcxkJoKNL\nrHhmW7Kkiusq/FfuggZAm7Kjb3d2sNWQBPNFWivtfGv9lWs4dlaqDAhPFJr8\ng7PMrc/TxTD3tAdn11n8EP+n8pLD4VzVyRjUHiPaPQbxqzICCbPLg6Le9he9\nrW/AwvXWCNwkCYjgIBEyTXjmI6/Au0FAOM81bTQEHsACw03WUh/MeJr++d+P\nETS8kS4wphCC3G1Loer1AHFglAG/tQZoDJg9ROhlJr7cPI9rHUo1AHxj9BA4\nPIScnpOUg6pQa1HpDZ7ED6r93U9cPP0R4TNysneyh4lScEti/J4QS/qu0IYV\nRM+EcbTEczZKqYe2vyOVxyFAPJ4kwY8dNYnvDvGaZJaiF6DkjMkrtw75u+1q\nuim+zBDRUWL0ZO9wsQpr01NN9dWjW0d6dI4lOHHc0+TsIGFmb9JQSSc+U968\nsJg1\r\n=qmIU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126151058","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126151058"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126151058"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211126151058_1640531490242_0.6518876226820123","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126153437":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211126153437","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2bf34e82cad1b12abc4917356cadc5468d36c75f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211126153437.tgz","fileCount":70,"integrity":"sha512-+vgM+hQw5UHNLGLaCX858qDFr0Y5Lar7xDcCRax+4Vdw6c6H0rFKpdvqOkWQi4SkybtdgNbtliQ8HSrczu8Hfw==","signatures":[{"sig":"MEUCIA0wGkw73KVkn3BaCj6Qrt1zbv6c6TlEBX5Fdhtx6jBvAiEAo4xbB2fdKUegK+1XMmcbRYXsigEkyJG6atVgSm7sUMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIuxCRA9TVsSAnZWagAAv54P+wWLE1rsVvOKadPmVEdd\nugjHdUIz5+D2mse0ZS0L2MlyJh45PNiAul4tS1LDMv8GxJYM7PWqk6zwbhxT\nsHMoozdpIskjEYAG2KytY/xGaFAoDc57J2N1gKjwrGodinsQSqHOZidnKuMG\nPdq6DbZQnw/WzHgGd2xtph67YGkOa7DxuDvyKGb8+9ZzpAWufsDjJ4a9uIaC\niVdFev7fFcjEPW0BZ2NP3+5p5LdghA74kfOEOCjcz/lpl3NH7H6NHf+DMU65\n7t1U9XHamJl265EOmrbwUIivfNT5h1jpIgeJd2G7WdHkHdwiG6M8x+FBuRVE\nqb5aEkeuTDLtSxk2E/TnlQs4RD6TtpVuMUe+L3siobLTfkxUrCGMIJ/rTyR+\nrcrUZ+CkdEqzOjMyStbjJm13HPtksjo8qhcMrh68SD4HCWRTofpDrxfFMPCY\nhOA1NBhtZpu3lhyAec0fElW8QNZOkhAQvcyf3AjIoXOU4qVRCMg7lyqjnwW3\nKPbdaB01rKCl8nwOFcg+EBLSqrqHjTMd2MOQKU/6qvi56PFg/+25ILujEpEa\nTJ/Rck5tpXyhXk1D7yW8XOUOzEFJmBz9zVsk/z3L7s7SFr+B2K8tznCaBd4m\nNKdTn/9ZHBwVSYJDU9iYgPupukcg7/BO/awFEVlTAyM/yvR1SCDaRzhAR1bC\nkMPn\r\n=bIbj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126153437","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126153437"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126153437"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211126153437_1640532913603_0.2568091794105536","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126153854":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211126153854","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"048bf65511ecb56dd964127c3fe9a2b529e95d4c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211126153854.tgz","fileCount":70,"integrity":"sha512-wul76/OEmGbTOWJhOjy10kpT5TDvl/2VQmaFd52Ig/cOW/PHEssAqvOHN70yfdZ9vQnQukouD4iyf5ue5iHUCA==","signatures":[{"sig":"MEYCIQD7VPwqED3maNdd86GUd2fxfn9Oz9YgVVKyOQTp0UuTfAIhAJO9cnROh6s723I7OkRB5HxHPxApIGkXSnj0ZgodmIO+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIywCRA9TVsSAnZWagAAel4P/2Jgz+diEQKFhNZauinD\nKzSWmGpSHvZnveVWVZ7Wd45ISHvcMtuKvj3d8Jd68jWVAdHKH29uGMppkU5g\nRDUl1khaA2DuDt/iwIGBRNvku3pb6e/ouTtbBqW9Qz/fZHLRxoukPfnCMwyb\n1KbhoreCdEJXduapsjySDV0di0+ZLAn+IaHYdU2pvyD3A8syWyTC3uiDsw4F\nYnEjyPQFoZUZ/sgSJ5U9EdDzS5XkDuCt5QO9rr7lyfGv7UdaukwXI3KenxJp\nj7T7w9/mKsCgAOF4swuIWybOxpUVHFWXVlsR3jwH+xQAaxOaFotE8rzReLBM\n9Fh7+tWb5wsbyL0OCMjohOo53ohk8b+Mhk/N37G1Kkj++wOXy2wx3KkyyMDE\n1eWgSEwyxZiEHThI57UZERbwfO+b1ryn4Z811K/Yk7RNO2VWG5zVymL0dDhc\n+kuU5hMb9o+KzkDSEVt/3cAjT/QJWd7Gwrr/jKRME2IBFWoVxGpWd/1MxnEK\nXmTymN93Tsyjj4xoSezzDeACyd367goXBe6ebpjUBJaLyRQidNDMfhcjl1pn\noy4fm3MFgdI7GhCGl11ZLNBJsd8x1ZTdkBlQbUTt/LPRjbh5ebLouRJwSEa9\nF0TIa0QQJbJ8zt7HNyi6oOWNLY59PrynK8z6yPiJZ8bUc6r7tM6nE2PCqpqx\nm4c9\r\n=3i+J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126153854","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126153854"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126153854"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211126153854_1640533168539_0.19866699093603257","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126154235":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211126154235","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-20211126154235","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":"2fcc739d962bb6230838253854c2218a33706446","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211126154235.tgz","fileCount":70,"integrity":"sha512-exNqYXG6TF2d1cyQi7ZGSj7+3+hujwAGYUr8es2X4hY9iekJFzQzIaJDUT/AiJ3VotPHDMd0Z+8o4KeANow6vg==","signatures":[{"sig":"MEUCIGM77YY03Z8JRjvWarx0ko4h105lHac4GTqbipr9dOIvAiEAy2reqf1LRQlWSM3InWvyINmMMQLKAx7GUOHp3PU55Tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyI2NCRA9TVsSAnZWagAAjR4P/jaLhHq9IVWF70MVOnBK\nbElq2hwyjEyoH7E+H8mym9l2q0I/38C4hbqegPk3UDAsDBlWho9/66wOSVqR\nUu/CtJZQWNRAqvh/mhoBHW4aUrkUf0xizMUgLBipiH4AKvJM8tTcujFtLUQc\nvjqpDGhlyuwmyDD9DG7/R4lyxMQ+hfKI4Rmp4LkQVcvfDAnED94De5b8c7Ia\n9EbYrIt8l5isAdMnu618LTe9e55mvRcktWFckdn52HMuTGItbofLd/3VR9oL\nEpVcN74wRMnM5C3SF7ZvWglnYWqNr0/3xhpHZfDvcLIMuQTRkrq4mIvKwrKm\nLNUkfOfX/AmV4omY986q2JAgkIkoLvAtABc2z+LhL+sLXKolpaDmmFpQ9Rgm\nxi56RqVQJwBZhPxddRc0Asvx0HdF01YUJfg099CfYpmJcnaEpJF8Ak8qD6s+\nH/X+0gYkSUBxkSzofV/lkZyXHVo0Yxnt0QMY3elk9GYjUZaPrGaPQubjxbg4\n19EgbGMUzMlK2DYeTfeXQBA1N9F+W/6OKaITmcELUcbEFM9UhqtVZ4KssQUA\n5NcNgwe2b3fkm4OARGQhiwRX02SWtgxUTZQO5WAru4kwqGSGQxyl/YOXskRn\nuOw5+w2KxUvvy3UlN5UfD/9Tc6DPOD3OmZa5pYi3oO1ieK0FlrYHio4xrnjj\n8+9l\r\n=f/XB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126154235","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126154235"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126154235"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211126154235_1640533389127_0.1790765888003618","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211126154241":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20211126154241","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1474d32fe7c1fa4618ab9badfbeea832554e64e8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20211126154241.tgz","fileCount":70,"integrity":"sha512-LqABB2cYkj23AEPK+EXf3mVfDbH721TRBZMnazhkU+DYU0XcSH6FD/guHkfy8CmedwpkruVa89+djKpvokVdsg==","signatures":[{"sig":"MEUCIAyEuLDp74fVbbjT7FVD2D7ZEbk4g5rrFAShPlo6Y/4QAiEA5OEvxPh9bX53MQgoBRlk1IDYgZazAG0SYfKJjLt8oqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyI2SCRA9TVsSAnZWagAAGBYP/jSeXHXFPe4iUJ2q6nDW\nDF7Cc8CJazbRrJt2D1pEmsZHRYJS8XPAy+ckdjICpFnDX0fQPfFbju7K6dTh\n+Ung4my+IynpXmbVFyp6njMXefI9ODFV4HcEQnJ5E1duyGpGK1hEGu5Kr2zS\nLYoNrWHdRiPMdfh7O3VGvvZUprPJMgdfmziFkA8otOyNP7N8IGeNJlcKEIaM\n/n/Ew+Fe6zAnfeMznhEAjcwRQsAQw5KX6a/VPdWyMVzbd6MD/TxSI9OQPD7P\nibMSyn/vm3w/2rvUHyk8YATl8ururDQblEf3IbcM8N4p3DmVetAi4Zm5ylfJ\nnPrRJCJsiBeEqyHxlzTag6grplf1NQGgWqh/589bAFRrO2ZW1GQEBlIz07e6\n6sUvv2Ib2IwKPQ0tJRz5W2MExs+kyKeeAjtU4jDJw8oYA4Okg0D4EXkSpBVc\ncD1aiKFk4Yf9L+iI5pCBCCKyMVu73cuDv9dMB8HiGDGF8W8qtkWFHe3gznRS\nWrjUXoF6wDZmOrmp2WcZZq57DmTF8htsDJZ0bBeqNYu3fcK76DCOSHmfx28I\nwMMj38xNlCECDMUIVlRjxKuoHiSXMtD6NiBziVCUCkaWNrqxRI+mNge+qtrr\nFITL0Wax7uqlKw1t9x/eb3ucUtsHubApOXXthcAWCB+PSlAp+pd3iSxw5rWO\nOxJr\r\n=8Yhb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211126154241","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211126154241"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211126154241"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20211126154241_1640533394459_0.7928010450276439","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126155055":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211126155055","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"34a405a3382990242a12bdc18eace8eb2f87ddcf","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211126155055.tgz","fileCount":70,"integrity":"sha512-JNPUoTQWGytaGsen/HvkELb0bPUC7DdMNH7M99qzNhyxRbZxqmaW7odt8SchKgMS7ZtCKX4+eWlw1Br+Ty/5LA==","signatures":[{"sig":"MEUCIB0ebQSts57SoeO4nBWRQn5sWsGZRypA+let2vZngvgXAiEAx0/i0F9Wf+XU9ko5hPgtCSg/DRiWPAsUnsffqfloETQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyI98CRA9TVsSAnZWagAANSUP/jui3BHVSjWq1Emz5DUt\nv7Ek/9jZq+TXjiMuB6tRJNhIo4Kn8th1gOn/mI5xUDTeAixH96N1B3CLTEla\nYwj77BaR9SxrEXNvLH6FaSPY3iKTk7JS+U/6CkEfYeFLQQCuaTABg3ZzAzWE\nISp6V1ivRDGHHqQsJj052jY0fcYhn6yVr65ttPuq9CIRbpUpMSS0Yo+YMSNi\nAJeU7L4k9MxagIBlGyFw5XOokYS4V8irTOBoSlrme+EcwT6BhuPMUJSaRicz\nja+yo/SbboXTU6coAFMdO2g4ZOsTpbncl5vHesc98cWWcoQhZfE0ZqcnvWSW\nkKnb/7XKNA+ajLJvZDdmSkWIixAilxNhSqlhReqXwCLYuvYcxdr7vV5kMKfD\n0mR9qrGBqgI+0CdGcd+EUfMjeXWSEXtu8qUomuEpWrfddWfJG4d0NYBRszx7\nD7ElgCn5cqWg/4KHhsqDpnAjpwqVVC5mNfDzRPhQcWgOnmESIK1AZhVB7iB8\n0S8Q3jk0BFNl98cI4eW72tRCj+AfroZtLOVzNLcB725csK+qeJ/LBRGcuQcX\nPI3e1Yz1/IjeXCHKz7xMN9bSuMsZkgi3x6ufXVi8qf85zzsMk1RmCfgz6mvF\nhb91JvhMDQYTAl85xYHxBoldHebZNc8Zt7CGyPaxqNLK04hq9KZaBGsQr/3X\nUbXE\r\n=bmmS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211126155055","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211126155055"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211126155055"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211126155055_1640533884430_0.3867724241564179","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112616030":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2021112616030","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"bb2f23ab69bbf3e88a6b38e2a6f331f9eace4f16","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2021112616030.tgz","fileCount":70,"integrity":"sha512-4KiKM9POdE4HRJ3SyTvciSwo/v/rJk9sDl7a9m3MjUO0IRoKPk4Au3gh5zZfhNk517/xzls0Bv1BwiRPWOQpGg==","signatures":[{"sig":"MEUCIQD/1UWK6ehPjfs7FBFSYbpEI/WGkK0jyMydiHK2vyZSMwIgD8GpNwFhnRhZ1Rxp9vykrTCzoZM4kyJ6V8ghMwWRLR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyJHCCRA9TVsSAnZWagAAEQ8P/2bP/H6cR/qhk8Zerhgw\nVVo2VcXw/L6V0WWkeO6nzoTPpg7xE7NwswQhoCnWW441nT3XvM+t4zkbtnI8\n01LscH3LVnAhODuJYns6FH/gKGowJ2m2MpymvLyvRj2i+EX7Qw9fvfDB8u3w\nUt8ndx5uDCmuaZ39883hgH0XieYN3HVrKVrrC9f4JoWoC+jSIpbmCpqtJjva\nYYvOiM6qRoIOsNBCj61vL3gTb9AzGfM/gU8skLa1WUbXTp4wJ+aWEay7IJG0\nD7v6xexpcfsYlbECjtCZkCoBLVjYA0OcVezFwUn5pau43sbpjo0KK1GA7F5n\n6oC2jEkgS9P2mNoSZoBgbCYlETyp1Iem7TiwdQeqT7f+oTWmsubwNMSDDTcB\nbCKWVc5Ug5iayKxycE3eu+o6F8T2lcRKUJ6mC92VyShkiDudUzkguydYhGRK\njc2mhkZqNcsFGGYPLNfxpcknZ1dLELAswiQEi8tPhQRbX8SehDLTCpiXnXuS\nbFz0wqzipX1oN6ikJheH7CIp7YhFHAWMpR2JoJnRO1pJN/mvS1yWhwoHuHEf\nuRVF4TSXGabvlHlvWEd6CN8BzjZnxXI8Q0mVNDUpiJZB5ASCOJPSAWx83Zhh\nK6c4L1s40PJ/dOa9iRh5aa5jzEfA7QR5hOJcwvop53OPO9yp0ECPE1oqdMf0\njHOX\r\n=9H2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112616030","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112616030"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112616030"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2021112616030_1640534466441_0.5685025176950074","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112821613":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2021112821613","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"972c574f4f13392a9518d8d0bdbad8b7525dd911","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2021112821613.tgz","fileCount":70,"integrity":"sha512-vG9d50A+T8pRAdlaTOv+mIrECgdShYb5Ud8I/kk+0/MAFZoIcvQ4uLGEYEFULRUbjm/cgMST9NuwTNh8sBZy+A==","signatures":[{"sig":"MEQCIEFdapDjmddGUH4XBO7Sf9Obw69NmxXiZy7aSGq2azIMAiAwIJMC99vCW70WTQrG+pchzco+RJiivgBrvYssfdqEAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3xqCRA9TVsSAnZWagAA4TkP/19nTnL/payUF1KnEy8p\ngZh5+rpVoaSkOaMma5TvZ/KjNLGlXpECznBwvHQKjkFRuZ4Aq9XlELmuGJmS\nkCtVWT9g2rpNf1SPS/oe3Ha2rbGHK4WC3X79ZOfleRNQj/+wB96v+FYB3Urm\nGjF12XFS/bDJoqes1biD/XRJaULkYMzxkKll4JOp5OQhfVUSPo4e1nU0hsRe\n2AEHNOXF6qTx5TkpA/K/FFciejZ3rQNh+yQ/TEYvtJqkVzyFqxP24x1JWJMw\nWGlkFYoulPGVYTFZcgmpfjol9YbqG7ygoZ0ZsXifbyq60ypAZgtadazqSuPE\n5WoZamjslGeQ25hehXYot4xhFJhfXYXbOUrYC62uobUHgfTfshNycQYDjiAQ\nwmOauY/fbSLk9VWhhVRE02B4OYxdl8CiNFqgkzHyQmVKoKzMJjszKKDjzJ+1\naFmo9INrnvWgq7CHOpRxk1Usw3gvxnI0m4taKVUk6lXyRmwdJp+tcc68x9WE\nVSCBpSqTY9SVvw0sQOQnJNu7I9aFCCoZ5iNFGxejK7LXAZY3XlOqx2fnl7rE\nRtcpWW0XZ1ZNj2qPGXNbYqJiVd2T3pJ38FAWYWfvVJcdxiQFaXtGqUriXsoF\nUVYOIDsZRHm2USYkfAJkblRsqmiP2pJ8NKanqtnl9Gh/+l9RMLA5XAgHGmk7\nlbFo\r\n=pFQ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112821613","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112821613"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112821613"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2021112821613_1640725610541_0.2952511632094825","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211128215540":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20211128215540","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f3d574860607fd4e949f2d64967c8d3b73dc0b8a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20211128215540.tgz","fileCount":70,"integrity":"sha512-Wd843XlERm3owKTPCffX5AlvXstZqlLvUsW7fW2egnj1vAa2oF9YDY9z8UVy1AZznWy00IxqZjYUkmc2k50Uzg==","signatures":[{"sig":"MEQCIH6Drbz4IVoLHYX5GkYNySip9O+m/x6J1+fHGgK5YSmFAiBZZyj85Ke1JfkOH8HwlhrQlBeoG1vqJSZf+R4nYLpQuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4f9CRA9TVsSAnZWagAAgPgP/jsJ9AtEBgOlSynOALJA\n/P02nBUuSQA6cRmiSgpn0HuXsu2hmR503JY0+qbc7zphjxREXapFU/q1keNe\nCueVmrYsKtfSuSufPg+HRvTxSZKcYPLGh6cUQ+hf7ceTgznwoqsk0K4Ucfu7\nH+aLoBQXK5FQfAtU7yhlwnOyLyFlGsHb5gZp049WQhaqH5JBjPYvJbtd2TDH\nld88niqUyV0EZZ+gGtj8wPRVUI2SQmmvUs3NH2FPTszemlD4NXweWf3xVqeA\nytGXD+xBFW6v1su2AUi1uDR9svieDPSMP/j3LghEzKLtJ7O6SmnXVqTELtHi\nxACzYH+1PNXaFj/Dw2kalfNwrziynmUta/WtugIx8QgimUkkL5HJ+9gTHIHu\nHHcMPPJlzR5OTAfrXYZqtvqmXPCzq+wPz3kASGRvJ8Nt01lrbN6nnbghrQk0\naWWAvH5lCD0JGvQxRMfvlSk0uBT7fus7vy4+rHpO1Z/eykne4ui/hiGOIGbM\nnM3m0rpJo69ppv9ftizDm3iqMWsyofEJMHbxMDTODW9JzwhAJt5xlcU1oDHt\niKxg38Mj2mH5iVHelXt/3TeCgGlY3Yb3F6zMbzB6qibQsbFWrEdAENtCwBxX\nqCQTOYFjoEZlOJNQ4lHUfAT6DwcdgUReP84Veb45fZWQhC0qMArbcnIIJy6h\nVckB\r\n=Uqko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20211128215540","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20211128215540"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20211128215540"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20211128215540_1640728573120_0.9406122221023154","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112822349":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2021112822349","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3ee956cd15bb7e436fa06370aeed9a18f0371486","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2021112822349.tgz","fileCount":70,"integrity":"sha512-4z2o9ulgaekZBoxJ++mwz5XbeOJG2BtMJhi4ZohKaOEzWA6R3R1qKqYC23fWyGeDp8NAka3wwggOf7LVN0qcKw==","signatures":[{"sig":"MEUCIEhzI3TeRIak4A2i0kr382pmpkPcqE1747rVAYlE+MKvAiEAnFqVGejWIC/CCcjjePGdEfr4FFrNVYGFoytYmbUBG+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4npCRA9TVsSAnZWagAAgi8P/1ohx6Lm3sOfThp1EXJT\n10XRk8VnmiOZCe36rLn+EPXIfRRR9M0gQsH9h83bATbBYA0MlICIV8rKN0Jt\nmynnzBNT7Gt1oKUkfebNjFnNNXUaZyCpj7JZ7fF/AqIv/D1qgL9p2xS+UJy/\nVPvPxvHJ+3KSY7vC5iF6IQBInfdOzVMQXXxPwKcRatKYAhTUDDRRCP9CiCxm\nDEi6soNLt9iPkDGmL+1cimRaB/8sqWTzfvrl+e0aCtbLdKtAN3dbH9U6Uh+x\n23Lls8s3By7yIgSyAE1bfQYUnrd6ljSfYmRRpt7SpaMzQRgkGZe5hJxrJ8Yd\nMxOIqtqKh4K9YfCL3ZP4dBVIVMnESIgDcp8A88C27nwUPOT68a5J32DQfC8i\nntig2ZHTYzqowThBdZMx7DNhpDDJpcH4fUyafdB6teR9c54h0WNl/BB0JSVj\nLxfUz4EDMrG1zdBO8IvvWelMDc1CwbToqjT5uM6zSFMKhUXrebvS9KOJKRGy\n438kd9ivtk6ned4+n1B2UOHBGbC1+mAVOttBO4FK/kuOxrlIoKNW6d4pbduE\n3OBkBtlcdLQAArkkVMa5NrD+OJsySwIfEFVL+a32qo6kmWuP9ZIQmDokJWg1\nWI7v368haJxhOq7ROVxn8nIi3FKh1dgYsX0nH7hpHw/Df7fXamE4xTfQnNDR\nZ/71\r\n=Yh5a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112822349","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112822349"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112822349"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2021112822349_1640729065673_0.319444993256047","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112822415":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2021112822415","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ff55de7051a0fe78eada8fea8598f3ffaad7e5c0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2021112822415.tgz","fileCount":70,"integrity":"sha512-YDvxpBqx0m8JZ+e/0XLAUjdjNCOjI1oqEO50cQZrReyKM6m8BQHBsUGosfTysbnPkkFQ6Ktp6LDR0on8MFN0eg==","signatures":[{"sig":"MEYCIQDH5yq2TQ3fo1K0aqMsfBvbr5/1is5vMNjThAKBIfwyawIhAPBViIti3k6Q+3I61CBOjkbgLE+IMVjm+7tGVbMAB7hG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4n/CRA9TVsSAnZWagAADeEP/2FxtHemg0Ocuputz3IX\nOk3T15B0PyIlL88RJFx9V+lb8GN02ByYzaiRaMKf0d89oKNO5zGR6rpyKoFv\nUDUehNpyTA++gDvT2qDL/0IpXKLLunWYkEa/6fVvwyGdX4X425Mk+sLf+FLN\nMFBPDTPDHZxPrMv+IGeQQmWoWtAXH1EKriwaOCFOopw/m6iFwKkYvWz6khoD\noGX4SK/lX2SANwo8XzTPEvP0ssBmCp3l9F/H6NqjsM7fxDlBSHh7/4w1CsUO\nKfg4uT7eBnKZ7+uucz/ewM0WvTt9uwDhG0SHgz0X1GI+ln7alXbbQv68m8Ps\nnrQ97nGbKiuCMDsnzpxmKkziA7lHZglj9zAfhJZ8ESutjc9JJ5Ck7uyTwIAB\ns9YM4ZjZZWK207COSDBwVn85hog5dpZXLQppmaL2xgeB4H7Umn855qpRo7Fe\n2sEic01wBmstoqU9IEOYlY3XTavLhpzBeiGoNoE20nv8xi1qTuOCDWuw9CKD\nnh5HcX8xugYPLGheV0NeRjafRd/CJJAuckeUGGzz5cUTrMF78niXPQftL8rR\nAaGHzyT941VtLG4AdHCgbGd6pWj4dnTi/ugfuo6+mALPmzrpAoWgtXqp4uxo\nH6s7PFMU4jYEOLZvZUM+HwKtwn3tOUwHn/XQueodUEdA79bTVEZDoMdbQrVU\n2Ck+\r\n=ac90\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112822415","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112822415"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112822415"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2021112822415_1640729086921_0.20411715978779288","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111299618":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202111299618","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f08ed73995fa49db7a21c5e4086687580f1d7626","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202111299618.tgz","fileCount":70,"integrity":"sha512-pWh8MDQ00gBh+9YrNoshCpHOP3Nl09+fXzHGze78p9s6B+wxcKUhpCq2iK3M5BMzdJHLX8TnK8hIo5u3XYHhtA==","signatures":[{"sig":"MEYCIQDyGsyTG1EwuesAXiAe9I/obkwp8H5CkaknC9eSkDWQ8AIhAOD/fxptKVcAYUNX3h1TK9/Qw3o6eXJa4IotCFu+SIqb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCUvCRA9TVsSAnZWagAAHbkP/iGNFJJqHr9+flJX1atW\nfYay7mDZUZA0xczFdNYvC3rWj3TjBsA8J8mJ7rGLFHyLyIEDs80ehsSVfYVB\n0yCQjGW1ZnX0ZLCntUAnb/ce583bnJUnFKh3xftM/y0sBJO9TQV5SCjYMQ0V\nUabIgeQJkSRZnE6QJLx+4ix6Tzl9hNWFR6MlhY6VT/Rn01Bqm4aNTHH1x11r\nuTNq22QRblyimdq1GszBP5ry/dKk5ksoXLxpQhF5ZAR80y/2qEHOAIdPCHlI\nAp+JCgr1vKx3UzfLfpz2P1YdDkNnnBpRsGc03B7tbW0cG7aPWBsZ3faOiVlN\nQl7yOYPd3ByzFGOMnRHsb09/Edh6YdaAxqATxvq7EmOCINEHV/KnjMSPaNL7\neFfSrhH6LaZaCm/1DPcolx2r4nlS77n6tB5qIzt2rYW+fgqz7Qc9IX+P0vS5\n52O1kmouFwi+bmIf6+Tx8yuHuL8aAZJ1JA4HmHSvhwYTIuSdWmmCHn14EtwA\nXb79bxANXwdf6dxZ8vly2rENY9wnMqFcHwCCTaef41OmFs0hiK7C8NEW5QbS\nBKY/X7XwqCruqwm7AzflUGIH4HYYhmn841I1B7wUjn1ddvbUBo3ezDCcVMyy\nn3Nx3vbX5oUSRqyfI4oJM7MnFSVHnLvdpMAnMcBlesXt6kbtBem5fx69A76w\nGFJ1\r\n=53es\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202111299618","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202111299618"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202111299618"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202111299618_1640768815761_0.2131505067225652","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111299647":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202111299647","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3a6f3dee4fc5bc392de74d41a8cab8c1669c02e2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202111299647.tgz","fileCount":70,"integrity":"sha512-i9y3jPTEUo6eEZQPUCVu7Ag88Es0x0EWJYXLUcg6xRC+U3aNaApBiL3iJa/YggPsjuw4ZHpp+XSVGgesLNZwIA==","signatures":[{"sig":"MEQCIGUmNx7CroXceV4cdkehhD6N1Kye3smteN4k0SHM1CavAiBNRtCq8xL2FS8kDtJrWtvWKTcfDaC5Ce4SU0xFGWyajA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCVICRA9TVsSAnZWagAAsfkP/2SYk/RXewlzN4h/QvJm\nBNOKG33GqxnxHxa1yuX0fr9pXcHnYh+xY82kOojh7q5aumsat0qAPk2slT2q\nburV4vSd9JBv5DSjUb2YCI3qO7uRINGmWmhaCQwbt82UQHw/zBBYHTy7KI0o\nTs+GWVfU+9FYvLFhbBcmETME/sQI/lDwMm9CiR4N1EKCmnbHM0+7Xu8c9NmV\nbmE78BvYFHJwN8VhnfCP430+e7bcZFREO0/ChJhifIgRNEMOX+eUNEk1F3Uk\nf2E7a2pQVCvkItTUN5WpNs74D00RHXSNcgI4c0saymDgXHy33BTuUXm7ynU1\nvRrlvSHiWAuadcolvR/GoCI5qgUmu+ZOdwfqzC0fyRPySnwidbbK9MwFt3nX\no8pcnVs6KLsiyJCm9tu24oLVgDxsI/HsAQ0VfSsZSXaam/2H8slTrTt9xeFW\nIY5iYnLtACdhUPWb3qnOBfxKcXP3A4jlhZIc6msqnCd3JqOa6oNBckdGD8NG\nE5Ub+uTzaoN3qHKeFsnIX+T+1zm4PTNep4uMXC0dkE+4zBaWxEp+fUU9f/y6\nk3xb+gbYYbh8tYFF6ITQvsmN3ttKu1BLUnUrMlyb21nE2SfSD2cwPKSt0AKs\nQ5DMaaUgTsLWPSCYyIvIdXZzoadvk1pfSbug5+rEX5fHSV5rtCKborvDW+7q\npI5+\r\n=x2bM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202111299647","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202111299647"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202111299647"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202111299647_1640768840715_0.17804148442659073","host":"s3://npm-registry-packages"}},"0.0.0-dev-202111299720":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202111299720","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5a20817109c8c2ae078ed10b979cf89ebf8bb246","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202111299720.tgz","fileCount":70,"integrity":"sha512-5AITYUpSxtskvjgD8WwYC58timTNJ8Z4YYk/8pJhylMOfyTOMHPs0SCjmOePnVAR7lmORtjgFm5pM4krdp3Xgg==","signatures":[{"sig":"MEUCIC+GaVaPg5aneSC/A9JWsunN0A0R2E7jKaxleIWt+cL3AiEA0fPQ3EjInFWP3QKNyzHEccK8y5j+kUIDgXUvJM1HRpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCVtCRA9TVsSAnZWagAASJYP/RN8TQ/wChL09XXoYkPn\n9MiKyIaNJusTnlPjQZsquaAag7QUnqHWkGsO9supxIkMYIkgw7uhmmgXUh0J\npdbAKRuxXjf2hvAg4zN5OP1+nWjvGk2KUUi1PUZsi766ry2ki+NvjGNlaRMh\ndAA9+4UlcMIBKOVHOZe0GwO+yHRpATsgHLicz1Nrf5MPSIgZTwxCaRlAfzry\nE+ZyXXzsBFOxZvXv/7WZZmzrmHhURLO0Qmoo5LTS7zwOQ45HjqcxPNU8rsU6\n8yNISeDdK0wr6lh69KdBoCDYNyTxIzvARcgHa4rJPEFXWUfPUpRWlTd2RsG6\nRGpCBTwMH4rhhJb0gTsi6aRB6Bko743siSLpQqAVyaIVjaFeBe+UPCxkZKXl\noM+mY26FazjZP2htLQ3RYfCfKuhQI7x9TQs+Vh1CfXqNTcbJL6tgK4zyJuuS\nkJe/KH1+UdyJh+srCouDp59WYRKM1X7VLBya06fjZ5yci7uBehfaHmD7s0Bx\nl4XBJYVjA6q8+rFIH1MBm7M9RfFjqt4T8WQYRZkxfWEcDse6isL+QvSnftvr\nmSM3p2ufuoBTWtPqKDfg47swnzIW2K1hn4t4hXcCKzUSKMjtkN0nKITqCLgX\nX/D5G+A5RTf66VO/rCnKUYclpm7Ae+hHN1mBbsZO60ndUqgcelv8hWvwvY0v\n0M8d\r\n=/dmh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202111299720","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202111299720"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202111299720"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202111299720_1640768877343_0.5571580397386895","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211129982":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20211129982","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b8f1b66b98b7529a2ce9404892f87b5759188a97","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20211129982.tgz","fileCount":70,"integrity":"sha512-hu74WSDA29GdR9YD2XpgVIgM0143swssXLnGmZmijKqesfMV6olnp+gxcpA0AzAakPQO1m9mvh6kvfbG/S/DBw==","signatures":[{"sig":"MEYCIQCyMJZhlmOENbF5bgANs1MlrBjxSetCmwTliwijjl8UowIhANxPpmsbU5tGQgvfGhGvQxLmTiys5UVeXCbyucaievUA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCWYCRA9TVsSAnZWagAAU0UP/ie2OgZ9+wIBVhuBIESr\nd2p7xU5MXHK+MppI3HiSpJK6zv+ffY7hp3r/7Q+0xdwk0O2zleKw4Mumv6b+\nag92wulpkeZLVODnG1R7lbWMadTJ0OAx5Ht0H89rTHeAs1Ebhx5mV7LXoVWb\n3CKbzhLJBui26WlHBHBAcc/SjnG0klBEN8wKoaSphVgJXKu+yhvtGOD4JFzS\n4ySy4KOLxELE8SyYZjR9dEGo9fOXGckaVltrlGt+ztajjAcZoxyCiAajAswy\nOy3T1eBRQhDHP98rh0meWkARuHBq2dbs5bX3klNAoaUt80JJrwHLr/BfHm9z\nDS85jNCbJudCZnauZdVeyHmc6dCieIXifR61FX+pCZbeNMUBhAqf3wxHYHJl\n7j/cs66fvAaMXX8VOzYXw6Honz4ZlgKKG0JLbZ3BF/bxNsKQCFFp4TBpv7LK\nZHZVlpfiDyVTa5B2lUzm/+8TNbekMt+T1cSOJEt0QwDYblrvoTBHKmplRftI\nHSiRHHXLpLPs4iF3JI0PGuqpJTYm88tUWzPkD+EaON2pCIZ+zp/qykkm40vp\n4za9B8e1I/SQ5MD+rxvHfPz4sReaNH2sbxu994TLCifMQ7iqUYpKWVHd55xB\n5HWqXDSG849kesJQd5S3CspPlmqAWltuvnWtoOZ4Neacn3I1pPQ2CpfZ8ILf\nR4YV\r\n=Xt+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20211129982","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20211129982"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20211129982"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20211129982_1640768919830_0.8129916314841912","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112991213":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2021112991213","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ad55001ee41cc69a277279ba63b23cfe10cfda67","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2021112991213.tgz","fileCount":70,"integrity":"sha512-/XM7HAw706LyhNVG/e7XG+Hm0+29QmcoiYqNc41u4dyZUPcdOh9SQV/Pqs2yX7NOV9kMlfdSaJK5R7r9gICgcQ==","signatures":[{"sig":"MEYCIQCD0anQbAsguOWVPiszsNL+oeY+YcX+PO8NVanymk5Z6wIhAMz5VQdyKy9vKO1eJhEwL3vmCG3mSlH9FtqjdGVQMzXC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCaUCRA9TVsSAnZWagAAgIcP/jOX86cyHP4T1rplMXbt\nMoO79Mk7damvjYXMyKtw/gFs4rhmvc45M9jfJb0sJDTcEUAcFAbPpe6ooCsv\nyrkPdt6FBC8Mm+eaB6o9JN78GOSWiM4H94Jn3l5Y/nOUw/L27hn9aBbmju8S\n6fMdLpiDDBMcw9nH/HTCjP1wt738n3sokzeUES4KY8Qt4C3UmxYIdwmxlSqT\nzr0lZYRLXcP+7dl7EUnf0ABAADTmOhnhiVL9aUFXmDBI5rKksu0+1S5D9Xr7\nke33Bjtvy3j0GzjKajAqoovmaZJF+hhs0kqs1L5ySaZLG4ohLjOvL2Ucwt3m\naVUajw+MF8sCC5Cg4ZeKnDNyGOx77qofsuTVIOpM+2/tUCyow3QHIYTEzTEc\nICPWhp8IlTxtEH0RqL8HwSIEkchjsvB1WeUcmnW5mrQxa4LafXPExIwpI4yD\nS4ptUhIAjYyHtqffIc2A28uHXearfsYSXNqj4pOQ8GDH8SxdibqCaRmenu3U\nD9GBXwrBSio5quomrTCSTbAc+793NZ2+zCup1hK9tXmMhx4y83K/y57qTTip\nYismwiwo6ocm0x9fjgn59IVdrGMWnfOn9lkW2/O9mScwzmH2UFj9s1vI8Y2H\nEwIJYSoqmZlJAyEtha8YbK7rnu/UkUL9Yn8jShz5LC2m0MkZ6Sm5LuRcKs/B\nBP9h\r\n=q92s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2021112991213","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2021112991213"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2021112991213"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2021112991213_1640769172100_0.2713530688071768","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112991233":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2021112991233","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b16ccfd99d409077e9461565d20cd9a25c6b1b36","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2021112991233.tgz","fileCount":70,"integrity":"sha512-wzFhW4JaqBsFbh3I9TLADE1/OrbO8qsF8ymelxEyMHoUsAXMChLyAkTScGQ164Gj0BGWV/NRdzFlbUScsGto3Q==","signatures":[{"sig":"MEUCIQCct6qwR+MlndXAa91IDpAD/7Ea06ld5qx930H5/ljXygIgJ/RtBiXSlKSY1R+MJtIp4vL852a63h4k/a4lLz9lzJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCanCRA9TVsSAnZWagAA5XgP/34QbDFet+/NmvxBlSeT\n005z30tFC1iCTzWcYZ+WJpStmblKARODruSlEml4vUfm0orKl9vrQNDopWcR\n2XEuaw/TLoIrurkhB8TYYVnk+B1p/tVG1pJlH41A0D+Es5KPkoMCWuv7DcZi\nrkg+jXdd66YopFImkWpr+3awrUHkYK6qd3KRfLrvesTq7/N7y6I/jVGUSLZh\nRWk1cAn45JTrOK+YcF63lBVAxROTqhYyR3QNI8QDEOimlqYmlY1VDdLyqJ9E\ny9kU8wMJhDbP8MjDhWevqKj81j4VeD3qoFNlGGPwGEW9fY7lfZboTTn/JDvt\nolmtcno59KftJ4GsoK6tvGFzICq4O3jVlE59BB7LDXbvBgQKMnyju+9Da+SM\nREl3JLp4pUNLvgLuN4m0LS0EDGN4x43fzPOtOB4u9fQv+GbQw2JPXduuwUOx\nzYooaxb3MYYk9AEtprJU8iMrcGKk94ewQ3kDAW3uGr9ntRDzxat9myEGzuo0\nKBQ4rm5YjO5wXqXRh9z/vZ006bsdkoUMv8VLCCgTPHag8OXtuBoTp/JY1Icw\niLmNrTIdlsOytSPsryMxLbKtXU2nqMWmimQWQkgfjcO+7dsySalb96rwSJgL\nmjhWUUOf65PZyVOxyXUeHAFilSweTCk5hkNGMlnce3icen7MwrGeF5z84hnu\nMObK\r\n=CR1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2021112991233","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2021112991233"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2021112991233"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2021112991233_1640769191109_0.42680623269671947","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220114234":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220114234","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0e0b09274d93404b81f4eba2099bfabe241b77e3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220114234.tgz","fileCount":70,"integrity":"sha512-kZLG110pBnZRp828ZRvImH+olm4q+/n1j9zDWlhRl681Ix5Bys+K7XXa17X5AbaYW3gT7RFotU96MwaPmZ/0uA==","signatures":[{"sig":"MEYCIQDTYTDdPhGPA4VM6AJRdAhgbGH/p26Qu4D+iQnCzJfLDwIhAIS1HA0P1nKb0YmknSPU9zcQIilJTym5BIzghhxtra/b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz7GtCRA9TVsSAnZWagAAvw8P/jbAfhqrm62wzpngqCoB\n0Et8LmjRTZPznY+loPIV1Y+OKW64WvWTAetg4rAVf73tpo0ANklTXLpZH+FV\n+HKYRFiiDlKGkR5eLxK+o1B4lght1uJFT3rDv3YPJjB5TX+GkciaB/8/KtFa\nqk3MEZdZBMT4J+G8bbIChbWirEmAVLbTaD8j/GVRpDxU5iCpeES5g06x8vmi\nDa+0XCxkWwXkpDHXp6XdaiCG6jmdIN7CVRHIxxpX72j5Ap/uIV4Mfh+Livp6\n2DBDJ8h7g1h+DX+brECX091OYymv5qEFp4IHF44F1oEq6Dl31feNcDfVE7T/\n9vBjFH+5ezjULRo+V50GXyBW35z6zs9nA+4ykq3HnhXNGn23/O3ykIeifLJ8\ntI9SGWwJj+nHP+92GhEua/EIuJWZIe+ccbRaY0qodpjt2/WKDnlVwh2yAJXM\no0POUHP6E5vukZ+jdq2ZQRhBhFUrye6zcQbq6jExQG0m7wMTE0G+WOe+JKSI\neNZzgYtImKVy1mrQ0Jn5SwKoaKii9aYyJO9vRVZCInjCzjZex+DuaYMXe13G\nsmToNm26N8uGdWhrmaEmp1ydPeAauNU9xYcSPMw45PQmYmVUhkmo1KoqHm+j\nCcnd1JxMY94oRJchgegk4pESkRx2iNvYwnt0VW9U0jxvzRqYXo9pnSITVm9R\nIXyb\r\n=r8Dx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220114234","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220114234"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220114234"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220114234_1641001389264_0.5082124051473331","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220114728":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220114728","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"16c06d3a3521632e4e5f772fab4bf18bcf4b1f77","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220114728.tgz","fileCount":70,"integrity":"sha512-sdc4gdI3qG3Snv/Na1JrQH/Dm+KH/I5JpGuEPprlV9pzALLlAWlr2O9QUuW5nVp/EmynnRkIrvN45EQJHgqVeg==","signatures":[{"sig":"MEUCIQCa1e1PCU5OBL1vkACllMQiKbvkYu5XCwdguqdCFdgNtQIgAvxHCjayai+1wg/Gkj/lbV9PursGjkG+ITEiN5LOyqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz7LWCRA9TVsSAnZWagAAwcgP/13MWHgJ13GPw+IFoG82\ndpKsXDz5FD2DRLh+0FYn4KFNAS+zoM/Idc8IIVOdrDjDhdGmxjwcvADHYU0q\nP7wg3nE5+vfuvLsnVXQVAz2YBWg5JdKted1rySmVxOjWQs/jiyMVd0YP/ykz\nhpQWni30x2bPksl4KUIPu2vKa9slG8AAG8ZJDJlM2Sxh0NjgiUZZ59/JCobA\nFmSeoghTDayncJ8DPIKAZWwmXlt+GPHXfXVwYd44JTmnjkG6SWG7dqFaKt+H\n+JCqZHaCFoboq9aVBIcNhifGedzyXogn56+9u1L8pse/Pe7PaWQSbWbNU7tp\nAkZG9PRAr6MyQgZkkOI+Nl5MaC+ERo7QqZ04V93IElnPEsWs+krsGyAREund\nPHEqIzqKfWYKZ6zTuKvgyedphHvMWTkRVRDrWmbkmqNWNUv8m6ebcBTEo1UQ\nVNYKta6+x/ojet2ec4vqYrxxSURpEtyClCuUeUQUiEGUqR8yIjPxZ/NDr7hc\neV59xQ+0OUdyS9lARQb/zh5ogsBpwMf5x14BI+Kk9UlGbihte2Iw07ZmjaCF\n7oKMpZQ4jp3KUPNrrSXkqsoV4/bOcnVJoWWVEwN+617jI86l+iitRZdPEbIp\nAMxDa2UyRlFrkWjcnuOe4Gj/SESykdqf3ewBlsyhgyliTg5/EVACFzlkF1yY\n3Q04\r\n=8HRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220114728","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220114728"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220114728"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220114728_1641001686367_0.7997140808565735","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201134936":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202201134936","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"340da5b2a755deeb044d0765a4ed3295a0edf6c0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202201134936.tgz","fileCount":70,"integrity":"sha512-s3BXaMzaoUszJMoYfIgKYwYIwtxGOacReADTjSRYj3S6vxU2oNlRQbg/oHVYe99BDzgys9wlGfxxXEcrB4DZAw==","signatures":[{"sig":"MEUCIQDpbcGAWwANsHGgP7e4AtRtsUi0+9R4zsnUkrCRi2InTAIgXmDb8VbCafqOtRXS1OG7sM6bXA3ZHwpRBV6cOz5DlrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0FwVCRA9TVsSAnZWagAA6zQP/RB0nstIgGPBe8W7VOxi\noD5adO4W+sfTWEuE082Su/FSHXxxw+Esp/JJCIxNiNcP5XiDK8oF4V4hgc5O\nLt16OqbPROuMVcG/ADQWnP9KZ6D2e6T4zI84e1a+ABjK/+/D1uc7e/zTBe/C\n5jYp3/6NJGFQ2qGi7IEUHmTLmg1i3vHuWb8PCCGB2T9fKXxGW1HJllch4AKB\nlKNYUtQsMQxE85MVMflGYEQ5tT/ucX+3pt/n562mzCsfHOaFX2GE898rMHVP\n7Qj7XOEU22gO37ch4oBUCFjQEicxc/Ot28rOMD5r3SZAoldJD8OlGcb7LnkL\naOSDwIcUh4nVXBOdI0PRA6x+9MoqHPIQrsSNvQNVxxeW5UIlrW3RBtHQbvcz\nZ4REFBsyMsUoalZ2sgtrLltLp4oef6L2+J7krjjGrpt+pimkWuPMClmmqhQA\nznwjSjRAiN9G2uqwEiUNYJLd1Iwxtx955qNyB5rRXW7wLd/MU9hzJyqANxZv\nmCb91bz4KS3nAyXfmLn0YZvxejj525vhD6UWfxnLjkx/oiRVJR2PJ8y5lSi+\n7PUdfeKDCJLox132Z61iZIqhAACMUNjGtOn4Qguh2cyIpf65+VoSBWuHc3jB\nF0+nhY6RaXCgDELxDaIHbTN+KE646qslgRkfMACVE6u+DhXok8xuyej4Tjdc\nITYW\r\n=0B82\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201134936","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201134936"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201134936"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202201134936_1641045013456_0.081625651573483","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220281628":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220281628","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d166c99515e9e281f0bdde7af6beb80820f84ade","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220281628.tgz","fileCount":70,"integrity":"sha512-5vsSRwXdN8EwrjCgzj1Fl1uFkXl0kjvkVaEinahfTdYRrkjg9N8ufQ/Ab5NyN6eQmhPgcK6M5pUmuxF2jxVCGA==","signatures":[{"sig":"MEYCIQDKpsHlwBBkkWSczx3mD/UCn1Rat90aCu2DZUgQZAgtJQIhAMXrYPB3Pq//lWyLOOvNhCfKRkxhujRLMHshrWlo7Cbf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0V+BCRA9TVsSAnZWagAAjS0P/RxwTHQVKcwzWwZIwBzw\nbvKy59iggWgY8aLNYB0zUnBSuwSd5xowKUKvH3q78h44blhd20rxoqvkymS5\nw02xCeWFFKs6rgMT40MGoz3g3bGqafjPYdVRvJ0eEQ+aekLEOJNiQVvpEVrb\nGrRDBX7GJ8pzA1MrUKMVJC0LxMEg7Wwjoek4MUe9k8G87Rs9co4bv98yHmGj\nHEopn1KVDwq0HHtGECdvuz5ckqqgkdhIjCoZiC0z1Ugfl1arcdwRGx6PrUvi\nEZ4P204ejFRWAHve/d2vmC+z/3jB77AlXv8LOquXGlUXAupAyw4dSIVR8v1V\nrP/oPz3qF1IlM+BBYRwaRA6ZS4S555DQ9L+TFSh1j9Em6gV1zrN8qHApudVJ\n/1JyIrvQdQO3WPM++omPDQDa+wSK7dj0SGJhDfi2nGZwfBZ2W22RRRD5KtTn\nQ0BchC+2iN8kzXlLyFYsBnq9WgQ9ZfDn3hcJQSdkBkBoSdbqgHYZfkBoLmLT\n4oCPFYGc4q7pBSJ+25CxJh6j+u/yCoPZsZICLjJJCLlp+01cfN97qcy5wcst\nSCx9zQN+6Lotrk3Dcsy90ICz6CzO4CDtInwWq1gKMhm/Q4g6jT/sKpkshm87\n+vnM7zGmRZ0MXDgcB8QppgR9va9D0FtfVVXUcau9UfmpaolZp4h+00A2iaPL\nnlXr\r\n=wjpE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220281628","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220281628"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220281628"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220281628_1641111425830_0.37709781088503114","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220282224":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220282224","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b588e821cfe315623fc516931b5b84a10f771940","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220282224.tgz","fileCount":70,"integrity":"sha512-CwPiYlVF8hExAHYGWsJrm0/ZnYAs++TFg6Z1EROIK6/B5hSrSfW9Qwmb95vu6khWb5asGkuxdRXDMl0l65Wivg==","signatures":[{"sig":"MEYCIQD9Pj9XGjLJaDdF90q/NvIeqWPnkZUZf2vIpd7I2YEiKgIhAOzZoimSBzIz/dgrlmhUdhB2d3snQGp9yXnPIDq12b/d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WDjCRA9TVsSAnZWagAAZDkP+gN4vMY6V5CP5lUfYlKN\n0URsF1GiiCywWl9WcA6HQ8XwwZYsep1G8vDes2Flxr/Mx316t2dRd8/Y30IV\ndQS6v3XqnvoNg1vRFxwW1R+P1VBoE6hH4GrW7rOQeDUgwqUpr/9q4fKhOvP7\neH6r2rSQkD4OhTOwAW13yGKdIioXsOX87aCoqNr8rjZLMf4pP6LHDLt88uzb\nNsrT3MPJ2NC2QUUztTNYFUCTwM1ExYnNmdLXKdFNWOmyalXHEqVjyyVlXhTo\np7MYFd86TScRYkJSujWCJGfxfjdJnyy5aCijdLoxetLg4f3r1Wu9Lpsgy9QS\nViZX5t1f9nuDZ14W7MFxxAM/21WnJcNvMtRu4g/9EhNZJK0nWSj5cn7QsKQk\n3g6jsLcl3dNqXba9ky5UZL0gQ4uFy3Ly5zxSEyI++ljEQ/L6iJroe7aYhCvX\nX5vydYzHhMAL5cSUVdjHtilYUoVGHH9HQEfTu3BgCO3w3mpTz9+rYfEVl3rv\nHYLl8T0uHziolafgL0zPWpImYTUrFGqdN9QxGZ+e2N21Y3otnvha2A6IX6ZV\nDdHKCAUdpGscOBg+UmJ00HA0R8ZmTe1HX+uYzltUh2onvlGwgL/xRSjHB6bu\nuZc4UqF3HA3CaPRC8C333VvwCjbbs7C4DzwnJQpuTuS7zxAP8+a5TUcLseIu\n768y\r\n=NtDt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220282224","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220282224"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220282224"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220282224_1641111779115_0.9284253361120081","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220282356":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220282356","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-20220282356","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":"ba4ce4b07fcc502cea5877ae2b0fe2205d60386d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220282356.tgz","fileCount":70,"integrity":"sha512-mS2R2FGjY2WGCmndZ+TI/0KHE0awweBCf0W8P3m+JiVI9ddj3uPcgMZ4nxJEvLrWD4ZlaNtVumEiYGR0jD/voA==","signatures":[{"sig":"MEUCIGE8tXSSGe5WhOWE3bbxkmu2gabLZQzG5QowdHP42Sl9AiEAhH80NJOWPZ9yTRV5uYi6lbfroBpaYJqeZKzR3FIvR74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WE/CRA9TVsSAnZWagAAr+4P/ArMkB9+OC+ySs90Oj6A\nShWvTsq9HsXttkHrrfSOsappNIQiihusrX1bV7gfqNbVJLLy3PEEZH7fLq03\n4AF0pU83NNJBmFgMomOme6Xni5YlDudx5YLmnqP/mXaamQgkD2y3tz9xa+yX\nUH185R25LzqgBIJBlbIZ0XquaitS6B31iAD1Dx1M1RyNk5bZ/YGoFm3zClws\ncjkpgKMT0M6QIIuqsJOdz2zLLQyrW4xVKCmuFRPdFwyUd/W7uem7nobtVhVg\n52YYYdqnfVnRrQM7glyKorUdR+gQmgqgw5fYFLNPRqvsgVhQa6U/PmL98o31\noGOpojASwlQeXmbj3j5Pr/65bVDmKovk/elQBlr+r6X/lt7Ud+r1XrIPyVGY\nG3MkvnZuI34Y01tjELCzsm2WYgGqFBDYU4hbh7z9GvBeacP0dh8YpO2MqGNK\nDAKSEksjDt/9FO9VzI3CLRh5/B8n67wi8p5GJuXTEbtA7RxEvrbWYFkeNLi4\nTUXhYYD0DwtARdLHXscayiswg85yCwFhm1Du9rlJytxiOn+yoqcC16JkicgA\nU0tlMqPK/vROIzkyWnIrxz/4b24fg3fyJqbHCVI5A8xX30Wyy4YJH2+2s4h5\nKEAH4bNPfK5NzWDONZLMox49U5fYBdqM6FbgkWL1N63YQXZfgZC+Z6QPNhwd\nUmkH\r\n=ZHmE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"5f17f205177a778009116d708403fd56682b1fd9","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220282356","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220282356"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220282356"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220282356_1641111871560_0.6887602837881939","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022028277":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022028277","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"447629d8cc0f00641c4f211e670ad1d9d45cccb5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022028277.tgz","fileCount":70,"integrity":"sha512-++In7T///f/OtdmmWH7Lhm+BvbPDI8bEBQmJDHmRxR3nKcN/+oPcND66kRT6qEWU5bbai3DcI6rcPcrJfFB+Yg==","signatures":[{"sig":"MEUCIQCbUmav2m9w9qdCJ/HVDb98k6UBPaWaivsqV4hGALEsCAIgRmJc1SISo0d0efP8PXlYk59L0vARjEu7JigyE0oq2nE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WH5CRA9TVsSAnZWagAAGloP/Rp7z4IK+u8qD+HTExfJ\nk5EeA75JcsTAgZaX9bIkkuCk5QoeUGhs6+jrwVI5iSb8qBf/aFXcSKfwvJ6p\nYTA2jvPxls1SNSdHdxhRYRnt6BwJg1kFCZbM728e/tWPy71M5D5sq9Z2dcbn\nlQJPhcSXFNQiM2tMZTESS/zwlCqKdV1hS9CXYxz9/pjedJEGkjpMxP4gc/Jh\nM+F4K2KT1DJ5hXLyW+XfdjQnwrW1HGTbf7pYPUKQ+Sf8ERHErNOojJOKMkCh\nRtNgalNHDUzbMCgt/9Gv3qfxSflYlGdpWO6rx45QGdMLXB0t7v+pHRuJtsNf\nliIdhvGuqbN1sgzDf3tCO7ckSOtpCgtHEuaLRHXyDSgfWMS8gLOkou/TQrqO\nEovXhlgA+weYMGzFpgduaN1FiPDsgR5hQ1W/EuCVlgaKf7O2DVW0jUeH97A4\nEJICGXjuoCXM5hdHVrHZMl2fkcpJ3zvGawrv3DnzHSrOL2nNZtld7dVEQv5v\nmi+u8ftdmtAJ4EX+uVgal3UbWrDmVWcMEY1FGJw0p1JHoflEYIIECUIJu+10\nOVP7+o5Q8H7xFXyUDpG4kU9f6Kd/R8iQasaQSJO3EIpe4s4qGoNZ+RhFWeSZ\nX8lRATl+XIQJwxSV/wBSDKxYxxkFiVEachivDDKF16MFlGxOU+vYByva0l4z\nsYO6\r\n=JaWn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022028277","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022028277"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022028277"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022028277_1641112056841_0.8987666599655197","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028387":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022028387","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7c748240f1a179db3dd46239becb37d5e34c3d9f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022028387.tgz","fileCount":70,"integrity":"sha512-1lg6yu/HChRRN5DWlC9xv0EG3lX2cXXsqdHxNdGuk/rniMPZlcB3qDpGU5KtvWrCtXxSDrjMvuZTFqHb+Tvacw==","signatures":[{"sig":"MEQCIBMeLh90NOJWnLFLHP1RE/4/JWMcE/nnr8b9nXgEDe+8AiB6KXpxEwBhAuobk0kaB7LCRxJS3iHeUDEUJpGVnA1ALg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WSWCRA9TVsSAnZWagAA+v8P/iHcA+G/HW6dETj6CBt8\nsdh1X13R4uIHfGvtK3SOTJMj0PTyp8b5BJuxsxc0hViDDPFy/+4vQxTI9BfV\nYmHMRDGiL+EprXVGriMJliz2VZaKd+vwDIzAH14yhvaGYNtHr1XIFTq6ek6N\nTHstysYg6bnKlQGtWd3VRtsUPdpRLIYtwAhil9YA5zH9K0qRUtr4RffnhGdO\naT12Cfv16PIRbSyVcYInwXvPr4O4QT6qeTSRUafHFgdxh0vz9wt4UbuUriVS\nWXdlNq//P5Uts5FcuLX1DtDjNMK+vKmwk1g/Kgem9otkCbHbarTKhMO+jnP5\nErEVH4jzMLkXtzeWQ3FSK/gLbDN5ZILE/PlQscFaKFU2/dFq+feZbkeF1/Lb\nZQTLYbTjK49iRQ3dpAyQrgqITD/i+Qe1OCmIdISROojlcjrklHduehOip1k0\nDG9CtAb0dOpiU+KC8XHY8t2H4mwItwYj2/5nRr4ELTGSb27TOmZdYZB5KfpS\nh/Ub9PoBrOx88BdtJkRDkyu98ohDS3NG5hMdKhcHjgGtIpa5yaFrP+cykSHl\n6BxIAQXuQAtH/Zu0dy0of9rhwrBew6p72JfKS8B6gR+wLSiVpOGIT8G3+J34\nXl3QIB388eK38Z18lehxMuiNRuO2Pfg2tuZ2vtaHSNMmqql90q71vb/xJgqL\ndcig\r\n=UNjv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022028387","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022028387"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022028387"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022028387_1641112726367_0.9691531506113471","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028457":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022028457","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4c7c3efd1c25d52b10f2ed9cbc0e3c1f1a793b95","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022028457.tgz","fileCount":70,"integrity":"sha512-4cuCuLVn00Yydvxvg8bLXLwAUMEWhAVDGfeJy5fHrILqo5j3vPlOMuBlrJLF4H7GcVo6yZS+1edfOZKMFoRIUw==","signatures":[{"sig":"MEUCIGzWXBnUoI/6O5Rf3mJZzOzU9ENK+jQGpYJLXTFKHz+9AiEA7ElOUZ9ZY7ZgRzaCCd9kuJ897pgbK4aNg2Q/pX6Indk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WYxCRA9TVsSAnZWagAA6VIP/A883k+1ipus+UiJhxzG\nO87RP+Gx52yZteyiCfKsC6AJp+hcxPeAv8ZHewOL+Qi7pKCwBGAl8ZGfK9de\ndWNyDRxWLIQrtTFIigaIgpx1Fjz+zvsUXkcHBCVXN1W4Chv14HxPbTo1AFZn\n4li9tHKSJu4fmyNV3cITWK6sR6XMS8p6h7z0vxPJXf8qh76vQtaV9PDMjWfx\nB6MaUjoEMPwIlNIbm8+NoFvL/JexmK0Uoywh724j8LdmxwQxOe1sKUdHvkGk\n0lROSCwp6LgsGGvAuRnTdmyq1x4V3aYMC1UBMRHv5J3Ix2HEt8LRk37ay5Dm\nVXovp1ngbYATKUyr9uCi7o1x6R1aaUE1Oc0rwXvzI+DJNuQ84Y8MXPjhsseC\nzFu7V6uvwmdMNsP3bQsDTaYlADeyQzH3GIQbrFOsaB+TcametVr0r7rur1Tx\nsS+jEv+gkLrLdBzaB+E7uDs5E5zJIvZsrRSKL0ajJChBQiSqrx0uDqY7xV7K\nJNlkHYCC5L0xUWKPYk9NpMbI3c3THLC5uUcDRbZhDYfRig7yiEKJQ0qZT8al\noWOGdwqoUamdzFXCSfKiMXo4+qZPvSRXgj9PM1zQJXyBaMu9mjgtMIlLYC/i\nQyZfs7y4P7XLbsp2KNQNQESxHJYcZguRvhj6eH0M+wzWQBY4SLasff3yxtFb\nm2Ve\r\n=O+3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022028457","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022028457"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022028457"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022028457_1641113136978_0.5685971072005533","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220284534":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220284534","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c6a361db6c6f3829a78224a27e9c3b771ca2b762","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220284534.tgz","fileCount":70,"integrity":"sha512-N7IviUkREizHT5go5oJNIfncj89K67gBn/8dSR5CvKTPdFSkwyOq/nfgg3dvdffsxV01IGhIUTcmm1o0N7PkAA==","signatures":[{"sig":"MEUCIQDha1QJj+oU9FNtkDONYP2yBKr+CnJq/r2CfuzpaU+viQIgZYIu0DYcE/qAhA3LTPRnR3/qPSyvSop5po+iebZF+pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WZPCRA9TVsSAnZWagAAYvkP/RzRZqW5O6QAFOk8qA9t\nqnfyowDkmneoVdEtjLa4ut83SKCSL8KjNc6Ti6Fz2jVeZt+Pf6foRccWh+bH\nVr6d4BzXS40ke8o2RlDk+asqdPRzM4pQGaOGrZr/fAn5j8clX+WYMImHzGgw\nTZuKhkxPMFg3Ks/i/B2AYNgZJ7KSaVXt6ltTUhSsKvopRr91pYMjMcW3EXOE\n38Gj6vjjjMmjZOFnIls9EUu1tcirvQ02nQApd7B9kCXu9Qh0x6Hp9b8HSYOV\nFOcdvAi5FuGz3q2o2fnFbId4NvQ7OS2ubzgmuiopegEHaw0bCfVwUeVyLV4B\nRYFN7+bIROE/ty2Tg5nWWRU5CpZpD1+cfhgXsa1NL+h1N2cGqwalR307LO0n\ndU//ep00o/APS6uGjxc+cYRP1KWD6W62Zoyi9Os87KlPUduaAQjiEbAjgs+M\nHIleBC7Gr041uocP1evEoeTTHkuF5uxQeZYfFs5+dmvk8ZLhN3W+egFYWOnZ\nsWQa0By5httEW0oC6BmZzSnne9aFYkLrlgrZ8mnTfJODMtRtZqVxtspvMMtK\nOypBnj754MfokOF9gD5WMXBetVfTrCMUq2CSOdemVbeFGYQhGjRw5Bl73p9p\n2F39wsn889f2soAc+vQl117yB1H/MyWd/hsYJ1eKfqo+oy/wyq8PsOLBsp21\nwFd/\r\n=S59I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220284534","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220284534"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220284534"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220284534_1641113167693_0.7436105358288292","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028579":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022028579","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"af6196eb0ca646158bf529775b288cd8218455ad","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022028579.tgz","fileCount":70,"integrity":"sha512-Gsl6r3seOPS7sa3Sqq3jiMSZOWu4kl4gvqs4N4xHy9rm8uqUa6VW2gmowg5RGzzYwQfMn4X2V7TIg2Giwna88g==","signatures":[{"sig":"MEUCIQCBwO1IxIE2AHJtemVM26dOk2k3fnvsf3Hf2vOu8OvAFAIgTL1qtLByqCKXcoRgNu7Nio+rFnCBYV4ZmyWC2GyLCqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WkJCRA9TVsSAnZWagAA4RUP/Rf149/h9aFO6SXnagOH\nEDhxUPg8yIn1F26OIVQu3yVX0SyqLyoaEoZePre1lz3p8+h6zvRHgSp7ZjOa\nNjJbhzydWcjvRZyB902hKoaSlt9b9mJnSlpadCcZvS73t+i2c/tDHlBa2awx\nTgAxzsbIRJnuB/hTXpNPyRcQncytOK3SphHWU1WwfEgc9F8CLR/Lp4RVkLev\nkhw7PXtjs88bI+4fNr1R0EOYDNJHqAczQShiq+rTxKKENhlV6/ZFlE0ayzY9\nRLZEhlOAD2a1leckA2KZ0dzmf6pRl7cNUthUI7r2oL5cTi3oUtPVE96BAnp6\n81kHbFGsMWZmv7mF9YDgpON7/c0RmJrkXVPhHhZkCiS1RiYBmzOetRLc8u97\ngHk6/ysfcw35OKAfq1hVxp8etvUmndl0BO+3Y1WN6bSIyipje68OT+KDViQF\nzAHs8RhFvl2PdMLwsDZo69dpX77gdRvu3EHgaxFSm4R41dYjJ4PLCX2ALANR\n98/1HAcBp047wNqnKRnJWjI29JNWdnzuJtyVRfVlwBOQEWQGmsSPdQu/ESeW\nv4RhkVA02Xunrk9MGe3YxZ4FPmr3qgMbtGQngpeAKtajxB6IaAObMLLbIx7i\nJzy/gFb2kthG+uy0c+oa1z7+db2oLQGFTLZs9OsEaNiwmR6c7+ILni3EXM5e\na0GH\r\n=7iiR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022028579","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022028579"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022028579"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022028579_1641113865382_0.11036120319328768","host":"s3://npm-registry-packages"}},"0.0.0-pr-202203225541":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202203225541","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"be27ce5cc0872beb56cd4f21b4be714a4df959f3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202203225541.tgz","fileCount":70,"integrity":"sha512-43H1r1VrFUCVrQ6YrJ/zyQIK8uk0mFV9ld243hflxH1Q5L4QhtHH9i986iCEgTuV/ArfWIBvVipSTZ1plqiyUA==","signatures":[{"sig":"MEUCICj7+7Yqz+Jpohitksn1OjkKZCj8urqbBPUUI8aNaH8XAiEAwRZBLoGE9ho9EGdG48tjcjPuUdEiYrCGlEvxXbxYTLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh038UCRA9TVsSAnZWagAASQcP/1Z0+QrjS74fEYEVPtke\nw5qe8sJ3ovJ/QkJuP6X/BDUxNxEgMRYEb/8JHs9yNCekp0noNXSp2cPPDf7A\nj4idSte5AgZw2yxGLQwXk7CGAfLuT7MYtvxV4bIYUwiLzB9A+4RUPa+xqZCf\ndWc2bGv+0tKcPV2GGs5S80WSDOFbVt/gaxdiANs9WRASCBGGph4lgtymZDYP\nD/hnYnCh3HxOl9bEK+j9hreem/JebW0V8Da420IMAaxsD6iWlk9XcSjjLXk4\nX1XJ3hx+9HVX/+6Y4tqmkCo/A8ngad7eG82jIFysDRcpPVFxCWHxUGjzqJ4D\nWs6gpYB+MzLGSl0OVlmwM6cmNxBenJfQShs7zCUx3LQEDmUyEeCb7mBAuNsz\n4+QL/9bPdrig7cgvloijJ0HGXADvkMdZS1ImXPTHqIf6/ziVIAT3iEjyMra8\ntdNbu8d0WRVqmLI+M9IT7mnaREc2kfgiOChClh8zWhTwSNW+V1mXYhmKLNN5\nrSSgybqrTQCIyOPOfWOy7BKcfAIeamtScFwYYidInFr0cXjFE69NtSsqC1fA\nqD2X63kOgg0XsEGGRlo3V/u7dBsjXgg401DWtW1VfQ6R3AcxHQU7uvsnqCPC\nj7tkE52/fhSuLOWBm2RceM4FJeSubQerq7PYsTxl/NKg/1WSbdelF4CSCuAh\nRihz\r\n=xczE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202203225541","@chakra-ui/utils":"0.0.0-pr-202203225541","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202203225541"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202203225541"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202203225541_1641250580733_0.5245458597949317","host":"s3://npm-registry-packages"}},"0.0.0-pr-202203231241":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202203231241","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a5e0fde2b4505fcbd754d46f191384db99253f04","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202203231241.tgz","fileCount":70,"integrity":"sha512-EH+LReinnmXckUQclfb2sxX/E3NLYHptWPiqwA60c4ifPpKRT0pCGHleXSPkF5oWBF/I0+M0fyWiw1cEDf5TSg==","signatures":[{"sig":"MEUCIB9Ud7u7M2Z1dXS/N/gVumo26J3FLfuasDPBPK1ZALVgAiEAu9/vzNkWa61dqxr4S45xZycj86xrf7UnVgwoKwSYkz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh04MMCRA9TVsSAnZWagAAaFMQAI8SgzqjRX0pvBeJZ9RY\nTr4i+qXPyNZT6q8PipKNJl7EPcZoXFevcGTKKsXKejOtBOyuznoQMPEXP61k\nzqWtin2bWiEGNymw6kGmBIhIQgRmx75qwM+X8hVeCkKahORaY9AtBDIQhrwo\nMWkErbsjwwRVikFnDKHaME77Q6Y/VHcS+JA2Kf46jYetjFrXDsXjwJSkR/2C\nauHXBgrckCc4KcKRQSa0Hx8j4YEm/hGUId1JB962eCJWMBDt4II4WFp3iOs4\nDn7srB2A0aTkMhXe516mxqJO0cGUAw8ZzqlRah9DSNGaLXjgTgukE+I4vb9M\ntAlIsW7+7PHcdRYq/fUJS2qHdV/YvZJOa7bzhgRB0HFAvn0UOhFhQlHIu5Os\nMO7HZIqfajHLvonwPLfSDhezO5apEvJ37OBFXh34ZplN4GmUT588VR9qh/vh\numfxMdPqhA0czdEq4IzNrFSPfrrRn5Mfomd+L0omjHuzDTvsIrqTnJQqcaqg\nuDX8CKI0Fmu7Ay0N31AYUFhHMmNSUHAe3FhVWs28t0p7BKtXPBr2Y2j3v0N+\n61ubWN81errWI8/w/t/CAKkGPF840N6+t6dll8d14EFiZNMNYt8/Ly3zcQe4\n6PpY74Lcqg60YhE7U4PuWca/XWjmKSrij2fsbhdUrfXoQfs7aykyHUTKzGRK\ndyKN\r\n=6bOa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202203231241","@chakra-ui/utils":"0.0.0-pr-202203231241","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202203231241"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202203231241"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202203231241_1641251596793_0.04898867082642022","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220483049":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220483049","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"03a4f98b2340cb23400e5a25522dc12636b86eb1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220483049.tgz","fileCount":70,"integrity":"sha512-qnzBWW2F3aUH+1wqo5lXGhghHQmfp6ciLnOqLOK4uwYB0Hw2sG3kTAOeYVNcxpXgNRIIc/Ruw9wkvspzV2Yrtw==","signatures":[{"sig":"MEUCIQDfJbejjrDgYUKnEKPal/36panuBzdydvTwlXPVPaOsgQIgeH32ojEr0ujqDNpyEO5UDviQ0Y6rqgMxoW+CpDchM4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1AXgCRA9TVsSAnZWagAA9msP/3giQs0BPSDLzMV85pc6\nZceeRF5NuIemSo2BJuuaZElfcsOvQdGCuJm9FDdOuD7xiDSUdcEmO8JAMC8Y\nLtlsU0Rif30hwiFsCUGIgGwtyzexUzzFTUuBENXBI/smNHFArztfeKqdEtIG\nW1covawn19bhATgsuy/3phGJyF+yUNS8mXgr/0+M+ny9roJsHmjyYVgnOp3/\nRvIDu3RgOOo79sstj202A7LF5FNYki+rOiWBGpBYVpW/tjiEv7QPYx4SMRG0\n8a+gkbxihr/MkqdcSunAEmi6Y+sFUY368coUdXDOB3GMoePyxO43lRnYiK9o\nTF7B942oYYznfWrxpNawrEk6GP0s924WEbohi+uOqN0Et25/aWXuIrq+75i7\nXTZusXo+1rb340bof94p6h2Vp9j6MB2rjWMjYr2kR/xHB974u7WiauRxsnLn\nDXyJiBsTjudURc1uoG9J0azMXVEzHh1ymtrHYkuCcy9DENPn/t+PTyJcnC/S\ntGglb/vmBBu+HrJ4Gs0tmr6BW84UPWpMO7Hh6bNrqEY0YJz5OnnUx5OymiC4\nYe7LAuA7pAdWJHmR/aLR5gsdG1+/WoVt8f93J3Bm058/ILX8vxI6ZchfV8DL\nxkGTaQPvSzmUGa1GhpK3+qweWcuIHyOP/YiFvYCgDi3NnfQ/5O4t2ju0/RRx\njUN1\r\n=I/t5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220483049","@chakra-ui/utils":"0.0.0-pr-20220483049","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220483049"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220483049"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220483049_1641285088430_0.4168068540446017","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204173424":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202204173424","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6c6269fff8f33f688bf9d6d7a8b74578d5230a7a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202204173424.tgz","fileCount":70,"integrity":"sha512-/0bArilmr/MmC/bXLQ71Wqu+zbeFBUv8fSr7xNGpyZsE9E1VvJy1X1NTrz1q8SdAmt/NbZ65NGJJPvBz51C3YA==","signatures":[{"sig":"MEYCIQCSnkF+rgj0I1VYwNZF/T9iF1c/mK85gGUI9Wja51+KCgIhAKR1uJLroPvVWP0jl2tocZ44fgdm7pHGM1Sv8rrdu8W2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1IVACRA9TVsSAnZWagAA3kEQAJ/bspcQybcVrkpqB5sr\nlqWNnhjX7aD5wopYnAFIagg3mHuRW2QFOxVdAj1J/2oDLu9ECfAxDP43dqDA\nnuzT0OTSmzf7V9e5vFxS7+o6NfPT6rJTYYG+oHue8Xs8n6IyMsUzj99aXK4o\np43O98B61nvW+35oqTYhw3YIhPiZ7CQaVim56z64cRp9n9MNX7/hyx1dRrN/\ngVMpknkrehkSqliU9MUuxyTLPTkce9O8c6UkNHbXM6ee0OVmrELe9Vutkew4\n9PyXBUXsEqiybs4MiPHFvwujwm7p1s7qzfjFKrJY8zG3lTYny0i0oOfmvEiX\ngl9ragWKesR6zQIXDa79ED0zuIOSPsJijEFIFnjBV/pGAwVNVyGFS5XKjMoB\ncM0jVA0/D22PASifgG8J7grigVHxeb+Oit/nyHMJ6Yxy3UPqEnMFTfjzsdq0\nxlN6oDjGLuMTpOhLi8C0e4foVCyVj1XB3YrNqJqi4u4a3/G7I4dF4RKPhIv/\nDAQtgUJVKBfUwNj6b6FMAXR2CHy9ewod6i7q66JNxInCBGH/uS3CYkO74oI9\nKBsUQ9bxLNIe5dJPWZ7t5rI3doW2TQWDnAf3A2QrIs7H5VfG/rxz0CogSZZ7\no1oXi4vZc8D0rgE5RjMVajvUPodeqk/9AbAjskwmKosQtzKgTQTuqtDDk52r\nHEaI\r\n=BEO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202204173424","@chakra-ui/utils":"0.0.0-pr-202204173424","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202204173424"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202204173424"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202204173424_1641317696621_0.829609248016631","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204174042":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202204174042","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f5b4b16fe44014af4ff874bf7d1f0375058c57d0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202204174042.tgz","fileCount":70,"integrity":"sha512-hmTIFcx4aOeM1YAaTcsOF6KnXVR1CIuAgHASASH/pq9gr12EXDBZXkcTTWuep7yWoU4UyGg0Qs2FyQBw3oJZIA==","signatures":[{"sig":"MEUCIAsT393+fP0DJLQNDTlRuWwmQD/9COU5jbfkqkVzdBqqAiEArpXQPx98lprvEQEoWBDa+Y7G17HNfGPdVcv2btoheIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Ia7CRA9TVsSAnZWagAA+n4P/jCe20EfKYFrPWX1LFsb\n9s1H9J7B+Qeq/ygDd9p0ag87EzPOI5k+TzwPMUGAqBq4WA60sYqk1I48uNG6\nOi/EnfqwkD5NaPo+9nb6DX27llFjcKsY/XYbQOtzoeZEGlFwj11tMl4CBnZh\nmHnheDBsZMegkW8seFiDQ8eJtfBcjSMtp2vmOoqTURBzidqpFiSDYjXv29Uv\nOSb5mExmJShUwZokK2DINaWdah3SPiTcqETIA5dN4JClk3cRonkZoNJ6rs08\nm1gQbHdnHlTNOK36H0EeoRE0RmMwVh4ZEE222d/h9wbGNxI9WGxXxUOQ/aXS\n8vfXubyYxmWmCadKW0/cUskSdFvwB2QtwYrupYPKuvxPN4gVDSR5G9dPzUGm\n7brh8pYkuVx3cxFqc/4eZLHILUiMovkU7l9c9+9djxCm/qhUbNJ7sNrs/bLZ\nj8xETaDCRZgaSrsIrgdNuwMTVSUWNuz9H9Q/gHO+/tmElpwBxT5ejPfiAl71\nP0WwngMfVDm4DlF6g9wctsCyxC2QYWeADWDPqtBoOPR7Qj9OIpwDWRfWZH6h\ncR5cuj+1Vw5IiS2zpe3V1HDxGcqWOBIJ+Av9cznaL7pvK3Ia1B5heYmU6rjl\nBGkMUYaMVGJAmA416tSBIiAHUbzch3e+Ic304U7/WfH2pRqIZ5pgTCimNBkD\nwveE\r\n=4Wox\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202204174042","@chakra-ui/utils":"0.0.0-pr-202204174042","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202204174042"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202204174042"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202204174042_1641318075189_0.5192060168939823","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204174930":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202204174930","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"52783b190d48de83e30b283c3f0fb3867bdace7f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202204174930.tgz","fileCount":70,"integrity":"sha512-WDRwAaAwhTflB27R6V75fWRKeEnvJEfGmhfWwmBIVwuZ7/Sq/GV61PC3/31EeSR8bOZdubLq/Nn4o+rr64fKiA==","signatures":[{"sig":"MEUCIFhktWRQk4NcDFV1WqJZPRb8YdV1C1sgKzT5Fm+ES1yvAiEAwroeBrTWHUT9td71S4mRz5dlfrEZAZVkIXFz3olB9SU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1IjQCRA9TVsSAnZWagAA0doP/jM942YGcT04BYfmqZSb\nDiB4G+FJiwi/TTzE4M6+GOQDh0msw5A9uHTxicsuoHQFnq4KMgdKse4OgYkh\ntDClwk4RGymGvp9ka5T7WA6VRqUQMS6jGgyVme4nch8ycoHpcMcdskOimrYB\n/WvJ4pfrkX2uGGWbrF+ob2ivyBgDh+hFfLwsj7igSnQbiiJa9dDmC+B5S5m4\nERMvPaxPUm0bRj3GAnsOtnknn+MZAZmCgasDO+1EHBIfxnLM3xsQ7HOxT2Ux\niz5U0/GgVuTudUWoZt7tQr+IN2NASTd4XKGOgO5l6k7aHOcUuJvyTxWntRJl\nchUHlypNKcsGqwZYk+lwttUnFHATBBMlYJPcf6JCR0vNJmk8w2fuuZ+BL/yg\noTczj7AHpzh2w0Aj1lXA+F9j7T6zrRTfXg9U7EWaGp1hbUETr3fFo4uFAUlB\nSnEOiXQaU2Ln7j0Rq3KuQnM9lIiFf0EKhMbvEs/HAv40Y9scrHANDFpgWwyM\nCIIZP/4KIMmGSb0ojq2aOLdnDfuccb7EBNFrAbuLWbBUefLShMZ+0kMZ3fyM\n1pvTZeXbPd59P0dEVGjMO7GE8swaEUNr5AutXHUruzaqX2wjGN4oYbb/Mecx\n9RbUKO1sSLUkHDsEfsjrkTQTatIh/bKaPomg+xnN4FjumKS/rxN2jJ+RJhfe\narU5\r\n=gxJW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202204174930","@chakra-ui/utils":"0.0.0-pr-202204174930","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202204174930"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202204174930"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202204174930_1641318608228_0.21119193124958757","host":"s3://npm-registry-packages"}},"1.7.0":{"name":"@chakra-ui/layout","version":"1.7.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.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":"1e69f6708cc8f9628b708145daff1167c5445131","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.0.tgz","fileCount":70,"integrity":"sha512-ZjRqLGs16T4PcWH445SkELVuxxfecjjUeprtFnNw13QzwydP46L8+GB3ycp6wyJDa6DMo77TxQQnK5jUUwY6Mw==","signatures":[{"sig":"MEYCIQCDONrLHYQ/Aqst1Z90LyhIhiFpDkD56XKT8JY6+7fnNgIhAMm9zARyhCi5qKyNicMLDMDyMxFj+NVqCga+PPrr3vJE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1K/GCRA9TVsSAnZWagAAn10P/1qCgeCXf3yK1gOGYulP\nMLQNngHITN0ExKHL3yJAE6hxffEAel+SU0SxCRb2m7e79aPSz1fwntmTSoNg\nvZWfT3umsm8RFq24tses1DJipaKt9HmItndl5lpmS55We5QSrEhT5i27n/eL\nDujCWQe+ALEAZT6XopyWPpVs1mFBCjwUH4YQ7tNi4ROBsausOn/DH/w+zw37\nw4s189lIMLwpLEUiO2KBQvw2MaUB5PCUZ4Jt1KLDf9a0VHm8ypJOMDwHgcOT\nnXSsLuodeXUSCWi6YbQH9AOqmob6rJrViu5tEsuviOKUYOHx1vdWJNbjp0UJ\ns1VTAVAucKvxdBsC0exbLzhOz+FnuXLUvmWz6Dff3F3uE9xcpEr1Lcj78r/k\nyYi68oBUHFrz7I+TbBcUPi0DdBw1ePzLTyElYBRiQArWypS0NP7cEGovNfiF\nD2UiUyAghvEAHZZ0lMCgPk+KFI1/ciVjEl5x6iNa8ufM1VZkag4ykufw3nHT\n49Fs0IizzuKKCv2Q9pnPZhgOR/8I2Osgz6E8gJILFhTGgj0htXnf70qpUtOL\noEos5dlz/WY3FE54vciePE/04tYeNZEt0k6gcBup+kOB41ufiSKzAR9jlFSZ\nca1l06Qa5DKf5vSEyPKI87Tm53MZoItpz8g4BjIE2DRhqlBn471e3BVljcMc\nBBcy\r\n=WHwv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.0_1641328582161_0.5827707445406867","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204203645":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202204203645","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a5d788d8d9d1787fa69a8868520e51a881d15361","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202204203645.tgz","fileCount":70,"integrity":"sha512-HTJLqioVHnFaF3TkaDkvliMt8ld4pz34X6qw478RH40Nu4bOVSpPPKBOc0NSD97Lh4lmUYp1xslqYmN7q/oIoA==","signatures":[{"sig":"MEYCIQC3FknpSc2+0YLXl/F8iN4S4FWkgTWfzsW8+N0Phyth1QIhAK2xBQWZ9fcYaz0vSPoRbO6uwQB7vaqb4x+6lBHmFtLO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1LADCRA9TVsSAnZWagAAL2kP/3ODD+caGdwBZhMxGDc4\nmDaNJhkL8xh5b9UhGnvXsy7Jl9Lt0FlhaE0sV7Tekdp8PHvVnwNvm2+I0dCe\nPpbNsmzz8ENwQ47MS0XgKxPB4XqAOLDMsFcigWIRODolFaKBswiPHF52RCuS\n3UPL4Hwg0/n2OxzfMyw+TOZC2mh+DjYFqcZF19jrvoZXALGHDCkr5+RI6tW+\nraat/UNbrVc3qHQVHRNeQ4pUQ+eeOWmw86Zg6Ms2LHok1D3XaBx/V8k6VIwc\nUdN6rd0NsIQqDfrfjfjR+qrTzUiWEjMPnILmKCH5DAVSJViHCKxyFyEAPjP4\nibNh8pK3xO0suOblY3cbITKC9A5r1KulfV38ON5w/wNBrTXr19HHpR0BEAT3\nfx7L6LaLq1ZDLIxjLtcWJKJCHi05aYGDgryWkkWYmHwKC8RVzwTnBsGEAww+\ncp/YG+MomSroxzcofhA5qRlwU8HwsNQB8cVRT9hKcnlRf7S4dOmeGvqf9lzi\ndQH7SaMbzEHXLQOjtSkHYccu1u7OCb0cakcTJdpyDaImuBB/6D/yx195XVTw\nIn4xFwjF1oWYz6dZ64JFY5aSpiKUx3+nZCOoXtA+eWU3BEZ/coiv/GxGFJk1\nKtRBeVp32+1TeK1YzsMA0BWS0e7Mh7dIgRcGj5c0NkSIdrAqYiBm9vHIEdlx\nBq/N\r\n=7+1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202204203645","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202204203645"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202204203645"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202204203645_1641328643514_0.061781506948731524","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220421928":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220421928","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7fb114bbc69595609052c7f9b22f41f1f04a2082","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220421928.tgz","fileCount":70,"integrity":"sha512-OmN0Z7jvsG3cqp2WDwBVHjWSvioAWZPaabs5b0H+MJOgDSHCB2HqjqJArIbM4+pmke9RwLynn8OdL7z2PdB7wQ==","signatures":[{"sig":"MEUCIQC/OkAX8KRao1HRJMBkcHpse/07YX4eIYv5yh9aMArcoAIgSbYletd8Zdlq/5Y9TXCZMYslXUpqGoetoujQbw78Sh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1LepCRA9TVsSAnZWagAA+XEP/2kApwFLk1dPFakcnxkL\nbXT1KughfOxG/VmeYu9wQck/Z3d+Q1epb7wK8Y+QbSlPMLAhHdPYxXrD7Uf3\nc21aSutVm8VOHzAcetNHYEZ24sO+CG/syUO0VbivuISsx2qpenyukqbSh2pW\nxW+pLFT5g7tA2rLlbubiBMfvKA2DEBDeIOb++3KM93Bia8mUF5fpyXZc3kDG\ndIBsCQatJ7CZcJWaSIxPQj73QEZmwIYWVFS5/zSZtWI6w9FB1PRD4/2aV19l\n5FUbpzilJxwqm5733rGcbTCKWRLtL5rin01MelBC7HY5IcVhWldj0g98CtQ6\ngfKNaYIvkzEyqlA2dLM5e9wq3Qu/MkcxbNyytH8UmCZ4dkRkkfH0D+JKC1Ha\n9L3rGXbX0X83PG8lxFNfVXUdSuwP6/9f+eaarzyD8bFmeJDHQRjknSD69Wix\ngwEAkX0DUEGFEG97+aok7j4afro496U74o1K37B3SFCDHBvAuvQPGa99Tgdk\naebNUiNbGmBcMHsn4ZCWg4Tx1uCs5V/XFckZIy0kp8yjNRO8Wb+XjcJDy29B\ndOeSHyQEDFm4SEPAU8jLbadZVB+IqTpvHJ14Vf6KClHFhseg9F+XTiZM2nvW\nZQAORAE6PsBv5qQMAujts1JxwTKakhT1C0eTKNgeu1LkkbB8SxLXYryqzGjN\naphG\r\n=1+DM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220421928","@chakra-ui/utils":"0.0.0-pr-20220421928","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220421928"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220421928"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220421928_1641330601435_0.5536196890498855","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022058937":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022058937","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-2022058937","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":"a5e14996650c32fc57f9e79b946ecd7024ccdf97","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022058937.tgz","fileCount":70,"integrity":"sha512-dWYSyAni/oAglDaGnEnjiX6J93sioJnIljF2hdE/fqlFf8ChHQ3OnaYykM9kBkwLJrL36IlMP29Yggrzibi15w==","signatures":[{"sig":"MEUCIFCfXgMlBchjyJMW8w5vIGrb2gZnivZKEs5k2KvQO2GBAiEA+oLI5qzgrmqugyg2TcO4vH8FoshZXTzQt48tJzX3IEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1VJYCRA9TVsSAnZWagAABm0P/2fDGSiqSnq9J2mTd5d1\nrisVfYe+jmtqTF/mVwPzJnSyMy8utOG5BDU9jp3+27HcUO2yCuiEs1Xkvl9P\njoJpBUyUX5JlwRfQdRW4WLO3X+O3ZdEXKpGw4Uuc7UsAj2TNNImLt4X5JS7Y\n3HMhFoiCTS0/fkhUqFoBT8oVo+MjI5V5zPmEZf35IQ9lMq0EvuucYSvur24m\nt/NFnILxxf8A1neXurf/+52SHxkhHCiY17/sJKm+jWbKnijpWGZeeZD1jUs9\n+drmj65JsbLRrbww8RlMql7ejTITwTiLNo2IMTGMvvboTfbYanQwVsOMirBI\nOwTC/bSKQMI1pKqW7O2GjnX+/xbQjADUNgR7StCalZlhTVdAPzGBxY7065v3\nXPomHVIm/AmkWKTJZD7JdfqJzfUr0EJBr4288VYFg/y2wEUXL6se36jVGYAj\nMJPz2beeISgf2czRL8s3RsIoVK1PzBWCGqWwA2w0f7nkzpxrZIm4JzA9Fmda\n/90b0+SXiv2xV15EeMlbVAwOurhZ1ARQ+sIVABnd90tqGt9l7Xig86iuusW0\nEK+7988hEE+Ssx72MY8C7BGOaYroJL4DQizz+WPDdkPZJLp2k9KH+cXXpRji\ndC8+3nJmFfAVW9eXH0UjoTSYdlbM3BUmUp+csXbBvkA57bjAXt5M5d4hIUeY\nCyzS\r\n=ud93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"05bf4288f2b138b9f75c070a92406d9d69f315db","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022058937_1641370200746_0.9181453754532631","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206184046":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202206184046","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-202206184046","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":"b8fa703041a852bd0389c6ae540fe177b3cd3e7f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202206184046.tgz","fileCount":70,"integrity":"sha512-TIAVdvJqe2cuk6bgE4kAJgMlzT7GkZvZcOozSo806KdE6QCgNbi249GeVlH3AZu/4hdBGHfPNkaNPFhtVOw2mQ==","signatures":[{"sig":"MEQCIEjk3vtGmyd/Xc7Aj0s8ZfbYPs5LoUJE7X6t+SqRKxFQAiBzvDtyeDoZfaw1Rfa1tE+ctGRY1immrDL/EYA1u4Y+Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1zfDCRA9TVsSAnZWagAAgn8QAIZFRBhbbf1reg5geouo\nqNIXkzq8A/6ykJqmZkAWy5+n++ezjs9zjGrW0A0zHS+/RDNTLY36eABV0h6o\n+7yg+bYMXClsMQD6QcBz4a24QBl2KNZD0htmLRH82FnJBN0JC2+jz3QGtaaR\nyWjaWDxJZ/9a90n3YnE1+fGDx7Jr+KT4QHUoggFSSj0vmSNTWSo3/sW/YQSh\nstGl56HpqLPm3C8vLW0I4Djx8BEGRqZHyDExalhTvVNWsRBcdvycTq55Irdr\n5dIPPUb6ft8W+VMUp3d+WQF+UyLu3belv5XWJKrI9HH99xiSh5HzlA0WdY/9\nng9IzJ1uWH2vRlo47hwN8oMCYlCEOKlZdKgGg9vDYzumPXSKBlcaVPmAtlf/\n4oIXZW7RSD5GwtFJ/SSC1uJf9WWAlHF3fG5id2tTSUU9DNX0A5/3EI7TTreu\nHGqFydx2TZz72h8d/pAhiVYg2Bt3IqiVVCabzjlByoUU3H8cK9UHP4d05i3S\nBkDD2A6anIkiU9rXNZfOPoKlgU861+JY6NCF7WHw1U6HI/91DFPRZS9JHqfJ\nti3CDA6o5IgGINlOpbdAd/OWjbGZVm+YG7Mlk12KYMOoQIPd222T2JjRmFQ/\nMyG9YF6mFeIPVDqnbpq0jCZYqi9qSYbKOGpx7m+R8esjuAwb6MXZGr2fMtBl\nJCaJ\r\n=hJ3e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"e5a110c0ad979d7fc8258e8354755f9d6ae04dc3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202206184046_1641494467472_0.4888896780723746","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206185910":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202206185910","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"53267df30906b9d50840240297305a74d232f642","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202206185910.tgz","fileCount":70,"integrity":"sha512-yoEDoXNf+GkHXCaZDXoVedQRzvKN2oRq7lTw8vNleLnTanBoltZynSyF0//xU0xZ4VfXoglvKvnMVHIOmtjDWg==","signatures":[{"sig":"MEUCIFZkZRQ+CcK/G3WaSE95T6s5KVmtJc54iFIdmlQTSfDoAiEA/oKxBWAzvdBYn7FBNa0lc7z3oywDsdFz9gq651hd1iM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1zwfCRA9TVsSAnZWagAAOrgP/iIx1bWayJmB2cr/Qx5C\n+7YFeYDB5rGlA5nHc27fgpX6fU8NTBPyZJTJVLNyNshhnrpK4vSkLFpmCEnB\n1eCTPFidACTacBVzAZN60+gNuX1yOngYpvmNuT07HfUzVXlVOf00ncwclY98\n4qvUXai7RgqKXu5AzvpxKBQF6WvCTx6l+B3eJ7DuxPjdlZB1UtUBJ2AKzgi/\nABs0DapNXC0K82X1mhK9nWQya7BtcVoO6wSmKLncLNHZgGWB4SUzB/qB87DZ\nPOr4yIU0vhtrCi4LyY208BqOnGjlfB2ruYZIukR5g0g7Fi+k+3r6MF7TwlQI\nTp7L/g822Lw7QYUYu63fcdI/RlO/Ar1E9jGHdgnZg4ONF4he1nGDbL5EVBdr\nXhFNSyo4SHNdb5/P5RkaHklTbR1SsvT1X/XXRUGHNljMRpfO2eIHqoFr8TTQ\nanZyEgkyRameyoE9EWgw4bIsnADg5anK72qLTyFmtuL2z2QeSEt5WzvRaIzk\naVH7es5mRn/BNndr/MaSCm+1gdWBS+IhQoqFIluwdWvcwFhqdgFteV8vjjT1\n3bWd3XE55CZMtS7Xl1V2Ii9Ji679gjoF8dbb6zAYp19w0VtPqjj0BL+Rph+f\nH7zee5Ngd3XPLTZOfutvv453sd7s9hvpNz8SxMAjUQ1le2Xba+HujThEx0sD\no7AQ\r\n=Re48\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202206185910","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202206185910"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202206185910"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202206185910_1641495583775_0.036839579782072196","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220619052":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220619052","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-20220619052","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":"60e644d0faeb504e21f7b8fb52232baa0c6f8102","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220619052.tgz","fileCount":70,"integrity":"sha512-ytG/iFQIqAr2FlYmvyfT4IJTEQrSRJuO+bUKzO1eRf4VeG83iwSRSmLPxZ4AtpDIfovK4soHbYWbrjUMpKd6jQ==","signatures":[{"sig":"MEYCIQDsr+srC1QhQPUSuC0qVEd0UwxaLG9iul1y+oQkD9Y5OAIhAMLpMA4NkD+2b/PgaQGiBVVKXHunxDfBgUs9l3IsE699","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1zx5CRA9TVsSAnZWagAANs8P/0i/EY3CoreXlrE9zDVq\nBXiu9D9BxRICXMZHciGRKDX1Btv2Np3EnpmB3dY0JAs1TLDfxD+k0ZW1oG52\nn4QNmF7LMi4l7oLg+rLlceqsF4BZ6PFnQDCWFS/ex+Sg+Kjm4nKwnJI7xkbi\n1t1cXpHQr1Xv5rFWNIl6Jsr8krjBB6N8PM8l7bgJkhi3o2hfZZnHRr8JK5cQ\n3v3LuLZf3dyG83RdQSvYqETpcmSje1SjJAOw6mpzUDiiZ0I8Kc0F0puseFul\nOnmyuLGK7r55kMdjDmx5ClwrVDNztwlGZOpTcDBBZmqPFfpM5OW6l06bgkmI\nA6XNwDtzR4s0d9uFNAYRkGYGoCLOaSJyJapoGMqpzUgIZHgWxpO80SC4FFaP\n7zv7IRdnK1/KLtCdwMYlfXbip9557gSS44mludgxaRzC9PGtnZlwKln77I84\nfSCz7yfoF6BRcvCccg2P9y55+BZM3t7FU7WhXkdoBqHOd4R66lFsmLs8CCtj\njtJ/RqhskQzbEQWbKdTstuCOk7AE2xR33KPIeJ5CYPcFCcfzXe+cjQQ+ITeG\nvan23ws2XYQQiT4lp56OfIo+AHoCaMs0SExQiWRMc62Xl/aE9oYJdxFn/9Ik\nM+kq0XKOEcqHxsJIF56+yhbaf00G00aHtClTtmcyOVtGohHxYw0hUkPLzFvk\n5uW3\r\n=K66G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"15e57b70f9c9fac49e1568ed0704f2b3bff40b92","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220619052_1641495673565_0.2711536975660527","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220619547":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220619547","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-20220619547","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":"dad602e7aeda88cd95691a55ca0c80652b1959ba","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220619547.tgz","fileCount":70,"integrity":"sha512-xJadwC+x5qHk1vWkZXB0Tkm0qNlfV10RebZduiXq0HgZHnuC/fuZip6ITM45Xwaxb9++YCcdjdEftYPMieyM6A==","signatures":[{"sig":"MEQCIFynsc0QR1f2ALMD1guWpaA4vguYx8mCzT1HvnbmH3q7AiAOkj5mc4bx9OsVXsxg0cXJM8iHXBAicS8Rp2EMN3Bfkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1z2nCRA9TVsSAnZWagAAl04P+wentlH8BGLqK4SyFf9M\nsiqyGhKyo/0wLlCnNocP2HY0tuvd7DUaw8R6O+JKEPMYij1YzpDj2Fw9H+M+\nkkJmrvuGYXRyxTP/Q3iwPAUDtkrH60tjRO3W6au9GeoN2ECV//rP1g6oWHE/\nlolKMNqQH+j1slKn1zHhC2zMRumkdRX362gDYKbWf4e+xUastUaZb7pEKbvH\ntuB7wJcaKJ6H6sTgBH68zYoJPdRQK3yaCZoKc4lw2IdFlC2WKBqcEuFOWJew\nYwQsT3wXYsgTYrQbiZHngT4JLSKht71NKmCOYqqQhP/nkK8NX2Qf2I+thuTo\ng0VJK4yphbjFB139+5XgW8luoDfeGakjcaw+/mVE6k50q/EX8KDKkjB95UMi\nz/TV9jPgBoFhCcOjRzeRnfoQ29nJd29Mx5H/UjFOqqcwKX5Hsp3pQusRp2jE\nn6vbt3blf5P9oQwg9wHaIBuUlAO+ApGyY2DautHoOGq/8SaJJNEjQydnee2f\n65p1yObOGtvo3T5JqIYoZJc0PPwHBBddmueanSps3OMocFyYA4cmg6/bOqhd\nB9/VAtaAHFs/oBvwWHijZAJ7TBwD1eWlWBh319B5ov/VhpSlpGol3wwvNYv3\nCJmWNfwCDAvw6uquABgrjmas64e5kD5udsnPkMP/WfXWV361wzjPXLqEDzFN\nHRoy\r\n=INv8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"15e57b70f9c9fac49e1568ed0704f2b3bff40b92","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220619547_1641495975812_0.5979354047411884","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022061965":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022061965","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-2022061965","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":"185f87803ad850d3bd8e1fc1a0a27c7c7708afd4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022061965.tgz","fileCount":70,"integrity":"sha512-IK30eX1iusCiRDrzDxQDVBpRrLD0pOAEahgrFKY3amp87+aWF7L3iiNOe5fkUiCmJs8DV23Jk3BH8IT+ihzjhQ==","signatures":[{"sig":"MEYCIQDuhqAgxW85fh75PseRxK8qyW5TDu8p6+0GrLgjS1wi6AIhAJ3wgNejAAik/E0sFlpn0/PCHHdKVF2r3oL8oGTJF4xp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1z2zCRA9TVsSAnZWagAAlxYP/AjomsdkpCGU/Ly6E9oM\nJB+fyczmbM0DURbwgXmr3DrnWFzAkiu4Q2PXplh0PUTM4VZ+wTm0H1muiZLc\n9Uj16m8CCuOyD7jzKvq/h34AA/1U+7C8udW+oUSoaqbcY0wxkz2928dKLEMV\nco2tce0vrfEmkaStubMVV96ZZU87SIb5KfsYQNCPHlHNsHqvWMmDwL9xCHkp\nEiTL4VAve+HrzuxO1GLre2redGy3BrEjDU5D7E1Q4WkB9khphwNGtFgpdIPr\nqJna/9Loerm8S0LNtHCBF2FIjP7vGTFhJqx0E8crVFL4BNCHQMYaaLqTBC/X\nyELNOv8tVOr9GhOPwrsOb4wSNybCRRu2ZBQJSZd+1mQchUwgoznHwRPhpIrJ\nyasfE0YrDXdeh66Ac9CgXNj0+B6cGHZTTuiWVP/p6KdQWiA0VFoLPfF+YXNy\n1KBgxLGCTQ2i9QoSA/eyrB49klEGGAq5VKxUjdyL07CMVVzBD4U5t7HBr+F0\n+WQ8OGlJs9YY9Djtldev/sbRMorj6E318Xah/0bBXa/4JQy9nS2W//niqisf\nNiJQiw+bk86DXyf8+x4cRi5kvzaZwHwwgvvQIb9JFg45IstR6mM4mf90uatx\nvdbdWueBVL+fbNn8a0n/3JkBkzxtIEnPPVuEuDZUyYYbA2GZ9HOdjC/4vgyJ\n2D4s\r\n=is3s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"15e57b70f9c9fac49e1568ed0704f2b3bff40b92","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022061965_1641495987150_0.14532044916405606","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022061971":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022061971","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-2022061971","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":"953d74f6bc1bbb399bbc9d7adb21e076bc170c9a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022061971.tgz","fileCount":70,"integrity":"sha512-xYfu2e1FzwySH31Dm6BfQjMHP7sLsy+U2GYJPyydZ0bfKhWaLRNjGJ5fzyAyVm7K/0sDZy0kdFH/ZfTpN/YRoA==","signatures":[{"sig":"MEYCIQCseWw9rTAm+fvYXNho4RqjWmHef7H5u/fcs+Dl05VdCAIhAOe/AV69iPaRlWVFxOmF9RHnHviLkZVfNM58/zfz6qUx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1z3tCRA9TVsSAnZWagAAqAAP/1zKxKgSN1dGkaabbQIv\n2ef5jsh7dvSLLm9Nb/IlKkMUxXhw2yLgKZK0YI5XNCl3s/YUAeEBhx74VH8F\npNs9PMMwRSkneMrOlAlbQMTNtVqm1bd64qhoTfH3vflR+6/Kp4EwNnAGglWv\n1CMWsY/cSxo+eOEskVjlbYJLJWeaBLTrx0OLM9U0qJy6ezo9dUtos9dl4fa2\nzqHZerEf4ChXtuEPD3dhd/uYqS8ye9xjxxn+gbSws569SwWwBwq1XgVGaE5U\nqIREY1yhHU/ByJK+jUxr8O+cOtJEB227Y+qYIyz6NnlbbpuqD60nskhnVISu\npC96Xak+qAA96sIO94WUw54rvm0o9GqMC831hFcY4Yds+5FQu3l3xUSXCoHr\noDPTiCdi0MXGK1m/zOhPCENxz6SfCw6FLTueviTbdNVeUBXemkRhMAUXMbKW\n7tW2LMoYn6UK8J6f5x8SgvOrNupsx2Jmyslgc6qGrJdlxpYFWrAbzo1X4hOp\nT6PrWYqxvFqQMiIVX4WiEtThpeE01bVLng2lmzuKhWpQ+6fQTPPkZRE7K8HH\ngGiqoVZTd2M1gQwMA/Fjezd+3TDLXnro78jjvFR7oScdaG3ApWUTByDCjbOZ\nc5LJlA5QZ6TCe/qCRJNAYq4DIbjDLQ5iKdRoYpW7rSJstUEvMNGKIyC1d8Kf\n6qhK\r\n=/zpw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"e5a110c0ad979d7fc8258e8354755f9d6ae04dc3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022061971_1641496045580_0.4414087900585222","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206191541":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202206191541","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-202206191541","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":"c74fd009570d801f160163d9eccae65ea3de816d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202206191541.tgz","fileCount":70,"integrity":"sha512-Mz2Ve3/JUgqpRFWaco/+N8ASAareWxQqwdh19O5+aEjCLh+n4dZu9ciA/fwnYMIfRBHAKxVvAJHNZa0vP8kWeA==","signatures":[{"sig":"MEYCIQDMw0WA6biMQSUopMKuA2a5LWcSJAay5lOnlozsRaBdigIhALo0SwL+WV7T8a9+jPF/AU3WUdQ0F3LqfejXa12/VPYV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1z/1CRA9TVsSAnZWagAAxb0QAI7dkwjLwPTiYuV5Oxw9\nTf2i8/rvrJkheUWLp6Gitc4mHy70Uw9S+QKlmsMRnQWQ+kufU2Iyrj+i8Apk\nzFu1T0A1mBBmAqxqXlxTYot5fzwLJ9+D27ViaCxPcjxtYhEJXjDbfqPFtRts\nBtrN/h1j8m7OwXRT0hO3G2MFoiGyhjwusTlC7X77KHIYePyfN4VaSdK0wKE6\nXSBOIZ1zLiVDVkfIqcduFDL/Mu0fNmkuw78IOaKBXwXr3Z8OhFYll289dUeF\nBnQT+SP8P3ismP1btiXhv/NntL03tDusSjbZfM8QxIzyVjXtYiRa5MEydh4g\nAiuMCxMaW2IQnqzBpD2cl4FWnuIC9yunlHiD+Z+wDqL/aeTE7ifDTuDpLgAh\ndjnLibGHzcXJ/a1cPacCzu5ijTEk+rTeWTWozzC8XQ6iYhEISJbohjFUEj3a\nC4Isyk83h6K3yV4+KDFWC2PkUiVKjOO2b/0FFnJgJWZ61WrwUe1l2kYwON79\nlx3QmZwFTAnGZtNCFS9xu+JONp4SDYQRevPS2dYQMaYAaf8a3JWdjz+Sn/H2\nOqyLpjmBjIFVVqvhdH8HWaVgwcnv6lN2dP95zrgz7uncGyTRaLBfB6x1pp6N\nOVH76ybNCLNu/jtDMhnMKjMXEx8P4DHIQuM4jjiXppVaQm7cwHrq1ibQbjUq\nACqt\r\n=w19j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"e5a110c0ad979d7fc8258e8354755f9d6ae04dc3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202206191541_1641496565557_0.46641277614612653","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206192031":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202206192031","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a299fb724da293fa5991cc90f7358f4f5c2cf62d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202206192031.tgz","fileCount":70,"integrity":"sha512-UYKmh/UGnE7/SlGmOTli57/lpp704j6murjCrETV64MCwM3OrVl+XZ76tb4pbBomA/D8CSBqn9G2Xj6xiJHoPw==","signatures":[{"sig":"MEUCICSJyZOybS9gmWX7UI1sAJeOmQ4gkeH7fS9aRoysFnDVAiEAoJuGRH4hxIX7MDy9twjoKMLFgMBshOcJFQH0cgnG7t0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10EkCRA9TVsSAnZWagAA0SwP/0q3CnTaTaRgnYnOii8i\nljWfztVDX2hROUrW+Hdwi/VOu96hWX4i1HzZotmA8dwHS56g+0Dr3PgqIN+V\n0TziHWaUI+R00hvbIwkAd+GBm4rflZq8+49KWk4lcG737CmNRajAh8Cc2Qm+\nUeN6Wc6ch739MIegTXtg4Q5lEGPSy/t+Gmyy0ZWtqbi9Z3ahFmCkCmDUoNTu\nYh4uuaqKDLxCk114SOELj1lIeMjWdzuv3xWBfr5w/Ut1VW/KauorcMe8E2PR\nZnmAcg2NotCINvEpT2Ela+o5urLwpZaAwGTXoO44gtynyyKAeRrz9ehazsvz\nedZ6dne+Y7coHGFKKOFy693V/nwYON7+mcVC+OHdh0vY2ACYYC2O1wWpfw9r\n8S57ghzu61oG7tFLb89twqaX0eH5Dj9s8vPFgaAqhWCagXhno9cD9jSvjRIe\nhELVIWaalfUgfw8d6YZ396/bAkcD5xfsjF0GXDtQRd3rF0pZdRtBm8iqR1kt\n6CtqRsKO2JcR/inITkrP0FHoso86c2CfZmkPkkpuqZRUCOhqodct4I5Bfpjj\nvgaj1qvRcKfUf++wdRcXmPuwu1w0ML5UBHuq2/F/S/r4he5Fo+GZ0tSff1Ag\n6CUUQKcgDC/eo90qG7G2MsNAMDTgC3TiJbOfWHHRb3u8Ja+aQaFPrPu57mPD\nBYjc\r\n=sBGN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202206192031","@chakra-ui/utils":"0.0.0-pr-202206192031","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202206192031"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202206192031"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202206192031_1641496868378_0.5382980334453062","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206192435":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202206192435","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-202206192435","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":"7114ec1afc4b2d72fdacd75ddf174c582db9edd1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202206192435.tgz","fileCount":70,"integrity":"sha512-sqPSGENWDgAtpcpUVZ1k266i6WJ5OTnHuogTY0qpIUYzH8V7v+CMBzhbjSK+qzBzViI0ihGj7dVY7hAEjNgeaw==","signatures":[{"sig":"MEQCIC540eBT6em5qqtwq/E45zbliK/1eojZFtc6baH1QkSrAiBr9pgblkqGPgF6aYJGHGyrdibeOGRDywA+QKCz8qzy1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10ILCRA9TVsSAnZWagAA218P/jcd4ytTJd7GhjqCC23j\n0GCCO8EfjVxb1HpRqmnj7EuZldUz6nH2QNC3+VAmycTnIFX9YkFm/zJLraSF\nlsFUwTPN4ZSKNa54DlHEhFo0Ae+MoZx6HWHYGvOkXw5VdUouzMRPWQAZOtga\n9pgXe59RXuGbsTyv2VHaMQ/VsvZzXcQ1j+Hl6Mp6+6f8ySwmbhPxQJqvmWCp\nRiLpF7ypqYkssZ3kJFXCTOsG6rCTGfyWX/j7G2lsCH55WZ9p2h/IJdw3om9t\nwgtWChI7pMSIxn6EkExE9c7XYoQUCrLnPHeX3y/R29FDNzGQCuMYOZMeWtck\nVOhYOs5vLCFeNp1F2wiKtEyITCYOYllmu/7tW5DQbFqPRBIJIP7iEtP2Gmlr\nOiA0+AnBgtlOdNIfNr+wtXFLGmyhGd5TqONiRc+HS5dk2xACEtrS+IKMGdP6\n0E+45VE25RpxHhXMheeM78zz/CCMp24tvd9wtwzu/kDBmLIeJ6RlCHR7MK2s\npcdVjQI7RDOHOI9FVut43vHqi2mAWnaR6dg+b2E5/bYs7ZsxWlUgCGm9QltI\nIQbhU1xBaNSjgMHcZJ/akhT+e0LJ+dU+l8cuynY/3KCK3PhUx81EK58U3sxA\nmhfD82++MRgE0wj7YlM1prIFC+wYSc3AtqKGIHhAxbrGTfTBNRym7bcpkHKL\nO7vC\r\n=4eWU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"b65c5ad1cdcd22ec77824c0f619fa38e68c795e8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202206192435_1641497098872_0.6624422080876322","host":"s3://npm-registry-packages"}},"0.0.0-dev-202206192457":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202206192457","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-202206192457","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":"c272c5123cfc6fca45ce9106f1d333fddd6ec3fc","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202206192457.tgz","fileCount":70,"integrity":"sha512-HmbeVGUiwWW2wJL/rkrIoD+p4SGIXn6Y2mdMvrB9Kmv4i+kt/G9e3vpllza7w/MEudlzNs2/nsjxiesd0S6HyQ==","signatures":[{"sig":"MEQCIDNNw5U35ox0LXOgBlACpOzyyFFztiQbUjsocG+xPKN6AiApB+Wt5qSm2oa5zRyeKry/ggG6o2Mqw6o8KNb5jFOL/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10IkCRA9TVsSAnZWagAA6tUP/2HTcYhc7gUnUSdLGw4n\nishHUIrHj/AYcyP+97wh3B7Jyrm/0B3fn10VWX26kowaWZdugH8vKe5K9/78\nw0fQDFlvCB+jK8/OVr17JDNahAZCWRHxMe0IufEM96HQyUkAj/m0O+gZHKVk\ng/GInQxWptj7rNsQQWmMg2iWziQ5fNSneAMdJFwktjf370RYu2zr9205dSx3\njkgKaTZKdFLKGsjEi69HGNC3URE6h8rV/Qyu4PPqfcbC5XrZe6lL5FSSJT+K\ny9czCx7cxpuPVcmPOFyShNvbomS2fIxlS0GZNBo3EsCytLPqetIguvjY3P7X\nOpIHgBSrC3q8KKH+n2QLnCiCqYTGigC5lEYTb2TvhwHx/2T3b0+hnZjeiQZo\ntmPPYD7HxOOxCnYCScVnFU1ilcUF6wHqgm8HgcVKWEl9JZVzKXAKuKNBh6uC\nhM5NCPl1PssxYlI+RyM52cYSMswoCXgEYEr5oBd7VW9K6lEC7yYy7Sc2H1RV\npvCGO6YGMBcAnDKNA/izdQyogaMEufz6DSa/FfnMFTZ8Mf9CiS6+QLcvh9Bo\naFvfRsTczTZmD0AtrA8uWrZJKs/acgN+s3Sa+FmVlj8eA2n5wgcawIiI217r\njHIDcCzstUDNz9J1l2RqwxW+4kqix8WrE3OuQkxcx4ryuGV6aMZaQjaJUm1Y\n88fA\r\n=Vxf1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"731c533bac10e712c41d1abe714d8c5cbe4a5ab3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202206192457_1641497123842_0.9961320722725182","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220620149":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220620149","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b1cd633bda1ab67e0a40fd3406963f21f973c0e2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220620149.tgz","fileCount":70,"integrity":"sha512-FyVmmab92aqXOGNxVrRhGYr/7cynDkftYiOxusU106HKaMBXTTml/QTFVsNoIA8qAAwY20SF+Fms7p5W/lQVHg==","signatures":[{"sig":"MEQCIC+ZCJQkMejpGChZ4WMPb+RMAtM4h/Ngrr/uC+zgisyLAiB5ownUCma8EgqMPrIeEhdRteFO38IIqBdfFBj16pYBMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10rPCRA9TVsSAnZWagAAl1sP/24NW6B0Bp6w7Vh4cs4U\nB9vRxLBRyE6QHnKZzMiEr0lSDOarGmEfdB+NntWlFpOJa9I7gKkgDPCxyuiE\nNotAR4apTLoY2vymDAge1dLrXAx3rXy91XBcBayquIhJ+LqsJ1zqbDBq5nWb\nBfqD6lEW8qLlEDROiFH95yOsqrhyCXt0LV3uOcnDSAqG1BapiRqh+jSX3oHy\niRh79YC4kRUu4t01LG2frXi1DMSi4NnC3DCtdeDZN/f7GVoPjC0Xo6ppozhc\nnxvR29LqFfFkVVjCKJac4IYDv5oBYwIGNtTZEsT48OUcgdAoTo7eUQ9KAxDS\nlYup/YMdHBsq7hgOplZYsO2yKsuELsmDDe4SOmO4h9+X2+OWk1fQoSIp2bCD\nkKIyCxVieRbNYHhPdpVB/kBxugTiLVn1YkFBMRdMXde3BvAAdPAs5aKNBfNt\n5n8aAmdpxnfzPB3L2ExgFKUdp1pegf1Voa8nVD3NIiLOuviNIQ+3rOHtv6VQ\n2O7D4wt3z9dbPYq8rp2csPdJUZcJ+AIpkUmEizFP2hpfv1Ws/B/zLEb5nP8+\nOibUF5baNpRN6p6zhCW0wXGAD/nfH9UwdhaiC2ixbRdZodoIt5LZvDtNX02c\nYlJ3Wjhn3eHJiyDiTpe9AlSkjcNgcPjDmjnjR46qyvDmy4zNU1HZGsbg7pQk\n6jYU\r\n=z52h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220620149","@chakra-ui/utils":"0.0.0-pr-20220620149","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220620149"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220620149"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220620149_1641499343366_0.7678450653748758","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220620653":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220620653","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"445318413acb9076c41f0e8b6a70675783660a12","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220620653.tgz","fileCount":70,"integrity":"sha512-eE4JVsE1idHfRmLm6uT3i578pcUAH8uvPljtBbjMQzyUQom+T3a3cAkUkEicEfCGWOgsP6Q5OL1XcNOrjPivTQ==","signatures":[{"sig":"MEQCIGpmMN6gr8CJYAghfWqQPKuRLAFQDcWbUd3UypWLACaKAiAmUtzgv8fcpiF7Ae9sTDO2GY5U82YtjooNUvvfVgfqRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10v5CRA9TVsSAnZWagAAaCgP/28yXsAH7Xgw4jMBZoIu\nSSuA/z6TQOEWxttW9o1VH9y+DEcHZdb10zL+mu4olfTAyr+1rGu90n51vRyI\nyjrIqvB/ERccJ6TkkMCOQ89FqEWdK7zIfjRhSmhCcajhvOq+PYc+7vLDsTSo\ne/brPUh6cXW2B9ebMC8PSst/O8Ic8t7SqY10r8Q1LO0ZquA7XGbqV6adTa/O\nOEUph7c7m98n3PE/Sl8G30Jl32qtl2aydeskwu0S1Kw6v9meQ6VSlt97a/4Y\nfNkfvJgNmgY4G8XvUPB2JG0/xbeifLkYWwGL+i6PD23iCoGjA1dqJpsBqJps\n4z/wx23qRDlV5AZA4Ti7pEC6/i/zEvvNM+jmrMmywy/mnYDVr+s00BN4q/7t\nn+6M/4v1xHq0osNrSLPbIir8qHWUk+MmSJmhH2xsfWLbQx0lkTEfJJYspc1v\nbPaLap3RZ5JMiUFqbrOvnhFp31Q8Y5jYKfh2Xc+QPpas7HCBesyVR2pD/ALK\ntQf2ERy9W2YNF9g3WDLFEdAU7Exmo0HqmCeRiXzTM2eNG1Xaoa5ojBkxb8Iz\n5EQGi0GRjlK0WCR9NQJFrV7j+ip3I+dhBQAiVYRvwpy+bUqx+iFnFwEmJkZu\njhC6z1SDQvfya1x8YM9nD1L/9X2kZkV1EVFe501oyZitKjriQWdpI1Fr0FFq\nPsNY\r\n=heBg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220620653","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220620653"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220620653"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220620653_1641499641215_0.6539676476367215","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022062070":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022062070","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"31e351160a725449fc827bf2a10e42eab83c2906","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022062070.tgz","fileCount":70,"integrity":"sha512-3zGpkGHfXZvdM0LWi0K9Y8uaYvxWnei8BC0b4dfN1vBPJS5EHtIkMCEB9Bqm7osg5RnksnSrxjhv79IcmaAVgA==","signatures":[{"sig":"MEUCIEVIvq3/WSIF+LCgvJI0pZMH9bCXx9ePfk9WZIENTS4UAiEAsPCbyilW7H4H7+qoshae5B4yrSN14lc8fmkuu02Js+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10wHCRA9TVsSAnZWagAAUaYP+QDbRK0pm3M7ryENm+Zd\nYm7JkuMthNk6YkfMQchBTurYiyNzKa02E8JGttqmA0jjtqG3/Z/dSWXYL5Ck\njix/4gwSAQj3pPf586uxZjLJ83xyuNEvAjRNSpUqx8QtVDNCvdzMmrikdkyb\nGvhlRbNByl2hwNb/OKRx8zJuIGtLR9xCgmUy1B1sYkCnXtrn+IE2jb+LmIi6\ncaIG2b6SOwKfzozrIeNydHVMxJckSECe2h6ct0MI0ROVmEQC2WnY4pEUhSwB\nRyude5pl5HuRpdgsdZK5mx/ViUuyK2DjfMqZYFA59dAChLOfYvmgjYbZwleC\n1VuIOX48xCmQjoJqmuJeVWEmk6mtIW9Vi2R8egh2IujxDPAc2YZePAtMqLG9\nmHzjFBxF9MwCY5ang3aiAKrNUzpJqp8JiYDhb4IcE/UfYKzZdVDToHdydgWj\nHUnggtElmS0vyI/wC2NskW3a+B7u3qz7gCF8ZrevwUeQ72Ns2OexsIfpb2J5\nTw13iSLTOasXzVrEi3rRJC2Cz4UlQ5mo5klQPBTMIxR+AcceEUzrVQULSiRk\n4lLwcyrvpjTbef31DKrb0wPld+nBpKXhiOG7PFDLrt6jiQE3cgvy6AdU3GEx\nQUrgmey+Y+HYsjAu3sG+ZCOAv6t8pvmBp3C5WOd4RQ4lJqK9HqwL+oOJXfZ3\nQK9w\r\n=KXAq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022062070","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022062070"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022062070"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022062070_1641499655197_0.47814514223953397","host":"s3://npm-registry-packages"}},"0.0.0-pr-202208163634":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202208163634","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"42a5bc97cc52a55efd592cb909d6c4f60949896e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202208163634.tgz","fileCount":70,"integrity":"sha512-sp1CDQgaBYipXetRZzrxf8Zx1J53dxRhgQHi+kvTufHuCv4BaUhnhi48PGXSOrKjxUrML+rwg3LeHRE2kSVa2g==","signatures":[{"sig":"MEYCIQDGwCnufhq6aQQMttnNFoJAdoBwyLXjowLWb2OCeyfDuwIhAKBEt/jAJ+kXfyx2fQagMp182Fd1dbq/d75jkuVq59Fc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b22CRA9TVsSAnZWagAAJfUQAJVKt6u6c9NN76eKoW78\nl89lwo9hX7bJG+upu7eOwrhXWuT/tgJO/ObE1XcQ44yuD4rWV67ATm3kUNK7\nIrcT0+1qmVGZx3whfQDvbOa30DBAtZpsb2ZFc8iIMbydYwWd8LdRgPan8LuK\nQxIbvgDvqXmHL4VMHfgQCBv7f/5KSmKTzpyeHKZWsaogGrvVlo44sOrqhGZ/\nDB6G9ij8Kgs2Wmi4NU1CA2WnHFbcUfNkGSIFk3bI3yXgzfMxRRSWqZ/WtSxL\nbcHVcnIOzJg7Z2ne/zmB8ugEw0fZjj/Eis4b8whsnpk+ig/If07HWQoZvUXO\nOKEKETWLlXppAEVvpxoOS6LRnbODzAl9Urk4diBMzgg7b4scxjHl2H2eNYEj\nRVcHz8lcxavVUY022rnQy80BTGbHXdWRhKFV9ZRXBpbmjoZbag1WpC5tJGGG\nRtfZKNzvz3/12h0GyEf65d1Jl8uC9QzWsDTZqGtrDjtp8iFB+xu5WO1bJJ8S\nU3ujNgFRVAaLf09BFWq+i9CIxtaiXGDX45o7SjbYjBTLrStF0JsrHXsQUiok\nNSqK8YoM3AquLzRgK0JZ/+61Nc0qXhtsR4eKOWzVIcOshTpvBE5AMIMR57Ve\nILBzO96QbG+XIHHzcOo2AqSCfwGcjrf4ygjPc0bBQU5p+a/ouKoa0RlNjG4R\nlvnJ\r\n=/MLN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202208163634","@chakra-ui/utils":"0.0.0-pr-202208163634","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202208163634"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202208163634"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202208163634_1641659830199_0.17246381911519415","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220816386":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220816386","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a0fdcc04b1408204b64fd18546b51635f0237167","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220816386.tgz","fileCount":70,"integrity":"sha512-hakB88CfdqxMDpu2Sx6Cz+FB19BwG/364PaxrBmcPVn48EosfiKpGJXrev1giSOQwKOWYSBnIXCkVVk2dbIuOw==","signatures":[{"sig":"MEYCIQD1bWgkVVKZ/OY11ASTaeumO8BL8fwamR/A6xrezl0chQIhAL/Akau2MfvTS/hiyYmJKDu0APsYxUYnszSKsO5/zXgs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b4SCRA9TVsSAnZWagAAN50P+wTuXfcWg5clk9M/4PSZ\n7xNKRnYJ0uBAZ6D9rnuJPwkGMYqGboO5IOKGRiLz4ZEuZyTZA2PAB2yU1Gjr\n3edxpwIRLqqUtoVfkYUo13M8iwHhsvDD6xrHVWeBP7Q6F1xmn2w+CJhDtwcw\ntCRYX5Kmnt9zunAJXw4PLMUqOwaO29w2N9/x2rrssEAH5ZvBBnqVyqNTtRqp\nlHue0PRAWBAI1jYT6WcSGqw5ByOnte6GcPrHMhKsVDuzYPZUh2vEz1nmXyV3\nxnavm1aB3BgajqUvkOwJd/JaTIblFKP88GNIFJjrTiIGvmuTf88C3w2N+Rd7\nsqNqNu21cl6kVAI6NLagJor+3g+81g2/+jBsB5Ehi6oYCWueiN/hVHYqsqlA\neIi09y+KNLbJ/KSI40S2+2xCrFENljqyGpdxfHRgeYoP89UkRX0tQqQXN+il\njDswGyN7fQ8FotIdNEgA5xNWjMMH4NnlqEXeVBEKGWDj+k27lsTw2Ic/G4FN\n2+I0de3l7e0Yo2L5UuUH+8al98jn+V/NLcF/JZ6DXCO7/ypul7k+aAApVjQ3\nToprtOmn508hwuPozTHjABq6WgfNpT7GGHG6Gd1bcIgQCMhwTjlRIO1j4bz/\nMIEqKQJVc98TgZ3Uk9IGMxXY4sWeZUp3EoybRZhWtg8uGyXsVmDtUS1EQHMM\nJBOQ\r\n=ZmEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220816386","@chakra-ui/utils":"0.0.0-pr-20220816386","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220816386"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220816386"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220816386_1641659922774_0.39543707397725525","host":"s3://npm-registry-packages"}},"0.0.0-pr-202208164521":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202208164521","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"143950007ef3d5caf27589c87fa4dcd2f048d3b7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202208164521.tgz","fileCount":70,"integrity":"sha512-4GgWpfQwfNBGE90GWot55pNWIXtqcPUFyJkUW4wlO/USKf3RX0cQjMulPmWasCbSCdqgz5PyM91YssNLSuphIA==","signatures":[{"sig":"MEUCIQDeKwpwst4BkYiDcq/jCWqbZxypKJRgdX84R08UwUmyqwIgdDT2cam7MjH6WuMjYJgxEnbgbqeP8JhiX8Zm0tggcSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b/BCRA9TVsSAnZWagAAv+wP/iNf5y3Gp73Rt9UT3FDI\nARuGYsHdJiNgZ4AZOe8e8qzcrI3aBUPQJ3zMygWfqKvi1K2N0xKbS3ugokd3\nny4WZ8amKJeeS29ZNaGq8Xqk6O1AmomwgUJjAP9FjTxaASoP2LMLByn8/pQi\nvtkIDJOhA5HiY38CvAXw63QfRv8KOj/29XJ54UpWZxKfEpa1/uBzdwDnD8p5\nKCjEdveyGXEqg0z1znVAMpdtCLaye4uFu0S0q3y4Lz/oypJLHExa/ooVllfx\nOgbJf9QGoewttB2D1G0P+iwdFzUKOIfckcIQPYKUC09p3hgDeTztlYa7HYF/\nzrEIC4brhXY0jW01+r12nfQg2uprZ3oI1Rd7l8oevg5tMuHuNvXu1/UJslsL\ncr81At8iScXwNBVIWBaF2S9FwTk+GbrI+IYmrXsWuaSNeyYcB8v0UCn+meR4\njsK+YQsywA0vwHi1THL5ciYKAVbx+kDFyFxe7uwAvyWQCX9jeAG2kOGtEWaz\nVX8Z7V2/n3jf9JIZwYhQu5izkoR2wGbr18/feudcqd/uRYoETGCN/h2UwTkm\n9LegSisvuLImnb20681B5bCRsM61BhgD9+LxMH7NQxMWVRjtadE2C1q5i751\nFPOIoGPZbI2pCxzRE5P/amyZ0wj28E+TSks3t8LPLtWnUAx0rr3IbC+/ZNE9\n0s9Z\r\n=bVZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202208164521","@chakra-ui/utils":"0.0.0-pr-202208164521","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202208164521"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202208164521"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202208164521_1641660353726_0.08287949940037387","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209205059":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202209205059","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"57a031104cbdf05a726643517145fc78926acbd0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202209205059.tgz","fileCount":70,"integrity":"sha512-VJB1MK3ncN1Qg2rrms49t2nZKmLPk3tm5/jtVOylXUZVhGIT9vVj2YyyN0REEpj9GvPXsc58Sra5MtzlTHqKNA==","signatures":[{"sig":"MEUCIDFso8ECjG3XvzPxHXEsQGcG2yqQMWaa72pjYuWgDlcYAiEA2IlSRrrPXIbVjSVRAucNlisOFMbyt4rJsXY08YYg3P4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh20rSCRA9TVsSAnZWagAAnfEP/2ehcaiTLQcl+3AIIgun\nGnl88Jn3WHSWQJ8El4tPEvHhHoj5fGeBoTgbjiXdp65BAWJ62ul2eydmcRib\nLIXU2Yg2ess34qpNHAgPb54KDKM//fECMS120ovOIo9XsQeje+ushjQEl/wt\nMWEB+9BIBmhloxNbzRJKvrENHOQRUUgV+lANS3CwAgsKIBaT3Jnn5a0HD9fD\n5M6+LCJN+qFQ+azQiku9+BSDbvV3XjhprpoteBGhJULzEdffPrUy13OiuzMS\nmZEBBn24YPI0bKrSSzPxnalRWs8GN8e6YznbyfSv5DtI0cmy9iFNtjeHi/TJ\no9sq2iLojOCFpdIAIDE/NX8H3mRlziMSUQUAeklZi2LLwuPNELNFSKFSGyEd\nSl6SWy/kGo58cLgOBMtCdalT5Giod3LCyRvZqrm7z42W/xSV4Fiu2kXHF1Af\n2JphSAVcsZh9PF4OUb9HxtiAPotVwzdA/rT07t1USFY+Sj2XT4WOdWxY2WjO\nV5wkBPlPXBtiFesZmtA79fcviED9lhOxsutc/CusW9tVMpXtyplACtLlBZgh\nv38I1DfTIWuT8I6sWjaqrll3zeCf/e+wTY5QH9MPTcuTgir2H0U83tx+QgLW\nduWvz1VQ9U3EPXee+P8HRXJ7W61JHbDVgJXhYpyX2IMscd2qMZFraXrpDHRy\n9wFw\r\n=Zuj/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209205059","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209205059"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209205059"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202209205059_1641761490426_0.16439571514358664","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220920538":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220920538","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4cb259557a9f121ea369eec85ec3d443a7ba4a3d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220920538.tgz","fileCount":70,"integrity":"sha512-irZ+w0MHmCWWPDQmF5O8lm1xOPYsFSXBZ9e13rd68D8klUaJCJ3dZlMTCUqe/ooxvDChld3oiLpyaLY9mO68yg==","signatures":[{"sig":"MEUCIDZ6cvL+l0WQ4IR6JJDu0FvzfmlhXWLRUGzHwVzMWTlQAiEA9Oe2cBab0ujsI5EoLCyLaOSmei9P48WafaCtbcfsQl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh20tUCRA9TVsSAnZWagAA0a8P/1+SRu/nIFmtckNMrgmC\nWkKfzCFDy+ku1538R7mp3eVbGC+pAT6oB5HomtZwyxqwlaYKWT1QfCFaMGtV\nlcvWdv22xs2iXC3njrjO6F0qVPnQPlTjz/cSQCSW40G+9v7ofn3g/oLRDKOS\nTJIHLQKjJuNjbAXP85vokRTSDIxYTXP2/1sV4w44MgucxqOHFtN8Nn/Mcaf/\nSgalZla15LiWDBTHDvADAMSvWYbyIG7mwsPuMsx5tHN3xagL/majMz8dMKun\nToc41xraNHXAaCVPRmRw5uhmOCBY2mmYTdc7s7uDljOGbht8E0vUBlguZB89\ns3cfvuLThtxGwqiPXeakfmx4U+X+y8RRZ9MPXmAN+LTwnnhxCPMMyc1jWwUN\nsJuQzsf+RyvDrWS/EsHTlrr/ZGSqU2OyfXKi+z8nKUat37SVagu67gNsYamV\nQKqyOokQkvdgZMsHBhe4kAXM27glFtYIsa5i0KuMMzNnWDTjttRhDyMslj3F\nLbspwdLcz2q8FpoV04nVC8ZpMdB8VKtQSyBnRvAA8A5r1xYYj9Fjpx8VQZhR\nNUW0yD5dG7E7seshvKyunOdt7ly/hh+93vO6zYAt79nRw1xnxQr5ZTwOEjqd\nsbNNHJBYBES0E90JSSmGFIdsTNM7UtERpfVpZF1gxYZaugzdoRTCw/Ef6g/Q\ntwCy\r\n=4hc0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220920538","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220920538"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220920538"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220920538_1641761619785_0.29886439846656043","host":"s3://npm-registry-packages"}},"1.7.1":{"name":"@chakra-ui/layout","version":"1.7.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.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":"cbf5c2ea17ea9d8fa7db71e40c22bfc1dbbd3793","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.1.tgz","fileCount":70,"integrity":"sha512-88kCHKFOD1JVN9/ErUcO5JFSnZ8SURmxJefaJHV7tNWzphjeFLoYdgXYdT9a+rwk80LNDQMvhN68AkXmPTve7Q==","signatures":[{"sig":"MEYCIQD7boimBhtj83bxZklwUwBBtdVcQg1eG0Uqp+B2fJQc9gIhAM/YPlBSnYGOMObyqf+omHQAyywIalNNk0CsCC8633nw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh20xCCRA9TVsSAnZWagAAtngP/RIxB6cHamCbnL3hy6x6\nBhFtQkUrRVYUh5IT3v0hOVebg/09kqcVROqHMy0jJH59V6iHAqe6hLneEMVf\nJjnNt2tALpaJimXLSwK/XEeqk8xSa46JBxdjeXcQ8ZLXplLGjPTObBxIZ8OK\nxauaqv+PJmnaYMpD/Ssba1SlX95+SIc5g1NRB6geMy3cMLWKmh+vd5qp6TH2\nxj4WncZv0D43SrN9rK/ol4/5/iMSHU0cFssg0k9gRAGXpeHoneE5wvuUOkwY\nhtQbcQiljC2kJawRqfVveZ2S3G5RYoVnHfqObeObQQEsIuHCKKR2Ly5TxPSK\nEcNWgtm6Q+yh1pXncl2/+cLLNQx7nxB3LuCtaEfi7sjlblEa+okLgsRRZte+\nhYPdPgRhnHhxr5oc5tZsFe1Ka9CXPQhlK6DyVVFORXKgNZO9uvcmmN9UPdVJ\nH6gj2ZPU3hodlZkDlS7Upi319KsZhCJE+Gl7MkuhKII5vv+/hOFC2JLygcoE\nT36mP/yKL7PVtp8nJ5H+QvVE7iygPohvnpIxSmlrXlFxmTkWc4WQOZv8HWvx\nOtJHrSG8v9Fbbq/DCF+6Hx8VqTN1+pxGD/+rsIZNVfSdaqFc3suN1nJyfW9r\n1DTpU9zKFZIM71CCRA1+mOEbSlA0fZK205ti3iov70Y98O2rlK1atvsICtJq\n2Jo6\r\n=qtPQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"77192eee92462cb6eb7eb40636d90c1f2d7f600d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"2.0.0","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.9.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.1_1641761857865_0.056621166584379434","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209211330":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202209211330","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f7e228943eb269e31563abd1e93f85383c96f634","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202209211330.tgz","fileCount":70,"integrity":"sha512-QOvTWzHstQuW3y46Mq5SF6wW86ak+RCKwwV9jbFytJPZPNgLJl6OJVLowLQ59CCxIS+plm+F1TeE9PyLLQ/Rrw==","signatures":[{"sig":"MEMCIF/HAM44LhdnPRU4BM4ShDfjG1T4WIeGWBdth7K1pDl3Ah8WCgFppnM6RqI3A0wYEiPJIlRUx7FzVaFGXORzUbqx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh21AbCRA9TVsSAnZWagAAgIsQAI5jFmx1HPYTU2PqfLB5\nDLh/MKXi2w7n2K+iwaOWUCmzknQ2pxx4VBmBB9YxHBm1U0mgU3NapMlp6Kug\n9tLUqG+D9cZF9fcm0+Lwo1r/RStDjcv1lpzpLAn6OCqvnsC98ip3ll5eQIsk\nzzp9VgBFthYQWVxrwHNl+PJZjCmfmkVpEe+7PJpcGYMMOnqK8iC3bnDR2Ssy\nbQu3hRcXejSPfOBPvGQ0q0F5BwOLRprD807U4NOHtLgEQV2IPhMv0WdM8LJ5\nLFlWDe56s94b+EFbFusVsI51igEq+QBGhV+NvqATDjzr83WOv6yss5acM6CK\n9XKSd2tcQpyZc8sGLFS1xXXgl9xaxhcj4Im66RXvtREDJFjr0+RMmJLsmjEL\nUROlhZ1m90LVVilPEXHdQjWkUg8PTrQL0uQJRNXY4cxXwd1jIZPLogg/aI0R\nITQKBSzPFXWYjtLGu9r2v1vaUh4FH1fNCImZwZE4c1oLY5qX2jI7UoVYT8Bn\nIi0hWt68qV24Pbo9SuUmk2h0xs+7XB6GPj4lqG9a4W+tAe4gffRY++aH2eUa\nm/lFnGJGzkBpu+OVQQcjH7xzFQZCY5LqN5CdhxcApjGK9xos8P06damVPZar\nD1WNybeQYWMDJCvFFygjqkFB7ArYBXFSX2gg28WpeZWIz08TXQoOSW62AgPc\nVyLZ\r\n=EUsp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209211330","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209211330"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209211330"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202209211330_1641762842651_0.26916077080535983","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220921590":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220921590","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d9014626e8f6e36754b68c7b765a33ea2ca9dd99","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220921590.tgz","fileCount":70,"integrity":"sha512-N7TfuTiYGzJSansVa33Xr0vWEEfAlJgXm4lXfQzbfu9lE03AV1WDjYXdMtZWllEDCIL7HjnzYXuzZQ5AZ7BHCQ==","signatures":[{"sig":"MEUCIBBKXK9M2a/NHSzG3J0knRvRodaz3unSvNr0YVUav+hfAiEAktYDzb76A6UKZL7dsQeMjgORd5Yq5ur7WvZhr9SI3DA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh21rACRA9TVsSAnZWagAAyyQP/ReBzDghbo1Ssr61/pJB\nANWqjpeG3heWc0Bu7BySL5wQ5LC5yVbWJL9hAWRxYEe7aJNOu/sMQowC2EGX\npne+Y2ZNB5ZFpRBZ1CVjTeHwOzbc88lztb2G+O+YEPJg6Zwp0q5QtyfQF2Sk\nzJ+E1YMPYub81oZHq/OZ9hcp2yuX0oqj5cHuYxMS41iSPX2m6GUBl+sA7kEo\nKxUYwh3pqEVuZ04AXsCitAgYPdMzi7nx621tOQ7xAw0lZihVMjlRj6d0281G\nZ053OlqZ8ps+ekJIoKPuX4aEgIAB93bTF9OBJ+WG4To8zar0NaxsPIW6kGnP\nli1IYqWMwiKrBWfLM1omj9dStEBEuwGZqR9G4AenouYOODwDo4t3ayz3k7Tw\nVBR6/GTmch1PF7dLY1M8ZEbLKOIDhA8bsi6FvWnf42O3rqgvuLjdDFPIO1M2\n7tMr25muelaMzcFfMaaPXdJvLdnADu8sA+o1/RyLLlQRjwmDe4Og9F3Hvaf6\n8/xHVEnoAnwPfwqCiL4nXKJ0EuHxIcCMXensGIV5gcT0uEHdC9pDlbcodVp6\n092y2fkgaDMAhZWdfH/7oIZ3SJgKmBP+AhtBQVfzi9Oqsyhvkmhrnm8miG1f\nDxJRZToyJmnbFcMZPplor4Lyz9Rk5HkqfN5sr6dJhBl9wusK8ev/oTqQVijS\n/EIX\r\n=wzlZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220921590","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220921590"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220921590"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220921590_1641765568060_0.1626472408831774","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231642":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202209231642","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8fe243f6332e027ca71f2b53ae0fb2be0b3c3133","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202209231642.tgz","fileCount":70,"integrity":"sha512-Vyi4WBx1MGmaLKREVGcu33FrjIsD+3BW1il9IGQmX5VbfjqqJNLfOUdgv8zSUhW6rKvND9b8+BQIzJAoEC6MbA==","signatures":[{"sig":"MEUCIEmlhZxRDWv5FD51U8uRFX4oiHozTDmPuEb6GC4xacN4AiEA3uBt2+AUJJXwrEUqP7B+VGEm40+avkQ/KGsP1rBF0EU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh22z2CRA9TVsSAnZWagAAfqUP/A6mRMRdfjgG/8SS/02m\nuuHm0k48I6hTca7m1+niuy95pg12yRJlyAsE2rfntnr7yeOghDNJzTrKmz9r\nyM5ntqgDwhYvSpBorz8HrM4UjnWVY+7F9btsH3TF80NDlXwBmfKYLnI0Sumo\nsTSYGaTxZKZMCrQbhTM5ccxBtxiUo7tYEcnEZeZAHKtV+J/TbyBEJkQROj7M\nz44U0tbfhOWYHTSagEN9YwaRc7T6HxoHqaJxrJx+80/UrC1NDOUaD/hUF7Gy\n7xUUi8KpR4PfqKsoXlwOlMks3xGvYl1JYQTef0+UpHaOmQGxA2rGfnYXriNU\n33RHXFZ2POLpDXbr/uiBw8I1RhaEVIyUyz2vyoZBIkf1a9dB0WCsC9NXFVFX\nRnijfNtsF/KhHme/iMDAy4jTXj9fHkEVmxAqX6NiOnOXNjqDkxPP+2Libys1\nUMCtqWZwtYuTl3wLxHWUhYgxt+irSs0NhgGIEz/GV8Hffhk2X4fiJcuDzsLd\nH0WUGoRZ04S5gKx6O13DJmI2fTGMbmSSVGFxl+GSrT9nZC7iH25WZqhkEDSO\nbA1mexzWZTzLCI3l89sC2rTHCMljCARbiWaDHsvj5PJUw+VVPiF+dVnxevwI\ncDco1pY4modfpwTAnVynBb9wCoKjDF0iRCNuRCXA4Zwb15WuUq0OZfSQxele\nri64\r\n=Cm4v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209231642","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209231642"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209231642"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202209231642_1641770230247_0.7756717598429679","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231818":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202209231818","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2e393cf1787c4a944b36bbd9646f778cc8473727","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202209231818.tgz","fileCount":70,"integrity":"sha512-FEvaSqCg9Uq4niZNair/rnGMpGbB+/KegxgH8SI4aDAD9w/x1MNLyoPt7LJxpeZAkZJAAsdXq/6l4RIECt6YhA==","signatures":[{"sig":"MEUCIEEA6uJwm8qQjolcm1ax+jGgkgBQSRl8Mk69EPpjlxRHAiEAu6BYvM6iHAd3ueMiz2Iwku8uegxUzucG9/xxQ0CwAHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh221cCRA9TVsSAnZWagAA764P/32i6YtSxWBUmG3hyMrL\n7ybRB11vBgTyxX9Zl56jwZzb1zoz9v/zYXaESt77enucd7xhJGvkdCtPhEcs\nnXVqrcgQRyJNqkxiMV/XKufftpPFoH4lQmiaD56jQCGDybgJMR0BVh3MxEmF\nYJk2XUMyEevn+hW1w6lg21k359TkdT3ZdD2iJlttllohdWtF7L7k+V+cr1aq\nNtqth73kDkIPfO+LEBd1GtWimcCm98y9nBemuypSe0QN2fXfhyFlNvlCTpo/\nzf8I0BK0lah1LaR34QRL8pQn8f45c9vroeydqstdHyBEjLh8sMec04nM6YuT\n3Bmr54MFCxUmjGYL10o3gD/czUyoUfgnxgMA/8NDTBJGZt42vomek0oLCq1G\n2o8/hn2Hr5I8fxyd4RGYgKofCnkPnVOzp3wewvuD51qt2go+mlTTUW9rUvgx\n6Gh0hR5/E4eGWUO842JiVbO6OjaDW+zue6tb5PW+VcfIYd4m2RG1mVcoONvJ\nhwNbW7xOomQ64yT9nudSJYU3hDyAENq4BALdrmWZvBN71B9sJirkakC4h338\nr1zVhgYRRjuhfrEBB0KYNqlfkxT4NoM6+kW5SitRfJJcC8Phh/dMyUumzpSk\nzoUZbv2UBPUUSxhyvVroKMZsM9eSp4P8hHR3czQ4PGAuJHJSzqlStHhdhUx5\nDrsK\r\n=IC63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209231818","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209231818"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209231818"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202209231818_1641770331890_0.032654962911382146","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231927":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202209231927","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"64d38801f363c908794c0164654dc5976c65eeb9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202209231927.tgz","fileCount":70,"integrity":"sha512-Jx6hvmgszmYIJpcSXqF/7a+v84fUBderQy+VW/wr9luYeo9hyu3AoOuiU8myVPRcUShcDJZcuLoTZm8lVjdOjg==","signatures":[{"sig":"MEQCIGUKxdIicn1PoUyEnDECLstJPs1cQPfntZFG41OQsjsQAiBYokP3fKW/tb8gfTI9YoyDgRtxRTOYP+pSc8WENtiTyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh222fCRA9TVsSAnZWagAAloAQAIw/7ZW8RQGmhOD0AXaJ\nAbV5hpDflRW0kXHb2xOAsa2X57+uiTC3CsdPhI62637NiU+9Jv8sGsYvLPew\niKaoeeRviTMQhNjUEhP1cwLWLrWpiMiD2sMxByk56/cafvY3ziHyT4A1Am7A\nWKR536XV2T9/spHtPlNw0wPaTXPm470v78C4XeQ4Q7uTBpMj+aY4N3+ruoo0\nq9hQlZPCYf/PRiCAD29X6W+7VuuN1HWysfeS3LMkm+DFOnDQZmrzsM9rAP1k\nqnJGDrz7lgdbsqC6o70C9sIW8uIUHzLAZGyItYZUOnzGce42X468p0dwq/aV\nLL6+G1KmUpgN/t30w10b6/UthAYHz6txTSZ7axDpJb2yiuqV0etxcfl9I2IL\n8QqBt0BALAEWlzHkXVwerKFzIp9u/7POGfZ63vrSACTPpmQLKAH4avgjL+/8\nax5xEUJpQCj9ncWxvKx+qt5Wx9SdK/jvz90DsE6OXAFA0A+34EXq5SkFzuNc\ns2EiUty0hmRVOUlSQstuYoAG1UIll4HZK8pfVlKVuiz+3R7NaKh4DfJrclns\nEPZECosYXPoZgV7XbFveXRdVkmFFd8/7dKAeF3fdagsuSn95YRPp4e7yMsXg\njknC+yPQ3POUtJnlqMvCrCeumOnOzmxm/kEi4b4H4wfPQAdq0LM7SUlyhV6D\nJMFs\r\n=WYmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202209231927","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202209231927"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202209231927"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202209231927_1641770399192_0.5250029204512618","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022010134944":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022010134944","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"abd6bff45e381ad71a1d1d5d102f50dcce8e7491","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022010134944.tgz","fileCount":70,"integrity":"sha512-byjVQAPf5wPm7fZggnRncCXm7YG/4KRO+rLUp2kA6Ksn06/hR37D7Jcx/i9Hl5I+o/SrRS1R7pF/KFuRwDF7kg==","signatures":[{"sig":"MEYCIQCpcEBUzyGeRtV/aCSDD390t+MBPDGNzdBK2Fat3FVSgAIhAKlOO78kXU5c6VOV27WShKKOWmzvy8WnVyLzCcxCgs89","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DmSCRA9TVsSAnZWagAAu7UP/2eHW0jDTSYqedIuIxNz\nS+iA5ZqziGn4kjanqiFtSOJyOYkm3ts19vC6iC+LEuw4+R4sHGxg9+YkBHaY\n0TtiFF4Y0Dzx7Z+O2OGUjlaWMO+MtWq2GaHTMfTanp7RJ6cgQ4UESw32Fp99\nzjpjdPXZdcMcFYi/o2pNXqh2vgU7p8+tHpsb2+7ECWMyrH5yVzrYv6T46wwV\nSBjpAH3izhq023ycRBecK3HFsvbm1nLimcuinFRRFq9MieipY4B7r44+scgS\n1xSM0v9oMEvOKbi1/x6Hf3LrhsyzfiRgpwL4zfJbochPXPu/5EF5NYZFvXBn\nYZKF+L34ITxwyyieE7Goixb0t+DUtoZniKXRi8st85z9TcpZWzIzl/uJ17TS\nUfwxP1BrgIXJZoQSnRfBtZBdhXPIMgZLcxq5QHf90oWjdIS7IknwhvEh9OZQ\nRST5bs+uxVBF/lt188LiX0U5yYJmc0C6QhUMRZDzvQr3OAuTqpo6e2Vho0bS\nCkFXaFGY2V60tRYKcVM92YpPg2J/L5o1LeQGzBugLCSuXWVUJBuVK3YQSM13\n5ra87pXW5uEscH6CX0HoSCdkBs66bPEs5+Clr0euwC1ufrhQcsucizTUziG0\ndvMbgWjS9Yr3mPUSZk/NX1leXLMkqau+EeEdSTZ/AUm/SiNR43fqXAt6cgJg\nuF9q\r\n=C/5V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022010134944","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022010134944"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022010134944"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022010134944_1641822610447_0.47439333235858694","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201013510":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202201013510","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6e2c179a5eb897b9804f51198b5125aaa8eda39f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202201013510.tgz","fileCount":70,"integrity":"sha512-bnb9ivd4gC7N7h7SZSRqntQ5aFGjT8uA/+VJ2VNL9XLSkb+ILDCIojefAmwkISiqbt1S4+Y0FOSCSZkNZt3mDg==","signatures":[{"sig":"MEYCIQCe9zEsrJ6P8RR1zv5gaMcPa9+WIiG9nPImuumsU/GNqAIhANC3TpJCcKLafB4wGFjOVxNUkjmZ9ILveCO8bajHVsle","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DnhCRA9TVsSAnZWagAAYjwP/i32wVFS6GF3wIO+0i1c\nkjtovwfVScKvnHJ4OHgk5Jb/JlMB+jmc4TXAM6a4v9jAUNVRgeoOxuasv6R6\nHJiLi5wlIZgIVp3MMuGnR/YUdmNKwoqqEL98gbpLMkisuSwa0OSVZCudZNy1\n2FS94BIyeYcC9O18coXfmdHonjC0YDJx3qZ9X2hfim5XpfJZ/zc/cLpncz48\n7iQ27180vkU0l5mVrD6QWHzQsc/6LSnmtLM92Zmqpt1PlSbGyGtj+1Iq/8EL\nTQvBlanhJaVn/jAp6oSgERdScFYhvaCtyS7ju8FGI7kaTyb/BkUQy7BZU6Jh\n7zvSx45IfFhGHR0QFgnDXyoQ5shzGNHypqQvNy3eAYMRzOJsZ97ejbfAlnru\nfSpj2+nyr+DBVPlrjnF6WUN7jKLFi04td5LdO5UnUrCODcDFKmUPfM3C2SY0\nAEXZazfFWJM+O4IAeOartjac7FOpBpc9nFc7NCxzsLpth2Tc7VdnwsZfBYyX\nDtiPwVMQn0/uCfuw5nyDjIP1yddNDsNSdH/QRD6bJLQFjRPX2CAjzAovtB/u\nsITg8JFYFIfuZmPxvnsUjd954Cf+GUYlenI/osypwEIUoN9PJeDyvTreOzgo\ntfykBJpg5QRkAU+PVPme2PgDOntmJXFl23CXrGcbgZoAEtihsIqKZ4dWigN8\nFBey\r\n=fdxA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201013510","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201013510"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201013510"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202201013510_1641822689492_0.6886073644622932","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201013538":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202201013538","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"674f257648c8f0fc306f2de4a50f8c7f395d46dc","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202201013538.tgz","fileCount":70,"integrity":"sha512-KXaEAu0VZHieHcjLLalFdDyUlo7aDZCgx2XY5slgPVlqDoTFpNNcT3xrM2gk5DQXiLRXIdGKJwnHxQirNj5OoQ==","signatures":[{"sig":"MEUCIQCT5KPF1bLaHMbcfVbW3bw/e/CgwSGnN1FoNseafTzsBwIgOxFKiIKgGSXJ2xGQwoKwGWBFVRagcSkSwVlAO6FeM9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DpfCRA9TVsSAnZWagAA8qoP+wbP/6dIitKNhXGtRaWF\n4Xy/eIq2a7rM6NAq6R+KKo+TPGL03HiyuhiebG+iNre9PTJmzV1YmPBJDarb\n6Nmnvlx67aNgrui56EDnEeX3TuaIGIZm+JDgYxfx688A9pfiBMIcr2jkdPLz\n1VR668c/4AWeTgWItTD9Pio4S9Z4uP7FG/kgk0OdS85cLWjXd0bJQ8vGYfJC\nhTGwgiJiFOxfGrpcUP8gFzPpjDsYXVJXJP9paKQ+xrKW2Fbygv8w0RmFNOcz\nFXTR27TPTVYU5UTepvFJqM99d50As7fOJ9S4tx6s5tgEyoFNMk2YfIQyg51l\n1jIadtpG6nPLyBI6R/7Q8/sXU9RDSGwjQgWBp3hxkZpYysRlCppgmMsHeK2V\ncsPAUIqfVuzSzeMG1lz2Uw4WASV+C5N+tTgpEvo3NAb/VlhQDv3A9apxhKJS\n0OP9Yac2xAfKYCTlr4r5eWGcvQKsb5MZdi/LlsPLk5L5zs8mN5v+5Nnce9Xr\nVsxYesrV3QOX0AWSMHRZfDnVBbAFMqCr8gPZzkTcGrtjMdqDCUToKh+3cpG0\nBtBvxseoAhhvuVPaMwLZpm/CzHT62geE/RVG/A4yptI2l/IdxT7nx1Muyls1\nd5Za9zvpxDk3gxjTJL8phns+swTFJP2TrlG9sCy6kBqH+8t5ABw1M/m0S1OL\nBrYA\r\n=RMsj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202201013538","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202201013538"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202201013538"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202201013538_1641822815762_0.4616379598780884","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201117413":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202201117413","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"809d1e1b9b69af1371c2709f413e8033ce940814","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202201117413.tgz","fileCount":70,"integrity":"sha512-WS7wEATM7hcOFGqHFWnsdLKcB+QcGgNNP712Auat0fvSV7fPhIwGrlvnM/ImPrJsrmXkHcCFg5CdFpRJdIBHwQ==","signatures":[{"sig":"MEUCIQD/uPgGXr4IV3VKtiqHFBZemvsB93l2Wv6cbHPuX+qxCAIgIRhc4mTWxH4HqyoZ9gQxGIJ6x5G9HtD55cVQJhjr5OA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cFICRA9TVsSAnZWagAAOCcQAIskZ53Z2NBQCncnT4ue\ndsOs4KYxT6FFMbeEYleTblm9EJ5goUQWnnl0J8orE5uZmhppIwTsv/2Io85h\nS5V9sJG9HZFX2RDphcnxRtQ7ihFOGEkMxRYGDdeGX9cOe/XSAOCwKPIsIiCC\nLPb3yZdY+ZMYyBLDMAjYhKwzX4364ZOLZt3nHBo14mQ9GXNYZ5bsE8/HtPdx\n2LfVPnBdnpxHDYIrgPWVUFVIs9L47jt62yV7TDd+vM0zhclOopTW5RGkq5WM\nO6HXH2X/CMHTPeP+vEmVicWMHHGEIHxRyn9CYVeqkH6c8XsfAvTSDlvuDG8O\nIczqlXlMlD8VoEC6eFrbCAxC2yOYDbz7EONVQTHRF72fCworRHPevFUkkQue\nl0uY1tkLSiCCOVikqfCC0IIQS4LionZ8U7DCS1oEktBVD8G+CZEszk+GK+P+\ngMLyCO6M2HxfISlER8NRPR1CUw73OGXl+sGVd96vLd9JwLjdFuu9qf/ZRDFY\n9t2n5EWWOaaCoNEGgye3qjT1RZRVEC5oFBaUUIHTKnpqxz1ixvokHA9O1Jjz\nVJcHRWzM4kFOZR1uMy27SGX56ee9yiGox+HDUxSAJsxwketPnAEtxZ/jScH1\ndzBC9UKnFBrgr6m+cp9NaGC+va/v/ifQWQsF2Aow3Oow18AIMSJ9OkfR2o44\n+c9O\r\n=jw6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201117413","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201117413"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201117413"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202201117413_1641922888754_0.921766835716439","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022011175644":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022011175644","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f7214eda6a1a2b370285860236558385bf9eddc8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022011175644.tgz","fileCount":70,"integrity":"sha512-OovnGt93+zH2Um6o42WOXwL+gUw4TzGaA/MrwdxsQ00rxBe1tS2Yv1vuSyqjCLK3sRlqiOltC08sbfRf9bFNxg==","signatures":[{"sig":"MEYCIQDkvxULZ6UQkDMIy/krqahITE39We9Buytl+ufuwYRldQIhAK/T9w8uKCjD0OFH7Yd2JtjJQRFokXsXeVqJgrDNlYED","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cT6CRA9TVsSAnZWagAAXBAP/iWMp7f/dTLmDY7NzNzt\nr4CLRRiwdGDLrdIL/2Kc9MrqZSoGEacrq5KMgr2fjdcxR0+9yI8+7wXV09cR\nAfbZSlvlIZNzFD+4+gZDAWqv4J3qubUuwpACSCN5JjITkgkdoZNzKb1OmRXb\nFCnokiYkQUHzpHGWYojipCBj75y4jd/NkPvTcgeWxvsFb1WPBFsvhobT6az5\n+8Va8cvH9mtiB+0U08NcK2xRhceHZrHzV90ii9Iix6ak9EuMft0Nj64IsZt/\nZRU+oIArKjvVFjVDY8pYQWq5EGQOHm+RaaOA8vCUGSzFkpOyko0re1naYeFm\nnumyRvM9U4dW7/aQZK6UV7PBg9aR3GuZP56MzeZ2ZtoK5R+orxmEXqOC2TBj\nuzkIXYcot6p/OZm+NRpFRWrDbjHmtLaR/mWRQy4F5+J1t0L0Nah+lR5gyL2h\ngKKNfgM5zftRod3QrYCQ/KKiLpeVlq2KyyhI87ErNfTKbleuHPcpIgSiuCLn\nIY8omuQ7/D6v8VHYZBJw9QTx/goHgoJbgRmMppvfQQu19SsGK5XGGsRQa4xs\nmXN8VF7lLDk4TjxMSluYp0JiI6FLsm612ERNcCaTbUtxwSVlsTXLDHUhC2q3\njNyr0zIThpQon0Cf7APZOEE3c78VMHa4TwkGcIWKK9gWVp9vgR6wRUSiVRxp\nd72a\r\n=wxoI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022011175644","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022011175644"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022011175644"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022011175644_1641923834553_0.41428243192717207","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022011182024":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022011182024","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"53de3994d993292f955c8fafca4cc6a97fc5f0e3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022011182024.tgz","fileCount":70,"integrity":"sha512-3OIm1N7lj5WWjtPv46mqiN4lHri13gowbKC67H/Iwlwm/u5vCiYZ8+GgdieZj92n7OnIZVxkwyL/xT8RHjm6aQ==","signatures":[{"sig":"MEQCIGxXgp+8pl4F/YO9J4kfSm6/3mvzzlZEl1OslHQO057jAiAcnQwiXc4wAXpE8cjgZvh5LIeO1PBb8IANJV3kboz1Gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cqKCRA9TVsSAnZWagAAJ5cP/0B0/BDseGVbtUOIxkVC\n5GOR2LstveIrKaSXOJoF9f7O9JzQESHoyom1j+3pbazFr8yW+xQrzLOvuXbX\nOSL30gCB59+mbiPfX1Y2hDdwbCWV2+Hu9qUxILqriXAPy6uNG5M8Cx3rUqFs\nUZgE8YzX9LEtr3n/juOJOWNtPRhZBEP9nZv60MLFy2n6Xtg2b5NCSXpnIEYP\n4y4xAZSU0xp9BM8SqeFusrSY+EnFJO/4ZGmO8UYZHGuwDNUrnq3dhblEqJFt\nYVYbJp5rk4j63umrzyMw+rt8fxUsGOax0CKtAevouOsSmx6A8nMXLZAmIW3F\nqtFGokVoZigQS1Kex2QPGpJ1rfkWlcrOWQrCpatcobuDL639Oduxq5mlpSkp\nVx6IV/p0B8lVuz/OyT0eVKI21KrhuTwKvPHin+Sgcbdv3eFPJnLTrhbFU9Dw\njQ4m8PcNc5VUq+rEjBDcYbOHDW7xurMJlzlGOMSiKHF/i7RWqOzNO4IRLdhW\nQA/Nk6XKd2HxZuRpNfabNT8AfttbZgPBzzio8TSfZmyzrwfF6EVDNBDMRpVX\n+0WRwAw94slc4p2mOxhZ3zcIuJpc19RMj3/RQI8Tan5GikXb6kqib6tx6m/F\nviiAvYlvRp9bLQqavtuZpn/rdpPir+Ocy88Tgok29lMwCDNICLBAnrsWWVOb\niuen\r\n=qFqo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022011182024","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022011182024"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022011182024"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022011182024_1641925257892_0.962529526361074","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013185957":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022013185957","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3feceab0a3c757c35258ae3abceb1d97dbce1ce5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022013185957.tgz","fileCount":70,"integrity":"sha512-h6/9QNrfN0qZPIK2f7rRN1zb0yx91nKu+YtTY/fe3821UwI/12yz01u1bW1oR3g8KkHTpfuWt4rWtLSqydysGA==","signatures":[{"sig":"MEYCIQC1OY4u+UE6oqCno/N0uZ4GnpC+pQWXz9zf6ZB+OQlRVwIhAOeROv5dYWIWDi0AtlO3lQ339KzVRlGQlsOK7SPITRAh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HbKCRA9TVsSAnZWagAAiOYQAJ0DEGvNNfOa7BFvopnJ\n6O8wuYe/in9CCcOEoNT54PdrqgBAszFtWqlTYhWwsUUOGL6uhMa69JXoaSrN\naifwlWurq2CPZU5PoK2jWOCtXqy8UVIFQsiDtvJag85E1EW6a1IrUDCFVHWw\nvT+vyt9CzlaOGtuyHUeQnsJRwZOY5YGotTE/p8o8y9MV/XAPWIdfqEjUmzOC\n7L9vqSPmcsQymLDv2Kmk5oAPiz5zxQsXXF2+UExttFg5VK0yDk+0bKpREi7+\nZyOBmoKCxubmD7RglXbpYgt8AE12fqFyh1zHp6j1NsG1QEpGfAwjb4RQMucW\ndVxS/2U818uKvNoCxYmPHe7vxs3FCoMfEuvMfi0vdE6s40B5GeLtBo+WuILJ\n1QFOrP/TTGvfiH8ROBYEVNa4y1YWiQdcIHofWVrJerNfeAVx+cPAxVmVgj3K\nDgj7JjlDCaagfXIr7+TRqWf5HHXxGJHYeE9dBDCDfBTQzqtBF6vpuak5XCFp\nWuaHLmzfht7qkxnYXA/NUdp8ci/whhaiEV10n1KNFVX7gbYrD4pUU3+QyfIF\n8KX1vJciBkKpPCmaVW159uYtxtvIUYguwvAAxL836y9dSPXZzLmh6zOlURto\nVi7XekNBD+ZEOTEE1Z9P+Ab0Aox4Cpc0fyNJFRW4S0QYR/uD9CeJStdgGo6N\nwXM6\r\n=hqik\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022013185957","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022013185957"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022013185957"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022013185957_1642100426524_0.08028444372547128","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201319022":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202201319022","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"83f8551a38f5635d4cd093827aa1df61301d20d0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202201319022.tgz","fileCount":70,"integrity":"sha512-IYAqVZBARA0JgVcWFEIJ9AxOMRWreNhclL6rcBe2rNra7DeaqsoG1j6K5sXgLt3qhyvZaJaX97Axe7YH8ONctA==","signatures":[{"sig":"MEYCIQD3cEQoVqX8ckKt0NexYLWxssTx2nBfpjwaoBCMHvqQHwIhAIt8cI9SKaAg5nk1qisce24fNijr6xI11lIoF2A3J0cW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HblCRA9TVsSAnZWagAAWhIP/A1U2i2fFQle5QT/SfJx\n1D6e3/COw18GB/VVwQExMq7W8b0VIdHZi6znAd9ReE2oHa40epL4UEJnSzHb\nIZPf4hw2DShtf3XlKGA2R1zjCfHyC1Vgh4vCWw+fbuZaKg4yrS+eZ/Yp9ZVX\nGmIoSSDuM0cUBbV9oxjU9li3xoYr7AivDtvfqWoRyqN3EmkXT5c6MhEXRT2I\nqryEtz+MWOekH/oadjT5JB6hghK1jj7I/17mLICvVXVwx/Br0Vnx14egY0Cr\nd47oqvb2pRniX4CYhPigkZsKnbZdKG2gBdEFZe/71od+WGA/u+5BVemBNQl5\nFBRkhWqw1RwM3kSOS0pI+D9yRs7PejUvnyuzBxOvgbdinwD7rgjthsZFd6/6\nQVrc5Fo82mpTcru5xmkCPDSnbSoGONFHddGJtQE7qKHxDJ8r7FspdvJpOuWf\n7/IrxsFBVnNrlZsS8QeCGyIwy+xKbSJ3blL3dSviUNcpJlN7RRixFKs3LYMl\nFof7fsZdpvp13yMz62L5gqAaJzpIq6lLrL2tmHfXxhIlX3ceLRo/yboM8uyF\nlcFkwppSpMkipFMo1ZsRNKP2PZ13NJ8BaOgzCrvSQPPU5bFrFwFK8VKi/MVT\noKLnLmHlrDsjPdTFSa6fT+eRvwva5LVs3yge0eNF9wjGLqEK+t8qXbD5HAPA\nytTm\r\n=ejRg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202201319022","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202201319022"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202201319022"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202201319022_1642100452853_0.7726449454604138","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201319130":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202201319130","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2fb8235b58f2711891643705e1da3eb5cf0b5421","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202201319130.tgz","fileCount":70,"integrity":"sha512-29KHHNiwqIdYaj9G0Lq/G2o8uHwI+PUswznP+LG4mGjXTeJzpMkfwijOe0q6n0uXlpdykgQMNDnreBU/e/0j6Q==","signatures":[{"sig":"MEYCIQDSLQ8DzE/dd4COJOsvPW43iY9Ygz+OOWWMWbRxoeSE7QIhAICr2k8K9B+ursBFp2pchwmWD4RID2ZPPE5fna/cYqya","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HcnCRA9TVsSAnZWagAA1JUQAJd6KVMBqJTz4pNpfYB0\nBG93UrRBY8LE+MvyXM1h1y+k96hXFWlmMzNLovt+T736gX5+vxw+p6dsbL2H\nnEwSozZRaYMmQWCsp9CmgRlIefuWoEu3hgDfZ1zyFVvFJptrA4o3TRFSlbUY\nF1ZRWh2CPDaGXu0LYRTlB7P5oVTlMCHh1lMpkOCG6WC7/Rg/ZF7djvni263Q\ny4NKs41zbjwI4GwJb7FC1XCpo7f6zzRO+yHy4O6/HivPQDZH09QcA7t3xvbb\nX5CCtMbz3lrGw4QbrJpK0Dz6rZud5ArL2l2FgwPLVc3S8cUpAssA7bEU+u5M\njItpulZIrT3+8gv3/A8QIG04+JImPei+Qvqtu65T1e5W5tmGyYORMOxzQbYn\npa8uMPF5YX17NNpl0Pi36z5uTX5d7U5PsFZCfUV4k5pV7QtabxGG7JTZ4IJ2\n1RxwJUtIUvyYnV16dvMwP62NJ7BulkBkzzo5AsHER17ABZfWYSeYuakUWbph\nG474dFjLBdFeYDZawROviKZpaPd5HKBk5glVok/JJbHnbzGPEB1vRO6WCjJa\ntKoioCqscUC+x621NRRJzthTnniCKmtmc6c6EQb1YCZGHF4KOF4iI2wAAFe7\n97mmj2rhQbQZzYMwGYmYUyl5mSfz5C57YeHfBhf2P6BQPi/wbN0wyIjcoeRd\n1vPW\r\n=c5xL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201319130","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201319130"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201319130"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202201319130_1642100519839_0.9128494806734293","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201319211":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202201319211","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"afd650b2ddbf45c9b32603bc781a9863f621a39c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202201319211.tgz","fileCount":70,"integrity":"sha512-8poT0LU1E14Jbf6TcuytpfeYZW07JlH1h0jTp4+7Wh3cB55xe9xH7s12/XnkLYcwt8vQwTTH8hUGU9RXUE+6Qg==","signatures":[{"sig":"MEQCIATXfng9XPgECvWkd+ZFQ3ylZS5hpFPAXei5tYvmqjHGAiBzwmMXt2dmsW0ZG75KhnfzET+HTpDibF9waM7qdlpSog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HdRCRA9TVsSAnZWagAAKaAP/jeUYvH1W6BWnuseIBCl\n1JnutwVcKud9FM19UuEsYqPUwhEed+deakKuJDygy/3DWQ7Wum8l6oOqJOnd\nTtQO6CDFj0JrU8emIJeJoP5YurNoxCW4XsuC+d4btLdFWnsOTuSd9c26ALQ1\nlv8XCSPle9FI7mcEoKruO2Vx/3DRLZ0RKziKlnE1tA8dFG86/4Uc/UYuu1Ss\n1KV+BxR6HIRGkwXeFIrJvvaXQoYmqn6f/ok0g5TVzxTcA0jtw2Tp7WCT6u4m\nOk7liXdoOSA3WGrcLHODqdusJVtFAzyI/V7CR8izqxmNsELu7Zzivi0fQJoC\n+Uv+PH3+u0WQDIdVvNNTbn8Dx5iwuQSlBfWCcoH7zp9PWdZUstWZwSP8TQee\n6UTDHVGpF1wHQdFTv+nLI3qh81cyngoKG8D6gnmYL3OuOmbgoc1pDutAoXFA\nGqdgwv6TrzgDUbVAiR/KvRlj9GxIiPmmtqzjgbmULzS1VcqAbVOcDG2d24vn\nW410iHd0u0JyCe9Vv/BevXdwNF85dNb30/E0z4Aii2WCL18NrwGauHmSoyIX\nK5cwGJtXF8TKHppGMvYexhWBZ2FUpE06Sm+wllvCAx+csXeDamZul6F3IXs7\nZiF3bP3hF3OwSrJuOJYLPixCElu/6qZX2bz1DbwgjqzY5x5ViZeWSZ4WsCx7\nlA9K\r\n=uigW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202201319211","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202201319211"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202201319211"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202201319211_1642100561602_0.5458473479926593","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191557":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022013191557","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4b2b259c572f6d87c9a9f48b334774e257a16877","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022013191557.tgz","fileCount":70,"integrity":"sha512-P2Db/jHwLxH3BawudVCmxvRPwk1aMih5CBIGt08ynOJ19zXq9IbA1kL0kq06jr4gQM2Xlj7f9qTCgxfvVp/WhQ==","signatures":[{"sig":"MEUCIC+1G8QmiRTyMbPBFqxIDqJV5Q7tQaNbMmKjtrORGFewAiEAwxTxTLTMY5ekNivvrNQ2mq/cFGlYuni/KcvJO5mNKrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HqICRA9TVsSAnZWagAAk5gP/0bpJJQxYooJ69xvd0tM\nRD45qz8+6hb210aSPCtbWHKdutQ5sjuBi5MUdrlKRDiU6Oh7Nl6/sxnHSBdy\nurBO1QhyudQ8q9lOYZumVtqJIsIX3qU3V2LNlkm06QnR4GYScTvq2O6mRtbI\n8dry1XtHxXaE2CeIrqn8XIfqZaqvcoFb6TBkTIvEkPSWJFioSxp0SGdwLa0r\ndHl53uS99/kdVGXrY1b9a6zRPpx2Bcn7HxaGcxvaHavTIMQAFU2UVit9c8Lv\nyblrwudewO4gonXFO3f2yMEJ6/0tE9r/MuIZ6N49Ejg0gud+UtHZ2pO+IP5B\nbHcKnljcnorm9sSVgYkbIwxaYOxnwMKYOdX2poRmuQWdgsoewzIO/4RVxqEX\nm3puNUPveQqjGskf6jgkbQsWOmZ04DKpFhYwE0aN47AuPa0qgUCAsxByYMZW\n8Qk8vwOAVeioiAENDDzD+3DasOg0Y5NPX8JHRqbXNuGF/JEZIlYNcojRazJT\nYNdaIQYQQs1CgyIB0alCwG3Ggm7b8q439GC2wCUY7aWGRFOut5Xj33ggOAaJ\nFAFM35q+3K64bXbS3y/KPLZt00RtMO+iMx8iAS64OMsRAK+3Y0zS4tphxut+\n3HP+rI9YXoDry17DpMSZbqREVCiKSVt1G+/Jgtxw+vu3Fg61pVnpGQq107F8\nzuME\r\n=Q2Xo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013191557","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013191557"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013191557"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022013191557_1642101384497_0.7029437619875236","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191627":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022013191627","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3dae450ba043efc31e89d06dfa3960c90c96f130","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022013191627.tgz","fileCount":70,"integrity":"sha512-Pfk3eAe3HsWVXVQnHQWyPU44H9NSPGawM9T5J6YKvad+FrIXJdQ8/aoZDEMRkSfHB8LtOkDGtdvijOMaruAyBQ==","signatures":[{"sig":"MEQCIE1QIpZ4htZ7ZeyzO65Yay2miEhZycojlKLmcDPoiJlRAiBj6DXpokn2QB+zckJ4X7tqEvdjhl84fB4aaEMZWZ5lGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HqlCRA9TVsSAnZWagAATIQP/3V4/8BbOH88VeXiQ7rZ\nVvtmfg+8Z2S0+Y+9JI1dTTspPai5fI9D+5zTLIyyfBUAM/PnmAEW9KAwqvIv\n7QMi+ZnYdwgzI371oFF5MV8+v/ISVvgqzMG21CjBDkHUe+JeAj2340poAnhQ\ntIo2Fa0yypJLDjgpeu0ML0uoosTsuVzmmytVaPaNc+7goRUh5cfsQS7eUKY3\nAzHC7OpVCb0TTTaF0Fy2YUxJujHzagAvlZnCemp6AG4eHpxwN/hAZ9NmSFtU\n/1913UzleSZXIj61tVCSNfsj4LuCL9PR9CYKi38Kb9EdfR8ypLg4rLHViKCf\nWd4a/nzwrq7WNsKTh6nV/Q8Ex57PU6QGX3S8JKQr/IjAKEKqRtzYqX11Fv2l\nmNJlbACVL7TU74jYHWs79XKgK6mwmkNl2ZpdsE9wa2hOhHJT2R0A9NPA6jNj\nDHOj1r9FyjbZYFgrCYZz5eotCTE1IFOMhOeKYa2I0e1MI5NS/fGu+LtzJVbx\nOKsb6Wt0M8Px2RrIu6kWdBDJGJu+cqaMCmGtIdBFbuSD3HUpn4I19D7Je3Fe\nRmrHY/PI4wrw4SlbI7Zq9CK8dcqklIl4GJN+wLgFS64n/l3FGyttsvK72O9W\nGPXjEEPpEHTkFZLdD/9IiMBPgKi2bPjmFXavWPtAx8nnA7k1H7dlgD7aQ53W\nxKC6\r\n=rU0N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013191627","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013191627"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013191627"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022013191627_1642101413670_0.978613986511935","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191632":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022013191632","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"80e12a95ec7ad7d9662b3c8b394ee08bc113d5d8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022013191632.tgz","fileCount":70,"integrity":"sha512-TmjatImFZOxb7leO3A+we2vXYJCDSCNXlapocUetL8u7piGQFPQnq4nJfX5tuk43mRET6BhNaKv+UZSQYla3ww==","signatures":[{"sig":"MEUCID9oQ99O3nk9KG1iPnPYfesVuMOW+VSlK/M4eMs/ATyaAiEAkV0igKK1O7Ml9IiNdM7FWJqyvGIr76GPcuFRCZoPKto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HquCRA9TVsSAnZWagAA/VgP/1aUYt/cdITlJj8a2KA8\nluJnXg6YpYNB0tBd6eCgFN68kAAx6FiKHtukLjef3NN8b3yImCHq4W/uQcG6\nicC+ATGYuiTTtl0nNwuFNl/UCmYBP2TAJGObpG7pDlw6e2nmjdBI6ZS7k4ZO\nTDOKouvO3VHu+HiloiPKwLs4Aum/O1NfbKZOrEGk0pTefU2HV9KuybJ6c4DY\n+ZqQyBX6ezWjvZ5/fdxd+blBpcBRefHKUUJ8bUdI5PwkJ6XW334iUAAjQDIq\ntlfFo3dxMfXcJrUAyICFs20erKA5sfMPUblNG04+qeZNabqVkfbq2sG1sMrl\nnEyftBGW+Yt2Fbz2CJCojjJLxKGK/3qbORBJgaggq/Ybtp3etlBxlNcUxHY4\nSBumSPEDugg4nKRxL7vdAwx5+LrqGy/Fuk8bA2JL05GLp9AKtFE+eWr3VTq5\nFy0sp8Yyl4NSXj1SRZSjPJF5I62TGy3ZbdFKg5VfjDiyn6WNPxSO1Ykh+LiQ\n0WcgcD7/+9jUhDWsrMW7MMO941frnsts+3TmCxU73cNT1Wxrg8gTemYpLwac\nd/RYfqKGkfLhEClXivMut/aq3tdTghLGEXonajnXvnFCD5zOuyXewVjBzV7y\npX7SqkIMMX2zAL4My8T+g51CyL4a5G3W8tLJGNH0LFLC/w48UIdQ1L+Cm9E7\n9bYC\r\n=396D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013191632","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013191632"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013191632"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022013191632_1642101422538_0.023347700835163465","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191659":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022013191659","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4417fc39b9df1caaeddd897a994970c3545c6cc1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022013191659.tgz","fileCount":70,"integrity":"sha512-xTpwIWvp5+Ko1tZ8GE+jYlCCcLhFDJuxqFjLaDrAy+ebfR1FLZu8ioqvUG4Zx8NAVTCnk2Ai8i7KCmkNGkvkuA==","signatures":[{"sig":"MEYCIQCWxDHtUeZ7eiB+9CofcUZE+d4kvGej6hIKyql2uDAfyAIhAMurFlmHH0Mp8GSsmf8PJo1x44eFBiySR1pu6c/PBjpw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HrKCRA9TVsSAnZWagAA/psP/2mj0Hw+FmeQiGYKSQ6w\ntwIWUkCAaKDzgmq4+mjHD12fw38evM2nAKQTIF/wBdGLnnR+2oQBBw9NTGM/\niypfy90Jq0tr4rmUt4eWIVYSJykwWxixmKJnO0ak7Q93Pa4Xi3MNRqEM8M+M\nlyV1AfRFLuDFAwKnbax2Y3x5qijdlRpKid1sDa+siHBGRWZrkVPvS7BRgK1o\nrYle99aIM93neVTAixFHiMApV/3iLKuhWsAZHxZ2r1oVZA0/HbthaSyRRjyN\ndgIM+2A0Fcm6lmIMbyVob2+2LE5rfK8VjT82EFyJkoVEpDdY7ogBh8MjrmWk\n83Y4grsZesBywhay2pYHZjfTRJmxBqwlnoi3Lk4LrdYxAYqd67+b9ZWBrELV\nFkascnmJbOhip79fUfT1mR5dxF6YJy1vxanj7+7JliCTTNFebZSfHv7nhjs9\nE9pCY/izPosHy/h+x+9zzwD6nEEH3kBwOf66maKmoZ7s1a4CTP2jIDtlYjC2\nBnLyKB7uQMVbL8uQM5s8vrzR0USb/8B3tcbK4CC6MPJCsQZq+nNJ1OcyYHsc\nLRqKfSM3gL0C0EUTfTj2VdLxJjXEQC7e/a8jfXA8pdr97jOt7BAbScXa9GJQ\nEvW2k5HCJtb/ONN32Pzu2wPcQjWHiaHgeWzrNXQxfiql9bM6vkFSr3Htj1pO\nHJFV\r\n=eKL4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013191659","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013191659"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013191659"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022013191659_1642101449941_0.14623866245491457","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013192043":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022013192043","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9f516fb14f5b5b407769d943cd696c15e5f5ceb1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022013192043.tgz","fileCount":70,"integrity":"sha512-kivOua+JfcCe3YAobDbwp/ogr/o/8lsHrJ9o3y48AEcWIFWc3O4b4zbJnM4Vn7YSkTWTT466TNCZEGUsK7cBSg==","signatures":[{"sig":"MEUCIHy7wHbYkqC6jsr/c6h9sI3xgt3JU7rHaun9egH2tdCMAiEAoF363puPhKllC967FO4bDgXG61TmvixrspIiHI+y3X4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HuzCRA9TVsSAnZWagAAnr0QAJF3MuzXjDihL4GSnfoL\nVgnJ5qkpuS3BFubvYXD0JlhXYgJfgoi2ec7Fs9lPQg2aFyotSGu8LMDVZROD\no1lp8ZWhlhdBqTQC6afKVA3ZNS2hye5lDDcTsb7EiJgBCvslBYT9bWKG7XFD\nSzORHC3Mx1E7gC1rH3SGyI7fT8WrUbqdgqfCktdiJylVnyQkxcXOw+taJCrX\nJcrmiWkaOSQrDQkUwyxiaaz8q4ypZPUc8POVpl/r3YaXHbkbShajGuBQLPwE\nYqlXREoVtFHvjY3uIvcaa1OxWYJV9Wdfij7odawV2UqtzAWBxJApyivR9BrI\n87vKdXb2x2K55mqUVL1PSrocWyaBJjrsleRcLgWhWtI01bCQxUnyjjJxul4V\nQCVNqmvhzOTha3BwL1vaw7mdVeQOMcHXyjvJLajdQx8SAvmPtpKunMrNati8\n2t1sLByrcPbxvXLvSoUIJqgNrHXFG5pS5+wBq/Exas7F6TvmIsCRwngKXEMz\noUT6sRhItdl8HAav11Yo25gu3YCAr+VVcKSw2x54V6xVOT3xVGBUo9bB5uxK\nj8zKn9VzFBlPDNzgHtPaoyB87znnFyDSY9vxRGm25gpOcOlIR3oDFfxPSjOP\nayiNSEII/vGjPsks2SkT0BjkG7kvcrdnZfrMLFV7Ynz3tSUwepehKOWkczag\nKf0T\r\n=MgAK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022013192043","@chakra-ui/utils":"0.0.0-pr-2022013192043","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022013192043"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022013192043"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022013192043_1642101682909_0.19647056316293798","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013193154":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022013193154","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"690bb1f7fa08bcb30c1a69f2e172b32818b75dac","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022013193154.tgz","fileCount":70,"integrity":"sha512-nNBCtVoWqDuIoEyUJwWidrv4hs4ztaZCuOAngWliFwo9ltMvA7oU+/6HSv/qdpgYcRFX3aKIbOKqm/3gyokn5w==","signatures":[{"sig":"MEUCIHt7oKLas75vKQfSRwZqGUVt0A5CmpZok01GoeT255gIAiEAl47u3PjyBTVsbycYQYvE4CEGyrNgEqr3oLqNfKkaBnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4H5JCRA9TVsSAnZWagAAqgsQAJTOsvn57rO+ChfziUw2\n0pcq3c7loco9bvyNci4MjU2bw0D5oiquePY8WH6DM741rZpJ1SVI4YcLIlvO\njAaqkfYsvtKcZyT3a6m/DurWssQDpad/Cloo42YNfI5SOtiFnk0o9GRhCcen\nT+7iICYmJ8mYcTAKMVjZWf/ZKbOivlHJdn7mCFFWbzPH6ru/cpeF4Aifouv4\n3Syx//5lzZ1gr6pOg/i/hCvXwm0D7/jsE49JiMQI0T0SnDISCdZWjL/1JVbg\nP3p4bofEFvYVXKppEUF2CfOD/1L/OqGTB6NBrGTPp6eTSITMrduOT3Yr9aOF\nHX0I+oWJQnsQ0CF8sVtN/GvDAVF46XYpvYSRF+MEhfnTZc0jNHgxtyKm3Kcz\nQmFfMf9XVS1o4ed8h15qnuS2omtQD6JFSJP7dQX/0zxwiK7Qj8R00DKsPFJL\nMuBXKBdlIenz+tJxWkvGsOUqDlz80KMSzAh9XWt+0i57OeYdJd5bA3yGkFjq\nnx6lm9277fysb1a5be8tdJ2G6fTxP/mJsh9Uhu59T8NHtMttCl9ls8QD2n9n\nMkEfU2jJ0ujMx3cStuR9fv/LRob9BIMUkDFATn4B+qiwHdJtRmYOCRQ0c+de\n+lOnY9ap7re8MKa+Nu2X3O8P5EXBQnKvWp2BYak5kRx/vWXa+WcChJIjvNbu\nP3Lz\r\n=jFOK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022013193154","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022013193154"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022013193154"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022013193154_1642102344919_0.7062048085435708","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013193526":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022013193526","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f70f3a9277d54d723f223a82c61a68030ec977ed","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022013193526.tgz","fileCount":70,"integrity":"sha512-sGMLSb81LxB7wTzxBhnD64m0g5C0z8/mZzM/p+3kBReYbyfPfvquKnQ1gzATGjrg0qr2W2HtIArIcvekUA38TQ==","signatures":[{"sig":"MEYCIQDovWwY2x8Pk/PHPkZosr+7p2K38FQY3Sp87qj6P+uGEAIhAOpYKGCdETiRi94YHA/RBxezLxMUQU3vZ4jKst1jbxjS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4H8fCRA9TVsSAnZWagAAB3AP/3qONukbl1d3KsWfe+Oi\n2d8sw6DEOFleh5SS8yIAB/uPayYbpEm3nfV2zE4JbdyvvLVPqv7btkS8f8yI\n8cyFIq5IQKz8VQ3ouArYxWvNOrZkP6St1RKaH48NsklYZOCUmeZbREn10qBc\nvK7gYA4ZWQZWQuiN8iD+Vlq+KxeR467Ao7PvF1ejHjJ71nsqz76cIOHuqoDl\nlVvHZupDHaWswNF0mGebrcwJUmKXlPFsBCbc/HSj2JRSDpfw2mmHDRBdt4HH\nP0W3AMLJMVXAUtV2aPuCLebl2adtY64a3W5vGmDHDchMP61L3VpPysORL90u\nsrWAA6wfEcCbQ7NmEmZwKIsQgspbL0dVh5I8GpoOZjDlbq+1yDxkgEF2oHRM\nIPEfezs4Unq8QpAwB3RwPbl8rwSrdgCscQyK+ZBBrS0Npgf05z6CKheUYArN\ny1wGFnfVFTtWvc5g0Wn6xew+unm1rlXndSWXpRWErjICnvSdBnWoqhuMOOne\nHUny9hHrpu2aP4yS+xyt1g+ew3iDoEW0vMZwBB7afqg9Wzk7YtHXZx6ay3yq\nJEL9QEmgnakMpt2y54muWvTh68QhiRqedbnexttkqPhxLO3qjFyZJLQ8s80g\n3jLKeg5t4KKU572Bs82aOWxPxG3CCGayKjpxrIYZwD0LC342mxgCYPGyJG7d\nL6MR\r\n=0+BC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022013193526","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022013193526"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022013193526"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022013193526_1642102559265_0.29674335524813467","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022014102532":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022014102532","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"16720a13072984d698c45ba1b0a367f1089bbcf1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022014102532.tgz","fileCount":70,"integrity":"sha512-oUnfSHsHZpBR68sU8RuEGtV1BJTs7AXQ9shBjeVZ+JpJPdYyHgyVdKxzE+x3OInnnGeDRGI8HZQTnVMipKKFpA==","signatures":[{"sig":"MEUCIFesmFJNQt5s/4UQZfwWiO7mWy3eQrPy7b2R8n5vpyv2AiEA+tLfgA0zBsF4uk/E/KaUJ5q+Yonrz/Tw1siNCnQjj+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4U+7CRA9TVsSAnZWagAAcX4P/0QTKR+6DzD1JOAwRj5E\nBkhc88B6NSnDtno4lk2AK48vB0LwhZc/yOkwYMJ4n4G+cjs2opSBRXD2ZIhf\nIqpns5alIZVlXqctsFEPdr9B7W5q+/0MBLGNVCzzZNl589uo1Qe0PK6wpGR7\nVr9g/0FEQ1ncXajFC8T0O/adgjXZV0lu/qiJyl8ccjwfeoRBOk6J+kQ4kX9h\n036c2CnfJuom2vMg57R/g6nwr7MjY7M/pgqWPZ+Lu1R0Bnko/8RgfOeOgJUe\npKuk6PsqqE75/d9Iqmeft7VAyYECkdKZsljcN51Hr6P8l/n+150KS0twTycf\nCXpTeAr+GGt5f6+j7OqvnI+nN0GFjJctJK22mucyS/ejEm7mBa6Q/ArQCIfn\nqWnQHB2Cdb4evL0GoPyVLdMSTXslq4y+rKkbT4ffWjOpIvpRjlxpAFrvKkU8\nV8PWNBrQlfcRT1A4geqv0EeGGkchQ+15HBDTOcST3OUm4O7NrYidaea7Q+Ne\nJZoKHXVccIbVyvuBXtkeFgIfAKzjkjbvC7EpwfTbl3kAkp5vWojmqh9o4CQC\nSvVbcYgXNE/L6uA6PYVwkaFWL5RzlHlNGHfHUkjC1eC5MOJ3ESCpobZVuHmn\nipWBsIlAz7Xy6cyHg2u47ZlHEO4Plwv4V7cXRBNVh+xCK/ACPCoj16BFhKRi\nyDe5\r\n=d5rt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022014102532","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022014102532"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022014102532"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022014102532_1642155963416_0.4870888397959616","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201418849":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202201418849","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d1785b6aa62585b432d71478a321c601dcb97904","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202201418849.tgz","fileCount":70,"integrity":"sha512-OOAiCMIEt+Dzcm+sYGTs7EuRSm2ow71K4UFJYouRzKLXpTNNZfp/EAKkbxug8mro68LPrWxCRMsWnb0ZxEosfQ==","signatures":[{"sig":"MEQCICKkEZfJLLxXs1aGpt4RoaVvaQEwHGqQdnBwLz0iI9ukAiBwXGmkublnV7WzI+dGHsfyUMYFNYV6iYN5LRgi8beWyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4bxSCRA9TVsSAnZWagAAyH0P/2ISteP5/sVDpTA06tL+\n0gYGiltAwyYnpw++rHLpk/5fEXGNavETFWKXaJEZvsPEOgvsRkME4uzKFPc4\nYa7Sxi1h7zO+Kfef9CrJyoDQ4RJZJr1HVLwOY4ZvIEHGDMnCtKZQ1M15xnV9\nzRjHT6lD2hu0jDjdGgj1pxkov69Dlj6JzH7dRW0gXieI2HPR3G7WB1XwmL6U\n8X4aZsZ9CyfFCdcTILNihzd4ncgN4rwsGcNvg3UybhwENOFs7FlSYoZdpxxm\nqf7vfssvvSuPQSPtJn50E9zV8oOWIlwIU7h96B4Yz6kPymXQELS6QlLr3eJI\nwXIEf5B9tsJhfejegzboRoffPey17XD5piYWWdERo0B4WeB52Gymry5tXNwm\nnjA3WE9bZLJ5soq45zN2I8oAkcPyzZ4OBY6aZvTlFBc1dMl3bp16vtVaoD+5\nLxtV8icC+ilp8Fbae/Oewz7kJEE1hgKW4eaiadUoP4PvIgYIT4ukw04KiZlG\nk5m79yuvvK9hS1AZysOMbZYhoHCR27oVlZx7xGA9DAVrCjRLnjPUYIbnLeko\nARdFBGvsgHGJXPlzqKukFI/X1UNiEY5PnDjBAU3fjgXXB6rhrqhbabn5XErB\nR9kpJ9hZ2vakUzDcBdxLD4l4YQHKosdykFV4b1fPvgxI/UsSirWFQZ7+XYLg\ndfJY\r\n=EE1+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202201418849","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202201418849"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202201418849"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202201418849_1642183762636_0.5807584162665054","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201418280":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202201418280","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0db3780e1d98a655a8fd30291955acc0d2583363","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202201418280.tgz","fileCount":70,"integrity":"sha512-gAUKN4xESV9WA6kBd50zgOJQhu68+zq9ccUXI9aowdK85jU1Rp6qSJlBsGA4xGMMg0NVmp6xJ636xBOA+UjcfQ==","signatures":[{"sig":"MEUCIBAQP3ucMdoXldd0BMqregkxEMSO4aVcA730mrrYdm7tAiEAli24ZnF0mY8gLlxNX6ohpfRx3/rF3BcqmzQ5QyOa8Ic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cDXCRA9TVsSAnZWagAAVfcP/2a+4r82d/i4JfwNp3uk\nFolEA4VM7aU/RReJactQdn3sZkJFPDoC2uVoX3/IDC7JjuQCVjaX5llvEN6T\nslSXlBg5QlC/pG//PHSabXIQ55JQwtRTnfmvqMPaUmiX/JTKQ3XgoQXDG7tE\n3tL/gxCaWTMHGZtVJibYBqG1KlnGt/QmPscfVLJEBWGppPF80bHGzsowKp2Y\nL8H5NvLKVJxfwt26jH70JmweK+OFO22n4eiTpDvGT/aIMVUEDD+D5c0GM21d\n27gtp2kCHmbHrkWwDzc6A6NashVctvkkFtvsXtUSwiSOCJEGzbAr5FliLnRY\narXbnY9TSJqdPmD/jdyw/+LyPyT6KT7xRMjJRjcBjpA8inP9BqdIQOOwsELX\nin7c4Z4d6gPpbfNESSM4ULmWh5PRf79N8EfGMjBgo6U/KtlcjVEd4GLgIoKM\nC5D5vT/vStD8n/V/gEE6Iw8yyt5kpmu6hPYWYpQREEW2xXr15sV+qAAjb6sz\nuSrrO0MyrMBdfeyx3E2v01PVXU9UGloT4CSI7DaK77gldeK8P27bykIozppC\nNg0l6P9y2VbclpCMQlcKF5j4VhkRK21FiwWZH7ZsNT2golcOanimLLymbJ0i\nC26KOuTkBgk8RK8oyGABY05Vv1meYbhhYCuv33gMeJy8KJ8J2ozJxrkkFlzr\nGOTz\r\n=mPH0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202201418280","@chakra-ui/utils":"0.0.0-pr-202201418280","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202201418280"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202201418280"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202201418280_1642184919552_0.24550028310952232","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022014183133":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022014183133","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e38b99d7afa1175b4d0d3bab4f094d5a27d3f8f3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022014183133.tgz","fileCount":70,"integrity":"sha512-9RQ8bTlSNJYDOpsswYY2RID/VnZLBwunUp6RBnKxoPIqfSCgs97ABYYwTjsf2KNraLs6PTNXMJeVORWGiNcEog==","signatures":[{"sig":"MEYCIQCcUMFDMFdyld1GxgkbOPIC8n2ldcpNbFnmKJUMA8fZLAIhAIRHPs5dLpsB6CqZR7p9yaH1yDiNd4fbNPnJmapds4tA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cGtCRA9TVsSAnZWagAAtAAP/2AvuEhb5DNeoqTF49bw\nxC961lL5/hxqkvg66u+tIWcLcPGaNZOVyTKdylUiCPvQsS3PC+CQbeBkmvLX\nBwyIxUL0He9fTq19N/dLpu77n0pKXA1EM5wpB+aZvg0yRRFH9POpdjgA42vv\nv048mAQQryntIJS+Y32Isry9DzfDn2Oi/Z9cL1cHQzWKPcbGNC8mQ4EZj03L\nrgsxPkgYHa9J1llDBTqAzdbsSB2WHJA9q4kgMJfvuL0OyhoKfSNKYv2kWqKF\nCI2zdk6GN6O9HJ4OL7MkTqbNSxTc8/UGRVrfMrwdwv3wWV6eBgg0Ye9hYC/m\nC540IJFmtqNfYJ3bYofyVGHZPLBROYZ9GtiiLTFi1Qa4SEXKZYcvCgT7+3UU\nr8VThlZcg97z3zGnRrNnvPgPQ2TIHjCFDGyvMQSdgDeUglZqFRi7QXN5MueN\nr+Q+fmysPQ2SHzfemP/jT1o1MIOwrq/n1GYdrCd+y9KRXMAieFjYVRjw+lJG\nP7WG300ihCoLptBIlmZPPfZXiMOCDpBKbRXqxXv/cXHpcb7G+bwZ9JMawStJ\nLE0dXRCwWDgnXVd/kjCEbJtkssiPjPfDD+6qaIiAQffmsVw1Vmn0F+6N53bY\nB9L5Qw9MpgEj3UCI9GfPi760izArhgdoQq3v/RKbuScyyynGaj2OkwkyAX8u\nwXDi\r\n=X4Vl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022014183133","@chakra-ui/utils":"0.0.0-pr-2022014183133","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022014183133"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022014183133"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022014183133_1642185133420_0.07652922719157162","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022017182645":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022017182645","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a442cda82af18c3b9234bf48852e4517b038a9b4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022017182645.tgz","fileCount":70,"integrity":"sha512-8Ejh/5bbMLaZIcP4YudpVCvgaIK49NDwhwQcNapE2tcSHdaygwtyZu9rNr5opnfsXtLgkV/gQigD0UfOzeG52w==","signatures":[{"sig":"MEUCIGsm0wImm8EfGIYVQzgeKNe3DK9f7nzgZcPmVRg83tClAiEA875Rkc4lMS/fGMTFgdTtUlPP7MAzKCVk2CKY9gF1ghw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5bUECRA9TVsSAnZWagAADVEP/R5geJtGEgeAAAElfz/S\nckQDKcejbuDMGymnzkZ72WRem+8v8xQXmD4RTeYz2Gv6Tw8fOpKG0QTQQElB\nvRBOemPywXOYEewSX9ch6POCX7Hdk0DOcgQndlpJqs26qmgS7YxNwkjBqaNb\nIbJC+yS+bwxy5jxpIKakKw1I1Y/UidOb4pECRAGke9pJt6vXVXtrLU+MZCZW\nHTRvTjLn/G9ilQc1Q+K81bSSNMoXZzmar+KqT90RGJ0+f8TkaaCSc9qqSqEn\nBHYz4yefnbPIFFKUAhXlH+XzIQukPZ7fBuUuenFoGgaFrHzNR35xj5ElABXv\njjTUxgmtdRk2JlDg2Z9EwuODh6h//E0gRcw4lMMqOYWJ82nlOpm7M/qKczBz\n6jGoQbygXm+1lDI8CA9gdFCwTriSnQ5Z40mHNCmtTuXxskbLejJKaXlDKq29\nnT6RdwwLcWFfwg0aGFiwMcNRQ70CKF/FIswfG7UMTtqqt/HKoJ3xI7HIP2aT\ngUClLZkEp4G+xUngMamx7A/A3GdCgaQaLlHPfOUB4jpqMY++8VcJ6JWK5VFB\nM90wcQ1IguYUXoFVrcwNEh0FErh9+5sgrXe8ptx/IxguEjvxF1F9YfK0c6Fl\nemSTyJ16Y2al/nyOI2TnjTs7kNY/u8ZjbfJRcxgIIYcR5aCDOofKS3xxTdBb\nx4QK\r\n=ecFk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022017182645","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022017182645"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022017182645"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022017182645_1642444036295_0.007520508234879486","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022017182859":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022017182859","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0643242663849595a0445448bc5904573b264d12","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022017182859.tgz","fileCount":70,"integrity":"sha512-2umdoRCxjjR99n6RrqqJVeP3TNu4vGYYA7UC1aR91UU8MnedIWX9qWfg8crWFHNcGjr/QCLihTzxbrhx5QPtdQ==","signatures":[{"sig":"MEQCIFA9RX59CMspaOxMEsXSVnUFXTsPTnKnJW1tTtEVPnXrAiBol9An3XunA+zwCtxxb8Dn+2yk4vLfjH7O/pAGPaLpMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5bWPCRA9TVsSAnZWagAAuykP/RAFM+XR1QQaHm72l7jM\nYJmuvv1FYcBckKKIPol3MrWOhSm5YhQ1bTt+ul1bUIYkmi+4SA8J6uZxeGG2\nht24e+bZps7RZhUTW1gU0I/TWX8Ol/jJpYpoDv0JLNmiOP8Rj3MZOfIgH5Y6\n+EMVtH/BsV7NMosBwqjDT6VBfO4U9rSW638RAqnpJ3udkurafHcXuut5BZl/\nwo4Cpok6NPeC9FX4g+bQ2uunzgtc8cdyWHlXY+7rZWU7bts6hSqoNNIjfWF4\nz5yEvrHdPH/1hJsSfyNGV0y69fJkQ5pv8SJzNUsP34nItP5vW4kc4dq6B0Hk\nUufD/q1SUWUaG282Z6GGGLCa+3GwBT8UpraKFmvzR4uP5mEa/9BQV2OcaLXw\nLf2wRuuRGv2mIqzfJocpnIV2AZTiFq9uOpp3YZFy6+w0COYXtG6RTRbMtRih\n+gva/9B/Z8O2xBrv+sKQ5C+CDQ4TVw/NZlI1zgVUmo683PKp59QXhNNXifoQ\nb9bGYsjgR/cW+mvXeXuDsrjoWFKAeoPR3bnjkSPRvbKFCeYrMPYeCP9cCe6T\ny4CZpVd3ODV+sWfC+IAwM8g3y55IHG8u0KiCUgvL3EqpscyUbzPVsbFy+yiK\nYjOvMlTOCGYHNoERI0H/ei57WYBs0lP/O0qc1vNzZmOKLTR80KZGNM5H3UdW\nc2vx\r\n=Gan5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022017182859","@chakra-ui/utils":"1.9.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022017182859"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022017182859"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022017182859_1642444175288_0.4882383497002789","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220209527":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220209527","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"dcf05cae607abbab8c515e0b823b43a73f11a780","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220209527.tgz","fileCount":70,"integrity":"sha512-IIzCuW0mIc+4FUkF2tzcWvPyGFkmiUPtxXo5yqptN4EbiLgt64Oor4Yjc1qb9TjaAQzN0kKzmLUiPR7WwGH6ew==","signatures":[{"sig":"MEQCIGPwunlP2TUs8hURU7p5/MEYK1gev4Yil0G7esxcoQrEAiADUoVimdIhnTIbm6OWK3FnXj23cs3p+FwSwCwC/hVykQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SX4CRA9TVsSAnZWagAAXf0P/16G0JNTwLasZQ6gYa+m\nF1LuW3qZgGKswUDh5kGZeQ1CgtSRF8ziCUTO2vbyQW2WWsMnnrBaP/SBxxKX\nYyujLZAlHB7GxRcUgIFaukoC0RFbfDATZOm0EJkhhW50LCH64Yp+mxaZrF/6\n6015k22vWEVh5ntMvLEEQSbWMd6XCOmmaKmdA9cIYdLmR96gd3zSjAZ/uwMr\nozuGRL9UEtLFDxOODCgdbtnN6Uc6WQCX14UDvLjg36btpWlmxYNVCT67/hGY\nKTs0wG5ANLcm2558/7QeCPyJ+Qq7wFEVZRJUnWcMre+iff1bqCDaWA1vX8jy\n7+eLi5n/3vAhqCmTjVwfWIBmkpwe+Z6pWTf27TbBbF1gHw2szYIedkFgWkRl\nQ4aknC7eyu+LrcVsQXrZI7+a0Bzhl5Oo7CZOyZUZeUUmEkujRcLM3FJtaohr\nfY8pAoT5fK0kdvCKxnofFDrLPfyvVV9TwsN7HOBnALn4tXW4nnrTHEEuVft/\nAbVJkyRar/1uhF5IfJcoXcd+L6pVpTqyjfHI2zOQys7+V79hAtxGTGPG+FQM\nq51etrp6ifo+NXIoJGwavGnoCuQMju7GkOw14NBqmhDnn1tcJugKrOBRZNu6\nX6jyZWtGeejiqXoN/vxXWraQJctyKz4TJP2fh0I8TbeOSnIYw6POlZfEGAyE\nCLiC\r\n=Yek0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220209527","@chakra-ui/utils":"0.0.0-dev-20220209527","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220209527"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220209527"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220209527_1642669559840_0.9111673396707911","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022020961":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022020961","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c7f36d9a8267bd433b2d815dab1c9adce18fb1c2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022020961.tgz","fileCount":70,"integrity":"sha512-BjBdIiS0aKQcqRcXq+6paFvzsvZyRLLCjPXHajgMNbWidgW+8tw2BAza75T725IEwn5h1qgmG3ZvYMfjREddVA==","signatures":[{"sig":"MEUCIQDWQjMQgFtyOlu/bLkTeqbhLqmC98IY8X8QlyewP1f5qQIgS5TZ2M1/1bjpVq0Rw55+DU5d8DO4PYPpPd5Smw8BTGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SYmCRA9TVsSAnZWagAA0KkP/2esaek4vImJy0N1fTrV\n5mTHGp9gVxyjYJzpzPqiVRbMnCdUY4JRTAyUi6Z82ro7xoeONhuwGYH/zVTf\nH3Y8/0TBs5Orz2AucJsRw2sapEqH+Jb/yv4Nzx3E+LPtCVti0LtkzFygy1zd\nZM+4E75GLxdubgqLnknitwohW7QsoYB7JKFPpF8YAkTt7xB3l3l4crBNwUJx\nc4endyjsK72XJ2OS9mBOFmhi7Fg3CxSTAHwks+8a5bufAVS/dZgJSw6lGoXC\nDNcFhnGD2QvtfVumQhx+24MnFNT8mE56qC5YirEqU1q3rgFyDyeOTtIpyiZP\nfN0ngxYWZ218ZKLvHVzFvRlcy5fH+heRjNHQcGuuPRmctCJuf9F2PJVJELMd\nVCTiaQoW32kb82k9To4Saw6DEmpi2bPC+V3OYo0KJDab6upCmTqPltW3S/5S\nHRxaODIu/s304XQ4Nd/AvPjvfihAQ3VGYmr0oprkV4fnSgLIFGUex/F2W2HD\n4sy6bYICYsDomIXFjrmxTGUOX+1Bsr/BULp/b4FaS6GtR5dHgwGnqiC6EI57\nIUnW5htDyh/Agk9W1JB1fWK2SchlhsCzt2GHMXf8d5CNXCx+BzTzsW7OHDRU\nw2itTJdsv/X4OLF0mw4I/cg96OEHBFFg2bQh1z8dLMzRxP0TU/sGw4eUvl/d\nkrvX\r\n=3G4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022020961","@chakra-ui/utils":"0.0.0-pr-2022020961","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022020961"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022020961"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022020961_1642669606242_0.8163309826663989","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220209192":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220209192","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"715ba458e9f56ef926f5699053ca3daf4d756638","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220209192.tgz","fileCount":70,"integrity":"sha512-F9TE94sEb9W+Ad3Fnv1IejUcrGA/N4LyJ37RoE+zs+IkmfRgl25zDygiBapd/NbTCi/hpGyVVID0Pfhv8oMm6A==","signatures":[{"sig":"MEYCIQDdnx70QM+MERbc68Pm+3dPDgoi/PxWqylQfb88sCPYEAIhAOF9AUrhLWCaJrL6oQrww7wvIMXQiXQSF3NVKdlPYfkY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SkvCRA9TVsSAnZWagAA1g8P/3ara4SEMzQIChUjByL2\nPJ45RRP9yPsymnufYFhpgkuUlrgBSqxLdNNWUpA5w9FjpEQqu2nKI0ZE6DPx\nQuXG6S+oLp6vP6dTdZLBfhD3CE7z8o96KhXF0NNo7m8xToglrAMMO+1LgBsN\n1ZEkeBgyp4fUVF8OYigLfgv7NX8Eb1UtVMrHwrKvFvqNMOst9SyloPMM+tAY\n1Mx0ypCRlOsWxLKz+fq6ruNSBsyNhruEDnz68tfD+o6Z9FwdOHr9870CcOwk\n+nG4zIfaqiyh7MLj6o5wxYccR2/01Uw4HAMcKEr03EN9ox1shAjqZ8yA22DJ\n19UKirXZ3SdpTr37BhphTa/KVAcr81YhY+qVLmzOjJ++TNKs24Dz8CjrRwwU\n6+Yq7gfhiuegPzWAB0n/x8oMIGJENQPX3NJmvz5rfONE4EONfI9uLMDA4J/m\nM8wB0dSndGufJeKrKLjJk5yJ0AGsIF86l3dWgsSUIq6flJgOoX5Hkci0CjFM\nphjb6wTAyyn/2RCFPZuQUSQm3zG+jShqgbvMuV5F4n9nfKm8+F+fbtXSSaPL\nlwiShKkfnsBCgfH6FmO5tf/i2I0Y1GWi7zgegHjbtrY11PBJiFamN7iHUDPe\n7MxACDfg7k8aQaIMjKKBrKMabv7XeG9gib92P8vF5wp9KWzIIv6+YyKg8xwL\nEWN+\r\n=bCZ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220209192","@chakra-ui/utils":"0.0.0-pr-20220209192","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220209192"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220209192"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220209192_1642670383112_0.42489004178444967","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202092345":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202202092345","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2fe9f94f9c889f973e2d7674919d7e94eda5b828","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202202092345.tgz","fileCount":70,"integrity":"sha512-Ifz59MxYAfoPYssk2T9a1G45OjyPWF2xBQIOTndr+1q/R9jCoWpc10z7DvY4JbVKck8vi96Wulyib+VPBN/xeg==","signatures":[{"sig":"MEUCIFnO8JavWwLkNDIv6VAun0tRDBXl0dmfSaOXXPqjohddAiEApOxTe9m0YKTFFojoNwqalbY4FOjI/ZXRq52mavxsqCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SpICRA9TVsSAnZWagAAPxcQAJYLJCtjUlFix5uT/rpF\nsJRYjXawjaTZ8TPCjYB+JsS43rglfsTp8VC2m8U4a0bkK5DllGmLxJF+cy1j\nkRd6zY5qhrfXwXkYSiM5UxI5CHwkUf50fmY9wia3dIca+7Fpff7Oj3Fq9daD\nvgVrUfssSS2Ta9IGDSpAbZ7twaqL2aPaPAk/Gaqql+Ku2VjkaWHdy4/Vxo2j\nDSi9Y4LcW8tkHOtKtTrATskna2p5cOxeRecBkE4OFVm+6siDXG0H9DW1SyN6\nFPkPTSKTRxjmZbXHLEuohnzHxGiC7EtgnE7V8Vy15vwQp0n1ChAn9U1xjlOx\nei7UXyqLLhX5cfivNH0Ae9IaadYhzqLI5Iu6kzau2u90sKHWj6u3WfuzYN8p\nVHcyO6heVEiQ0xPvXaAfoVs52HLLmKeYJlCSpVG3kiN3LRJ76QFGgLwmJz0u\ngfKzhc4buVrwpUTxgDq1vSsbEKFgGR5o2AUmsQEv9oJYVs9dUQoL5EH6uVrb\n9ldFtI16XftSacqfrbt0ACqnSCFNzbIBs2KsEKg3b21aQhdEX6hs/48ZnrVe\n33zBUqZG6qSvsH+W/YgMhpwpkWzZpkRS2G3A+JgAqLW+TzG9OqYGrYWzw4OK\n4B2n6U6uk4AtaqgtlA7AVVYdBqahhTTXFOJrUf89e202nfmKHXLAYF1X+8N+\nE7Az\r\n=CsA2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202092345","@chakra-ui/utils":"0.0.0-pr-202202092345","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202092345"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202092345"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202202092345_1642670664566_0.5463499948619355","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495259":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202202495259","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7e6be6112d70cb2d0a9800ae6222acd230a0e7ee","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202202495259.tgz","fileCount":70,"integrity":"sha512-yQ7pE1P/zMQPWguxxkXKmf9w2D1SiNlXOwLvXQ0s1eFRCC5r8gWFP6/Z28Gf3w3ELtng5ckX12WXBm5USg/Zhg==","signatures":[{"sig":"MEYCIQDxFMuIBl1y4DHOg38Thm3HdiTiLCnZvJipJ2WA2WDINQIhAIAF6n7R8QbSjbT9y8dQSlsXCECrX0/avWZBj22C/RVW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7ncjCRA9TVsSAnZWagAAq6kP/ieUcOtn+G3uz0/LgEYT\nIFQuDaq3mQa3hBtiSvSfV4GYPafJleSEh1TpztF7P9mx+VtBTuXO7CJdU1Iw\n2/op4e8yDFpjEEr3JPIehCZBUZ6DMNbtwS+yLQvAieCXkXfXP4aw4baGMi91\nkJmkBkvXyYlR5AymuiAqAJfmrFzd18FDCjeRzj/dTQocj/4yE2tpPM7kRkL4\nVrk0OtnUKmS1k/p4tqWCnm+0kjbkRHIvngrQWABAKxhStxpv6MKiEhF7WV0S\nfJ2go3SoHwPvG5Ivtf+7YwDQkGJ1ztVnEMhDXNXuGvzyiH6leYMmnzY62qv6\nbQYDliGkR/mdOyDy5NG5FeRfaiqhWDEEKR9/VL56xPz49PVDy0i7uM13SDFm\nj8aTzH7ZahPJGHArP94f3dOpnNPr4SA/5/9RV3+xQYiSFXopB4t4m+rfhOKH\n31q91t85+UvWOJqvcuNsBe0qYQ2YTm5iyYF9GTCMsNn7nS8EiF/xzPOFhvNn\n+UlWuUwAwvH7eVsdFFrB6RIFSQilof2l+cigJ3IU0x5D94Ts3pGSYBBe6PRv\nHsPS8XvZL+P7acxQ3pR8rlzkJuhCw371Rnt6IXYjr8/1kgstiGDLDCEfokia\nPznkInZ31ue5peIGFr6Qzwn/XS8uSdeuGW9rKjQYMi+s9i2htBtn2dBPQs1C\nMtVp\r\n=jJUY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202495259","@chakra-ui/utils":"0.0.0-pr-202202495259","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202495259"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202495259"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202202495259_1643018019575_0.7447673054863058","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495536":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202202495536","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"92e22157783101a8aacf01bad250985413f6fbb7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202202495536.tgz","fileCount":70,"integrity":"sha512-VJly44zD8rlFgxVZoXj4dL/+1/bi/qxdItS8vNRrBIji7b/FGN++oiw+lZ+ThybKwJ7WOs1GyCrQoqcQmoFjKQ==","signatures":[{"sig":"MEUCIBYzuPWmu3DqVIh457yjvpWflf9A3of2vaLlIMzgU3AHAiEA1mruvmtfd4n+UtB25ACW5NB8N2ahW7NIbYdcZju/Tbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7nfACRA9TVsSAnZWagAAvSsP+wV2BoZdcTiKHu4SEOJA\n3bAHLBv1xNN0vH9i7+GxTltoXa3VffN3E+YZDHUIv0fz2uLKlQOe9dz9ga+T\n7zoKC662c3wiKrN1yi/5BplmMQ/ky+SVE7s8bcVCOtVNO9KiiNbUESqWeKa+\ngI2SyYn6kavZbA5269ND0jax++VfUjFejUdGDj0jO/+rmVa/OnoXSDzz4Fyb\nX9W3V1L8ZLsgrGEkPTany3Lh9ty/5uBTaF+un58V010AxFfp0cgJh8wDs/wp\n1MRoGHpG3ZXydxRSoqwboBTIHhb9d0QmFgvuWbJui340l1skg+Zh+nWUVFDL\n8g+eIu7jGIwSDjVKF1F6tyLCl0b7lNSEIFHWdk5WIMjZ6hwpDOLUVV/XKHJF\nwrEzBVs+Mn4QNQvJwgEL/6Tlz8B5MxPS+H7d0WGAY7SCZwXlAADftmp+kNyq\nPTwOeXlT4+tde1/+ZRq5oMvozk8o0WoBy3d/3FU4xSj+XaAH9SSsFIYX72mp\nNXdbFlA6T3yuys1aCi2TWXvJdd4dcz8hewJRcOlkDbee8tuEuKkg6zwcI4wP\noQ5te1dUy4wAYQlz4iGbfdz6yKOq/amWINgbhXw9FsRWuTTbymPVCt0/aww2\n0ufAdEI7+bywAO6domGQmRhY2jF2LeBTm5ri9FJAeZVVDRVCqW6IwQ2uvA5h\n1M5x\r\n=tEqD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202495536","@chakra-ui/utils":"0.0.0-pr-202202495536","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202495536"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202495536"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202202495536_1643018175921_0.9994400447810001","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495553":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202202495553","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ae0256e53e46bca8d8dc8e7e953040ad72547af1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202202495553.tgz","fileCount":70,"integrity":"sha512-k4lZWa1gyPtCzWzy5kr9QxtJlQlmaiDTe3xM3PtnQ8Q25mZAELyO1CTigXKlGq9hiCEn2TtUGQkPSGYyRdHjaQ==","signatures":[{"sig":"MEQCIE8SUqx9ApvOCsxvVNMu4BwuZoZ9m+z52vss9ojii4hIAiAVg/ccGg/3iD8thh1XJIAPBbPZx2L77KhZM1HC1oDCvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7nfJCRA9TVsSAnZWagAAQPcP/jdZppNTtxi5wL5cAVN8\nujVe9ztnUFyXhc1mN84DbJCJIlunIuOmnN6NJfDbUYQR6RppflITz9Qb8NlU\nSXEt9rJdedGe/yGVdtFDYqwNcoaXZpWQlCnMc1wrcRbClhKIP9truZR/Qx6A\nRNxcGSSMF/W5jGczTpYZRvd4TSqGYlbDgS8yDAkFuhYxSHDbXHfXBTwwilsk\njMhQnDoqcMnWaFPODypiEWc+607HGYSC4WPpXrTesVSaZpGtZZsClN38/RCF\nqAieiPLa3ldvgdDGb2QkdB0KXnH0Dq6I0Atbrh9t5Huf4/gHRSENH3Atk7bn\nUo1/LGsroyK3pQWppEe3dDHr8OU8qN/ulF4+7dohcaHdYwKXk5Cr/bVSqUi7\n6+1WNGlpNsR7IjqacyrIhm4NSo4LRyffw9PK+LNHaxOGj7Kpuvf/PQMIPmHw\niv9TdLOdxBNFKVPfSrSwXoCTjGvnVhyDmRmsxv3nZllZwNsgkUy3JRP+gvSb\nRDcjpivSM9TgkkgNP7qVDem6GVNf9sgm9pBQZogQAaHpjSdwdVOnEkhfw8pD\n/rhFAjfrHe5IwQPoPF2CmBhhiKoVSEmLe64zQ0bkdfU8kyFxIdEcwebWtj/U\nx4pIWuv3CRJ0Myz+u5pqEtynfVRUI44naL/uoZRcXK1Az+yNHsK+lX98etn3\nzjBk\r\n=WQDo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202495553","@chakra-ui/utils":"0.0.0-pr-202202495553","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202495553"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202495553"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202202495553_1643018185758_0.8527535344760351","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202495727":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202202495727","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"adde1f6e1666abed8a31bad7896cb50c526a538d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202202495727.tgz","fileCount":70,"integrity":"sha512-7MVkI3VvOU+11IVghXalt9ET6QHk3cR7m1rF77+xY7c79XwSG6YjlOu38jHx/8+i/f8WUXr1qLy23RoA7lvm3Q==","signatures":[{"sig":"MEUCIGpAKIYz00b6uS0rcEOXe8S79U0j8nV2KC1PzL8OOJDjAiEA04FWbHXZhSAYsKC0lVVwnagRoDr46oQaM7PbeEiGqPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7ngwCRA9TVsSAnZWagAAhd8QAIdEfPTATx3NRapRCQzv\nD4YVLqKVmbqUyopH80sCBjENJtqu4FhkihmM0PX4W8lqmPAC0OjAG7JqVmUN\neUhaYCn9JsqJ9QAo2Lo1xFlIETsuSkZPHqe4ucTFIRfLlM99PAOOOuwIOJU5\nrunqAQVFKOSE1bM63cLFmrw2t/6qLcUO8A9HZzQCDjnVMN23ncfIyVRp8Nak\nisi+Q0L7AbiYjkxLE6Y3TIP0nTVI5ZJd+jKF08SPdVEygX9+xKXqCEy+Rw4O\nzuPna53Gw6oklf24UvyNoKntooMBWNlP2Xedt01iAhOcvl9QVrU4p6/Rigdt\nYlSTbcxIYGhBnI+sE1FKDkNa4OUpFPrUJwvDcw2mT7q8eCJE1VEEIsgV/FX7\nGM3X+eaPqezG24ckCzIGi+bOj9enrUnOKG2tHYzioU9KSLY237LJGjECtyQ7\nrIclOV4JnSbrjupoC3p846HUkyEqb6Aj1vbYZaBo0TwfB57uMQPw1rWSy1dj\nyU+jWfYU919vI+sYoW7gQIBJx5NHgoAy+UP1yT56d/7Amyfo3iPNy2PESBu6\nRSfpbT8x1lLwWCwI7vXVPxgDObo6sSFrEX7Bu8VTPDFJbcDS66BvbUWesFsQ\noIf/UhwXhdFNG5t97M4PxUsblYPmzTBuOad9KN0U8/DcWhvlgkogz1la4MWJ\nPap3\r\n=alg+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202495727","@chakra-ui/utils":"0.0.0-dev-202202495727","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202495727"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202495727"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202202495727_1643018288049_0.524730221452429","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202410017":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202202410017","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7311e2a285796d68a8dd562680fd3d701b99d8ea","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202202410017.tgz","fileCount":70,"integrity":"sha512-WfVcci2vaViqidD8EbYSKBDHgQpdTNecH42IzwvBxuAz4Fi3zNS8RhS2IRRFfLMUaoybhSrHmrw6BZft4EhsfQ==","signatures":[{"sig":"MEUCICjgcPCmPw1TR40l52bXcD3W0P0Z1woYnZ1t+4A0kDnyAiEA3au88sFI7tbvrh1uPFoTiq+4yuwEBY5Cnf5jqN4sdPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7njSCRA9TVsSAnZWagAAtUkQAIXmr0M2at2t5H9f+K7E\nOeUbtxlpHjiA9HU/e+XKD6Oh0H08XMGZwAkEB9SCRVUGIs/3LQi70SYEybQN\nk0Umr4esWOyCbZgKPyoCAqJn2d5kiiLQR6/GSmQE+H5PeglGhvxohqADaSuK\nc7XiIk6TfoXK7xzyI0yvvatbXGtm9eyNGI8BdwpssJo/MAdlwufPFt2pzy+B\n+185HsyUBYG+cRQiNT7CECD1HORL4zL80iXVesL6nZRPwYtE7NolwFt2hDiB\nRXgDQEEQGwIEI66PU2tYh6ENRK+1E/RGqBG3BttQdijHTAI7+KP0B9BTdw0e\nAmxyuuBHRjmfe1R/3Yi5Ve663KyS0LD9Ldj4x6VpDagMvZov+UvGUnXRCxGI\n42C1FYBlLgDU9qdse42ioEviLZQzPo4uZjxUeU4ps85pC/RnB69JAkQ7UG6k\nxNGNXvKdkIl71XIrksdduxue6zSzJqs1kB9Pki52LzZv/S5RudnisgUrVMUB\nkFsknR8dSjjokmreRQSDfkNC/h1oJL4ov19EO1wd/FR5prUHod8sOj0/84eE\nA9fC6N08txphVRCpslOcW5iIC8e3RmmjGD4dlRF5colnJsK9jpz5toA6M5jS\nKOfR80lnvovc4LMZ1kZzr1FOVDb5x9JW+NlhG3/MKaun68WT1iDrTaf52udK\nIty9\r\n=HNhx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202410017","@chakra-ui/utils":"0.0.0-dev-202202410017","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202410017"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202410017"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202202410017_1643018450303_0.44528468945629673","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202410034":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202202410034","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"097b59f21f942a28f15614f1a27dfe71857cb782","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202202410034.tgz","fileCount":70,"integrity":"sha512-bDid33goDmG47TaBQ3RfOw/9xV64HAKoaFs7jFsDwuMiktyJVwpGtkZlP7FSMYx4P+wZm38oT1wPZaBp7elVkA==","signatures":[{"sig":"MEUCIQCh0oECEbEfCMeMmAQIeliY8K7GHEBN7ErSTT5fk7FlpQIgAqdS1Up7M4fzX2bgjv7sldW7H+WIXFVVr6rxPb+09eY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7njrCRA9TVsSAnZWagAAIp0QAJTatK2ybqcfwU81y2Rb\nWCzlH6atE+NaZRr3UUakhQx65g62u61xOYOn55t0bxWOJUzQB7y+ivYiogqn\nIdxzZvYvzIx1ofl6XLKmq3T8gbsMIS3VBbmsAMuJ+fysX/0rY0PSJQGS6t6d\nJJqdv19jiQEmA+b4ODYomh0fqjWTv7ygpZtDCjxV4dTRvPTkKkEd4wPARcsy\nqlQ2vf6NEJxRKOoVW8EvKtA/7n4mRivZq0mY4o0ZYirKiCFjSAGUTDcesSpB\nAV4lFZAT6uZtgnJR8GT9Q9Lqod6QGwkbRFNXQcz0Cg8bRCHgbW6a8ikjuL7+\nGoURyFhLdTexl5z7vr9QxYkAgc618JBANzPLuATv0w/otwuAYx4of5nlenKt\nOpTexDJ29ud02LDxe60QPavZ6KKVCAdgiOIXj9YvQqwFTh0QImo0Y3vRKnEQ\n4fTXoTTgGgkVP+zHJKhH/ubdtTVnku1pRWD0pZn9U/oLJX3mmJ9DqYSADpsj\nsJEewqPC8PhMwTAacqbc6u4gPGMatVFW7+1gpKmcNv+yZNBTBhXlT0J8txGE\nwloiJxB1VCYQTfCLvRCywSuEo8D5EsKNrLTTNEKE3EIVR8LV2nY3YzTCXp81\nGcfM9s43sP6q0RZPUkw083EjWX6qqUjqdZGovKdvNXjiRSSOvy7xrIrjn4HO\nfxds\r\n=AZsN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202410034","@chakra-ui/utils":"0.0.0-pr-202202410034","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202410034"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202410034"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202202410034_1643018475074_0.8483559914162537","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022024212254":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022024212254","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ea65d1ceb7cdcd0a4808a7ae786f8e00d8b5a4fd","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022024212254.tgz","fileCount":70,"integrity":"sha512-RDkLSz/NFk8O22g6KKSvZXw9G0mp5OGSrYTKnI2dE2D2Cy3zdii4y8feL9NQIT8Jz6wA9TvbmtLEgqJOa1VnrQ==","signatures":[{"sig":"MEYCIQCQ+CUPuQqxz2BYsBlan/77PmMYEHvMRS3W9w1a3lrYEAIhAO8yKVL4zPo8KMUwvnw2Fncrwz1RDoc7NmPY6uj0RWZ9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7xjUCRA9TVsSAnZWagAA1xIP/2buC2RMjZfqew/OJJBc\nBx0InVLq79ZyNTtmKLLT2C4lo5EwKmtdX7uKr1NkCdGy6DPRnMy//et8jW3e\nsYlfWnay5FmJpvRc9rHFh6uw9GBCkhRQTh/EP53ICP0+3k6bzSBY8tc0pwGz\nfa0YimEvLUL4FMveZ2ylKYTJavql456E4xsXpixutSB61j7v+PbZE9CI4lDu\ndn3l7/H9NQg4CMUQKbcNHJevWPJO3H77pPqsx8Qq95gWNpmwzHBIS+K9ataN\nOXa+5nlY82RJSSLbayFuajuY5WEZ4+KzQmdnTAtKgmjh7xEIxvejEKQvZ2dR\noP7wk+EZDWyALRBYqyT1u6l2Xh9MSICsHnGKoTgO8VYGPXcgdL43kbnXAfxp\nYhlQ6aW9V6I0CWd8m3UwYIvaoe5G73Sbflgc1/3TX0LTgdqOwHXjvlD0q7o7\nfJjRnf7QVx/gbBWIHRxzna308RTIkqo89gLYN+E1F+uwZZmUDUE5WNUGhGlF\necJlECTw6IHyJ1XJX/PHJnmp2NVdgeqTHtf26svgyQ7SsRwyWHFcacFWcqDr\nrbJn6MYD0Ps3a+nnaxmqdX5wWGFHKCJ3rn3PwUCGwtiCBWXQiJFPOuwbeS2p\nYq0oudVe+BSKXn2eRQ5zQg/kVX0ZyYdDuZQmmEKQbzL+P0czN54hGMJQ3x+O\nqJBm\r\n=v3Ae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022024212254","@chakra-ui/utils":"0.0.0-pr-2022024212254","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022024212254"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022024212254"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022024212254_1643059412079_0.4586671260414543","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202423375":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202202423375","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1ba8efddc0863962116ee0d7cfe4ddcea759a3b0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202202423375.tgz","fileCount":70,"integrity":"sha512-/SyEYvrfUL0/OxCwH8J5cV9vPflTBVitg3H58dSeW0axB4c99QpXrh9RwkYeTKT5ywbeS9hmTgAydEUU3iUjGw==","signatures":[{"sig":"MEQCIBr7lrP5Pb4mPKqPADR9oBPbr07QyYCCZtM1LrrOQFGWAiAzTrZWQo94iR2W6U8do929FeoUBCjc/6Yojw0XIkzVyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7zhECRA9TVsSAnZWagAAtxsP/RaaPbHUAaks40Hmep8y\nenw3Twn6LxMJpKBwIbEU7adOFHFzwNSuF85TPCSltqj0e32ki+5Yvjt/hgIl\nuNqqZ3O8lyOLTR/Q/vzoUOfDfx2CoQ1RP1vGNv/7Ansiv3daKdnVa9o7rgie\nO3vj6e7av8cSGd2kBeo/R8wS/D7QBHCc7b9qLLiRmMRsxEpeZkwaWTZ1S6Nv\nKittuOjBEjXdiWIvav6caNrohGhxsM1zjimkbkq2jIkZZHPgGgcuambl3vet\nAWMmsCcVmcyJeZU25BxAuw3yFRlCFXIgQzvnEeI4dnS2qDzYfIyXdGkFydSj\n8RGmwGfdjPXOjTvuFBV1GVM4xU5Fm99f0vrLjSrjgbFWGAfLO8vJowbB+pSY\nX5SZW98Uiov0VmwtbOCBpLG9x+H3t16obA5g2PRpP7aZsc01yEZZdFsWiZSe\nkXFBY6QWBJPe+SB9eA/OQ/5N6Q2EUiSQI54qCae8X0MwuSzdozDgcgkfa2T/\nftP9/yTzDuJhDDwL0iMCqEK3eJQ+Lu7lDrGHgo0ozSXkR0WhlFucMxjfc2Ya\nxOwMESnj2coLPh6FARNLqQjmZA0kmBfDuTtkxr+5cQdAunNDGsRs1iP6cH31\nvtx4E6fJLTomSaGKAHyB9CeKDN7PKML6EFOzG3Kz33uxyj32QajxdbNxM3XQ\nRC88\r\n=aTrX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202423375","@chakra-ui/utils":"0.0.0-pr-202202423375","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202423375"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202423375"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202202423375_1643067459868_0.6312621479547023","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022024234531":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022024234531","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a120e63de2faa9ddae43c65d967875c308dc364b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022024234531.tgz","fileCount":70,"integrity":"sha512-Ir0tOq7Wb5HpXFmQuVjTPi7q2bGFjN7/6eYccrHI72tibX7xFK5OOJhBR0XQm0+AJSX7/dHReRmHs8MxdUYgAw==","signatures":[{"sig":"MEUCIHncZ7wwkCa12lzfJzG//9897J2VsdldCpO9O26q8yOCAiEA2naDeK3LtB0I0wdPBKBBb8ntWtVxZA1RuHokGjhjib4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7zpBCRA9TVsSAnZWagAAWLMQAJkLz3lcSiiiwCoBjWxM\naQ5pnvQEZl7rycNDhcBcxR56Yz8Ty4MzANof2j8PuUFPg9J9AYVBY/3mN3cm\ns+itzGSyWD3VCRGqiV5EXuf+xiLiLQbk6D9Kje+wCvKbwKwj/VyvcntcWlcy\nGALO8zUQjEiG9Ul3SSS2yJsUWcuNH0mAyItrWa8/BtDFVO7kzaP5NvcBZ4q0\n5L89/KNEmhuOC1XR0ruvXkvQz6oM5YX93eGmaj72h70YWQja1HPprf7jIGFz\nh5iIZp3Xs9mvs2aNAMmLDY55Px5BIkadmLsUjV6wYx9mst3Ay9OE9ASheWsv\nQ6yGy1hvMe3Mc/C2YW96JOitXlIlIxPlfk352izIUAQR/DGU6cXGQXQj0TUP\nM3gBmEHXhjx84FHxO64oQ8g1C3Q0IEMRNU9PXtkO/qj8JsyoiZzCvBtEwbrj\ntdBuV+m8xLYs/wZ2WNMOdhVGprZEHSCA+YJDm3u3ZxEBm3MjkiT7ZHlHAj56\nK56mTmA5sX/w+5pbzOTbHHWsyoSaRD699SPN2eLMCAohBn0JhDsfxxcn3GY5\nn/ahHNHEBjFbfwGt/j/rTPss+hk0Ah19zNlQ6TkzGwHptuaweYZRrui4XXSn\nBYuh5pqxK6r83Zxk587OE14fB41b9lrNk1XKjNcv/oCVevd9xsMSr0iHWgWI\nY5uf\r\n=9Q0+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022024234531","@chakra-ui/utils":"0.0.0-pr-2022024234531","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022024234531"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022024234531"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022024234531_1643067969582_0.29267702454857547","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220258423":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220258423","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"513f89e34ef5c52146b4fd93a0dc5fdade0eff63","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220258423.tgz","fileCount":70,"integrity":"sha512-2kq54jbBnnJRcYlRNxXD+sS4s8NMMLS0YUQrRGNJzEywfmOXe6UuKl+ka+q2erZolv4Rm+UEGRdyhl+G3DZ07g==","signatures":[{"sig":"MEUCIC/aaBkSt/0BJ22LneRt6Y13j6PzJbKfInbcPtsjEv4aAiEAkDKNd0QyLW+yozw5Ihcl4XnfnpqFg5GmgCtOxu/2Bdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77gDCRA9TVsSAnZWagAAZNMP/3/U2MW3oB0zuslYb5vs\nJglV30Gfeim6bItXIe1odqvs0VXumSrGhFxjI4T2tfB98PQajz1D7JZrdDT1\nRnH8ql6F224b2vgW11RAS4tajg7L0/u8vYfZIeB6JEDDBMie8TeBBHCB3Ba+\nIUdQ/a0xxz4JtIUqHUTsPZPG3kXOeQQmsE563rw1wmvFG5+g+N1egwzO/kmR\nQG7w129/Yvf/YJBTGWT003dIJohkVQZlrugJBgSUp56y7YS/a0p7YOdksGkj\n51Jbloanldstj25tNkB6JHvV0wCr572rptfHhK7u+5oJaTilnv6o/4uyQbbH\nD8ybfKUgG1hx8Kf2CjPBa2jMyJYtzfHr65rPznIqjbw32z/geyM2yepDqDTt\n8YVmRmF4ve57dD62rcGzWnSgcB63MzBddFb1jpKYIDTQKrIueoYgCfmnk+UE\nUKQecqevEuL7AVChkJlU4TbgHmfIt3OB5Na7VdZMXHvPa03ntbKGCtGremPt\nJQ7pq7Lg6yUz6PjW9Mra+TR+J4uzoG01539QoZv9QYYz/iNezohwUfOThRua\nDwGT2ewXElxfhKZj84kcif4WR4gO4CM0UD1FKe8AcW0pYktFTE88hVKsDVry\nFo6ClHQz6Iw+wScN7q0aYSVAiP9kOVZ6bniXbTtimRLu32jpGE9NngCyoFPj\nnpvP\r\n=fyfS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220258423","@chakra-ui/utils":"0.0.0-dev-20220258423","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220258423"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220258423"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220258423_1643100163156_0.35034411131689214","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202584437":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202202584437","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0d62284480607091f74618c39fd939aa313317b9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202202584437.tgz","fileCount":70,"integrity":"sha512-2DMyIGA0uDjp78xOV3WUqsuYz//3tm7RcsH4Mp3yk/tsGxO08+nlslTKZTG+/xmB0Q/Pfy1IoGnFMKJ6F9mfIg==","signatures":[{"sig":"MEUCIGQK5wQTrm32vTHnUYbXD57rhL14x71VjDQW0FDGoT7SAiEAs27hmBpfzu0LKp04ryDHbVoFjeByrwywTjx7c97V6Ow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77idCRA9TVsSAnZWagAAd3sP/RB8oTZNaBuJMFtgUVdH\nu38Z3R9S/sRvAMxKOHMJ4g1x8tAKKNqEKyPiu+fmaLq+lCuOGpi7NdS0/eiA\nmVxWyRz3cNiJl3beDzdgv8lBqYG/Vz7fzTrsRVrtiIxqVxJ6+1KQfNxred4t\ncbwq8u3ZWgphj5H5ockTKQQF+N98o/utxzgR0crKt+w8yYuOdb/l54QOBz6B\n0FSl3ZKt0JXSlayYdNvOrXTsAoc1Zd5/NzaSwiTmNGLYjwn5jDJhjRZTkQ+/\nt89Jcr19mkRtcNBzIHSXcC72nk+I1o6kzakgTrrSTsDCzFL863R0tY+PtvxG\nfSAVUSyXIMxPulXElXX2+S1gdLX488TKiTH7tSXKYi4XHY4JUnouMa8n16It\n8b+j+SVAJlbl6miBzWxPm99RTmTp0YfGHdheM+VDIolhheFJGXz76MZzfrLM\nPK4etOWDb/nu43GT+vc1c8fWx7wLLtwHUQkHrLfiC6Wa2kROj12MoJG4dIIV\nVB25HYLOKsoFYkDOi+EiUpIJIa6KjdO1fXiKro9NgoAftCtFaVohNyfiCj7F\nvU9bCDyafHDagXQUoxTvw6vNmvjdRm8bhZJN+5uWBL/d4MI3RuZWx+YXyUiz\nUIqtgmiT2mYaZZ9CzFZzYCoHXrdlEwWSmGwFtinnT5HzRbHSUbp4RgGOuYET\nqtYO\r\n=Q3YA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202584437","@chakra-ui/utils":"0.0.0-pr-202202584437","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202584437"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202584437"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202202584437_1643100317301_0.8644787906723883","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220258462":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220258462","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"dfee2e0c1ae46762d4bd349ba4ba381a6c728fd3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220258462.tgz","fileCount":70,"integrity":"sha512-btqAoS4vVcHu4r2VREbR9HCekdSVRHuke4Ig45uo1Bra08KS80GLcbNAxwfpuh/OWvalSQE+67BDbwHa/Kwb6A==","signatures":[{"sig":"MEYCIQDywilKEghOA3M4zRwBrvWMc4CPf9FBKKBoeRAA6CNDKAIhAKHNcDBJwzj9Tf0lJGN1F0yK55ukwKq0TJLMgewX28Is","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77jtCRA9TVsSAnZWagAAqSMP/27rjQGkG48iiu91garu\nW1TknDEca8np80YZ1MXCf6v5JQxWT6iU+aFL6a+GR7U4iusRSZISTLJyEtJd\nMPdZipjJBzUHw6XcEmrmHkMVSTHp6VYPhhqwYez99Sjxrb82qaTYKHK2utof\nYoP6et5wRVbI7SP4RjbuJfD//1/HpQ9TpYVCI93Bk8C2zjrBMHcL8IDK24b5\nv4nkDVDG5MDYvDy4TOWIKFJ+jdnlrggyYrMbP53FCYz3JjjBvCM708eiexWH\nwQIUT6XyHVeYu9G8cXElDl/j3n1GzQlyixj0pSn0uWg1n63OJIL0waPrLy5l\njwT3HH8FmbeOVWGDCRwE9hgvuUBQbXu0XN6fYRTYcDX7rE8iUAeph2MK/eh5\nLoulvE0nku3F+RDSTuULHz5h7uorcbFuaKRdRhXf2FYTG7CynikS0xf4kluR\nL2BW764HBN6nOr4UNoJlAnjWjlytmUm8YCKlMTz/tohEwVGiupH3osiiH6R5\nUloUvVN9hWbzx7FINVpz9JdyG9hiiloz/kHV0Y02fJTrHGLJUZbAyy76WriD\nWClvTS2uxuDNgnT7eThMJ5YV+8uMO8XZkeBRs0CvHlHiUZtqi+/Xw3gpFmTk\nmm3FMo55DbIQKxUe36d9yV1tTWEwPIXOptRhs/uZLK035mADlH9cXTrlOUlS\niH3/\r\n=kkht\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220258462","@chakra-ui/utils":"0.0.0-pr-20220258462","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220258462"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220258462"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220258462_1643100397212_0.7367361716722751","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220258486":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220258486","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0c3974afe25dc550a8f18acece6c7bd4572611b8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220258486.tgz","fileCount":70,"integrity":"sha512-O94aD/pI1pIAXYyjYjbnuLcLKjlzZdqwQ2YXenBMf/nvVSfJzkW3qCSDvMZzIIeO17LJSSuQeqAtvDLiLLw8vg==","signatures":[{"sig":"MEUCIF8Kznp+s/lufs/sRpamDqHaseD81mvZa+XTeAk5RroTAiEAnZyNRI+4BGLF6Jy/y27Q/Gp9a/HI6cW2EDT5umLZ5GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77lvCRA9TVsSAnZWagAA850P/i0zewUbbbTlciKeQ+ZA\nsLWfIjpgL2f8MSQ/0/gO4al82qaub7sYcNkD97XYsi+GuWlBOQWPcu1vhQby\nD0zCi/NwzhS3lu/dbjB429IqEknL64F7rk/qwDoluoWJRATukBDJRhtxjnJ5\nGc4yFvihAsuMrX8qUlD+Wkxs0GTE71WdNjn4oYgZ25PXGgzrCJc035yA0i0Z\nUJkV89+4hEp6V97tSfh1NDRjtfmohe55gA4e7ZaKvCyhoQMD7iWyj4c8KRq3\nuqtsCB/YgqsJgDT9JwC1Z3k/PmjfnNnCpLKWOkPtjhjK+Kk1zVloiaylaz9r\nkeMBCMqhr5VSNN0Ogx0kNyEMTjn7Sg1DNrvR1P3qQ6iW/Mcdpg/QyuJZ7xiZ\nVgS2RTzdHAl22+MjER4pelk9yk1nZMAMtGpM+9/rAIUAcf9VgbukG04C2lNb\niC74mfeLKtDDEGCtoYT75FKJsJltG1fGqHKuEg7wdfcLT8LPex8uyCOkpsTu\nYzfMCNZkpFynAdkfmWZMa69WKafRXI1DqiUwiQ283HbshzRIDd4fTDOFXXs2\nAkmGTvf0ltxrVqm7priycmm7zaU+4WgjCooAacDj/1EiZjgjLsh2RTHX/ZZa\nFzgKmo1TQu0V8um2TTMkhkED66I6mICZ0CxbuDViMSLhKIEt6NkewrUvUiSv\n1UCS\r\n=xntd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220258486","@chakra-ui/utils":"0.0.0-dev-20220258486","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20220258486"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20220258486"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220258486_1643100527097_0.3961482470834956","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202585455":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202202585455","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6a886982b89669c4be24b48b3347e22436e3baa7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202202585455.tgz","fileCount":70,"integrity":"sha512-/tyez895/P2nUlu4JgJ9dX/wVekzRB4Ze7DkYSOUGwl7nbK0UweiMf7a6qICl/Mm5Kd8VvrBkLIz+243aqusOQ==","signatures":[{"sig":"MEUCIDL258DHbTcPJGCEssqz1FX441kx6Ip9f8I6CWlkyq2FAiEAyg7a3/zm+l11lEebQ7IjkDL+ueVgB6uYMS6/+tEeXME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77sBCRA9TVsSAnZWagAA5woP/jGuHN8SIcidfgaqGfm4\nKHCFCJBdGLI2JAVe7XP/+wkl6GbxC8PYuyMqYZ4BXJH9U8m6bC3N+V0HAcQJ\neJW/RkQiVPXHB04LYdtnc7YWCiqc1JSqqK4TTDratlcirxLfe2tNNE0kuWXe\nLEn4FyjKRmLLaXFtzllndrMANYwzfYcP/Tv2taOwu4mU9opc4Fn/XnRWnSZ6\nPFyQ+t1NCKn6u4nIHaBuItOLB4+ma+nPBsue0fWOK8oWUxyPadnj4F7YP6xQ\nRDSh+3FFn/VWfx8VB3CHKY3ez92/9QYcQTYzG4+c17Dc9MqbL7LBIKDHS5by\n0Co7oyi8YmzN469VLHMq/SWILhZeXL/JWT0nBWOI9DnWmuA48IRf8qrurr7U\nCS602MsC/CpUqyzJ9q7lkpmRvhqr/rV4W/eb45/XzJnDBlg0DBisOHzgbktf\nbN39SiUPB7YQdlWhNZ3SmDi5IxZLTmVWuYkoHatPyZOHFH2tw1DDhHWTlOBg\nNI1Q3RtDj1ldhemnACcm66GBGuDq269maSxs/TvPMUmtYbfYyU/zQkTwJnRU\nVnNSRNn11lBhnA9AjUlKh8fsNfc0QiRiuPpP9wfTtdDo5juDeVx3TXarkbY5\nb4Cc5rTkmvLSt89YlX1+clFuBWxxqMj65XpJUmOavgQjzwP9/ylIDxHWyCcQ\n04Gy\r\n=7kEP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202585455","@chakra-ui/utils":"0.0.0-dev-202202585455","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202585455"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202585455"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202202585455_1643100929628_0.10659524843909618","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220259146":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220259146","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"226d7b341ff0ec09eaa52e367f9cce429296bd6c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220259146.tgz","fileCount":70,"integrity":"sha512-DupcfbMbJBc2P52hldrpQtBMugQKf07AX21i1K8/Jv/Q3u/ZsfSQZLlgSSavGeBrWYdqtFhZcm7Xx3nHyNKN+Q==","signatures":[{"sig":"MEQCIGGlp7BiehWlkQBD6oPJtoCV/iVcXv3RdTfWzCdW7kK+AiBoiBaTPfcVtZ596XELSIBvVJwBgXoypHSU28UV8Gs6Bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77+CCRA9TVsSAnZWagAAt1cP/RCMOolbH96BO/nm9DGc\n3DcAjqAOiBR7XzGn24i6V94XC3YKKhFipnubBvYFtrUWIvBudGKcjWTDpvuI\nrX210UIp+djVxBT+qKWkiQ1VBKV3YCMt4K8jdNgimBncKQsB0kr4UfwP4uzn\ncfFhdIYKTaOzHCAoQ0Renf6+F5EcUc9xEIzZ15IFBwnxOQAtI9skFM0B0bcS\nL8h7yhK/JQAqaOXj5X34Q2NWHHNVohfUlH4NJ1GQeJ5CPWCpw1JZHjM/BM4K\nYZG1LBefZr+K83Jp2e+HS1x9jPASrwrAnq2rOFaE3FppKF2WOm4REcZV/j8d\ndQtFHXcfLzrBSTThQbIna3NKd1z6sYGXqAFm+EyIadTco1i9/zmbb9vJd1Uy\nl4j4FUtX7EbKTWMC4qJ7COI8Qy6QawgmAt5ItKki0oX8n55r8O63soxlY4p8\nEMjIbaW/IRyMsflEMa7JiJzC6m2jlAWW3VH5lbY2lQ/t66ss7lo6VpB5ieEk\nlrWixShAKH6vgGkKcgyAXpjNj5+iOR+RTU71yrzznRZSVtZgrnZlaWSjlIL9\nKW2PQ/PncKhYr9MAturqcBNwlWcf472ekhMpXqCU375yLmcf+wfnQwFG42hf\nl5w+Nr4RJG17yHK1OQUqAy2JPtEKPrdEom+W3W8SuGqHYdb1CG9MYQVIOuDD\ntmMp\r\n=31tR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220259146","@chakra-ui/utils":"0.0.0-pr-20220259146","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220259146"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220259146"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220259146_1643102082060_0.98358964184517","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202591453":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202202591453","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f49ea75d3c338fe461e3ef91183b689f730ad967","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202202591453.tgz","fileCount":70,"integrity":"sha512-lwhcb4KOXRXA7rK0WEf/42plw9DJAH5E/TO3Nhsnc/D8VHVsQt6R1HDjZ0ACIvzcueqzsEAYEKo0lLitmUgv6g==","signatures":[{"sig":"MEYCIQDr0EHCmi3ANUA6DufwpXJzdKWBCURgHLi0Agv9ZbYI/AIhANF/g9J1q4/vIyEo9egNE/qbEwpkOJRT44+2U6iF0nMz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77+xCRA9TVsSAnZWagAAegAP/3NRJvuyBi3DvcVm4xYa\nAu2zzQU5JDnb/OQGBXISgj6R5I/t8PwwlCTuMAwyedBujfFOUs/RqMGUpRbK\ntEX7uy8sY7TbZchTkz8EfKEV+1UZkWTkNi8HXgNNDMO7CimDOT38zBlBrfBi\nk0jlp6sCz/oZOMeKSyS0Mlpr5SAwjalHhHiK98e+7fKFjmNoHGu5uQ8GeSP1\ndCBUL4dMP95meQHuF7HMcApkz8Rw10mGQWhgW1FJNvh0X/0LuY/fVlZ4+QDd\n9cnuJbhC5uwrSnJ17Z34L4O4i3HO71yjGl6EVhbf4el9+ySyjpn464O37LOQ\nt2TCHXXIlB3g+IN91r78u52/U1z93EEcITAekuQ5jM2lt/L2JHpF7jRGxSnY\n7SKjTl7wfkeb8W3jGkRak3aacGxOe3Sfblg7YmyTzeK2P5K+EsNIw2IvU2/d\nX0W0KPOcmWI/7ZvQWRn3BNrO87ZBgN8s1Yj+hG5A5KHDfe45ulJOwZtsoSYD\ntIT08LjvpKXE/b3vBVLSShjv/PntFOkoATRiC/EK537yVK3PbCH6wi9tWvIy\n8jHl5r9N/rP1+rdXaR6JQupT1/ubGAAx9tGL3htSox4Z1dwxLSIpmSff/Rl1\nNUh89BC35gWC0vhvwtIgyLnkA6s795ntjeaczC+T2beNvh/syh7kLUBE1WiI\nwqQm\r\n=g5KS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202591453","@chakra-ui/utils":"0.0.0-dev-202202591453","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202591453"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202591453"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202202591453_1643102129450_0.10024402527567666","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202591937":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202202591937","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0329e89aaab9cfd0c704056b0103bd4b471a555d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202202591937.tgz","fileCount":70,"integrity":"sha512-+wpAHrqWYXdPj9APnZ+chgD9GN3F2qhV2Me0RnJWnzvkefRa5QWNGokBlBfMjf6GoPoX8GHLRk904igeJB0O9Q==","signatures":[{"sig":"MEUCIQDwiMMelUJ3B188/zv8vKjd3HD/4UQmprUHL8qP1KXmjAIgHJH4Xme2m5GMIEltSyBRBE5yPt0Z48hWteWshTwVrXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh78DNCRA9TVsSAnZWagAADAUQAJnR+ZFkvdNOOGuRMTj2\nhBiSk7Zo23hiKSF/int8bw+LMJpK8KEOZRQ1uIdHXT45h8AZW9MZvOMIPp0Z\nVZlZauAmYNHyxLuqzojsT24CuKeGRkveibq7TM141lZF7S1jI3ww9xrIiM9s\n39XZwgPCGrGj1QKnFz73F8InGcxaSYInsMVDV5H7SvMEoG2s0goUngnIfYYT\noieVsaMTH9BUTagsviZHb7vE/0BLl1yTZ/6OJXJyZnvyttP/1ADkks0lbpax\ns2aDaj5P8KgywlRS99HE5BmUlClIMVQVdeS4yw9AjRYeW8ORhFedgYM+aJY6\n1CL3dzhINw7bn8xCtHAyDJWxgwFOFl1OcteQkvs1p9/IdstGxw3eV3kiBhAA\nrGeIwRobBvM2uf9Re5TNeiwyEm0J9IlqcbqvxLk1ZYnFx2B/JOm/00fv90xl\nI3eugnCn/w7kFCgPG7qeqk2YVXcwHHjw+dun+xj83eg8o1SkgdjXdZUaY5b2\nGG4uMUHLzoVY66CkxwdB1YVe+hBywTLNANCTu+mI2VFaBv+hv1M+tZkRjqeq\ny+jV6C8+wS6M9Yn1UEKta5hK8/ye2FcNGTr+bjPzvnXmcjcNV1i/XzfdhJq5\nNXlW+3+OgpbpjqIaBfkD/UO6Xr9rqHaL4JhBqnFyEqVMpNWz5TcBKXxNZJ0k\nU9sW\r\n=WKVB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202591937","@chakra-ui/utils":"0.0.0-dev-202202591937","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202591937"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202591937"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202202591937_1643102413467_0.8372727643650724","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202592640":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202202592640","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d1a7fd98c1943fadc4e97515127a3b522565571f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202202592640.tgz","fileCount":70,"integrity":"sha512-Xcl+B6W7xmP7iUnFClUOqaRFBEsIHVfpdsDgq0T7giLwku6Yi7KxTX7CRTC/anipZ5YI4GCjPHtvjGUOIhn0oA==","signatures":[{"sig":"MEUCIB1470mnbVo3rlSJV4+2eQ94mNOayPzNwICzzrGaJ6H4AiEA5BQpGWrnH+oGyJDaQvjDlXtS7/tA+4gMysR6xQ8jfD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh78J7CRA9TVsSAnZWagAAy6sQAJncVlb7nXRtRTE+XL1Y\nurgyfRJewWEpq4B5kNF+GXCQL0TK6EUeODeKFIU/GD/Sk6YHw1WbJmJrGj9M\nTcjAPP8w0REnXn49XJeGNHuWy1HsCWUDK7hX3+y4QqBWRrQfK3NiFHv3hebz\nCK/8XXJKFJU2AyesbY1lW96mO8d2HIeNTR0QQqRmGhNZXVV12kNq8JzVl46c\nY0Zek+xtXdDfgMIjA2tC0GIRkw2+lLwX/7nd4IJeluP1FfBtxp3xDz9DCthF\n7o3Uc8+8L7aC5+eAch+NVzXDb8x0quMXxARG2HN7jTN3nTJy0NPb2Uj/0xLa\n4q0Zkz1jf5N1iY/Mxvb++rud/wrZ7IKemtgYHeTdrxHUpGUGp9FBNhmyIuiZ\nDbQ7o6J9TYkZvu2t78wQOOj4PIrDNxKrMPFyFBjvkuxHwYd3wUG8zszzr523\n4RJ2/bZHRwLgmR1MyIfK0k9PwMQoj4/KDy/HbgieRGuL3yBWXny2jsN6xdJ/\n0m3hDh534PiAUTzkQoFJDMyoxHPMm347UBgS1xJ/th0HIvKK4IiQ2zQGaSfX\n6Z4sC+/VMh6+Ix0zQS4GeSbgcmRXJb00I4OpPhcjB+MzGQGgf/wI1y1Kwn4f\nBkPyAHLil0pz96f4czx/7hG4t5BWDZN9etqvN75g5ZRBhEYv72JqxZPQwIqJ\ntVB8\r\n=iPUF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202202592640","@chakra-ui/utils":"0.0.0-dev-202202592640","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202202592640"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202202592640"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202202592640_1643102843741_0.03873191624025041","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220251866":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220251866","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"bfe2f381957db77219b24233ee1fd3106e46c63f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220251866.tgz","fileCount":70,"integrity":"sha512-Quu6tqI1QaJbEvESI0b0iLbDsKz7LhvmXtDwzwCZ6cPYeL7m0tYvL9/TTfnwNKyQCyS1x2FribEFFg2CYzSfaw==","signatures":[{"sig":"MEQCIDRwtwgltmyyLnOfTT6kVTj0MdkJR+3j1EluUylt+fe1AiBPBsumUK9GJd0aF67G+wTuJBjwSoQlBIFkYMGE+FfJlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8DwyCRA9TVsSAnZWagAAnmkP/2S3NFCooWKgRAXTQ7eB\nm2CeSwV2O9wj1s8OUs8vsBOP7ADGhoNyTkNbYheKtdTc4W1sQVPirJg7jTiF\nLYlmp6CjcrfO0TM9/gT29ZPOaJzUtHFP5Rq4fS5T5zbkzAoLocnO6VF/021c\n6nj1vUYoopKpjJJ/d1ZlXbX/9uw7eN6rtreGDWgQGZ+IJvY2KJdEe5tPv8n4\ncUAdPTn2qfhFat+gfvIRPoDzT2hPcBdSgw+ZHliFt12csvOZNqEEj/jaxvnT\nwlpvZW8LeWW1Q5Q9GB3QT3OTKN5RbcrDr+Q4wWCXN2J7L+zzgYe47miZ7Jti\nTjAS5hYiEV9YxmwSJTcmN+bY+slkPhqkmsQJoCcKiGIW4j/4yFtfyy1h2nfc\n+FHw2QdPsz/nBSBFk4ZUrBT2IkLEhyzP84WOhHjkKcm/FNJFc33XTUXzl8ju\nWPUIA/HypEmxMRFutGP2ux40h7cV3aPN1vCUXarBTpuci2ijXW5BxSpNrnjI\nwoYnFrp87RQj1BUhd0ETHy3UaTMLRi3VPTmkiCiFSnJjtDGTyYGaE6zfdxfB\nSKXl5MWzsyzvgRK96ndxK/hyo3XrQfPZ1pYAhxen479PWsi9bCOXbJdEsxLh\nT389bZ+n//QbS0YSqkfHtLTXyzSQf6cWLShvGefe8oAtfPd+WeQD4zsgDYZf\nNjmQ\r\n=JuF9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220251866","@chakra-ui/utils":"0.0.0-pr-20220251866","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220251866"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220251866"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220251866_1643134002352_0.8263731434350181","host":"s3://npm-registry-packages"}},"1.7.2":{"name":"@chakra-ui/layout","version":"1.7.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.2","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":"9ace1147d837360a535802dd5941fe280635ca71","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.2.tgz","fileCount":70,"integrity":"sha512-WwBp7JmDTMC7QvwDnungXjw5t+9njElKOW63FlwV6GVPf9sEyyhWHCsNCvO9GQ2azOkAUcLFNaBlfqDSYdKSPA==","signatures":[{"sig":"MEUCIG1nCjLuK0L3FcjbZ/TpAb91eieD+Erzgm1tz0nK2MseAiEAjXOO+rgCbcl5GSURba9K2mEE1HTvc5BeVjSe86kPM8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8DxYCRA9TVsSAnZWagAACbIP/0M1xuxTyOOijwrrbQvI\nOaDwoXgV1x3P1aT0+h/olPdMoF6DirABFKdB2EPWNbKfNKBwtoA78jnmNQ66\nmgAbtuDJeqbW0H4fWTT6RusO5XLfVuQmcwRpQ9Va2nSDL6FeJ9AQse6V9JUN\n7Q8ApOoR2hB2xVDqxK5Rr3ADoIVoqnA+VGhrnnogEdyhKUPKYo5FHMUxc3ms\nmYg2ttHJKN5hiru2VisN+InxjfzQ5GSaf3D4JxD9jtF+B9SvoC4Ggc4RZV+O\nYqXat9L3tZ+FDWgLXhkn6q7SdFBUBAfUEvPwYqOL5pTy89qAdezKOB6wovQD\nm7IxDB/KT3C/uPDymJ+IrKZn+XwVdhZSRYROcwCW4TDjoJqXmiQa0A/buBKk\nO3D8R5I+fnl+MzfO7CD765xuUIIA1dojvAlpaZnzNeDimLjZjsEplrCTWrjG\nXliK3RBmbyleClECK+B0G6j69l5IBiBVPQ7vaRcrrPhi3TNLyhXTnZ8enn0y\nT4EmcPXRUDx7w6D+NqAebzwBwFN+J9Hscb7OrgoPFfdelpdgcTdqZKDnDKpL\naOE/jU9sJqTzg/xL3KufGyD5/gaDF6tPZ6akW5aRIubbs8Lq5jJuzolCwQoF\nUP4r8J8tR5XEUGmCADTu6MoC2Pv4WTw8PCW7nX28HH5e9pTy/JbtwJf8+Y+T\nGLnG\r\n=3HdC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"2.0.1","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.2_1643134040537_0.968965065026463","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022026181758":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022026181758","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f94a809d465a31fc3ba8709a04375d1401a12b2f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022026181758.tgz","fileCount":70,"integrity":"sha512-61Q0hu1sjSsryO4RHLmNrGe7VsFxx3fsytsD7MUM/vSIhs+GMDuJWD7DUZx4w+mfF6QnwCDPZ7t6GpdFaLawkQ==","signatures":[{"sig":"MEUCIQDaaw8Iy5nHWYuRpldBbCMivh/4MPujcLJXwoHy/kc0jwIgB+BUwmNsKmXJ34cTPwsm1EhnbYQbV0mISV/LsA3dpnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZB5CRA9TVsSAnZWagAA2h8P/A3mzACptA61K/q0iTpx\nCVug2QmuFua1IiRccn0lfX72IDK0TPX2AGaMcLP35QZBQsVkGadgmwssHHte\nRxkDlAKLi9IEZlOsMmHUIw5Jl5NegRQQyERaxzG63/Yj/5CoK768gdg+aJ9E\n150/+IC+0/XF9cLzO6TwWC3JU29Zq9uH+zi3ZTvaqwJ+ohcMXiaaiczAhKUt\nGWTfSRlM2Al4WeBfSHKZPZAxsQgV5chEr63bTr4prVtcmRoIMwi3jcZUaQWl\n8JN5wSOOb6/mgqkRtSX9i3dF/7dIvD8j5Z7WN1+5aJww0pkW9wEEEE0KxKnn\n/SDOruD2KGBCZ6PEXSC/Jw6aueHGV1jALoUicFRgl69Q4s/Rt6ieBM51bcOa\ndKZwQxAc74R+7uRxytWOuNkQMa4yMolUwYc4C4rnQ70WKl/j5MK3VHosGQ+K\niT5/vzTU/cGFUDqRk80qnL4PiWUi56HARLeMCyDANS/qCAQdJvgTQxrb4Or7\nfLOic6PJrEi20/Zc9mM7JLaCJc0m3Ca/ngnG0aE+KticM28AxJzUMfJmLurO\nr+1jVzxYYfRDRLfL8wX+rgyzVMZVBjtRl6m6QUAFl6veOTfSM/bImQqsB6Vs\nO6efTszwkjb50Gxi7aSniHk55xGbdm+SLjUpEhBBl0frCI7SBAWv7/wjcYI1\nC8pR\r\n=I+so\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022026181758","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022026181758"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022026181758"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022026181758_1643221112913_0.5495046386770102","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022026182926":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022026182926","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4ae4eb05d69b60252e08da951804daea5362a3d9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022026182926.tgz","fileCount":70,"integrity":"sha512-P/D7egczAx8dbvm+UzQrze2mUK0q3cmK+oGcP2U7J+c3p5eNwAbwYhH2jw/9fGpYJaC18+hD0cgahm4b9FPvfw==","signatures":[{"sig":"MEUCIB+a/Rj8fIqsvDDcuOffN5o0zYo+dtS9aAfYnKYhyiqUAiEAg8Y5rwiYLutI+nWhwdLI3E/maZpZjg21glU/MC8PMZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZMgCRA9TVsSAnZWagAA8ccP/R5TR7eAKewJP94w13ro\nb7e//07LkEQ2KABWFFYcNT+OHo/WIaeItVmOE6dUJbS2V9zrdxY9RrXImU8g\n5ct8R2MwuOjiDegjEnl0h7bG6eVhv9hlPlp/CbLRcQqjKHzvQwrodW2e1q9E\nJetApedfF9IJiUGVaT46EiU/DyVDM2Bi8Aor5nE578DHx7ixXdKtBa2lB5Bf\n1tvkNd4xyityyGjOS/LOZ9iFLtsemBCCCla0HBOecKDtgz57pAM+ySw7hUrs\nPN0Yeo2VnDSrM1UbrJiaHQ73SlbKbkqTbXeS5LTi59gQucxawc4OCxYTzznM\nWWetfxkbWTc46oQu52fRIT/HKi/OuHEYnMpa04DPsgsqhO3yfftPakt4AVwQ\nLQxpD5pyjAAsZwCSqx3el6IUKCQ3Uyd0gpbdTkQG+hr/p6OzmKnfak0oEkBi\nc+XPCOBZWOjGDOYVwfK4x5QK7QMHZ7Zu7Kqy5ebuUBn2RxiEZZcvRZqGmOZF\ncJN2ug8DW20u9SoUc+CNDplnmjrwkinY82GAs6/0qsDUnZdd7byTaR3a01p0\nXdAfPM7prnAgZfgJYgAXQjxFnQKXnDHJvuOtF/7kfdaDz82lJWFii7/4zvu6\nFfO3z1ooQDug1w7MDJCqFpioMo7LTiSqnPtqSyMmdHjU8nAn4o0YTu4bT/Uj\nXZfZ\r\n=eQkk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022026182926","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022026182926"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022026182926"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022026182926_1643221792106_0.5690526599899737","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022026182947":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022026182947","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9e612aa0eebd7d4632b03f91c611994a2846ed60","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022026182947.tgz","fileCount":70,"integrity":"sha512-sy73dfiCYLPtmDaGxtHr04EUUOegc/2U04YEC8cdk1lXsQYrSllUwq5oLp6tudSRneUCpQtiNu7CGCIspD00Vw==","signatures":[{"sig":"MEYCIQD+WGU6TzvZ6vxWTSI0RCSESeoZiG21BlVzAVugzWnHXQIhAPdoEeSgtPln7lSstuBU425MUr1UpZIrkxT/G3fj6OZn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZM3CRA9TVsSAnZWagAAxM0P+waxbk/ng7TcNYnikkF1\nY/l4hvhtzBWsc4FnLwRNQEfK9kBZfGgf8MMput+NzXzNfTs64SVYqzBqL4mh\nxNfXYquqmPWo+8R4MYhm55JJ6WKtF02HeWY2YjEd+QFG6zH8Uo5CYMbABdzg\nhDGfssffmL0bkagU1SpseESnzs5Xh10nUAP9ax571n/2+VVMVp1FtNbjrYs5\nHiYLEAcB9r2CMHufAp1qs2x8R3E88ksg8/8Qmx6LuCM7WLCI7TgmRreWmIcs\nac8ldqgPaUq8u8tcPLz69GcJjgTOxMxsHiLweDd83bCTzGMiCRBstn9dhlIK\nvR0RYmCVGilwA3vYJSwMGegzXWE5uNqaQlux62tkXPKAHlx6uWbLmkwmZqDZ\n+4CIRbJLR4N5jWBkNGXkWwJnXX+Uci5Kz3Oi4phInrHUCsO/JQJZ2BzHXtIQ\nUcXIGyOCH8o4qYnkrq17zaRG7Iw0XlBnj6qYmJj8hoBDlpo2gGTU4dEhjWga\n9nXkNu8YYlihmvQCkLkyHTULGNd8JacXcQxQ9QKIkcsFPFTLJdgCjxVsylVf\ns1d7vdHhpnYzUYPZtAuZGNnfDDBXuDowPwSu03unryZzez8ZC0UhQz+orbve\npCqyQAlG0q5Pz9zPeFD8Z1teQtcEQcSJj7FFOSLlzunE5ncNgABDzUe7NRWN\nBBoN\r\n=kJhQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022026182947","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022026182947"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022026182947"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022026182947_1643221815709_0.9916922390005913","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202618407":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202202618407","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9e5031712bf0bdb266e7b01a61f007123f2350d1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202202618407.tgz","fileCount":70,"integrity":"sha512-fkuGYTXBo4kVJp//57KQT4NayQabj1RjpZKTKh68x4sBB6AF7lrHSgD7BNaUh6q4HXv6w3onKVscb6WCRDttJQ==","signatures":[{"sig":"MEYCIQCYPeAqR84nT4hekxx9oR7qpgeM/JgyH/1eWSJN+1N3WAIhAKoztbFhLoTzxlbnRb5BK/ljqxSSmnz/DwFRaYKk0EGa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZWhCRA9TVsSAnZWagAAHHgP/jgsbR9iDvXM7nBXHKXa\nd0jX+6tIS+v3TiupPaKvb23uC01CoGE74RWnGA7w4bswqSDSUN5kpHAx+JUX\nK3XP1qOi5TMvVRFu4IOuUwitJpSKy/UUCC0cqW2V0g1vIrmTguoZMrO92aLn\n8PZpfVUGHvL7U68MMgEYJm80cigwLBDzw1QYGRJT3q8TZCBnHskssPWwpO9r\ngYSS7quRWLwKn8mzdHTmXz6wab7+np+sgCrkk7TQgZmc6RHJZb91vYQkp1uY\nCq58V/6V5RVL47/ErwKf7G8cZKPRgcawmzhrhnCX1LYipMUtvRWDofcVUzGi\nIMjFe3LcIwW5UAeBaIrl/9DnLKAKRLc5tY4vqtQtyjyowbLEP8tfGlt6EjTP\nvkEwTIzQ9HfmF9ooUGzILKOGHOtLzgAeAKdKBC+blaidqGw+Df1vGvGHFPrS\n7a32BfV9UBFOrTajX22tsihNblfNbQUBcguOzuKdyCvxyLuFjnNbm20PMiIQ\nAnu/7Rb34zAak0mg5JDWONYfqhVZKCJzDXeT5sU7ODg0oRuKojue0tW+6WLf\nhHLMNU50dk/LKzwSNgPfqH8mVl1MQKZoVte1/5ZG4GxW6NBtNnDdrn5y5FEP\nPrDts3//62KEs5omTq1yOCDK2Opz3i2XxEjZJpPoFtD4XLncXCrEEqnBO7jC\nTXvc\r\n=TCxZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202202618407","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202202618407"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202202618407"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202202618407_1643222433653_0.6349712600696724","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220300344":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20220300344","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f88f8ba88e4c2c8b3bd615275a1fd6926552e469","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20220300344.tgz","fileCount":70,"integrity":"sha512-gvUTvLJPqhITQVRZg9Zzm6gku/4YvlE8Z38x2rpCy6DyNZ+Z8X50PzBgoHMdkmVmyXlWlNSYseHjLmpfkWwJgg==","signatures":[{"sig":"MEYCIQDA0AFs4heYp4TM6VIle6z4+oyNTzp/S7pZygfo1ige+wIhAMbahkbQT4rZNsU79yxqD10rk7BgCaU3+flVRjLAGdNT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9dX9CRA9TVsSAnZWagAAcdYP/2Vo4ZBd2R9UDtFj1wt2\n7b5rcj0Rs4WAEv4CfZPM4cbnvCprNe5c9nDFOjXOswULBIfIRuF8+wJoxrAG\nIFz3A5uacUo4/igs/s96zVEJQifyQH7w4MLkNDcbaP29Owmy2TQVoUpJ08AY\nCooYeRyi5ii12qjlhGEM/HW/JdIkxny/FoG9R3J8S2dyBIzuGzxbkcUEIwBk\nQBlLfCBJwcI0PA0FzVquN54WW1o/QWTwj7/BT7zHQVifurpdqd9YenjC5pmx\nOa9grHGWrJzLHZ7MVDnAwRpzabPJ5EmvKS9nakHAgYQ1rpeeOwvqT6qr6Wsd\nbXfOTnsUQw/sx4jwruL8NxQd31OVYK9aUQSJdR4f5HTgQxieYNmLMUkwL0v4\nKs9wlj4D686Z+k4fNdYW4bVFj/4DBHg0h+xm50DmuEqBYRN7lcxLrha/HK1W\niihjmIF7qqvMsiaZG0J6et8cUQK2TzvR7KIznkh8LKvjm7vzOZeuoa2O4bb3\nzuxk4AyAOWrW+zfIIrd6r2qiXE7DnTbC8m8jjeRE9pOXLgfsBwBTzy1PXuxj\niIKMMc/PQhf4rmrad3TY3UwHztXBEFPcG0zHIkC5pD5PawxCJEqcaWdTUn9C\nQsCrKI9Vl9WOUSJGsaL76f2O7txZgAB2I5HMO9/JKHrE+CPKlsaNTFBVzK9N\nTxXw\r\n=kgRe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20220300344","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20220300344"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20220300344"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20220300344_1643501053586_0.7249966721482699","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221152957":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221152957","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5630f4e86da0a179ac637c8f4c8e8680938caefb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221152957.tgz","fileCount":70,"integrity":"sha512-HufmcG+nnSkz0r2g/o40kYEvDWtZSd1eMTlZDuBn+y+jI7n2vxRl3OJD8kkMn9A9jbk+u+xZc/tceorCQccXdQ==","signatures":[{"sig":"MEYCIQC1gakNMU3XiclFQ8ROB01OX/dNghHAofwHCQyXXolGgwIhANOgvAzeVC7Yf0hihshHPcXsMyLQZaVlkDeRKugoei4R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+MV2CRA9TVsSAnZWagAAJ4oP/jEu7bZ1ENE6IN4QSSOT\nFl+OEASwvEnSNnE/zmK6HN62nGUq0MOA1R7uh+KwijZ1mzbHWTb87PIH6O0L\nZQnVO5w6ah2VsjPKYjJ7DevAODD7jyYVDTscFlz4z8esPeIjNNYV2cDh0tuW\nQxrhYphtbdyQLDFP3jU1ma3+QzKEXf0HvGXBQIBa3Hr4Dt9Y5TfUySrvShpv\ndKR5HvxsVQI3LWXHZoHmxCOA8OhgxVXWJbzF1aLznc2oiJFkFvw4UUVKWSw2\nOJh+l1Cr1iWhowNcTgGCoV6vZkjc5wz4OluL/wkMegGmVzL6MWVYweOKlwwF\nxPG5Jvg+UbNNRQ2QMOGIua98n49lYGDvq3uH1kHEcF1DaEkO7hbfriL1m6A5\nNB/IEr0j6jVeqAqIzaDmT7Gc7wemsbkkXP/eg19c2TFMfAjj0uMR7rWYLDzU\nMlkmE1IQilwYAU63ICUJa+x1bzYYWKdayiz1ffySQG7J+458IPfekPMzuvoo\nVuqVY1x7/qTwtK5Kihd4sJMi/EY+KXDcC3qbWUqJdJB+OIXJotwM/Xp/2ph3\nNgXTys3SJNyYoCwBekN1UFA9oHexBzRwZKzi4OVxDt5JsoIr0eVcVJ5KcXmD\nFmnvrPbkbY4fbMyefUsT9bG1B5Dam1YKRPg+IDgjNh6sSkXJyQrd8W0XuUsu\n6ahu\r\n=cgOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221152957","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20221152957"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20221152957"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221152957_1643693429997_0.6871162684988494","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221153122":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221153122","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c15ed2dfe7ab1b52ba4f4b3fb5a6eb8ed35b6eb7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221153122.tgz","fileCount":70,"integrity":"sha512-WEYBip8ArLV6ahTktK2+ri9zoJckpCZrgfwZXEpXmjfhuxJQRq4QJ7My1ccjMIvU56BaApJTDuOP4FE9elZuAw==","signatures":[{"sig":"MEUCIHiZ8EK4rVtRnWk1RIDmWXdVrL35cWHhNcKY2szcWtuSAiEA6oNgcG84reH6EIQfyqVs6UVwiFDYNg8ed4Tf1HwnLX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+MXKCRA9TVsSAnZWagAAFBMP/24a+Wa2ietXjfOkcX3H\n8b0EiwscjAV66E9eziCZKZG3hH0EHhIxUf6LyFi1ef/ATd50uDlj0doNmTMx\nX3UDrxGE95t7PhCYII5c2gdU+sJSVo4nzuUko0yNJ8de3rODmS1u27s7KgfB\nnx2hmNFSqce4b8bznz0VDIb0h6fjGhYMY6DXw5qlRYINPwiU38/2aUjFMqPs\nI7gPKnWug9WbNrpSac80SdfvG+wLpo3YD6sINKtc8Cs75FiBifL2y/Bd6kR3\n9ibdfKRVEyB1IF72VVUebvB/EXL0i1pOzNDjk/udsCbeQG6PWfruUYHbXLxJ\nL1Bgsb8QSb47kR6DqkxjQ1mOf0fgOxG+i1DJwZISbBmM/nUjI5chE2OzcKFi\n5apTw8x0nL3HjkGz8lcYpcvV2PWhAZcPfzbCkHJUB/daJ1W0bdFoGu6E0fsr\n1h3nyhtN8+5PY3PIsOmeet6ipwaO91tTP2H3rWC+ovUA1wa7nYeJqF9Ecrd5\n4HJtZFZ1EaJhYXIPYLTsqvZOpDzGVZkF6oE+QaHmL24xQCpqZG5RPBGSrhUi\nMC0UGsIbgZHsDttRVvlyVtNIHqP5J/WQ0FB8JNVV/egBgWo04EhVkJDGNYvA\npsmoMZd79ZOcd3pmPI+YagMN8yuOnnyRNP3ksfL1KexV9rEDWs4lTyzESY7s\n0Yku\r\n=X1FC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221153122","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221153122"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221153122"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221153122_1643693514574_0.7100665083198097","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221173228":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221173228","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0c8a5373a4eab534f8d0271a824cec06c16e621c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221173228.tgz","fileCount":70,"integrity":"sha512-2I8hQLO4MwPtMkpCUXrXrI/q4V3G4IK8/9TwkMltDJK8nxQ3v44FCTq9rvLNE+pviTVS5Q0zO+ELylK10n8Tag==","signatures":[{"sig":"MEYCIQDzqzSN2weGjC7JUanFcBz3IzTlm4nyn9Mg4eTjijsBkAIhAN5v+R6yG0vIvrLDAX2BRwT3SLApiDGxJ941WHITjMWw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+OIqCRA9TVsSAnZWagAArVoP/3XquL7yPrRS1szYYS6A\nJcmd0fXCJwirpT+ttVmIJeWse/nnQjH8TRROeBn2sN4vgDf92FdUJSZW/jQy\n0dZAQJgiHcVOWU2RHeEaX/3OKbDrpRfFEXgoygrUQEhC1UzfhJiYxw5o7DFc\nHxvajSZ+jVDZFtaYaGwnj9hKLFAqBtiKlNvQQpI9Ag/j/X59ntpYGMsGMNHC\nALYdV81WVD3IoUORCXU8tDYgB4BzoY6N2xoC9zjY5XbyDXOgvjU0VS3SGLC+\n0I2CZWoMJaWvY8WzsltftMYZJ8mgcGRoCqDCqhkLv5zkpSMdGfiGb1p1RBFN\nY+vGlFeNUuI33QBT10M7TONqn1Ni48iZWBebdN0KKT0SxWkBJlcx4jPCyDd9\nBe5pllxQgqCr5soEq4ZBmJL77bYNoAqrrYJsFgQ83Ir883aRom5C6Nhc8j89\nxRjMFwAwo2UouoULv1ncDPwG4GIud2Dr7tQabeYG3t7IOQeY7zO+fmYlpTXc\nqSbaEIoiXtzGjwy67h80f/MVY2iKdNHwagF63wT5y1+x7G/pRyaNkotp66Md\n8/V5CdOnJCywnfrhfK05/WDw/h9P9gbHtsMQfrn1o/SG+neGGbnfl2E5mtM+\nqNQWSTBPdFmnz72ajBg6+pTY0lYnOxx+rCLSFgZIuk7EZufpqqe4rnx9Jn06\nNN0N\r\n=CL/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221173228","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221173228"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221173228"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221173228_1643700778480_0.8229661825299799","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221173648":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221173648","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"fbf60dd8beec71ea04b7acf578f60e129f87c816","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221173648.tgz","fileCount":70,"integrity":"sha512-LDX5BwLGpgAPkolo5GbmKZyO2MNc9FXSxyO8WL1qB+LVp2/yM2cT8IrMmjKknf0jVvMAQnHsX+LgGox83j+MjQ==","signatures":[{"sig":"MEUCIQDeJIl3kmec8ZHza9TJTDi3AUPVAw2s5Aj126RElKfdbQIgNjF4FaIlkWzBKfqqo6Bdpy+JPcQIe10wKbc0RywThTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+OMzCRA9TVsSAnZWagAAZtQQAJIU1JmY8zn2tog6ieyV\nWm/Lyo/VZtI9mmxOw29TJ6O1TB9GeEfQA9i4zVNEbWM0+0RbpRozSoo+qgF0\nN+TLGK6VwfzSQMC3Lyp0nOyAu0fThXGPD9iTmDSIy6Kc+JKGJ94loGBbhhUT\n99RnhJIYiC5Hfdpv6+nEyO9DBECei/y13lCj2DmLMOK5CZjtdD9KgeujoijW\nqF5//8YoJrVHbt2XfzthXcYXE2P24MhHOx/OKCx9JKtqrGtpBlv7ZF+OTdai\njK977bWnvjsPr+wvThX0YKqx59KiZA4mKcjZQKUWr6fm1J9VscoMw6cpJXX4\nYvOs39CcYpF9Ea/T464W51qTRaGSBztmwpXZJhYmf3bK8TTDkoxL0AXBhn56\nnXIkRIxVjN7+c8u/FE52rQd8ROPtDd49air4Qt5w3qHefKqqE5LmFRIo/Gux\n7CIt1y0pXL2yekKfEuZLVOUTF4hkObvs1yfJex83Q+7seKdE8HIFbTr78v8l\n2O/IQyKYG4aQdRLll49RcxYO5pp3aIC+QFc+GcvKiSBsiAfn96ocKoKqlnkM\nAgNf8yxlXUQm4OrPQG4dvMhBtxRdFwvLxMiOiVJDgjf5yLbhWsh66Uu9F7Qh\nav+dKLmzgFC5ty7twvF0/koBlymmPuparYLEhZD8pP1cF4ve/DOT4hsVGdUE\nbEWS\r\n=Wkt4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221173648","@chakra-ui/utils":"0.0.0-pr-20221173648","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221173648"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221173648"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221173648_1643701042965_0.3420866752067049","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211224055":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202211224055","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ab98f8fe552dd3d3e90a545ddb22f5697236bf57","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202211224055.tgz","fileCount":70,"integrity":"sha512-tsRWBQte8qJD3Ss4mZBGWXxAD34v9DT7TMX0Nw2157NDFmsXJRo8uaU3aS8wb45y48Eslyaj5pTBbCc11G98wg==","signatures":[{"sig":"MEUCIQD3/Q94K+ihwwhXJYHqOfqDx3lZ1DWMMSJS0NPskmMm0wIgBFRxNDYmrnRYpPDu4XxgUkF4ajkxrn01wk6LuyqnFEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+bcSCRA9TVsSAnZWagAAfckQAI6Yt5XRLfPQYNSkAgkJ\nUkeHvvNlJXD5FrwAEFX17YWKl73eFeM4zM2sKyfWYeW4qpCrcFsv/tVrwcmK\nwD71Ma0nV7jxEkwACVU//nmjXnyfcJQaQKEkS0nVHg73YBQJqINyjUK7bPVp\n65zi3/QLxmb6vkFyWgK8ZL5+smrTwe6ur/xOI84gx583hX1b6ocHCrJ4Qdtv\n3kBBVuNSUf/RkbuQpBqhR4flI+rhWPlf1Tw318XvcKLPyQowCowCg6AHYeO+\nuSOFNExfQ4sPaL7EVFI45lRG9urOLU3CMFNYZipIU3hTyg74LTYfTgTRi4+L\nnuHp0bm2gUTbrzYwRQUGGo1SdSn8PR8SqRbhXhSXS8hqHYyhVpGHrMeVe6/A\n1QUhD1xu3Z5qFgltx+LL4SRD63nH6SmpDS3n6d1M1Ifg1WyRW6W+J11xayFi\nOwCuBB4Zgn7s/xYfwAPMW4SHlw/FERi/zEITa90O90PEnBD2fU8OwbBIdAbu\nGs+gGOz+IlpTxlDPrP59fnqGBIus+nh2d3gBOx5zHCeTV2JYotXMQ0q4yrF2\n8wfHx0e2cIRAWLdH4RAkR13XCuXeNqBvrjIKhLTbMax3Ja3p1vCw2yanziMr\nnXhujsUjKEe+nFERPf9zvjXF3fjobzDtfYbzg9e+xbHnQrmgt4y1fF6S/XJ8\npA2W\r\n=VscS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202211224055","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202211224055"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202211224055"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202211224055_1643755282022_0.2764081360692143","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211224227":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202211224227","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5f086a302a2b467b646057d8a283a2220449c119","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202211224227.tgz","fileCount":70,"integrity":"sha512-t2gESwbRJHvcmSC6X1L+sfaxrsdr7dwFVHoKn32HP7tdyJKeaCyIfayfvV1HCGZp4YZ08OjHdiHrprIESEZkvg==","signatures":[{"sig":"MEUCIAt4328ONkJecmsmLdGmqobfxFu8DccFEkcR8O6MKolrAiEAhGIjBAOe3cukSFb3nCnF93U+wBLJvRBGVNs+JxIKfDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+bdzCRA9TVsSAnZWagAALwsP/1Co6BzQtlNwh/pO/Lbz\n5CWmWYHi/YR9MXOlVcUdH4aM5NuiHDHMqFzSbfEW9YmiP5gLRKtRp0B4Udel\n+lKwG7heqxqomukiAepoaW00QfxqoFQZ2vq8dW9T7Xyta5plCbRuZJh2NvnV\nftQfy3Xek/i4TmNutnfyRlKQARTDPcfXbP7S0IGlYto0JzdIQauFDhjd73QH\n6t+hDVntjDbQseIIpCDEVErW/xxX67fHp1jU3A3A6CxvbFGmMN+MNv/0Qxzb\n4e1rTktZEd4TMMPMUm1LY3sAKToE4BvWM4hexZmczvSpcQJ3Jz1UjOMNuFD6\nqXSgTUJ9YvivU6hd9e5NCAxADVvZa0cDSLZcq+JqDicyQB7nLNoSMml7j8Qq\nLz2K/l/x30oIf0cuhUpDc/32W3kCkIEp3iDD81jLbN0h5l7TNt5JftO/Vo1g\n3xt1HRfzvpXFxFNM2Sb9ez6QEycChrXyzK19Y6SnAqfYLcDroHSpmIj1YL7J\n0V1CtE8uLvNsIKMjtR6aANUQ0VOVAjc2AOSIMEqc2u5BBfOmpJ7iRJYXuN7y\nFoJGe1RcQiQmHOXufmYQBCgv4uIQstEieq58hH5UAEAfuPpQiAGVJ4qoktvq\npUhagV89w6ImvB3Jd1H2ViW/0g0QMaAgHzqzhSFyugllwUMebtV01NWEdRxJ\nPqcV\r\n=DRTH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202211224227","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202211224227"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202211224227"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202211224227_1643755379583_0.216855346411698","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221263638":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221263638","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"25ca8bd11c0aff49902bb28ad7bb0fe7ae7b089f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221263638.tgz","fileCount":70,"integrity":"sha512-bkM8BSzia+aDWbfrXNssEd9l1V85hbSnWsAIVhU6L8wTPBNe1dGCqrvE6St4O0qNxNfWwgzeJ5qwqzs7n5teLA==","signatures":[{"sig":"MEYCIQCj/T1vseBVcfMyZIyjHp6Xqe36YFPk4mX3c7qx+321bwIhAMcO0wEw3Ff/n1ZrPNUmSfLNrWQzIkHn5AMg8p5D976q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+iafCRA9TVsSAnZWagAAwmwP/1gw+6qb3Sz5wrv0w96r\nJfa0YQ5soE3mj8N3qJjtej8KSVKq/napUbQhwchJhkj3sCcIMXGrdhiGx2zx\n2CDuDR9aiU4hhlRS081loOxOj3FL6GdZ/uhxDy1hTBLETsesUKHoF6tMP8ZJ\ngJ5G1pJDRyxHaVrgi+yOAenRBoeWqZNY3kCcsWAqq+aYOdu2JhvfEgI5e7kZ\nRmhCSndT7+Lon+91/ncBecHrVmwlZ3Efle+IHs1yhrEM4Ji63aoM2/FKvvHZ\nGh+en66brxxoMGy+NaF6toxuOTFiQWwjsMBI8+wDopgkuhnptTL5XtkYPpbT\npKoA6OP2175k4kfPl44UIp4PCCxOCzlMsCJ/gSuB/Mut/e8nV35+WUv9v8Ra\neIOKeWuHEpj6WGhbfXBb22lk1Baynu15dlWUsBOOaQnDfzDwMo827iLF7teL\nYvu9WwslyLPp4Yp/rZIYjRMLVYtbRwObSIVZHqIO2tMKobsa4XO+7kQhh+b7\nfBwEuWOv5hUlCvy+mz9C2RHIPKHYpnpLQm4mDXb8XUSlfEVtjuyuKct0zX2V\nMr/8XnD1PbiOqR4FSlA+cWPexfg3QWJrg97D8JHh6/aC+46ApGRXf7CJCTB0\nVK0I+Gx2l+W37DbD/KZ2rtnxgIQvLilvh1bVj6TFUANJFgBPLKlV0TndI8z+\nZMhj\r\n=fEpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221263638","@chakra-ui/utils":"0.0.0-pr-20221263638","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221263638"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221263638"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221263638_1643783839439_0.8317799540867157","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221263715":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221263715","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"05225c065f416ae4a2aa59e723132310f080fc06","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221263715.tgz","fileCount":70,"integrity":"sha512-SOYlv9i2jWJ60iwlc5NSxCpts+aB8QtXxvHB1BeyhwmwT59VhBuXSQcgEUZRwaw4h1EkuHyrGQuXtq83A+OQSA==","signatures":[{"sig":"MEUCIQC2HT9MkemEqlRUkkObeGZUmGuLy60mAzA1X2JnA6rf7AIgOqA/xDmM8PvQicRt21TFz74XGJ4v3eJ67ekr/tPre+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+ia9CRA9TVsSAnZWagAAd7kP/RoI8q6WdHYIh5Du23mH\n50M9PWxCCy5b5oW3faprcq3R37XNEdYkrJqfslvm4mB3bjYoaK0aP54+xNFs\nPS4mVUwNK8xwu+v+05pMTRkE+NPT9uhfHmFmYZHZ44VbYKguYyJihn3ZcIwk\n3HJecOBPGiuYV9zr5tR33CtUoS/EwugoMEwFIw0LHu2vfPFe06pxostw6FVI\nSnxYAaxWQM5HelceqoMVqDaRgEwR2Fkgvd1pXLe4VpsMjOPII466yWGMA+g0\ntNt3xd2/stvjXlrKimt9lpCvqIipA4AlA0pcQj6KNx0iLUJa81dqrMBZJ8fc\n5DuCb8mF5GvEa4D+teORoxBzAQI8t0Fx7ZDHXoyWcaa4rfZEu4Pp3lY7qiME\n+P2xe2Bn5P/INbrqAAUleZdg/wEVAAWzQ3shT6wJ876LGRGSNxCk8s6CGiT3\nbC7mxQIrmEbLuQmJqnvoqSUcesJLsVZJVCF+kmM5bROH9UVug3OeeFUXZsXw\nkqazZ3eDqd0qYUsHWFeXOd+H6m1J6Is9rlbC5BwRp+A0QK1joarexmLwafv9\nUb8ROZwLR5X+JJSfE+GIdq3yqBLbj4uu24+SshwbST6d+dcZM8h0jetaIb9s\npCMFXula1t8A5KqVaCQ7rrNSqMYbt+u7A6EqsCjmcuPNCc5mLtryD0PDJHgZ\nI/c1\r\n=99JG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221263715","@chakra-ui/utils":"0.0.0-pr-20221263715","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221263715"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221263715"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221263715_1643783869484_0.6612589541614351","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221272130":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221272130","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ad58aacfb68a583a6c9aa086302cbd47c66fd92b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221272130.tgz","fileCount":70,"integrity":"sha512-8ECB91YPDmVH/egjBNv6pJvLyqFKhQRP7wLcKlHsbl1DnrpknuGnsCu6rF6Ptb3cIOgCK48KqSk1YVVNylrLVg==","signatures":[{"sig":"MEQCIC8mNPx//9hUVBMlHmdR1pk7/9ZL4Dv/CPR+td+6il9mAiB1UgnQGL27Ny2Oe4FFpRA0EumJQq9prhn7JOqZj18MRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+jEcCRA9TVsSAnZWagAAZ3IP/2qPpktWOYaCazHntnQm\nBoS0Qg2Z7GAWwp1FQf6AqOQzXGEq4stl2Qv5T9hCA0EWnx+anaXUYHFsV10w\n29iO/Eyot6uTZM4X8ZO/s9dzJ0rPgliGZ/YpyKEvOKOWZL4Ct84hiy3AuSRi\nYKgPL6CChTmaCZWXF+9vIyUiXFGw1laz9PcsUQZinEVKsS5ekRlkeDBkFL1i\nPqouGHWj7IOAXD7L82Q9oQXOdrPTYfeKSzRgvfFj086AZQ9ERez2w3s6gceJ\nayglNafTwDsOxveMWGn2oHoB+AQTSluVI/KI3M8JmitrPZwHbOr6sEAaMQHF\nGp2xWzDav+dXZGiwA9ZStRIvSVD9FA+yzoXFrlfkz7oKQuKkw23hufnmk/L1\nNt1lSVrhh+mfgs1+fWFHa2MT/JnUxiUFKP8uw2hsmwNWF9jsxC8lW0V01UP0\n/cZMumEYA6RQJUXye+TiuLKRsQD1O9cKHOnMra+m66ER09tV2otEWoMe7UeX\nX6+mWBo020xNe43GFf8e3KAp/0pn2SdxLABFIPSZw4c/iwhZ43GoYUWsMlYM\nibZqQVhmnIUrRGnXwHKaDO10tRmW4D5WmO8D26iKQyj7fTrOwzp2FnRnMwE0\nL6NIfFkBGdlGmDy7QV16kZ1/2r/oPbuBvj/430CzHSMt8yY4dA6WxV54MA76\n6GkA\r\n=yU0J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221272130","@chakra-ui/utils":"0.0.0-pr-20221272130","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221272130"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221272130"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221272130_1643786524659_0.7169744758251353","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221272450":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221272450","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2d68012667d6997e96f4286a199fbf47a9b040d7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221272450.tgz","fileCount":70,"integrity":"sha512-TCovDeAxlkpJo/woUIDyBlOss94HrTK4jBzn6kSYfp9WbQ6L8nlf3FlXEjySPSAeU1kwvE7Wa8+z/3B+a8pe/w==","signatures":[{"sig":"MEQCIH9GTdfohlSFIyqiKGfbNVvHOo/3nTGhhoiwKVZw+FNbAiBeY9utKcO2goeJGDmf+jYDdUw9bqdYR8Y3Dnu/FrlTpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+jHnCRA9TVsSAnZWagAAATEQAJHxYNQMjN1URy2ZV+JL\nBVoDsT2x2dp22NTGQ75xEErWxUhydbxhCOffJnppAKw2jQRf7brtPoHWLUX7\ndpp67LSV+j4lGILRPEs70w0cvn5JTIrNx6HzphpaRv2PVC3uA2W7vtXIAm4X\n6jvIQFghBu5b82cu+Q2iq20MD/o7fQ39vBJHkNcYcPpAK/pgnLHdjhB4zWH2\narFYp453DkbH1MjSKOnMp+ptvudzwuO63GKBm+1yZ0uZRfm2JdpvPl7yTaCP\nCrF7oN8xk2JohOohyVhj9hpD9TJ3gXi5y7KbuitA/jHn4NVbeXQ2JM0iXH16\nDrmxvMCyiZeIVlfQg4b7YryedzUygUACcPPzzV4AtZ5HKZ4xgMdHgqPUD7MP\n97AOLNv2Tre7wyr2G78FTTzbFOXItZnPzFQnqX8YAgBkB7FutpSVNAy/g9N9\n+rsGvIB9gIQ+A3Cu+EA34L5zS/OZ/S62hUH4PeySyMpoiAvIKCHEwUIKsuQj\nN2bx/Gny8j2QRG7kqNrKKBjlhCeRJgeRiSF3N0HlXXYZYb0n21AwnLPidNz2\nY/AAaSXdfNDnFknT+LBcft5XnHI8aPuSV65CpYrNjvbo6nRFoeB99Deb/pHw\nO9iSGp+ok0vmviaagKRtJQY+4xS/jt5hYzFhZYCMXAojM4+vR/FwgCCBuKvw\nYrQy\r\n=5Fj1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221272450","@chakra-ui/utils":"0.0.0-pr-20221272450","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221272450"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221272450"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221272450_1643786726922_0.9784407260919663","host":"s3://npm-registry-packages"}},"0.0.0-dev-202213175727":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202213175727","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"150cf8f4cebbb6928bc768a3bb687d520a41e429","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202213175727.tgz","fileCount":70,"integrity":"sha512-+yB5yaramq63RkDA73yEtjdXCK5YExWXiVGV+jNbFIuo41eiiANRjE5AOcpbsEg3nsx4RLdo9B0Pz6aKyMfAEg==","signatures":[{"sig":"MEQCIH/RSIvrs9eXG+NuHqLgTmQtB2dONnez7Fy7d6lOslIzAiAnmbRbVrlvOky+YIX95+2EcVZ+Y84KZY8Ln3SYs8VrFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/BepCRA9TVsSAnZWagAArFwQAJ/PdGKq40W8j79gBIKs\nkammPkyYEfVJEAV4NK4AWha976Joy1PqKUouQaQx1bNh0TJFO1MzsR2kg+3C\nchgoie7spn2UNx1WJTvLOpQXJmVL2xkHfjonTgJlf8aqq960m6r3RihWaZgF\nJKgm6X/piVlEG+D6GiUdtk+Q9m5BzMbjqEXUKdaY2CRcNDFnsMymr+Yi8su2\njii0BSdeBkN1LjPMZPii57BI25f6OAGb1AzK4EKgjvKz3k0+H7Z5bQ79ECas\nbJ1E0hnjZFpTXTYOh9NhgMELUFgK6IbqgObMkNMKeN3GddX6PaL85SEEzrKk\nNqxwfTEN+jjAP4E8eY81vSqHyF4giBfg818WS0T7evVQXcraAgNQZNeRxAhg\nETIqq754abwKWy3RT2uUX02vZKrQhrTCKsdN4yrQSxj1oia1ciWfGluptWdW\nk6xaQqGlXJSN63c6xHZsaWKN1J8M7f8HovcQGPkyWkfFile/1+THH9trbEMZ\n31ODC9mCYgh1ks/KnUhpNYQFaFDjO0FkyV0hDbP3nXl7Zm+3LNhCKKd3MkBn\ngbbxfQq29EXeYEeaYL/MQFNt5AWygKdoM+rzLyx3uHep+LKNt+GaXSRt73jI\nVL73v+Y7N8wUB+HypvLQpjHLKTJ3e7DcNfviKHzdtnw8+Sk+mS5yChvrdXDM\neStO\r\n=MvvT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202213175727","@chakra-ui/utils":"1.10.0","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202213175727"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202213175727"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202213175727_1643911081767_0.9573932478154259","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221462931":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221462931","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"eea5bbb21dcd21931c550ae77f09a50a7f311cff","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221462931.tgz","fileCount":70,"integrity":"sha512-ZbURLI/0z8EJLy1WnC+IjnwB+6DpxjudPeuj3uBt9YS5kfcQlPVp2w5T+YW+1OELQhkkSjItRgQkOhweORshYA==","signatures":[{"sig":"MEUCIEMdEtPMrNOmM6XrTeNlanKznHP4A2cEDkJjmjINcQHvAiEA+OtbWi63ToLPEGcasiNdw4NRT8m1srPOFgQLyHmznKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/Mf6CRA9TVsSAnZWagAAnAoP/iO7xr6WjKrp8HStjDRZ\nfSIM1qM+N/CcTpWkdLR9DL6YucI1KUoSmdtbyqfXdTYWQQ1hI+iKH5AFnlx1\n8GvDEwvIFcQbq3aBX+KeE/moi26dPVIIw4UyTLR0tdFxvUXdSjflL9iWI5Zg\nhGk0HHwqGboKl/vWEzPH4qkY1poJYJShSZLNHwXK63QPlVDKW7nEl9kkJpOh\n4JyrMGDWW11GMu941MRxD4K89RS3s6iP+K62lPyIOFm6FIM9EPVu5jfQRmQ0\nkrn2cpJHonkfnMETYnYgpggx4DSWMUbzf8uNi6grZqGlfUuaDaWZTCZhTOrY\nlgxW6IndO6acHs9moIbw/vH9WjK9mXVr3qVAOOtv3iFwe/haT5y1T8i1br9y\ndymh26ZtcAopH0OVvuwEPJ+Bji9iGJDV3F3Uudg8w9HgvDkJaCuKCjtfWnHz\nIjvXR1A0UOwbloE9lYbBnan7u0fSkWpLLSE1m/SWuxJZkHHiB23od+oENEtB\nbJqKCtR+XwC89cPUH2eZpwrJD6maFVREtzcPp8Du+4XrSAtPIRDuh68VMuAx\nYCXwxsGpf2eZduVXdlmt695IZjcZYfdO6eVejsyj/tk9OvB9blKXdAkd+xKv\n8igwJhIP23x+aNH1EHU6jjC5x+hfLM0IKDnZrbcyB/ZHQsVaezK+OWQM9npP\nc9mS\r\n=SDxf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221462931","@chakra-ui/utils":"0.0.0-pr-20221462931","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221462931"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221462931"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221462931_1643956218768_0.512928484368558","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221463045":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221463045","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ee8ccbc9dbcd2347e20b8ce0ea30aeb483ed3d27","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221463045.tgz","fileCount":70,"integrity":"sha512-XqaGbH9XH+WmSiIYAPnQKEbrgWux0kS38v0RLIEe0gUMOygbQCFVeOu3mr9zVOKQ8iiVvcSyAIp9FRDc1HdF8Q==","signatures":[{"sig":"MEUCIE6iySNUhDUvDo1pAFfJKE6vS2NZg6q2pMXvT9VAuluOAiEAj8BzzHvwQ5xiUxDdw9U+3ikJ0Daqwhic906hAVr3R+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/MhCCRA9TVsSAnZWagAAb8sP/2XoV8V2k9E9+g4F1oKH\nCmU0W2GU++EJZqvSh0SHp6EWdWyEE6M1CUQQGnvLCSX09RgKVbB99chnKyOP\nsS5J24cgFINTojPtR93hTdEs+V2ylgzcFVv/+a6vUYPaD//bGx8Hb5z46wAK\naAEl/wG297F+b8sYMoQQFxqwzOPA08Ob8+WHbBNHhpeTPpIchv/hMThCyYHx\npZ+jc382CduD0MTwJjzDmq/9wxvpUwdqQ7Zhvh7GXVpW0CtwlfjWVxKaK6xO\nXxP+QMszTMpZ3xdqU8CJJDZvQtti79mRLANt3K2SRqjamlCvrzWt6QbowYlg\nCV0bI8aX6bgmbnY9KJSKKlcjaGxBTUmug/J+/h7MCsMzKD7bUd5FjrCy562a\neCP9bXe/40VvVUveeE7ORThfwxRpojF7dWm0XzPpUDRI10u6IRCzCY98vcsP\nrkcloQFrQLb8IXhaIVbnbZDeoe7+MLTU9L5Y6pCzvIHaXcaf+wW+4eS/7nQ1\nMD9o1r9tW+QEBNdez2FQzxkYs6Qn8Q0EKq8vkxu8L6/N8Iooj7lgf0lCM/lK\nPnOl2F2fqbewHbnq+UUHAPsfvjYnrfNwqz/93mcZg8+nTok0FHdasaEaISyu\nuz5EZ/PMRpjl+Ci8+6KPSXz8yKZXs0isl1YNuSRVn8geqmyzdvVFCfQxNrrp\nnkU7\r\n=thH0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221463045","@chakra-ui/utils":"0.0.0-dev-20221463045","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20221463045"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20221463045"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221463045_1643956290102_0.23669295255817224","host":"s3://npm-registry-packages"}},"1.7.3":{"name":"@chakra-ui/layout","version":"1.7.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.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":"5c52467632c911fe58005627b4f14812558b2861","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.3.tgz","fileCount":70,"integrity":"sha512-EJuk2QlCMSVXFrGZh+D9sKHyWCBHi6pp6X9ZpgM3KrEcakOyxN+2nmhEeZIuCcZshfxLK45yH9PifSPWtrHeWw==","signatures":[{"sig":"MEUCIQD2QKmit1/0M6t2FiRLDi6dsm788E9I2CP++TwbKxohugIgKeeqXGfof6ct6Z3KI1dX91lzUaS/pouaJiowza7bXzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/MlGCRA9TVsSAnZWagAAS8EP+wceCXmKAlE/ZSOlwGRK\nFGpjSJh7mo5c8nKQTz4uBBr5hXmI43wd5OiAsS7zV2Wx6OyIUgEbuNFvstxw\nPG8wdAFjfAAYN/bBvtc5uLy4H2nScfpA3+lnQnGZ5B+MXEj3c6JPhIHDyRmV\ncxCuklr2momq4/UU6wjexnx3s/a2QncYMzUeLP6igDT2vS5XbVublk5XwkYr\nvvozC9Lxx/XLfTsfU4MGY1jo5qkUqYoq7TWzzhkw40ETuqMNcX4kVRBuG851\nZZp3Y7kZS3zrVspzBTpVnB9TjgWbv23ZA+sOnBO6bIr9bGXqBO8hIpDCDcIl\n8cKqQEVLvKqfnb4USFQR6ASWqCu7Z+ORBzPFr6pj+hs7z4YHBFIg+BiIxHBU\nT9ed0D2McXOXudOXFTvaCSp63pKJd4u9Bd24va+zY/NlIYkEV4azmWtkD274\nwLdKpkSkJL7BVS+x4zWF1/4njROn7v/SWjdC5yAXpkhuaonIzIICIOOkpuVQ\nWB0QASyOS9JhaCt8d/cC82n8yIOkWoQIB424oebwpjL9JHhzK/uKU+HHuOKX\n1Bc7n6x8x8p2GcImwM01WMhTkqHZNTvXqBRoVyrhJwBA31h7GYtMuVo+Of4T\nZeLeQ44VXR/hnHvgVW0taa2RRQc5XnvNtUfqBGTVzHhui6xOvmId24n405zJ\nJUtP\r\n=iWvs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"78f01d04020525a6696ba97e7dbda956b692d080","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"2.0.2","@chakra-ui/utils":"1.10.1","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.2"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.3_1643956549857_0.05762628522676816","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214171317":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202214171317","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"48b6ec669a01ee1add8f38aa40156ae8e34d991b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202214171317.tgz","fileCount":70,"integrity":"sha512-s6meXVGXiDy9vE1DuZ4xSdBbX16vlN/9vJLfAYQiSujjghyCMjduRu/LhQm3fMr93yNhZRUrYcS6EH9tgEWI/A==","signatures":[{"sig":"MEUCIQC6/sesX/T+rd7yAOzFOpxO8eIrMNB7VfIjrYs1/67E2wIgI1C6BQ/SLtuzpqr2NhIYcPJU5vqjvFIFGkIvUMWxvJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/V7YCRA9TVsSAnZWagAAPngP/iRWY7MyG7DEqOO16hVk\nk0/1+S8SZeoR2dze7X45ANGfqD7nWqCJMLVBREQ7vV/eI13StT68T7zASsDo\nSUYTIC9f2ilslGkBU/E1tHEuEFeBb7s66EeMWlNT6dvAlLEm2uZTnfhfp6i5\nQf+ERyBQxC31umEYE9SSLJtbelRYGmfeliDPxVgPCrWNXVCgGoQ46rs27dpW\nqMswLh3q5tOln+FIQqO0f5JOvlrc7HvKieprRf8E0sWATgq2bkFth1eCo0VQ\n4j5NXA8RuCnp2lRs2bC8ifZ3pxvRH3O4PkN/x90iIgqjGXY91TWCia4EnDyp\n/FEY0xrsAljzcEGiSgXFr/YDuAP2mmylra4HmBXQGDCXMUwJNcS0KcnQ1h59\nYFE3P0UshiQxj61nw2T/BdP2zPY5WyPc51AyvsWmrbL/AFeCnNo1T8B4T3za\nGQij/Lbg+1c49dgHVg4qfYkyN0ThFxWJXjDEnvf2jJv/U5pFTUOJ/ZP4Pdc5\n2VfkkmaTsfV/U7f/8C3clYhtyZuAJZjb8DMqTo+QwU9NDXWIXW1VFog1Z7gr\nFKYqkGEAaAzjNLisxMLBgavEB5rnPDktdTZCeF6ylO3zvX+O5+sY+qJ7ee6S\ncJZ3A+nxxzRww2O7Quc1fgRRxhwiO+R/YA1CN8F5JKe9lz6SrU6uX2Z3Of6J\nyzRG\r\n=DDpd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202214171317","@chakra-ui/utils":"0.0.0-pr-202214171317","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202214171317"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202214171317"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202214171317_1643994840001_0.6484810728517527","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214173019":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202214173019","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"22d420a75cd6c9c29ab1828334092d9d83e68f7b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202214173019.tgz","fileCount":70,"integrity":"sha512-1TJw6OXqRYLHeq1bE6+gtiSSzAowwvmMcISNfDOc48EGhVHAVdwaV+L+Jsnw9Mf/yRqtoX80p2iOU2rnnDLWkQ==","signatures":[{"sig":"MEUCIDRlTpWV4G5i8bVsEGScFyGWjRi6JVxWAC4SBuBTdHY2AiEAsfCMrO0ijbHORnRqFtAQGSn0yekgP+C7rD1JHcMU/aY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WLOCRA9TVsSAnZWagAAnP8P+gKqidI9IPgtoqVJDNrI\nI5ZjwdR8MVOvxyjzjomhbYoycDjI2sURB+JSbnNn2vuakD+W5NxCCSoI8J/K\nGd2kohkZ7X8xBAL1PbdiYGmfbSL7r7j0ByD9Jen3avGVrWndH5HU4jz6NZOQ\nZvXANfsbZdiOuc3hS1Hm7N+0iHdlgZCjxOAHZxDTmM6ELx9tON4z87IOrPmo\nUmqOQxLmvlRWbRSPRXDuAAs/L99TuU8dKfJqciImd2Uml6Mw7glqU12sPcms\n24iMcLYNyCqnup1ScOG4TfIzKaIdOm5jE0rZzmH0nlK/lD1oC6FfXDn5cleG\ngRPbF2hXc9jecakCnyQ0+S2VLD55J1wERceyRf3M3YRbF//f+3jrJT1ozdBo\na//i73YXxzEREbeDZg/NFStYBGiG7JsVOjp8TtYjqlLHUphvESXVwsSEaTZW\nWoZVN3DO1RJ6o+b7TmkTG0dW+pKbx9wQdABhGhSL4u2bYqriouALb1KrIwWa\n7IjkZM8Jvj0AbCN+js7u83N15b1Q3FUq0hRDKMGI50duTRpAm+3bVNfK8cca\n2p+vpe+DcURUftbWsdLpoEvwzPP7gn2EJTzHCylWIh6jCmvrQzIUanEWM9hh\niDgkEQ/U44yyH77DfmDKRpRpvuEpASWhrGwUXAgewjH71RP/Shz6CMApTJH0\nSpp9\r\n=qW6k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202214173019","@chakra-ui/utils":"0.0.0-pr-202214173019","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202214173019"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202214173019"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202214173019_1643995854497_0.8362766534473061","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221417318":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221417318","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8ad17dda0c98628c6818971c3947b63f5fdea457","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221417318.tgz","fileCount":70,"integrity":"sha512-YZnV6GnkSlp9ZtprKPNL42D3XAUncTUAp3ReRhyyHtOieR3BtvDr2qWpzlwpPgge/aVtYxr8xf0q3yMK7u1QTA==","signatures":[{"sig":"MEUCIG1jo99cH2Co8zSBIkueb/g1hGLQDUmEQ8xJFf2H3bMKAiEAvdjxRZXrm5RbPo0tx+LU7jJTJcDJI58ML5LGJ7DUXv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WMECRA9TVsSAnZWagAAYk0P/Aw/zNQjs0dTsHPdNayJ\nuCAml1P66uxrZIwjg5a6WU9ny4W27MEHpG0FUB4RHryL+lCgDUNFR9henSBI\nmbwzpAWXrKnIpvREB4MUu6UKr1OUOfGKQ7s02btivIgODEJ+IdYgNJQJ/j6W\n88VhWcTZvZZvywtucpnLdc3SMtxDn1T3e4yHO8a5+Kd1K5F/nsmej51VlDaA\nLKHx48s9z3N9GuGzXSkCL1F5CiaF60Xz8/zZVHmob5eJBy06zqGe17df19RV\nzDhzPSKtN1zLkhLWJLHxujxJhhgFNJYZ6ev9ahZAAM/WALr8V8FcezdBmvl/\nhOTf7eDldvy3e1RfUP3xT0oEYjyeYT6QDmuc/k9tACaUFdbvedLch51ex5YJ\n9gIoSh//kGQft1Z3oY19H5oagxy3H6zI4ebeXIQ3vs71JxkFFneczYrB39SL\nwPEnQN07l/EHzTphd6pMu+O6W1YQzdwq1xJ+scln8qQXbzFGLPVC4/TKM93A\nksYfpKK5jJ5UsYqC7UHOZnXPzJ9rak5uDFswPClPIwd5iY07cdPyPhQvJJaR\nk78ypwCEqMfNrivTdY4PT5wVi8Z71H+dlYA1wrhTxGpUL69TvW1cyrrjPd4n\nlMkQdX4u6Z6PpfTpkNvMGpbptJHSUVqX/inS5jwRDtAV7JVC2mse+hUZcR0H\n9lmX\r\n=0tj2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221417318","@chakra-ui/utils":"0.0.0-pr-20221417318","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221417318"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221417318"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221417318_1643995908156_0.27674169687303585","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214173148":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202214173148","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6e8da7e9fcd2d07d4a8d1f5eea67f2a7a5c4cb70","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202214173148.tgz","fileCount":70,"integrity":"sha512-5ju0zdVIGnu6jPrSnm7kPX20ZMtuouM7Hgaj3NDUyR5wIZHpbASMlUdIfs1eOIzG2GYcKF4MOI79r0+w4qsO5g==","signatures":[{"sig":"MEMCHxTd8pNmIUuSqd+ebf+ObwXoZ+ata+6ffk0SLE3hbO0CIAuyjBB2xcUnilNDiqvk9xMRnaZnckCz8P03ncXEzsa7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WMsCRA9TVsSAnZWagAAlN8P/RHe9hRdY4eHkQgXSDPt\nnnVb29mbBxsSUlrRWFmy0E1NC4+jnQeWozz19nczzsnVqQo2m1le1gICjZHX\nuL+hOV0lOMReal2PiRVWXnQFeRPzAXlF5UbSOg2Meljt3AzA9tW5hZ4rsJaO\nWIsROZ2wG2tsDOEr6N7s4q+zDjHiEZktqzOcvxIM6EZnO9RYI+uoP0eKc3RB\njsJx8RUgNOK2AmOD+pr2fKTd4sS3mUAxqV154MQ8r/TxAGgi5PS/10wtPPpX\nKu/qU2Kf58bl69FnjLySW4sfKxpijctWc/+kbF9DNPSmA1Ckn/9N6i1Bgy1B\nWlhmS3do+ioCrSbBvwZfCj3/3qt6uOteOLqLDmU8qZinrFmwF9KhIYPBZ50o\nS7vIDNJb3tqY44KABJq5x9u8HldGyxZdfH7PEou84F1ho2CieMnCVXYqxcxs\nDAMqe1kEHGUXHhs/LYX3fDltR9q6/pKJh5jQEGmjzUs6HmrHERLw+qoZ6Cy3\noP7l6Z+vxFy2WtVczOBaJhOTTP8b6KLiyT9H8OcZmsd0jp/ehjoBlL9+h9p4\n8KwT6dyh2qIMnL9KiVR/b2IrzwTHFwuTC4OYxUz17hyHio7ptESal4f7pJyx\noPzACNWW9bOTTlJd+gJDDochvxF8gUgNceq8Ah489wvYjnRgoHx+Cu5GNL5/\n7QPZ\r\n=Q2wL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202214173148","@chakra-ui/utils":"0.0.0-pr-202214173148","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202214173148"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202214173148"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202214173148_1643995947907_0.27218283620118044","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215111823":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202215111823","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"cd9865c92455c5d7eca603e3265c1a94c53955d8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202215111823.tgz","fileCount":70,"integrity":"sha512-OaXHN7ibP0eCDV/L8icDtpxNq8DNhFanVRyd1UI5s0F+tMcOJfzLl4depFZAjZq1+k/zLMo4v5/zA8LxHJw4iw==","signatures":[{"sig":"MEQCIFNfgQI/1sR2kdBw9SA1w64pAdrDRMaJuoR0OGeqEyHMAiAlG5JtHNdTgqH7nVu0/I6bdZ1zaVC1kCz5VODywROmNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l0lCRA9TVsSAnZWagAArQgP/A2flyHOr7xj9xx3kglD\n+5It81L/Y8XuJ5UkBvZmOhcNolNGHLy5wWcJSMZ9d7zH70YwuIcerimkPhLn\ne5Iv110uPaNV6AVVdVZLqamt6sEH12rYr30SNg5eXHohcSaH3EYZxQlfiMqU\nC3UqCu7n9z5mLKkd1715vUlf0F5a5SmRTJiy4iYu5PH4hhJ21X7bEtkMidwT\nEeqX1L0dVfqLsd8H8j5Bs8mAs62sUAi+FAmhmplUCgr2MvZmC2WPWpKpnoNj\n3vNeFRx1hpS9YGUAD95/fCuu8HkLIwa3CNb0AiGymaBzjprKFj4j2w1M/+Wb\n7iIVFvLQbBMITUHDE37jy6/TuSpP2QatYGFxFIY1ESfo/97Tw9nzXnWJThEg\nNJh1pt9RBCIZQ9td6VmQAu7oH3SJgnMn4GiJRm88ey6zwXcbFXmuvKLlovye\neew82t3jMiIEFN7tyf5GGN/fnNK7QfNEXsG6nYK5I4Pn8XTGIT8XnBfH1PBU\ndkwLmXc/vsvcd5/ZeZXrY/sRAPkQHz9y1vTAgta6dKWuQ60sFeaIVKUaK+x8\nwaf5huxNo1//oOKSRwYDAkekUckJWQ34WgYkqXErjcXT6NpOOD6LEgy+w9DY\nmVoDacoOoNHrIXDWpEC3thRH43GvDBsEzKyURDYA382DM0p8QScVsO2++WhA\nbFRc\r\n=zKpj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215111823","@chakra-ui/utils":"0.0.0-pr-202215111823","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215111823"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215111823"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202215111823_1644059941521_0.8996348030288284","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215111945":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202215111945","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f896234d16187a1de7b8bdec41f8b312e86044fa","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202215111945.tgz","fileCount":70,"integrity":"sha512-7zJ3q65/x7iDoipqO+lTngtCtJX9zRbqQ8fhKleC05ofxGiKTG0g2YkH5wXuUM5gUuMRcXiZRqoO0aGM6ncYBw==","signatures":[{"sig":"MEUCIAetE1ZGoorfRX5PlDXASWl346zDeUeyi3wq/jMpmo9vAiEA94RKo+ePqxTcBHzaxMdOPxMkG8j+TT8X4Ga4NqiSyrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l18CRA9TVsSAnZWagAAoOYP/0QRG90vRCezVYnzgBIj\nIN3wSuBpaNq6oLBiWj+zEvopxSBxD3t0nOpORABUJSUw0b/5VmonID0RPaH0\nIQf7VeK4DUY263eNHoR0x/fG7oHqrud3Lc+JO5OF8nKEHcXNulVd/56bhKtn\nqldvMfOCk9FhVGbNiO1xsPd/9B3/XPUHhGz64QERfcmnUpzatFTDpu7BO+ak\n8oSLlcDBJPhf/VY+JA96vzCS8pt/9ZSOoDo2mQLL6tHPsSYnbYZBshpl7Z58\nF+6Fm60wRuQL38o6q6zv++mpP+34aN+a1zXL+CAoIIPduLCzMk/1CzDC/su5\n14oOvc0gHz+Tt7ctU9Cd9klqbvCIarvUuHV7QU1Tf3fOB6NwT7Og5uT4cw6e\nUXMxlgnoi+0F4ax6eGqY+xpgfAKvdFg2lLLMdH+GejaN/et3F8Hy8HBzrSJf\nHqyQ7LsCHiqqLhkzqh6XWC1swTvQyaol0RywgUXO/BVvWBYVMP8jI9qtF7q4\n0wtS8Xc7bcVJDzeDScfjkevBd/jn0Rpz4w5LRXcxu8Ep0BZL6LZ61GHjqZoJ\ner00ivNPNcUNQMpzzCtW6jCDiXNOw/+6/t6JDTqCWYCwj4/3oCukSEBrVCjd\nERdIV/k1PPDE5c+2Dpw4NuQHXOvEKdmGLCjtXczwjj1co09hfiuDPSkBazO+\nM5/J\r\n=JAUd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215111945","@chakra-ui/utils":"0.0.0-dev-202215111945","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215111945"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215111945"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202215111945_1644060028443_0.5758595090820933","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215112739":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202215112739","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d46dd3ac7507273e86b161a407075e7b86f43923","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202215112739.tgz","fileCount":70,"integrity":"sha512-gZ45fkLjU+gjRgaETpCqqTuTYRFK8bXfeRU7Cvogy6TpEFE+awnPoTTYplrCKgM4tIMtYlbMh0Po6HVm2ei1xQ==","signatures":[{"sig":"MEUCIGWSSOWAnUBSiPjsVS4G/XoIFx8X8mKfiSuiklCLP53ZAiEAvpRmgWRUcB+0mGbtMBw05oLZJC1WEcaTy9aBjAu8VqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l9OCRA9TVsSAnZWagAA/i8P/0UTqteaOmoephrn3xH0\nj9kvEc/dxFs9xXTAe7FfzwFT+d/EDR1l4dv1e2yh310XZaP/acDKOlqgxxBM\nEKuVuJBRx+366zDeb24V+/TUGTE/5iAXsGYL3Uy51gTMe61PYss2GCJmsUOh\nmtpqYnTB568RGXoMUDXTJHFa6cLYP4oGHcU9hNLC/xI5u1qZJMiJvz/N1Mdc\n0A3JAwuzdMx8JB38UqskJ6Miaz5keQO69yuJDaMIh4YyjAi0dwNDpJ7yRp2A\ntoTuXeklKt8oMgJJh1FO5vQlZhVl4eFVOwV5RyosXbhdahhmublWsMbsUbyb\n/6Z/pMHYLA4Vzf96Acbdle2uuMpBNKUi408N0Ta3Hngp4uJd385eZsmPB5uk\nASaUsswjRqEjg3UvqS6r94aoGP0i/jYDQyHhvGaXzIz5cyPeQ7adswZRZ4X6\nsv4RwmwXn9xAAbRdSXdXOQo8EnE2fdWb+jY6khsPK//gzZMsHnrB0eaieP3b\nH3aEsDXlDUcDOH1aNtKhUUyuXPlY9KwxKEpfwKSjU5k9Jpz9tMly8INFO5Zx\nJFT2tSHovSq3KHb78ZQotFIEf3Ia04bOALonlocEdZbWDyHps2a3+78BX+KN\n5/NfKMjOydzNanACpQp7A+DsVjlJb18Z3NSf6oi0jRLbg0ZYCfmogPCOYBzO\nDSf4\r\n=yx/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215112739","@chakra-ui/utils":"0.0.0-dev-202215112739","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215112739"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215112739"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202215112739_1644060494691_0.7031348451249888","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215113521":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202215113521","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c6c6f4e6f17f28666a398989a820c6efedd5a01a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202215113521.tgz","fileCount":70,"integrity":"sha512-nZ/qtoT6Nuv3kgLIhAmNZiD6cBUWAka6wP8jWUoVeOLL4fTjGysFgkGVxE5mNPMeHJZGLc2OQFhfLMTaKsfF8A==","signatures":[{"sig":"MEUCIAkZyLBqXDxvxxTx9lumLPUcpHsk2mBjilgBfday9v1PAiEA3iBXmkwR6PpMxbHjGLBWi1QT4u7mZOpJCv0hKI1rd/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mEbCRA9TVsSAnZWagAAXRQQAIR1GqWGUHaQinbrPvYV\n9EmUZgcNfMRJLbDZjTzWdzgJnKwaEyfAx970TdY93tcvzkE9qv0ZGCF9lm/m\n9UEXu4E9Ni2OEuoksXaFp8qH2GCUfG77tRf40rsX0jmTxX4K5RX/8l8Aaour\nriBwFhTN1r7GHBid4aGssQCwxbsrq3fDVDUZ6FJxwDXGExbdMR/Ai4E+VuGg\nq9uWCjD3dDS34GkXVZ1L0TXKTfruirIDtuiej/0M9PIunY4qNSIMGL7uJvd5\nr/SMCXg2NUrzhzCNeopJL4FAFqcWO4vK+EnEIQvMXzerTRIBcr09rBk6PJvm\nuFIh+R9twit5Gjl8nwD5QQ8EVJjX9ANiZHmRNilie52nF6YdzqOabRLZ49Tn\nvmjbitipFjkQ7abRw8AKa8ybjaT3DpH3+tQqzdXbfQZmQQqw2HyjtO19VgK1\ngmaq6IC4Sezzt6z8lKRxU8Prxtu5rWEdIcNy2B/7LuJJtCQj0mj1rgzxeVJK\nzELJ4d0oj6cuciJY5vs+W5/JaltTxEE+9QdIfqKmHooiXI5TYtoBtlaSkXQz\nmQqR4T1YP3IDSsy3dL5t7wdLM6Hgu9OQt7jrcIcWPU0KmS7PXLZbYD6wOZKR\nH8NIBMe2+CKMhdjXgRfWCrRnD5mMsOctGyGMXluFViOWGrYzRmBy4KZ5SG/U\ndiVd\r\n=XKgn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215113521","@chakra-ui/utils":"0.0.0-pr-202215113521","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215113521"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215113521"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202215113521_1644060955644_0.37806014628608087","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215113950":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202215113950","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"27aadf88dc75b80ac50aa25afd72eb2c3e434bf4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202215113950.tgz","fileCount":70,"integrity":"sha512-++MLjxWUTCaFR3n8dgXZ3iXO6vSTrjjmZzwj62Mxr2ktcR0dmpgS39MRZCTIE/PVDL/+Ctj92TiOWrW2c1F/Qw==","signatures":[{"sig":"MEQCIDV/4QLBvTF5+GyepN49sj7zpJwgihrwdVJr+MxzuojiAiBJzpSgKoUK8N8XgUXyh1qbbLCyxdfmFrKpA5f69K2ouw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mItCRA9TVsSAnZWagAAljQQAIcildqL7x/4ys2duwMQ\njZ/kNdqd/RER17yplyNJiZvlK8MF5FQHBjUD7TZRJvUogsqhXlDuKZfBAgKR\nvjUHLDXIiF2s7hnNrRkT3cAdDCq1LtPKUgzlHy4jORTq/S0TuiWJlDzf5n2s\nLc592a0OE83rW9t0Sv051QIHz9Y+MYZ2ausnHBV3DMz6iO/a6tCMM+VCDXW3\nQlRQhSVW09WzNGrO2ksVoIMo3X2ZHqpp5qKHt9AgS8TpHyHO4pL7ItUDnpjj\nY/GWoQ7lLNjRRi0fhIcoSC4W4K2ljbhBXrGNvQUcWuhjMiFkaWZvoxdWmQFz\nYQVld2PVKq0a+uSUxDRS+olpLckzE7EzffT5SMISMJQlAWbyHpU/kJJ9mhQD\nrjmkz5odg5Id1Mo5Z0KYT8iJN6FEg6qI8Mkf+6qY86IHIQ0pMYWf5XZLYXjg\nVVtZkXl7gGuwhpG4duzB1ygCzlvt8/vrUYLQ5vJyM9Z3f6bdUT/f8DT51Fm8\nCH8Jt+2xgKqNSxsXmJKVMlUdjJeq5ghoq1QTUSIaiCl2uZikzwXdgV5v66Xl\n1WNfQ9RwQ57LDzRLJFa0+WOO9HHy+OJwqO7OyUx6uCuVMksLvTl1+THVGqEN\nDRdUMX6ZC5csLr3asTx6zWL7jCtoHRlKLISG1iuTU5sISD5i+LdYpoeA0lIS\n1jJn\r\n=7sV1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215113950","@chakra-ui/utils":"0.0.0-pr-202215113950","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215113950"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215113950"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202215113950_1644061229032_0.9447036008571172","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215114149":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202215114149","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7638ede02ee8bc87110250dd6950330a0f5a2ada","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202215114149.tgz","fileCount":70,"integrity":"sha512-Sp516NftFegkBaDlZUykMghTqlsB9T5KA3QgwNJIMbt1IXG7Wks81B9szJe/HV94Wdhpp+41155GNjMjLwOHDw==","signatures":[{"sig":"MEYCIQCrN+bIoiY3L/RjggxfAh1DGpEPQ3q0ve2Ca9niwqoMLAIhAL28SZQ+Vv2mJh//T24lKix0FNsOwGW2uQjR7+Yw33Vj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mKmCRA9TVsSAnZWagAAeiYP/R2tpe4/gltksoPfx63S\nsHj2Jink3xdobLftTqSLm5GyvtOrwXG1z5Ps9VU4kkFw4Az/bpKvbGZNL/at\nFtenp9eg1GiZ9A7AKXMignhwiV7Cr9OCw1yySzW42/hU8yVm95Ps5oaqwADZ\ns0jjoTN2l2SMwSCmHdCdkBXRwHQ7hrM7ZRJcmYPlf1gWyw5ojHT0nD9qJb+H\n8JpvTTYjsvOfPhb7uPEN0NbIKSQM8SDmVJn/ipBjxlsBR38Vz87fhDh8C8og\n3jBjMX3uaa1KJsHzwCvUTZe3zp43LkFxJR0HGvfw16dtJw3c1NVgGqJS34e8\njV8KscY93PAyvYOB8a0GvsJpKo+X/R3zkLx0n1EshpinvARswpFnghubf81+\ng8M+Y2XtDkIrA7mYUfmIHLg3HgAZ4uDZO63oDNYU/Wct+WI4qBt/J4BeDenp\n7v5yGklvg0GRHEAuvvicFtEf8CN6vybxgDSMCeBOYQFj9bKaqD/Ot2q/jHbY\nU28UFxCtOrNINTr4xb1wNdMiSf3j8t7pn1yFQUDGb2zUzoJaIBzl4HCkSW3G\nwN+N0EwzYRfvdpxS1EBstFV1mvy4iEA9xlsDD5mqywWCLfxO7Rt9of8bWe2u\nwq/ICX5XRyRxoP6vkQe7pdmnGaX46MF8yPettZNKOdkDk0oEC/LxnYkZfkHl\nSqI9\r\n=/yRe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215114149","@chakra-ui/utils":"0.0.0-dev-202215114149","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215114149"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215114149"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202215114149_1644061350836_0.8566313207978806","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215114422":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202215114422","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"cc158f09a9ca8108541dc37ab56571077dbe9f30","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202215114422.tgz","fileCount":70,"integrity":"sha512-biv+L2S//u/lt+hCZl+ER7sBqFvXIP1sCFkq4a5GHu2N1My/lzBoUfWTf+QOS0ec00oI2zjtarj1/M0wkRS6ag==","signatures":[{"sig":"MEQCICOy8wD8ONWlbuh1EsP7hJo3Z4U7Lg25fbH6+ZIBDD+oAiBINoBimgKKWHd18EYy4q75OiuT52naT+biFFIUTd99qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mM7CRA9TVsSAnZWagAAdnkQAKRT3vORYsJnMC9EjXJ9\nbVL+anujLm+YuMQEKoDwnpavgi1ET+jwaqINNpyBWgd1yg3PjbBMG2LjEfM6\njraK1YyHh6kUwspZiGcQ4CWT1HgUimTOIsWbaI/APZotVJbeuF5sr5syRppa\n41T1HUryFJf6N5Y1qdh4L7KzteCzrVxHPxLPNCgUZPNAozvuonnLGGLpYn5Y\nWMp9iGqY/TN2zJM5VqDXE4VpCyN5IkX/TRY+zY6RJtu15qoVHNNieFnG1hJ/\n8hd68lGUaNuVlWH+MuRZ0JKwac/ihZEyiyOnwFSLs2XkWP3+xD0Jp4U8zgDu\nSJ9tw8zK5QZ32TGtM7V/WI6O+MTz9r0U69KaZQ2jzamyH8IMqn247X/I17B0\nYHiFC7Kz5ooklB8Jw/NjgG0qDHNb7m6oZp+5h2mE12Mv/eeP5QhnB7nT6i6n\nnjiCj3NGUPe0bIS/dCyPYtCOBnC4vMg2pfEfOuhNsm5bAG8nPBgcy2+Oc/ne\n3HbDQ8CBuwN0So7qVLCP1hNOboq1rNIv7h41gnRaOtpRDWmhBYs1+NqrKOQy\nqHR003Iq7rh5/rgDrdiz6yvI8SMzHgzWqREYcieNNoMzdIypIfq5LkkaO8QF\nU7Xjvte1pYzy7SDY6aOaSx+BaRaufJItXQY/va2jmb4TnrNHmycnMJXMODmT\n5fPE\r\n=ZOxX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215114422","@chakra-ui/utils":"0.0.0-pr-202215114422","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215114422"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215114422"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202215114422_1644061499342_0.014299574321567476","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215114442":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202215114442","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f847b5dfd78a2bdc4767db0ea1c93d1136cc3f3f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202215114442.tgz","fileCount":70,"integrity":"sha512-VYU8KdJiFD5/mr1jOiDAntqK9HfDPOMBKlZdLA/3HvFsLL7g+eaLJrJ18ZCn3AU8QkHKkzRLYxbMctt4/lFnSg==","signatures":[{"sig":"MEYCIQCBDS2zU16R2/2YfFL8BPhsfCxxVED2kf+9xXy4qowSUgIhAO5W4gMSSfiskwX6OEnxrVLoV0FTNzBXkKEBsg3lJpdi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mNTCRA9TVsSAnZWagAAGnUQAILikHKlrJZZmdK1wlPm\noEVjooDI/0aMpMsEHqU6nbRacgCNtZrMD+eE7MouU2fTCij4c4bNQF3FL7VD\nfgtshdVdONcgqivazo2gtRQI0kyL+lJauBuKVuWJnkMmnKvjqAFaKRq9Q1r7\nCWxQlV5v/Xk0Y8aKAN4ocyMlPQsvcHvgTrc00M854DlVM2UbxSCn84WMD2zz\nz1qK7E+7aKJZCBFGaZ0qZsfCuH0OMchuphOZ/A6KOAyQI/JqHSZn2ycoMIOC\nNWuGumXIwNqVfUxy2bF4XSZHDSRcoO59ork32jlPE+vtTmWILY1SZ93k2gr5\njeSRv8lyrcTThg529EmAQlURSe3R31i0wgaxGcELmWBq5Rua1KW4XmB6PWc/\nsP2V+VOy7t3r7Uok27LTK4xZv/t5/YSNB8TxaeNMQ0tSURXNTzlJ7PX+s+Lt\nnFpuqlFEmU9nLKeDvXV0p7zQL21heWV5URN2sqh+pVEgeDuNTdGrDm/pAru0\nTzMnmIvh6twF0UDCkZ354ckVkQU4q8CYLjIGoEbjhiPCq2AO9k4W+V28O0bV\nQ+hmRuS0sRFW6sIw7lEt++dUUgRWnDNCnmWKSUxhyFu2RTMpTKhlcfAj4yeg\nkwVIiS/Z57vnw4JnsnZh/cMPB3zLnHrJ9t2H1/RVxRg5uD4YB2K3yvRnjGR2\nd/v+\r\n=sRiA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215114442","@chakra-ui/utils":"0.0.0-dev-202215114442","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215114442"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215114442"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202215114442_1644061523040_0.11792690432628783","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215114917":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202215114917","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"67de7032f68e4aab71909c62c60efec25966a3e2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202215114917.tgz","fileCount":70,"integrity":"sha512-HYfPeBQNa28sC63WWJNrHU8YKfRHVokvz2BJT/aprQYUOB/rbLSMtCfOc/kgN3BRq8p/jdc4HKCGFhi+jX76tA==","signatures":[{"sig":"MEUCIDsFdnZzRDAA1IGtXnVoCUW1RpSjcpT6tijKXHPqQkUzAiEAqRv85s8SgTsFk2nzlfglcCH46xH/s5arK06cAeYD4nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mRrCRA9TVsSAnZWagAABBAP/i6wilAaQQcuv04n5o/W\nsh9jI9nanQWhhjXM9YwgIiQT3kvoiFbzKeofmcBqOUMrQJtlS1gYqIgfuZVG\nX/Bsrq526ntxYkvZc9+WXQwoRib6KCHD07qWfQfaqplh+d4MTXht6N3aqSOi\nMfCDjV3GMDOMxu3d1dk+Q1ghi+8T/uVvRUpDBZ+vFXEUR1FByAaI0vVWVw11\nMmeFLeWU3RpZniGMoIAjRbpQyOrcoA+goUdfHS7HU/jbyae6Aw75JeXx8lzu\nNqe1zsYq8D5qN6DWMaMpmfqbw3qFyrmSllZRTUk/duiFUGegk7l5sC2iZW2q\nTjqJxUKqLwqvhLr9Zvj7i/FbJdwT3Otg7KNols4IUAbES9gia1lGazdT96it\nPQmJxSeLHUeCuHShmyNSR9lu8dZdLjdDWrw9sqNmWCiZS2vXXpfJH4aOJ+/m\ny+LAJFPc1OVjQQhSCD40dgj37nZfnzl3Q2fdXWuV9NhHqm9G5Dx8B46y5DoO\nzfMTf0/Vr7ER+p5jE89O45yKXg31JQKy2Lz1sFGIqyz1N1qtT1iT787DSP/Z\ni+iTRZYTObZJTyMz+8Fr3KHjkAo9tGYUM5IW1aCctJUNI3BrvrBLmgjeSVO3\naB+e8ET7PJByJhQRG3Igpmh9AeRNsfyPJznceXPGhBX+exBt4xtTCN5+b8/7\n22Hh\r\n=YxxG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215114917","@chakra-ui/utils":"0.0.0-pr-202215114917","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215114917"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215114917"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202215114917_1644061803205_0.5306007883991513","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512346":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221512346","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"29176bf4abd9f0f532fb65110a42d74b84c4d3b6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221512346.tgz","fileCount":70,"integrity":"sha512-1JfoJZb3kZLLUAkkh6jo4RGTnHmPUOQgJDWg55SKO2r6EXNLxLx5LXEP1vTQMbINIaBDxV1uKKzoNBAJbtWFrQ==","signatures":[{"sig":"MEUCIQCuNSMA3pIiH6+XZLC65vsRH333kzIxtYIoKL3pmOwolAIgJPxBDqxiSO64dC5w2CrDRD8yK+CQMyMRkwl9CEj+XH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mfICRA9TVsSAnZWagAAWcwP/jD+aGa79i0DVj/s1Yn/\nLnXjEKpe15Bs8ugFBZLszYPZLeBbMpDhumNy+7haWZlAFVt57byIt+zTRom+\nhwZzAPhDrx7IJbOLO4VlocZLLrwDJt6f+K216tS7lurRedEAcJsSA/N9BCeB\nNh6o9Rmzd9e0F7HDwiMb78GkJneLxPk9x1VYC7TT94m8yp6S+QKnS4AiTy/F\n7nuHmyJCJCRTSYEDVGw2Bct+SnwpArTR/F+JDKUekHm+6U2K/oaZwkX091Q7\nvOUyLPXMyTXFHdWqBT4kyk2kIXUH/48wNNYOvVrReTC/rW8YlDpyi8BEOyRz\nTnz9z3txHyTt5I2cg1F3hDRpScQWnf0AxtFAWOVb/jQRcfvR0P75SWi1q6F6\nwvaWlK5BWoh5tQHO8HqqHGarf9Mwh5q9FsBXfo5P1So5kyWSabb/tee3yj/E\n4Up6BJdNPmzMJX6lOiI7mHc0BrRQHgfivA1WVSL/YJx+xyN8ExYtP7ZcX7Px\npzIz7JX9GCpjerdmfX2BJZ232bWwaS9jW0SCAzMD4GaQJ/Ad8kkVxRDF9l93\n6O3izD9Wpt6g71LCR6UtWMNWFjmT7F8Gl1ekgV8R6w8DIHvDLRRAZXMH5Q3M\n+66alQU6PJ48fFCCk6Vb8Pg7Ztm0qKU/9YHTFeX0Ye1Q8y1sUnpmSEZRAYGF\nsMXW\r\n=qoel\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221512346","@chakra-ui/utils":"0.0.0-pr-20221512346","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221512346"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221512346"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221512346_1644062663824_0.6385147964530982","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512130":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221512130","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4e6b1d60eee30d95d235c46f8b31b612296b2044","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221512130.tgz","fileCount":70,"integrity":"sha512-g8jQCovV7b4zJvwe4qwViwIqppvOqJb0wLn8QFNWDL1evQuKSfx2ZsVcjBq8XCZNmYpFZuOqk7F4foaUgrEusQ==","signatures":[{"sig":"MEUCIQDjA+rKbP46XXoso49tS87b+G+azw/PvGTSlpqNHf9i5gIgDv99k0jc04sc4aliCn2QGGtw9xoi4vcXN9NlP6Eq234=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mnwCRA9TVsSAnZWagAATaEQAJyxVDm3sTNoWiRKfYR6\nQYpjRnZJMOieiz39U07X8IlZU0nf8VGb8HRbLz9lbY/SMtUVGqSzcQolZ3Gf\nLvMwaH7TghcKeDfYsQv8wydpAG8ZAHNnNAa5Xnghn7YGM5V2Bnx20OquwPA7\n2TFn6NFSZlnlGsoYy1mr7fJPFFexzICJNPFBovvpCKfCY1AcENf2DX8Tpoo4\n2PU7w1YM1HM1W8Bz9IvHX6aISyIyZ7ec+ZbOz0qzJ1V/c94J8QtFQCiQDe/j\nmUaiH/Tzrhb6k4Ozl6TQ4v/aqvukl5zDBSM3ZvIA3bS3uueu22epwwjqctF5\nL+VDHwOZX67f1piH9Xq5K9tD7CGaUKKj3NreJxq99BY7TvCmmAy9iFQ2MiIV\n1y9D+4ZIw/QtylctBVKHIlqtMbE0eGAK7xfCpYbHDQ1jnlQEZ0Iy1Uz2iwWN\nsbjxMJ0yt5qJk/mgOpMZ02//ZmYdoI0Fa9Gr934rjEXtx1jg1iOs1smbM6FS\nENYbzJ/deblr0uk4Cs86hLTf5nLUvlibSy1rFitq9KdeILzrdvc1hX+L6LjI\nT2sPvj4pyuiEH32lqnU9qpG4B8Ilsd+8ifFrRdGO9UkvICcSQA+XEVWCnuzM\nLZI8L8ckMGWhzL9in2YVZBWffJGwlMtzMb5TVsZ9DAwzu4VLzUd8ijgl0zDC\naXlU\r\n=4p3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221512130","@chakra-ui/utils":"0.0.0-pr-20221512130","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221512130"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221512130"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221512130_1644063216087_0.4156374627475672","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215121320":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202215121320","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d6cc07df6ed43065e0e4df63bf195ad33c10c3f5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202215121320.tgz","fileCount":70,"integrity":"sha512-QzqJKKJGl5DqkUtwaCcyE2CAa0qPgw6PC7qRLv1wb/QktEvJLBi4H+9IaKzvICZJUv0K0F1fwa6zX1bIEY33nQ==","signatures":[{"sig":"MEYCIQCPLDWMWlBnpdAem0sCxofBWZMamEpq3SYGQUWUKZUdyQIhAL+L3UTX6qJwee567MMI2/3jnIo/MYPZrQmAvv52wi3Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/moDCRA9TVsSAnZWagAAyUwP/RhcYfw0B0wLnyh4pQvj\nFqIU2bJ2pqHoCXtmXigENjmDsRJ2iSMm+W8pf1t7HRxN3+nWpBAJd+sOXzLL\n3CTBxMQx6/4E6pAyoXLEEU67s5h+m8mpOBVXRHgxrkoOah8CWIv0NZwllKSr\noNQb7Kg1yNZtQ5sFWey1pwLy4vMnnSmILL2+e3vA/x6GBTH8HbAZKQcL4u/C\nq23u1M2PllY1FvYbOul8QMMyblFKXlbqNn8Qco3nB2SrYUiSohaVlshbhZwC\naakj583zseup85JItPxDUqtIrIjnBAckEbtJqy9RKSA7WTSak30VwSJ8xjC3\nAcX1Ct2Ttsh0q5Jy6QlxEqwSE3o8aFAmvCYKxsJe+P5ZGFKok9NLj4QpupuH\nidZ6939JVLtevoInN/BD6zN1tRudmHjyHbB9A2hwVuKpGfUgTBpdLXSlz/mE\nSlsMm3bzKpUJM2qIT+MiiMO3upVACQ1Nqo7z+VK4tA7fw3ul71McpwZrj4gM\nizmEIKWwSMVSE9A0F3AydltowseT1Af02tWXJFxOD/T2liA6QUbmFCO/0fcu\nZwPQsoljXkvcFpOuyqcVCDMO0ViDRS6ZXWXXqDxQ53e+Gf/fLt54A6cg3yTx\naP9VP5wizxqt8xPZJUFtIlUZD8m5/sEkOBR7XgPRrapCnNEqW4Pu99dCDLDI\no51c\r\n=6aBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215121320","@chakra-ui/utils":"0.0.0-pr-202215121320","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215121320"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215121320"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202215121320_1644063235184_0.17944480306497468","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215121353":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202215121353","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e384726a5125505872aec6bfeb14a57e65444ed5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202215121353.tgz","fileCount":70,"integrity":"sha512-OktRFuDUpNuoI5f1lM25n3/J9uPZuM3tlud2+92kJvaDUn+2CCDbkWQ3orsxrQUX4ARbUW1FD9xWWy+TT8LmDw==","signatures":[{"sig":"MEUCIQDMJ67IJJI05DpYEcPw9AUOOOaORdYPZm2SR+W4Nz8VJwIgUqr2Dt/fkvGzQIumAmQfaJC2lZDMY/2QcH0exkjkWgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mohCRA9TVsSAnZWagAAdqgP/0zxW1RXOIg8RC8QO6Xa\nRQYY/JIElXWnAryTIYa3ALkqnzsoLhhjXdi29E0JOJoCTJ0iwPCpPB2F2fB5\nQS4EZPqVPWh1m8vlmqQZ4Tw9ehUHsZMXLmtm26kaNnd4oPfADIBhiCjtiguZ\njOgt1+EN5y+Fom+904sJfqr4FbXq9AmmrK62R9dYhfDaK8QP0WPpiYM1bnL8\nAtO8V1yk8rs42/Y6BZhD+nGmIDtniiaP0UNjByNaLnUXS0xOY5w18tucSBwq\nVUQvgs1Gsd7LoFcngqW/DqWqk7nBYC0DMGjcLfsnCmtMC8bnlgcxvX2ieJdP\nN3lLaZE5VUMSHwXPseuikQAa8y2jlm9GFt8Jcy980L6cT242O1pTMADKU9Xu\nrO8XRekv9jeASpxjimxabe9P+4k6GSEn4WfdY7l9u+R/73O4oF+tdIVI2Um0\ncpqAkw0Z3CUOjHehI6i+RfMX8bVFUzjzssMFlP4HGs7mzwoLd1QJLrdC3bjV\nRza/z8dT4IY6ESW7D6ko100Ow8Khtl53me5KwEJ+wVHkeTKz1W19JEc9sszs\nP5Acq/IHGTS9UrUVBtiS6oSF2cc3sh9K8f7YI/Q1X1PVdtw/8kxvEYutVZZg\n+s03xG0fIU9poxQuDgIuqNxv6y14uLMLDrXtsfCsHbvdOxJu/oSkbdr59MgA\nvcyI\r\n=BEs9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215121353","@chakra-ui/utils":"0.0.0-dev-202215121353","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215121353"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215121353"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202215121353_1644063265690_0.5770289134062649","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215121428":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202215121428","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"54d5ff7351488b42bddd135103321c1be1182388","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202215121428.tgz","fileCount":70,"integrity":"sha512-CTO2kVw5Owwfzgmyweh2cfYIGUTrgqRIUV2cN2TZKMg1fi2eh2tVgak4M5NnMneK1jGcWOnn8WlAlaVt4Ahhiw==","signatures":[{"sig":"MEUCIAWGZQF9bs5u44+6A7SwHvoO5rIZ+TDP9uSHJ1BRBZHvAiEA1My4MBiiFHOqmViu5gyN7iSP1PuHNbwyeZS00qbHF1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mpECRA9TVsSAnZWagAAaRwP/2vCw2bJip9dUplDBCDz\nZyhPcvwvLOTVGSjhSXHn/3ROmGErp7Hw+1ydCL68Xyf0KFAWIPSVtfsA0HUE\nhX+E6hBxVFz40h/4wnmPcmvFJQeqvwtimloAtc/9gR/LvX7F1DisxVMHotd3\nagA+wUVtkOVT4ycbi9LauSAJflCXQOLy+RjectNZRoR5bEgf8qXnKeqb3XiL\n+UepsRD9vMJ6KmfR2PCplMGoFTsUpLrpOBxdZ16U2w9T/kSQkNf2xB16jwKC\n5ysbc0lyn8w4FBA+cCEQB2qd1WcRgvCJXmqZNFfNm5mNiRx15sQ0Yf1IjD45\nFYYEA/g/Bk/Qe32qaudQHrED8HnQKH6t2MP0OJGa6J6U/gckOOZdgzgBBntm\n+A1uE0uP9eC3NSxVttFAq1gRctQSrkuEfw+9gqJ9wzVTaM/Al4NzxNSKUBJt\nn9IPU5X+Ao/JMDelGrPHzwPfqRjPheZSQddBLNQIJAVz4l6LqICj7ZkELiA6\nI0JaHh686+mvOjxdvtb9EBA+yYBLfiCUuSHVUDwFGh293UtewOAwXJauLj/W\n9IE+tw9Q27wJwsKZfAHSoISz64LEKtlR8DV+8x4nIy7SMGWHrO6K1tPNRoTD\n2rshGkzq+pIiuAEWPgtSxygJvDM7nI0AGpbK/ap9nMeti2ugPGdwr3PU6pym\nKjy7\r\n=Iqxa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215121428","@chakra-ui/utils":"0.0.0-dev-202215121428","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215121428"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215121428"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202215121428_1644063299955_0.5966613515829293","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221512173":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221512173","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"398e79a44b53f04cc29b147fb768c1852cc2fb25","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221512173.tgz","fileCount":70,"integrity":"sha512-jpKL4tjgWW5bFAP9MBQxyz8xE9Kn3Wtnr3jwJWBMXyJgqy1y5FKoDOJqS1F9BfUXgzf66dY1VDqQNg0RxGrFAg==","signatures":[{"sig":"MEUCIQDh1qqIxEcpk4Z7xEgOIFpaZ89ns+ZK0yNq1De7LMawKwIgRRN+2lnY9NkdOi9A683fKkvLEtR5sYMw/Zib90Woix0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mrhCRA9TVsSAnZWagAA4M8QAJjkL7+aU25OSmD5mPqU\niAnNkovO74+bODnm1V4hupkFKYI4p4DE5+tcqS/4lOcWChVoL6iZaBL5EuLM\nCNENsYroULZ5hdNaIIoGCc81dWSl0phmDK+W4z8eQlyQxBiH7FwhxKlTCfqd\nFStwAMFmLB/UnTLYBKs0Gj6iXeCxzLy1lHV571wNYs2/LKmS9n24Lxr55673\nLBLrRjucQPFgMLcR1efJ/K5pwu+DSg/haLLK+ndCt8jbEA0BLFZ8teKAXtlB\nX761ttstyUOWYuxkhAUkhgRbjprAwaHaQ1pfmSs/z6j0h6k8EzXF+7F/yMAd\nIGmCwOLsN2dikRqDMvJp6e+eokqmbP6uu8D4SpeEq7nyT3LkLLEEo5Lo3Jqf\nKCrtcPQNPud5JaoTgYNXPm6Yefw/Vr1FLMS+7QOxTMZrBgp+9Ea9kvpGXoBS\nKrNQRDWcSpXt56R0HAzCAYkyAifPc2IjvQ3FP82+ikuojb3cfLxmi0p/Dg9f\nqHNGw8EzVXE61xUclQgb7DL7ez9cHVLflDtZLHrEvRR/RDzreF6aE9P9aWuG\nzLxeNKl5vDl25Wha4ZUMRs3KPsp9cCAVUM2QlMdakpNgGgapSlXQuZWdYFcP\npTycfm1QnDQ7fMS0wVJ1xuhGvHTTvM06G17YpGegueAyuljem8hSaWKiHioB\nPXKT\r\n=R9lu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221512173","@chakra-ui/utils":"0.0.0-dev-20221512173","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20221512173"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20221512173"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221512173_1644063457654_0.06778747944031793","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215122415":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202215122415","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"bc962f352ffe99094b5b05ad25c40039c801c33b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202215122415.tgz","fileCount":70,"integrity":"sha512-I68XUSBSvfanWdWfIbhls4vFefWqaUW1A6OA34Lk5y/EPsl+96eJjmiZdNCi/qQ4HU5JTm5cL/bfooON4nH22A==","signatures":[{"sig":"MEYCIQDp7kmL6CgFugH/aK+0uPsuNjlJ8MByi5NuzA4TXO3MEgIhAMKiyR2vaHQI2rHxvlnInA8SPnkN4kAfe4T3NcJm2c2S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/myYCRA9TVsSAnZWagAACAMP/jpPcMMOAYnNiMX2zFxh\nDhhTfri6YY02qSpyjs6MwG6gpUKmnMgZ6t0qz7F0DsoI7K20vsYp6jkiPo9z\nq8edU32o3bXZoYiueoB2Og19jvkiYAX7Q6zusL4s3Zo46FDpeAvdDYByBg15\n9qYgfz1Q4THi83s7Loys0sn3Be3jWNrx6XFSSlcA2qmsEITxNvYAJGDR5/x3\nwb8yNi0WL3FS/nE8SrjseM94deWquPZgWK/hVhqa5Ws9tcMIng5ZzQ7wm3An\nkOh0peOIU/Ts8ou1E0Ad3mtiv4CcFz5OwS69CezbknSE3naAghm9emPjd7BL\nDe7e1YoSbUghF+SUtuJtFJ1hpWb+s2ZoZOCSVc7cWRVcCTVyJMXuQ7q4vPGl\neGD7vpNGr11DiXkIwwoInmHmeuaxEzQhmWbfgmtRZr6p3lnnmFgs/zuSw8q+\nX6B0eAB45AAT3I+45FHWpPQ6s0NPw8+kaQ114+dQwNF/HUgLkA7xmx8urlE+\nwn98DpOSqIPqJpYBTWDxi9sk5AjdKlApmUZPAEA2jdD0hEqGOhalm9jAI2+8\nilhVRSHFuP+f5RccsucKwmXnk1XW2fN0MvBFM3PkNxQWbl1XZ+qNfX/6aE8D\nmVzakvryxCHK6Qk2rBKvStyxQsbmeYbs6bfbYrYp0deKQtse9fBPVE1aV+Bp\n06a7\r\n=/D+m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202215122415","@chakra-ui/utils":"0.0.0-dev-202215122415","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202215122415"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202215122415"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202215122415_1644063896388_0.4058908480197476","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512359":{"name":"@chakra-ui/layout","version":"0.0.0-pr-20221512359","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7b9ac3d86c2c3c917bc1be5c1b8d66169bde968d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-20221512359.tgz","fileCount":70,"integrity":"sha512-2Zt4JPoqy5G+N+vSyRaiKpJVOtfM7JP9s/LVPgotVXVsyp7ol9XmJp8+GVTjVsc1y0e5+/VKkBZvII3/WVobng==","signatures":[{"sig":"MEQCIHCZPljKCIPtFXFSS7NzZI/a3dlX5C9+STH68gvoJMfRAiA6imTJQ+y8if5dwIvvl+I8tqW5gDM/5tyCjW3LV1yWzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/m8gCRA9TVsSAnZWagAA3egP/1tri1hTDoM6Rz/jEMN2\nJ0uYHPqDXFLeEBoxaQT/NmG5g6abJvC+DI9dJgs8hsXnBX+Pyd2HUDHjMRKq\ndfA+U8+P14bRR+OZSRSrsRYNdDMHC9Gm1wFufch2P2f0KQRMx0W7P44FqsTs\nNVkaZsa/K9xvvIg4BFfmYCCl/UiBawDlJNB47jHYAz9+HCkXZua0eucLG30A\n4dCbH91CtRiNGpvRbwfLEscTs5j3ktX5MFisVr8a8jAmvcCDUNQ0q3FGLzZU\nWoNrPIalTdCVThnF26hyTOczTyfdN6q7KcshteXISBAeuxcWQ31g3Hf/xZoK\nHkm7x88gqUyuZvv4KzUGXW51ErR7Iorfeo0ITMd+o37OuBrZOHBF5ClMJr7I\nXFiTXO488nvmQXTlJdvSiXjwSG8mzaMXfXKheekjjPjbosip1wDU32MZ+gDN\n1kZVSjoCEeGxyy7oGUmFI56K3kNqiX4Y0v5Rl2DbVZIlSWiOZmm2jz3gRafQ\nbqkLVSqop+2xVA0eB3I28eHIe5LrgFtnhBYmUeE5qZraSBzVgxCRkVJrsrPS\nS7aFbqBr2qRI3l4hMFw28Xmi1jVAkg6DJNeTSrEBpEOrRMBRyLPmhXracH6z\nKonoUYRkBKufjNBWeWVHKhYEmaq5LAk05Zb2nkYh6XGU+6r9GFyen2dJbXDu\nGR9Z\r\n=QTvo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-20221512359","@chakra-ui/utils":"0.0.0-pr-20221512359","@chakra-ui/react-utils":"1.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-20221512359"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-20221512359"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-20221512359_1644064544565_0.8641092536535864","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215125733":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202215125733","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"df32ab69ea97a126b519f1f611894e79923fb259","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202215125733.tgz","fileCount":70,"integrity":"sha512-gPGu0PsmZ/zTEReyhq6u4HdrEenox7yrqTzlf+z0ndcOGCdpa2ADUIlyxX9rgIjQKo9dVctTNgE/i3v2Kbh9Pg==","signatures":[{"sig":"MEQCIEgl6NUlCjeK/shalj1gtDATF4knHaLFP/cFMArEOhTOAiA2cROyclTPH4TTvDlB9Coo9oy0A1+UHTA+VVZVNir/2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/nRkCRA9TVsSAnZWagAAGgEQAI6qvEOq6hwwxpvm9hYn\nbt9rU7Zf53DSo7IfOb+k/TzjXi2JrrvaoRdN12vOUCiEr6nDFPUt0aZBdAf4\nshUPbgC/1lQ3y+G1b7hkSfuKNegLkuyYlnq5fOPDfw5AsuvRIoKvG3Yu6ZE9\nDW92vCk3jZhH+8wDTkjx6qmzDbu5Xg8qUFk8WdDxD1KUYgo9Mo+d6CaG4Sxb\n37k9tIpS9GeiYI1f9FAIPqvA4wDlzm2QKBxdUcsHB0EltsJNslbBDTnqH5Y6\n8NDGaFSxUPResHoAwe+WPKkQQ8lWWnUwA7WLnGaH0wr7TW45MfTwjLYexqz5\n5IKfNYObMMMqFwIe0XkBY62v/XGxBvpbWm0BEXSery4960xTpU+cUZzV+prB\n/zSkhV99+wG/1Hl0888+uk4frhL781f8xbz5rxnogY8yjZyCYWI1o63RFiZr\nPsER3aCmOdy42/WyABpDXoyjbxnDdgVybL7bbXB8oUPDnm1ObjvCf0QSTwmC\nurIz3b5pQr2DwP/Mc3LlC/mhngnhpRJP683LTcY4JoNxBDARvjDa88UpUWVc\n6RoRTg5jwwHXWbanJJ086iwZxmy/4i8bfP15g7giBIAJpCWDXKCi2wwOxGCq\nMhdk3kKKEREDDlvtlLUzFxr2nyPA6iQJbe8F1znUEbeddhMlWKyu2Fk01oh9\n0OEF\r\n=qFDH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215125733","@chakra-ui/utils":"0.0.0-pr-202215125733","@chakra-ui/react-utils":"0.0.0-pr-202215125733"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215125733"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215125733"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202215125733_1644065891806_0.18184551917094494","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215132532":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202215132532","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7657a0f892a06b2c1120c983ab3a4755822f260f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202215132532.tgz","fileCount":70,"integrity":"sha512-/piSVZewFkwGkbmsdsz21E8nktAZJQe7Jus5vJqV4eClo0zBGP9XWXd8mnHaz44qS6oIGlRDz3EC4n5UiVxvWw==","signatures":[{"sig":"MEYCIQC3C+FawiC+Q3LK2zQhDRJFsXa5VqEbPs0o0iUsx4IfDAIhAL+HBhNT96lXpwJ+J7XNhCqDePZigQIUzwgIKUcXpEmB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/nrwCRA9TVsSAnZWagAAhqMP+QH/Q6PJLLBaacz9w7qt\nDvy633FYmp1luGbjkXU0ieeAb/oCRr87uACXg33h3NOMSTFoaRt/to4saoBm\n8E3yNkYtjiHkCGp3SQsMQYKRNCqRefJtqaablSzX5D8NNBFanmlKh/cxxATl\niJ7zv8dwdHMzRFogiKr7PtljbNrttSazfq2FRTfELiXzg2FgkQYtsFmGZWXs\nozsJiQq4UGykXXFZSoF7nuQXFXRKLBCnvlbTbGEjK9CqinxPEoZQGOCfPXm4\nMSwMeeIFrV0pqCGCIyktqufA6kLP9oWfoizABwFMzaU/vr3//E3Q0ANDagrz\nHLJn3mPzDSQ+IqLhSt1Q05Cya/nzXA5zfSvfWgBSJEhrdx8H56ugLM2Kv/6L\nBzgQWSnpuDLZHdMYriedzxac6P8r5lFt+vTivrJVyWug5Wg4QaQ5Qste6X6U\nTV8kTjE2EgL8clv3HmZe858pB5bUoYx8YkqclVjqeV/anSdA1SXuaWAuBwvi\nBtiEne3myMzCcS8HV2RZHPrwU8V3ql84ZpGXCQKZSrqdCpI0cc580wEfejW1\nnOisU4r3Aytf5mMRg+XUH8MFCnG7daazSRGbwYYCjzYwg4tdWQo9B3Q7c67s\nRfq9OCXNSR8RLmjvuErphRMTuag23bnr/tCBzlBs7a+sEaCqZSmXqivZUWGR\nQV7R\r\n=/vbP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202215132532","@chakra-ui/utils":"0.0.0-pr-202215132532","@chakra-ui/react-utils":"0.0.0-pr-202215132532"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202215132532"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202215132532"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202215132532_1644067568168_0.41703276436554915","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221513279":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221513279","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e2d475a3f725eea57d6cc8e4da26e1bd2b7fc781","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221513279.tgz","fileCount":70,"integrity":"sha512-FdmfG7Rpb9iXWn7mX4iQ52DTKedZToKsuftvkTPtODNdRYKY7Qz2rTmpOsDoAdCDsNvUKaqoiXnkRlAQ1r8RWg==","signatures":[{"sig":"MEYCIQDxvLIyP95j4eoVKgmQq7X91jxH29Yyo/FL3IUCnJ6zNwIhAMXViAiTUsDxkNHTcZ5xoOIuRwEnxK7bKgl6rtIqGPhy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/ntYCRA9TVsSAnZWagAA0HUP/2I6LN5mqJP8bbxSTuxR\nMvPVCqwxoOpTWS+o+kBB7H4UshMBiOJACL2iQ+m4Cu4yjIlhwwSO5sXpTmjl\nGVLc6YEMRyMHNlW5KRoMM/UBi7tsTk+OflMVFYC3pq6wCEjbTY3zVjUbBkyI\n/ZIY9he4axDuMSbHE1eDN1ae2grg86CFga3czkWuEey2Pp5pA9WST8aOs6M2\nQFjIi1qUI762DIa6iCzwSduesAiwxHQtmGpZdrdVX5Mw8QqeFpVDldVg2OnV\n93srnUYtjPyHPMz/27ggktLG1I7RvK01ECocPf9znAtIOIBv7cUiTRNXEoJx\niBceD18oXUsFsM7jWkITR1qcBw/t9+QKogvFsP+tv6w+MU4zogcWfkwjYrkS\n5d1FA4vEf8kcaApJrrtQEGO/JXpg9kh82Vy/YzrlQnxQLxlqgeSoD24YmJdQ\n94+Ldt8TKYNv3/vXczYQcchCpEr1GxiTnFeiLoYE0oMj4eGwWSE8XHfX5nw/\ntq4HwpNQn4Bra5AwVwvLVhrqwjZPbCqzsnBHsqty6uGgAR69M18+pYIhyY9M\n4tzx1BweZJkcWkbKlW4MBE7liqZ8BnSapToewaFI0ki/JJGSpqP+pk01Zrt1\nIeuvsbrfDbeoGdtbYWnTkdNt8dD7/X4kbREsv9vfDPdM6QbKBHPBZHE7zpHZ\n+Oy4\r\n=MDCZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221513279","@chakra-ui/utils":"0.0.0-dev-20221513279","@chakra-ui/react-utils":"0.0.0-dev-20221513279"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20221513279"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20221513279"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221513279_1644067672450_0.6980177272212031","host":"s3://npm-registry-packages"}},"1.7.4":{"name":"@chakra-ui/layout","version":"1.7.4","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.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":"8cc176d372ca1517b7b5dd62066181adbdce3efa","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.4.tgz","fileCount":70,"integrity":"sha512-WtjmyyxV5Cp4o99idFFzcZdR29Jdq/I3QL9daVbj1crD1byLytagDRQzEknh0mwNMOVBymMw2fDWT1ZCavW2VQ==","signatures":[{"sig":"MEQCIBTV0ITBQm31l3kvystjvO743pNjGBjzcxsK77sEcTZsAiA732UWYlNlzrP2Taoy+zHX4buMcxW3o0NpZjoeri7MEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/n1YCRA9TVsSAnZWagAAKk8P/1oRcCngZzPy1Tq4g3U4\nDQNrPcmWDNhd0luXH90/tQhjup6LosJqV0AN+beK1SFvJ2+NjTllh/bYZVID\n5KNj7Tu4mtLmsaGHKXWKt3mZ0Kez6xsZXPdzYgLz74QTGBAr1oI/OWRGH3QD\nZMtjCZ6tlwAuHRKVpd2KHSR2s1q2NycQJ8wNNHa/s6dmyQahSRzd7X8dmdQ9\n1N3OLf1r1FDeyWbMD6Mrb+YtYPKqrBmFkzIClx/9W9c7+GQ0uhvgA6Uu5pJk\nWNc6OL4r1I7SM8PZd8/X7dpo0LP8o/1Z7C539jWOQHWVJQvYpVwigcAukUhr\nTHd0r8zYR0FJFtfOYAlcuc07qAuqYVRU5u4HxshwBHxVqg5CRSL8rm7Yn2gr\nnbtRvjRZLgL328LmVFjg5XD0cb/Re+v7VBHPfdYFLpdDkxXdj0m+FngZVZoC\n379qGp6pxO4rGUfYSnQD84QQRuyL4LEqhdL+oglAAYMKOu+P3QWRHLfVa0zc\nRAQHsssBYDevhff6jnDmIL2AVPJpRP9QO7WzyYuENHRhkXMfyFzLIgoIDiJR\n6jU4pwhYJlLCS3NjXHJpjQmcEo0M0mW7Vep7bRPjBy4rtKXgJd4Tt2xgKbeA\nAsWMI3duEaCPY0L4aOgtsrPb+uv0fhMeMWWBATz1ym4WsclYzaW740SYcQkH\nCa8F\r\n=P/dB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"2.0.3","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.4_1644068184175_0.022008270988347345","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022114224724":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022114224724","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b4084b9a320458b21c65f566092450e453060fdb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022114224724.tgz","fileCount":70,"integrity":"sha512-LxpZuy4iVr0tHdNbZNwlS7+W6gMG9PUjeQ8fX3J7EKHMitq/DGU8bFMERjElWtfx1xycbF/EEkIpYb1o0WiZNQ==","signatures":[{"sig":"MEQCICt0EpGMKKq0IEwz5l+xluE3mPEVcCdPhIydbqiEum6dAiAzCJei5RHhHLjPIVCTejuY7GLgjAidJQOwLsXL3c+OAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCtwoCRA9TVsSAnZWagAAAbsP/0lCScPZIhs1vLUbEdU6\nbHMYQINW9RUw9hVLRDz2xrZDM2tGnZQHq2K8v8GWCUQY565tmYtDWA/f0d3O\n+639utjY9hEhYLIWO9Oa2GKQlTYpbwzbuGymkWoEswEQVfAmz+4kfkqtQ4Yv\n5dUqbCqBJp2IgtnhRgOelTtsEVJC3IJmfXAf8BK5ktrZ/zs8ffRnhpkk9dRw\nXuMGHitpRcMe4BUTeG8KCN6/2yJv8YgnzwT0dZY7szYDbsKMv9FLbpFoSsT6\nSfvAd08qFRI72NjM42ixvP+0u48fLwvYUswbGT12p6A+SqReWKxe/PY5Auxt\nkFU3gIGvU4hypEyKGa6BQaPbkuEg+c6N8R1zmOFWTZKUOq7kSm71b8UMUqkx\nvFsuibowKHIyyBXip9sxBp87/siD89MaSQj/nctCOsFNcdlCcueIvWi7f340\nhJ5u5HzMR2VFLKny+zZYI57+p4tp76fTXLxWz6UNU2ZoS+JGdnEp1JLYHdkh\nFGSA0K+IChP1kaFGLJmYp8NDAJ2nn0cuzJAk/XqeJ2ORJbBk4b1CLkkndS7i\ndbwfhXJth2ZpGtr0Cdo/SqpNaFOD/LdlnDvO/48MDerXuCFGbBMN1jzPTDp4\nCSaeTkKGfRFiu89ncRaggxmCBU14XyiUa9KqJQkKzgUy3aN7wQa2RxgGsB6/\nig5b\r\n=pOUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022114224724","@chakra-ui/utils":"0.0.0-pr-2022114224724","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-2022114224724"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-2022114224724"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022114224724_1644878888695_0.40968718006884997","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211594731":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202211594731","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"88b5d9c4e962e7781c5064c37f9ce6177266c672","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202211594731.tgz","fileCount":70,"integrity":"sha512-n9Cw0/+RpapxD4dui2+2LAYOH7vsH9vEANJ+spIBNfsaOz+gAI66gCp3PGaEZEabdZ1AJo1ss0zBCEG6tNOPbQ==","signatures":[{"sig":"MEUCIAHbdPbrlZHbePdvVU5o+nmSTKVUh4sHTxWi3kbYcGWCAiEA2SbuMFnJSIsTqdFk59YIoUAnUyXtKTKWWtx6oxbc0xY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3bTCRA9TVsSAnZWagAAWBMP/j+1Uj6VvOf5ySWsa1hG\nRIRcCpAM/LGwqA7f7CeRXxEoNKHn/ctQPy6117PKPFJUR0zHVmPJbVKgOSj9\n4jZ3kK2Xie6gzFN7YERVwdMQjZVyl6IzU7OjigzsIw2NW4aFed+MbN3SOGJB\nd5xy7V1Ul9HoGzEYPPQhvnAIBXrXLZ0QbjLipZXuNobosv5+QWYXr1YGdcJf\nSN4xpUlznV4nWisDLBoOud66mFgR4adrnElwkxoCHrxeDCiVv51FDrI5aPWC\nRH8dbmHI+oKmmNqc2AwxayX86fLruttHGM79Wz1oY+s2RP58BplVrTdq0PEN\nrTBjda1iS/7a7FkTLM0GjppwpZIQf7scGhL12nwPXHR/1hfefExjKy9PFvWW\nnHbPtCHB4TuCLQL3VxDnSoGWe1sEOhpVu7WqfVJlVqDKYwG4XBO6uEuSIGPe\nbRvnuiO8/vP2kg8ZUf1L/tlaNPuLk4F7Rxg9a6/gSw2QG6zLz55PB+WORxlF\nBxbYyvXrmcubXPUqdqee34TBFvlWVXz5NeNQFgKKld5CnEw5B08nC7SXDeHF\n/ZLJr3FE07v3WZg7tagTtbI67Pj11e/IPdPAwLkAZvydozRnyX+WTpMBrpmV\nYSJYD1m72TGEVBp03WNSfR8TSV+pNUPW14WrLp+i7ANemIrKUn72jeCIXwQT\n/uiN\r\n=BT5r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.1.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202211594731","@chakra-ui/utils":"0.0.0-pr-202211594731","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202211594731"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202211594731"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202211594731_1644918483516_0.960182334490773","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117101328":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022117101328","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-2022117101328","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2d48bf8aef173679380a6997bf37ceccc7a35a97","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022117101328.tgz","fileCount":70,"integrity":"sha512-Tglnr42Chj2pj5U1HXwUvxsfILPRFMHZnq92LkEVZjja9i/Cmsj6pQDKjbQ+BzJyX2km04U2rpZM8R8Ma6jUGQ==","signatures":[{"sig":"MEUCIQDQaMcCp3aRFp1tSy4wejgKi5qEiMdGkKwo1r6SDJgtDwIgF6upi1M18PdOhddyLKOipMB2MM+cCnSE7TV2d8bb9es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDh/lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwpQ//b7SHwbFOJL+/EgjCYz+P9+T6+59FkwcXXVvyEdNRBpRO65Ak\r\nZwcshUZuE5F6tAlOsJwuhUuhAxGxUnod8klfNdGRZMI9sq9bqB/iSiv7zgx0\r\ng2lDyoRHNiTTuKuPnzZZpkvgG7C3dWBKsjd5uqcjV7QbIBS2d7Jjp54jmYqb\r\nM/TLLFvAOlWTDb5lOH4jex450i3E6ryNR0ICMIhcw6OQbC/SegL4+6PucdU2\r\nzjEridSEF/oUj2LVKVmi8O+IsrT6M0XntW5DEQ258RWhry8W0qDtVdK77ylJ\r\nEBqslIp+PfZzkZ5xVhihSIFP4MJfXTHqgZvZqRGstoK6e7C5t7HpedRUhc1Q\r\nbihZL4JG2uIojNG2H4F5+rKbB0jMdZoeBfuOKE+ZlhnCmmiDPtwXij4LZhc6\r\njKi1oRfNxwVrG019tEX7VGC35bv2p1CHobm/bvkZsqCYso33f/Wy/3eaABks\r\nncTJzOR+IrSEUCdLPIOEcSUJ3/7S28atFgU6eRZuB7NV0kP3M9LNtCvBHKzg\r\nNJ/ig1El8Aq/aC/qox84QGeqb+L/Vjw89rn7damTZShvBzdBEBpkle74vB5p\r\nPMIlHRL+gkTaOdjfjVT+dPi3uzvITgzTEJTJbGseiwGCUzvWH81bWuDcgE0M\r\nwVNXdZqq9RO2JQ3yERdNcT3b3E0PHZ/1OKQ=\r\n=TNaS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"c2bcba11ca60c175b35dff10a922e600c3fd065c","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117101328","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022117101328_1645092837031_0.6305711669221596","host":"s3://npm-registry-packages"}},"1.7.5":{"name":"@chakra-ui/layout","version":"1.7.5","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.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":"b19a4f469350f8cf7e938c688dcc87e0881b5c5b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.5.tgz","fileCount":70,"integrity":"sha512-Lldx2o5iZ1TofkVdmOt8HceaS3klwjXrj+FMtsrxAKo+zg5w2M9cKLvSOthl+tuptcp5PHY/v7bw+uAuPDDKtA==","signatures":[{"sig":"MEYCIQDC2zvRF5lgHSjonwYSW/d45250vDqis4BdqdGdthlGeQIhAKDI9l5cBDzNL5tczwcwuYIPBPYKL+oO67QmoY8w0DYN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiEBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKbQ/8C9uCoK0RvSmJWdujVm0hgsFd1h3ZzKrPWwR98buh0t5Te+6M\r\nlvzzpymYz0xQq3gZvVSsOq6YJOAwXshwK1cpLWZAWmHgGoyqUQyimJ2Dl2vF\r\naIYyutB4mdcgIc86Y7krA1s66+Df/SOshWxGTS6sJyMJ0UcWKZR5G+r0I+Kn\r\nvu6RSJmk3U8+cytjV1ZicEIwcHCd0xzefWGVbAEcru+zRcqqt7njR8fWU2rm\r\nWnb0p2LRuyNuB9NGojyvJmV5SKuM1KSz2nywVd966vKhJLN7uyoWQtCbD/rT\r\neTAnQk3ffJo1Paam8gjHedetoVCHxwBIdCe3S0UbKG7xjWA8j3SgW8pf593j\r\n9hiwEpyWqmsduaVTRDD/vmqq/6c2VY6W+SGz+/hDeTmqdGeaPZbXbj9JJB2t\r\nskZvpd3hoPmf6cGYBz2MCNpsloFl3uijczHqeT0aHogRBt5sNxKmcqfYJbo9\r\n4vZHXxRFmXwW+ynhm7fPvSFqJKhSV8iu7ldG+oyvzVQWjXief+WRthdCn+Lt\r\ngnWkAPD0jKaqASlevfWKBDVorVPpA2Bm636hgEWDq49BhiaFPDd8tcrxhuSU\r\nSYA0TM9S48JS7wqvmk5y+aHsdkZE7JQYeegWweVzAdaiLHVh8jMcqcLYtECs\r\nn/E871m1xa7A4m/qVg/nckbX57RKjGzsOn8=\r\n=HS+n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"05a2fa22ee6bc23c5eddada9c3ac79cfd637686e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.4","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.5_1645093121115_0.17684017843846567","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022117102151":{"name":"@chakra-ui/layout","version":"0.0.0-pr-2022117102151","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-pr-2022117102151","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bee20616b1bbbc05de74759044b67999d3f8536b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-2022117102151.tgz","fileCount":70,"integrity":"sha512-5/bOflQ04Co/Zg9gaqXqGbop8f3ILx5JxtwE8aIeWMFzD4ekjPE7F7ZZ+ktATUjTL8J8BKtlz4QvYy1kKyxcbw==","signatures":[{"sig":"MEUCIQCvuu3/97KzgWs7O4lkuh7pU7gTVqzAcUzFxmlcQHUZbwIgBJ0hqBoJx4uyOl0JumqCUpBKz9uh1K73/34YWSRcERg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiHWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTJw//d9qsau6daagrfS3sJVIozWv2/tZ3AnJTPHBUskkAxlNtbawA\r\nEfNXkBx54x3CwVJeNFQad9VuHoR3HZWfz4WyNtGY4oaNm/ei2N8Fp7qAqAqV\r\nw8fEH47bkd9dCArJ2Acf6LghlysqKBcwt3AXG/uzfSMJ5t2W9F2kvvhrwhAW\r\nxMIFI47/HdoKXXqBnRK2zrDOhDeRxi2UOQzBL3baMqq3Aaar8LufIZCmpEeO\r\nj0qRHkOPQaEDMWgcNnsiSIROjYmAJmfmRhKTYd7WDFMK8e3uI0xuaGA82iTZ\r\niVdrqK+ttdeHOPIhWqJE3z+ntIO7ZxbMCRXaNYsZOz7yNl/6NSXjJktox+Ja\r\nOkWsbvJRZ241db3CbJowUcV3eaLJ59dg/pr8Ql/iCS8VZppcb9v68E0GUUx1\r\n7NiCMi/AO1+FxL1DO1H+X7UNnxbdC84mGblManBRIFslqpYsH6I8wRmNErHv\r\n7Cov8O/FeHXPhcS31le4lFLsvEOUdkzw4kABsa14kQvdRo+m76BKQCpVXtqx\r\nEebUXdpuiFs1shLP/qbFlwgwUkInCC4piHAYebArdrkJHJuI2KrHEJmHGW6e\r\n5Wav8V4jxl8aTjBHuJpIeMzGwfK3tNZuM+2QkLs4sSlGcrwZQEQmvlEkkng6\r\ncVFhterNRd/dS24UjwMgkYLgoTviKAVGZ+U=\r\n=2Zet\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"b0ff06849bc9bffe2a0a105c2c7f5f6d16718f3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-2022117102151","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-2022117102151_1645093334155_0.2407086478495748","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117102223":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022117102223","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-2022117102223","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"21f2367844f4c0af1cf95676352e9ca262d2f3b9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022117102223.tgz","fileCount":70,"integrity":"sha512-W7f3MY5Bxgz7SB6uj2OxGuLp1f5qskO8m5AVKAJNnNf3dq4xEThHXpjQB6tWsjnOLD7WiI88v1HMGfWFQ7IugA==","signatures":[{"sig":"MEUCIGNmOIsYwiuP3Y+9FJxaqtd55D4vESxkRpcqqOJ9mLXXAiEA8yjjOZs9XCZtiFhxXj5aznYUabkVLFXqa8I7HHM2XE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiH8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonwA/+Ox9+x1LmERNeynAJOMHsr8JTU5QQwVO9HVMWvJSoi9SXXTsg\r\nGzRJ+pEohbkvrlCYanHpCXrn0XJHnu9zABQ2GdpfF4wuc3EKd9k+Jx6y65Wc\r\nDo2OTxfJY6YF903doJg6NEI8GvyxLWrRjS8sEcNXOFc7baVO7fmWUwX9+NOY\r\n2vqZg/QtuVsNY0SPaV5vSl/k3UnffTZ2Emd+IMLG2dmzBi2sc1KnR4Lm11sm\r\nrXtO8nS0mFrEXTJFMsW979EnqIuXKxK4v6ns67JoWs3c9pHZN7ReFPrhDEgU\r\noJOhQCCEvkRwz7L2MiFLy199UKkU++HwLBiYeDHmpDdFUIUuTLDfRZvCRsZX\r\nT28uXiYxOvgKldbaCPCYV2TvaaQJ6ZIzteVag56kW5jhzqW3XZEMlHXdoEzM\r\n23GJ7DFQxnzLpKDc8HZWEN64cM09MUw2aiTMx3Jyc6JQmzHqDs0uNxiG7rWy\r\nlZjvhamPCgepx4nwG6IeYe/njo0bLCPzfvgjog3CjFCtZvBZTIJ6kR7uY1u1\r\nA4CGryc46Wy7yRDrMjUC1VA6eXWi77eiBnUfyQyCdsiZeqfzHX4gCzD11WtL\r\nPm4EFqCNffptDoz+Jy6O0EMs8SPeuK159j3FpWsD7U7PjwFU22R8RpgDfFF7\r\n5ylHcAhGCOLoy2RfnPqfZr65SaWwBHpQnnA=\r\n=3UjA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"5d4abe4b68bd454389224ac1001084a9929f568b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117102223","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022117102223_1645093371969_0.6810029749085553","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117103018":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022117103018","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-2022117103018","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ae32e1391468af59a32088ad29e0d55fdab19b02","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022117103018.tgz","fileCount":70,"integrity":"sha512-oH2uNSNhbd/9vVQrmN6jJuSWiu75yOOitPk5xup9l/rW459jE8FvsYcTsmMBSeuVtAHaCG0t7cFuoQZazCCccg==","signatures":[{"sig":"MEYCIQDSpjqJ5gR34JFIgF51WmFR0DBNgYS5DQwLHWwrFpBW4gIhAPObVGFo8c7AB1VnY7MgzcKKY+13wAvweBL7ymTnQpck","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiPYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV4w/+L5ZjVIB0eRsUbgUyaxVsJhCdjmHzwnHL0brjOjcnocarRmxQ\r\nQmbMWEJKPOC3RqU8Pym0NTgNxsPwVJgOyGMotajjaI6yrgnVqZFuk861RRlv\r\nkYeLTb4YQD+fzcL3An++2OmoagGMHVTBHyvkX/cUfbgI/us3EESOTAysLHyu\r\n7JA8u16V2X8wWlzTveqqxT6Oqrj0vywW8g7N5dPSSuw44S0z5Q310ALTfNcF\r\nDsK+BvkapotWglJaFv/owkzWOjpJSK8safgeCDeOHBbkUMrT7/8p8+Fq+yWa\r\nuQah5u6I8La+1qfdO2+BWhqCBBfjvOyg8zKuFI94op3T3rF6fdBLoXBZDCUG\r\n7vJT0JkO+OOeIS/I28Yj++Ltf3vontwF3sMBEQCcrdbuhcaePe2TqR7OUSKZ\r\ndp1gdx6O1Lm100Jmp5j0gIrQlokSy3bnY/xpYGl8tNTTLkwnt5yajYAuh83Z\r\nU+tbvn07m4rLcB9ZeLkaQbQFpecpuhBcJUoUTqY1JsgyqaOmJS7OALTG15b+\r\n7nAEjz2Tuwkwl8c3IhCYS6XcZrcw8/EtGGMWVw0PkyuakWL0i7xopFqYFrMO\r\nBCKCe3bZtekGGYpKtAgbWL0xW+9EiJzDtJO7U/zeRasvES8dR+wlweXuzc4d\r\n/Z3mPabNgEWIpq2++iNXoXDnXIUigrk/esQ=\r\n=6koM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"44c9fab5b0e34484c9afb858a553d4a2aa30209d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117103018","@chakra-ui/utils":"1.10.2","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.10.3"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022117103018_1645093848628_0.21115452276948332","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117131714":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022117131714","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"738a5a41fc75f8bc5645535378cf02ebb9d3b2fd","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022117131714.tgz","fileCount":70,"integrity":"sha512-l6R40nORLXrjrWaXIlvslzzuGf3q8zjr7EHgdsSTxzszlzLbxRjKDxiw91BwCn3yaDwp46g/CiT4qi1e051OfQ==","signatures":[{"sig":"MEUCIQCm3FSpweop8RwrbCoTl0wOvMzX1l5R5fIWkhxEx93LowIgOQmAm1b1UuGZWxpNlnzVCM2mo7wnUM4OcqL00laqluY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDkr5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrF8Q//b4mUhVnqnXqQ3MHi97B1fl5AfgJA5+MtIAabUKANB8AqFmYs\r\n2dezPyMRlvYLUw2XExeP3pJmj1yr/ihGcOcQZb1VhOTSgciAqOO2J5Zi6V2z\r\nsUnsnW+iR520F0w+L9WLKjGvHwBLH7UsjmA8nMiBL8A1L5hfV/pMgC0H5JUr\r\nQqYxnlPq/ywk64hm03nc70om7+V2ZLdg3v5gKgSsAUJqQJp2p4rFPhywccdR\r\n9UsS6OoIOmy4yp/hdZkTtzJgZ58jQMdOE+cbwcbhy92ZiElshs/aj4IWU9Pz\r\nKzMtQtIktKomf/Xmdzze6SFhNwqxA6cDW8hZTmdXlTk+uMXbDwh3OSjovu2w\r\nyH3uGZYDJcq+ozbpteiTqW0uV96z2/bF3VoB2uEeIB1QB/trmEByKl2gd2My\r\nz36RCVI3i4a6iUW9/vi7FoyXbzpf2TUQIdrhusbptJrjoOEYcUaHIQH5cLXZ\r\n5uFpxLLlHruwtOAhI87l4hFGnejcSbibBu44LfQOR436nzGnHHUvZ196jDel\r\n1PUaFiJfRaLWNX3QQC0qPiTMEtOK3vfu7lbZ9tbqhtE6Z+dvjfPQDcXsuL19\r\nQ8RnJIiXs322Ywg8gzUREYOKKY8s/RfTOMASZ12wCbAt8kIKKhseIU8fEXOu\r\n5bOa9IXCEgr2kUWx+lWOjmeEy5OhUX6r3A8=\r\n=ms6S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117131714","@chakra-ui/utils":"0.0.0-dev-2022117131714","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022117131714"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022117131714"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022117131714_1645103864934_0.385786731500797","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211713187":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202211713187","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e495b2e5350a938373fa10173f4038e088d5d5c5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202211713187.tgz","fileCount":70,"integrity":"sha512-BVxWn+PvdilzwsvFAG44rMr5STbPR5NmSto45rA6Q5HGFZ5B7F5VUiBaulAKvZQZDPVS82yPkElwDLIZ/kticQ==","signatures":[{"sig":"MEUCIDjo8xNtSFKPM+s0Zn6yOC+8/r+mhU9hZV9dk+V4n1jsAiEAvwiN7U1gk1wsraPg8qzyWG0RJm3btGWpqU0XxOl3g8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDkszACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwFA/9H7j7GLI3S7wI3f4FGJWZr7ZR5CBpxgNi7adi200fmx4VHUGa\r\nQobPpmTesVJSBsjHTkSh4j6pWeEs96I9OJVcZHOjkkrX1tpiEJuclD89bIoH\r\nGVsgQHqC08bCt4SPgOe/6+J99aZF+OfIdL5sXBX/B1ChV7aKKndefP6jFCnb\r\n5Sv00CWnzulaeqTWmK2w00v5SQLnCPGuOJDcVLmRrCgNnCDeAlb0VnqQAd9e\r\ndyBSgrzuAb5VR0MPT2zi7m7h82Xsa8nTX36YSEcglCnP79CitnF+zFLCR7WA\r\nt7g4pUG2fKbdq9Nz+2hbPBmj53x13IBYCuMHJJGxuc8oU9waQwkR8ElLa3fx\r\n/gUt4zW2gf7pF4h8T2NaiNTDhi8w/HDlKb5qB4RZ1o97gxeCl2Xf2zd1Szny\r\ntH0UvHnpQWoBNB2SsXPa435gsuSnv6HEpQXwCZVHrs0tsM0JwRU5xbvTY/E6\r\n+LY4zHmVDDwUUDnvWppDFntCxP4pRA63AtKdcXnl1GTngoeZugT/7OoC/uu6\r\nGbkmQ8BDyR5/ylVIB703cEZxaUK1p3ycUvSsAmxWgWpREubjpFTQKdDMtolK\r\niE9b1MD84paz8U8Tdo88dP5XjyHtjMsABWQe0cC32PkI3TFwA7t3n2BYWBZh\r\nlKYfs9u14nsMwiQYv26jIffstEmt6XCdWho=\r\n=eo8H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202211713187","@chakra-ui/utils":"0.0.0-pr-202211713187","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202211713187"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202211713187"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202211713187_1645103923491_0.8851160503880675","host":"s3://npm-registry-packages"}},"0.0.0-dev-202211720414":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202211720414","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"541931be4e61adaec5e4e174cd4de06f49ec6819","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202211720414.tgz","fileCount":70,"integrity":"sha512-ls5A4a7bINrkPMtPlnX73Byvuj0V4PPmUG4tqPWDrO7U62CnlEYojFgfQH2QFQgsxgCaDVWUr3IoM7hgTqcKLQ==","signatures":[{"sig":"MEUCIQCVZGfas0zx9ySDfWeFy9EOyQ1GqStoC6QcIjUbU8a7MAIgT1UceHnCkL7kiEfpnV2bCZM7Fx/GkU7nEsxhab3uyuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDqpfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouTQ/+O0PxGh1+pHRVGWAUrK67AJ7ZzIdnOSD7EqpO5pRFtJuwUlJY\r\nVzjILQkgUN/5IZKjXGDnfjz4EWykE1iYZekYdVAqXYrovyb7fXK9D45brI38\r\nZiipFtX8xVduoqfTdYnVoa1y/LViOW8Px4fM2jsQbrUBuqyByorz1J41bHFI\r\nEd9b6kHTmmDwXJDMJb61eHR+lr2j8TPjzlJcUIWPiUrtrELsvKlk2obLWu8L\r\n8s5C6LEIs9aWMC+m18eqIY+6gfllf/XcA43j5SGl/CbMnZKqjYdzXrb8bMo6\r\nOfH0Hrn0tpMJXGCAgIgYuQWw7oTm93raZAFpnYIEYOItl6OR/3QChWCH/7pA\r\n6GVodq9BOmy2etDg0UTqlChCMDlLnShdjZ8KB6lQVUIgwc8AFzSqzzeFafRB\r\ncMtTxNvy07MeX4P5JU1ueSAqvlgvFPIXL0a+D1J6IIQAPbn3tpZGuesQppzG\r\nPA07+cQm8sk9FKbJeFU8XOB8ZFulax7nET0LxdaM7eHmA+zBax9P+uJqgViE\r\nXh5mGQ4Lr2K3mtrxkazy7Xj8sCzxrUHALyJUhuSIHZ/CqbpvDvGOfFhFXpTK\r\nRVODrW88L5ftWlPa8kVMrLOutRb7NuQtMDE/VZEyof98NDSODp07ezEHU9qG\r\nCN86aOj8fMTnUR6NkgVSJaNB62GeCjAMJps=\r\n=KAVl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202211720414","@chakra-ui/utils":"0.0.0-dev-202211720414","@chakra-ui/react-utils":"0.0.0-dev-202211720414"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202211720414"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202211720414"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202211720414_1645128287355_0.6271445487792633","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117201925":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022117201925","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ec0866b152803a17c6db61830832f5bc7e63bd6b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022117201925.tgz","fileCount":70,"integrity":"sha512-iydIZzdPpFRxhTUK9wGeUp+09Js0D9Cr03nLH0bIi24jwNa1293rQIrAulY1TwBPUjDNgYzsjba4O+lxJkmKXQ==","signatures":[{"sig":"MEYCIQCh2GgxucdGfDHvrlWoCgPTrTO+2/kqFPuL3se/a2FjfgIhAMW1IK98+jTRXY64HmaDt7eRjBl0mQjrOeWEkGWepOd4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDq30ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodoA/9HfXy1N8d92QbA045RkJ1X6JFrCWCU7IwoOTU1jkcb9zG8seO\r\nbB5mbsMeHG3JdSMyYSHp7GaqVXhb8N50Z7dq3jy5EP4fNG7E6DlZJdZrRgW9\r\nMBj9nhYFo7401vx/uLyCMPRUQ8EOJD0GmkonJs7s9/FIcdu7GfMetWD8fgIJ\r\nZ/P52fO9GQ/As/XAfRmtzRSUeS4wQM+m7is7LLyLWTcGz2MNSnYVzBAaP0J8\r\n74JxlkHgnGzzh7UfRNAgrvl92m+S7OCMGK/uLW8iBL6HZiiglkjlU42so3bi\r\n6Xolge5g+k2GifFf8mYtber2sZCSszkoIjOBwy26sdXu+kE8TGo7Qne2H3jN\r\nSokP6kIuCtHQeENN7dcVebVm6bPosawFqaqcz24gb3XZKhL70CFlMcn9UtxA\r\n+TZm48aZqd7/bVnjF3Zbca19QgCh0KP22G930jRn6IMD8NuB37VteikUWi6H\r\nw3Wkesv4L3Bkt1pO7CaQOXUJt1NOqkjjkcOfPmt7L2Vdr5yyby88IgGvDUvl\r\naE7VYFQdUITk+8emMhdk0Hf5cG4cxtnQt54iubmYRolSEqdRDXbQ3CQNmfbL\r\nJ0dKPfLclx1ybU22TRkTT1n1xac5bTWcrhg0x7xQ4Iq/vkUfx3p4Jb3l8NwS\r\nqcIe82xpgLcMVtsDGLOVvNTqRgsYe9X0qYo=\r\n=qDal\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117201925","@chakra-ui/utils":"0.0.0-dev-2022117201925","@chakra-ui/react-utils":"0.0.0-dev-2022117201925"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022117201925"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022117201925"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022117201925_1645129204785_0.7405458675508567","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117203714":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022117203714","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e8009bd0dc302e7f120f200d0ef7e33c64255657","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022117203714.tgz","fileCount":70,"integrity":"sha512-YeTV8CizJIuisrVFvGELGK7hzrXqjlQIWSYkPs0kg7c0z3jVy43rgWb9fhVobjPz3vulP5yDgdgCAtgG1pDcLw==","signatures":[{"sig":"MEYCIQCXdXs5ZtGHJDngcjKmfOpsxjLfmGNnhr07WPb5hBRfjgIhAIGZuiVOGcQH7LuG2ESZKvqY6lUSK4laMXjFWmjffH+b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDrIgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpcjw//bS+XzNHNtJQFtM9ZnFT6rQKaP0zKTrx2QP2bh3sRtdrp39Xu\r\nqHFR6tpCfD/cWWIYvezNFPbr/MEbQ8zRepSm0GZJUrJ2boDwu7Y4MvGKJ5mn\r\nS1JZVDAWOUkYyHS2dQbQl99QRDR4wpdAacL5NbZr5dRJadI+gXbGxtcgop03\r\ntTuAjFhljM7Ob+Rf4K9RTZXC/ycsigQ5iAY5/ssLFpcxkUjtiqAw5J3H/tCy\r\n+AB5rtaBhpWRD393uCQjQv3N1YvjxoxcuNERtj6tu3rCj6y9AlmQOPk6KPVx\r\nEmSS5Uv+gtaN+eo9lNUjQXmkgFY1R/mUyGsUqYtt2baAqSpC1cMJyXOcJHqS\r\nhQoYxg4/ANOKif8aKpOjqLi9D7vgJoYvPsCeB0SlrSIFjgve9pFm9W+sqpwB\r\nsL0NTDrZbsnQpM8HhCkfuSGPsokM2fGAcgr/gfkU8FU7DxmumiMq9Mrq9FuJ\r\nsa0H3+XObQNoefUjCbZCx1lquLFnV7bgEUlv9NPoiNpRDlhZ9KejxtYaca3y\r\n7ABTnENMKYTf9bUZdXR/gMjMp/SaBx9hsnymH+UEO0MHnAkfzqk4qhs2VmI+\r\n3KE0OmY7XiBt8FY4fUYp1JlOzLE40v1Sj8NYrf7Vp7z2qpJr7LyuLTERQnYY\r\nibSfkbOM/JTPRys6D7ZR6PkQGMxLB8no/l4=\r\n=iCxx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022117203714","@chakra-ui/utils":"0.0.0-dev-2022117203714","@chakra-ui/react-utils":"0.0.0-dev-2022117203714"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022117203714"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022117203714"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022117203714_1645130272350_0.6580526583334978","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212083710":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202212083710","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"862f0ad830c075ee261f82e71234f62304f36dac","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202212083710.tgz","fileCount":70,"integrity":"sha512-1X0lxxUafZfRR452AgzQZq+VELii6+bQWIBjUyzt+9m3EsU1C/sjjUjFq8a9CVunHOQRcyBt3pO2/gH3LS1O6w==","signatures":[{"sig":"MEYCIQDzVOITa+w2UFxlfaDiVNbDoSJhCIUrCGUUgD8wqBslOgIhAMS1jel5g7ut/vCgQqedo368gbhAzu7ANEMTIXE7hELM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEf3dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3Mg//Y2H7mN8DWuESb/iM1z313nq8cRRe4PEiAsCcwrqmllMamtwZ\r\nE+HivhBnYO4Dz4U0CaiTQO02PgmC/D16raTCF/p/fxm9Nl4Crt9nn6IJAT+v\r\n9/hb7828uES7i8SmldX+jaf26Fa9IvpqG0SPsu1Y4gxEzpq34mdHU9J1AfCI\r\nSdV5K9LLSC5Asx0mRLBEaJsvr0AdizZ1DIV0yA7n0dZfZOxMtv+x8921narn\r\nUBFhWTkE0wSJx/V9mo3QNVt2XRHn2Yr8mtvRdqKZSO9P8IUm/lYp9ELUXyMx\r\ngwqxglNaMLCPUg8ahhMWLW+FP0eL4xfRWWbmtPWdZvFzpHJ7aRhvvPwpodcV\r\nV506dRNemZ8918smMkWNC7/AT0YIYSl9X93KurT51NxdUBQDwsli/A77ik/3\r\nHn+DbWtKZdJMV63a5LMMpxp7T5d3QeLN3Hba5lD7pwYyKu1JjHyvXY1dZUCn\r\nEPQyST7ROgZTzPTkugH2InGkx7BxuH/8LtUuW3FuTjoywtL5iREUq0HGRja2\r\nUMnJgP/yUJhwUN1PxsLKo9+pzQ48JJ31motEP2fBmcqoNRYdk1OszJvcqedY\r\n3kg2LfV6GErA4cIkWeNQNJk3n2OQ+914Gt8oPGHUOby7Ku43+mvgPSSyhIIz\r\npkfcSJ1NHuXlgYx4RSgquoNqUJ8a1NR7HVY=\r\n=gKy3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202212083710","@chakra-ui/utils":"0.0.0-dev-202212083710","@chakra-ui/react-utils":"0.0.0-dev-202212083710"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202212083710"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202212083710"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202212083710_1645346269360_0.22153838691682748","host":"s3://npm-registry-packages"}},"0.0.0-pr-202212011232":{"name":"@chakra-ui/layout","version":"0.0.0-pr-202212011232","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7b1eb5c4ae7c09fc7161afa26ca8350753881d39","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-pr-202212011232.tgz","fileCount":70,"integrity":"sha512-BUv4pu1xN7XvMJXTz+oxRfcrzhZkuu6nCgYprUriBpmS+UIEOvdmIuqnT1eN+L5scanP/qjzgo6KDu/jRQE2Qw==","signatures":[{"sig":"MEQCIHNRZOoxJmxxuH1dggeoVt162InZm825eXAQyXh23+nlAiBJRCKEZuvhtiolJ1HqPV+0/NQNB1mn0umIr+c0EE8V+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEh/wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUcg/+OvQP/fJzVkfvLy9/n9KkT7oLvx91Z0v0ukp3IEQf55CZ7XlR\r\nOlO9AqEBimPID4nALPo4IwRAdtMQkfGBDli+dmfx+Htc7bS5bGUmONemf7bR\r\nA60P4MqLo19ZxMG7JEnCU5S9vsaRxE0ZGEitQeT0hcN7Se7XqLNWBGtpnQ2I\r\nO4lcxoDYimkqY6KW8lvtQX0/vDuTS/ee0vcnl8S3clVyhe69+dTDuumhiNZr\r\nN9G6hsbVmmJDpjPOcHwo9Xjn+inVWUyI9mGhBRDyxMSqXeUqiVcvO+46OmXP\r\nd7aVyU/JiK/guAFDI9BNnM4J6+DaSaEXZ5P9hdKrqC8eor5TOvCxflhBJ7PB\r\n8/ct7Y0goOc0yeGILRI3Y+s8RKPvzebUyQE+/wXtwrUfG1MlxnchIhuQphAw\r\nVoWeoQ9r5Cy9vJc95a73N786dGMFQ72TOwjHhHj7X9Z+t5S4hkW72anLLmS9\r\nfEIU3FzGCbc5pyFdKJYd6iq1FOY7yvHTu4FImLmmKhvYRx1ry/owelRl507X\r\nr4tx3NgwyNb2G5IOPFpDqFVC8UhbMQs25A3vEDxX0rB/DtYWDi5EXJoCBIug\r\nJ6nvdM32LfgbYUz4tMQpBrSj29IgLa5Y4gV/zRr9nt6ClAZgKqkaGSKoAh8J\r\nMJUGSQEFvM0d6yFWg+wRoZs971EKeWAr45A=\r\n=I0Wi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-pr-202212011232","@chakra-ui/utils":"0.0.0-pr-202212011232","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-pr-202212011232"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-pr-202212011232"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-pr-202212011232_1645354992316_0.4543086192016239","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120113958":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022120113958","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b0d2a7380b9a751ed6a2433304b9e19205bed881","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022120113958.tgz","fileCount":70,"integrity":"sha512-Bg7dsG49V7rfOHruRq98vEmaGDH3GrJinp9anivq2zqbH/QYEiTh46X9UjWeU3MgrfkcMmxBwk+9ru/kiY6TXg==","signatures":[{"sig":"MEQCIDS21hk5okFtJdQnft6wvhzVvb6DkCXnBjfV5TKOfZPAAiArpuyaF6h8wdlEiQQl4N1ZloOAbWBaupkIDhCzahD0lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEiiyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojjA//WkI6PLGaEBAoDw5zBB5YP+m7I7s7AithRVKH666yZC2GXYtd\r\nC2Z0kN+clinGyUpavSexOEKUECtZdj4vAW9X4x9NuPFTPjb+jIN3SHbtlKHT\r\n1t4pq3HHFnLKT66LCpEG0yic21lW75SZIMp5NAmCOZ/aiZ/ADxrIaIzdUdrS\r\nN4smTrbE6Ua2sS+NdSthRZ3D86CEIdUzkDyWYIksg45HMqMYge978AN5kK7Q\r\nAkZpLxm3ov+IOm36B7AP28ZGitsioElAcyvSQKYuQA5bKcbdsCtEF7Wug7hs\r\nn2YJgxeTq5rCReXXi+60JIHAmK2KlJfCWaKME9o8JVq84IT7r/VAFmrfPYNc\r\nYmkaOkO1nfjTsXspIV325u8PBracIYD6pVEDcOCFnG0uTTijoCwqFMQ4RP1C\r\nmL60CHRM+xnf4wbSuIPxX0EYs+BeJVAhaAUW843KaJ+MpQEaXYIDTVq8/qAE\r\nXA1Xr9YpK6mrbA2E26Vps9Faa3WHFBsC6PNtMHp7neZP9Tw0EJaFauL+pO6I\r\n0ndI1I42RSV6leex+2U2irvhcBrZq+qnnxGWdWurPI9oNPHF9KkcoAYuf3qo\r\nRiXcK5hUTDqTdXoCQ3bucmMgvwCzTaZqLDM2sLCgSc356LC2Z9KhQuqaTGYT\r\nXNKAfzDcS2GqvbuAugyBEbPhLplX6DyJ1CA=\r\n=8yoB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022120113958","@chakra-ui/utils":"0.0.0-dev-2022120113958","@chakra-ui/react-utils":"0.0.0-dev-2022120113958"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022120113958"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022120113958"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022120113958_1645357234394_0.286790397698794","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120114012":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022120114012","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9ae9053e08801d3fa0b9736dec01f3be5899eeef","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022120114012.tgz","fileCount":70,"integrity":"sha512-h/mXdNavJTxdcZcJtwqzdfTmHdfo2F6aGhGteJm3SIHDYl26B2CdxqpL8oLu1VpMoXa/P1xdnfl0cbF20qktpw==","signatures":[{"sig":"MEUCIAeoWeJZi7i1oJaSV/LH/RpJ47/Y+8NM31kiQg8EFDxIAiEAjf0mvYFFuHvjjZ9v5Y109jxdcY6W4+66q+jnUz6QKm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEii7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpogQ//RVXkac6rSpKZkxH0p3u5oeRZF87QPi2tf51REMKI7fHtrRtP\r\nMBdf6XoiqIkCx54hWWkBeIl7eYbJ+poLuk6JmJAihTZAhuno/Njgmql9ULE5\r\nBXn3DobJZJIrKBYBM5+u7h2PexUoW2LeLedM11fZmTdp02Pv4pdhUYvEF9bO\r\nBG82wUk6+bijkZR5yO6agaVga1+fawt7FI/QtURxgwEWkAQO+1k+PUBE+BtE\r\n2EYgpCoJ6ttOUJnIaOjoOVDGMlkgTQs7NLiJs1vWtXWgwsueSY9cqhi2aDU9\r\nypgRoAyAXBVhCEV91JNd4eIyO/lnpZ6vTb+mrqJosyb+Eb/935jWBuFHW5Ih\r\n5PQ7QnztLYENNBv32bfUOVoGPSPuorxZ6AzAWHyADqbwyou6ZZxeqLhg1mdO\r\nT1zpuSfCOppvVdvl1487Sp/CU3w/fh8JX3iG3UYMZhMrLNf8MFdpCNlKWij8\r\ntostvhC1nGkL4vSjN7Sk+0lhiWg8AdOVmNF2cwsl5x3W6TY54MjUbeLf22NQ\r\nLxxaOGPfpCoZfG665r5Jey9LolYRR2gXCTcnl+y6990JS57pIrYyoM63yHrz\r\n1mrWQnnK9bokfkOCbOs85V8MA3zhB4myT+VfnQGHbZLU+JwKGQYWTubtxQPE\r\nAlwBa+5YeepWeEXv3ZXfYmICvDdPnHnUx3Q=\r\n=uJey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022120114012","@chakra-ui/utils":"0.0.0-dev-2022120114012","@chakra-ui/react-utils":"0.0.0-dev-2022120114012"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022120114012"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022120114012"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022120114012_1645357243145_0.8747411136840306","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120114225":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022120114225","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"342e362004ef69057b4355364a719d83e12cb48d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022120114225.tgz","fileCount":70,"integrity":"sha512-MqMNS1Udi+fC8sbb/uzDjXJjfSWonARJzsrY3Tx2Iaz9UoT267Shoe1l9c4ninO4r2mFQ3vIiFu9bUIwoy3U5A==","signatures":[{"sig":"MEUCIDF2VHXVQ25YVg29myZV/COCqRi8Pu4T3jPyY8YmC8EtAiEAoD+tIO/Odnb8hDr4iEExWer7XpOek+50Lpd1tIBoqpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEilHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaNw//aQRHUXue2kmtJmOsXm9k+zdx4lgqso5kSzyQVVki9450y32z\r\nfKWMs9KIn9W2SIVjtdQrCFnpNmKMDnux1om2uZ/TA+0cNYsAQozLPw/wiZTC\r\nr3/8+JnJt6oxMZOj1Q0qTfO9JLE6hrcCqosMEo1GKTYVyp1My/SpTo8pEyYD\r\n0rjtn0o4MDS9d7cI95/ZZ7r1TQX9JcusnyV1ADTBc4k6oPKDYxsEyDoToB5v\r\nWXl4SNPWDjXylcDajXH/8/S0poAROYS9/ihtB5IKR3LPR9HthLmhNQL76bOv\r\nsDCcirq56M/U33buQoYAK263Xzk2WQBWYXFemp1cSKdBM70bfvutv/ZH6aDg\r\n9SXXbssiBx4Sf4FLCHSWEB3/Tn9N4bYvINStNWL+cGYGXqQbAL/giwaw98DT\r\nhYkKTPQOfYYqzrwXTJgoWBQ607oFLXzFTjyqrNFRXabXk9RMgn1OK6G87iQR\r\nhFJJGPhKwv/ahdeyum6V3zRRnCQr7wsJ5wEuXCLorikzJRBlxySybmgIEZwF\r\ndN/SsNNgjAhaHbTwk9Crx8JglAOPBcw5JV9CNuJI0eHjP+I/5BviLWm8UJJ0\r\nR8Kb+eboU8DtVA7tgZDIqL9cwS/nJOosWA5oi91QccMc+X8QCTFKSXXsCqaw\r\nkVH9P6qJJFULbmwktwakd7FxzyvPWnE7zsc=\r\n=M827\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022120114225","@chakra-ui/utils":"0.0.0-dev-2022120114225","@chakra-ui/react-utils":"0.0.0-dev-2022120114225"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022120114225"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022120114225"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022120114225_1645357382947_0.358348309394084","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212012129":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202212012129","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d4474e3552829968bb7a5a0a4c28a8bd1161512b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202212012129.tgz","fileCount":70,"integrity":"sha512-dXj/9A+ENj86WVD0tnf7YLz7Tn4V5A0/9ApKZFRGRENgltA7sPBkqpFXXfFgvO5GRdbzjDagRbpEWo5ukZm/4g==","signatures":[{"sig":"MEUCIQCxeGtmGjOHOpqJFPTumN2k5Jfo/I4T4tIi9JmrEdjTBwIgM61T1gY1ygGNDOvAXKkb4vZ1UT4CiFQqBLL34MAWY9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjA9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqduBAAisz6NNqQTkoiEkyGsi59+QgLhunvclQOh8fk8Zh0/PkXGEf8\r\n8l2QLLj/mclqol1welSOPPriuToDjnQO2Xd/Q9gO+I2UTSD3eSbiNuYoByHI\r\nNRZoEsj4J5ie0XTm5XztNFufAXaC0IHUgM2hVd5VaBPL1fyAhYje7YWFUqkk\r\n8eo2St9D9DXQNHLAvHoECf1jsc6NzMQ7TmbQIkfa0I0WUIeepLy9ODeqtWng\r\nZZYq/AbFhL5gTeaWucN/+EqpJeviLW8xB4lrg7Z2NCvEfIL6msMFQK7eDDq1\r\nNrek+s92o5roOEfa+q8Ofu39k9YG+nTiUn14rlh8fj4FRgz/hxgV0zGoA3UQ\r\nGd5fQqXMqOpEWpVqFYRD3pHABp/rSJ2toWdkcwsGfocD6nU4XZsOmaZmRuRT\r\nxZO22rWw8Lx+YoefjbuaCHXJB2hNEcbs52eGC5+gPxrT+HnMq31XgoQVvmAW\r\nYdRrWmoHnGehJUPpBvaFzHrfrSPUHPt2Na3pazf1wg9SMFreLAdMat3XzgQx\r\nHKWiyz5H5yIJnCqQO/ZYnQWYUrDYTANgmz9fwVICKpv8ctOffc0p/TPImYJy\r\nQ9bMzv3s+zDk46UNZIIF/JisYjJ6LPTIXWUvRCr4/OPlm2khZJTfF6kSiPbg\r\nWzE4am1sv6Zdsr3EpA+oJy6HPPHja9SIZQI=\r\n=tEsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202212012129","@chakra-ui/utils":"0.0.0-dev-202212012129","@chakra-ui/react-utils":"1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202212012129"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202212012129"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202212012129_1645359165045_0.3140865724166717","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120123118":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022120123118","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2df5d1b3b48de21896542cdaa0feaafbc8dbdb38","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022120123118.tgz","fileCount":70,"integrity":"sha512-4VqfWc3H92cY95U9SZJYMv/U0qOdREOSmWOiSt7na9qpSBp2kHZ/z/dgAI0ZuPK+zrFUhOFPZ/U66k+hDcTkXw==","signatures":[{"sig":"MEQCICdeTn7QL1ZVNatKOgAFENwzFpWC4QbgZxR/0UcxD6CBAiABN024DD7s5aIqpQxuOk6FsQxV1GRDdoS/F8Tk+f0dnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjTCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/uQ//R8ogmtJx4YnDreMRqK2ts16FDTbgsf5blitQLsoHRGfu06Wx\r\nIVsXon8AOR0vr+6OaMgBZEmsuGLrPqaNjKDRgjCImagm6fPGbkJXQJ5Hy8Yt\r\nUAaBgcYO1OHlfqqZ73xtMcSFvAeuiwqcmrqHNSQ43/7/dIvf5eRCzfR4j7RC\r\nwJA1ogEzSka2STmCtiwnx7ZQXHDOsev9X424B5ufDa37+4p2DrUeDXWYzz5n\r\nDAdjM/864jEYX3xrnZ2BawW8FeZxuCnu2j1ePeelPPGDa94hdzjxzcas5kjs\r\nXQgb1y0hmLpEKqCQshrQk0z8EMTJ6Ph0GVDMsBZ0XQEd70pEFdI3sAvtnMxA\r\nqmu/+MecWPeceMDSQlrByNRS1LQGIFWSE5feF/o+rPbk0IzURUQeSjo913eL\r\nejrNG/n0U8bVvVQTYZquq8B92mK1bXZORNa2K/XplxbnW/2TDEoZAkUfrILm\r\nO5UtUNDRL/L6gUE87t8VVmVTsEljPzgDkMiToCrYMHhAk8BjMSp95cwJ0xMI\r\nyJlKqne/zSjJbGcjRrec0hZiUyuXQYbR6EkD8R64KoChksbhNqZt/idXeuE3\r\nrcnYWh8nJNU3mil/Sfn3GWcA5qQNzXCjLESayYXPCOK02BgEbC7JSSYvn2JT\r\nVvn9QOEErJmrcC5gRyJuy0ot10ufIBTHYOQ=\r\n=4371\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022120123118","@chakra-ui/utils":"0.0.0-dev-2022120123118","@chakra-ui/react-utils":"0.0.0-dev-2022120123118"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022120123118"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022120123118"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022120123118_1645360321691_0.8940370922611907","host":"s3://npm-registry-packages"}},"1.7.6":{"name":"@chakra-ui/layout","version":"1.7.6","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.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":"2d23cffbc3b47adc79be63d8b9e088dcbe1c938d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.6.tgz","fileCount":70,"integrity":"sha512-tggUAEwKuSFpdCmARZ9X+mPvRxF6FRve6HT38V/taqLo8V5t5GGH7HjeT1k6/SYPtrkJ/ZXVOvYrUDwWN23MwQ==","signatures":[{"sig":"MEYCIQDhfpxRLiwbggTzj8ES8ue1nuGF0PhRRbZ6bvgD+YvgeQIhAL+JNeYlCECy45AZlDQz5xT4lJD/V2HnpvoS9w/L+MTC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjbgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXuA//c4H7klrwqcFfAkro22nP21e4DCgIQqH68qFEztVq+HDs4LHw\r\nU3eRORIm+DtM9olF0F2bYKcGTr3JanDHukiJuUoKYKnXJ9MMgv3CRS6eaNd2\r\nlW7d7b+nrTTyprWqRUSdLyhBxSomzbETuSf78dFHpNxiSDbqvRsinoxyyF1w\r\n9sycRxRdsuacj3RCOYYwByeNaHQlrTE+iXq+MwzYMUmzx5YchfpCZUrB8VfD\r\n55BSYa61u77O91SCrc/hmtb5CZq48Na5j8sEjMl7VyAw8oXVGsuGp3osHjhT\r\ndiwZRpJYr+YWnVp9q4sbcygygkAlR+2tePMibI6joyvziuf2SqsVEiUMV1o6\r\nvWCTyy8etXl7+2K4nIAwgd3eB4mmF4qroXAoWVrc9ePm8OlQ2jYpeXj0VzGO\r\n2OT0u/jh7Ung0uzJFiM34Ra3/CJHjcaDZ5zPUNkBFC2ZWwoSvA/o99Eg9H2A\r\nn9FhhyCxUrl8G/e84Qc19cleUPkQqq7RLsJNtt8jash9E8hKexY1GYZDcp53\r\nmld7mV8bSpzFX9kDDSdqeBo/8QF+Q1hVEKYNxtFxi14hxj0AHX2hI0ON96Hk\r\ngaeaIT5FRqpEq1u81HzntRMRgSdZcKH9jvP+VVKg3RHi/KGDrgeSjwOMlUta\r\nDkmrnW+By2HXuluxbYDqmvS+Uuxx/5fthQg=\r\n=wfmY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.11.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.6_1645360864589_0.6899900101173311","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022124213658":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022124213658","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-2022124213658","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"59688506e85ba477e4d7c88cd6ab2467ad662491","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022124213658.tgz","fileCount":70,"integrity":"sha512-yEBpx/5qkZkU4Q3DtZSVHxNUHvTZjMW9JZlcyuyuFtVcTtcORW4fnWviGCF0PH+7vmKSlhdJCB0GIjkFHVL3ew==","signatures":[{"sig":"MEYCIQCs9DMwGeldSODYHzBRqjb0i9e2rOkYpHMdgLrctZ6zzgIhAJQS0LhNSKBuchIGWNiBtYhwyQR+Q6gxfhn2NODCBakx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF/qPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpX8A//fGu/xHutkDZcCP4xs0fb+//ukRJmdB0cyO/6ZnCQYrZG9/xq\r\nv1zmrhLgKp/Hebpww+UOqJEt9Aq+lynLwde80E4ciVb4qYBRbHmMkuzgJ5Rh\r\n0BoxQQg3g3Gw9cUKAWDguojTHcODlszCO9oUSxrFUFCI/en4XyHoxYqXeVo0\r\nLzdnKUAxeGQhRNI/4CTSLO0kT2zo1AaTmTVycXbGFeNeErKXBorSJI1d8/xo\r\nXO2OArjzbt1UgEWBk4tXqaSDuG2TRE/q62ynOyoAF1bRNUA8jC8jQXNd0MrY\r\na4yuS814CLijywf5LC73utMjQUISfGvXl+VwRAV9Mp88G886djgm1AdGI/nn\r\n33GG8WFyKA5utWjVPNKxzkAS7bbBZgoO9RxLPpFsYhbXyjDmHjdJA1ut7+rS\r\nUkQ92WftCVRX4DwPc1NVoaTuN7l8WGk3pH/t1PAnFbG9cPbL9iB8xsTEg1of\r\nn68CA2+nGA4aLLiACxAuO3psO1HslMYRUkSkFGnFMrmRLcfolpmTYaGPG/kK\r\nR7C+WlTsm3LKSH0PT5Zm54tWfMDvKbOO/fJcu98uFiXCRiWMnOxTvD1Ajr1v\r\nF+gmUzXHGlN1UC33oYn2oFfU+NzEzOom3ChatiWiOWE2dzAG/43OKGQAP/uI\r\nLtm/fewgbbnDND8WRqYpaN1eDpYfvQ64QTc=\r\n=VSLp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"e4a990d41ec4e48a3d92840e0d74cbbf4b17670c","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.11.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022124213658_1645738639349_0.03221116052868567","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128214753":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022128214753","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0ecef9792c806242314dd1d6e772602063f7ac88","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022128214753.tgz","fileCount":70,"integrity":"sha512-vVqUTYz1dCSTBSEqNOsYgkKJ+jXxp1KVvk8AQ437pzAnAPJtzQwSWydFjZEfTMLZsGFTNeWw+lxyov/z6d6Ktw==","signatures":[{"sig":"MEYCIQDI8VDMy8IIRLY6c/qtzOv05nPhhRVxazUeTiJ3pt7FzAIhALR1P16+Rj/2T/nALeSueAL/N8nmA8oBgwL8ybtVRcFy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUMmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2WxAAicWUl1hwqbaSYBPaPBZtPGuWqnqjgIzgXay7fA1jkFAavv0o\r\n3qocCls9td02JEZwMLZIGcqed0BhhjrwZzGanvxpN89Dq7APQt24jKmlWLMu\r\noGV2OiGzZDJwqc7/62zQ0YKyrYBauFdTkS0UV0Gqmh2lz5Hj/5URqUsCXjm2\r\n4WEgQFtYDEdU65k3SgatbKufsuXTN32HmsAlBvNBkU9qkYfdcxVJRMXO6Jlf\r\n2jXZFfZuifrqgC+b+q5flagSc0+L90h1GQJK+vPznp+tCSyQEYXyBkaVpz2J\r\nf7y1IXfIXj6CpBp44wi0Yw+uvvI7Bef8cjoMQny3e9r01zICLuUTBtSBoIA7\r\n87UgqKyVM15eMZRd8T/4q415XPWeL4Ar0xSuVC5oVtsyrP7PetdlAKFD0hXY\r\nR8qrhR0zBbmiVwkmKiXnz6pudR7Yk6K0bGhGvCgKkPCTnxDcZMVlNVYBpNLI\r\nElsj/8VbIZsRE8o98wz7U+qD9ZL6pmRcmaUtH7zd+OYLjdAZQW6u+03ph9U6\r\n9NwO0/vyx73Eldo2NGeV3pp9SOtYwJHvyMn3L5P0DN1rq7cOTLKrQxGgdJzq\r\ne2366FjO6oo194nm/vw7adBUKkI3VRWM4nR7qSNia2Dk3Iq7CkRgmGgykDj6\r\n7ZVgxiAePOWaCPfDszy/4BLeOSaJ/U3nmmg=\r\n=YXk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022128214753","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022128214753"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022128214753"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022128214753_1646084901810_0.7780537079149048","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128215052":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022128215052","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"344b14df79fc4b8611e81befd87d4d820bb377cf","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022128215052.tgz","fileCount":70,"integrity":"sha512-8B/iLR/TWQAHHdwGGKXQwpn0mwSlQ6BMqkzdmUSBUKvWFncXAojY8o3X3DKDdGxmBn7kydsxoYGlnDlbGpy0kA==","signatures":[{"sig":"MEQCIFAPzGzhBqOalCWqMqn1297sMqbNXylJWsUFGZrEfqJrAiAkr6KeQbEYfTh+qJLU/xVwwX5ZwkQR7oV7FtU9qSWkOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUPYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrEw/9F9BUG48KC3vOSHvClTJnxLS+0fWoqUPb79KV9CLa+FzVHndr\r\nzCw4mYUzslui+opXuYh5T5cCRJVZBdNUha8mu+GuW6AJlhBTDMnMVnEDhpxX\r\n3HtdyFY/oZc1p8yg2hf0u8CJrolgBOVKoU+VoDZZaC5AaJfiQId3aA/TPug3\r\nimNGKXjX9DavckoDR5onkdqjIuhgGyR+jvPUCjfnpgvDSsWipm2mV0qQ1l6W\r\n5mAAOs7UU/t7xChqT+PvGNmFeFInM2gvxpZxx5eLxE83hLZyJsPp7J6BWLQz\r\nN+kuly+gRlH3+6NZLjSUwALYp1duCO9AoxqwohyMHvlYrbt3XNTzIX0CTwnN\r\nfn355PZbPZHlUY9rtWqW1F1bnjF2j8rE/R6saXFJpV1b4x/txPq9UUMHQYOB\r\n80duehLHM8B1/+fXI+7st0ghL4xamWkwZYOsF7w6nHb0eKIjpDD/2Dl093H4\r\noTTo8KAAThOPbFmZLmcsOcq46VnvHhgo7aNWDAX4pSBuMzlgONF728k81IaI\r\n7LVU1iXmUx8RdmtSSplVpqnXcWUHBGtO91oovcjXp/zoeoYsU+cf8JlzD655\r\nD78ekV2Dh09ZAFdWRUJ4dpfDpCD9hWVHx5HVY/vY76KoFfFPlsU3Z58F5yhd\r\nUaptLHfu2iJcCz9wzcJlVDaFnUuB2v+yX10=\r\n=Beb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022128215052","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022128215052"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022128215052"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022128215052_1646085079910_0.2516894241267207","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212821520":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202212821520","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"97a0ace69675afc3118fa79677ca40356944eb46","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202212821520.tgz","fileCount":70,"integrity":"sha512-4UsPlDrHueMHQq4dB7Kl4w5hvcPeVlgVYEFfclBqoBjLAex/mYiQMfIOzbiNJXyg1CdleQvjck7iVDZyWYNasw==","signatures":[{"sig":"MEYCIQDHs+O4Lg7zQuNQc9UW1rl55JGn4WofKllZKrBwGb3caQIhAIroulfZkweTCv/F6xiDamryl/bo+sjU1uSbhF64nh6I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUQcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSPQ/9HGGXL13bbZSYccGzsjGWvlo8tz4P06GndniuEYZhh0WmDL/t\r\nP0dYrhMP0GFXIg8qYjU4ybJi4CiBYibZ5sp97cOMjvqKGXlRyChZmzM7Ek13\r\nO9ySEO2DHFZc+dV+WXB9b5kF81NQ1rshLKR1UowsHh6aQVpTTDoL+ND0P2uQ\r\nSSl//Yssh3Zpk7TCIu1jAgOhj0N3cwrTnERMlewCMquyW9vfBz4OvNfkA2xF\r\naysa3y4jUNHwF4gjtZina7HZwU5JBplfDjVeAdf9wyVLxYPNmr4QLUHumaAx\r\n77hVO0JWKV8ei1p7rfFJ6QACxyMQyqF9k0Qbp+bhqImfuf6giojvaFHcnhjW\r\nrRY6cG9ZbZFC5uponqEMECaJZ/NIey/W+kWT+zdyZmYxl1i9nCEWKss6Vo9h\r\nfMGOBVXjLQfB1fDBk/OzufyY7SzDUfmSDF2c76ZQ0v0BqEG8LzdNZ/lSMxwk\r\n0yPabDEyjzjh7DNva9u6xWwK6IHzDpQcyzdkXKyE7HoogYLrxSp0pVAcfdL6\r\nYSnP6b/Pg1N68tpMtbMo1Jzt9XPlDX+ByhU4D4H3+oC7y0U+tge8Q+SrPmic\r\n5uNo1DDZxk1KfSjgBjaOZ7AjHAHAX96vEhULE7HPSyxzBkBc4KQMFWhFL720\r\nCDyF9LTz396QvjVlPoMOBgpf71iJRkfpV/s=\r\n=1YAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202212821520","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202212821520"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202212821520"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202212821520_1646085148216_0.19043873867179895","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212822477":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202212822477","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"eb02698698bfc75623a865b9337be41eb3f8bee5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202212822477.tgz","fileCount":70,"integrity":"sha512-xlhbdJREDTE9vRVasf1KBcI9XajCR3y3dUISU5uOXXLp/fsu20T8wSV3xol4fME8xixpiBXPDchmV/H5sJrXnA==","signatures":[{"sig":"MEYCIQCLnlPX8VmRbgbEnquLFyVB9cljoa2RhGmGxE4WhciDTAIhAJzs5nnp1u0kb395qbDsit1vgpR5Zcx2ipIEteWTSja6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVEIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1xQ//YkqBdS4tIpZtMW8kA2Z8+Gtdld+fhl8bpHiBc6tqqoC3nnED\r\nY/Xurc8sydDOxIuVoJuwlBXWKeFh1NcwXpKFUb42PXn4plbtVOGkvJ4D9QUo\r\n+7hJdKe0seaQ9gzNjad2iz0ZK8eHN46fMgrSN6LxztQNjiW7AERXXAq8VZ+K\r\n2Gjop3AbCMTf9FCh+MPZCNDZwHqBskb40iHwNrEGWg2UJcISx8d1r9/3hSbt\r\nf3NnTJ5eHcivFEVZ1rw3LRSPRHeSRyJhaPritFN9tXL9lhW1vyucSimvu3Og\r\nuwC0mOIHLOBC+Zp9ssfuCza2fVYgP9EbsrAOtI8mHJL9r7OpzEq+mtO+OD4E\r\nKyv2Mb3IFKFD93/cW157WPIUHRHfgHj0ug4otEoIVaLUJaAzr7BmkbltSWjI\r\nL5dQPU06schZ7IDT89TzL9DlrQHkhDVpiRsmupzKbm7xLa0Us6W3UFcQZsCZ\r\n4DtZrXdADqbfWG9yq1Bng6cK4JjUBwiZTGVwBs8hlTRvqcOaRt8KZ4zkG3q8\r\nKXRjZvyNBsD07cnmEeJ3Wpcu4QmFkz3RBv8SFFKKecDvuH2Y6//9Uyf4Juvj\r\nGzCNj9+Qo2wrgzZhTSwfMEJn3uz35phbuQB1AlEaE3xrQw3+7a+8qFpN4n8B\r\nPhnGKrgjYijS9q8ZlnSArwBwrYRkLcIfqtQ=\r\n=n6GV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202212822477","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202212822477"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202212822477"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202212822477_1646088455927_0.9550097591745614","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128224832":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022128224832","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9146376ec0e0788ef3fd8521136a48bf61af3c85","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022128224832.tgz","fileCount":70,"integrity":"sha512-5tLyxpeXOqulyi+zctgym+jf7XRUbpHQODSnjjFZT1hzpZilXU2Qc+O5kn6Ba4AF9Wso/44YlDn0+T6x+eSfOw==","signatures":[{"sig":"MEUCIQC4wSrBDwJB7/b3uHh4NzipBrZpDdLanm2ONpm+rPNU3AIgfDu0j2hyPT0lNOnpqGn/28mWHTS6WOqMO5ibBN5A/8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVFcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUPhAAk5XZzFtwkxCw61VRlhjcQISix94V1GBnCvpkm8/l9r03JhQw\r\n6HAQPn8fXwvB5IDSEDvpBAHiO20dbTFx2J/XJeL7VWt8rI+GjPeJWyY4nNsi\r\nwTTgo5hvw1z9lekoxqI3NjbHUyHuwsYkxxTSLkg5/MeE2rWeSXHk6MNh0Tny\r\nbHT3oV53IzdELnJ0e6aZtyBUk7AUSEWqY3OD4wwLZZTSVUQHFa6agvHJcfrR\r\nxK5KR0XagZTa+G1Fh8Qm9s2dQznY/RQqIjzQzuBGRAJisPrMJjFq7TvVSQpU\r\njOxV2cfqp8mbIqMKCE1BRDP84x7VhD2IxQOasQ6KHQ0abcVLjkvPTnbX5zNG\r\na43dNTOwKZP6xaBMm0s5GGw638xYXpEHrvjvGYtoUwkppE6NZrEQk0vnbyGC\r\n5AFabT7iyHAnCTDY/6h7kSQQd6q9jdwYFnNI4WS8ycxTvXQHcDVoL8u8tmkX\r\nbBrWiD9NQoe/Mjje9mX9MztWuR+6HvgZwTTgLKkJi0Y0CJ+Cs/eesXDC/ZoF\r\n7XDLK8pv4cAq0zLzHnvUmO7olhgaMlTxXF9kmIwc1mBi0QLYc6o8rj0ucwBR\r\nHpUcaP6bRINjUbKc5RPjtkqt6wvzDzlkgpPdpv4rej2qWYRf4+I5yBIhXz6x\r\nT22nwB7Gu/L8juwAdrRXgP4HUzgYplAi490=\r\n=20yy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022128224832","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022128224832"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022128224832"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022128224832_1646088540361_0.09187864791999023","host":"s3://npm-registry-packages"}},"1.7.7":{"name":"@chakra-ui/layout","version":"1.7.7","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.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":"646fd689f9d54ce5cb4f71ec68dbf314b30699ab","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.7.tgz","fileCount":70,"integrity":"sha512-HuZ/Zv9xWzLip263tX2Vt0oaqwaS6Srw78Sdl3DiGSifN8x+ooEAxmeDAIaU2PO21YX+f6s+9A738NAtSM2R+Q==","signatures":[{"sig":"MEYCIQC/ChX9vcnfWsNznxkuMbSm7HNPepAjqbkK3k1MprwcWQIhANc7+rUqjxvq17uRd3uQLXOyN/wSP7iyTFPuxFegdl+W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":171916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVWiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9oA/9F11LUtcUYn5kzl8Aj9h/7iZE8KKAcTaYeH6wGEVgGhhK1al7\r\n2oXpz1zqesRNLNBrQS1Eh6vndO6NqIt4jhVkZn7e3fxE99/p4hUfUquNZxVS\r\nfrlH8pnTFdEstjkCsWmmFt8NPxIQeU6GZ8sDNgORgK4ijvfzDp9CIE8Ay2QZ\r\npj2S9409JDY+58rleAUqpBM0fmiG81NK4y3gH2zEtEWVtSe617pKZuiBhbbo\r\nDt83RAAeEdr5FNCsiKIbIUCbCI1g3a1YiMpW0cz5L36sC/7MW+0qnWwR/18C\r\nlxyAWRpKAyIn9atTF9/j8AVldT7gyVSeo4MRq4xGzGMVeviB7Xcjm3yW9XIT\r\ni06gOgLgo4QR2GHx2KyxSXDn1awXU0pGM2XKLvleHv5MiOoV2QwxAPG3AiIk\r\nM7vxsQI0M9lF1Tvn2pVxI3uFJRPffg6ql+QTAMCrwsrd89M0AbwzZPmMc7Xq\r\nU/jxjNssm5ZKQobBO5COWNQg2ofNfASkcYtAInsxkE8+S+8r/5/9v+Co5yhg\r\nk5stPypKaqywrVNKdF35dEg7eADBEbdHrjBRAzm1DB26LDrafAVEOetnL4Cf\r\n17M4JL/frNri2I/qMqCvhk3W9UZSVEQUlh1yW78AREn08ezAS3PzVgSgo64f\r\nu4W1wTPIOE21mxpimdlHXzVFH39U6AB9MO4=\r\n=3P3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.11.2"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.7_1646089634189_0.4656085828598606","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221417325":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202221417325","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"399daa73a30089cf250f8df598c7bc4e703586a0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202221417325.tgz","fileCount":70,"integrity":"sha512-KVr6eBlK+kjL/SUKciO23CD/Eay4LsHM6bmj9RBa8zaW1zFOofUiQuVlcLSrTLBPvWxo9bh0gnGjYk3JpAKXdw==","signatures":[{"sig":"MEUCIE1KH+EXqMaMEjpSg/k4dhw/hHCIkagKPI6u/97LUFskAiEA1QazPd6CjOmZgMpTsKa7dh9h+QOmRvMkhvL86hlF3kQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3WMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpy7hAAgShR9JCRg9UY88XIL2+vv2Lxu2tLPSrQkDRC4NC9OxfWhmn1\r\n8S3CfnNJYQm6fN+kuo1uTbdbrPrdqLk2BQChTJre16FeIIbX9WLAmrlXx1vC\r\n/qDR52lnwhHabQeT7jsG1oKXc7K9RKJqKKpGDTbmVBHOpdi/4txysp6k3ZrP\r\nd3sX/vnp14nLao5vryYPrjvBQH6QgIyJGavfQ5dbIYkwe29px1k8Jqw2fTa7\r\nmpeF7LfGl5U34HpnPw86oXgFYT+ITLq/i91zDEbu0NFm1A/wjtnxxESO8F8W\r\n6cvgTSXeM89jHJTm8Iwkp0nOCeL7toHP1dSXH3T7QPmSCCwjmPu+R59Tbiqb\r\n8TH/Ynyaj3W0zhFb/IK0LvC/ETsZiQZ965R+rFpErR7ks/x4/462JdY7YzQ0\r\nuWsWtP0vyW7skVxvsWjcFNr2sRTiZBit7Kc8z8ibS5xwjxpxisARxotorB9l\r\n63Rq3SM8ezSkp1CUEFKGJ9BXlgDAm7kEojEllYz2k9LxlABsqHgD8k3ecpi5\r\nUZvj+e/NG2JumgzDo1Z6qGiSXLpIOitOqs7d3zOuc5vObzc70R9gJLSKcaYV\r\n545eLDc8MyKWsLpDt3xLXZriK43bt5b1lOYxrp2gg1W9SyRHjSwKq0PU9rbN\r\nq+W3y9aj0PEgEfiHespgWXgsVeTvOkH9OLc=\r\n=M0Oz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202221417325","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202221417325"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202221417325"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202221417325_1647277452691_0.1543081753777631","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221417436":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202221417436","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"cd19084dfbf7cab17264a19460ad7002ac1d7b6f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202221417436.tgz","fileCount":70,"integrity":"sha512-YwLh/jhN0vF8aPCouEO9/Dr5casKignnuOhkRS7YH6tMB0Z/AOluLBOg6HjUsYzZmXKW1HDDU/BcGrT9EG2C6w==","signatures":[{"sig":"MEQCIC7GcTfZbjenNwdcqVNMKZAxZ27Pl/Lrl0xOGXD/VYpdAiAFB+PqWZLmaM7JKq0OBGGoOgFWgysG4S3WzvVLDHLA4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3XDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRTQ/5ACjdCR86xGz8H1gl2+I0JFIigoM6P8xYQ4xbvpnA8tQe0CBK\r\nw7DBSqPqavxIzXrQQ91HBDRK5Q87YJS9eUiSnBnJFFkIe6LmYu/9o3onFzae\r\nyPvR46dLEUbS6brJEDkZwPTKj6HATrN0jkzzgzmd4MjT2uo3IXlmd8YxUsAW\r\njG0thsr/VUuOyfR8GYRYJ62qc5uwx/Bbr96WzoPtQRvS8Ua9FiUGaOlgNROg\r\nIUamK/2isY10k+eMxzencdbIKpttvQsC1sdqOdJiWf7l/UoDraJaE0mGjiNZ\r\n+Fhu36RfCvY+CdStp8cojOCwLlvZWzUVbZNsNH98k0kCUaIJEMW3DdPb7n/6\r\nfPm0oVcgtKQyYt4e8O858K4/z670WA6mjOpKPAumLh0cwQH0IbleO8AlPPCw\r\nTe8FUDmXnk1mJHDC9cU5GJ9MVb1T+noZo9KVz2Q4hS5T56XBgtUo2r3c9p1h\r\nFDpLz6FEhL/9z2YWbz87XDO7jJehk/pp90M3PJWHILFVAuO6sZctzWHCrtzy\r\nleSFxZPJkV8cR/HuUpcnCJZMHoun8UsH3Dcx1YmjXgO8th6rGbHCNtBwRPs9\r\nwTBDypO7/Yd6ln1Fj0uBLXy/DJQZfzhBR4+bZj+SUL76A/E7OLQE6L0JBLPo\r\nRtE6kHc0sofouRVHJWB99oF0VJrsCg9BQQg=\r\n=WrdQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202221417436","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202221417436"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202221417436"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202221417436_1647277507095_0.431763185711709","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214171014":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022214171014","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"86835813ad32eb0ad2094915a1862cd5c6e0962f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022214171014.tgz","fileCount":70,"integrity":"sha512-o40zCukmw/bz8cj63K3jgVXe63q4tKXJYYxuFC67A8qF/ICbP2dKfvLjK7LehJIaF7IS6DH23knWf2LHkp62Ag==","signatures":[{"sig":"MEUCIEgayZidxzt3zsWJp+sJK7IAYmE82QcMd1pgydFIU/zWAiEAu6IBcjp+8GIooiFSf0vAeVNz2v5dRBtiFG9cjy01sX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3dCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZPxAAnYr8ORdUXjU5pzhEaFdKNL2yihbNUqD6H8qXLwuQXTNm3TDS\r\nXWDQiHmWZYzOTaNXcxAen/L8dgBTs8z+zZmeoXcKkX8K6BYs6yOfnG6M7Bzv\r\nFYTg34Nlf6gw+KKsHtj1WpCkh0+osbdHQbNtyKexaYVi7zNwTcX8oHZ9JtFW\r\nYftzArKIpD2b0e3oA9Ai/AnDrOcpQfwDhg9XtMaymOQAKgC7dpfVRutrM4Ks\r\nLgqj6BRsKSaFxMpdmgS2J7KQd+uREJR6PSXw5hHNs4kurxhHArSfkQ6kpjj8\r\n86y/DBzyvJoHZPGPv6tqhgMmsKZOI5C8y5sxuY5EZ6brz93KsMC8ZmMX+DVd\r\nFMcegeqTlnI0QFicwdFKioypI4FKA8PEDy2URVWqbbkIFElwIw4WCDlP+Mg3\r\n7DF6ae4lJZSgG84X3h/4fiukcQlBWh/+BWsUeS9v6zi3lqC1LsERg8nH/9gb\r\nxKCxj+NBiiD0Ebd0mANOTRznVPW88hQRqqYRPJR5zUn4F7Rh6mblC37fuRhF\r\nmACwu1ZV1mZE+VHgdhwmIEtuhYwR020n3ZiM1tayWrpeB4iTsAB7noTCSt1L\r\nDLv1xQQdVUd8DrwiiyZ53ewEfqL/LZNysh59LUm0IA40YLsCZxDRL41/xizt\r\nvurqAtvhFMWF4/2BkFfrC+UV5ToNmBaZeAc=\r\n=N2DG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022214171014","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022214171014"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022214171014"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022214171014_1647277889869_0.5414276503603515","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214195434":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022214195434","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"665f47d8198c9b87ba4f8908962de29460e1aefd","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022214195434.tgz","fileCount":70,"integrity":"sha512-P3oYmdIKeccLiL71+dp+2ww4aLqRbSC9kk9nfYDsmJ1o3sXerEr7Jg3LwgOxX9vr1Q2OXDqwMA3T1vEQJNwmXg==","signatures":[{"sig":"MEUCIQDBD74WNyVg05DgSRZXSgKxD7Qaq5C65wfy9MqnwuuqWgIgROuwO4Oyl9zvl7HSfUcAfW7ZK3LZPjnNl1t7/ypgdRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL52YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqk9RAAjmFqUiLSzdTW8pjixRoKZvu2Lnz1c1WkNApFYsFjSEAiLjoq\r\nhpeh9827eUdsfa3YWevuFngW1VZIpb8w4bifKfuUJkb59qqrumTLypDbC3rR\r\n7OK7P64SCUbnUX+vLxX2mB9ywitGLo/OQPu6fug5JZeNortXTBv+IAM2zOrf\r\nheHOo9NJC1Nf52vimEE6DzRv8UQuvG9opmUdEXfrLYnmhJcssMEO36G3wu0d\r\n86zUrUs49d/Theg1C0LmULmr6I+PGVRnIh7RhJD1oeHEigxIpqOyFv9w1mw3\r\nUboCiqHCZQ44Y8Q8DezmbbylQeIp8nPWzNtMMP8xB2DDRUp23aXFmBdVdljZ\r\n5WYW46G8H2yyhkiDnCmE/sHuFsY54P1sCGSJGUsJlQz04kqdWM9/BgCrkdIV\r\nHGY9kWlPUFZK+C7gDbNgEH/7P3qTRMJLXNx7i3nbsooF9lgGpcXSjLZIuglm\r\nA19jEV2aNJxXUiACUb20hGSKwVcR5cTZDtrHkgtb3bI6uuAC7diIJPCKX/a3\r\nN/zu8zQxa1QmAMVY8gZsH9K0lNwY1BjJmr4x3F1sQf0X0ntPPXeBJfE2dSs5\r\nCHi8lfsQTIE60oHJRIpbiUuPtDWO8I5yrQkcslsBHG/3HCNa7tvRzgLs81uT\r\nCo9/J0BllcljrgVHolRiJb5uMM5WylOfKo8=\r\n=pqV4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022214195434","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022214195434"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022214195434"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022214195434_1647287704716_0.964248628157018","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214195653":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022214195653","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"483a1a65dfc47bc5d09f4aa47224ae8e1f677ef5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022214195653.tgz","fileCount":70,"integrity":"sha512-4gVnWvrsuxDYDRJ6+Vi0kClbwAde3+hvBhICAsePr8nLhDRyHBgGjYvp30RtjfFE/Twf86mZpDw+fQLQIYtdXA==","signatures":[{"sig":"MEQCIFGgK33hhCbPQLo2TEhnjRjYXTWnlAa5VPwUMTy2hD9eAiAiGy/305jnupX48/qUyXhPSWwkxGE7yAgoHpyf45XLwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL54dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeVg/9ED3dQk9DZIsXDZMOys+QYPrPuHYIOyVKEfcTfxWiFMlR0tUn\r\nDZT9tmRJ096sC8Wn/8Fsmw+3A7YLSHRyVyPm5btjk1jIr6TGMZ2KiFh+As2b\r\nGyG4GWb48lAHnVkI7KPzN24usV1jZM5Oowmyi0Wzl8mso07d9UXJ1B1xyDJr\r\nwHs65BjN2ff/7xubTTt3DkBcIThmT2GSW0BiIgqyXpluMvW3AdH1Xb/udMhA\r\nxfLac9TEgpnQmt7in+RJugttYxnJN91MywoDJKnlVygVTWtn3TSYVo8Cp2gl\r\nQqo4yAghnjaOElcjMJbmEMYxXfClXymKEH2XKJPFmFXZpFWB87IvqaDvcWn3\r\nncKHO1rJhB682wEV4DBdWl0Hv7lPzIbz3ar9Qrl0rHLnYSIAiSp3W26OaXXK\r\nYodAu99kr2elBd//YB8J+yF52sDapOrpD+F/zycp5PGs2W3gVI99suEr1Qk7\r\nOjNYONV10yOiNp0Zdt+sXPaHv9aTkxwjn4eHFRr/JxVhYW/i+5g52tVfXR05\r\n5pKz6SoNI+b/PpI/BdZm7j45QxhbZhx2DIDzQInZuNC9WrW2FblsoX/4fpZ0\r\nYmlYXUooXl3aqTSx4NtFRAeeY5JxFN0X6uIIcNeUd7pFSfvaY4adV7+YWWXt\r\nPw7m5sv9wgnMmxAWVkJpyT3LYR4z/Vi8NaE=\r\n=3sCC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022214195653","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022214195653"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022214195653"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022214195653_1647287837814_0.15831210296488307","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221419595":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202221419595","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c1f03ae4f6a9e8896da3087cf0e388b9a5795c4d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202221419595.tgz","fileCount":70,"integrity":"sha512-/UgczZygJQuQ/b5H2R4Doiv3+0/fLJBtJsn8p37k/WbHqCq0UsXedfbwFbw9pk+81A+wUfv4WBH5Em3ByIizWA==","signatures":[{"sig":"MEYCIQCgQklIqFKMVOsZtEeh5YRTzdz6KBow4BaqWFTIu+gV0gIhAOUmYiMRPDFx9aE7EDsX/v1JhSOraII9nR/ZQ9Z4yuwm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL56qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+jA/9G9f60mhoYFVNm0fYczzKfa76HW4eLe4TS5u/dqW9OVQoweza\r\nzw1jC8dRDmjX1mvDUaIcDnWqqse7PUUh0YAeT71duenDDVG1bvEs1Rno/42V\r\n9p+tgsrhi16JsjqrQU4TkoxaPXhPTVfTLj/JFbfE/Ku76vKvqVDeSX/H6cAu\r\ng9poyafZuTAtAFEYW+GLF2w6iliBA3rVxg8E80k1jtPCSuCjCZ8Ko22cST/d\r\nGQMFdw6fhBJMNIqebGo2lGIRG4CTktkeeoRNYwRK2alunXxO7l00PjBWHNd1\r\nno/vk+3wUlpORMK6vgBEFTeILZlM7a3hpQnat1dpZOA92xcW1Ag7w4eA+PJy\r\nepxlqeTzHFNdqZU497GxZFOkE1lqdC2ui8yCz6xibJedCnb0l+xtUZTfniAZ\r\nL/o+ZZx06wlAyj+tQWltFwcdRzzv3DtfuSiQdyRszCL1CNtPxjABlkn2ZzGH\r\nb6uYCgkS9XKEiRyfM0CalhpYZSLcmF7+JPGW1lJs0X9ezdg8mmcPDRGyws40\r\n/UIW96fJQB60VGXOG9G8R90lCI87YPNPMVVhVtpwm9FYqOROwrJHGN+FgdNr\r\nTpdtcROBHDjIWLQTyuVsY4DTtpGpEeGuA1Cw2m6a1Zg/BH77sF9GtAGjPxiI\r\n2bDVowM69iq0ZOoJm0+G4qmt/qAiu7GVEiQ=\r\n=t0UC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202221419595","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202221419595"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202221419595"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202221419595_1647287978842_0.22084251909680175","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215181125":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022215181125","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"96ac87167de5583e78caa29c6d1f9d29c31d9726","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022215181125.tgz","fileCount":70,"integrity":"sha512-8p/ReqBjZz4Rg3+vnycs7UWfXU3uXNTVnyiv0Mmhr7lJwZzJvdtHiqnrDFExZpjTJOIWWU8ILgvSFRGwjHchaA==","signatures":[{"sig":"MEUCIQCi86LYXaGtV3leXpDKHpOs1W/LRJYG5KUL2CEscsJdSwIgX8KTeoosciIcKgI+cI/lBHyHfWSVu8DPF/PD8B42GP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNbrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVeg/+LJCe/BwM2B9v6Ms/CpFmBeawSpII8I86Xl8jSqiGwT6AEoXR\r\ng5+ykOQvHG3c3cMnUi4aKxR7iRAqr6CxKxv8iSkrDYzTUyLJqIlQjYguVQqG\r\nof2qD4WeeaH4PUV/zMdiHU5nuHClnino8cOhCgcTmx0cvniEs92B8z2jbDP+\r\ngu1PBcJm56btbvCJCGA66vFXkNlCF+KkDZvPR5wWS+3mdU6uKtlZ5o/A7U++\r\n+rMzYCWEMD00X+wg1v5+NsX5RF8WPNPOn7+sZ3yl8POxuR9BVHM/OJ2BMBn4\r\nl6lorWnl9FPMA4ddfB440xcQK4izy02DvK34fv8/u3bP/3nXhC2rR8M8dfR3\r\nDD4QS+UNEeGxxoaSi7y+fxPYH7zwLIcocxYtM68z0vUAwx5e9JfoHtg4F7lj\r\n5FkGJGT0N3c6jwvHFhavYxXaeu25P/xghRgpxN9k8qIgIid+0n7mWaE9m3Nn\r\nZP4VohPbHUvOAJ4d64wuxvzkazGnQ+6X21/PBriwftv84haSDB7SHJv4TbbC\r\n3T2eKFepMnKks2DukeDESt1rznJoNEnyN2s7VzTLydLOtvppZDXK3Q1us+O6\r\nbu7tetC2VRPXIzFXsY802aQF90s2f3TU8A2Oyi78emRHE/mYLp6UHyNE1Xuu\r\ng7puoIXH1xaTcANiz0HDckLi9UJIrvfZb0U=\r\n=14cm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022215181125","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022215181125"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022215181125"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022215181125_1647367915143_0.2938818949068518","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215182043":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022215182043","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f17dfd6b3f107e28c5c0685a387987ff9d47cd8e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022215182043.tgz","fileCount":70,"integrity":"sha512-kPuQmG73/g+8TeGxA5OU6NEjVm6TxHoiVHE9ll8DL+Ho5AcKiUCpnzV0aDOtZFhEH1wwgmVbWqBL+qaGpmpqyw==","signatures":[{"sig":"MEUCIQDdDfDc4CyzL0eXdtx32X+QWc7dkvtcbS/qJYjKuEniMQIgem/9kAre5ldvbMKpyxNq+zH/h3o5Bd8ZflXgXImBEA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNkiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmojrw/9EO61NPyaOD1XTFOwMLxV1LhNUMA6xJEIC+oKPGmQhbpWhHHo\r\nnpno3ER/gtT7paGoB+2LqnDeMXEIyHW4XpxDpEJEFD5ViHwMexd5RcGTjgTc\r\nxDRRziw+70fqcg+vf5mAdnO5RV7adMTEVDtoUDTHubp/+7I7DucYSGcSvwMA\r\n7/xJLo8470gGLhFsSscgIzYsytkyjl3jX16UZDCyHA96/UYtDTO++Yv6Qy3P\r\nV/GBqHSUmXzqhfrkiMTfzdp1FtwmQmMah9H4RHeg1RO93Jrdfg5pXMd5AyHQ\r\n1FbAvVx6QyO7Ys1t1/KVGht+gqYcvlOqNgHa49fW0SV6+7uBxkLkoAGPbIW8\r\n3GxhSqn2DyHqWktCRob6CGpE4kiv8B4S52OxAfWYUL5DWpdfUx/7sMpEUVml\r\nZrXQuLp4MphogZ0YVM8ojywcvVY4WDU0x7Ro1K7ZxJeo0TJdGJRk7O9QAjvQ\r\ncMtsOMs41HvuAK8uqdWMYxD2R1ltC9qYe436PYOieNCOU3SgYV7H7cMh2J7b\r\n7cKhjx4lmGeA/Z/MhR1deLjUZR+kGja11k/3BhIzBTznax8serCLeh//BtEs\r\n1E/Hi6mKW7werOxf580iX5dNKhrUbPLI4ERD6c2ZGpAL8HHy6N+bJKTvd9d9\r\nAxGL9eOilmfjXba7VEA7NGCJmwM0uIC5Otw=\r\n=vkh9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022215182043","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022215182043"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022215182043"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022215182043_1647368482386_0.43867329053218684","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215183938":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022215183938","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"227e64b489d527668ec2f2067756cb5e2e8b19fb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022215183938.tgz","fileCount":70,"integrity":"sha512-i27fSvDbfbHzqG2IUkN9SsllU5IAEbTpKJ+XEbBInnvl+N2C9abV6EkwP4d6y6SMRokgbSsCK40sDIorwSOSSQ==","signatures":[{"sig":"MEUCIDgE7Xj/TCFScEpdNzxucZjGGteTFto1LrscFRt94gGhAiEA0V03wk9PIAWEwKDMKmjfqinWMsetfKYtbwJhE7QQhOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMN2WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOOxAAn4xiOMphpihIL8EJtL3w78bbKm8CUbTOY65JeRY27Th+9RSf\r\nyQt0nSVVU0dN8LaUTzsC1fLpaK4qPsDhtgn6GoflURTddvC7wr1OlbUrup2a\r\nvOAPCgKaC6RvwAxNEKTZ6IpEoDTyZeRyAqBiSqHlzwfZ1dsy2/1BSIzOqqri\r\n+PojFaTpyVppURf/PSPkVwuy7CN8yHtPnKQCmqiDQtJdNqgVG0DKf/56NSWg\r\nvuX4XyddgysTuPSZvcZYor8YtgutsmQkS2gg1lqJpk1IYgR0l1Vcb5RfaJly\r\n9PLbGEPgisy9rxhiTw/Io8tHTNmYzIs+gjRSsyTIAF8mSZj5OL4/lchewMgu\r\ntoGBBI1PdFx1RveOHYtfTZN1DSBeLUY1ybzhpvyUMZm+q/9amhS45VI4jqGP\r\nCV32DttqXDZ7PzrH3krs5uQIGDKJmw6TVgftlUAhO2mJ1MvaJ/G2dm6i44n8\r\n6/EIUwG8qIXVZEVoxpyp4s6vSsYkODi6nHzXwSQFQ6g1mKBBrIv/tLRY6QUs\r\nf7lzANZzsoe6BeCbwpmy3WSZPD6zWEX4nMEcTUON4Ve4WXWzGwvE/7MRcfJB\r\nomt+BzaugB5mUrXfWVFr2sSygJKW4fdi/6H7LmQ5ffxNIcHzSsWmeRuPQjR2\r\nAcRtiS9ckBccSZ7Q23LSk5u6HmXL9i1GcJo=\r\n=KGLY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022215183938","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022215183938"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022215183938"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022215183938_1647369621854_0.31719207847263364","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215184036":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022215184036","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b4c79c65944cc47905b1b841dcecaa22de0ff780","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022215184036.tgz","fileCount":70,"integrity":"sha512-o/w35y3052AQgJJjh8jXD173Vpj1QIvw+eTSL5DYAHBAEsJBS+PJYuincrvY7PGN77Ib6Zrb/Bfwl0Rjx+5viA==","signatures":[{"sig":"MEUCID6SCOwxNcruRG7FuoFjg31Nd5rllzK8lC2eIs5txyD2AiEAkHW6PSo/4EHXg3azjCLY8Bg53OrR2cN1nOTHuUc9WRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMN3FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/xA//b18D6Fmy9ATj83EIIprS1NR8gZwNhi/3M35L1MljQON+gtR6\r\ndKi57jSEvRfprpatWKzwDpyHVVddkJY0F+/azz7iUVVWGX16H9qEjCQxsxUb\r\nMXcVFqq7AISt5t6R0LcqLu8Od83WJwXN77PeeirUKGbDnQNDjBJpmpmufqAu\r\n/GPd6qHKgar5Us+gC13fXEgucrQ7MTfcYF1FqC2Eh9Kh+/YtWGFaQHqh6wVP\r\nEZ7OF48LnUCoDq4MvMP7tRGEmwMGeqp5gLHfrRxs+kgZ3Lpmvrs1jdyuHwg6\r\neKl3zN9te/gXVPtA9Te/7MHplDamRPZpHoXYkRtQdmvwRD5AIYcHQcYB+fIj\r\n+TlsXOwCy/byu/Zk1MMfre4J+sWGpJdcatwVoWS8r4LFmfZKr5b/h6Ah+ief\r\n1D4El7AMdO8JERlNYo5LwLHu9m5d//QNvylASweAT3DtaVw/L43tH/yTCGXS\r\n3QusFxyfgYVeLwm94dDdDWRePJ5rMpfVvc1+bjTZeLdenjgUVx4sP6qCqk+p\r\n3L7GSIcB/EIBeHGK1nnhayvoRTo66DkCEzSrRThncshjDr9rVU0AnXPVs2Ca\r\nhoQj+Jw/fxPHHOf1F3hYKyO6ZCBwc/Oo+MrA91LGQ+cGHfyoxgDKWUc7jsWY\r\nm5r6/dHrrVK+/4AgS2iReA1iCeIhC4j4nYI=\r\n=CbaU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022215184036","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022215184036"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022215184036"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022215184036_1647369668831_0.31562419104643813","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022225182931":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022225182931","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"85a1a04a8aaba006d2b5dc998d0fac2f7e3eb6b8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022225182931.tgz","fileCount":70,"integrity":"sha512-pUnqCuBo5iDRaejtp+J2llUpdRvrt/eOsrSVA/MSjtwClNay4L4xM4N/GJ+XUhzroNw8bg1pvJXnYQ9RlxGM/Q==","signatures":[{"sig":"MEYCIQDTs0GlYl1fIQ2RwPDdI4QOqyiUsxq2o2AKVOk2kNaWeAIhAP7Zp44hzLpQgBdfvEzUnJmo4fNNiUfWoYEyD9/IsxCL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPgonACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr69A/+McfhJjEQ0GHEOSKWClx0o7JeL2gsopoUB8aOm0V/Myvar9QT\r\nTd4VislV2aJYBTqlvJK+SOtUXzo6ynEpJMv3v/asawRj6o5WTLN3a2epMs4b\r\nZEMPA/rRzZRrk17L2JIlYj3Zkb8oH0jBvkxp8WJm+um+B2N+rchFFwBb1DIk\r\nRY8SUezZ8vxFYcrwExN0B5wBJQMcwMY32QbbKbO94Of+LWXTSQMBlny9bPzR\r\nUOlww/+h1+Go9u+A5maWTizMB48mWtfWnADX3oLL2QKgcyfhToI01MQrxEO6\r\nOrpUAa1/OVf4xANlmzk3zkVy1FuAMYRAalmO2Uno1n9qj5pwe7187kWoJcTQ\r\n+9LvES93UnGCU/6F4LWiqg3y+eqXSitIJM4zl/BtojUhOHqWxz6Zii3eRuBN\r\nTcdNG0ukKoohEQQK4nxMiXS+XrqIOcBvIcnDrc8l5TQOC1UHVQM5flehnU49\r\n33ZL2vKKDi5wqr5Dk+KYS6q6MiMobJ8XiznF40cPX+qvk67V0vxeax4/72dB\r\nJA22I/KYaCRD0vB5kre7gRQOa1QrwrRUcnJe9cNQqK090DpkTAkLfRndElgs\r\nLZdFjjFHnel72+ZWv3g2u6a17EvWTXtMs+ncI7A4qrGGwlLsWrnjD2tA/Y2T\r\niXLnFj0dN1ZHHQQYqW6YnLdkfXeSqDWAitg=\r\n=sWD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022225182931","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022225182931"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022225182931"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022225182931_1648232999112_0.11239301098638665","host":"s3://npm-registry-packages"}},"1.7.8":{"name":"@chakra-ui/layout","version":"1.7.8","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.7.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":"0fcd70059ecab3eaf0ef25621d1fb376eb5d9973","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.7.8.tgz","fileCount":70,"integrity":"sha512-zXMS/TEjqYDCgG3zwS/PcSTNBs1OMyuY92WP5HBxJLGipGxVLTvmIt0cPDiodTqLNfFsalBUMH6lR79pxk6ZtA==","signatures":[{"sig":"MEQCIF1AcA9oBc333gWsy1B2fkiPk+VG1V8vmoUTjEwprFJdAiBAJw3nKfbn/cZMepJGAb81hRrQd/eSLh7alZWrtKmzWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQEv5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQmw/+MF2oqBvLz92Fo4TMj4XLlOtVqBkWtKR/zUdLItALXHbCNgQM\r\nMCMlY0jzIZpUfBVGhAxxQf+OGXM+yttsAxqY2+8EieFhynTL7ntwSsYABx83\r\n2UEDaLoHedXXpomvsED17wvux+WWtN87/Sjx6eXAahqvA7TVQOWlWzWCh6PR\r\n60iIW9xVErrBHdgrsPD4qN/uBzvi25Udf5xgkdqVZ1767HS8uKDfvLG9rGsp\r\nzFZGYt8btNoKQ15q25g951ENMtC1ei+Jx1+hj3lbuB82l4NfjB4eptFSwbCX\r\nLDe/xwrCm3y1AG1Exa+yu2rN1OELsuTahdzY9n6UhSJbH38KbLT4ZrwFZh1c\r\nRbpJD2N9aFh8lYakmVRhQDzga1aeZgFzs3mJ7QABMqZuGSrVvNJcDR9Lgtrz\r\nm0JYGolt39RbOKL2zEYYFLXKWAXusXwxhcYur7NBc4SfUnnAZS+EUVmrnSbx\r\noEvc7kJrAk6yygnUgRybVq2QHJ8yLC3LbPotTS5OeiT5WvNLjkMcJ3C/6X8E\r\nfgBHZ3Z1xRjg/OANaAGb3fSBmBlOShVo/tgcQMKurwU9YyFfv68I8HatTdEK\r\nve4SQ86oZ0fbAZ4/r00hRRGrTE0JylbcIyVdC2cG91o/AC8stBgfiXQzFv7C\r\nk0uKILPE+r8mEXa548T5cTHwkl+UJ9oNx54=\r\n=iKSz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.12.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.7.8_1648380921578_0.5868304229935295","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022228155140":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022228155140","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0327eac9f3bccab327f45177e34c2558b79d62e4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022228155140.tgz","fileCount":70,"integrity":"sha512-NFsOX2X5cD+7AogFJDMXNwoOW87+AswbQ09NZCGMlgCzkZMGqvMNFewb0Bt0VTae8uz107pDi9QUm6Q+lvWiwg==","signatures":[{"sig":"MEYCIQD62tZ71WOQRpzYF0jLcbOF/e2CLnWXRiTlqxFuffqjUQIhAO7oyE+ggL4jpXNuuUJWxk4IkRA0ExpSB3iJv+hhYBPq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQdmvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrROg//buwFfNEq3u33Vb+6z3oLtcosusCNpgF2icZpyjf/4yx6/X2L\r\npigHqMAAumSeh7aNjqJCVJv6IXp9U6oM5ugbDQb9fvSjPjqKR7v5GU+/+sRC\r\n/Syp2C5rQzCUB6jbGJm+lcXGBRuP2KOiMKg/a6dzB3BsebBurDLjMxcKDBMZ\r\nzT3K5dc2wLcOHrnk2ac1Qby8BUD8yiGrNsaqQPVv0BR3/uG7zmxRPBYTv7hf\r\nGO+DlH97KukPWyJefaa9jJeIJLvCgIEWlAdRJhpppx/M8BV3XKB8LaU5d3dC\r\nagCOX59KEG2pL2wsg1XwgAkoWuwmYXV+gZcM3XLIoD23yPmWMKjj03zCXieR\r\nnhGDGERrxoSBy59xZZ+SqbpaEjRRvOE3r/CjNGVA1npjeav1uSCd5PVblYcP\r\nOj4I7bsKXORD+rDA6AcqkFAQWQuhpU6dq06zs2PvwZD7YFml4RtPjDAsuyBc\r\nY0nJ7neMBTKFZ9yJcR2JsCj2tF2aqZg4u95xkZ7pxfDxX+KGy2VazjODJ/38\r\nzPCIfGbenUOlp5yhUj/+A6MAywd5BEpBYAr4XAPN3ut5kNE/grMxT7yraHTl\r\nvxdOH1WvOs21W8SfM51v+L5NbLt2YNwhdDan6so3aipjav9B4+AkKL16E3BV\r\nbgu0lClGVGfaPVnR2rcnjKlGprTxF1bg2DQ=\r\n=DJRx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022228155140","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022228155140"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022228155140"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022228155140_1648482735660_0.2714542972096776","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223215463":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20223215463","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5285b4678f0ed0d111683e10a85610c45b7d8294","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20223215463.tgz","fileCount":70,"integrity":"sha512-qXRbyBH91kNRXQn5uNOKPArDFM+hnB27DkOndrFh9ZrD8YdZvBMeYPQrBTRpJzbbRakiG74ePXybM9di72byyw==","signatures":[{"sig":"MEQCIC1nFNiURd8vYxSgMgpQggvHeiIhDX82i0QqzMVEQi0MAiBvq5z71GiRU1SAfKo8F7zXml4IdwsWjNsVQzL3dieGwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSG/XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGIg/+Nkjh2hWjLEW3P0XrrR2YcezCX1EDUPmOwlt4Zhhycu2GspZQ\r\ne4MUx8gzS+oe2kLd3IoQeuOgETGcZ2Y9xe73MrCeBy5FpU4SIX120EtknmhQ\r\niWYEpQSo/L6xzIKLk6UO77xfb3pO0QPo+ic2AL9vkkCFniR1dDS/Uwqs/WsI\r\nf3mNXgPSbqnYXaiK8sJxT9ChZC+W17/6G054tgnmjkxJ944i5DHEuRrdPTRZ\r\n56OQYSsg2EfoETw5S6cijbFaon7PnLJvchoxTaWWzDUb7gMv/WrUkKnEG+v4\r\n6YDP4BSOKOFAN0kLUhGDXu1ND7YJjN+O1CuAOE2bPtMUIITOXQ76m8Kwz8qd\r\n7pG7jNimMIXpLQbclIE+7gwh09giUMOXjxi2NAVXRJEy25iG8LISg/PB7g4l\r\nPK3k16Wv2cc0e1JvsskiraMM4auwtwqUNvYxO/HSkKKn547XxSEVNaW73ZgM\r\n3jEne//dQmye7/T7NTAnpnRA+OBigRXNBep98hf0bOIyksvsJxMMxD5tnzq2\r\nrSjRccX+ZCm6hZOZxPfsjeJrKTPODONBEQdv07I2VB5y1lXcxHDj0TAPSiFx\r\negAMiu+QQN+Ok/g2jCyjTk74Uh49VrwZ+YpfYEzK239VLku948ny4o9lVOBk\r\naGwX0naoUv4bbnNP9ubOVVIP27H2hqPxERM=\r\n=Trgp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.3.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20223215463","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20223215463"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20223215463"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20223215463_1648914391267_0.34492709730198756","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349032":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022349032","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f752f9fec8565e8050555253c587ec00e9e0af7e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022349032.tgz","fileCount":70,"integrity":"sha512-yxM4w33p/gRchLb+OzR4hNobaX8do3I+xBnKj8MjxGhKx5tB8mP9c8hqRqn9l6bbHGOl8xSNSDuu9NtbuUHF+w==","signatures":[{"sig":"MEYCIQC0WtZM/Y1F+1fkqerDTek1a4gFvcgqkzOaY94i1h4nPAIhAMtSQdLxG0IGnAGCjzONtAfh3KxhgZrGDbjssjmQlqFT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrPUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrP3w/+O0CXK6zw8twUpAZ8gXAzmerOFl9q+YctasIAp+lZzyZVxwR8\r\naX0XyPowgDddGaC6kiNlHzSX8XaJCgm00uLQh0FW/+cTbcxXTFXBe1PNkN40\r\nz0jw6fLeFsgAFn3YPvH31gWKXS+QqnT88IIHDOdrUg6PYk+tpM3DvPHWBVhc\r\nyJ6fQnOz0ZqtHAx7AjEAZ58uafc3K3KxaQ15gUwbXAa6skXAjnwinVo0v1pC\r\ncf4ksrqJlQiIMXA5FzUezjmz8MMLgZQRYGdbW/CcntS7uacLlNB9ivt9OXO3\r\nWFgDK5/wqzrLc4sYFSfJesmyVqxoHQasLwalx6/cdxFSZoo1oUJqcu2MzMb5\r\ndG3yLE0QpoJKQIy0LBoV3+VEpialPGSprdMDAEOuydu1nTFkBCjgEBPKsdO+\r\nPge7SYH4Zx1lg9lg4BwPAdP04OeJRVWj0Kv38quTR3PGfs+xjNBJI07BzGWK\r\nz8cWXcSOC+qLsV54l8jFZky2u5pL3oXy9BufA4WyGleKeG2gJCsRL009hjdi\r\nkxbGsZDIABLbKQfAL3q6rtLBpJG+RzPRMFsN8Xfoco61eMsXTJpP7CgxkITl\r\n24AMBNFhj7TZIAp0mngdzFzVF6tFf81zb6qOeN6QxeMMee6ga1ReYmO3vp6L\r\n3wlkIxULRRtzlWn4rxFdo073wM1m1tnc4Bw=\r\n=NiWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022349032","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022349032"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022349032"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022349032_1649062868249_0.3044663075497056","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349233":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022349233","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"323ce1815d044cecacf0447aadd7dfb7b9429461","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022349233.tgz","fileCount":70,"integrity":"sha512-fEvlP5AoyT2JAzkQsL+ZOwQgUvlPqOserNKuvbfqcJFJQbxcCHoKtArLOcmw8ZQjvPqzRqGIy6Dtc3zVMT3l5g==","signatures":[{"sig":"MEUCIHz8GMldP+l4LOgVRXNbHYvS9TZcQMXj6T6FB9pI6Ww4AiEAvsowM5eZcFzpCv0Y9worZzXFM6xvspIpDWH+Fn1NIOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":172335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrRMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcUQ//S+QTcBDhndnGF2W5c+sdM4sMw43mh986iTHVi4Fb0fZcaYdJ\r\nX+nGL//ryBR8xsruzGKL3uHRaMKOaVPTMNv63HHDKSFC9kmpurB100x+5psF\r\nKtYAyzcmT4avQwiCPyodooShGy+jKSNEXwZjmq+OV525zPRt5108TO7sRzUe\r\nDlRVqLF0BD6lrz4iTRdgmt9Ozu/QufqEDQtN0Yb8CdWzk5Q/sakI++I5NMcx\r\nNQtYHId15+3mYHqCAtqNg1chIfqsIGnn2o9nr5tibwBogWHCNZ75hAerLMiy\r\nUTDeHKoWVR8XiJvSsUgTLMBeKsGYCpmTYgXiQW4m09YddQUlx3PmhkKThSUA\r\nWi0Jpr/Yomm2Mex3yHYCuFS9cqu1NSrSMWt40avuEyknGjy06DM3CCzcrudV\r\nZXTsASMAGCCbSlnQ+EEKeY7Uh5kJThA814+HRMSAN3KbGQLYfb8puwbNG9rk\r\nAhS69bc9C95AqNtuxxN9mEVqelZG9AuW+C+0H+j5Sa9GR7sYpDdIKdtM+VT1\r\nXOWxL0kRowkofXtKkFD5M++R1bodRaQ8XqbyeDtosgCqr7j2e+vTbfi3a+xB\r\nfwNOmvZ+MRn6jUQKnY48zFMV+K8BoVfA9SryuXHsi6ptctC6mLyzrFvvscHh\r\nCLE457eZXyzTyR+eXhd0i906lc1pnYR3pyE=\r\n=2x35\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022349233","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022349233"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022349233"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022349233_1649062988530_0.5377743493274914","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349957":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022349957","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9e1af25100f1a2eb0ec33e5d0c85800855c40f3d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022349957.tgz","fileCount":70,"integrity":"sha512-Zy/GjrYRv12sxW5tXmF7tHrs3FOg8vobNJ3HA+X0GvQiE1Up2QTML96bgwV5FngZkGYsRW3BolYZfymg0dDkkg==","signatures":[{"sig":"MEYCIQDNsRSnJUTYARLCsiIsREbTiJru99iO1KYN+TKVdMqgugIhANOf1FWtzM+GTriwOS3ms5ZtZIAkg2nf3RIrGn1yweib","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4fA//Q0MW9RjLA4398vu8NLYRUzbS9J2Nw+20VtjsKt+2gzPoK0/M\r\n7bH/VeQlbObiPCIS7FZ6O6vZzT2UP9KilRtb0BkQR5t7T2WpobkLlwmoVrfV\r\n6iP1aML5X31uDJZRms5N7V87dzcG7DDEb4LsEzK0r0S+T1ltvLZuOFr1JrtT\r\nl08GpmtbHJh/82TWEMWW7r9YXaAwrF1l3rFdzfX1Tl70ri3srPo9SEEajEgH\r\nx30+rHhlDIlG4Fx/znMLasUAdIINIhdnYl78zjUB5S3DjiTihSK/GJPfmLD2\r\ngQ9oP1QSdV0tJ+mU2u2kHE8Iowmk+iVAch3VCIfblsM/5XsJmIce+nlpaa2h\r\nyT1G7KGWqV/700rPqGtM5S4iG9Xbna3etaAAkKBBZetKCIe6mFyfNW759t1e\r\nAP7pM/2pU2VtkzFGoH7ns2icIwYVJiYPD1caBBD5V/Zqz8SUQd58IsNHTw/I\r\ngBcUZwx/0L2YLqr0QKLUdO2d6cPRF+GyH5lCOHlnFBEtnn4pjr0CIGkntoS0\r\nWdd5svMMroLTXe1D/Le7dFtLBbZZqiCcNdLXC12HfaP3ZE6k0WOtpd5edgsN\r\nwX8QbQ5QKVFiCfMOSsgY4VCxE1NAVEph+KVOHFcocoW/HuuLuSt5FsQzPPGn\r\nIpPI9yNFK4UzS2NPCYbOVToxINbMHEyknj8=\r\n=22c+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022349957","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-2022349957"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-2022349957"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022349957_1649063423937_0.015135545799930261","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223491859":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20223491859","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c0ad0e8ebeb0ebad943c2532ebeac928bcdb2954","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20223491859.tgz","fileCount":70,"integrity":"sha512-XFf19dvujN7odQeWiVvPnLFKy7hgnW+wVBcqtCR7W7IYEN6+6h6IZ0u8+ZaK61CgFqNTPu0H40zMFGRb20gKXg==","signatures":[{"sig":"MEQCICjav5CYzS+y3phCDDNZz7Q7SYEjXOvx7h2j23fyP+a6AiAEylwTqKycM2b0FNy6et7bmcE2oP0LXFlgpabk5+3KpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrglACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHzw/+PZRubjBqI6QUbjmK2KzLL2dJqI8AeyQmbWgNdn7L/4ZECiA+\r\nlegb2AkDO3ASsW3lHcXiEIClcqAffBbkyJZMFaNHG5ccpqUPyiLxmA/6ts3O\r\n9LvmuU0mixsyPOzJ4qXKM/MkIOFCCJ81A6J7ngQhQc1gVK1C3Ogb7B9Bnqiw\r\n1wdY0AIRF2xcjCy7nHGqQ9AUwVluaf4xT/a/VUklsuR5axfi3EO0RC878LEk\r\nvpb15YRco6t28eMt1kQ2VR9+CyoKEXRVyPme2aDLBW8jLzoAbWjItVqYXJim\r\nsqiprIVn2wIfYSoEZy9P88k5gOJSsPXy2pBxhBmd6GjPBDYpZZU8cXF9Zyhn\r\nAP6w15iM7ex9nReDe1UOwBc1W91KT5UUWeuVOGDGtdURJZC4wZ+eOUi0WgYe\r\nur9qTT1bUOhbi+G1IOotAA/bpB9sTQCb6T65/mCWmF6Mq16B3wguAS9wPQRK\r\n0pcEVymqjfpAy6avqLWl/iJ+C35wFwUh0/RfFsOUt3MVIVkkYEDTLMP5QKih\r\nCyfXMWa17MUCnvEsK0f0pg9aZkczGihDvBmrgmbw1NsumlwNf6Lc5AmQVFRR\r\nhCJa4IELKCsWu3oiV3HnUFrUg8vyrsoe2WEHJ8Z1dBsyZib4JUyQ529kwNeW\r\ngX9HwPQLpMI9IFiwrT1uh10bfmTpJabFv6k=\r\n=KJVj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can comes in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It center's\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20223491859","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20223491859"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20223491859"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20223491859_1649063973519_0.457125056807266","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223655213":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20223655213","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7f540773445d3a518d14aa294e9752f9c116c81a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20223655213.tgz","fileCount":70,"integrity":"sha512-TELeuHgTV+uj8ELdXesp1HvqJf8oyZmrUHtvdI+8eFaOYRW9TbLRQUj3RXJKLJf6rJeSDrah7bSuigCMvAsidg==","signatures":[{"sig":"MEYCIQC5rxlPIkdXwNaSkhSlBDIWrmVk8J86yz4dYdEHEqINfgIhAKce6DhSaKaqIFdo7NnwHqiRaVK3V3d2hrqz5DLrbzWE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTSqrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrcuw//QFlPXOFg4pp5/xmUy3Eru82g2BvoOTzhRoAGLxYFWolW2qYE\r\nkstUIWTFXVh5pp81MI709l30Lx2FWT84EnTnw1DiE7dlzWYsbJUaBV9feZPA\r\nbRbdWHNjiK6LUPS6/M4hmkezw+xrpQmB7vUk55GCEiOsvPv3fHx7pqb3C9vS\r\ni6jivBp76SwxJvtH+WVEz6NT4wzvxP2Ud1pifjshvhzD7El94vyHj+ONUC4l\r\nwqarK6nGl7GAvUhh9iEXdIGt61aau3LIP9LDu/4bLf6R6yzfq2Gy8af5nUtv\r\nej9kSOsVbMLBWQbxgUMfxzbjulcRawM9gAdaFaUp1T3pWaQB8W0B8gtVffNK\r\n2OqmFIFamI0aJVSmnpUbXih+QXjNT2Le4lkmFKslQT3LNaSOdTrVWsacq4hI\r\nY6IYlgNWHBz34fRGWbNIEyNFIEgsUk16FTuILnLA1WAOGNnIo17bxXSN9eQq\r\nWz6EFC2WUZABGKgcZHLhQdK19X+5lr+NrQz2RSON9bGozs9MEX7UAAfq6HCE\r\nBITTOLuxGZyL3J7XcB/aGo/H0mGzqkqgUMpXnekE9zFkfLHtqR0sAoUI7AFe\r\njZ4h+SEVxX2bJ2jROIQld6k6UzFmylFtekFHUPichIWmA/ZSkIOPHnVQv+TY\r\n3YMr3QyNO6g/KVdMg9WgEYot+6qEmNTaZOE=\r\n=7Fw6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20223655213","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20223655213"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20223655213"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20223655213_1649224362879_0.5285146020526843","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236131344":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202236131344","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2474481cd2e6ee1c460b731ffa7115f24e908577","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202236131344.tgz","fileCount":70,"integrity":"sha512-pArjT9PknCKdX+wO7PjfX9c83+NEP5V+HOaOa/n0hj5DN1vxLWSnZOJSH+NrPJw1a06wxezrMnSQSOeG3uDm4g==","signatures":[{"sig":"MEUCIHQ2nYdK3SQ+MN3t7jJQ+mvF96E/yxFKYFRpaVtQIvLGAiEArexCl5CVpHp9VEPNsiI7MVucc4Cmu/X4Mn+i7d4I/Ho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZIqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBKw/8Ds3MurMUXHzgCcBhe5MbYJ9BNSO3ADx09m8OCRH7WtY10HSU\r\ndlO84EXQWj5LpXW3hNGi9SlZa/qrOsyleGxsqxUn4tw1R3BL6Cs88SRM1FDS\r\nuvKJRwifuqLKyuaou4SXkJTEiHllgGdxX+IqzCReLILPfcb6g5ajYhmiq73t\r\n+8AMaRStoSV9+IxPJFwxCikTzERP7sWYcfNUfmIvvZ67QoRk+EyfoHj2tDMj\r\n/5zetI+b2lB5pqDte0KRJopLNvuv7odoG+lubuKbaxjbyCuo3rUl0TOqJ28+\r\nYzMp/SQ9rEJDDaaSIS1guvY4C9z5+0nlisrvjD7NCGb4l6yu4BaUy11jRkdb\r\nADQLlU7Dvgi1Yx0MwZdFYXzxqlBXV9uAInOVlCWj8IveUSHRAkUjEvfctF4j\r\n6WZ0GO+vwFSq4VMSluhMvnISz+w3ShqYOKq4drO6KMp294J0oGJoTuH9re5Z\r\nbupZ4dmzAZ8KrbCYJF+/QtVWLLDdmD+V1FEdCj9P4GAP2GQRe209kq81bHCz\r\nT1gPIj537Lv7VMIOz4KHPkIKzeUp+oawzYMAv1zI2M2L34CEBcWMc7Fom9MO\r\nmiTtXrtSlOlzSUR/ci2IuLbp8+lBtFoK0beq5la6N5A0160gbuN2Vy/A5l4N\r\nsyRI5AgLUH2grGNlXnuj0UENtrD31CuvDiY=\r\n=cZGO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202236131344","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202236131344"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202236131344"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202236131344_1649250858470_0.5262128272603783","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236132312":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202236132312","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"aa3516e18a06a5bae7958d6eaf77459bc54226d8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202236132312.tgz","fileCount":70,"integrity":"sha512-DR54ebVZg9j6DuLMJ7DTmhWmlpsftd+d34dKTjMrk5bYggJjKtHlxVGpA3ok5boRycC9J8GBVLmneu28v+TVIw==","signatures":[{"sig":"MEUCICd6B6QJJFVPcHpQCIXd0Zy5KaqUgR1+qkJwAERJlX7yAiEA7c6Guz7vvIQfTaP4JpckfpDILIAqhGq+1OP2+EZ1kwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZRcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRixAAkKoUjGGOaoRpZYxvsT9QXQdiH/WfQf35npVw+/4sjWDw1O7J\r\nAFtpB2JsYCC3ZzxKmqmJYskp53P+rj9o4ztk5GO8vIXWczk26m+gKfmqIV92\r\nbalk+ab+lZAW8nJNx7IYdJVV2izrWEDmBT8Shpsv+ZOaqPZEvMSeD2V+rtyf\r\nQ76MQp3VC0LaqQJ3ZJsskhqKPouJFxDGBDjQ2/nn2iYt1cp6gaLfuv3GRMrj\r\nqFzZx+8xxXdZ+AjTfQOVMPdpfJl6D7wm2blJ0d9N8d4+T5vLguWe+GEjSWHU\r\nKAMmWdECcOPpP+lb673wvnY0QK50uCL8rYOYw2Bf8P2N+oDwX66oZQ6Dtv9w\r\nu953dU0v6a9yXYdxsyWeaBKXzPSBpF0jcZGoV76XL39p2CFD4o0EhKOfcWvC\r\ntItPiJQvYqasB/ElpK9IGE74/h1KpvaiCTmbYCMJT01TE+iocgTJ36ko23iD\r\nxKWl/a0xUw8ip4MgOM1UnJOGE9EPSr2oebxCPhbGhotAwIJQBLCq3BSudU7p\r\nO6yrrFeYwOMvRwvL+fBsa8qPmXvHuQ0GPvmyxSEhlXonGfCU+pkXq5gZ5xKV\r\nhvnhUETIXc9LJ8xJpZAvcSn070TLjUvB/X/c1JDmuIqWOopFlNedRcBvG9AS\r\nuNO8vF7hkM+X4NZtYh27Fm60L9n24/JtohE=\r\n=p6/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202236132312","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202236132312"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202236132312"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202236132312_1649251420361_0.9956547841403671","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223614103":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20223614103","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"66e66c6e54b6c2455b8b47ff39cbe19df77b526e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20223614103.tgz","fileCount":70,"integrity":"sha512-RFKm43lxN4oKYEECUJHSfE+hSyolO7pi5biOnelKS/L5qeNwWBjhlVMOJElus5jcKztroOu+/jiFIM8tBXWJAQ==","signatures":[{"sig":"MEUCIQClGKf1D7oPQ322RjuNUhai/kEkKZpJ+CKqJGOiqJz15wIgSTOtEChpeMKuIZPMrLHad3zrlzRBSZ6LcYTe0f7NwKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZ9ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphfA/+OlH2V9DAt+mgGlLEKiyEScCD5+FVHH5PmToKAeuXnYBXJcxk\r\nGRIwS40mABF71nsXXonYDh6QqJ3uDWxkCVLZaaKT3f6cGhnA1NSXtgeUbUKl\r\nr42f7ZCeRLztIZU5JLZcdlB/iy0fgCC4AHRjEp/R/HPH1J3+l2hiG55T0TuK\r\nm8dIXudTu3nCNZhTgu7PYQqjnxuF5gDx3PTwzR7VdHmge6swyXw1VtutFXBc\r\nhV2YJk+oJB7KsYiaQ+c8K+6fSwyUT9A9zb1txlc6T1Gr+F2reDZtb6CVeqGR\r\nHXcatgaXUhBLBwmg3CRi3QiacsTr//8ZdSt/Nrmf6mCT25FODQqdQl6kVR1n\r\nSe9OUQRkCr/lh70tZLK+5OpG7x0j8rO+OLpu4UQhby1as9Xy2pd6KH/I6ex9\r\nhlHCVabbaIRIYNsuI6ziMBnWlL4VzqAvUrtjiT55HXAf85LxrKimKPapSYgl\r\nV3/ypKvtvKRXQtox14AcQuiMRWxRWzhPpF17zOerSMao6cDPUesHPJZKYQwy\r\npPfEkqucKBxDjZYh5ZlByh2ONXMLDrg2DhvLzPlxppx6RQEFMwLmALh+2dQF\r\nYP8yXq5dihAifbQTrzvkSKdsjOlSnLNkof2HEu+GIfwG1V19Yi618vTrMTvZ\r\nX8z/0kcXyFIAo0O2RZ2VsCSgraXEfnMc/l0=\r\n=zWLT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20223614103","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-20223614103"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-20223614103"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20223614103_1649254233659_0.39144105175919","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236141416":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202236141416","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4eb22748903635f42940e4bd84cc1f6ca1ff0d8d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202236141416.tgz","fileCount":70,"integrity":"sha512-5BoZTpvPHx7PLHzZc57aihHRKXbXkTUWErK2JGhaM3F9IB7UGgz52TLy7g5uLOqYb7w8XZ5aCd/iXGEbFw1T2A==","signatures":[{"sig":"MEYCIQCZ9BbG5bibzzZ+SaMmmjT1C0Cx7pEx8CjXAolxqMN0CQIhAJv5esYMikV6en/ily0pHo1iTNbk9MjlGgBHzaJV9ZKy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTaBVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDPQ/+KPadinhjGtcLTKBIwEPS9XRBg+GBPccrRcq20bi8cPDfGL0m\r\nJVklqdjIrJ08SnINGbs3Z1a2JvyY9waBM3STZHVf52njdn4GbIzDPJWOGVAh\r\nkFBRrTtouC0hZE0Rf3PklitZywTiZX6kRU7rRIvJwsfo99PJNzrF+YLFjq2C\r\n1GvlskoyuEuhXVATSpF8Twqt2FRzLB2LeT69yh+xzYiAOoOM/3246Ym8DXOX\r\naHTn6SzsXtTNBOZ83H6pBla8QkkvssOktCMZejcBMwvPBqcqTCCJDZXBwCY3\r\n4UUaYpgcR6yls2nNkz90PhI2lpSBb2GG8sHoz7TvB1AX2qSvXImnGOg17b0m\r\nWdJst8H2TDvYo5lTm8sEqr3H/R4nkjuxacUmNVv9sntgXXipj626arVrMKZw\r\nmsGAFyg90owJWFoKmx+6z0OvmhqrYqHt7uc6FN6uGcBQsQW6QVk2G+Fx7xNQ\r\nz+I+2nXHhsoYT3rXesOqPg1jWwLzuzy7eihZzjStj/jvTmmQtGNtaF3r0nsJ\r\nZ196llSb0HgDdiWF36vF58lPBESNWYkx2tc2kKHox5hRg3k7jPl/ZWn1m+5e\r\ndSs2FPmoh71JZoEOZG/ypnTy4lQ8EcQHhjhvCE8w3hGC4uVa6iYiIoXXs8l7\r\n7JHjgYNNcV7w/IAkXgVyVJJMZqjqH2nds2Y=\r\n=5PRh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202236141416","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@chakra-ui/system":"0.0.0-dev-202236141416"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=0.0.0-dev-202236141416"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202236141416_1649254484800_0.8476035696910464","host":"s3://npm-registry-packages"}},"1.8.0":{"name":"@chakra-ui/layout","version":"1.8.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@1.8.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":"f95e78168644b45ac7327e4e0cfb1f0e6f7c3b4d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.8.0.tgz","fileCount":70,"integrity":"sha512-GJtEKez5AZu0XQTxI6a6jwA/hMDD36pP0HBxBOGuHP1hWCebDzMjraiMfWiP9w7hKERFE4j19kocHxIXyocfJA==","signatures":[{"sig":"MEUCIBiC8LhcQ/eUiYzHk16Ni/ue4vtDt2HRlJGQyurUZkCvAiEApkLmAkHyIdshNsGLfNNGmH2gh8w4WA0lVGKS81Yej6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTwSIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6PA/9Gl6snsBy8d/rR7+qz2dJ1/dmcMBkeAFcgygqn4sfCZ+5CEFw\r\nRWUc4ViuUqOfFQhIkNN3Q3NaTDlSUmubylqKWqsUwznzjBnHWvP2GKwU1K96\r\nkUtF9gj/l6LOOBZRnb9N247nx8zblwb1u5J7FD81XG+fAbPdKtuzbsjKhILN\r\n67+RlBomQkbHNzQjDFGZzWrTddlZ0U9ylmq+FXW7gykJGdjYir9Dhkg6UPZJ\r\nBgBxiyWPyqmpNE2j+XQsXqVUB6QbgLhqtHmdwBXjkenxXstYjmCFPTag9Giu\r\nq+UY0Ik7d63JHLxXolUMSv55cWcREQduRhWH6bVer4tPkMCOhxlXDsIk7npg\r\nRmdHrAwtjVFfr4QaUYLXGhx4CxwdWiQHrT0FMW1U2e/rRjxTy82/s1H+E+b4\r\n10NUOhRWZf6NhjCUHzDEDUzkvh87buJDYLpJMQd3F5tEMqxUc3kv9X+bzmql\r\nMVMKkO7q8cEDI8wmrVTu0AflP6rjoB6Q/HI1+1Zcspi9vxfqbWu6AfAUGQXq\r\nbces9kaKvZlX/mp4CePUK+HUxzCJHBwOuGNvd4r9alqfCWn0hoZQVjkMEVfd\r\nxA89h2osQ764w3zrb7yqSZGpDc7gzVvWZ+kVfKT6LGa+GRBegYPazxP3r165\r\n4ayG49qcm5WXgzex/YPtzxeTcsoPTCOiKH4=\r\n=GI6i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"2.0.5","@chakra-ui/utils":"1.10.4","@chakra-ui/react-utils":"1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@chakra-ui/system":"1.12.1"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_1.8.0_1649345671948_0.620696126218264","host":"s3://npm-registry-packages"}},"2.0.0-next.0":{"name":"@chakra-ui/layout","version":"2.0.0-next.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"68ed5237106bbf3fb37104a7df425b89fbf24d1e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.0-next.0.tgz","fileCount":70,"integrity":"sha512-by/0YD0BPAh3mjE71WQhgbrkJsSg3yg+ArgHyO6B5w5taB0MT+RKMC5/ENwf9QjWAtIvcvbIZcW51toUG1HzVw==","signatures":[{"sig":"MEQCIH+MLbW678pbF+qinuGRe1wU5UoOWCnBp0CFhTMzISD/AiAxoQuMPxwadI1+e5mj33tBbQ9qXwdcPNI6KmGGOXYPAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWY2sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo76g//cmDEtlFOd+KWN7NQ4e7jPR2sLax+guwS69fH2/wrVbNfkvY1\r\nFptkV0gZhCj09UUMO11z9o6K56uhcNbkbzkXYhCFfHPB90SrViU6ZL9LIjkd\r\nhkIKCxXSey8hlI+j1WscZXEv0D1voCRM/unAo3nQsYRQnwA7Fqsez7tt3ScO\r\n30VgML7XMCPdPG5Miwo7qVAmEN3CFGdnW6FyJsL2s+12DI4ho2u1kzT7yi2+\r\nbpv7vL+qS7NAPcv6Xbu9DZnpi2ftuhaCUBJmeCTEYRc19r6CSGO7uoanOBfw\r\ngsjBipAjo+USvkv3M3isRs/XqzkVsBrK+HMt4pTPHpnyuE1UUwcJ6twJSOkS\r\nhj6BaxK5T7ulELfOHMTxtdozxnERMZtG5YgTFqrb7FIZ/pGuDaTxlBF8SbOI\r\nFuvW4meHUs26tPGPmEYrBlDiIRue9pBwygcBFZkOZoISV2jtDMecT3Buvwh8\r\nrrD5l56rE2+7aELhlEs6GtrgsvCgz7/XFouzOeFs3aiSQqGE624cGcw3Y/vM\r\nN2F2nXTL36MSqTU8ZhtzAPfU367yytHUxRVxDeBfB/T9uzwuSPFKGLx0324v\r\nCKVEjCOIL/il3eiCNH0Nvf5+XbN7NV/e5iRmQewvz9dSuEp5jrQHwt+d16Ep\r\nhHF80IasI5rOfOFCVoSa4KFN6LhrsIyqir0=\r\n=H/D4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"3.0.0-next.0","@chakra-ui/utils":"2.0.0-next.0","@chakra-ui/react-utils":"2.0.0-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.0"},"peerDependencies":{"react":">=16.8.6","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-next.0_1650036140201_0.6929912360869852","host":"s3://npm-registry-packages"}},"2.0.0-next.1":{"name":"@chakra-ui/layout","version":"2.0.0-next.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"502953b203be42c5ed115dc52e4d712b9c6d7af0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.0-next.1.tgz","fileCount":70,"integrity":"sha512-LkUzIkQ7ugGjK4plVK76Ajm9lXCykbmBsw9numQSD22Dibc8pbGBxLjoK9Oqsiy0fL+WCuN0xKCCYErnUOXcLQ==","signatures":[{"sig":"MEQCIESAsLG4pY2uGjAJ4Kh9dGRpzqhoAXp3mgNiTdstgjXKAiB7yW7OV8pa/RU9SmBXeCc++Ya2OXNaakFkrmXF3BTPCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYkWpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOzg//XrS0398RHyMHlfYt3Dy1hsfUW1qGkIaJfHKIUaGGgJuBVDdc\r\nKrq0OBgBC1+zwFktXLOIdqFJWsHlZa3V95Awrl9mreXmDBwxo0bZOPyJTbUH\r\n5+P0UVuU10uIvxbyPw30kBXOFUtCyH7K2fjKV+LcCSFC+uWPiciAuUWVmbgu\r\nD2eJ66+X2qfT6kdSF/ezcJpOu+EVLAOm+sSQGQfyD+5qtQlBT2y85L2SSCjO\r\nY9Dj8GlAoqaANR3U5dqzWBXtOsAxGfZ0k3Ttl/Rx9j7V+IynunoS13dIPpzg\r\nCBWh1gOoH58veKCWozaFB3Tgy6+8dS6Dlw+mTBSPieAnelRTk8wy8wNHqvHI\r\nAV1tbljqflHRgSzKb4eb/OYh0ySMPqRI7echpuYhpi53oBPUWQE8aXf/bNyW\r\nqthxXoLh6WuOraOD/wXwp7nyUHwxe/A+j2Zc4mbEZGue0IdAEsTSGk7YbUCy\r\nkQKu5HWHBhucaGtmmLclcnfllGcfI8hCyABeoPIGAYn0lE0qHZlqOF91h70n\r\nQeezLQJRsimMM4njY3Hcq0asEwHRj1yRvDZ0DSNlKBjMfHTVT+Xy790Y9ns3\r\nkEpItmQTK1pkVEwuEQwi6nanq8jODS3G9t6vlMX12F5EQ/RSNEP3EW480GBN\r\nphWfL9itZM42upg6HPXh2mlMOqT0avFTHvI=\r\n=TdY3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"3.0.0-next.1","@chakra-ui/utils":"2.0.0-next.1","@chakra-ui/react-utils":"2.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.1"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-next.1_1650607529360_0.5787935192724432","host":"s3://npm-registry-packages"}},"2.0.0-next.2":{"name":"@chakra-ui/layout","version":"2.0.0-next.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"40876d7a348ecdd88af04eb3ed5a39afe28c85ef","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.0-next.2.tgz","fileCount":49,"integrity":"sha512-FQTH9fm1qmkBhgtDJEA9R1siabP08lcI7MAMDsxTdm6C4JMnVQrULe4TnduqixXHL50NkEYbrsXPpWM5IWSlSg==","signatures":[{"sig":"MEQCIDN6RBU74h/ND3tiSS96VJgY2T6ICKQiIY/onezQtEvrAiAw+qYoqmmEh91+0qO5IpRxAHou9U+/zppI6xbWrCIfsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4jqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9yQ//TH575faKhHqOwMCJ9uXBzYy/6FwlUU2SgLUev+pgYUCULwd/\r\nWeUix/wUXFsQMq1D6jqZTCP+dyC4uYkNvKON/yoT5eqtHQgY0nravzoPBV/D\r\n83GllcvcV14n9QmF6kRquUSXgt++ZxjxeEc+XBiq+X35t/D6/D7vE21FwevL\r\nWxlAjAjuJb02dVmK3yxIwu+VxfeK7BSoeWMsHAWbbRNk0m46wLib7+TcD+5c\r\nxZtk3UQb+93kkBsOp+/E7BKULjGX44N32V3It+u8Eo0fC1uaNzaYIqJ7AkDf\r\nIZAfPi5RJJaXW6QdIFdUbI78ySbg2macw2lqPjktgdwXoSapw8ATD1Xw28Gk\r\n+eur2eqxwuU91YQr9W6liMIPnrHb0Ef+7Ui2STEELQjfcgoarR3pamvv2dYJ\r\n5BbXg7oJz18+53MB3eIc/lHAOG6R2qHANZPPOF/t6v/GQNqviKeGvrIIAvRi\r\n/z9LxB4EhLyLPBjICZDUmfIMae9wtrN7chhGtbK8KhO/bddZ8c+DzXVyjZ9x\r\n38z4RuBpu6rEwNkmO4J8M+rkp9NbKQgUoSXNP0wVRevrS1PcNYcSm2yq3YcB\r\nyh1d1Muip0VOh/TsbAKOubXvngEdIiK1ukbkIIqXDlsXR4ar8xWHVnpTbx9E\r\n6d2T8EMSJniBgaqPmyS9vaDd1Z7peFr6hSs=\r\n=sbbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/icon":"3.0.0-next.1","@chakra-ui/utils":"2.0.0-next.1","@chakra-ui/react-utils":"2.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.2"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-next.2_1651738858681_0.30423857471463434","host":"s3://npm-registry-packages"}},"2.0.0-next.3":{"name":"@chakra-ui/layout","version":"2.0.0-next.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"38e8907b1a1d8440de1feaa8fc0ea46848975c96","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.0-next.3.tgz","fileCount":49,"integrity":"sha512-uIvbZy5VKtFiUGt47yGZt9MmyQod/o3OVplrRgbmyeuHD2kVBv1/4ngUp/TWXClp4/fhuCZvnxxgfdXyGWjEAg==","signatures":[{"sig":"MEUCIQCDoolsb3D8uY2luUQJVzHwRePpGMm5UmS2x9r7K/xPKwIgFkhXaYt/BBeys1Qh8tUOrzR0JpaQyvy8mR5Z+CuKZAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidBWYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+8w/+MSMwGGaLvMVqNCebY8B/r9UvEqXJRDXK+s1fJQAbF8Jpc7QJ\r\nbd7yRGMIXTM5Vv5GeIx5cVFSNNYSq/O2B2gAPPLJHsVDMDLYugO8s28b71LH\r\naM4ufXoluUy9ch0dtjYXD1xq9A/xtXIvpqN5nZRSFZjVo7yhlu1M6EsYKBPm\r\ntIz7OMCmyXuTUjOljxbf1c9fFO7tWyNI/zQr8/BMCI9xcGgO3oaqj+wCS47/\r\nfgejxsEMQsME9p06yc7DtL0EkKe3DIGTXsp57pGc96hIBsy5lMwpPaPAJ9/t\r\neKPSdwQLNypyW3IA1dKPVcvrKIWD5Evh7p3yxJk1eongpkMHPEggqRd8J9QU\r\nh5LuKdNcH0M5aiiYdQ1N1i/2QVmR+VbLmJxyYv05FB/We03IceGoBNkqb+6d\r\n1UeA39y6Z+9CuKe9uCgTB7jLnDToZ59wqkSCHOMT5Rd3rQXq1zwqWTAtudPe\r\n2N4E/bCE2Upx3nRZPxhdcnedQuU2hTtlmpezepHfbKt/9ZRkAJqUP7Ifp0AZ\r\nCNrkqhxRzdDolELSwlCAq2ucm4F5VZqUoDsaHoMf6LcWioNjZ4DecytWSHgn\r\n8T+5DSqywfdYYn6K7SaQeJZPm8atRiIPD0nk/mbGdPIrZQ9DurZQKaSkLu4Q\r\n4eauL7wc8aU273KGEE3GLhjI2U+QYTTFwQs=\r\n=Bg/5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"3.0.0-next.1","@chakra-ui/utils":"2.0.0-next.1","@chakra-ui/react-utils":"2.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.3"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-next.3_1651774872077_0.21748881828611633","host":"s3://npm-registry-packages"}},"2.0.0-next.4":{"name":"@chakra-ui/layout","version":"2.0.0-next.4","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4f8701f4f04437348c6e9aac93a16f170af36f2d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.0-next.4.tgz","fileCount":49,"integrity":"sha512-MgNM6SzAmpY+fFocu8nvrn4KixLhrsm89UuPrH7wUM3Pgn6JO5yIVZ1SxGgdhJ6Wu5gEkD/BQO6kCgyNTOMfaQ==","signatures":[{"sig":"MEUCIQDn/+IEbJSvP1dmw2tRe5PsvBoZOEml2f0V5XMfjtBygwIgGbPSs3uWTpRa+e3I0XUEhf8YDp5LTeYscMxpkqCOmYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieNOkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvfQ/9Gm3u331NzZWabSUcSwtDpoIe/p0cGxVvR0UK7gjX+h57p9vQ\r\nKE45O7eThDIBW+YtXMfVSxGJFP8cXOuT0WcTldBNu5+BFptnI8MqbJ/TVkaj\r\n7hPYUznchhWv2Rezu6ZvedpIadAwyC3tYfsSyOjt+xfaTdvaA6iJOC6DrNre\r\nvW+bAohbIj+f4Xoqb67fIC8U9sun6w26lzC+0OrCpeQ3jdmZ8QP5YmSQOYbZ\r\nP9m3Ws5OnqlGGFVgMudb2L4GKk7SS0tptdrvCpqVNyWlXS4yXnOI7dAWK78T\r\nGr0JU/cqKboJZc45qE9Hr7g1hFj6nELJy87c2I6PIK5T/CUMT8z9kCjQlPL+\r\nrTa6ZfkDJFR/00+jfl0/ylJiD6GFJw9VKyLRXsgtl0SHPcVNxXTQf5WmPPs5\r\n69MfYB4mMt6oXFHnvdw/ivffHpK7b5dI7gpzuQHMGn9lNjGHIULD561p0k/H\r\np/WACO36e5A/HjjFhRntZ81y/scXUxXdPo9OlxizxCrjZEhsYFp7L4c+64j1\r\nZ7Cgq8J0aqzadELoVe4ajgL38wTCO+LNDjZaRjyZ3HmYxH/GbzBZWKWUeDxZ\r\nRNqegeBNH2LdBppfSvpdWPBatMJ+uNnUuXxWDCcrN1U5hqAEF7yGy9oodd21\r\nkuhH/8cfGSrC3CI9x6nrbaJATQ65rjg5Jeg=\r\n=52tC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"3.0.0-next.2","@chakra-ui/utils":"2.0.0-next.2","@chakra-ui/react-utils":"2.0.0-next.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0-next.4"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0-next.4_1652085667972_0.34737040070313596","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@chakra-ui/layout","version":"2.0.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"505bf6072033bf7582854842ac452ee246deef62","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.0.tgz","fileCount":49,"integrity":"sha512-thOjog78PHiDchwnGsqIMWmpLm9Sh4Vyrhig0fba0eR4oEAyWan7NBdIFFT2e59UFfn9D4/04fjK8BbA+mFEjw==","signatures":[{"sig":"MEUCIQDbTZB3WsHQnKEaV3iHedGxPHeGzTZbMjawsMJFxUt/IQIgDHmFVVol1F1V6FY3u390eLFMsNcl9Ak7qakJ5alYO8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifUlOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJsw/8C3WuzUGGOjy+MFZvyVdcPpTUlC/IxnDwnxRJgXR9CebHa+OH\r\nPCLEsX9gGC69J78f7LZyeUxlBZHA4Rskm4VrIZFzHQs+TE12EtXOvenj2BJG\r\nokaWShc+Pb/5lNkV6JQ4oENQrqjt8d7q79sT3XlvfnfDPBXFr4K8K2AtDgJm\r\nI62kBRLWlbnN4JmjY5XbPCoO9XVY/QyUQbdATB1DdHOqRL3dj73UTwXuAJEX\r\nZv+r0KN01N/Mo1PxkSlAF7h2cW5de4k//8PAW2CN7V/dW4ylpopEJKqJWYLo\r\ntydwo1yi6/FTT6oO7g86w2Dcnv49XwZ/k72FAIZBtQ8g753/UQ6ZfZItArUA\r\nMcbIvPpQsrKcp+fcuQDN5yvdATBPiuot6rvuvYP/j9132Npr1zf1h0cWUIKJ\r\nGkFMMGt19g8q+rCUkonANBnDSelalqXj6qLkXJY7V12SlY+2iY6isc+lyCMZ\r\nwa3Fy09zRA9+0zLhMvnlAcvFBmyAZJ2Pzgmb9rJvcykdL5nLkT9N+Q5vWzNV\r\nDGVHL6kCiFlKFYNQ/6Us7V/wmDC4b4GGJnIaEuuVfAKgHYFUnYiqIXSfUrha\r\nsPp6o5gMiqK1Mg5BBWJi3Od36R/9fB4vfs9wYT8j5LnxrMGL0oIMZ6JU/6Oo\r\nWfpz/oYhBCqztneF/NxIPxDtqBEXPxAplY8=\r\n=ngYL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"3.0.0","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.0.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.0_1652377934407_0.00756480659403902","host":"s3://npm-registry-packages"}},"0.0.0-next-dev-202241614737":{"name":"@chakra-ui/layout","version":"0.0.0-next-dev-202241614737","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"92afa99258475938aa84dd9fb1fc09d2dca40e8a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-next-dev-202241614737.tgz","fileCount":49,"integrity":"sha512-oTkoFKqfFQ1ifmRIifhmGUQ3FVBdF795vJFaUX+ScbVNBZsl7/wJr+CaTP34esZiG2VWhcpiAIdKz90LoaBtcw==","signatures":[{"sig":"MEQCIFKMxaIxxYZfAEK8+FTtcF+bef0eIohfJsMb12XJbOoyAiBiTGe2PuyCZNI+dmtKou/27/3ES5J3BHHOhvRCM3ldiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiglrEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDzRAAgNmWnqi1qyaDzwxZB8mFdplKjc3EabwReUzo9v7tbVNFjHac\r\nCyR2wpUWp+C5Akv7X1d3+Xjdyplb23BMk1TIvK6YnV1lPZspKShtej45WCeM\r\nop5Ix1MbvXKrxAiCWYmjipr/P62dI/JM5unF3U9xIrl2cjFL3wenjUiNR1kX\r\n/HPxivtvSPeSzJGNyAyT5z4Gbaz4CMST30qUeygo0SZ66Bq38Yd5tnC4myaG\r\nW6wGXBcFBHqcg6jSsgqSaPFvPovo4PHRoIIhcbQ6LR/tBy7t7UCur/REixQR\r\noRDh4W9k5vhmSXLGl3blk6C4XQklR+PT48RYS4HP3HJwHBPUIrmSrxEEUaOD\r\nqgESCEQnfA9rrHctAF9UZCzJEpQa1QaAcrBpmYfeOVSkZgjU//58Ux1+WbMN\r\n857lrFLM47D2jV55z7fqCbqCr6+9jhYMVWKBFwi3hKhHGP9/ut0jivBcBNpS\r\ndQCFdKIigSAHef2W6y11YP/SHggxOyuByiGqi9XGWdl6nNZSanCDL8dJY2UJ\r\nj7dCaZuOQRSQEXwhoYr5JYiK24GAySCRHM9SK0iM/3Zka76brCIypfOZ6dya\r\nc7AuMOacr3UXicUsIe6mKOixYrvPCI+CGLvjcIAtPoDV0mMB23ySPo64eU7b\r\nM9jnVckcRKy6UISzwvxWKxmLbLv1KxA1Ac8=\r\n=4IXV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-next-dev-202241614737","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-next-dev-202241614737"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-next-dev-202241614737"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-next-dev-202241614737_1652710084318_0.9180528443440112","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241614743":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202241614743","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1e30457025fee6ff3b20f92bd3d4e2b41ac057e2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202241614743.tgz","fileCount":49,"integrity":"sha512-xnznSF5YcdLpSZ44x/ksvUENhea11sVcOVBRGLC48ai/sQphoc104YV5Npr7cjVinH1L9bsbSO8d6lsy0W5GJg==","signatures":[{"sig":"MEQCIEMvSK+87keeKGuBFsaBrFeBDY5+ov0EA6IvU0YGLoleAiAi+d1Dt632ZuMZlcK0dDHrLBIQ2LDgkIUzp3ZJOcSlmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiglrLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+2g/9EEVe6rKr528l5Os5ZbQA9eVHLeZ9JwM+QeFGW8YlQOQG7hLh\r\nys4mH9ruiX3iMz9TW0veXfTslX0pk9jFISoBYcmr37dcTAjJkeFjvvNehplN\r\n6Xt1UpSkJWgkGBcT1rlYeyMuJcq7TAOpcEkfnO+JXXujMxFYqtVrEruLA0u7\r\ntby+uKphg9plKekkBIqyprw23ZiClatTc3lBU1YCcic9GYv4gpN7c/V2jg6G\r\nDx35AoF0nrHIXr6sFtmBUlBt91aAGwonEy9se7sOyvT+V9iRTRz6j7O20yoA\r\nrOIz93eFoqknalOQ8hXdNaLdChFWxk0x1YxOPIPHvefiez+lNyEbRaVgRpKl\r\nY22sepdhNRHhtLJ7SoU0CWIl3gWWF8ZC9OSSJ9NnqSJ/ZzhPoDI+6kmhNE1j\r\nOXWgiJvumtAqdBb0TYdMeMpstqsba27EOWJzNuaKagjKDozTwgdSWFXO59m0\r\nm282FefEIDqszhYcrsmqW6kXhF3TTH3V3A8GRGiNcm36pUF9052S3j6QF6ou\r\n/UtBl7XiOTEUQleN7rBV6K/drozOxtgC6LU9Ogzul5cHWfp2IXczF/odJapx\r\nft7JPPgbbU6sxKBMWUJ9/XkBRgMuWxKDj1NnfJzwAg85IDQFJnvhEUIzrKBa\r\n92z2+UsUK33vbRbpY7OHCTKJ1pCpIgwDuNc=\r\n=OBZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241614743","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241614743"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241614743"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202241614743_1652710091468_0.5813547219161614","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022416204849":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022416204849","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"85e7ecc6404fe29c20dcd5979625530d301dc84d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022416204849.tgz","fileCount":49,"integrity":"sha512-qYPvPHlEc4WzAKd2g+iqS1JvTIXYX/KYBKGiIaFyDFCLs7kPMe3CPHRItsHfFFu53sLel+uVosxrm+n0dILjDA==","signatures":[{"sig":"MEUCIQCNOJNCAODXhpEFej5WUrsPhxaMog8bHY3i/xlGgGI8TQIgWwMpYiDkZNDaoTVc+1Ko2wFldpmBhTvkc72nzBXnRZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigrjLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaVA//V3fEoUr/vVPxPa78lKJDGhCZxlRlSkMN7zTtejmCUOyRFqFw\r\ngZuRiEdeXcGjzHF8IVn0irA18+aBLSVgXa4V6iErFVxv2eCpkyTSrzpnQGIh\r\nKnSGMgDp0qZGf1uuYWoGlXWCs9Yi4PCxOa0E3EEtoi4c+07rFYsmiAVXXwgM\r\nb9PN8UXsnicf9jrR+RT5DmkoPmbx2PEmDuLxYqCH5ASWOw80kJgV5X0yzl5t\r\nTSG51wsQ0jLbGLPw1vHo+RJ/cUK4sPBKo+KAgWa0VGXsWbO4B5XXPV//jykE\r\nDcJxmoTeK5nfkiVCFoQc+jNIPwHIPRRM5AOZ4qJ1L6/Tn6lBRqvtU8pfyhm5\r\n4OesWsmTImE2OWiUT/EWvgYtWr7aqKna4HEJ/oXvwewVefXWn7/1z/t695Rr\r\n+CLf9F3TlfVbjaeWfD9kpMIv5HFdMbIEOL85Vgg9cSyfugbg4wcElMbMJw74\r\n6AfvfVBg8ZEvbdbcnKU3zEuYFwpFQFpKDWdhr1arwHV3qnvdG2FOq7EZ6o36\r\n8m91a+WnaS+pyFRwaiHdk5xZHUqbqwGtP6F3sB7OAHoNLb1nHAlEQbM8Mb53\r\nwFOK4cqalbFoJFBBado4rnPJwEGE7/a3s9WyKNYuA122FWxr8DGQwypCNUyU\r\nM5Q7T/eMeRy+fsyOEglag6/Lmseqm6/IEpY=\r\n=vdut\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022416204849","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022416204849"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022416204849"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022416204849_1652734155495_0.06397728974718353","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241784047":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202241784047","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d98602710063a8a7c69de1249c959bf848d9d1f6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202241784047.tgz","fileCount":49,"integrity":"sha512-nFWGIpiKzWgzRIJEpzNwpPIfIYTCh3noJFqeniHx7rjvBgpHG8nTo7m4SE0jWEpxDb6ak7LvFysu4NJ/hnL/vA==","signatures":[{"sig":"MEUCIBkdGZRhhQkJrTS5oQQqfBQo7vrjJjw4WP842jdY8XoJAiEAjp+Ab51nmDn/HbYwtq05ZcBfafaJyBBtbTYm9U+MmKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1+tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ9w/9HwGtcNnQhibESFSDZD5B2NKwwOJY9RtGBOvAYMChvBs0GD74\r\nyuoBIPuiIf1P9gtN8BEZOjbzlzyRjOcD1chQd8/Y1JTWhk6QZatU684DWGkS\r\nrRlz/3CKjfukd9dDYdYe7TFp+7tB2oe4r5paDO0k+pAib5i5SZMSKiJHCd5x\r\ntL+mnsfMjFIBaLrXRORN8pnl+mG231xb/5J2hvYiiEZmcQOMMN0TxxxhoCso\r\nElN+tkmxNqc5yOek8oONHPwUdDd60G92/eov4FRFfWiuS4OogBmOGeGxzjZ/\r\no2QJ96hAV86Odx2Roq26pDRxuHh9ZcjMrTR5AoY+yYKhjYDNT4Db4Cs6fZfW\r\nNxbSQSw/s6NK1SrGr3xcPSdDXT1meflRaRPDwcP1zRSTlCAEjh4uWbRhmxbK\r\n63dl7lu0JwW58X8aD4DZTUANasl7XF2deBFLOlILOcZSrSia7rzPZFj//x4g\r\nhLWt8rryDGWZzcG/SHUjftlHWpHouCO/bsdih4Q0m4ZsQah2Gcy8Pv+vZ1m1\r\nzp+gh5wjMn8v0LmY5Iusi8SMMeQY6pp+l1Ho8eZid2bm8obk2Kw+D/AycFze\r\nhVL1M6Z1PSJ/R6VEOGS57Ss+ufLfvCy3MNEQPtJgIVQgIRfztT3L8o1Y6Uw6\r\nwYxGcUfQMEUYf7/x9imoBk71pJGfKFgsRkQ=\r\n=C9Lk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241784047","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241784047"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241784047"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202241784047_1652776877260_0.37335125717471307","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241794553":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202241794553","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"31101d2eb0f1b35e00863eb80844a46829a15c2b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202241794553.tgz","fileCount":49,"integrity":"sha512-wWoJUTletAFz6+sXr1om+1GqFxCI7jFLsksmNOtiEvKqDh4pn17v2JioYBJ4mB1/j1YkXuLEyoNK0r1kmj/Zow==","signatures":[{"sig":"MEUCIQDVz7CwouSxxhh/3Yv0ZiLjjsxuNndJ0cxnAXBMFn1rcwIgES84CYSL0ylC9Oto/ugDEkXRQ/F9kjq5jnAqq8lL5RI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig27pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrerg/+Ln7F7Z+YVFA1hVkET93fV1PMOzakMPSaH3lOLo/7YZMIJvUk\r\nmtq9j6OakNFalVAcv+v0OuK4mxkptArRiqaqbQ2tQABwT/CNbEKYGk1SOMer\r\nLILRg0pvHobXkRhkS9Wsi777PGf0wRUTo4+RsHXDgY8GCM/IadTa2LaWlunM\r\nY8GLb3QjR1GLAlC6ahl6BbE35TmcOD1GeIJSauq+oWjoHi7ekRtwsvsoP4pk\r\nJj7RBZ+dk0Bv7q9/19oZ4A6NnGDsITieZ5LMNLNe76Etg3NBQMvuyo4lCX14\r\n90FBOubquvdtHcOibAgPIEEZDtDmR339p6R3koIk3T3W+S6zH0pnTuIlBKff\r\njTkQ2CjmzRBLEEefQ0R0WNDCMowVE/GGd56zBzP+tB/hrGkwao1Rjgzh+lxb\r\nxPehtKWfXcF1nAmEIopcPw0Z4tgpu/52C+CXOjKmEkwbjNWL2i8HbVhFStoH\r\n9u5LK07URBSUxFSu331EmyNZiIMeW9LetielcjHTwfBfJNCO8DvYHFPgMxeg\r\nO43Zu6hye/+YaR8a8SuPaa5yHecfN+UHac7596BxysKdsidil7c2hwZSUUc/\r\nxAcXXbZTSJUGmtacwRqeVaLbMDsZcob6JMS9JyBqxdxGozrS8dnJC/18W184\r\n2k/68wIa5wOjM6IUVD7w2XuopWrJ1MZFlgA=\r\n=o1Vh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241794553","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241794553"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241794553"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202241794553_1652780777429_0.9093672091551637","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241710143":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202241710143","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d4e38ac8365ef78e4218c60fc9da45a0336428cc","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202241710143.tgz","fileCount":49,"integrity":"sha512-b59zSY1rFYMbY4Q/4GKEi4rJfWRzgnfLp/QR2nlyPHZCKFw2ptxVROwO0Xe+jgOPXkZIO7R+3dTM3im6464qtA==","signatures":[{"sig":"MEYCIQCFAizTJLlpC1Yj4Ynfgcex9d/b7DbUod2FEx64tbc0IgIhAKxhC6a5ER4WV0vwowy/snNqzvN9A0QuoaezDDlDv4op","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig3KhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX7Q//cPrcDJlQ74zRidHlj3EAaO6+JQtcX4sy53gOxtLNvn8/1RKV\r\nWc9GF0rhsgSh4EyQcP9qR9XuiI5HbnBdsRRvM6bXlO75/qvSNnj6+zsx/eHC\r\nN1rSFE8f85+naRQwcK0ddzAAy/kK/BbazFCRXrGcWODh9ZYA2/0I5dwNHAiV\r\nLhv/8GlqzomOlQS8QpV1YulhqX4h8nh+vFFRVEpYbD1BCp3Pm/fDq2nPx2Wp\r\n8HSE6RVTCzYAcPHnzLvH71xdjCRaq/woXyr2WBslHwNxfLNGKia5enZCTCBi\r\nwuC8HIPry4E+++jXapgMcj64S2wITTEWZ7A/T0b4bLsRcZfZ9FZblLVBZHZp\r\nXUyE9gWfwBOU1pG2Jx7qtglrR+zk9VCsj34Z2MLH2O4DX5Jrv+sz4TtykhwC\r\nDElAhahRa0QtyqisYlbYXMKSbma2eZB27KT9yI7fihQz3O0/TCAxln/Ldiq8\r\nCcLaKWeq5niCezMb9+ua6g9p14mQK8T3E0PWDDkDc1WSH4Lz4xs7IYh+aAM1\r\niUo9hnFbi83nfFoMuuhn4saBne1MVNdCA4ykN+FrbWQZ5Riq+5ruZkiJR09d\r\nLos7P6HRYr5Zo9irWbDByWIJ1DQJ9ADEd+Yhkmn03nuc2qYy5GLjOIm6pwxk\r\niv69RkrPZ83rINcBuToZe6S9n+jtKSA8sB8=\r\n=X+85\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241710143","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241710143"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241710143"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202241710143_1652781729644_0.7415937975888756","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241710959":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202241710959","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a86a897ed2991b039b9d1202d102028e28a15eea","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202241710959.tgz","fileCount":49,"integrity":"sha512-eQDAWM83PFbomezfx1cN/DqmuUqD4bLUI4pB79WY76a0dgF/YBPwFe7jxQyeXtmtMZu98yBWLyd2QDi+bD+qdA==","signatures":[{"sig":"MEYCIQCHSJ1/p0VAp+8SdZ36c21exFobmwfGQSKRQDXSQR3feAIhAPmhWyuPkodL30AjTcGSEIQbVMo9sGDLKJQX6ydrDD2F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig3STACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqhg/9FtSkO7DdR3JX/8QNEA7hFIoaW64pSaZoeXyMXkaK7glV5qKw\r\nzI7TJjTqKBPV7HQFgaub/m6/+Uv01I29aqfHXTz8Ph4gnFP7xWvIxauYZRJ1\r\nogUSVeCAOVXRDpMOxrlCyTs08+bCgDEifVKcFloofjlK+4sGNpeTAnO/ZCyN\r\nIdozgcMYoMBZADM05przUrUw1KQtoNPy4S/rEegNzFmL9sdH87vxTdMt+bqM\r\nCUktMhfRNncqRQJ1qusLLtgWE5PswepKp9fyEhdDXqY+NRcl6H2/S6PrhAnu\r\nmI9aBwWUhgi+0O+HLuTOl5fiyFOiAOw4OxQrCgDCkDnfWpQ/2ADgPUH/3TrG\r\nsy5V5h+HaRLMn74vlo5v90lDeUhjXnjOAMPg8EHgEiU1gOV+9e6FnQLsC7iM\r\nOpbybHvRYGK2919ZCxu6QXCv8bMTJWODUsSe/aforNJxXvd4nlzM/CeZBDEI\r\n3fJiB6CGAI6AQWnFxbAZzgVjzDMdW1VKNiQ9wPelwsCSE8X15mzcn8t4yyoL\r\naYgB4LrazyhDklo0LDb1MFL0njHgNhq7LZaVFYJcX2VYWWdI2Gxq/YX+W77D\r\nPFsBU753a3rfabqEB3R8gYquyC4ZbmZ8nZF/EePSR5NJx0fbzYXJURbJGql1\r\nR1WFTqCfz7LBefJDHEMYzzbWr9IwN6XX3OE=\r\n=zEI4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241710959","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241710959"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241710959"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202241710959_1652782227472_0.8412849415390489","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241716586":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202241716586","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"34a27adc4e33971257e21d193ec731a4e266c237","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202241716586.tgz","fileCount":49,"integrity":"sha512-vz0xBvNsOJ1vVH5OxftSm57fS2pbwjXLVu2iYK2xN0p1CYfpinaefQOTr1KSSQoTcHMRfJ0qkx2biSMWOwmyaw==","signatures":[{"sig":"MEUCIHndOSS8Ec/Jj1QzaHPoYXQSkYC1ob0G3SgMDuba8nE9AiEA9T1zZR3zPI9X2QRQS7CNWfzdKQchIfikDRTWQHRwvXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig9Q4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqBQ/8Cn5jPSeE21YbxQSp9h8B/Rqgra3wVfZO579EY2a16mdC02Lu\r\nEB67pDqvMZcnSEa/4Pa9j5xCkRxHCCVoYf98403/x0he5rWtr+zOBgLaP09D\r\n5xSrhLeWW91p0NNlIDzWVbjSK1b/099XauJddeTJBqhL39Fxvb3q+dkFINbj\r\n2pE2g0p88vAA/5CCZSDQbACkmYuykBuP/v6mvzNjhnnTezE1GGatAKc5DdGn\r\nMG34WY1eglnFTiKXHIqOMM3fxWezxeCsr+5pst7gG6CxAgIRjelpAOWrCa1g\r\nJaO0QsLKEx1mBqerCh3wVUU1PoZjy734xCy72wHV3I16UKPOl7s7dO2vQ66N\r\nuDDgb+G2T8Tn8YSJJnoSHw7RV1ZPXI7tQ8mf6RpFS3BbYXRYpzvDX9gzxcc+\r\n+cKtZzgr5eRpuTnYBrZ3fjsh84bhcF4eKvSAnobyL/BOwhmCpKmmskOoZlDM\r\n3nSyClrEMwFiN2cY+EbHSoJktL5clBC5pbGhgseGeC8UEI2jZUzk4kdAwoLe\r\nnz6Uiil+8Sjno/WceA3ZYXl2yMk6cUAt8t1x5ppD+BxM5i1FLKwum5gk5r4V\r\nATLGzZOb6h+0TPr8bksxSgCF0ZWHxw6X7I+UB2tfsw0MBb3T8zjqzU2dniaS\r\n3IKyK9wUGDdlsbvPHxpJLL2rYsoxE+WEmqo=\r\n=EEdP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202241716586","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202241716586"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202241716586"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202241716586_1652806711803_0.05493515194008536","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419101754":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022419101754","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"53ff92f4ff9b83ef4dfbd257acc4a81dfde5c515","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022419101754.tgz","fileCount":49,"integrity":"sha512-o3RAVQA9wCdgmUr4d21OlKyl7/XAkiJk5kImWYpoh6Lh6IHf8RlF56wxB4BXAVhuZvpVRudYkoIlGpXlmNU3YA==","signatures":[{"sig":"MEQCIF0qDJrtDPDLkhc3Baqr51YKeISydUzUvkfOhalot/HSAiA9+CcsFRHX4InYoj7YWWoJ8xvgc6aBYlbSygnRHQZRPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihhlyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/Aw//RcfSwScF0vfK3dTP9aGPhktmJS9e5solNbgYUfxHXbih2lst\r\nMGwAzofDKcYkqo2In6NMzmvLl5aN6GpeQFgoLrR1EWxuGf90EJYowfyQ76r8\r\nlMPdERAWCFJB9gwyfyvLkZdrb8uBI6l/LOnP/vTJmgkrHerzNHonDk53IlMk\r\nQURl7W+qtlX3+4CYoBUWAfOmdKGZvnGpT0NknUQw+LbIBxXg9K/ngWzPDiWj\r\n0GjKXQG2Bi6qtddKObbn9MLjvuW+wjCBQBHkn5+L3NEItPf9r9B0ynrNlJHg\r\niBYXR3+nviGFUJfkP2d0L0kZ0X5jWjfgcsPVl7+cy1NmUMotsNnvtYnFlIyv\r\n2w42gth4VMU+VInOSTvgArlT8Ekgbiz3RJP2otTdUhjOra2ETa4hn1onxWbV\r\n+9NTEZ/c9MEcVS2oP0XQjrEpTHet0vB36Cqo0QvRNbvaOrtZ0b0jhC2lMXat\r\nbEOhXEiU0eW6WjiLAi8EeCOY0PIaBFnCoEobscH6e3enasTHs7dxfzNL2Ker\r\nSUJANh7crSH0pN5SUUZ85SPkZbsao05TlKfaTz3chbMk85QRhW7ybZowK93r\r\ndjEfrG2gh8qm5bdHzVq7C8f8xA384yeNHHVBPbXg5dRy1dn3J1o6Y1+nrPGA\r\nvY8k6Ji7OulnRY9moGPI+rhvFuXDsYND1rs=\r\n=ZixJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022419101754","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022419101754"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022419101754"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022419101754_1652955506657_0.12379749487584801","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419173934":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022419173934","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c07867df07b861b3f88de50abbe471a0539c2ec2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022419173934.tgz","fileCount":49,"integrity":"sha512-ffmHqoVmWnyOERt3TaKEsHlEth5eUTY79fJfKeOnYo5Dwg5xAck07bNl+1i4GnlAz2U7560pl+020ZdAecEOVQ==","signatures":[{"sig":"MEQCIGtow6NcTmBoseBxguaFxil47uLTMNDVU3DxdxwGpWieAiBqA3U96BNpMRGHmEOX/NWLepE5QIMakVnpZ5brNXGshQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihoD3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp04g/9GUJzXmsqEbxPDQvZq9IHhViZP49vlw4U4hyCMlux7NZNvYJt\r\ncQvfa+z90Y3BKoMDx0z/GP9BlkAmVK9GFfzrLoAUSp37EqHggsq+5zKcPnmh\r\nDf4EY5u8KhRZXoL2FV37h5hissaftIy+eWf6DfFRl3jcnyYkpzgTlCGTKd34\r\nYyM62MYd/theM9+38sLkgd9D5sAXiKLdiW5bbkzsVTsaWPkHFbG2je7StG5M\r\nptc7Yytkb7puXkAxiTmkeic7K0Kb6ogDbN58sY33SdIRmqcGrph2EbKTebcf\r\n71P00h+3deikSsCoOuioEgPfBlCqpQZi1tx+Nem9uaFJvF4uB1PnEk9tnk+D\r\niUKQLtAKZjFs6rmkKVmX78zRlrixO+DJWMsbWB8S7B+F8fN/Ju357/l53cu1\r\nSTxnQO5qNfA9Xym6rkaAMZZy+hM0A+uArJIoNUtfLb8m6HFuQsbstn1dSZAg\r\nMYuir+Cnk0LN1VSoiM299M0O6YmR4z/OAwrrtvVVWmUqUaYunHZWJ0f2oR/p\r\nhO5YXC1XkpYAGbWgS+dL+7oURxe4Xz5wEATGtDhRVyXMIXprDa29dA1jVVWr\r\nowRuwQeOpXnRDM3gg5B9AOjvglzwWLZSda1FM+eb+mATFNxBZChvwVKUUcFS\r\nLoQxJ1vFxETOXHsLGyHm7sYOeb8D0/Iah6A=\r\n=4uGC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022419173934","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022419173934"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022419173934"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022419173934_1652982007230_0.9197777397837406","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419174740":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022419174740","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"426f15b986f6cf0c9c0cea8674bfaa34bd24959f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022419174740.tgz","fileCount":49,"integrity":"sha512-MUFEuP/dSfn9ZPrsS1TJLkgCiqaICn92K5LdTD6BA9HscW4Yg05/FVwMkaXZcPAzXGcnvdT+zEYpalNDL9UNvQ==","signatures":[{"sig":"MEQCIH7EYzkBkK/FW52s/u/kG/8o2X45Z1Z0O8+W4g39+g6WAiAAp5isk4y887Ow4GmZW4+eDc6oTsl/rhD2jFc6dIzwxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihoLZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3mQ//YZc6Kgv4pHZNoo2UxwOnKzP0oL0d6HeQNQPzKswL5a8ejXkx\r\nsW5aHPDp+1dqKVp6bv6WPruF7h72Ml2/Mhzs10VCK+tusu8pIW9S3YufBGlx\r\n8LghcUJpDsoQBfW/LanoxSVupBLRoqfdANwpXd9TAa9k5cuKK0cjdcuOfuGf\r\nLpPTvX8Js29mOsNoDZukeIrHD40s8j6LvJtV4PHwew9trJyqaY54okn/IdGK\r\nMF5iI7BC9vtecSQOQ4nfL0OLK5hiAMPEGFq2kwsAZEASzRfY7tGgDANKZRGV\r\ngw1vTpdp2L8sQGG8lMKImnRNBx9P9PPXwW/v+5jo8O9ttEc7x+7PXGyaBOLg\r\nMmeiIZWLI26+VvFPkENRo/30SdcfZCM0k3qEEUuJj0JfFwPidcEwqBRLdqRv\r\nZbztpKRZq3etAWFTZvNoF3NEu4RLLJ/rRRVY9CesI9DG+xJOlmtCWpMWaMOu\r\nUnkKbpSvhj5jvzXUHwMMrE1LQOurbiNpNRGwSqJoAqWk+JZZkKgp5Vou56AA\r\nkWqLXUIxvKsT9AUDV7NFOnrNFvZA7uMt3/Gyd2cSqn2m5fQQR+g7yv8s6epX\r\nkd2xPgaJKKL4ReiX7P57oSS2K5Ne2sky0owVWzjNLVmMIvjwLYN+J4EGsh7A\r\nq+Uom+6s06GvOFf0uudRDnJkMF99If9IiAA=\r\n=eGlF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022419174740","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022419174740"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022419174740"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022419174740_1652982488915_0.4405262911111807","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224205231":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20224205231","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ae003582b5601e9e388c683e0adb9566b54cd9db","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20224205231.tgz","fileCount":49,"integrity":"sha512-uzcXOI0ZnuSK6deNhhsNfd26djrF5IuXn9VBEBoSCtoQXgdE+WVQVWRy9un5llwW99sf9UvbjFBxGGTyxMRlsQ==","signatures":[{"sig":"MEUCIQCSuiE6gv1fFX2z+AkrVDADc0KjyFpsO+kfpG2r6ZXFEAIgQiPyXzPBNfxpXEbDWIJvbE3UCEakSDgFeysKiXS5C0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihyXXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoTA//VlZCBH8cFPJXyqnjT8S7a9PJbN+wb7t4UNLcYdsjhU6sukAs\r\nVH8t0FV93bMDcmTB7bZvu0lweUDqpy9MYgKLA4El4clEjBbdzOMKKSRoRr9c\r\nLIWRoy7754JkD5IdTnOqvjJhMfSU2dTm5zbl0gMVvd0sQE638ki/vWjFXeko\r\n0jhTlIl6UB38flYFRBAc03bDFw1halOjlhCLJUIs4byegoHNV4N1vUAjVXZn\r\nRuVZ4NuwXuIP/D9s5WjiI2GJ0lKN321c+j7yNFLJSLqGCaiZicKXTbn64anE\r\nvQ18Z/EuL48xQhj7TVdx0RSk9/+0EUmVEnl/T4bl7HHM560Z5RxwCuoV3tGP\r\n3Otm6r2Bn0B9Y2FKtJ3MyFhuJ+2lulQDjT/SqiCzBMQI5tQNMMOh5aCj/iNd\r\nIk4iC0Cl2CSKEYBlINt0Zly8d9GkXXPTo/ojaiHiD9xlp1jrWDrAanIVmx2Z\r\nSEC3BJ4ADLIQ2O54rvHTxfXrgWn34iiwowOaXBCcSuWCNn5fGAhxin/yXB09\r\n3ZuH2+XAze+hnux8E6VZm+A2aGIymGuUxd1ruReKw+X/iHaZ3nWnyOLgg7Dd\r\nS9qWDPXHhUwEicruoFpaVLJ2Gfztbf150bT8zemD3IEse0tWUq+Lj2EqdouZ\r\nVmOrp7lasg2tgwSADEUXvbCYT2CGyk4rnHA=\r\n=xgGL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20224205231","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20224205231"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20224205231"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20224205231_1653024215731_0.3978588404044754","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022421153722":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022421153722","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"234c3488ffdffab88de55c1bd263bf22d1aa2ff1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022421153722.tgz","fileCount":49,"integrity":"sha512-qkV4T18uMXcO/tqm03LhVegbmdw3zVsp0t9ukDiykbvBnTlQJWcqHFzMbZUB8+D3WJxHY4oW1zholYITd/gRKQ==","signatures":[{"sig":"MEQCIBl9cXVdWj/GaawA0bi2gu1a3PlJgPmP8d2igizMNzeIAiAK1O1N9v01Un3TCCVLerDob48pCAJ12OecQstzyjgycw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiQdSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6tw//eSaMUz3lf61a+8VEaUxLSng64ezMMrAAC2fh+LgwerC2RTiQ\r\nmFZomr1zNlUu6J5PcvWEBgeEr0wLytmr3M8vPtaJB8cLw3RjNrIpPs9rGfSm\r\nQYz+ZsTNtbtmoN5IS6yX3lkOiFaXrlzVOPI8Kwm/3lxQd0L289BSUkhNb4Ec\r\nBECd+V1+us9FhhFxBx0EgAkTddfHlzVE4E0wzbenmojJvI23ntckPf1kg4ye\r\nRc22h8lqDAoBLdG3ZOuhlsOz9q5IgTWZIJJjlSIWx/V1eEW1Km6C2htrfCc3\r\n88hoCemuMQtOsN12SFxX9BX8+KXQmgygHbD2Y6E8XjVsN3ONNXz0Hr6N8M/u\r\nYlDyVmVaXRiJU7R+zaXapdise4Xxj1fhV6p4amm3DCkj5XdmBJZ3HqQMHoys\r\neuf+jH/TO64H45vDTycmCvl+ADkCHUHiTZKS6g9h3ccM/4Bu010Ep1ghDT6X\r\njhh5rTDu3npD+jylDzM2WY42ib+ZLzVBJSUxg+QhSB8X/HzFE48KP2RXSzwU\r\n4wRmUx7n0ILFf253iSasuevdgfNd/r2OetJW4pkJLbNkYkwUD6XiljNEJHS7\r\nO0wtpOw+JyGPI/kC2uNtbbSFIV8GpMXJzCk1MevJ3quJdu921YT2J3Oa418B\r\nCsgxuSgUd8mB1tE2+NuvZLHhmd+Tl+3OOPI=\r\n=WWOF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022421153722","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022421153722"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022421153722"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022421153722_1653147474137_0.8786789954933594","host":"s3://npm-registry-packages"}},"0.0.0-dev-202242121518":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202242121518","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"baf40093eef7e28770ca01927d682c9d06390b56","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202242121518.tgz","fileCount":49,"integrity":"sha512-EpewVbTjQsueqspDNJcIcGCOelZZeVTNBJt4ElHz4hXh32bz8KOVc9+rCNHLAa+M7AM+oWDqeKJfnjtTtUVv9w==","signatures":[{"sig":"MEQCIBB90MMoJtKxwoqrV6/B5F6Dkz8o9DVFlQLm16HqP/Z3AiArzIkCkwVt6qJ8QUGBw3gmNO2YU8/6q4KQb+jV46Q4AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiVQuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqxQ//b17SqJB6ghKrh4PG8uZy7k+nuw7YMGA0pnhdD4xMpCEswueb\r\n5tGuXNjk9D+vV7F1Gh05SDQMcztyBrjQ1Xn9+G57C3X0f/2paHTtZsiclO2n\r\nhREx0eUyhn3HquKBdf3C4UCdBYrRXVQbTkKFQ3GkxDh0NuQn+aX0fPDBJoJT\r\nk+lNdNxWycsTxWzAsZZ7CrF6nGl7wPFcjlNCX7jJBXWubW7aFtaAey2ICYum\r\nCUD9NnuWcKRfsNcYMPnMyRasV5xj1IJG16Ut4wnhkcdCAE/6q2xAF+xxJJYO\r\nB1L0Y369jwjoBqUWv+e0foyItdhDkiL1dxJQl6UEhyvkMVtZhYPkEti1OAOJ\r\nsry3K/IKx9LkItlefeMh/I2Q40Rti6HIiy+5GfrLuAkEt6dTpaeQyY6cHU+X\r\nz21ssqsr5adF/RQowT07piqppVL6PKMcRCIdhgfgX1r4/juLF7X6jvro2xks\r\nAoWWcE/D+W5c9ORgKD/rUeBJCFQgNCGefDyLHmLPClMGn08qYdQUlTuhnXc9\r\nOpo6OzOxrtDSiNMJzJ5DWj/KWLkKzhLuW6V+PAl/DaTTGk1I8SOxk6fcGjcb\r\njsSBPot7cX5BEQVpczsGUuJ3RLWBkjeiq7nFdO5YDroGHCV9Y18YmcNP0Hs7\r\nJ3L/bqeQ5DiOvJWtaSFSJw4kxWD4sVLZlDI=\r\n=Grmf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202242121518","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202242121518"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202242121518"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202242121518_1653167150037_0.9910055102840454","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224239149":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20224239149","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1c66bf4046b36c1a3057d485cd2867ba3ba155de","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20224239149.tgz","fileCount":49,"integrity":"sha512-9AsqY8zStQAvvz9e88JwL3TRNSrrSIqph2DF+srwQVz7j7e5pRsCHMzrV1wRyKy8uF9uoYrPCiRehR/HGulK5A==","signatures":[{"sig":"MEYCIQC5XaAqDlhCy1IB+BffBYYLm2S0hEt5J17/D7QST6dWFQIhAPibpVpFc7QBydDMGMfS78gghKu0HaSYruxecrocYqBq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii02eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyJhAAmEJBJLSOVdD+48dCctnq/Cau0x1oQStc3i586vX9WhyfEj5U\r\ngYs+66mpebwKzuNbT62ZUIDKKZyU6lV9m5njNRdV3f29u1MvP4FZ7ZszaawW\r\nuqZ+oAUQ8eVb15Bevwqyj0T5nWcleOPgZdVFAdCVnldvTGwr1ToodldUbyxa\r\nZrc0RoFTuXPJ2uSHcy02ZUjND7Ez/f5jnoNa6RRuTjQE0Ptp83CcHZurNhpa\r\nIy1QxM+iEanyVOgGt74itFEIKo9JLV9Rnith3GPCQ5N/gcCrX5bsiQusvd1o\r\nHpHa0/UZcI33VYvRCVCU3+uuqGWOJ8vS6MdtCTgU1y0hw/iYt580P3cHJVor\r\nRySmBgouA03R5/zHbQMyH+8TxLzy0aoMEyM8dE2GaKn4o5i8vmcVhiwoppka\r\njbXDo8loG1A1keP6WUym1sPg3WuGJXVUmtOeoHCxDb67tKdYdOBVorvlgZc2\r\nI4JJIxbLTuvNA3CFS2GEXrpnnTAek+Q5WU1SdRLcp5+dg+AgzUK6n2RgfTth\r\npN2LMvnQutOwaga5cufac1o9M+oI48Rrd5XfAFYjI2BGvbgJL0Po2BYTUtvV\r\nPk3nNskTzfBr3BiJlo2CZCdhNX5mYineJX+vl4tAHCdJpQEQXjJ7Wdsy9PBH\r\n8LW5ekVJow98RHtz6lBv66DmP1FloEYTCxs=\r\n=odpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20224239149","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20224239149"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20224239149"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20224239149_1653296542023_0.5267218369136004","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423113827":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022423113827","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0e761e2b180baea731c118eaf23c1f9501281621","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022423113827.tgz","fileCount":49,"integrity":"sha512-sfmrVUkADzaFcJ7PWjs5GU+ZtkJ2ELVyms7mgtbqgVF/apnpfRoHGNPxT0LS1Jb3hvD0GtoszoaqsIbYsmEQ/g==","signatures":[{"sig":"MEQCIGKYba8l6pqxWS25ZcX6d80CXnCo46mv+wSVV14FoqrhAiASzI5v4bsR25IQYFopdxsi5pSZGl/SLPVkcqsPa2HvVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3JOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVPw//bA4xqAfT5cF+5/YOS3HCqw/9FYdTO1AiR+/8Sf8As6yW1+Jo\r\nmBtDOuoDyo3qEyJZKbD9Eyt5MnLMLAJD99RQFCnFhc4Kkuecyw7qxog//k8z\r\nZi29xuuqLBgtwfAp/hvLh0DLDHyJv4GDfeIUlVTI5TGrncISnU38xrKIgSmm\r\nD+PiX5oz/olyo/kWvH3ETlpRRm3MkjgAgjDomircrkahJNiRdBb4vhXFdsuI\r\n/qqvLuIAsV1NwYpUIgAH8LGQuOkFLnEeTN7QugV7LXcMJric1T5q7cZJtnWB\r\n4U1S8aOq161pkja+EXF6SPBlPjKgU4Tf7T+raIO1LypI+MxbfftQKPT6cvuy\r\nb/LHmU3I/Rak5qm7E/dK1WpLyxnYp8hn8njZY4GQIKAOxyMMeWF9p0qSHccZ\r\nV/B8T6FVVYYV/H3+VXKDRY4j0tCoafYlR9HHm1mnoVZo9o+S0dHymbBlGXC2\r\n51l3PW8CFGiMbX/b1Y7fIqq5/1rWqwBYUMT88D8TfZc9UIFVsNTuhM2D8SU4\r\nhpnCtnz2uhzjpH+71BrzVgOept0abKSU6zUOrWDWu+ddWyYxPyUdk4e8eaYk\r\njOZ6BrrYAO+pXDRVX2K0U8Nuzh5CZOW0hIRzkauxF75iB3p+mYSo+Sw8Mo0X\r\n6UpAwiSZGdafZJnbF/KUXY1wZzVPtnjfWT8=\r\n=7P7K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022423113827","@chakra-ui/utils":"2.0.0","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022423113827"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022423113827"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022423113827_1653305933928_0.4753638367603932","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423121532":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022423121532","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"79ef17894e133de62628f5a189e33a0de23587fb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022423121532.tgz","fileCount":49,"integrity":"sha512-vSzXbexIRg3OCkG0aPinLqcS3Nk/5bv1pD0Dy0iG9GRtpqrzbAbIZBB4jQqeB+7x/KKIF1zv5mTGp9RuK8w1jw==","signatures":[{"sig":"MEUCIQCUxJ2g7ZAr0evKiYXim/sXXNPg4EE4kjvaPxPrU4XkpAIgIsr5sX6hWX/9SsbdR/zCFGld4g+SnySgn7tKCVuBN08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3sHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXKw//T2mJHDVOhoCVKGjCZd5v5puS1Zmuopz7SdwpAmZjiox+oVlQ\r\n5nwYcY05SGi5NjAZwv2H3BTFS5jO2sSmU2W//+5AW3u63gLF+3pAR3aRc/pn\r\nXqvd6BNoESssXHRQIxOmjrKRW081i6BGcPuQ6qki11vPnjxfA+TDtS1UHq8v\r\ntSuieeTe/6UjlwMQm5iOaIo8Y1PWQrx26jEP1UGx6UiimNGePevkJH9IdQ1a\r\niwnJn+pW2u+vAR5sefCDhT4zviFnFDIJEgDdFe9UB2+lNfyRxFizTZs7dZ/z\r\n+EWzSrY9J4dOerMrJ57I3R4BpVQTD56ieLogUq/ISVVPpcQHPGtWJr/SPhzT\r\na3eq59RK0a0kRqGyGSpkZ/f1gypNrtjsJgU8Dx4HZrRW4+esl48l9dO/U6q5\r\nQMMOtZUOXTBBx/OpM8F10znvsiyqhesDV9R4+uwOFgcbnVECbifhlRZn9oD2\r\nTkN+XNTPHXgsx5PkTGr0JkLJrRlkLf/B73QeRgCMTTVZ66gHMl3X6U+YCCxd\r\nMTDpanUTm/Bk8RKrqk+eDzwKFDk6za5nWJCpAET/oDVM1cEeYIfUt1muNCIP\r\nRMW2FmwCuWuHYMOHD2bp5lRein9RSMWRDgalT2qI7FdH7OK5mab6N01748Iv\r\n61QWfSpVSfzPLnaIJyQYGdlpgQ3oBlqvdxA=\r\n=PdAA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022423121532","@chakra-ui/utils":"0.0.0-dev-2022423121532","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022423121532"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022423121532"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022423121532_1653308167507_0.39127923336920434","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423121615":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022423121615","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e8ec809d7c2c00fb827f05fe49ee5a0fdcb2eda6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022423121615.tgz","fileCount":49,"integrity":"sha512-8wuqBlLBTDAeCISix0+XzEmWipYpN5UcQdBUoLv9FTmf5apYH1WJm87uyaIOzqTfxFMZNdLjWJ3PYiR2ejRryg==","signatures":[{"sig":"MEQCIEY5ok9LhgrOWx7QGo5APNnUwEjQ5grNwks/znM/U/q0AiABx07qr4K43wJ+lXQAYe96kV4wViArMkDw67eIBu1uzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3syACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr5A//af3cADifVdWB+DDjDGr1CznFW4q5LBJlfYl+tQB8UCafMy5Q\r\n1KO9ayREV7OThPCyphFUv9H7l3DVUL5kCyt3U2MVa6SHbcP0A/TFkdR4bb/e\r\nVf7FvvqY6V7jv2TzU/VLnGBu8deA1OmmLGTQsJWqDDrg/QAGL+hk4c8sdqLv\r\nvqjV235l7ugQjTzT8YHzZLmaEOIj7t5SLDAlLqdMVeqlDZvpWjk/YZuVoC18\r\nIAs4emPiL0NI7zQ25HtmHqWXCnmNoCt8ZeBYf0uZMMklWWt01nr5jiKf2qNK\r\nD8C8oyU2xK6lAEzh3cCuftmscDt6Fap5M3AAkzVoaR9ghgf26l9CjtFv04t7\r\n8Mhd/Z1KsyAKdxAWRHN5pKxKvVWBCGcgUK4dGBVJ0Jt2bc7Ca/S5FAUl24g9\r\nLpGlSeUibtSuuSrTBV2M4pssXed6ee/FQbY+wd9vTXyjh1JtuFB9HR9o3w/v\r\nu5T7xMxwrNmseZO4uh6ZvR7Kgg5xMfpTnE5HX4qmtG9VeCfkg2JRSVwUJrL5\r\n3rmQDfBoXPd+5a/YoGFt03qz7iSONTjAYcE7sNUdxYzfdOBv3VrBQvFIdmu2\r\nfHbNY79XukFl4vmsnBNpSUczir0F3AZTJGJZtN5bcbYru5+0qhTKaQSjKC4H\r\nKjcCdCu3oQb3tleUD41wi5VRmQMDoKmYl/I=\r\n=MZkH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022423121615","@chakra-ui/utils":"0.0.0-dev-2022423121615","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022423121615"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022423121615"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022423121615_1653308210639_0.8806222689669903","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224248246":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20224248246","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"14a7fee4d4d1e1e946bee28ce8cc2e7f85a237a9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20224248246.tgz","fileCount":49,"integrity":"sha512-9cwRibAOTLN0ruszD2iRNB8euXNOnJccndaBBmQfq7/dcsuDDRMIxx4o8Az7Q1bDc8ID9vmrPc0xjmL6EpjmpQ==","signatures":[{"sig":"MEUCIQDbYeEu09MzbBZe2USqOM3K0Hdg0cdNUF08MwAs9TtTHAIgdaIa9Y7BEIhi1mtD6ygfdL8wbsmHbks5HcssUB2+Nck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJFHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp02A/+JBFFM/9lzeOaoi57kRS1K5ssuNikoFLb9hOyHJ7ZL6KW73o9\r\n6GzapZxtFpaZMwrPwNz2NesRD9ujFi6E3nGAowYLh2PLWU5jFpningaDKldb\r\nlpOIV7ufAxhpyyKD3XG4xfbnKc1YwNPiOXme28CJJ+J552trhvCU2BBRKqEO\r\nVnGNaZHyH6z8vWJXXH3ya6Bp0R8+NHpT17ad6IFnJR6vOuVQr29DUpu9jLw4\r\nI/sMFPrj4l5OvrV90L/gKl7HwcCVRP7g5xiq6Vfo6wd/Us8MpH5pjrjBpKW9\r\nPcC7Bq28FRVCbJzm7vOGjMDHY5s3wETp736e/Wb/It/2MAEe0CFfTCHa5iAJ\r\nnZ5xE80tu54o7Btho7AZz5EsSCsDY1HjGTejkGdtgSz/yhu7wzElf6MmCvmx\r\nNQoupBA05A6ui3fAEIMeMTvQnu72/+ASQtIDYnJZgkB0nVtoPZYcjiq8OklO\r\np5D6c8W7fKwkLroLMiraIJEXKVr7zJ4eXkJjHpSJb6PoWPE7RSXIALakU/DL\r\n2c0M+PCR0ZFTso4kyFvB7MlNcCscZETq8Vvl+Q85pyQuUA14HzWRwgzK8Oza\r\nY4JVsMrPprdBp3XKmpqG7O865Jj/vYzy1C33xvf+3VyH6NOmt9j/D20WSHgn\r\nL3J2pS89WSTcnZJsnv/MFzT2vZntg8zmOBU=\r\n=qxFh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20224248246","@chakra-ui/utils":"0.0.0-dev-20224248246","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20224248246"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20224248246"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20224248246_1653379399661_0.645227868505377","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224248516":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20224248516","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"75d84f1b6e2a02686f5a6b5916372a9c8be842c8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20224248516.tgz","fileCount":49,"integrity":"sha512-/w50reNZwFtdlQ7DTjAVKIibZS+KymAONE2zX3yGABBgz/WLEHGd3/OH0sjBbeJBNGB504qHri243LY338KgnA==","signatures":[{"sig":"MEQCIQD7CzagI7P1nhsipS+oN2om69l4bCfi+61l7mhj/wpBvQIfNHdYz45nQ11JuT5QIBfZg2pan1qCkK3EujVgcLPLkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJHdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqPQ//RTARIpEUmj68mNpcxaNxRoX9BejgWl/tXL9bPRgOPsztYrgV\r\nglIsNLTUZtNE2V1IrqNFcpVzs9RdHBfC289UbaxCYXI5/QYBTNjJfKBe13WC\r\nrqSxF1PzSLSLu0lrqb7S9bvP+Kjg7wvxcnyUMCPijFwd0RMQ+N/ZrINrJHmx\r\nUgMQodccYEBWZ0ldHKqdNNg0/w6Qq85jDQy7gToOibb4bG2u675vBkgpn/h+\r\n6dVE/iiF4xrK5ATpNpEVK1qQ+Zb9tCKRA+5yeQRmSxJzKvkLR9wCcJkOqVCC\r\nnTYLr8AwRlZnJJY1oAxfzmGEWFrw+npRvXzBdZ43HBYT/UYquht3517c28wL\r\n+oFIg8NhGCoDByEbur3VqCIfTuczhewqPaZmY1QXHgAXPoJJm22670oqI2DX\r\nyQk5rRXTiNXMJ+DemdUCFz7aflZRSMtfTqL5oXr4mtStCP8+xlMiEs5ceur1\r\n6S9jesV5lirEE5deWDHyi8Zza+7RucDZ1/PVyqhal69B6BgxGg/wgreokOoX\r\nWpTE8eGOYDMih+ZrLdVf9wP9MHG6C2NvQqyFlvExT6OM9IJFjp2sn19FkgK0\r\nye0oxuqB0U9ITaeEpyPsN46Kcwgk+nKHKwpddrqZ2Gz5xVf91txMGr1OlUTE\r\n/9BLkQY3+sT3Vlud9hFco1aLvxqdcEyupvY=\r\n=kvNP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20224248516","@chakra-ui/utils":"0.0.0-dev-20224248516","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20224248516"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20224248516"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20224248516_1653379548906_0.4950088026163697","host":"s3://npm-registry-packages"}},"0.0.0-dev-202242481651":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202242481651","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"886147a4d1fd7a0e5bf717c19cc001be1bf150c6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202242481651.tgz","fileCount":49,"integrity":"sha512-zdUNKi/5STIH+yoBRoZsoLIjN5A84mX1obdBglWTTEsxMcq040oAWxO5JMfNebyQMpwY6oDyqCBdQrMr5vfzJQ==","signatures":[{"sig":"MEUCIQCdpordYyhDItg6Y877Bz5J7oNkd6pKrPUYqZQMWwsGcgIgXdFnN1oceyXozbH/ozGKI874+OOwGOxft2c2rlmgwbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJSWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTYg//UN4I8uG9fOU+/YF4iOqqEeUT7R7SsfBg7N3ahrQ/oIByGShh\r\npsSPAF5msbqe2E4Rcl6To/4qNqdu/r3dwoaTW4W5OIEPtAzgtk/4OJVZfhPU\r\n6RblA6nUEY7xCV/yRoLtXcn47Z/Aju/+WObDWfp+k5XYrJJ/bdqszWz1jfrp\r\nxq02pPOeu/cjb8tpbKv+o78sJ1QqzJdMSLdQEJWH7j1D0zHADKT+XoNTzDrS\r\ndpCKugkGBQtoi9NTqmHGqhwXIKDMR2KzPCtsBDOIYNwe9UOr2QYR3IcMk0Ex\r\n5ppyuByboJWOeZZJHuzBjiVu0vDV6Pxz3Z1AXGxSaIh77NWwRtTC6RwtNbGh\r\nyf9sdiFab3Np77uvuH4sKC5KIauUFbixocAdPuUSFlV1mFpkSnNecLoH3pGH\r\nZooVulRT/UTHMptzSxPNSTBHila8Mj6sXeapKDvkr4eq3pTWQjv+ejQh/Ha6\r\nye7kFhWDSJMhvOeh0y/n370r0Lwja2kwpNV2/h0QaKl2FohQr7FWi9Iy2W2S\r\ndMEGdtf63HikLR8E5bPQflcjDfQ+/vJhfJ2l4xEDITjdrf1DKtNGYmiWYwOY\r\ntK7hfUGXtajvyL8yEJzebpQmHFu2tS1LIuBZaRO1Qp3G293GnSs7xBhFoD+A\r\nNJ4WJx+Ex7+IdI1NAxjE8UvgiIqA9uAFGB4=\r\n=goUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202242481651","@chakra-ui/utils":"0.0.0-dev-202242481651","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202242481651"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202242481651"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202242481651_1653380246717_0.9333392339824125","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@chakra-ui/layout","version":"2.0.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8ea76bacc8b31ee0e57bf9d1c40cd1d996c82e71","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.1.tgz","fileCount":49,"integrity":"sha512-fC4Q1IMo2BYwuS0tDitIGJ0ziwQhI/vmRdOd8M091m3hM/Odl6NAHPRVCKxdHOe9TZd/nWVdF+Gcl9TLu/wOCQ==","signatures":[{"sig":"MEQCIFjPBlr2lvfN8M16uOCOHoUojdQHabE6znlD4Ao0sMorAiBdg9aZccQqNDXlZ+DP+h5uIMFI/YwvLoArx1jQlp95yA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijM9fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0YBAAgbRbTbLIK3F5b1xBFxe8QZG2GZnzN0BDwx1MFlk6bl/ptXKM\r\nLtoB5qeR1SzQpa2H5C7OX0PMQ32Cq1ZtHnFFiiCIzRC5E+zWV/uepjSrOV4z\r\nfUnI16HQnyup3ZtNvQjJ2aJspmBobIwz3E/1YomauAYhvgO0RFiJvfMoMUvG\r\nMFaa8eQ4V8DBfK0VREGJ2dMicY+drXTx2tiTkjV8W1OMMirjSTm5dczCxTn9\r\nRdMURoAvtfKgKKRkOZ/+PE3xBKHXPjA6IYK3mSn3mJT4mPoao4lujb2P8VtS\r\nAwUj4Fo7ulqP2N/kFd0mylGZ4UF9v8azXMEgpF+BAjhAuitEPbAmA1++YnAR\r\nF8k9hr+fYjxORnVt4izc0zvu+tKda97wTmYdoknqxVagfE0mre18E9ep3qWs\r\nB/CyonFPOWKFYZFOIGAI8ihmTZv5wWMnuo3iw1u+xzlYkIwErTcOMlOOZUad\r\nBbR10D4RTV8lxqXa63T0CAyGBm1mRfft0Jd+0QmwaoA2XSpwr7wN/WXpp033\r\n221Zn4qlsL8Xq9eKRH6Ev7b6nmTiVQiyFSi2075GnsSTfR0B5XJOCirO8GFz\r\ny9EwC4H6qh184gRqSNAZ8RoVDthEeXiHFSCLdjguopX6Rf3CtWLaPuiXF8HB\r\nHDV5o1OP+mdOP4x6yzczUgmnbkF9+e6+FW4=\r\n=kXNf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"3.0.1","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.1.1"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.1_1653395295040_0.9236474935239922","host":"s3://npm-registry-packages"}},"0.0.0-dev-202255105723":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202255105723","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ffb578646813d5758d0c8d3b24736b59b0de5af4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202255105723.tgz","fileCount":49,"integrity":"sha512-L5kmGm/dgKnYhh6KmI58F+k2mRutHrgNyFzPyspUDdRJwVZlK350rd+QF8mfjaoKpv0KEzT3ETnwq2ujIciTUA==","signatures":[{"sig":"MEUCIQDZxyl3fo5ivtXLl8uZO19vbuIdOncN9602YofrPSUKowIgIidAug8AL8rhHM3lfxADkBRsQfYRsmip7V2GgMbhSqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinIw0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMWRAAjUSQyHMw1ZmczECedgI1kAxrUaQUyQMg6VBJOdHte9wecPAK\r\nqyx9uGkz5VSvxcH5tz2ku35SXJb42tQ93nPVQ38af8unx93/Ehwql2ePezW/\r\neb7+46n6CLyR7ihB0fOEbHQp1mDO6SIy0ZrOO2ll6JITcpdzFP/38+dYM7dM\r\nyudPI0SQtjrvDA3sCFe3f3zN1wuT6VtcHT76DfSNgf6nSjTAlKpm2rv68FDs\r\notx1q1zSPHsTXiN6swz2kfb4+L2hI9mSr3ZOFQe1qvh+9E07MPA9/BRbR/4l\r\nv29eYyr751jke24ekyI2nJ61JwekOgftY64EvsuzOj3uCWeu//wXqfLC78tF\r\nkIXyCldc/5HI7lYm+gAdJmcRp19Hv86kHGl+Fm4Df7Tfjl8s4LmkYbQS/LmO\r\nFrWyp3hIuTFVAZg0kVxg5fZ54xblt/0fDDfKlDmDA5dcJZGbcXEKB6B2qnnx\r\n6CCM8KmDA7dwQ6xUek12JZZQtS7zE3gQH9dGiV7qDFmsZeYIYR33NKUYKucK\r\ns1QDzrvvoW/HxoGmBG0k8IbPhuNEri3X/DQmPw8HwpQErxP5j/iPoYcKUwRt\r\nAl+gxt+ya8FDE+ju2j3NkGXJHRAEjLAcDSEh11I0j5rPXBQrtr+O1bDBONR+\r\nOeBeF4dNFJ7vK5A5v2BlAg6Cd1fupTXpHck=\r\n=/HAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202255105723","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202255105723"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202255105723"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202255105723_1654426675872_0.8316900821520614","host":"s3://npm-registry-packages"}},"0.0.0-dev-20225517307":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20225517307","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"888d48d70c6efb1a4a40500de17a1d8d33bcd49a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20225517307.tgz","fileCount":49,"integrity":"sha512-CSPY8O3yYlhyX6sL67t3Hir3tq8eS7DKNi1xHzcwjgWhDqFyXaLLgYDD+JjUG3n22PhivaQmANLSz9lPlZ8Tzw==","signatures":[{"sig":"MEQCIF/pC6uT7T/BKdAs2YHIEvOqqygCyppYJljvMpifzUE9AiApd+DRT7kC80/FaL17iltsZ9dz6FqZIzmnLpgL5ICSKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinOhIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0ig//c4RGgjRNkrP+55aFpsAhLAmXAiJHaIWQXg3AF3QoC2uSgM1H\r\nX0T6mzWRpI+2+IbljBBVf1x3Fof2DEhWnElMGIQ038SoVBoEADODjKjTXzyH\r\n7/YTcSUu+nfvWbmzMJT+04nuIzlcgHmb3QqEobCgKxlkMBop9o89X3+yHn/F\r\nQl9ZFd+M4zvoChjbYdvncKUrFACDzw80D7xHvJWYpGhAe/ye8WtCxbemoyCN\r\nbi8s0p9F9W3YgjkUbdDK6XEZn7x4Lb2cDC5qCCh5czkhO3kGhGA9ma9rzs+m\r\nKvdC9mJ5OJEScHbBpfBxjRphGXN59WECop8t/rWPeMWE/4pal9HfeCLtzEpy\r\nN4gucBlYT8tGLuyHa+uo1nKdwZS5Bm6q5qG2BELwuD1rCGmFjx33XaTdkucL\r\nxKXZCJ2gbAKeJ/DjYYbDgKGkwe6ZjgWrD3RbloZ9AGThYPzjhX/wBh54zKmd\r\nJr2t+nJcwJJLBKyKSvkNBajeKmNdM69qj8UBnexY5t+R8SR5JH037jFBIdUS\r\nvM17HiIGz1dcBPxK6tWLl8f0fcLUWy34cniN6VjmsPnhEciJdWy3W287zdpO\r\n1lbIOam9ZqcfHcO2Cho8VLTOglJ32Ka5EwtKXI4iAA+2RylIpdbualkQ7LAo\r\nRlG9lADAjLjwgxuLWhKrEALzZDt+rc3mRWU=\r\n=Tf5N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20225517307","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20225517307"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20225517307"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20225517307_1654450248586_0.3488907999800417","host":"s3://npm-registry-packages"}},"0.0.0-dev-202255185818":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202255185818","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"97779a04a74af1572ce31f6854593dcdc2eafd44","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202255185818.tgz","fileCount":49,"integrity":"sha512-6TlOoxgq/Z/Dyl++PRaHkrroPeffsBa8T7gXr5MHCRSNR72MF+3eqXpv8Ss/B7HILFUcay+06u35t1zXZ/dxkg==","signatures":[{"sig":"MEUCIQDSDywRDX5f7pbU/oTj/fI7GACvm/CmbTsMZWceuwOZHAIgKQdfO0yzWgb/RP7Om491Qc5bM/imWkjoEVi8Wfoeji4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinPznACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO2w//brH/OXGR2A2svI8ISPl6iPeOQbRJRZmQ9boDY7SlLEZeD9Dn\r\n/Ils/ZY3FCmsLd+p4krgFD3vDDHzwygioRdDvNFd2IH0jn7sjgLjlRg/nwwt\r\nAaPIv+C60oepZkuUWx0bHUEKzwIfYs9+zqq6LaEEfqxpOq9yam5cbtoKUWFy\r\n6N7NpsiwfueU5LYUiWMwLh3fUPhCqB5tHsl1lGmihkCWSvYqzRY6EJyJvvWF\r\nHgywIZrgo12iKll+9K2tUAW+uOd9nAkzypOpNvpokTSwKe4wvT7pDd3v6u7l\r\nzcLlqcsEaMPsLR1D/kRJ0ktpeM52Tz8qFG5fOfuYU3AAYJpR+IDVTry7Puis\r\ns4vKSs1VlI+Mo/H8/2b2NWi5geidqBelhW02WaahW77YVkX/0zWsIyGiWqmP\r\nYku1TtmB37UJMOnLIcr/tnw6L2fQ3hz+kbyRKjwBSlf3d3RN52m4iucnTZPu\r\nV+hpy+mmlpBz2D5swZGw99i9MvCZV3AoqU9Erwr7FWMJD1fOo2uTMqDtavCY\r\nbTmuY4a0ZgB0wa555Q2bc90AbAWidrBWkSpgWzTmLcV1toSTdw632GgEYyuy\r\n43dQkdDfQaVDSI6vvd7epIC2t33I0Q1HW2eor7XaYQArpMzlR0kD5U9eYSQu\r\nOHQrutzzRBEsqNwUveCb4fqwvDB0xQyREoU=\r\n=+tyU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202255185818","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202255185818"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202255185818"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202255185818_1654455527381_0.7380164488594221","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022551939":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022551939","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d1d7ebc7d950515ff9dfc39d16be3616136ae438","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022551939.tgz","fileCount":49,"integrity":"sha512-yn9yhcCdJfx0o9tZ+uwat9TKTmLvNyv+U7RZnarcGiaUJJDxAsEMEAjx7mwiX8FGpRlxLBbi8rYnMMnWQhR/hg==","signatures":[{"sig":"MEYCIQCDpRAnTawjQd2Mu3ZvDqB7SUpzXVQ9KYi22ln6rr1jOQIhAInb2k6W7Oah5bQMlBpSon3XYq3TOIZ2NcFF3eqFFjNf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinP4LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRfw/9HM91p+bU0I/phahAudXKmUBXWywcEx3V/cpScRqZerChBoHq\r\nXj0FK3h4lVAhknCQ8lJXacouKUJr2pxDSgpIUqxK8UL1QzLPSdtaUSqFx4pt\r\nbbSBOTTUwtfMmB3b4OPl/eEDT/yFJ9YTZu8pfGb2vEBmRBUZUlfq94JB0KbG\r\nfyo0rPI8rThcOz77Gz9v4pS0zKRIN2NxUQP21M5tw+tAZT5I5feF+dvJizr1\r\no2wUj2MCwiot0HeX9V3bZG4SzlOe790L8+Pm5dLhhT1HD49i9znuBuE0nacf\r\nSHsZPYAi8fGMJTyqDb7MKxRv6fJb3pJ7oPKLrn9FZ1vhbaqdMZ7FHUH1BWi/\r\ntszlp0lVprZVeZhfO2R/BMy8alG1J2GRl0tUCAlFle192FJmqHsv3VAUpNOT\r\nMdCAlGh5eArC2AmjbTsIdt/GcwTXZxyfsSZxdBTZKkjTJmSMJh4bP59Vy7xX\r\noGmnStOhbetJSGQnV8d28jdGhGPhDMY30TRKw7dLVcoI9+ZrwhkWa2ZoOMN8\r\nD6vJ4RWzhJOJB3apkxRJj1Pbp4SdOlBghP4O2zk9unbXdrPlo6Ho8Rt0peP3\r\nEhM5XPdqlCtCWUvXF7wYlwf/FtazESiGQV3CFaG7d7HVb4oBQZrW72aIf+dd\r\nixxop1TUze1CX/Bpj81ilF1z6uorGbdiHVw=\r\n=yALA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022551939","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022551939"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022551939"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022551939_1654455819552_0.27377667833121344","host":"s3://npm-registry-packages"}},"0.0.0-dev-202256151938":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202256151938","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4c816a9850b78d3fc5cd2a34703d0829dde13618","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202256151938.tgz","fileCount":49,"integrity":"sha512-wWSVi71MfGwZ5EkYnDOUzCmN8VaDrwKrS/JBCE7d0p8tUu8NprvLs2XrNOzrMSdTo6U/u+mA/KMJJQutToys5A==","signatures":[{"sig":"MEYCIQCdk1SfeUsa6KIU9+WGePYop4MvYer/YoS7HYbigFf2iAIhAOkuWPlJZ/Q1vMFvw7MXh3YLvMq+uM0drqY8/SXVBPX5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinhspACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmociw/+PtsQuT2LuTsXNK9NBg3RJy1oiRF7uIAemnbkBwKcVCxyZ7gY\r\nroCjei0YY5w+OkHrKmQOkWe9o5XQW0EOdeIyg36/YVMqDfyjKlfH8aeyuX2t\r\nqkvilgLACW9uszdaIqTVRbQftff3XZE2cBTZM+jzyxO+QLeOExCwPHW0Nh2s\r\n9VtqCYcpg0KBtn+sq+38q9RPYFerZJDTb8E41Q+TQycXalNNObOf83F1Xrmo\r\n2/sjfnmEMjzNMldAngd0HyMkmt2fvatCwPkgkILoP0CA9FyeDaVP26NPwKfH\r\n5wgKLVh7R/NnneqzFGu0AImWCAnKsoBpb1vSv4Zh/LtfOOfEuuizZoJwcmLE\r\nO/E3jteFGtbnDt7ixjDBpFoDHh/96pgH8bPWxBnT2y8ltIEGkivT/m5YTOQl\r\nVL7te6zzJpbTL61/UWHsFFX38zLL7glMNk5HlUjbBctrTHSUsLxXzzNMDtmL\r\neGbDgPIv74Wz08+HB+D3q7Gh/RZsZK6Jz1xcjaTuSnYSTGb0UD2jQeYv/mKX\r\nNP7rbcy34duokxvbZ3XgkLwz+NMHfHdFaQWDQPXRh/gD1AcpTI+7Ul4by5jA\r\n4uSXPNu23TZ6SJzbp6uv5ApOcl8JqcrAeRM6cJSYerwQxSQR9PDz3+ad8KId\r\nr5bY+aezDhXAqLAmTYzWP/d+i+PWD7aoi50=\r\n=MxNB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202256151938","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202256151938"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202256151938"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202256151938_1654528809726_0.4621533876785484","host":"s3://npm-registry-packages"}},"0.0.0-dev-202256153840":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202256153840","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2df7b58adb638cf466cd2e47e1abe8fec942cdb5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202256153840.tgz","fileCount":49,"integrity":"sha512-N5HKB+hRPjUjiSA15qF4rwAl6kXPe4EeAOYmGrm66p5SxvV90mh3LBWmAVx5yQweVmvI48ejuLW6HzcjFaM2eA==","signatures":[{"sig":"MEUCIAaRUFhF+x9RLcuVRjAL3djx0PRX/l5QnPDWztWK27bxAiEAvXEYXEs/K9jSy2qfTRGx6iy9oup1XQYZy/dP+hiasNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinh+zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcoRAAh4JGFNjxGPmRwNv+Ut7PmwByFR9fA14YYHmSfaji306+eQsy\r\n+MK5HNBHiYFszoARiXPCzxkZn5lKmW99uq1ExEytoGfHvvaaq1JB78hbRHaY\r\nuyISysg+wIMHbpr2F+vkKMDiWVW/aQA1UR83nN5fYE+IdCuNH1MZmbHCaMHV\r\n/608v1A407c5mJqCzu3UItkG1l42PouC2V1/zcyVEt/aW34btz9Z7A/RL1j6\r\nim7VmTDuLy6j5pdyRG+9Ih0DHgibJ+WcG7oniRh8yO3ccarRYOfy3BqNDryX\r\nty5qjZ49nbP9O8HqChCHl9hHFSq0uAbUpvrTeKYdVgsIPXHoGQbZtXgjBDxn\r\nEJQ9rvGy5o/y8u82Yi1F+tEpV6ViCzz7uQV98EzMAhuUZ9OFkUg/RCl92XPv\r\nwqg4nKJzOHE9CMprXMSBsPd81VKj9U4+XehDqIFT/rltDbTpxOQP5xAhGe5f\r\n947SfIjBZsMEqZfLWYLFBrx2S7TNbYrIsEMp53Sap7bnh4Ersa1gjrYdpjS5\r\nGGOw5FIJgj9ooQnpAiRW0PXeydNd990nEQySbWZVPHjLwS9X1jp2MGL5KF9A\r\n9J/2NLGbRQR6I30zjNGNcaaqDDCsAEkU0+zm7MqLyWJNyT1vAfkHBqT4lo8q\r\nSq0ho08vKHBgFjdjQpa006AUTEugVITfw5E=\r\n=FH8w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202256153840","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202256153840"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202256153840"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202256153840_1654529971754_0.04001478183311846","host":"s3://npm-registry-packages"}},"0.0.0-dev-20225619634":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20225619634","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ffc01f5485dc1aefbdb36a14015724952234d1c9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20225619634.tgz","fileCount":49,"integrity":"sha512-1bzj+r7G6jxnTUtTyU6rBTe3lx/gvKXAE7RgPiNLc+ZQ4jyqwWNKyjnTOseV+8bJPCPnbVLosAH0G951gnLzEQ==","signatures":[{"sig":"MEQCIAea9e9tK8Ud+jNxTYFSyH1ndnA49//1nW88PWa5Z0kdAiBahLEL76WAOsep8AIfphUKOwN1QcR77dqiqVZIXtu90A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinlBXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrxhAAgXDAF0vSiFfkO8xw78TVKjAl57L4u7N+BKTUZFu0gGgc5+Yg\r\np5KPKY9uURjQPA3l5ew0jxBp1QAKYJ+n1Xp6unRk4yEBsRVNshH5Td5iD+jT\r\nxK5Cwr1tUDWxuJXVXMKfL0+KEUgPkXmmad5pneZeP0D4uglt5AxmNi+Y7Af/\r\nq86iS+mmepQTxHOon6GDJ55rHnQuWQ/GK1uMdspb4iVlM1m9B266jCcRXgPL\r\n/fC2YACvi06/m1qYxEaud98VZy+fX2B6lzPvIIN8zw7fAzuuCHMmrdMF/iQ7\r\nyDD7kzFhE7VBUMXz01ggqMHtCqS3ubP1qpx0Dd3CT8RqFqT53K7JAbrfkIsZ\r\nBnUrQc3pdCg5ucnlMO2UadN+LDQn/Ndw8T6dPqMRpfaJSvGQZLXz2ml/5MXW\r\nVw/ilYITal6fsOtKMR/DMU3SUo6NVjIW/Rq/wZ4Uc9vFjWn2KQ5bIHx6tmOB\r\nuJuPmDlWPCjJUYMUrGu0sL4oQ2nMf53/iL8aRlRs12PwvZolODpBhijzMP8i\r\nPA1JMXrtATSP1Vc9qYs1px32rDUshk4z/sVbOHsQjOeX6wFtZQJEFlqU7gfx\r\nfKj2j9WN8eUbenQtAkPwDZ6NywqdyIDQFp4dZ8hHvTpHUbiheZ2NAwrfZwuy\r\nMciA69usOdPp80pEVeVDdajnvNTEDVKsiRo=\r\n=xhM9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20225619634","@chakra-ui/utils":"2.0.1","@chakra-ui/react-utils":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-20225619634"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-20225619634"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20225619634_1654542423081_0.011390457755935834","host":"s3://npm-registry-packages"}},"0.0.0-dev-202256192154":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202256192154","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8254e9f6f2f5660ee8328896b09cc6378beb5df7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202256192154.tgz","fileCount":49,"integrity":"sha512-2zOMUBo/GJm28dDd+k2VD+AejQcM4M+oCvdQbono5ck/H6vTKEkN1dRWefrqqYRkSrFe9mi8DeKPjJOHuTHFDA==","signatures":[{"sig":"MEQCIE+Lu0FiqRHVX6pOejQrjtWU30bJ4ezTEVriQSui6bsPAiAN6TOuiLcGBDFPr9MuZLAdcwxNg+K1HaMimicQhqud5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinlP4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkBg//cjpHtB5xNbIDUNx8DBoyR4gPoSR3IrUKqN/0bQ8lymtnxcqm\r\nt1n956cnz4hAwWprU2jOd6lY/qkUxeVp72WCvDp/mq96ifK/xTlNXlr1oNLz\r\nDQpaJEffkJuuJQvuOs2X+AgmfNwcPJ4zz4WEfOM8C0riWewUOf9tj1zM5Qv7\r\nzRIO3MfhSnM10K1nUTjBHAK3URHxPa6VVJ0fsrQiVuZfrqUBpFK6cKiIyvPe\r\nJMAHb1Yguo+BTPFGGEI+elWXTp/PXf7UqXQyBjesshx+hpQMqWFDtjQWRw1b\r\n/dKddRBKAuxSUmNh4yq4b5zTLzepEe6l/k0I5Jx/xjGNSsReGfBJz6qKQJOq\r\nXeG80eATqEvZIf6hdN7lyqwvpFuIUaKHVOEVNL6/1JReyC0T+WA9dZoXunOb\r\ny67+K5oTPIJ8HdHjJoKa+zvNmIljMOOoqD+OzzIo451/KP77KbervPGxqpVk\r\nqtBRV0WnmyaJebgahvTlH7FC9lFSBEHKI/5dmAcbaE+HR4YYELYIjehZaAfp\r\nwvkkkMHIreY+e8dV4WpMpMkpEE1fCGxfoySSHiXmzdwMSetWZdGd9DaNEhFM\r\nHPhUg0nFEi/AC9gtCVXC0gkTrldnbgOevZDWJWsEK+22pbVQ0fPMpV9k0tu/\r\nWNukLcv0GjOjhqF/rJsSyUN3qzD21YOWOao=\r\n=J6ff\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202256192154","@chakra-ui/utils":"0.0.0-dev-202256192154","@chakra-ui/react-utils":"0.0.0-dev-202256192154"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202256192154"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202256192154"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202256192154_1654543352576_0.9450610981044836","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@chakra-ui/layout","version":"2.0.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"556ab483f01e33efd4bf4a7a2105ea7d272b4c05","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.2.tgz","fileCount":49,"integrity":"sha512-iElUGxj8YmVGcaCQlQovJJC4APHMh5vwlZU37IC6W3FdJzv+orVhzbuB98tuzfWHxjKQZeGhcz7+npIkN87D5w==","signatures":[{"sig":"MEQCIB5jDylpVZWFtD72utU7ms6bTWzfBrashG9bLvPATp8lAiA3NexxTlPeI0lKRx2BKwFLAk+F57txPsSqUvH/bXUIPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinmZ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo7A//W6NnGruiGTWzB1vqBldihuGUnH0tFZKDfg2BIkAGgwy10Knd\r\nyWqYaKsmWQ6Yu/lSQfJbfBWhCjrhh58ssf4U50/y1hjO7hgyJBV8Z44M4EOl\r\nLOU06Zt54wGCZ4cjQYUJXw/VX4ziicpRwkWLBCApL2NCH7JeH2LBW6zkUUV0\r\nmt/uPvzZ+cUdBavIvR6Q28dAsVye8yLY86tBG0wpNt+iwZsko+lwIRR4lBmt\r\nn1wL4bGxFTOY5auiPoYUPoolFQj7OlLouaSU+REtTfHZlx7TIBgHao+inDKS\r\nXz0Oh3pCUtfQus7mtHZuPOY/UMSMQAE75PBAul9lTdempqoXeqRDgTfl9vXQ\r\neOReeCuPl5IKup4KJzOUCHc8O9mJTb17nqvUAnAzOYisi1FkoUxvYd1wdqn9\r\nEk/Scz/UU2zkLG4Vu1Fke5mjKreXT72n5yEI6aHBLyM9YO9e3HNFaGboIxJ+\r\n7LhE8d0Oj6ZUKT6OXi1SuGbBP2rEwX/p8lnVTceNYqCSJGtCZUVjbRD1OqFG\r\npgC/CAQTXbivdJkkRcxEIkTRZg94r3+uh3e6hodPOyq1ykcURrBNHj9eqOxg\r\nsrWpFyyifZ6DKY+8U99L/95dsQzgQnGFZNctHBABMeQSxMT6vbGf7FqqBUBJ\r\nbtV3DtNJWjEqCqWvLWaesQ4P9GWu0ucl8P0=\r\n=78LE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"3.0.2","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.1.2"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.2_1654548094107_0.4997109954637833","host":"s3://npm-registry-packages"}},"0.0.0-dev-202257113227":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202257113227","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b879372efa3977cd94b01732db1b5d0b32d9a5b3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202257113227.tgz","fileCount":49,"integrity":"sha512-XXL7QtGMDcgLQ4f4pVe3EtFb5ajn2qm5k0qDe0u261nBrFIUXwWc01Nwo3lqbtAiQ6TUKLZkWIKeTn2VOWSPYA==","signatures":[{"sig":"MEYCIQCgLlBE7lfJrZVZH2FDC8Iq63fE3mGiFoqCHd8Iet00+gIhAP64JpzDFH/BYCOP3+LedoCa7uq+d0PPNAyhiRC7npTr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinzdnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6WA//eXZ8kMJgHm4baFuY5VXj20OS0chiOD+w7tFGu5fLpbcPyztl\r\nF0PlTIOnOM13Eiy2LH4rdQ78maCyN/L1hq6s/lBfbKUic50OOamdDd2X2Gq6\r\nfI/l485zSQUQop1ZdtKuZ+8+IdlEEUBHPOvy7/CbpMpa9tyIbXWjnFW9T6Km\r\ns1VhxUSV7E2ER+Xfb7Sa58hD1QJ6uRYeF3BY8F6Nk9J42ixIhBrwJ6HOBvvz\r\nxPx4Z4d7kqxTmGC/+WYRxKrmHIk3c2RCp6uLni2vgoEyIbggajeJEcz57mWs\r\nnJQbQ5UZBHAs4DswLiKcTOTSF0BvMUFOQ0K5gt+uzJx3YSPxL+nzze6BDOG4\r\n8He7+E5wCe0GI6UPB/RGBPoJvhVub6MHd6jvSDj+GZqr3RwKbmXbGYcaDbx5\r\nMSzoW0MdTTdDWZgmGUwETMKM5d3DLMt7Ll72ZoChpBIJyTwW0YAddO811+3P\r\nj3gediUd/bH+Y5cdkNA/QtmgNU0IrRmRWAAScjwr6/xXtItY6VL5aJN9R+uc\r\nS08JXpnHH7XH3nCL1BMsI2Obe9fGpgx3FbyzyrhoueUH7cDIZHCjMl1zPTQS\r\nkIpx83QiCxEAvFLlQMs0bCyjK2gbDjivMFNu7MZS1JAMF9p7y73cTYLY60cq\r\nOh7zV08TI+DsYLZ8dXxZ61gMvamGssYka4E=\r\n=wHyJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202257113227","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202257113227"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202257113227"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202257113227_1654601575459_0.21130564816400477","host":"s3://npm-registry-packages"}},"0.0.0-dev-202257113310":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202257113310","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"39d871fe66fa8fd9e713d119eba9e33cb0df34f3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202257113310.tgz","fileCount":49,"integrity":"sha512-PfECMIoh09vIIBd4WjxBaYP20TjM6Hw0T1/v+ueTAPark05ZkTe6KX/yHvRKOmGnde+i9kn8RShaVEpmln1/fA==","signatures":[{"sig":"MEUCIQDmvdOSnbW5dEdFaxnVQ89Fq5yPqI7rItR4P5aLIU1umAIgRyMNzuykNTkFR1+8MqMDz45s/VfoFo9MhCi7b1mvuow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinzeQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqlw//TGD/DnEkn1vE5SAK7u0Yf2y18P9uZ8vWCzAJ/h10yKoEtfgT\r\njC59FLlKCkggSaGQxciwsf/UmQdbDqpLAUq5c5ClJ7f2ArKaiVhqR1eaEwiq\r\nU5ubqMDVCg4D4utYZC28KWoe6w3B9FPYbFoAHXDjnsVe3YouhxAkxCPFB7Xa\r\nYCWVTUgc3eywqlEnUKAduZlzUAqVBOCoh+Cza4z289Veo+FAeW/dJfD9ysXA\r\n7mpC+tR/BBs1zASLKaHc74VML/RR/1QlqcHSKAKoBSMY7TCrT/HX0OtA7Zxf\r\nDvIaH8+mbhAdYf4IWs0veK2Zv4zzbXB9Tl6UXTzSn/CM4G6z0pQhRztgzyn1\r\ne+UZt3dNSbJpFa+ibrdGMISJhG4Jwyl62rJLiVS2Iwww7cMgxVbcklI+rJaf\r\nLc6B74wLubdAdN/pbav1Az3rVDwAZhZBaKMPG/9BrewuLz25Xrz/OHUOpfCB\r\nKkmGWsW0rbLHuvSDIipo2nMcuu8hmUBZN4AEvENg98RtKJZx7/1Pzaai/0+/\r\n86sbCUhz7UUo43YkxrM9m/V2S4TQYuF4KUf0q4aV6LzZIBpITunhrAQ1Lgpk\r\nz2/St/5RP/tCy/2uNM7vrRGCFWrtJNrWm7S0OoiMkR2AxZeDc4hlj4kU9SqF\r\nTfOBN5Z0bnBOInTP8aZNmHBW2hbmCqUunkM=\r\n=AUkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202257113310","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202257113310"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202257113310"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202257113310_1654601616527_0.37897180475951964","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022587541":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022587541","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7044d28d722985ec55c6ddb1f65709fb1d4fdcc1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022587541.tgz","fileCount":49,"integrity":"sha512-Skh5ZbFdxBv9aAKD2WoDBZVJsY3BLZsJKm5XL+lkiDTqGpv8yQ7j9YpqWRxuYHCeJAH1tu/8xLh+rfilNX4UCA==","signatures":[{"sig":"MEYCIQCwyRynBeL7FL8+sW3q7lyUuISdt40POPCTjg7kmOEEUQIhAJjRnf32cTU7+aj+dPMIoMKfzska1D4GMT7WweeDxc6P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioEpmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOIQ//SvtXPZZtPzhJn2L37NSmLsNYLfNbv63Qf7SNEXea21q1MYuV\r\nzoBA3RTGkx1BkJ9mWhBOEcqSa+DEtncQuu2gS95T40eEQxdJyBGBA6+d5K5P\r\nYasvn5SRnCQ5NZnvA0tzxHKuv+2qm6gcJxLRyWqkGNtXZe+2NMQajNfaKT5e\r\nWlqO+xJz+9DHALhjQkMhUjdj0QRRvQa/uyg1fjfkXxBhnI65d927bv4r0aSb\r\nOjjmribpvZQqBq/ITqPBA0EL55F8JQlocrSfTm824keDNpgiGJzJrx09+IP6\r\nYnm+Xg/scn+cIXgRlOix2GPQgab2QXbrIDk2v6dh+HgHYTh/o+kIENt1VdeV\r\nCdccKK64TXGARr1TvYLRawh7vwsTb4zb3Jt3W8MV3FAIB+P9CoiJsC37i4yv\r\nDXWEpbcnNv31uqO2gbAvbELLQqF3P609ciUEn2p4PyvPkeLiAMnu70g+CCsR\r\nX9ux7KKckAgx5Ih6nfHyb2EFRGg+mkkJEoeFw8hj1DwgC3GvP9EXlvQd+rtU\r\nY/a1RfacgLOS3BYwcEFSk0TftZs8gbYT1aFckEo4T0omhl8LoDYXAApBpiYz\r\nFRrtjJcETOOSa2ajOlAwOa4RuHGPMBEQHDyp85LCVwRWbZ9y1nPIOwJQyVru\r\nhuB8Fv1KXkWrsApaMVQKjuEPKO5hZFzhpyg=\r\n=b5ra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.5.5","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022587541","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022587541"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022587541"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022587541_1654671974452_0.40794077163258247","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022511155212":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022511155212","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"060a7cac29605cd3b891b6a6448323f72e9c4cc8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022511155212.tgz","fileCount":49,"integrity":"sha512-ZwGAzbYequOnaCFac0/WlwDH+oXVBDmzzATHYsDExLkylF62/cS9ODd3f5dSNj0S7rbEVzB7fraJA69u8d1gAw==","signatures":[{"sig":"MEQCIFw16qselbtEHlpzV8ASvuoTfNfiYgJgjQ1DzfblA+zuAiBFoPYUF35AOor9g17Tc5zcIiAk5wMPME68Waw/ll83Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipLpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovDw/8DPA0zhKVIliM1IEO2wP4t28cQNmVCpm+NYkG3+77vxjeOvgP\r\nk0A7ZqYuBzWbdoRfckBML7w3AEtTFlsi0IlXve0kh8bssAoGdTijtfH80KCd\r\nEEODtg7yoGcqSyrADP0CnQoO4czVRV7N4rw7bKE/CeJOg3sERd7pH7hzADjl\r\nckGt28p52XON8hs4aYA/CXYQKFwY1hEVg91PUzCNb6+XDbNcv+Bnr1jFz8R1\r\nbUo5rdM9Nd51/xRX/rODcmen1I3miQejheFfzSSjLCHF1bhrQVrkI902GT6+\r\n6KSZIs5vxNZ8i3p8C+5a36WMxakVNgEb8sz4qF0piQRudHLUWjDBBhnMhmtS\r\nrTN/DayOHL/UMKPBROUTCqIHdeCVoJorZ5DRPAjQcoBVhNBKpj3e/OkExYNw\r\nl1rwsNJx4S0bSU6UUWmoDj196CiMycrJiXfNUvNQxRUpcbn+GvnZoEsB/r5F\r\nkywzqY8nfR4u4qMNsh1xLoFtB0YI9rgWPILIhVnNKMdxaOXR/qYdPedZ5+fP\r\n208FUWhhHuOtNe8YtoYhceDh5fqSdxuZD/2BHl6ZmmZ9z8Ber1N6OmzwSsnj\r\ny+ZgUIOy4QVm9LZ7236TBZgaQVncT/4rNgRS72VakX2/S7epEhIc2ExpzxXe\r\n5B2r3c2Ea4kjANgZmsFN5KaoUV+SLtXEgxM=\r\n=6Bci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022511155212","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022511155212"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022511155212"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022511155212_1654962765041_0.8437392960716481","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022511155356":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022511155356","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8886dc7ee3ce989de17cf732cfccea3115e3d107","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022511155356.tgz","fileCount":49,"integrity":"sha512-3BPVNVoF8vZ0Wvj+Al0Poid66oYrvhxwVC854zIZz21MJvgMkpwA5tfEZXetFLCKcfINuOldXrb8AKKyh5Gz2Q==","signatures":[{"sig":"MEYCIQCHZPtAiqe5kaWttJS36iCIHbwfJQv6fDwI1/f8L5zcBQIhAO221eBw5bU5ZoWE32DTcgTF2i/3rp4euQUPVtFg4C2A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipLq1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZug/+K4uOzMdD1GARZz+OE4r50sLv/1m0fSTNdsEecJz0SywMoQ8O\r\nSvxnO9fPHcZgixHTNk5dN6NuEDjCtjyqixD4jJdUMCTKCqYiAk++vgO7QUm3\r\ntxaaOy1f8Gn1nrcUM0crVU6UmkCTPnsTg0L8K8xRDkTsUts5U/7gcHPanSqG\r\n4VSEan+arbS7FVby9e485izCzC4y0TKZDSMlJaFByw7fpCOs5G6dL+jvbmAO\r\nwTGtX32/j8iubRgU4+XT/wdeJHjSp3+r369/sZvfnQni/X6CRYwPmh0NR+zL\r\nouwJ2BMXwCC3BHYCCg8OfUjGz+a8lp3XIOVNeFPnYQakkkVBjWEnCKQrmp5x\r\nnGiV4qAct8cN2grMoEmhMK/Hta5/n1BE7g9lMPOxJcwhoER3pztphQwvlA+s\r\nDxZO6LyMMeiQ56Az/VQjFoHTXnTIPSkyR9IwqX+Yv4anWqUhPzQxoyUSZ0uV\r\nqsHGU7pPwjaN/tjNz9iMkZsMNB3U7RFU9UdiKRrfSCa6pLkXDO2tdJFfH4ec\r\nLiQJdzsSOWeOyr4Wiq1MONoF0IhpLp3Zs+mBCFEhrbyZ0E3WgQoJdw2y14v7\r\nUJZQEBlEEh0/CWo+hoc0vDyqzYnZBP4SlG0gAuX/Lea5FjqLIOybWVZn4Oc/\r\nmwJAFg9njHyXF2yS4NiUbpuBrD6tbvDhD3o=\r\n=SlF9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022511155356","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022511155356"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022511155356"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022511155356_1654962869334_0.6394360316815517","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022511155428":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022511155428","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7d21d354ca17d35d3dd095d61a38834c477abca6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022511155428.tgz","fileCount":49,"integrity":"sha512-TBvtjDqncBtp9qOgi06j8JyR4xxR0xmaZBAvyF7BHnAKAq5afQfuu9i8LEXeSOHJv6bDHx1z06s0hWfDqR64fA==","signatures":[{"sig":"MEYCIQCSRxh6A7GxX1HALGXeDjQI+7HGtuJhbeLIw42Wo54guwIhANH1JgWxkVM0zBQMfLHOVctHG+FPIwQj+Q7xPXMhMfpN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipLraACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwBw//VnouTqrzr1hGH18gZMPnijCGtjwiSnTDJjX16lBmb0uOE2YR\r\nqN4BV9tfEPN0tF079OzAGmtve0ckbQYXHc9XCKH5O9VyGeNXMJphX7GSiz9I\r\nSQQOUf2H6L57j4v5CH6gTSsE4/pf6f0QKctDfxT0khilwvqaeOerOr7TGmG1\r\nWqZZQ1UQfklV8HESZU7yem/O4V/Ik0Ql5qZ9jS3HEJjXA6p9IW6R4LajbPsZ\r\n4WljF/CoQpd9zHDefKbluEN1PzoBWN0DSqz1LtuGeaxKE5nh2L23Gpt70jYT\r\nm/ImgtRSnyDdI9txdAQ7dc+opSP6o2paCZ4p/u2EUQPcD+O5N8e9QBxlLpGC\r\nXXMJqtZYLuznoQmul2J97vF9CxOwu8F0kzgatm1F//Auywf0eQ3Bqu/dL3ic\r\nl48YEMcJo5qPAGLF7jDK0cAhvAqnqpb9jEqSh/xTAybr50+S+lUwzTZUzO8l\r\nWTTopJ+Zb6nhhoeY4sABsszpP1x/EfapxKthnBiXx+Jvom97Bjr8bJrt81eX\r\n2IJDcz3bCLRFOUmcIsV5PXGCdMB2cFEb+C68d410ko+5A+oWaP/D5cMnsLwE\r\nsROTcGvt/VwW27aYfuUYhS/X3+6haigHhXbNIdHtZ3OHF6KRjob1NdzuItDo\r\n4JwtqAq6P1gJdnnOtKOL/z1jwn70FlEiUsg=\r\n=GKJU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022511155428","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022511155428"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022511155428"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022511155428_1654962906003_0.768024426198153","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022513181240":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022513181240","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b054034e1964a559eec71576616126ad1ba3debe","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022513181240.tgz","fileCount":49,"integrity":"sha512-KXuVRI+Z6foXeys+M5Du6BICM76DrrenCsyJJYtGntlRAfhC22QVARBWm+sC+tOLJ3dye4leZg4qhMbozPyqsQ==","signatures":[{"sig":"MEYCIQDryDiRqecswyGrSnJ7M6stnQQsgoV4bbvm3JxU/jpqEwIhAPx6wBtZDDoFP+/xInfmEhJoyGQe/sCpGRh6IWtljezc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip341ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5SRAAhEkSdyrZHSFzq/TwdvXK7p7V7dfvAxHwGpxdh+KFOY5sOthJ\r\nB/PrCQjdbIC3QTyRNabP+/CmhbwSmWrnlo/aexxYFtSP9wrkogXE53an3Q0k\r\ngu2bHiXHyqlgfN2Smsu6Yr8VWgVLk6FV+bvDfewDaRuX4PwHSu98PblF1AIE\r\nYMlF2uDw4afYMuZA2DWCESdLFR/VsdlWD63TKBY7XpIxzKCMlaVrm/lmE5rt\r\nSEhDyfzDrevp3/WdXptNfDXTKyCif/GicQWJ07idktEkcHW1UnTncfFBH23C\r\nsI2MrSg3MRaV3PiyRbO7Hk9UfIovnY0RkFTNp9aS5MDMphcadNk+QnaH6cv4\r\nw4ljXsP8hYbb73Pa1OS0JZ3X309ReEVgVR/H6PFDVc7apyOh3Ktn1IJGawfP\r\nE4Te3ie3K28r5+xVDpNmMyu41DLksTAryPeYwGBHxNFx48W5IEa+PfGSDhxV\r\nxMWj7yOMV8Dt4cc9QTlcxjKn25xPEn00TdH/dRs8/gk7baOymCGq1NO6C2fd\r\nPTjS//06Wj1QRgikylEy4KbZXLyKAcEPYR/Bgva+s1p48Afp9fty9sRMlo4K\r\nppm0h0gY3OxTJlzu24CXyZEqtZYGzImCsOohV/uNyQ9SMaHLzRydGKZdmdU9\r\n/0nEVdGxVPyomZoyhtXBuwVz4Z504qgyUFg=\r\n=faZg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022513181240","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022513181240"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022513181240"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022513181240_1655143989585_0.5151632223723752","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022515163532":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022515163532","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8624dd5929041ce14bd7b1ba7180245d784ca193","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022515163532.tgz","fileCount":49,"integrity":"sha512-60iutI81K56NcbuuigDLG9nGmQwRu1bq+HZLDbGZd7qpFKFr9JMW0PeYqWeMLpkIsnKHlvSaKG0IwHFQTFs63Q==","signatures":[{"sig":"MEUCIQD1zYi5888XYofzxo3gjjAEOmnAh2r+JCpAevXOjO9DOgIgb6CAfg8zMbvS7VaCIb1eTbR2cFGYR59/UhPVrMwmNGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqgpyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogcQ//R19AT7wVtINbBUpmICW+V8l1RQjGKgcqtLTmGZKhYYeF/3wf\r\nMIzG129S7DrNBZbkxxDlvxsEAD0YjUteIY44nSq+6gsmUSUGCuqpu70rzUHr\r\npPR4hn8ESLMuSZsT0Gp5uECiaZ8sVMZDNMAhxPngspwYeAzNGj18wdOsGVcJ\r\n7NKCrc3RnJzRvOz6LduzeDbimwdmp2F5Lr2KlqQrGcNXiLQVp7R8HlZcKSWk\r\nw72pe11vJpIhyV1xCIjpNcTHCCLW8nKkpXVXiFQTyRq4NYZ7/qs0jtIayS8B\r\nfFn370RX4CzH4PYlR1u53VomVMYHiJ1+FDtFqJMQNUPkifFaE5UU94ceyHsq\r\nQSJXt49DMat6/Hdk2KBUP33z+dFbay3H3/bh5fUCWjrmgZs+7h+ZPaZZJ6SZ\r\n3vcacM+ZOlKKAJyaNJq0Ed9+GwLe7UUptbUNVIhqgzCwhDQk/YpmSxmdXN3v\r\nj1+evbhxp5dR/fh134dj3ghTb55supBoTX+Pj2g/gy+R+1xNXeecXJrVa8+2\r\nVZMNA2EtQ/ogQaGBY9V1vCi9+Kiqd8XMdLU/z0UBbksCrKRF4w0+wdjdg9Ey\r\nLydX7QUy13LPVWVERiOomi+U9tec+YyZynCWJk8Q95f7Fzki0NkkiHJhHYSQ\r\nMMfpzHsXVl1vL+C9rTPxyZrR6Dws+mTyA58=\r\n=qPWN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022515163532","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022515163532"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022515163532"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022515163532_1655310962674_0.7963408414761863","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022516122241":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022516122241","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2362ca9f67001591e8fd05a0bc53a79bd9341968","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022516122241.tgz","fileCount":49,"integrity":"sha512-YRUILcjQFN7PQ/EOsqgJh0EhCEBzt8YA1TK3egeErVupKk5a+kIJ4xtDrLj2756Vc3/FuAGwrbCU+/jgtBW3Fg==","signatures":[{"sig":"MEUCIQDiYEFux9S0fAiAZbbiHUfXNgYqdR5gPQk6nW3i4sT84gIgYpl21OrI6ioTzxYiVCedYDeXpXAIZkPub7rIWP/23Is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqyCyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVrBAAlmuaB1s0pF1Lu6e6hsCq0kGXCXGVixHYKSnaYw8+DhkFEd5P\r\nyjBnUE46ZB8+MIV9G7c4zG2m1Th8rzv7X/OnO+RnZWVOMb+955TeW0SwgSCh\r\nHZZo3t/m6GbVxNKYDHAEOMVJBCE+CpYIJdtIVgkK61yhQo93HLQ0eHXpy+E1\r\nNzQHxjWHaMVL9S68h4aZobbJKj4unwP6yHGoExlV1K8wCpc1FtfeRhlrAluE\r\nlKZU3LLFfPMI+SA+jNX016rF+yQUaeSEa14mNFZYwXH4QYviftYiwceGPCoI\r\nZsLGftEicuY4JyFXav0vRK9fdN0HP2ghJKxRLsLmgSCzGzntxkgWb+TtWdbN\r\nloBOQptZ7/GLFBAJQiDr4Px6TQ5vjp7P8EGPOvrGVAtr/RiGXWCxT5pWyYFh\r\n6IvNgYdc6rTA9/JVkMbcek6StLR1ZvqXlO8E0zorW03Toa/fda1XAqb6s+/j\r\nifsqeYSHSR40vkn4u6GFka63PfrqQni9gxQwTFQll/bKjIp8mblFDq06USMP\r\nC75Nf6JRRq5RnHQkJxAhkziYRrL28EPRRMpx4Q8Wxyh+C96YmBIw9OqheNCX\r\n/tIxkymiwcUr8SrfCeA2Op0OLz/8KVc4FQfjPFwrYFvSIOkGm/wXLC8iAKYv\r\not744E2jB42C1CMfhqOlWNtOhZpyeL2PJLM=\r\n=P9Ai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022516122241","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022516122241"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022516122241"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022516122241_1655382194136_0.9438437717815353","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022516151633":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022516151633","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b575c141b39a6854ae6886ea6e138ad10d6db8bf","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022516151633.tgz","fileCount":49,"integrity":"sha512-nyIZZWNMWwLAU/KtxyDzZ/l8d+U3+zK1zmw1zmQE3N4Wr+lE8BsMGMtW9dF/YCypGwNMbaXrnuigj93teF6thg==","signatures":[{"sig":"MEQCIA6abmnVK/dvu5B2AzCwfk+EGiyBfNg+lt3ZJF37cQYoAiAJmj+N+N6iyGakM+ta2Q1WSTu3oJuBQT0jklftgSLqqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq0lwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojGxAAilgQs0XrQ4m+xSELhijomORGRUmUprOfSIPbOeuhej/Qie5w\r\nrdl+H2Bj7Pkv4aAOSraNtKFvFAgtdjU5Ql11SOZBPswCNV34WWWC0MB7ixQ0\r\nVP7dq2DeaFNLFSGEPXPoAx+X+/c89xd/HQJdj/fACyCc8eqRM3RxZPWPUMJt\r\nw482d0p8Fn8qMIG3Y8CPQiGMeY16wfxvEpN8VVFoNQ8/gOjRJBfnP6xl5DZN\r\n+jtnmJuaGtJ8wYpOigQIfQkp4r32N5k/b+5NgCQOyPtSxPcy7IvHt2W+8vXN\r\nfsBryUv+zCW4/I/8Vo/dHIhlSrTh9p5w/hnOolnRsQp4fcA4lkOGkm99JfzD\r\nOzl4euGnxjMYqUywJhbmGJW4OE03B+KRb077B5s3vGswjwO2HaJ4k9ou+62B\r\n3ZPWipdMw3c2NOY7x+Mm8fD1vVf9gkKOQNrrc79q65iu/e5IPLL3jDjrKUmK\r\nL//S855nfBynNdymAkjbBX9uY9Nm+8kckGafqoEzelLDlLpfL0+kRhZnoV4f\r\nXlpiuUvcOdzXFhmqsveaVUNkZwx1n5NXga5206w31yxi+hndgMXqKmY2iSdC\r\n8jAjz50idu/tlElf5oyjENz9wVd7oXCtgZYYd8zqFHRIUlkyVZ51asf6O4BH\r\niufWvwuiUcUc4yh9EEfteTafNf3m3KlhDPs=\r\n=Apxt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022516151633","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022516151633"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022516151633"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022516151633_1655392623954_0.3151281133285191","host":"s3://npm-registry-packages"}},"0.0.0-dev-202251616831":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202251616831","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"55b2eb7f03dc38abbe7bda0747c1e62d603c5a17","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202251616831.tgz","fileCount":49,"integrity":"sha512-Rh3nIFLqQ7CnOA/i4IiCcZejkKmLTpi9Shyttqjr09g5PtF7AoKhcGse9soegly+FPYjPlsjUtg1YhaIoSW7/Q==","signatures":[{"sig":"MEUCIEL+nfJu3PbWKnYmIqfMGvZUUBL1RsFsVP6YbSHxoIdwAiEAjveufICVehLusCubm3VHjBsj90rgMwaF5j8Uu7rSLvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq1WkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKLg/7BTeoe65mkusaByKC3KyIt5ox2/Qjq76qL8r2IdPkNlwYYPMR\r\nmBrheA5ualEih4PDa20c29a0WtKzhfTWSqytaGEZAUNabphVb/7v0AtKhzRH\r\nxNy+Ra0BfITTkHcvhKXh2vJ3/btc0c8+SV3K1v7cEYnXfe8T0Jkr6eH7Yg0l\r\ns4DhrIGpStEeclhRbvtPOKWi/kMzFpw75L/GdWWFwNVitBXTZn/yEkkKGX6H\r\nLp2a2Q3ijDrb5E21dbJ2tGyb/lHvt8VzQJNoGAcAUpKm9HpFxrOL/8O+KVP2\r\nFEl8nv80nV1mHyNFXAjC8j8mlZ5zMlQSGxrntdT7IB5a/b7wKiZG2vPnHPp1\r\nikoAjxvblQWV0e34Uu2PB3zC1Yn+t87pvLBRUzzg8sHN6OL2GOAZL36NN1eO\r\np0GvdQkUKfhfR7zC0mS2CeYBSYEtQb+kB/e/Mp1Y40gktgfN04l9Iu4KUNbB\r\n7jFkgzYWpD5PdUIcbd6br6fWIWp0pxglcw031XI4IHAXwTYeI5JU3hfAEr5b\r\n3KTbx/OxoeVAt+CvncdgY/sL2VTxrGh8rvBqPYJWvJ/vmMvhlOVb5vPgpG/q\r\nyLm7kOZE7AO3M446PIUPpJI4lY9l5sf+9MzbVQ5zeD7RV0gefyYsNVdcOzS0\r\nG3oKNcnoK8+piFwB0mtPRnUQVyXB0PD4Ass=\r\n=0Ket\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202251616831","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202251616831"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202251616831"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202251616831_1655395748581_0.32850677760943414","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022518113258":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022518113258","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b3333e2255c4936345c9c7807aafe76129fd7455","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022518113258.tgz","fileCount":49,"integrity":"sha512-KejAaNU37RNJ0jVKOeYtcSaRmpAn0Bn6cNPZE/ClR8R9OlhBEvwjvryibVJ3nyb3S1ccgqoY5V00NapK+EWGhA==","signatures":[{"sig":"MEUCIQCu1bgL6vxbaPG64/ntFyifAwoRgk+QubwFMdh+1+eBaAIgJ+rk8wiJpUfW2JjlJE6HW+VkyUArb+/K8YOVR+2dfIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirbgLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoychAAksnIEuuFkLj9mDtCMcOTlMFXW/hJee+PZ3KAyAv6nzMmmutD\r\nN5D2CnRb2FZ8ma4sTE9BoR/IhByLgOVs/5m/tjp/wodfXlQFhW/UkrD0u8YY\r\ngQpsQlT6OV82y97CtrAPMtT+cqBdrF0KIJyHKVR00quOxx9U17yD9XDpxJDZ\r\nDYDalit1rPCkxx/ABpRTJ6QIVbpMQD4QSVmGk3IPJOJnkHoekPmMdYigCRDe\r\nxv+uuZzXLX/xXGhth+NJ6y0ehyB7P9emNr5VJqJdG0LkJam+gqh7j7IaMODz\r\n9/77S3vNAqcSzFFFggWccWTZ1Pzmn2Me+gYNThzBX+JpkgwlqutZeIaXxHkD\r\n+QioqP5ZCjgOYrATgStyBX6UqcBTl2vSB0Hn8f/PJBajKYLVf7iZmwYuYw/B\r\nOD5kHL7oB2IlLooeRVa/9M4bX5+sFvpYvM5T8Z24KS53QFd48i5X/mEQUxAX\r\nfCPcQAYNHL3gdLzu8K+diR4l2EBHAaX/72Gq8kYVm/ewundcGcG13itMBoTb\r\nQZdFAEUOzj5jxLRw3tlwsYwKMsr9pvQ+zBtAnNhsU4VKufZz+ym4Vw4iDYdf\r\nn2nQXT0DohBzSJENROaRGLKXP2EzVAYF2eAHTuXYrl9riSQ0600voryVdxQF\r\nV4Ap7xbI+XJbGGuAs39IvjmGMIysp2LRKH0=\r\n=Yr/a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022518113258","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022518113258"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022518113258"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022518113258_1655552010906_0.8027701553157764","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022520143145":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022520143145","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4567ead5db600c5ba3c5fb4d31b62ac5f94850ec","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022520143145.tgz","fileCount":49,"integrity":"sha512-iEy9F7cQCre3vaiwyl9iUe19KjGer+wMbx0Os0l7f7Hlj+Uedk6oZmK5XkcgXIR2p+XRG78igtPeKeCUM8/PoA==","signatures":[{"sig":"MEUCIADkirKiF3b4OPjsyH1eBvzwgRVEBKVOYSFL5LDtSdX8AiEA8xzAlAN7DQDl5GJZoq7TX5jsftqO1T1uF5BI11K8MXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisITvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXExAAjWcxjXim7UWg1s7ZvjGQFca60c74u+T+0FLwuPt5v+66hVd1\r\nJhNzTvybo71sZHcMh2YTPH0ZGPPit1f0G53Wrv+j1JpK05ZhflJV/onYrwn3\r\njmfFXqHiShJY2gaCPQjfvcDyvAiRSJyP0AJ+qhH3Oej12w/0EzEy592DGD00\r\n0iAixyC3kBApSnD/l/AhMVqsoF5n7ElDnnTH4sMAFIMAPUB96xBEMjcBFbA9\r\n5HRsylcgm9reUCWKMtfh2pAYnfD4CKhu/v0JaToIpkeGc/5H2ogV2Y77Pr2I\r\nekoAt+OU/0GYbM3QkwYdgg+lOKsx2jXH9DzVVoV+zaKjJoZUe5BYFdDO9SCv\r\n5KCIuVtg7W6zULzADowM48EeE9qvwANStOefmuMos8ZuLDkszmShiaV+HqWx\r\ndi0eImmS29rSnEbdXVMmMrs23kyB2V03BEUCmiepJ2OWRXEFaNiH3d2d0k8h\r\nWSxR5FSGl0nObPjC3XPKA7w3190Nkd71/DNxeaW9I8yWyvdlcXz/CJiv7oha\r\nz8UuEMShXbBAha4dUCdUqNHjTJuTM9l6xCSHIKDwgJVR7Z7hUyHizDcT3Rqv\r\neB4aa2hJrbfQTRuljondVGdzQbVD8vafotGkKE75sin6k6X3XZuyDtoD0A5x\r\noHGr/fNI1/LlSAI90HlTAccrSviMiHpH9LU=\r\n=CTyM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022520143145","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022520143145"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022520143145"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022520143145_1655735534809_0.21053034262698755","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022520163758":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022520163758","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6b38f883dc3fe76a2cb0d0c8b490bad4d0ccf351","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022520163758.tgz","fileCount":49,"integrity":"sha512-XllmKJ29+jr5d3vLcVDkyx5x5cIz5RGibl8lbJCjpyLnV8qMlDMTWXAPA2WfBFFH7GVwDove/oE5781l/mG18Q==","signatures":[{"sig":"MEUCIFKa835ACbHiGL3ASnNxx757oSLDh8s5xRsuo0hjfcX8AiEAyyFNOs2S2OzoRvgNaIFFcnnCWw0CBiJ63nJQVVweBwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisKKQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmragxAAh6TQQ+aJtKrxOPigKRwyhwPUsJ+sfmGeV/rxhxFM7qCawrvd\r\nvpopmwZevg4y9GBrF/XPZEKyutu24rKUj3y2yWy6VoDnHaKgGa+GYqdjG4Du\r\nOtf4sAeI41E6dJYlM3ue8jtxtaxw489iFuOf8MfnAdi2OlOOJv/OT0jR8SFP\r\ntemIi4WCp/2gkSHodlwvKjEGZAO17JEFlj6990tFTPL2+veSjSnlgEzqGkJT\r\nPWSSSRInHHYJ1vVxBYbTzjb8fIWOPulVtyCNNmlq/b6VPMyKc2Cluu+zcRQ8\r\nUino2N+pHVMqFHiGNuu8XQocJYMuDBe5POh8pO+THcyXmuXJKuZyAgPZ1PNQ\r\nEyXgIMkuQlhjWVu15+RUW99wWi9tadq4QVZ+xVAsOWkTttmFdhbDrFbzXh9T\r\nmQ+uMWzIpBQ3+0EMINCdYjD8YaNMAiF2njOsAcBtqCPPFlka2T5nnbY+Bvmi\r\n7GnIvAKECZtVrLn93qUXiJV5gvL+vzl+QCRiEOIefyrPwkNBZRMXYEEaH03c\r\nU2hje5eoy/AlVu2VaHOs+fCDqLP57lG9G6dcoO6sWuC2LAy/o/0KPFMD/HXo\r\ni+j/hDKWcLIYEffb1437vHALGyx7vPldRTHA7lFz//w1qQ1kEIagI8CpvjQS\r\ndx6UOyA8Cd/RBXBxndNCvHb3/FW+O6XPa4Q=\r\n=L3I5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022520163758","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022520163758"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022520163758"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022520163758_1655743119919_0.9915005716590408","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022520164715":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022520164715","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0889473629c1c510e5e00134b549fbd561801422","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022520164715.tgz","fileCount":49,"integrity":"sha512-ToECu7htlMcRqUMIwaWdeILtYPnfO+Av0VQ3wDUECcOx4LnQTCKJN4oiooZuFupIJQZylv38nJ4nuEibPoD6kA==","signatures":[{"sig":"MEQCICCawwTd56E+71aNYBq7C2U+prCjC8ZomzDVPONAdtP8AiBhgb5Klf1w5258PBy3VP7FWscBAszcHbFfdhnxWWIZ9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisKSyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZfQ/+I5f1rCBdeGyN0BOH2z1WIPl+e4H7CF8ahVwPF+oPVq0xQKXH\r\nQFqTMHYAYgRYUYnsAd95BDKm1pH1+2pRoycgn+kBMuj+QGxI0P09rz8V2TIS\r\nLearS8bNauw9NRQ1e3vLjIjHGFl3ivyN/D751CWW+XoPcdQ1qt2Nv5ns/fjI\r\nrTzYXWuyaBSi9LwBE/WhjwHyB+7Wa4bKRq73g/BF/unBoRWqCkkaikP+h1SA\r\nLQzEBSg39Y3FDdAOjdwGy+cRmnjIP+Z0E7s3h0HkyqBnA2iZoyolkfCfFEvr\r\nN6dTuDZcwtZDiMi87PzMTqFT3X0Taz2zOvqctRehblaeSE0f8tBu+Pq8uAb4\r\nMsq6eaRCiEafjpjjtsHZjIRkaJNtiCnLRvc12j2SyAucAC/4RChDFIFOLrlr\r\nW59PtfnnI9zQJWrPfidlL7LXiTbBnIJ2sCO04bU3bya8YohM9w/A6EGqbCzI\r\nJXJDYT1fx4eLFARJuw6X+KCrQwA1xTZRk9hMIj9s3N18bZ2TerwUWSFZEKm0\r\nalUvsSTjWvqPLIwvLhsvA82mjinuSbuOgJHDZc0pnpc2/OH95q812fin9yYh\r\nCgd+LDjTgv1hqoWY3YbeXMVYnFh1wSYrbF1SXbF9muV1RwBx0BJFFHuFZj0G\r\ni0Ojjf+5vyVScXfeB9+18v7l/SKOYvHYC5U=\r\n=1wlg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022520164715","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022520164715"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022520164715"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022520164715_1655743666565_0.022179177187614973","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022520164752":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022520164752","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"47bcaa5e468e01d5140d16adad7a3da3fe6fba23","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022520164752.tgz","fileCount":49,"integrity":"sha512-CFH8aXGYEISK2zJNmZRP3ET9K6gYVg4PKKHrCdpcaj0i4MV28TA/ybpklSfjySZeQFGE8LSXGlO2pgeFD68vrQ==","signatures":[{"sig":"MEUCIQC1To+KkQ0b+LKThHH02XKU2hpzvchKjwX3VRyLkyVcqQIgQW+QPwBXWL1s80JZSPxJJgcuR2wbrxhm/tQ/C0qkVFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisKTbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqthw/+JelEecqqUpOL+Eup3/AodAMIh5mixB9C9SKhouMaykngOFTB\r\nvBzfdezFbzFe0taxBKCXmWdjo9l6bYYjoAP1aX5Bo01Q0gx9XiNay5npVa2Z\r\no4DoZ3qViV+DzvOdDdUjn96frGVti4hI48ydfx/ehLlrmH7TkGjZ/MxOzITS\r\ny2XNW6rC0REgvWfBnifpxB7PtzVUjpz9wriiQLYfwvAtI4+eSgxm/3gMG8Hx\r\nnh5sWy5SMEwzqvx2CSWc8eXqV/3LGudV8chehtzePwYJG4dOYsMnXO13CMUF\r\nNtoj82zEtwMjfMjhGqTUuyhshZOmFSN+28aCtssH59dhDICrfdta6jgQuMZu\r\nwwcv7HR3eB+Pl/XYDzbZih5dx24OamYJCv6SY/HrhOaOb91kLR0marIcbGKX\r\nqwIIqhq1qSfc03QbXg1znG3wB+FIg2/CSrhh7VPqdkoYWpxBwE8/KIv5ndz+\r\nIh3APPnl9V1FKlaUmhy5nxa6J9QFzP9VWG0uKx0cSdGIXpz6V4dHItp5qYDS\r\n2bvbKeoSOUN4vUyDBYuYOyZhKq62+xf9cWK4pJzo4f8YHnotFERz7z/iTC8N\r\nrb2oZOUDQxB1nHDyCc9bBln0RzOQfepk48Tf3QPATKeBwzkpPvR/Lh0HZx5b\r\nY9l0wyDMQnIEYzli3KAOklkK+dnPnKMwJDE=\r\n=qnnU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022520164752","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022520164752"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022520164752"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022520164752_1655743706870_0.744144058940853","host":"s3://npm-registry-packages"}},"2.0.3":{"name":"@chakra-ui/layout","version":"2.0.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.0.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":"1f5bac24b1ef53357e740ea4bebb74bd2a46e0ee","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.0.3.tgz","fileCount":49,"integrity":"sha512-qjSLAkj9rAgE+T3afi5X+08z2xSwDbiAWlLkltcCdExrv8jD6zaC4fhuyZtEOgXlrgveisOsM17DarTalWMLSg==","signatures":[{"sig":"MEUCIQDsPKl7jbJGxtNeygRXGRS+Yrw2AMrfuIuw7e9Hw1VgygIgcDwYo/gNQ+j+ALz16jxTbR9hNZCVTJrsGWzdIAqCMDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisXesACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWSA/8DfKr7VPtPXdNQmgEeoxrbk0dOER3lufTaV8oAWDQXBwWaW42\r\n+7OtTNIe378ZbHARg1ajc1DvirtgQcE4bgodT2UHhVdFbiapd+YXxyhdFaYd\r\n9F3WD3LHWcFG2CjhO2AklX+RlRzTuzGudAxFtInnqXeaM0X9vIJw384GcFrt\r\n+jM+xkzjCS8BDwW6KSziwJ4NMPcxdAL3pp2Cna9wsxfWc3MDBWqZr8U+cMGE\r\nMe72/UpEdSNKBf5Xo7pGv2sqiaElxRpuxEl1HC0ZUxyWbG/BZw5iz5DW/MN8\r\nM9PGkbbo8HT4gAeThc3lPF9OTHnLMWmxlp9GcPbmtMWFBRJLvWCotoPJTJRP\r\npusNfnkq9whZLjfV8XpzpDVO98f2Enp6iZ8MvWOe9c8jNSGb0zY9AeuVL2QK\r\nzqzCdIvcSjGxaruJ6ebS9weB3okQ2CZCLuFC2//yxstgi+q+nAU5/HflxmVL\r\naLlHMnL32Qzu47XHi2tE+W2aWVyHwonwBQ+CQ6OzaPhWi6ZTjM5PEUonwfSy\r\noh1ZEGy+IBL5NKHrdN6OjpbwpWF5mmDq5qPm/TBqRIlaGTX8pUaqPFuU0zRu\r\n3b9xvERTN0v2IQiuDpziNJlwnX8LI5K98dOshswHgQkPITi9Z0Ea2DRBqalE\r\n+0EX1pWbAGflWRM+p4+P2qWFTH3UYomjxNA=\r\n=7tem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"3.0.2","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.2.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.0.3_1655797676333_0.8022584421891248","host":"s3://npm-registry-packages"}},"0.0.0-dev-20226414445":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20226414445","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20226414445","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e46827be1b1cfcab7b46f62afa274e971710354e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20226414445.tgz","fileCount":51,"integrity":"sha512-w4SwSAIAsfbQyz7tAe791Uo3aAbDUhZkQPzAqiM9uB0HRlCeCkp/l0hX/f665nT9AlTQ3A+1QYp9X4f5ph02tw==","signatures":[{"sig":"MEYCIQC+B9NeLmxF+AW0rYBKASYAmT280vwDFPIBIEjxaCfx7gIhAJ+kmZrXuL+kQdmXD2mMelCrlqMEAXECAgk4UgA5uU8g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwvzNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMaQ/7BdXpFBxKUwBSHAtTG4u+MS8HKWSX2g9n/ZPleqVyXXBFwZ83\r\nEBExuDcS4A/gYTK94csgyhFbVsh/6TEdE6OLmtAUNUhiXB/tinFeKjUd23pu\r\n+Sc9YD/EETRcId3reQvBFgZutUiuxc4gWfKmhw8q+pa2TOkgKf+2+6i1hcIy\r\naWC+a1CNh2O2vw4GW9SRj3naApREm7TUU3EVmTjmO4QyLP3qZargDecQ5glY\r\nMCR4uR1ydpROetMyeOUO5pGdI6t4qUscX68mt4FsKviMeGpqK80R6idcwioi\r\nOvRST1p1C10r1R9z1yAG31iaCkQ0b/LYArZjE/oyaeE2s+4XtBGVKBTKKTa4\r\nXmPwzGzVZ1HGTN48oi7mtnOFJ/0as/1WW3XfAKdD/jEe409B8SLyMiqM8t6h\r\n6InrGhJjGvKKvfr9h/9NJgaGki4aAydHVSOYWIAHIDwNpR90x66D1qrUvYP+\r\nWV/8/PiJvioGvBGY9Co85Pjlt9iKPmDsrFH1FfzN/XlGv/AfBRtzBTFBWdFF\r\nV3m5DBD9qm3h+y8gOfVLOxhg0lu8uOpdbaRBqjuo0Lo49lPkJNaWSsq7TU5g\r\n9ELLqozQLrpzz6p9f5yC2j7ki5nlZLSNqMj0mWhYVOwG7GQwW2oQ1j0vuSNV\r\n7tXDlrrJDNSgnUy5l5URHPf8ULsZdJSxtvw=\r\n=K7bB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"7789194552404db8fe576c4d82ccfd0b940dd401","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"3.0.2","@chakra-ui/utils":"2.0.2","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.2.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20226414445_1656945868909_0.49896029189406055","host":"s3://npm-registry-packages"}},"0.0.0-dev-202264144818":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202264144818","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0a6da72febd563dbe5c3672ede23b892943b4384","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202264144818.tgz","fileCount":51,"integrity":"sha512-ooeK/f5eWPW4mHB+YbKJmyIQVfgeItt+hmzASF09OOaXjjtTItaX6/Zjc4oiG02MgPURQQlx/XnelSF+GQR5tg==","signatures":[{"sig":"MEUCIQCZ9W2doBO8xPB2dPcYV1hWVb56F6XLMIsui8VTYi6a6wIgWjP+XSkhVfVOHHNFdc9udVWSC5qB/u4VYxUyphC+FQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwv3hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxlg/+MWYukE100jOj448hM3P0hKqPCY+WNLTiJ5oq8Pcd0XjdqYGX\r\nYb8URgZbXoFnPwxdb2eWFMH8j10U8UpFC1C3TSyTSuTKayCsfkp21EJWbnZW\r\nxb7KypOewphCL1yFO1A3boBenuTXxulHEg+v+V/PllM8yavIzbzVUcnOK1QP\r\nG2uacYKFrVwY1ULl1MKyN24A2qJmCdmzUFvJxC7Uuj/Y/4T+i328ooJ5Suoy\r\nUe46PfgBIQHww52C/rH+IdRaEOy4/fljqh69xO+5dkqsP6Un3/4UWWnJDPMi\r\nAgRJkdfbGVPHUn8pA42sShEuaOfZOR9DXwhAQthoxY7oUDqiwKTnIwiFIGE8\r\notxC4p54RUnOV+3FbZgMSYPcOq+cOF3INLkgO9LgOGnD7Yukc6lN+FzWgvN0\r\ndiLIBLFHZjK+1/FfYrzDevGmH1m57Q4cFZBSZY0/x6qmpNPTAiJQLJTeYg94\r\nTFeOGJyLtAmMvVOXwHY4EWtIp9FdH4XeAe0xAFA5QIzYC59jrgIhB2YYKelD\r\n4oV2JojfJhG2nS4qn+UJZlJAUz5mWhThb5ceLNqtzW7QiUpw445UYQpQTIS6\r\nUHdWo6DE6NuRtHQ6gbZWuWCQ+r+lC3U2sqbyuPHUjejYKc+9MOPI/6LMKKPa\r\nui8VVd/i7yS4n0nxX58pU3+qlgRIZC9+0ZU=\r\n=CMvc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202264144818","@chakra-ui/utils":"0.0.0-dev-202264144818","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202264144818"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202264144818"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202264144818_1656946145621_0.3170462206504696","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022659325":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022659325","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9e9b1fe750b8e67b43897318dd75a89c8d6857a4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022659325.tgz","fileCount":51,"integrity":"sha512-kBex189biXL29E29Fuj0X36VaCh5Sb+4wH9VaQMm+kfR0ukl5Lyjh2C8iFXhohKbYdCcPDZvrzbCqcs3wfjNkQ==","signatures":[{"sig":"MEUCIQDEsV7ef1546sYA/OmPKNmTbb0sdiZ4+T3fzFWW++8NRwIgExZVuxiPJKvKwVuMfjfHba2MhEwwqkwCVjFwu/fX340=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiw/58ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoULA//WFCKvckZg1clplINQjHlrw7Eg57rmaARbUs75vv3gvv9u3wr\r\n/kZeRRuypiHB1PyJru5NVFJqz6ciGIp0D+OiraBUPpS68Xt+bOE7nFFn7mAs\r\ndyB8QANO+VvGWgdRPmMErGZ5Sy0ZORHy7TOjUWV52HaH23GhVqrdE2yA1giy\r\nuXXKMlXYTEN4fxUmZ3GvnhFLj4tyG6dsprWGd7BPN9WuLFyDZSpZ29KrGB8E\r\nHkQiyoKNOS4MVxBvO2SwGVKNQxh0y7goEczQJ+jvFK/zs4eNJAymDfCfeJAW\r\nst7cfBQswEA2UWFr6yADxyL0Jyw8zCoIDuOcSKER3kgd/hm3Um9uEviI1lF8\r\nDCDxMtBm8BGR5MhXwRAZVEK0YPSm5kZJS515i/OFmAORQxmRNJOxhUW0nKRn\r\nMKYMAwiK0boKWz5wtlq952jie28BsKrAWnRcSfTc82MDhR8pL4U77D7QyK+W\r\ndUvudxz3/y8Z9OguTZZ4nIZsi/a1LCuQecNwWkoRt6VYDeC2to4v6HSNOOC8\r\nMIz1TA0EVvlvZ1aesXQDiSSGwAONfKMI1lbIB+ufO7kWPdn6aGaW0AyIttXR\r\n6ooI9Pz4EUeAYJd5IwLiyGGAEtwEGK4s336zHp2DanbLhZdsjlfeCILIR5AY\r\n1f1f4OsgdIt9JqSl9DyJaUHF6IXkzeukJW4=\r\n=tOJR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022659325","@chakra-ui/utils":"0.0.0-dev-2022659325","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022659325"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022659325"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022659325_1657011836681_0.6770614795273557","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022659431":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022659431","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"610863bb4c1e418be056385970a125801426e43e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022659431.tgz","fileCount":51,"integrity":"sha512-jY4k/OsE67ApYX6nscTfB52qyB2ixghyYYsxgNGf1P9ThOkLMcJ0qW1FTfwZtbXfoJ2C9u/YUsLfIj5TdByvDA==","signatures":[{"sig":"MEYCIQCYeyDwXYg/GFc31EsJVaG2nwT6U4fKAifbcneyKfNb8AIhAOankjXohPEG1hUB80S7KRkrEVyxr6+48xiZHPRhiFxB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiw/6/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocEw//UuJMywUDDVaFH2/NxT0w0AySnyQFsvqtDwZ8SFKDiTisRkjM\r\nCOPP9ThN1f1Xhl2bq0N30veGFTIHGO1fpHl0jTunqgmz+2rqiLA0tvz0xPqa\r\nkFBIcVmBGjeixwbVxSCAHtvlTTeDZplRrfdoHmAJTQIn+oVpKifIg3/jmlAS\r\n0rVssVq7F55oVKTTXvOnUcMPbmtHOSrPSXApB/1uQLWPI/SgjJkHeW7bHrFK\r\n/cwFe+5CxQ8yvtIa6JqiXrDm2HdKhY0DyGx4uRODo/9OGDIB3ZtieY8hUxjV\r\nPm1jZgfRueVFjI/YMe/p7OqMmeZnGr2OIttVVhYOgTFqdi3efxzuzoZ11WgX\r\nUTjVE0dO89x84sQNvOArF2W2VLehr9zhIzJh7NEmjxfyjGkSQzQ50ltlEOI/\r\nfBu42+Hd3TrgoV1HpaHKixSavXT/XfDRI4nB78WaiLsb7MjQMtSmZPy+ybPD\r\nRWCP8No8Mb5coB30HzYg585kLpY/2rY4HXxcGKbOvH6vloSjSUQ+ty3mpkyQ\r\n63nZqC2SHqhRjRdpJSpse4ZLneZg0amsSwHVGun7wUHMXTW9V77soG0tXcdd\r\npLrvVO9AuZ1lkPb1q1yhIJB2fYVNoAuOIGYDJ4n7cis65ha5fIKEbWIl1fms\r\nk1f5i8tJ8Kfhezdl38ef8ShZ1euMcwTAw00=\r\n=LPSc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022659431","@chakra-ui/utils":"0.0.0-dev-2022659431","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022659431"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022659431"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022659431_1657011903095_0.46597555303003046","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022669710":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022669710","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d4bacc4903958aa349c539e30f99bb077abd19f5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022669710.tgz","fileCount":51,"integrity":"sha512-mAXNXFGd6wdOajWbATudzzPzVOZLF/oyZsoF4ijbYRsSmpaVGdNETUt/ij3cwxxut3w4IYDYPuUB54OevGIGoA==","signatures":[{"sig":"MEUCIQCyxv/hL40hnG3PjK1Fzy8E2YCRvT0JlPPmgfzuCk+NDAIgZtTEe1zy2twhVfLSCfAhSYrsxJRZ7gjjYCLpOdjKSGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixVDnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Bw//fS7ngiXGk244MucvxSAw36a6QVaWOoL98Aiw5zLEUJ3WyXP3\r\n+YBl+z38Su3kPUAdzXX3lcXwgs9aq9ltYLiB3IqyJRndTcJpH1tVqhJFovej\r\nYikxiHTI6hnaSh8KdLGpqe0Jh+9cZnXyLv+pm2QemLFzhTJy32guOkTRM9sa\r\na/J6mgShgFe+l5N+e7YHsyzQ73+lLfMSF33asNO7k/wMy1UUilSxiX7dzIxW\r\n7TaaZcJWPVlkMgS6/2GbOnwWyYjb7VRfqQmGEsDsZ0wRSwsSpnFX7Igr19QY\r\nVygiC9879FLYYVYVT2QnPUPkPE4XJZSnbds5Qax6HDJ4DiJypY/wNpXw53gQ\r\nvi84JP7mrW3JMO0hctALp1+hh66rYeXdxCPWtfu8nuKCEhY5bIhoAMb33RVy\r\nqnHv+dmgDfA0IYOYWfcIqVCIxfvBnot87z9HuJ39V2ydcxsMxZbz5VY5JQ28\r\nxU44+91QuFi+cHaTu5sXrihGNsXwt3JtVf63Lz7Vs6XaYX5UUKnryADUMGgo\r\n2By2EI/4K0CPc8mE0/1732kT/GNqR1PrTaV2aR5VsUtekmOXl4HvMEdSi/vJ\r\nn5/+2cyfX60udsYuLA5xp2KCl7mrbUqbTj9Pv74X790tGhapFfbseDIfkR7H\r\nuikZekABW/aDqnJTbWPeqNNz6JzDb0yl7+0=\r\n=Tg4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022669710","@chakra-ui/utils":"0.0.0-dev-2022669710","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022669710"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022669710"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022669710_1657098471554_0.353767763884721","host":"s3://npm-registry-packages"}},"0.0.0-dev-202268163535":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202268163535","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5a75372db36e8039a782f9ba6976e9476d7f1674","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202268163535.tgz","fileCount":51,"integrity":"sha512-wbODmdxbHtRCoXH2f5J7uBfYyZ+rvdq5Uvn2ePejUNdCFu/D/Akb69ZXj2SDfU5gZxSlMmDi1SvNdo+VryvT7Q==","signatures":[{"sig":"MEQCIHqssJdELdxW2pbrxcSjqxwxjRXtGiTEgo/xkC94SRvEAiAF/dXcrugjXnag4BDp9ahv1V5MJTOXc4AJ+ANgnadOKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":144777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyF0EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpsnw/8DPRso6haZOXvvsQ+ykVQyef0MpMEExZ3kN4j99JyuVIfzPnM\r\nZnB7HvfT6GFxVzqlxb5MyZij9Ch2OOpJIVyM3LLa/u3KB/mvttOVb5oC4gK3\r\nxduwG3By+Qzfwu1S8mz8/Ip1bDIOq/NmhN0raLn5NDGcAOTLSLnXvTRKmd4t\r\nWy5WRXBTA61g/UKNkLK93iWmOYfg6tg9KmvfhFkOy8ZEFFvEZ+yy5+P8w9oC\r\nqHF1Vgh83Urjdk+Bog3e3y2/gayOjs+343tx3D9NNuaYdawnhP5+dhfN4DRi\r\nXYpnZLMGJAQPLwzo8+p9QrKcdVg/rRB10gGaXpV6WeW0CuZRqC4Aq7Ku/n4V\r\n59RiK43MrxuQzw8dVumxEou65UABiWr3HZ2M+L8J/ZcQ407h1/nL/nGKSuaA\r\n65r1678PtGE3mfGgFdRYGAVkrhIl+eWQEMgJ4IulGsBgD9QewSW00LHGdJww\r\n81+5xn+i6tZHTbk8fX7QVRG0Bcd35F9PAolOCFoVD59117Oj8NHG0t2JiAGV\r\nam2jVN1q74m+AZZp64AGOCe78BJQIvxMxDm9/kTNUzBx3yCnQOKwl2LXMny0\r\nHaLP4+w6HyMM7d2j6tpkAub/U5V3s/ZY7HoKlltUXp3QCKbYS0IPxMJ36/YU\r\nJgBQ6oFjqOXxSCOSpuZos3TmXY6LrfxCVFU=\r\n=7J85\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202268163535","@chakra-ui/utils":"0.0.0-dev-202268163535","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202268163535"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202268163535"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202268163535_1657298180302_0.6775119444800313","host":"s3://npm-registry-packages"}},"0.0.0-dev-202268165050":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202268165050","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"42a57936324d5f8adedeedb74b20838ea1188295","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202268165050.tgz","fileCount":51,"integrity":"sha512-HrmwwYx6kghvAQtRKi2QHiY0XvMf9zciMbHMtN5ZoPVxVjuOJeMKuyoZC8yULh/UVQJ1k7pNOsEJ9gsrEwHwlA==","signatures":[{"sig":"MEQCIGSun/ba4OJQcY8EStUr1WK6S6zibldedtMdpUZWE6SaAiA31RlqGnYUEqoYQV3QKEG7XJjvnIu3144nZYS96Z/OSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyGCKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqEQ//bdnauQfACKnkUx/jff1ovhWlmuuoq92/M9NywuBKGqGglUA1\r\nluFVR3rnxzfRXdFuHY8Sk9xwvbN7FPZP2MObZs4a4iHzoXjdcjedEyE87bfj\r\nvuSPkTpSrq0762g9wqnwyZImcCcJoBObObeHUvd3cl2+j94kU1dsZSYmvFWR\r\nqNNY25UB8NJ4Dn3xLNH8TTVjOvcNHbSAF3n+BEVWMo7K6mS5YqKBdpH52Tct\r\nhHOuR2x5H26J1CU/R58obqr7YCCqHUNlEKHQkaTix+Y23N+W7CZsJCYNCMaN\r\nb9k57X9Ge6xQgnARcEIZ2vt4+KZM56qsEfHVU2kbvxEJj9NJzdnJnNPxNZdY\r\nE+1NDyrG10SiTZxfKJdS9AQcOT+uu+2Gvk8G4d2p0G8fPriyjZr4qP2BYrH0\r\nPhnO4S6XmVYzLzmeYi3W1saJ/YiaFqmI/tUihWSawv9vimvcydwJicoC+qsc\r\nAf4vT0cSFqmivSiE8PgDK1nSS6RJZvo92K+7Axbgcy/LDcohyPaJhNKvTDQk\r\nETzfStP/QqpEboi7xL9SEvrSiBuXNJgJ7DNtFUMHgN7WFbHalNj3fewIiOcA\r\nqu1pBVr0hKVnADNiT6K7hP3tV3TKIpW2wUYWL6rXBZDvqsfQO9P/0DmyuXop\r\nIwjSMX/AF1tFrXaAp+HrOgiZqXaFg87rdnI=\r\n=BSET\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202268165050","@chakra-ui/utils":"0.0.0-dev-202268165050","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202268165050"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202268165050"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202268165050_1657299081834_0.15539474338174664","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022610103716":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022610103716","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"57648919c9d3a99a5d12673d9f590b6a2207b775","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022610103716.tgz","fileCount":51,"integrity":"sha512-0MMj4AVqWkbh17Nfw3qWfGOMgvl9dPLyoyZH0WilCb3tF1AZ3fL1KtJ7A6Sl0OLRZvXtCMcOc1tQDPRPOPWAOg==","signatures":[{"sig":"MEYCIQCxgMaEeb03nM8B6ICoFYL7J+bIMYvHY/70aANy/+iN9AIhALVc5nxz81XRXJ++gHEuKe1xypQ/QwEjSJrNjXyfJyt4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyqv/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSyRAAiVZlfvd7OsOt209dNRRDbgPFmLL5J/c1gTwkzE6a5mbEslRH\r\nFuRJ62aSL+4ZsErkCyIY3LmVswQoRNbJjLhwsJKrSfOS/FXQdxArTbEc5k5+\r\nfafvV0571rFNFGQuSg08gRKsVIy5r58bXZQ5fC2PPPqIfw4VZ3TJj2SyRM2F\r\nZ7xD20+MUm2c5GbGswFKwg3PyNWLhO5l3aanLBQmawCN8lVYumI8FdrVy+ib\r\nUaeIQ4R8yQAL/yKbzA44VT9Oj2aUQs5gHfoce+wkPTas9dRHJTa9y7fca70Q\r\nDxlKZaUB1vdCYA9KS2ylC+XnWgBXPXF5Nbeg+Qw5DNK75Vm74uYR38E9klZY\r\nU3unU+V4ujn/BB1ORG+MQO9jvq97lPE2xODUTUemwxnBXl6QszYH+938Py8u\r\nEc05tqtv/rN2gI/n19FMghmD6oJvAM9QYUyt2KwGcqypGPO/I2f4zOt1gkGW\r\nWMac1hsS5pSjJhB5cGbs9ASIQh6bvzqepMij3LpN0aVYtG7XuC5N5xt4qrqj\r\nIpuz4aV3TV6Bfhg5R45bKTX6dT5wadyk1QbUI7R9Hw5RlhfBMXQ8kRjJtMgX\r\n1fqirUNeYEx6SL6sTyzSnUzbe2026pEYfKrEcxExYutKGK4RcSZY14veSrjc\r\nTYIPSPhmNXrtivgLUf7Oo1JYSrfrcv+oQWg=\r\n=FFzN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022610103716","@chakra-ui/utils":"0.0.0-dev-2022610103716","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022610103716"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022610103716"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022610103716_1657449471111_0.01527924565177985","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022610103924":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022610103924","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8618ff18d1dc0086d2acc9d78074abd7eb4ca385","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022610103924.tgz","fileCount":51,"integrity":"sha512-3VinVCshJakrh9cLgmZJYGGKAe52r3Dv3SJaTbB6CBuZAO2eRecB52qq5wCjxNmYH1MLGaX473yV2piGIPTukQ==","signatures":[{"sig":"MEUCIQCvkfw0p4THMRG/b0H4kxIwlMfwke9Dvup0zPsfw95mWwIgKcwiXIk6NvF1NKIRkaDtm6wK4ij5SfLX3xYHqC0ZBxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyqyAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhrRAAoJ1+nFBt/c9T3ZQVXG1ycjIMsOBUGFicibm3nlC2EB43l8k2\r\nzzU6/IeeJPQFz3iIwxPFqyUH8ZRKxpOH2aQf1xjzO9DZ2yLN102Yo8XASk1n\r\nnR4f7XTamJ/KSMOJKXpUoiFyHApOzl5JaKzhvobjFuxbgte9cfuM0NUUbhLg\r\nkUm4EOfggHL/7f9+03lCSYJbIRL08RlUur5E2uaY7fZlkpmWXau/Z8zpGFIh\r\nmfLigRPWRAK6pWj+rSATUcBq0GF0ZE/jVc7zGzqkZvmfLt3eMsntyYKg2D63\r\nrwWy9k/6SKo77/VkFulQZ0XCc8tJNsylvcrLL2VD4/GPQSKGWpdxqyomC/eO\r\nZUXBa4a25c0F0U052mQRBTs65kAfWCembaltg6pZ9fFf2YuLTgEKlNs23/sH\r\nXOIfauagH9Jd9n+ru1B6FtDDUOc7j8mdO63LHMDQTMjwLi3rfX9d7+82xWvf\r\nzop5YsMLeNnxJKlnxS2/XWiOqClxWkne4ID5MHSNdodi1m2OLAQ0wVGhW7yZ\r\n4mG4zcjigaO7kB9MmM2EIvE/bDbmmMYglLghk15Jjr4bBF13hUhX/7Fa5gGc\r\ncQs7rV0pDSiUHJ8R4y1+hHUoTRbMyD/OTmd7jHwY2luqyxCd+jxauWipdZ/Z\r\nKkOvexIr3xoBQPoszanfzD8QD7nHIC9Lv8o=\r\n=jNi5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022610103924","@chakra-ui/utils":"0.0.0-dev-2022610103924","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022610103924"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022610103924"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022610103924_1657449600063_0.44041279145710766","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@chakra-ui/layout","version":"2.1.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d2dc0c417f5c8c81fc4f52abe9a3109205f5916b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.0.tgz","fileCount":51,"integrity":"sha512-BFenfUEc8RcKLqZxXFf9DVs8LrDHYrVODuzVyPTXhJxgrnmgDncXneC9+HQNu1jsSReJuwU/ilPhwE0shH+/KQ==","signatures":[{"sig":"MEQCIDQkTQutKmmIe0zEFpM5yDHyRnOp6Pfaxz559QRiSoWuAiAEhw6l9D/OWs6+qVGd7DIWIbPEDGY1x4QAnywDbE8Mng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyrCKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpabA/6Aj/2K3iP7gDKiTYR9C+mV8wVi7v8NtbOWNv2jv7wT+qsLQ0R\r\nv4ADE8T3g8HSdoErNTCK0K0m9sXMRynCxq8zIJxdHa9ING6vcsJncNDwJ74h\r\nkq2Xm61ri1d8vGOajzNRObDRkHyI5C2EoWU3/99/WB1EsB47EQt8DIv853e2\r\nJJ7YkvnjxaqbN+MBHb8bF2746FSRicy25ckJimm+65oHPyYdKqtD6izCIdNQ\r\nCWD4dq4OXL9nFsWPZldzaeTc+UuTYCQcGTjAZnYR3oU9uzo88brF2ZH2clVH\r\ny6p+wDaNZ7xxem883RzrTxKgqlU6AI2YEtXs3OAsFrw1tt8KaFQVmtMG9uD0\r\neiHhFjOLR2ZnXabT+B5xvyb1tj9SZayhWUNDwo2tKqvpzDPEVPhBd4Vo0IWd\r\nE1lFnYMBL7U51QWAsy4rd1JxbWPdd5FOzrvZZUGngaNy9xBU0g1Q0MFyxmoH\r\nI5AQjjl59BCs4Ts4jD3j8zrT1oGM1YhBjMUPsMfmxIVeBRQa9e59YglpSW+a\r\nWd6OiCESVEUmrtdGp3l6ID+N1mK8fve7rG1rWPwg2eq3Q85hjtpexUxQYZmL\r\nI5BsVMLReCHELdeOcxRyDHjatlySeuW2Imqpwsb91nAGGDGC9F3TFMjvQpye\r\nU7IDtn3vCU1gsFlSKr6CubjGD0iprTw9zW0=\r\n=xE/S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/icon":"3.0.3","@chakra-ui/utils":"2.0.3","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.2.1"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.0_1657450634177_0.37334888975500546","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022612222012":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022612222012","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"df15624038b8df889734ee03b1e9518f2e6f286b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022612222012.tgz","fileCount":51,"integrity":"sha512-GsoZkbvE1tMnNWhOt7PQI4E23nfIgS/p5v7BX7lJ/UiHu3+LI1yadf7aRy4BWhKkAI45JLqNjj5jTa0jBw0W3A==","signatures":[{"sig":"MEUCIQDABHMrrzKB6uOC1BEVfeShPcgIMhm9src7hRcR1mojLQIgcUJ5C0HvKiAVemRfm9F4bXzaml6HoPCAuVN+L18Bg5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizfPCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmodlw//RB4Q/AChL7WBXi8AYvPFo+muO0bYkZ8FjtGMJu4PULAWPYl/\r\nlqpHUD4vTWTLU75sd5X41s2TBlisLCqtC5dKcEaIws5mzNLhxQ1o5fOwzSZ/\r\nmi+Dr+09BbUTa7OMBSXytLJo/U4ra49WR6Pun5c1GN7XEtghSW5K+bUK7A2F\r\n34Yps6XhrUf3riegSw1b7xX+9ZIRW09SmNqcGvqqDrm8+FZelt8d5YqTCfCb\r\naUWCkoL8tFFaBMYkD/6uGgIRuC4ITa7SNnDUTXAj1xVr5BWQbFzt1IPl6eUL\r\nWc6Bt8jOcP4AfGCPqEpyFT/t88yWPiK2ROX+aWDLn06tUEl0p41ZPEUu/jkJ\r\nQFpgHoWSNxHTJ2uZpwrKbNauj62GouIEaBwaKuBFFnCrCKbFUE/BPuEBXX/7\r\nTDdm+zYERboKEU6nAHs1CL8/olblW7m7Sr98zIe9oKrzIEQmI83wK6BubnUv\r\nm6v8yp6Vx6LI1CoTdhr4X6X7BKGpzXYFE1Pxt/pTBxFrGNJgeRUdLUd6tUy+\r\nPzvL86dtANi+FM86X6nMRc18T9Hg63uByLLEiVrZkg32ZxWg0rLR29pXYxhx\r\nrlcXifym1b7Px/bTEWlki9RqcYNZng85ehNHwUpbo05yOJupJ9uup/v1ckqK\r\nNSAASUFSXxE7cdKshw2fAiZAJKsAkZssbnA=\r\n=9sja\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-2022612222012","@chakra-ui/utils":"0.0.0-dev-2022612222012","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-2022612222012"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-2022612222012"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022612222012_1657664450524_0.02133088608130973","host":"s3://npm-registry-packages"}},"0.0.0-dev-202261316456":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202261316456","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f6fe119bcda259e0b7b97315844fd9fffca16218","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202261316456.tgz","fileCount":51,"integrity":"sha512-2b7O0hVF8UL8sXziTk7o4sqhHFKpm3i13+iISeoTskMRCwBjwrt9UsMtS689SQDZ1EKRn0CLIv3MmQbBHWtP9w==","signatures":[{"sig":"MEQCIA1sUh84/JomnKZXF8LnA3LJH6W/CpFs8cqiNHHde0hbAiByYDifHfM3UHStmIE9fepsjB+U9RN6zPHaf25CUxtwAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizva0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2kg//cT1+bVOPnba+QwAEVPWu7vtfynYd9IJgyRiubj3Ziq9TwsJ+\r\n0L7r99DfkNLZn5uAfyGoBsKg36uH3iV5yKzoxKDhRGVPrPJiQSXkKNYpNszh\r\nFjklV6WPYQA8sVS6WY1tb+oO4MELyKUmyg3N0ULqoHnwlUgZnWlDarCjz1Bt\r\nzWeIeVMyK2SyAxZYF7ZIBfTp7g795bFlyeROcZyGp7ex76pmt6/cwWqCzLWi\r\nPMbqqI7wf6pVZh+HXYTdUMQ/1wCJMTvitXYwWoOpD/VMaiYUEdH55GitxoZk\r\ndnn1Ty/m4azl3mYgXgoxo1OhT2nA+P9P/WfXp52K67VCtpyHcuHTwOd8QRir\r\n0qS/WBh+78TVWHOjylkBIT+kLE+fmZz8NUNGrp14s0ntZwx8OYPCc1xoWY1x\r\nddhPTmP1fryrMkmg64EGAEJGPm3b6c729gOWQ3FGO/P3baUZlSi+vptwBHOL\r\nVL27NVYWnJfa+lFTF2AyHAqroTwsaLoCSPFfV1z+8ZR9rjHqYSEoMvnfq9Ii\r\nKLZBX+/AC9vmnTxxva3Yv8Nl9Ex7/LSfs0NQQMNBc0/GffnNDSnBQYWseKO1\r\nht4X+J7DDKC1XwYKkT7iIRJ3FbsIdd+YXVtsRvir8ge2GYyKGNYoqQIOPnFz\r\ninqxcX9ItELUKWzWNOxY1EvDf1Pf14hpeHc=\r\n=V5mi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202261316456","@chakra-ui/utils":"0.0.0-dev-202261316456","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202261316456"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202261316456"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202261316456_1657730740187_0.05798746314656089","host":"s3://npm-registry-packages"}},"0.0.0-dev-202261317818":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202261317818","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"24058d92366103a7d7846fcfd2be3da956b9ed4a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202261317818.tgz","fileCount":51,"integrity":"sha512-5kGVdJ0dtAl7WS1s/eTLTXacd4yFSGISe3mMMRkwcVbUuHcTnNn+mg1xdz06iX3uEhbQaxO7QmfTyHGdsTFmaA==","signatures":[{"sig":"MEYCIQCAUcxHEKpgJSPx42h/Y6ieEyx9saa3Y6anirDrJ50w2wIhAM216LB1+J76KkfjBQ+cEvIkeO85JDaJMUK5wKVmdcUn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizvwmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4DQ/+P7GhrD7GAXsaAJjUXoG6JBq0jA/Cj5WjBTcVByaGuYTSq8Hj\r\nAeGQGG+NIwAzlscQf7jiVYSGKJ45Fa5cKkcnTzmifPlXU38YKXCXfY5IFzbj\r\nBVZkMMAtD8cWbAe7jX5d6CTfI1tjLzPWQ3ITyf5+IZctXHB5u3BE6y0BKEV4\r\nKtpNtZHuJeUNA7kjyPRIpDjwfTcFkemLkWPxPWm/eYDOP1n7KKbmJgtmHhmv\r\nLFqmEnQDeFaF+BleCnX/r0e/ttpmypckzeUl4ixcLz8mfaP9+iTF6Tgo2ttX\r\nI74S/ejVhAdK0rY518q9uiCCt0SJDqIdFVx3HYG5EQ1Jz4YBrgT2yZNO/uj+\r\nWIcROX+VI6BlzaN+WkDIZBucLf5GGnsq0Y1ZZzHJpGhH9yhHTToZN6a1amgD\r\n2bZgqkfB3tfjWiHCv8xaAy/MFwnD97c1OynV2boKAj/rJy96QjrnoKrLwRo6\r\nTGNglQMmNwhdE7oyiz+3G+FE44b+azZAvcieUv746gTRL/d7QT6cinaOuEEE\r\nsLl91di3Kw0Ahp5ZS4NvzseJW87Tx0HqRwD6Z4/RI9WDUmKfgmlN0oOip9OA\r\nPw2HNY6YSDAUvu9PMXviJUsaiaoRMtxihgHGprLf9FUCAdKKw4r3toC63c/3\r\n9c5ptvrETPALqDP6RU4+qmfy7nfn9pl/5BQ=\r\n=4LCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-202261317818","@chakra-ui/utils":"0.0.0-dev-202261317818","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"0.0.0-dev-202261317818"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=0.0.0-dev-202261317818"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202261317818_1657732133839_0.26361840049632934","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@chakra-ui/layout","version":"2.1.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"98866c34766478dffe555c4a1d0944dd804d171c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.1.tgz","fileCount":51,"integrity":"sha512-amiwbaWUkMpTh+K9QP7a24Je+C0u9x8nvf5ELyUhnZjL+J7yEe7MNRXiWIfqFNC3gszZv/7y7HiKBzKQUw0u/Q==","signatures":[{"sig":"MEQCIGZZMO/OVG4koeY+r8cqnHIREm/r+q74j7TMN9nGGTSNAiBwg51Qwos82rf610crdolLVdvotdk+rPXF3LOiqfBHoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizxJ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgjhAAimqAIetsCu3wEh4DuFnGCvxwX6aGPWOfNiA/qSPcWLukQa/S\r\nTydzOmgMd9PcA2nm5wxNVhJ54c88Xfb9NSZQynBFcyN+/kUxR9euMT6Wh8JQ\r\nQSIVIS8KV3fa9c+Na5nL+Hjw3LHC7aE37rk2InqdoofqglfLEVHsPZZkEAD1\r\nczsGBhGhN1D2LVtXNseEGXG88llzUPvV3G2HcT2S4jmLLmDm3LSVPbA0TYu1\r\n3lPx3Mv00U3Fsyh1c/NxxjGt4CZL6u3+jNfw1yqvBfr4NrQLC0OU20PrFVFX\r\nTMPaZimdA3ylpeGKpirezbY8pSKtt4DfPKtFxG2HtSudK6RI/hlF3aCRdQMB\r\nkcjvBDyPV/6DbgCj9I4VSAL9zH+l2syfkbHQKteCUshc+tmVyQ430yK1PLJO\r\nFwWJKaGK4IzeuHunoOWvae+UnqdsXMbwmcu0+995fE7mHvNYEmuomFZlQwmV\r\nCFR2zceOxd8yNjQeZaL5MiwyCQK+EvOxSoPuMc9ZGvhAbjv5l8TvoIlrXcpg\r\nLpuLibQ6qa91Jx29XPk96rg4fKcx2+3kIk9pYvNfgtZlZeXDT1HMbSc89k5Z\r\nJaMEMfqvw8McLjTTKM8pykFrXkrQAP1Rg2s/R904F1fOUeAOu3pm6X8dzhL4\r\nIgLNC9/LalgG+qr0b5SqHI3yq2ZK2BtJpdE=\r\n=N++H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.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/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"3.0.4","@chakra-ui/utils":"2.0.4","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.2.2"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.1_1657737849113_0.5817461036586307","host":"s3://npm-registry-packages"}},"0.0.0-dev-202262285853":{"name":"@chakra-ui/layout","version":"0.0.0-dev-202262285853","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-202262285853","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"627275c07f4a54f95587264f172cf4015268a857","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-202262285853.tgz","fileCount":51,"integrity":"sha512-WLzgGcTchVs9q2fvkg3VYvZsouSs1nfktunG+YZNkWFNSARKqyydXuE2Rlollbyb8ncP4ehhf+cQLtfNoZBVvg==","signatures":[{"sig":"MEQCIBPcXT4mZ6SASFSEiSFRBmkxzq+at+I08Rttfduo8wTZAiBTdtZZKVDEj1HDGBcfYzLKnPMyLqZoD8MEJ3IeActCMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2mbrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTxw/+PcK+Gs1IlhP7M9qmuavLlDdNgfxnSWg07ZOFbJ+Cu28MKfBc\r\nHOMuP1vSxCoCjKnE0z+WW8w5GTOV9pmEBG8ihh9BKU5s29+GbJwZaWw5O+Qd\r\nxKhIsHPLLwswWCX03WWDLgS7kECr1o9K6pOR+845mmiTtDJPk7TLb4yZHEfx\r\nKU0/hpl0nc7VzvpHA4f2twpIgtsh8xJspHwxQBUE6vUDMoOeE3PuP9LsJtUU\r\nSd8o8iCMXnpZHcJ4JaN20lr/BiHcObT4gWOV1aR+ASqvE2iTyZAhuEdD4l89\r\numxZPTKzOrS7Ua1jK0rtace6CKcVkzj1/BWb6rRvwpAEW1AvsJ3UplV6Rsha\r\nExby77m/otCBg99aoIqVcKNJpe3VKLvCSecLrDqQOc7oWRuUlEHSgftVmYZX\r\nxFguOPlhdH+XCQLaAXCFI7pooWmW48qDR3x5a3XyGSFvXf7RYJ4pQFeBSvua\r\nGgNitvZ6WJceVREFmHh1lmJMF/ghE3aSsUvbQQAgmMSBZMB0m2mU1bjHgHlV\r\npsytYVV401/Wum7QbGBa2aP+vrroBFFSvpD2cnvcpbSAehi1rcJ3ZpuvOG7U\r\noFnxoFh/0tHPbNXy9BX8Qf4tv4YAZkNo6zaY5UATYSwPW4QKY5HQPDrHP+G0\r\n3InPYKgDj9wkV6dvFPmx4KID48hEnbEiNNM=\r\n=Phj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"fcbf5e7a0855a32add9843f572103aa849f7202a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"3.0.4","@chakra-ui/utils":"2.0.4","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.2.2"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-202262285853_1658480363121_0.823733549778404","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022623104923":{"name":"@chakra-ui/layout","version":"0.0.0-dev-2022623104923","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-2022623104923","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4d04e6ca0fda440a8847d81188df90a49c95c06e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-2022623104923.tgz","fileCount":51,"integrity":"sha512-CykGeKZX6nduKOXCz5NQkp1l3ZCv9FUZci/KkWewXvBxXHsSx4T9vUFxgMu2OtvlbyFW+h86/jd1txpjWpOajw==","signatures":[{"sig":"MEUCIQDRHb5zLhMc9C6lrKVeXuVfx5C6GI3o472hfe3ja6t9fAIgaciEcqLDdoPvtd0wsjkVxpb/qjQ1JMNiWX5AmHIzs2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi29JPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+oA/+LK8SLB9ttU2Y4KjM6rXx9Acrq+tQ/Ti4nXFKaVGQfbiajJT5\r\nrHNU6IUJVhbVC4HWHaB2LFSoEOIr5MM7SZKrN2NeAZXV42m+MI6DsOEYLIUy\r\nJ55Y59NkAQwT4aHsxMUuFJHEiZf/NLrnwpeZi7PAvf6tXj3fm6Q8BoXB+aIb\r\nuYuljCLct3fXnUJ5MvK7c7dotV8RYj3dLs74iubIb5AIxGG0IBK16osBE0O5\r\nVeTDfiEQdWa/MqjV9/8hjuzf8vAsCbtHxSxK1hdfx3X5ewXGI/X9S16owtiv\r\nXsOFgNZB2iTsk7IY4MPcAiy0RL4iOGIrXjGR5AEe62GGG7gct55yisipL2bD\r\nMCuUQTixhkzXk5178Bt0G0v6bUJT3XpMB4WOMgz1AQ4euqNQhgWYZRx2pcB0\r\nOMZij7G/jUHn5oiOot602cZ1IzQn1Cukr91qyVxGJIWitmBwztUwgoKrE24+\r\nuD2EhvYvzs8aMg5Hf7g6QSGFkABbP1yymvOkkh/X06wC+vA6zLXLyQVRU/dN\r\nXKs1yelSu31NVqdvBJMqJnTuCI0aHWmOP7aDeM51Aradg/FJmM5BJsvInuWt\r\ng/Jc4iCjz71X7kJktBgpSyAwZNmp7MJlxAcWgnLGmfKy69yJvDiqiBOcT10w\r\nTLP+9NauMdZyZj9XUH9yfgxu80e4mPoGyKU=\r\n=dUOg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-layout.cjs.js","types":"dist/chakra-ui-layout.cjs.d.ts","module":"dist/chakra-ui-layout.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","gitHead":"88e812c3a6d99554965b54856382916b6fbf6774","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"3.0.4","@chakra-ui/utils":"2.0.4","@chakra-ui/react-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@chakra-ui/system":"2.2.2"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0-next.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-2022623104923_1658573391590_0.016376769758297938","host":"s3://npm-registry-packages"}},"2.1.2":{"name":"@chakra-ui/layout","version":"2.1.2","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1389900e497a1e50da21d6f2e4148467c3ee687d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.2.tgz","fileCount":3,"integrity":"sha512-ksYbj6KLoR+CH0cwrz3TN/2KN2zLoLE5eAOW/kNpJ6um36U0sg+HQzVF6fIVAMB6WFHdijIBhA/WdUhk6fsw0g==","signatures":[{"sig":"MEUCIQDKBYXqq88X3l4vItx4JrpB0AqA892oGKh88qAzqBo5PgIgZp1wn0y+lIJYgU+wELSJkZx7QFFu0NWJLBkeQwZCpTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi3iXQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMjA//XI9FCwDk89QBg5jxRWNSbExgBoTseCWUj3fEYvy2MWu+3PXR\r\nuZp42pM5GeX+uh7tXbEgbeq0aTvqqJgVG/+LO7ZfXvPQkpQugYsucAzs7hGJ\r\nPsbSHw4+xl3kZtvlm+7hLe/kv8Tv0APvLmpQ/H67fpEAxdPV3goRmAMXkeVQ\r\nGRYtr8owJPXmcBiU264bSBfd5o2rXa0iYMzt9XjDxMXj9hwrOTxTWlP/Hhod\r\nt9oGoCCdJ9KK8Dwd5T0oXnOWQZk9R7sZA6el+LKhorh5w6/jsej64fbGojIc\r\nopS+spERhxGU8CLKc+yDzkSiGAQ7D574hDxnqKKNyCXpZadKXv9/LAmiiEcm\r\nESJnQFoe5OxIl78IUBc9Kakl+FfVvzNZhuQ83jSO7arBLC8XpiBzYxFpDaPr\r\nbJYY2RKqW7RxpNV9w8Gw4ball561wG5dcWekFDE2kovzfLxiiSkT76x9FJNc\r\nm7EusqjsVRtRG1gFWJbZIXIDk6QIiauBHStTtkm7mltZRU26Voo1Si+rzjrk\r\n8LGiE8qdAFMqGJB3aAkvSNYuNsSjMou7Y2GGhQTW6PAUfAgavcnadu6gqJDS\r\n2WAFATpojIN7YuGoMNEwDu9IPap9FP/TmUFy3c+MFZj1NoT8Yl+mOjGwgTuA\r\nluSuaxUGpRfdHM4LFy9QUXKrSn8Eqry5jXk=\r\n=CvSk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:chakra-ui-layout-2.1.2.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/index.ts --format=esm,cjs --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/index.ts --format=esm,cjs"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/49bcf8d5b0fecb163587034ece69639d/chakra-ui-layout-2.1.2.tgz","_integrity":"sha512-ksYbj6KLoR+CH0cwrz3TN/2KN2zLoLE5eAOW/kNpJ6um36U0sg+HQzVF6fIVAMB6WFHdijIBhA/WdUhk6fsw0g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"3.0.5","@chakra-ui/utils":"2.0.5","@chakra-ui/react-utils":"2.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.3"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.2_1658725840065_0.18491074419446685","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804193103":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220804193103","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b9411b4a6aed8fee909f0b401e07e2e3f1fa1f51","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220804193103.tgz","fileCount":6,"integrity":"sha512-QRbtrrvcjflxZKC3yplGkIyw7UEJ/c5M51S9Wfz4c6fiGIkqfsPWiypw3zduOrIO0FDXWLDUj60Z3X1VRPkApA==","signatures":[{"sig":"MEQCICNq5JWTKr0e+cQwAba0H85uELzlsiDV6IehhDJtUU19AiBdnL5pDkIvlxPN1EJh/fxR4UGnmFguGZDLO2+FXTEKIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7B7pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokDA//eQq7hpO0JDYX2l5yPHgj6Y0Dfbqu4UQP/1qCDO7boI9xTsJa\r\n9NSxC2K67+Qck/vvqPpQ04exaQB7Rmx6BgeLqorCjw3fi5uFQvIolcU7knWp\r\noB4gfKidYWvb9I7HJ6Lct/l8yRP88c/ZMxRQhqqypHPICV8GIaaT5PQtGl0r\r\ngkl2AC/UtTHWNgECksIbgTDd+fyJJOrVe4D29VTghqg9vRlSG16wEYKozW1d\r\ncAMmfA4MjW7RT/Stq3zsEQwZe58Qh1SM8L5xqgiDYxzhvM/6flPdS6VKquYc\r\n+2TRb3jGwyRw3dfWz1NKMfkgVUAoCkeHWwE+XjwF1o36yIjc6ntV3IFnkgJl\r\njhJpTzQiB9iCcHbnyRiUyakX0H9g1q53qwCUENzMPgbH7cInOU7qQ83pJ+8K\r\n6Bb0F0mS3qNI2AOB+JdExvmHtPuKFx3Sr7k5a+k6N/VqBXmAR4HiRLRpT/0M\r\nAiV7zud6rC6al9XKdHp/gYTPHQe9E7F4rtf2BtebnYR6Ihl+LBFOxeq6gIks\r\neJI6bSCQIEpQkC7J6TmEd6HUoKqqXkpJXCuOzOJDV8z3UZyy1tqphmt245oO\r\nXSrwA+SnI/Pn3IoyX+ibXTd+q0J8wMfgoMQ4vf1JwfA3pfvu+7SZyhEbZm3s\r\nNt2Nm8QfFicUf0lLIK9xnIZqm1yIoufyR+4=\r\n=mr2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220804193103.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/34420d5261d657a0743bc752cc70fdb2/chakra-ui-layout-0.0.0-dev-20220804193103.tgz","_integrity":"sha512-QRbtrrvcjflxZKC3yplGkIyw7UEJ/c5M51S9Wfz4c6fiGIkqfsPWiypw3zduOrIO0FDXWLDUj60Z3X1VRPkApA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220804193103","@chakra-ui/utils":"0.0.0-dev-20220804193103","@chakra-ui/react-utils":"0.0.0-dev-20220804193103"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220804193103"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220804193103"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220804193103_1659641577795_0.9146382139218616","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804193815":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220804193815","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"eeebf1354820415d3942eafd989707e6ab9fbdb9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220804193815.tgz","fileCount":6,"integrity":"sha512-ycZE+tWAzYqs6Zha7JbvcktR7fg0wXrN59tYmoKOHYPpMhiUVyEJ5ChmlXgsnyY9/pDCy1ShQZnNQZMHeIajVg==","signatures":[{"sig":"MEUCIHMEUHgj3dURBny090R4oXlkRSTyi4ElbtOkbT3SevLhAiEAyVMJzSz3TedDMyxORfYApo4/1a2+KKgXMqC0uvNflGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7CBQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraOg//Twz5gdYvLe5BTAUDJUk6PjxjrVcKVvk+vn7nxNz2PIeU9gtc\r\naev94bBJRrEDSPFafex3aJ3rqnaku+O/Q+6R5PZjAw1NgfG/NzjfQqQS9Lvs\r\nFmpBZ2I2O0ow0ETGGXRVj6ckvAFSqmjfyX6fQ626iQkyLIYFhVToj9r/lkV/\r\npxWcMGVqooohEIdnHrv2EDtb1o4EyRMKcAEWE0euzfUMJ3/gLvePX1Bn9WlO\r\nQhYuAMaJ6AlVL2vyz7ueLHPbMcpLSLqaINrkjIE7ku4rDbklxR5CL4peHKw5\r\nGqqJKL0qYaDEngS+gwVwmjYdaR1Aar1D0cHVI0krQNeFb2v9B2v/3DACF48l\r\nvieIqtBc9XhLWP/Ua2bRZCTID9seSj8k0jqgyDHx9+EEwvgPV4w3f+WB/0jb\r\ndsV1BJdFtqhrX2OGqFfLmd39HkkCYK41MVk4HeTkVuwlA/jyT1FCtg4kxhPt\r\n6LkoDERlVog9OCB1KHp8nI5YzOGtYdO7aW+mbIQDOgMRMHXFgC/sLY8uNb1H\r\nJTX14eWUFpnFBwMxWKNPo0601QxCiW1kPKEU0LZyDDl7lU45FmRy5QYgOww4\r\nS6icMZ3hUErUHM/5TcxjNUYE9qslZQrOtRH+QDSbAhEzczjl9efwgj7Mwp0a\r\n7XPgHiUDLja/3zF3hLpRnCmixN7+cSsdhC4=\r\n=GjlJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220804193815.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/f5ba4e3a5a552b77e03d5e188da3bb71/chakra-ui-layout-0.0.0-dev-20220804193815.tgz","_integrity":"sha512-ycZE+tWAzYqs6Zha7JbvcktR7fg0wXrN59tYmoKOHYPpMhiUVyEJ5ChmlXgsnyY9/pDCy1ShQZnNQZMHeIajVg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220804193815","@chakra-ui/utils":"0.0.0-dev-20220804193815","@chakra-ui/react-utils":"0.0.0-dev-20220804193815"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220804193815"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220804193815"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220804193815_1659641936170_0.5286493327281012","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804194739":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220804194739","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4ff6fe419341db3927bc5b0dd92c8909b3f0327e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220804194739.tgz","fileCount":3,"integrity":"sha512-Wy9+5GYYSncGtcem8irm4QvVSaQSy3IDxYCYNEGijAnMD0eg3bS71SC0iWaWua37SNHT2Fnzz/paATOmcIZ91g==","signatures":[{"sig":"MEUCIEM1WvmCaOPcAdLZe7GshaWExiLFMq8TXNjEOZggYP4RAiEAxq7vIrzD8fRxF4gvejRQVko3HXcs4iJo3q3DLO8B+wY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7CKhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqviQ//UpBSKJab8SS31MhEEqKergyURvluFRn7lEuPse1Z7m6Ajitd\r\nDAwWNIHpRgHCZ1nT+k2G5jFPBDx7iN1/Hej93SOO+WrwMGCmSPZbqKicx3y7\r\nm5evdA6FDEMeTjty48FPIVOpxfjwGqnuJL5mpQNh37iMNUVHBjGsjowf/C3O\r\n//9uTFBbmHP01+jM3804WCHKDmEeJ02+6dblt1SEfp/TwCTrHdgZKPzJ/Ajy\r\n6U0zesyf5qtCLcRwn6pSW2dgwzVsIaLonR9qDD/vC00wOzHQQuw0T8z3VHU+\r\nqwZqNjcHgRashegRtDLi3gVcKnSrqNKG8+f9qKWCTNa91UxWYo2IWIUufxNW\r\nluKsiJVQvuOVngItvS7widVygArk5tJ5oIJTmgO6NxctyLEz3jv8a3CS1Q8J\r\nPPRPzJ0gd60f8sjE5uVw8E5Ms7Zo2hqnS5Io5BBL99c+/cITwnxWCVVCrZPv\r\ntfT+a/xIAHE2QUbQoOD1VWB+Jh4uc9WQRMCad6JTjew8nPBWdEgZgWKECjFU\r\n2Xp8KJTMK+WSYwZSsGsFrQW3ngXXQ3g3fbd+kaXznA5cOlndH8gUxBCYJmjP\r\nfIpl3tI+bB1vqApKDIMmtH5olqPow9JWqpS79vdPjoxiIJlaRP6k23jJdSF2\r\nIZYNWVfH5JOsF7xsuyG3v4tprzXYysjfvmY=\r\n=/dUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220804194739.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/984ee6741b480638f4c05b8fa8129588/chakra-ui-layout-0.0.0-dev-20220804194739.tgz","_integrity":"sha512-Wy9+5GYYSncGtcem8irm4QvVSaQSy3IDxYCYNEGijAnMD0eg3bS71SC0iWaWua37SNHT2Fnzz/paATOmcIZ91g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220804194739","@chakra-ui/utils":"0.0.0-dev-20220804194739","@chakra-ui/react-utils":"0.0.0-dev-20220804194739"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220804194739"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220804194739"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220804194739_1659642529104_0.8242349774733113","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804200605":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220804200605","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c6168de874cc0e4393568771e61338ac6bfb6686","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220804200605.tgz","fileCount":3,"integrity":"sha512-UtlVrFEldWUfZwd1Ywcp7tXVf1PSzFK1H1bk8vPXCJ4/2WiotfRr3SzOXfjJUXyHir09ubD43fH7eexDyYxuwA==","signatures":[{"sig":"MEUCIQD0eLR5YDzoqFBqsDUoYdHiRxpDMkLkg1KYGZd/ZqosFQIgdit4y6156QVbHfp5jeWPw4quujj+BhBs/a01ZifxEXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7CbwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ/A//UWwHQ2iC6JGLBQsnAfPNSy3qb9GdzsJa4yJ65mjhMddVbdvW\r\nsWlRKrnIIo53f3u5VUsie9hJgSxVIHuPamfnimPYPHY0gzqETr8vLYtE//B7\r\n8P7L0An2Ipzj75s1kq6GBwq4NSWx3iiCbI9e2Q8FHOYLLO0dr/YQ8bFBqyHP\r\nWM6q+R0kT36Y68ex5YdzP5wDCaH4RyaYSCn24MrmpETVIp2hWXd4gaeAeL8n\r\nbjXA9LtACNs8mIHudlvEFjQLkPguTnFhX4YPiccFkbb3Rfud7n6viJYzcAGU\r\nEfcQ/ul/ZEhgF2IM2ZEkmjgiPZcoMzK5XUCaYmt/0LTYWVQB1pg/ZcQ5nAdW\r\ntqb28/AcLcrdf5wJzIh5435cFIBVqTkdmCsW+MkgBZCnQy/rq9+qvTCT7CPj\r\nqt5Ol4dbe5z/6q0W/J6uC7eWmzVzBnGHEum/Wy6R6kI2/jfgDd9cUin2I8D/\r\n6UJr0Uw3X9CSUY/DMB93KV5xuGw+c7AWLMrY8ZF9NKfTSa3aDquWX8w03DfU\r\nquzmEaV3S2cZW5MZg9jRz966hwgWnYWN7Iz6UM1iW8CZjYuIZ2o6FutFtz8G\r\ni0cXsrrrewgYh++vxhWblwaP5ImkXeWYDij2uWOdOMtyHVhb80W5K3bL9Z37\r\nvFZwuk/lgvnLUXe0ASqrcqZPvyEzrTXQrBc=\r\n=QBiO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220804200605.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/61efd87c0abf01a3464d0cc12b8936fd/chakra-ui-layout-0.0.0-dev-20220804200605.tgz","_integrity":"sha512-UtlVrFEldWUfZwd1Ywcp7tXVf1PSzFK1H1bk8vPXCJ4/2WiotfRr3SzOXfjJUXyHir09ubD43fH7eexDyYxuwA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220804200605","@chakra-ui/utils":"0.0.0-dev-20220804200605","@chakra-ui/react-utils":"0.0.0-dev-20220804200605"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220804200605"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220804200605"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220804200605_1659643632367_0.3905172060197766","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220805062318":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220805062318","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9987ea8386767fb167a9e7f9cecbc5cbb9c112f9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220805062318.tgz","fileCount":3,"integrity":"sha512-uIT6MX/AQsP/oJK9tHko5ginED9r90cbuvXL7qFIF6ZXGnS4D9aYSAH8jNr8RgoPvBDcDUK/wkZ5FPG3cVac4w==","signatures":[{"sig":"MEQCIGS4eimHvtnAjZB0o/mCMgmpajZLkXEd3e5t7AvIMYtbAiAv9N1bmZzt9TpJ7Y0eeMBKEJ6DdmV+gXIkPCvXn0R+DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7LeZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOsBAAoLidvwxwIq4xpj1uVrZHx0Mf/ZnQNtO0C9V4Vv41g+bwX+F+\r\noSZHhx1F8jgYpSfdFYRQCESeqmdpNlaxr3M3aFtkGHYPCxm9l54wgaRo0tDj\r\nDJDnhc4cam9lU39l9X2wU+vvlaQBYZIl9VHHlE6c+ELcFsdJXvTeun728jKL\r\nfeSs2oVAccgNdZH8V4+VKdKopD4Kz+ilTQIBw8JN+CMf3gpkeTI3bvErAV2P\r\nSQbvj/TjzHlmFaxbWhXuyQ94PMTRa3sKtg0ZNcpMQWH47Sz6CWL/C8DSkPy9\r\nwO93ah+SEfJ70qmY3tatPBfhvLfem2Zm8utsl2uuUCpPevn9M4TEYtQbdGtk\r\n5x2bvXHSo8Vdu/ccpwge6B+7faWFK5l3gIlZna6KZgOZjESxAYyd6zHYp4hC\r\nbdA5d92KLrw2/nprldwNPyM268GUKHFt12tNdWNTa2herjhPNCFv6RO2FEqT\r\nxbt1aoRapzEr0RJTWx+kieXHVB+1zUi+X/90dj5aFNcKo6EMBkjggj3CBVz9\r\n0qu5igbROr3nJdqXXBrwVmIlWNWhc9ookY/ql/yLxB3isPE/tJEgHi3iNPeJ\r\ns4OrfOeUxAIqj/eyHO/E48/lpQp33PP3L29C+uWOjj/VcKkSUH6uMxOGKly1\r\nmrx3lGOjb4+Y4xNhtXPMl2ijVp4SqZYBdo8=\r\n=fz87\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220805062318.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/14c661e2120a9ef7d4519ad4f9e7c028/chakra-ui-layout-0.0.0-dev-20220805062318.tgz","_integrity":"sha512-uIT6MX/AQsP/oJK9tHko5ginED9r90cbuvXL7qFIF6ZXGnS4D9aYSAH8jNr8RgoPvBDcDUK/wkZ5FPG3cVac4w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220805062318","@chakra-ui/utils":"0.0.0-dev-20220805062318","@chakra-ui/react-utils":"0.0.0-dev-20220805062318"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220805062318"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220805062318"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220805062318_1659680664898_0.7820603991507513","host":"s3://npm-registry-packages"}},"2.1.3":{"name":"@chakra-ui/layout","version":"2.1.3","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b86e96da3dba6ac7c0bd22c47cfcdaa3a0cbaf45","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.3.tgz","fileCount":6,"integrity":"sha512-QD1s8fG+pmER3s9hugy0BHM/67YKk2+OOmUojvVrPITOdN04q81K0NKMrNLUolajm1tQQh498KPI/curltGloQ==","signatures":[{"sig":"MEQCIFPIsFH5LKSo+zXPPJtDtYvIVA5SEk4GCZDvz+Vbw9KJAiBKid1Gzss5QarrEfujw5OzisGRZ840bMDvBemX7yA5cA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7O0zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDCQ//ZyAPg7kk/2LHP/ludolDeELGtPjeQAL7NSFaAGMX5ZFIxCfX\r\nhQUFi9h4F972I4LClAkPhSxSvBSbM/gm1m2czrCAIIaudFXLBONx8TrcrTbd\r\nMf67yKMHhFXMyNjqCF7Hz1e0CN6Tp8jBUt+/QccP/oshzTG8lpwp4qcqg286\r\nUJM/xe5HGQltUFxTWXNb9J2DfHEmaUt19j19ENH9ynSKgfvlP2/NcZk+8aqU\r\nyphcqR1zJPGCgQ2pztDJZKFrMf1WUwFE1YBzs1tnpvhHswABiJC0IjQAVKpI\r\n2oxvQurXsyEMBTsvPc/3ZPrEW04RXoIQYfX7mqUk7LqWVj3bCuD6oLbQVY+6\r\nCG3yeI/6Z2t7t0Iuyb9AMiGKaKKOJEhpJJsxLOKUidX40vmSvUytq7Yv3PrP\r\ns3mf2YxyUPgS5NmL9SIKmyXAiO+s9rfEsoT2m7AEOQQdbxMGd9Z+zQqAsMKi\r\nwrwzfFOdSSZY3sVfTGLbgVt7YkICDRhYfjQyjH9Wdm0dpM00fFASznhJm26R\r\n3Tm9/Zy2hXJdrNLWiUljSI38CTI6b0WrjJGL5MDMTuJgvHTf4dEdb5yzxha2\r\neWLx71gM1s6YMK3JR/pafaVfQt34SQcvd8X7RDoEjdPc2nFsTpTlE6PVtnvL\r\nXCo4AQIsSFzrlymJB9e2VCZ/dqmc8bhMKk0=\r\n=dGYP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.3.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/82c4a97e8b6b18430396178ea72a1d82/chakra-ui-layout-2.1.3.tgz","_integrity":"sha512-QD1s8fG+pmER3s9hugy0BHM/67YKk2+OOmUojvVrPITOdN04q81K0NKMrNLUolajm1tQQh498KPI/curltGloQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"3.0.6","@chakra-ui/utils":"2.0.6","@chakra-ui/react-utils":"2.0.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.4"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.3_1659694387519_0.02559796244918111","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811084042":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220811084042","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"53ed2720421df9bba163e5db54fbfce05109ba22","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220811084042.tgz","fileCount":3,"integrity":"sha512-MVbfOCScme9fnZ3kDepsJt7f8hN3LFEMN8udGbpPDejfhKcfBZGbQy8/sK4Ksz2NsYcwrBStc7nbJmt7+cO0qw==","signatures":[{"sig":"MEUCIQDxd+GJdl/KN0W7fU+8QNfbVZ3x1G3cIDqpEI6l3xEmZAIgImT+/j5ldeI3KQmiWagkmV0qysg99dbdBumCxK+eM2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9MDEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRgBAAo8x1kLm3xVw/yv32i0ZFayBxDw+pqZ07nVBGBpxCJgsLYyPq\r\n/dMBPX6S+SCDSqlqQ7lEybrypGc5m5a2t7MRnl7H+sE0cPUkQ1KYeXfoqfeE\r\n8PLRmCHEP4jBs5UlMcQmwy/+gr2wNp1ON28tHTlqFST6uMXwGaVOazP3nH/u\r\nCrbhYK/C55c4i9aICEQOe0Mosb+7Xmxt8xP7lxyuNx3gVPpZ408GWMXeAuT1\r\n/nX0lNlyGoph3YVXKNT5/IsMc0i3dQPg7gY09hlqa4eAXGrHnYY338isdP1H\r\nPJwYZCk65/2lzRS6HbC+XhkmUdWEbpgIGdOLOzofTLGluhRkiPyv6y943Ojf\r\n52R179kbBXG6FSk5g6cZLZguwX76TehvT3VIbja7+oySdAtd2QHo0DyR23th\r\n0yK2ecuQOU2SlsdrPuUfKH6SENuV7SBTUyt2XFohpXSQ1+QweSaenk7RsLpP\r\nk+GkoRnGDmnM31a7gc65HmxiY4mF+k0F9CtHUjPtuxEn4qMZJio0eAHjPo5B\r\nGiudADtVIvUes/ovbKZ85rPqHOsnQBQNk39Uxct1cX9iagQj+au1zzUPurA2\r\nIMsI1WeS+pet2/djB4b3boXDQjIOOed1Rac03XnOdOi/mj9kFNr4CmWTEa68\r\nCrBA8QG1S5z6XYlA/2EoQOj/NThqPEqnupg=\r\n=FSO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220811084042.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/41fbdc16c47ca708318d53cccf195b76/chakra-ui-layout-0.0.0-dev-20220811084042.tgz","_integrity":"sha512-MVbfOCScme9fnZ3kDepsJt7f8hN3LFEMN8udGbpPDejfhKcfBZGbQy8/sK4Ksz2NsYcwrBStc7nbJmt7+cO0qw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220811084042","@chakra-ui/utils":"0.0.0-dev-20220811084042","@chakra-ui/react-utils":"0.0.0-dev-20220811084042"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220811084042"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220811084042"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220811084042_1660207300523_0.39458821480813633","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811093515":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220811093515","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6f8f3fc6207164cae7449a29de239b3661c7691c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220811093515.tgz","fileCount":3,"integrity":"sha512-J5H1E1WQUUXRwsl9F4QOOZ/oD9hSKrDfkNDT/4BxW2mMrBNT8bt+Gh26UhDn4yRIHEVLTW99vqr3VutGK1bgbg==","signatures":[{"sig":"MEQCIBar4/fJ9uGJa8mWaY2y3ZayqHgqTW4O9GV6Mz2pIXRnAiBWq5dMvrAPSK043JA+shCuGcqBuTdvq9f5YunLUyUHng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9M2GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCZg/9E2lBV7KCyANwk1gwqXZTusmupniY1/hxbcLaPe1FXpowSgm0\r\nr70wlS213xrFn/FzRhVXPrGH8g2dVmHdutAJYlTldqgqX+SbnaU8Sva5xZ2z\r\nhbq3EwDMgfqb4SKxHMFXKqC4gp9vQoIfsWa3gYHDQzyKzBUxS5lnMwq55o9O\r\nScyoCvZkCiFGzcAcujuVaOe+SBfULeIqLsJFjhq0ry+GSwG/TCNefgdxpqHJ\r\nzug8a+PPfPt+K9JPjQYpbEiRzaG7/gqscpzT/XVPSmHzuplQlGyzJvXWO/SX\r\npNLKjfMTy/7FX6QZf1x78DvEMlKQtYih14p4pu4ke/KWxwatUObMfoGksmTg\r\nRyQqPkUHowj53C390sgcXWByznW+mW8gYmCnWXgJTwuj/UGU0KlSKh2vOhP0\r\n8+dATFkAmPTPJHGNQa1mliZsSaUOdeR4iYMgT1cljvhbYFEwUuCldO+26Exa\r\nQjRRIuiVavx8Xt4/mcyRIS/me7AdqkNurN4OfANbO4w3EhV+KOPZG9VDLQmf\r\nIwEX2hce43+3lbRTp2dYUCczkFx7kUaqf1YtvYuuGnjVeK3Ts39zaq2LyW2B\r\n/ZVVtHNGDBMJeTMngnAbC3fxcJ/Joq0wq+HSLT7k+rxJbErYBlX7y9y+qdfW\r\n8h2HoTg2lEnCHSfXDFJU/zAshBhG2YQYkWI=\r\n=WQRH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220811093515.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/9bd11e783d9a41abe3b1a7540d0ecb56/chakra-ui-layout-0.0.0-dev-20220811093515.tgz","_integrity":"sha512-J5H1E1WQUUXRwsl9F4QOOZ/oD9hSKrDfkNDT/4BxW2mMrBNT8bt+Gh26UhDn4yRIHEVLTW99vqr3VutGK1bgbg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220811093515","@chakra-ui/utils":"0.0.0-dev-20220811093515","@chakra-ui/react-utils":"0.0.0-dev-20220811093515"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220811093515"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220811093515"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220811093515_1660210566735_0.26626256671106385","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811160709":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220811160709","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"990121ee4ebd51ab1dbf654085c67a975eac51da","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220811160709.tgz","fileCount":3,"integrity":"sha512-L2F4Rqris9nv5ELRBp5wbOh2ItJ9Ojkxf6kB2Sk4BwWUnIF/IwOzT8yxaniZF8hJFhzaCxGGC9BgzF7jErfYWg==","signatures":[{"sig":"MEUCIHtTcfCJaVJ1kVvAfkdbYJFw98JB0WJ426u0u6qdsUFZAiEA0hnHZm1lY9FbPNaF4rOwL+oz2Fnlf8CTJOf68GGA8pQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9SluACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSyw//eSKS4PMeF9W+n+OxNAmjPaGfuPwRT8rWGpGuS/YOQWrWtY9i\r\nUMq34umlaQ5+4WYKrq4tZ83NRBB8xr+rpThFzfUO0Bvcj9X9MWec08aaprDc\r\nP2x/aJLjBdwyY/VDs9x3LXVzgADbuh/WiFIogIEoUl9TXlXux1WalMxrHScM\r\n/3Lh7KNATfZd/xvybsXDsSKThWZz8/NAS4Y1ymJ9s3BFFcCr21DO+xGsLKEQ\r\nfdkXey5Wl/Fk+b6+GVVHsgkPLt88n16Mvbn5REfylQfV6an6XvTqbkhx/iUX\r\nGbNZWt6ndZfxBWQFRXo4Y+14fFudU+u7DQwGIAw0neZ6UDeyglu0/31wNWIn\r\n6987YivjfB4R+CmFZ1QsNc03/LjaEa/rgLTLXeXl/qkaEEZKOIqdpQt1mG4p\r\nmyPJG1YqUCSWk7Oh+6eoTJyjwlmiRkaKqd5CmgJ+gYwuF00a2HjNWZvaYYqP\r\nfchKhytRzlUNQiS+vWBTpBKUtUntEzV/+0m8LPioKaPBBTPGqzMrtGYcn4pM\r\niP7GQQJUSwPotQYGVvd5qQmZbg9jow2Nesx76YHcRMeK8UdkdqzTSR0tMewx\r\nKgHBxMaqlUViwgl6EQRxt9PNVW9Nhb8dtjKwNSwHkAaDzoQ5Pn4x6z54ivvF\r\n5UJ0YuNmGsTbUZmK1NUZ+BnRVatAEhqRg3s=\r\n=Ie5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220811160709.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/679ca4e24576aafe4bf4d41d5540197d/chakra-ui-layout-0.0.0-dev-20220811160709.tgz","_integrity":"sha512-L2F4Rqris9nv5ELRBp5wbOh2ItJ9Ojkxf6kB2Sk4BwWUnIF/IwOzT8yxaniZF8hJFhzaCxGGC9BgzF7jErfYWg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220811160709","@chakra-ui/utils":"0.0.0-dev-20220811160709","@chakra-ui/react-utils":"0.0.0-dev-20220811160709"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220811160709"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220811160709"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220811160709_1660234093855_0.08929673146584771","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220812060931":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220812060931","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3c2d92f2527daef3346f5267a5a3d1b38d0577b0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220812060931.tgz","fileCount":3,"integrity":"sha512-L/+8AeeKU29ChMRyn+Fx2LTTNqtVbrOirgpmWYS/s6ut9ud+AmH0X3c2+TadYwBsRoZpVXJs6YYv6mUpThA/+w==","signatures":[{"sig":"MEUCIQCduLsvUZIGVtyQPsqYcvmTmtPgMhQaSLML4ziEYL+ojAIgaQ0h7aDgTIB+MQ3gx5BStqOxxc/gvqfOe9GrwMhH/zA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9e7VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwERAAiR0dCEYRGoArwxNjg0c/G++nLDkwXg/b7UpePG2WFFCC1bx8\r\nctfthJuJuYg1tQ8VICCCV+2RAR0S+jNrY4IwklX48WX5IJqDIqjrfsRSadRG\r\nOkOsG/35nCQ/PStRTDcuTBiBk/GoYjgPbTqN0DeFHVADwRA/6cbFxWLWcQtW\r\nc8/PF/dPKXVbqhqtgDxlZ0QulDs5q1OmPOOs9EOAaarQhchux2+dXGPU6+g5\r\nLkjZQPv4vSdlqQYrMXJH9ACzRwSxHwdbMzBARmerZxMr/HarXF2z+HJ08ZnO\r\nT0uKYGXqBbGDUgvxXTBBtOcDrQH4BGQJ9g1fBbesB3gmEycM6/fWdjP6QWPM\r\nIqJ4pE45eL8uRcx2BJTxI7YXrqgU6VlqJcB8m7oss9H945O9AsNL4/A8AqB7\r\nsUnrc08duqw9pHHtSNX1YPAjajso2Q2Dn6QFVQxznYJtSBoLPvCgZkbrtt1+\r\nqzuV6zR2By/RjcEEu68F7St9vvDTvIZB63DgDYh7AUBU1zDWtcqJjnGWEyn3\r\nfGw/Vn8Z4CAqCs3AGkHU94qOQjcXIZPjU3Oh++92+zFvwV/bTzemZUu7Ul0f\r\nTm0qaTeBd61hfbzCdQOjaHYKN+IjzfsroqjvH/smIxw4A6VVvXuqE/u4x0xI\r\nMtjPOmjaqayXJ+VZEhtPPRtxbPqKFpmBpnc=\r\n=kEm3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220812060931.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/87ea3f72e7a0f026b6e5351fdf404c4a/chakra-ui-layout-0.0.0-dev-20220812060931.tgz","_integrity":"sha512-L/+8AeeKU29ChMRyn+Fx2LTTNqtVbrOirgpmWYS/s6ut9ud+AmH0X3c2+TadYwBsRoZpVXJs6YYv6mUpThA/+w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220812060931","@chakra-ui/utils":"0.0.0-dev-20220812060931","@chakra-ui/react-utils":"0.0.0-dev-20220812060931"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220812060931"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220812060931"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220812060931_1660284629102_0.1536128742396674","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813051625":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220813051625","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b67a4cd59823258d4d1447b69778adf6e5978787","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220813051625.tgz","fileCount":3,"integrity":"sha512-lr9R0iDllJKp3ZekLTiMU0OQffTb4DJNe0hz7qRe9uCdO6yei0O2MlwpxI1q4ZB3+VaZsIhapdHX02GcSGzbOg==","signatures":[{"sig":"MEYCIQCFk2BuUrusjnG+609WD9muc8H78otYu0bUzEySJLbBuQIhAOPUho9vyaOZCNjhlR/zRDaZYaejmS9vCLTwILso24kg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zPiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxrhAAjM8i/Xir46SQNObo2ccYly9MRIhqu759KJIt+rTI6h3uf2Kz\r\n0USU8WSADOkT5WPvCcSNeeLQP5erW4rFCIyz7Sd71mLLJJkedsda+fKOK+3b\r\nbQsWhf8U7tBYkJm52sUlRQrmOk+c2X1ZynQyPrdh7g19p96rSGSNtTF09hHz\r\n+Pj7ACa5By0SWG5FG6qdfWgRl0BPd3nesvZQcGCHt5BSaWhSpK1JWggVkaVp\r\ng5dnB/MlZFzEP10T2OpSEC2MBlY2l+cQ3PxogzhHX206Usd0Mf1DUff0DpSw\r\nX3+qq3UfXQsS8xL417bc4ObctIzgcyWAAHlquHcRpeBGswbMxag30EymVQ7y\r\n2IzH5+VCVtZFmH2ClmBXuby50fi2VyzEMrDSNy5ik0T6kaE322OgYycEL3We\r\n4RWECcD4zS8hceiqgMfvBD/odvQrfxgf0ORy10P78pfDvt18uPytKMsFWOsp\r\nI+fXNH6L84BC+wx/cLt6X4vqKV2YVsxGSWcv7GcFrzmHqiD5Jtnd18tt0cU1\r\n/92s6EgugsjjsIQMAbOqhKWcI9DYsnsreYynyvWgZ6DVGfScuueWfOyypzqh\r\n7TRrbdmi+lyVvmMfTgh/oEMg8jmZ1mUWyMwctkC4ogGjBvzc1Tqj0gFlkafr\r\nUPiJsb5ftGyfIzz/W+CLgB/nBOKAEmPCZ8A=\r\n=vqd7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220813051625.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/5dad3bdadb1cf3c85746f47be89c81a5/chakra-ui-layout-0.0.0-dev-20220813051625.tgz","_integrity":"sha512-lr9R0iDllJKp3ZekLTiMU0OQffTb4DJNe0hz7qRe9uCdO6yei0O2MlwpxI1q4ZB3+VaZsIhapdHX02GcSGzbOg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220813051625","@chakra-ui/utils":"0.0.0-dev-20220813051625","@chakra-ui/react-utils":"0.0.0-dev-20220813051625"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220813051625"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220813051625"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220813051625_1660367842020_0.10002725149290059","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813052715":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220813052715","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f79dba7b6d042e06770efc3e711e3c90bdaaf1e6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220813052715.tgz","fileCount":3,"integrity":"sha512-JLJk0p7gFHDzZZR+2P6scfDQDX+VMrPF4GF4TySVGmZ1CBFEPfBNknQUCLC6rugO55W9/EhT+k5zy9k1nCasIA==","signatures":[{"sig":"MEQCIAMSRzc3yOdymKzKGA7fQHu6W7/Bchs5tH2LvmvlAo2XAiBDT0KWqqyNFfGYPo8OQkjFfBeT0zK2RdZ1bXgvskoOzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zZyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRWxAAkF5sA7JsneSlvJxWUQycSOKa2l/nS52nTe8UE/EGX+fHmm5w\r\n0mI1Vl25OOojEaBotbA41DBrJ3TklqXNAHuc7x0KTGa/45vScVUlFRIO5auc\r\nCD3hdABOTgXyFLIvU0nU8ei6GYsCB9htJS5vYUHeqwz4iF1FdFumSc6cZGLP\r\n/sRxTLEopbsx1kKazfSNFe7VL5yrJMOiN21HCnqqbCVx87/RrVChIvsazw4v\r\nexREtTV+7vWqOM6vI7TXglinA8nohaVuhi8l+R7LAFizrVjY54k4pfE4Lz1z\r\nvWjKMx++O/hQo29a/D5tfaOiCRwQQIXHk9ivDZTWSLbakhtulJrgx0OjA44h\r\nWkceC8u74rbPa9PZZUWQe208D8bFCenaMuU0AjnScKvwI8gdre/y87NqXQPq\r\nx5iZ9jLNqIFZIj3UrY6zvmxVv+TXvKMQGtxZuP7NhdN/PNm3F84Vyqzjy4vV\r\n8jAO3E/A7r5lILfo0j363uiMmY8AoPklwp2hqECykBltKOeMfhQhGB2m+D6A\r\n+6HKJx1/TC7zy3awRWWW+p1EFGDYXEPHEW2gVEPkdWCB9i8nd+DIHVGu+HOD\r\nk3Xff+DpQRfyCQR6ptZJqhvMM2OpPp5Q/jqXNtPcLro5zpXAzAs02ST9tvFT\r\nNuRc0RyuFD3vtsG6kexa4H332MGxFIlRRRI=\r\n=T+IA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220813052715.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/e98fdba9a3dbfc205f9461f12516aa65/chakra-ui-layout-0.0.0-dev-20220813052715.tgz","_integrity":"sha512-JLJk0p7gFHDzZZR+2P6scfDQDX+VMrPF4GF4TySVGmZ1CBFEPfBNknQUCLC6rugO55W9/EhT+k5zy9k1nCasIA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220813052715","@chakra-ui/utils":"0.0.0-dev-20220813052715","@chakra-ui/react-utils":"0.0.0-dev-20220813052715"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220813052715"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220813052715"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220813052715_1660368498282_0.26676214536005594","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813053727":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220813053727","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6f9e4bf8ddb1dfd134cad805a8f9173cf067b8dd","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220813053727.tgz","fileCount":3,"integrity":"sha512-iNin5O5ycAolT8QWoRWuMS3aXo8wiTNLbDTTbbSR4J7gCs/6ZY/hjXDY7YR2izFYWzu7XKsd+TaUQ8Hx3OtpFg==","signatures":[{"sig":"MEQCIC6Zlrt6NsHst+FkeZut9ni2KDuQKsZ1tqP5W0mZh1yQAiAlrxVqWPdqerJTTKCXZrMlhn/vxDJi19661yDqA05blA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zjbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoE1g//epaxM8STYJ9BCoiyb/GhtsPABIIYlaVOa3HDpRLyMhK81/ip\r\n6kAxJcvqtMEsSbDLYwesR+1ZpMHgyumbbZVUftmN5Kt8cFtA2dTnfWJaZrmo\r\nG/sFyN/ybYtP9EurzqgLoKUT8BOxFZh4OWXxvghbF3fja4lK/EM+n4EsOqzB\r\nEFh7c3DOxkV7nXrsND/lHiEQMIdyduEhZvfjx+ymV/jgvHkVQSNORupBW4zg\r\n4eigSrhGQA7Lby/Vq9EJBUX17OlG+UI7iJzmeD0S0tL8833qIYtajXQBG0bX\r\nCPfyMS/tJMTM70pxqbrVX+F42CaIeVb3iQip2SisWh0UQF9IJ9OJJGfcnK9l\r\nnvE0YrqbbxFuHgc0fNFAkvFV0eyV/sGk5kWv+So4Jllxv3RcssrkrZJ9taDb\r\nUBibnzRoXm4tOlG3DYZNA7wXoFsPQqGiBJ4Qq8VC6EKq3GTn6z9CqtRQsF3t\r\n6M7kksgne4kOWqnbhg77ua8oHBXmYO/5Yw1+puI7OABh+4PDcl8O9VklIZLu\r\npNTO3P3cnLOCbxt/jdTwLWTksc+xPG6iQIqyhzAEQxzlMal6ymP/WIF28GW9\r\n4HgT5LG5PHmxLK8ku7EjCQc5phLo6RueQa7bRkzceQE2pzfKgEfQVc/0136J\r\n5oLQXDrgpaf/hFd9NgsELtJyAKwbFtsizWA=\r\n=0SuB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220813053727.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/07f8afcaee8dabec583380e291ec1011/chakra-ui-layout-0.0.0-dev-20220813053727.tgz","_integrity":"sha512-iNin5O5ycAolT8QWoRWuMS3aXo8wiTNLbDTTbbSR4J7gCs/6ZY/hjXDY7YR2izFYWzu7XKsd+TaUQ8Hx3OtpFg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220813053727","@chakra-ui/utils":"0.0.0-dev-20220813053727","@chakra-ui/react-utils":"0.0.0-dev-20220813053727"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220813053727"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220813053727"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220813053727_1660369115007_0.7179215910615324","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813055957":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220813055957","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"308d813fc6155a0546d0513299187f51c504cab5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220813055957.tgz","fileCount":3,"integrity":"sha512-hB98bj1ScXqeMResfRXdmaFDBLDS1H9zW+JJIS3dNtZQI8cXRFgwnikQ6BDbXihDhhnOeIfIxne9STKH5vS4rA==","signatures":[{"sig":"MEUCIQCKTCbWh23VbA5ADwka70EXEybKVx4DV7YSShFlPm0RZgIgLF7d5VXH8UxzYzWzwDjzFzv1CXBWxObNOs5LX3/oA+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9z4YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOnQ/9FvJDBljKawX5G+kESOXD0SeAMRNQd+xfbbmFEfkt1RgzbyzO\r\nRNP4y1Uc/iHsw0uD1hMXeRcBqewpYxZRGVzD5B9qJeRgK8lrCNym5mGmbuf6\r\n3zHx49s2Q9Cw7ub9evOM7sxqtjwm8bwu1bQ7bcHhOBmm9dF9Gy4J5p4cFooX\r\nUBBtYWWDEcOEmmJ1WQaTaE2twqOMN4iZCFyvzLl7CZOzbdWrprnPafDn/6fW\r\nXcIC46T4r0WskgNbwMurYaXMphP4zTFY6kpjJALxuV7NZL7wBhQTtBiifljE\r\napmW6qne8g8reDd5lGcm8Ggs2DkWLYj1P+YuTDy3/P1ahQWrBD8xQrOW9A5/\r\nt6MD80yKPOOvQ2594EGuz0qaQMFpWYn1O+eiU3h6ibPF7uGVqBPvSnikFDQ1\r\n+78orWh3LI/ZDlx8ivtX//fxOpFCw/Y0f39+PrYE4IcqjxTB5qGRdohsFB5e\r\njzq2V7Eo8vA2+3RL6LELlIMrS1kV/omCBhVxhVEPupUJAOFhmcYnmhVz22n4\r\n6bpXvNeltV7f1ioEbrri0t52mrwR0vFudX5WJrFuwgBMVcEmTTVY0fzkk7jH\r\n/vlfoCF+E2pjC3KbLovnJcdCnRsLPZghnzxAdkgXkFKjmL076LCQkpZh6m02\r\njiSk7AREYWpycpE/Yb/QmhyRIBRD00lVMn4=\r\n=lG+R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220813055957.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/1df7b2b71e6bb10173e3a68e9c87f6bb/chakra-ui-layout-0.0.0-dev-20220813055957.tgz","_integrity":"sha512-hB98bj1ScXqeMResfRXdmaFDBLDS1H9zW+JJIS3dNtZQI8cXRFgwnikQ6BDbXihDhhnOeIfIxne9STKH5vS4rA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220813055957","@chakra-ui/utils":"0.0.0-dev-20220813055957","@chakra-ui/react-utils":"0.0.0-dev-20220813055957"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220813055957"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220813055957"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220813055957_1660370456850_0.344656241952374","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813063717":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220813063717","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b1e7aef57c3f52218647594b92148278ba71d874","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220813063717.tgz","fileCount":3,"integrity":"sha512-IWHGvF+f73vDNNxPsYpoFDii7Y7+W5HufwIa04Zyqym9wynHoA9dbiGBmU0lQqJudSFRM26uXPvfsdsySeXQPg==","signatures":[{"sig":"MEUCIDgsHXTQHLqaV0jiMsiWHb9fJXR2hPKIPirC4sS01tMVAiEAiq96gj6W38mGH3JvB5X9KOlyUf3k+wTeAANb8QRG9VQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi90bUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoujQ//dJOHW3P8cp1NkfWFQXtGV6wxX3lK5qDeVsLF/uI0cqggb/Nw\r\nShlKgwzqmy6taVixiptcUuI68MHUe9aU/CSxhkHP+f9oor1r73LhkqcuhgxI\r\nEbbGy6+WW4hWsylOOZiHGNChX5v9adOXqSkETyiPCDZHVPHxTgns/y4kO6Za\r\nnTM94TDWpfFqDjMi3LYNGYmLUoC4xndlqih5vmynUVcfdFNSNzJhoXD62tPk\r\npr4e2VrhK80qa7f/lX3whd3ppau3d+IB4qJIS919TsloXo3S9OsTVDFXehQa\r\nVQKJJWaxpx6ad+WtO2jNs+wXvEbCrS8SXu9ru6i4bpxUtcTa7Qda9HfKmaED\r\nDrNec4B0C1CjHki005pXnkH0lXPzwXzzONidJh+OXQCeCOH3Jj94E/FOvWl0\r\nESEXfQZbbaTM1U+BkzXnX6Xy+0qVmWuuJCeYIcZ90VjpCxoIhoDgrYlhyrZy\r\n7vF1SGB1xX/DQwcqgqPkZ8uHaCBwXGAF9EDLn9fyqqy3ktgW6PVE7ugAQ8Mb\r\n9ZYEfiJ5NEuE2TAblvzkyiuGZTpMZ9hT5m5Ed0c9P3aUeDOjhUX988rsQGdX\r\nSsOpb6cFJSaU9rhOpeINSk2w/Z6rWn48GOupaaXF1HFAvJVAFA2vENVICnFQ\r\nZY291suZ8lFUXxBlvKhtZw0g5JAWx0WyGi8=\r\n=hSMO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220813063717.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/b98d0766a29e0fb51098347ad6d3d4a0/chakra-ui-layout-0.0.0-dev-20220813063717.tgz","_integrity":"sha512-IWHGvF+f73vDNNxPsYpoFDii7Y7+W5HufwIa04Zyqym9wynHoA9dbiGBmU0lQqJudSFRM26uXPvfsdsySeXQPg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220813063717","@chakra-ui/utils":"0.0.0-dev-20220813063717","@chakra-ui/react-utils":"0.0.0-dev-20220813063717"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220813063717"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220813063717"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220813063717_1660372692034_0.9521549756102448","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813070741":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220813070741","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c1e27083640df856c53777b2791223cd6b4d107f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220813070741.tgz","fileCount":3,"integrity":"sha512-zJXiO7vEIcAa+z1pBskO+ud44xCbDl/IFMrtvuKZBk1LxUOOoY4IWze2BEbv6upJIYRFhwXwECnxa5poN0k3zg==","signatures":[{"sig":"MEYCIQC8899OmUeprU3t7T/WUHrVVRezfqMvE45mZybEDwtJ5wIhAPkcli1xYVMYi6N8ov50toxP6IlPQru4tIJpjoxVN1b+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9031ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpavg//SN9rKpoQ7h6q/PpYIG/xbGfRp0nXoYVOLa/LEkQNbzK+lidq\r\n1WartYRKwohNw6vm+Mk3ziNh6mQ34mqxzTrosMfbzRp3zAWcju49MPDpvSBa\r\n7iiTlY6hv+KTn97HMAyFRzKacPldDk/PM4KrulWyiH1IgF0vBBaFEK25b3vl\r\nCkkErIegi5t8dqkGUKzs8JIFkPUl18P594oOuwP3ufWrl+C8AB5OqmjlKNVp\r\nRFcPvV32EahtglhczHDMpBlIVQrEB4ooPj7NHttagfDMjY/gZYPjEy5wiscF\r\nJ1BEVKam9lyUZpNaVeX7S/kX0KccGqIHd4xMaw3WkKR6Zt6VZ2WSbwaR/h9R\r\nxt8P8JbrCsWwFa600Dc271nTF+34Us3kne7PMeKTyCFFZhMUJeFHML7Xuce6\r\nLlqpZ4hkiosCy4MT4Jz+0EWd4BShPPKz/Kf8tO4PEGGvPW7m/LvfmY0QzcA7\r\nNcKZMcJl+Rsd1cj9QhDD7WGrRGjzafjYRIdOrF0UFaFnmuT8GzTrxO17wFC/\r\nWsAhMoIb+fsbW8h9qWEvxaTPGS2sO9D9547VvGpE6N8dnhZS1txj/yuokxFB\r\nYclthmWHlYIWtnNxVqc3CNKs0EcBkM+QENfSFHG4GNl9npoLNZcGBy93RRqE\r\nqgEDa3owxjjgnxqTlsOAsoYuYQtjrLH5DvM=\r\n=STDs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220813070741.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/6439dde41dc8030c05dce655497a4668/chakra-ui-layout-0.0.0-dev-20220813070741.tgz","_integrity":"sha512-zJXiO7vEIcAa+z1pBskO+ud44xCbDl/IFMrtvuKZBk1LxUOOoY4IWze2BEbv6upJIYRFhwXwECnxa5poN0k3zg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220813070741","@chakra-ui/utils":"0.0.0-dev-20220813070741","@chakra-ui/react-utils":"0.0.0-dev-20220813070741"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220813070741"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220813070741"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220813070741_1660374517319_0.6800144143579989","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813083358":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220813083358","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"67a9e47b40cf8e60a0e50ce86f93d99c84484bb5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220813083358.tgz","fileCount":3,"integrity":"sha512-2vtAwiRxmXhZIIwLMzastmwEHCrV6yc7WxRQj1xLQ6gJ6xvJ0ulgVYYp3Va5BsGZNnt3xYFBloQxijX1zN0yXw==","signatures":[{"sig":"MEQCICcHnDlvrP7CfDJspbJ5zUU7ESQABK9l1lmbl7njKwMGAiBVUqOEuHNeFMl3i93AL+MoiJ/XJ8xGDvMEmd/MENFxDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92IvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAqA/+P7cx9H6GQjuSHGOVov0BNcolzMrDWmTFYOXkso+kFKOm3bdN\r\nC8frnGI952wJFcso81APK9emuXXTKl8EjGQzNWqjRJvd9BHEAesefsQiab77\r\nusO45F3hN509zk5jrhvsM3us9bNfsAs1+qhYshyNaoW4r1IubKeS33Bi5nGZ\r\nY7BQGoUhZa15ZMU47sqsW8Ib9GOBiaRJw5Rc0Y1NKJ01oil9BQ1cwFheix4K\r\n5n/6fCK+xnMiPozWBVX+pcSk/H8xvxycEzmTH5+q4ofq6WMxXG9yfWzI958+\r\nRlEJ3fvTzG0+h8VOqgRqH88QSX0oCBTADWN/1nCzcrKJHRz+rGNLDG+osEIX\r\nUx4GGTIFKfMsCPXdgV75EwVKRUDvdX+L+OAY5zIGioiJgCAANHhtEQkIEq6W\r\nZn4/BwasnaSjHuqanuf7YIs+pBhnfgmg2yr0AvA2iRIiaHEVnfFx0wb9jpXK\r\nu0FCN6WIKR3KhRGbpSgDi9Q0Hd0OgPJ4/GWHQAWMg3nkEEQF7lg8SIQCLgGs\r\nEod6kH98EzWuzAl7uKRwTZ/DcztLOh6dvR/Ty6aeH+jKCtMZYrajZ0s9HDZe\r\nWs8gRx7Rz2KYo+GxhUNhFtLJ5wYsHEb9yAfkHYkG5RaWTY3pbBSessNcWfXy\r\nwCIkQXry5BEKTYOF4T2gfzn3rcEldd/PwZY=\r\n=8pvm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220813083358.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/3b22f6ecbd346376fab437ca43c9d180/chakra-ui-layout-0.0.0-dev-20220813083358.tgz","_integrity":"sha512-2vtAwiRxmXhZIIwLMzastmwEHCrV6yc7WxRQj1xLQ6gJ6xvJ0ulgVYYp3Va5BsGZNnt3xYFBloQxijX1zN0yXw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220813083358","@chakra-ui/utils":"0.0.0-dev-20220813083358","@chakra-ui/react-utils":"0.0.0-dev-20220813083358"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220813083358"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220813083358"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220813083358_1660379695212_0.35266488928242046","host":"s3://npm-registry-packages"}},"2.1.4":{"name":"@chakra-ui/layout","version":"2.1.4","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"32ef576bfadff5c50a879c43cdb92824403e35b9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.4.tgz","fileCount":3,"integrity":"sha512-YbK48rLq2uPdXXi0XuGInIcg9U7CPaJAuE4c+EjgcwxjGp5nNGkFpneUVJWc0Gn1Y7M5xsJPT3exBt8O2Qzsmg==","signatures":[{"sig":"MEUCIQC8V+g6Uw64Oov1kS60OP217GGg9NOQzk1Qlye5vPY8QgIgCQ7+BJkBve8edO52pAn0uLy9JgBKWgSTLYrjViBbbZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi94HiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTAA/8CMhTO4QLPLDu2rQs9ErUONDAGCA28ponhhgWkRlDyOLVxRVc\r\nHrP3h3GaboPx503IFZXlyCTGSbRhPfMcsx0IF2JqoZNIDEFdrF7LE1ap4E4R\r\nOdPXsqEpXdC8hxL9JCQp6R8ZPea2yvLagmFxHz+DxdUJBc6Jtek7jzvH4jg1\r\nWVjIF2QwiX2AWmknwAkTUMOe/ftpOQQ2Bps5skLtrbqhLC1qh6hkqaKcqfT0\r\nGhgHkv851HBnpoVwqT2XdQmACXjcxZH/3UtOU4VMMPQvMQOtuh2qomImIajE\r\n52G9XjPrxuBlpxm+cB5fqGNIVcGsU7j7CKodCJR9+fMZ2aOO0SU0lWg2ECAl\r\n4e8zYEZezdXx6ifzUQJb/t78BptVq8RdZUf7mZRa7tODuZnAcMt9LB7sFIul\r\nbGgoAFu7psCa0LuOhqBsPV9ZKmOzzsrVBU2fHX/n3v2enl8O9W7tf/Xv3gyE\r\nNh7IQvzagQfyn7XuGtuMq6PrXeNOQkVgpInRz8XKNZyDxgx6qqc1c5mCqi3R\r\n3Wsa31URApq+1vaeyRkMsZ3KdLXd0dk2Tb0wU2TJhoWjS9qLw8pwWNJe0pVn\r\nTH9xssTLxj5mvjt/Mx/BPG/tNVVmd0sTLa1x4ndDzKEAfENcL3Cz/nzAPH8o\r\nVehWqDDuqIOy9jjC5CGKuc2IJq1WrXH+woc=\r\n=YAvY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.4.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/5259974b601df2aefdeb8a4ae46c2f4c/chakra-ui-layout-2.1.4.tgz","_integrity":"sha512-YbK48rLq2uPdXXi0XuGInIcg9U7CPaJAuE4c+EjgcwxjGp5nNGkFpneUVJWc0Gn1Y7M5xsJPT3exBt8O2Qzsmg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"3.0.7","@chakra-ui/utils":"2.0.7","@chakra-ui/react-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.5"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.4_1660387810291_0.22712506254938902","host":"s3://npm-registry-packages"}},"2.1.5":{"name":"@chakra-ui/layout","version":"2.1.5","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"f307a23580de6cf04758be8e22fcb9507277186d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.5.tgz","fileCount":6,"integrity":"sha512-8qZwqgmY3itr+DfCXCxgEIwdy8GHKgAxojhIo7Exnu7GLHZhCcQ9Le4lVlHW3pK8Wy2wg3dPUX+APoMGkUcBsg==","signatures":[{"sig":"MEUCIHmblpIcIsJuvLE7di/LZKb+LIoovmUihsAgAKgPu2kYAiEAk7bBFxXYovC3aikvBuA/Uvkuw7oSxZrx7RTQWsBad20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+KAGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfmw//cIzFViP6CbGr0bG6AVQJv9Mqme0c1VjtFbMwtoKiP0cDJdBl\r\nXUQEherOpynLu1TqhW2HmFWlH5tw7pnPv24SfxHSTcDNQLLXU0QMmhgHxln9\r\nx41w4LpgLZY9TVXaDdMm/KCMn5xOmj6KNF0YkgdR4ef/CC/VfRq6GdJr5nBp\r\nlFIbpxBu03uBd3P1gho0izlz6kI24aW98DwGGedopHzAsT4lTD0ce9szbwZP\r\n0b80lby/KZStj/g2hTX6VPZOabFCXZi2q+IAnXLxGeigLFOqnaehZVuLXZoD\r\nVto1OvfVP06weNriPFp8IhSxba+Jj0cBMGG8xdh/vTMWsfdxmChKyjdboKfV\r\n+iR3cu7OJhjFaBVQfrNIa0djN8Cto93APKGpOAXDeq13rv+bFQNWCq5H2I+7\r\nRTGTGUpA1+sz/nF8mGGKZY/j1g6azhhD09iRry8S4SC8h3E8wsTYDaZKJ627\r\nlvWrbSfng1ROV3ue+FRi8XA5JhbkSvHwz4lSWnxF8UjRO2sIeFf9JuRhfoKg\r\nH9pt4akaL9Kv5KQWGWuP7zqQD1amfXVy2t47yXPUMutfItrlfrIyOByvO15n\r\nrCEE+XaHnFMJ0XT6tK0YcXKKhPAMvKiPvi3O3iJvfRD94q5dMkF+4Z+mxvm/\r\nx8HEUCUGpdQoMciCoOEwprL7UpBRXohlEw8=\r\n=RzK0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.5.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/3865efc57e3335802fd5a34c09bf4db3/chakra-ui-layout-2.1.5.tgz","_integrity":"sha512-8qZwqgmY3itr+DfCXCxgEIwdy8GHKgAxojhIo7Exnu7GLHZhCcQ9Le4lVlHW3pK8Wy2wg3dPUX+APoMGkUcBsg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"3.0.8","@chakra-ui/utils":"2.0.8","@chakra-ui/react-utils":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.6"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.5_1660461062169_0.15388114234811878","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819125800":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220819125800","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"88d291a82cd948d8a01d608317636d6004eed84a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220819125800.tgz","fileCount":6,"integrity":"sha512-2sCiCKa5E5kfiA79bVm+RgIqT9mFlSrIw784/f3tcwiy3T3hvHfRBNDQxhKt5pB3SfMvBGHgr/9f5t81pzEtFA==","signatures":[{"sig":"MEUCICL881MdAXEkJLbbCifCh9/IwI0erh0pNSrvD7PYHz54AiEAqgr5p6j78/0JgqarQqP5ZGTLz7/7s71RPeIUUutDrCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/4kUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo89A//ej44c3PuPv3LaVByeQnlNPBlQQFS9vkJ+BOLFsjr20bDiLNO\r\n0cXMzks1LreZAA/ikBJvzHHjBBXbAWPXF9eS/AeFNeIk/bhSWk9/jW7nZOgr\r\n5JomGH104WD+S5bu3EDFu6YXs1feCk+plVwivCbCv8JM0l4ITtVMXgnqq0gb\r\nMyq2Em2hdOiy0kzLT4W24b8/hR5n4gXigoGZkFPM9aJR0vPWJce3QEcP4cU7\r\n+l8yW/VY3G2oLA2RFmkCR9YS9IMqiRctyfYjBoA4gIjfv34ABuHZNX9TYQua\r\nGpu3sYz14n5pG/tWLw0CUjVvkLvSumqK4iytgyvZjaDtREb1hWKh1CRP5teV\r\nlZ9LWvhEVX2irPupnSyBRyTL8B3E6XONI8NN1XlePVkhC809uvBG+nP9i732\r\nP7rLXhXKlf7DyE3sS5puKZjInkbQtlen+rkPrwDxo0vBNqXaXstvL0ahLWKO\r\nvI/OCQ1NGQwJ5D1SThNZrmIbWllbVXNPIakNvYT3tzN8wxL8+vicGOMWz7rh\r\n9vWgO7LEVVS9p65lDa8gneGFzN2pyYImIdcKnFeVdppWyDN+YUDMBOx2Ng9C\r\nbu+bTqBbRcyQGMcpsgyWLzIvyASXrf68NcyQJ/zSJCbd1rZ3Ed3fmyCnBfpw\r\nJLXbO8gSka4oqZbliPFgn38/unhRfXD0o5A=\r\n=qJKL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220819125800.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/44968afb418ef1202af06f4a2d91dd70/chakra-ui-layout-0.0.0-dev-20220819125800.tgz","_integrity":"sha512-2sCiCKa5E5kfiA79bVm+RgIqT9mFlSrIw784/f3tcwiy3T3hvHfRBNDQxhKt5pB3SfMvBGHgr/9f5t81pzEtFA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220819125800","@chakra-ui/utils":"2.0.8","@chakra-ui/react-utils":"2.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220819125800"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220819125800"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220819125800_1660913940190_0.8279587443845431","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819132034":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220819132034","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3170de24151fa352b16b1e418f8800f47fe10b7a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220819132034.tgz","fileCount":6,"integrity":"sha512-CCI11+X8SGYWHELUPw6YquEkmI8gIKMWlFlg9SvMtxV7rUJhiuelBdYW7pX+QBLxNeGKHMjshmtEUMrqEJqFzQ==","signatures":[{"sig":"MEYCIQDtS3Z9XrC4LtkKBdKU8RYalDUzzuMEOzEmmaQHZQcsJwIhAPeALDHfG6Xgy3OW9POsUkhTHMlfmuJjzeSCL6/nW+lP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/45UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobHQ//Qk9U429R1ksgdOeZ+pTnyNymM1HHnalRKF5CNcVIEzh852eW\r\nWinC4NLDS/yBlw1cBfsIMmF+/Wa8/CEKrP+pNWeDMmWOOpx5rvajijj3Lud1\r\ntR+SE3aqp/DFS/DODj1asVbPAFCuAa6Ll3ZOPSHffm5G24dj5+D3qjpzqO2K\r\ngohdjVt72J4n4kB++JuJ/p3lm0WA6F4zcrRJEN3WhC3Sb9QpqlCOGOk6Q1YE\r\nIokmwHfJTROZUq/M2qVibMhqJO+aRKgAiz5XtWd8Fnn6E4LCT4OHvJMQaV/U\r\nRkv0iF+Y1PWWU04MG6OEWD5QIFwVr76oEh2Bi1uO3BNF1aJzIsszPput1zwg\r\nmHdNHsM2gmJuVsxWdNpXMnau1YfnlCntceMFLyNlpJFBDP7DYJLKYHeehsB8\r\naoHc8+I5oWwUHomRwH4E0ANsgUI6gKTmtYFlQbZwENQhK2MShQmpxSBEw6sZ\r\n39Xxlk+43kdEkXGuKtRyT8AMACQ2o8eoyi+MEHy/nFlQvtSqIMZZStOdBXtQ\r\nwsW1oKffEOky4KbPlRCFIk5ny+HQ6mHZaAFUwyTMCKULxBPyZO3C7VbdnsQB\r\n1rOGohFuNLdF7cYiEMcDKoOeC1jt3aY5DX1TzubwQ/ht0tWq1aGTR0qLXzrY\r\ngsX5P0RMWCCI0TRwFVMoDoaIwDL9SbZi0Hk=\r\n=F5oS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220819132034.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/c376a452f2275deaeae296bc3b88e3a5/chakra-ui-layout-0.0.0-dev-20220819132034.tgz","_integrity":"sha512-CCI11+X8SGYWHELUPw6YquEkmI8gIKMWlFlg9SvMtxV7rUJhiuelBdYW7pX+QBLxNeGKHMjshmtEUMrqEJqFzQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220819132034","@chakra-ui/object-utils":"2.0.2","@chakra-ui/shared-utils":"0.0.0-dev-20220819132034","@chakra-ui/react-context":"2.0.2","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220819132034","@chakra-ui/react-children-utils":"0.0.0-dev-20220819132034"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220819132034"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220819132034"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220819132034_1660915284629_0.07413599454760189","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819142048":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220819142048","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"32b74c9fd1cc001c4fbfe6ae881a6631e8992f3c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220819142048.tgz","fileCount":6,"integrity":"sha512-5qJq9q6SM2SS8HJKjek3Iy9AehZbZcwQNV1j0Y4379iw6TmzIFs4ld/CqzoyoPSqN94dBdsk88XQzDtHxMlYZQ==","signatures":[{"sig":"MEUCIQC+m+xzmmxuaoevAJoa0W9KvQgyijkJsMJ0zeZevzku9gIgdamClkAR53cZTPQ6UybNUfAY1iVPESMk6Rbsar7S4YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/5xwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGyQ/9FQeZhdN/908PZ7hdaRPJd9ptvb3wn2GC83oDSU2U3TcAdyCZ\r\nfUbFJNvuCKNrtGg+UbpPTfw9UN6JLspYDQklxIjcKzHD1j/cVfVF9Bg63/Pg\r\nY3zwx/T5NsuXdgo8g+DqQAfcbbfHIKf1nJH+f2J4TwqtECvr30EaqKI2pZZf\r\n9Y2yIcTXZJNUrYIJeuTw041w6SVSEyqxYeKbJABOrUxZP6BfAqhTZNPKzO8Y\r\n57rjnMUKiHGIcye5pbimYo6XF8FLKWxTPnTzzLMhMPibZcROP2kY67YjuKqW\r\nLZ11xwPZ3Ps9l4tb6o0cqQ32pGo9iOn8IlbycwfXYAtKXZvwYKW5pfKAkiII\r\nR2CK6v73oJv+AZG0Zwju1xp7IVU33JWqV4saA62MNjqBP+5ky1pv60HjdFQg\r\nYjl2nOnirAQGyLma3wMYPLDHhMIAN/DBFHXarHnVpR+FF0llCcCpgUAXODHd\r\nEkcijy6i1xdzdSC0lOR1FIZdGeejnIqPOeq1gz38vjFkuMUUQEpy9pATYNGb\r\nOAQJhZ24S6dTHV+F7jQMIxihm5IJW7KYVnu6aGBhwDgjmghbict6o52QQGRB\r\nvQ3mQLqZuG3hEmoUTFnvLuTxIdkikbf91/o9vk9wXAgtt3rWlynejsOwziJX\r\npe5dLlm7QBODqP3eRpJtYW49JaY7N50IAsk=\r\n=B1s/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220819142048.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/fbb5c0a53c76124aeff739c3c3dd7556/chakra-ui-layout-0.0.0-dev-20220819142048.tgz","_integrity":"sha512-5qJq9q6SM2SS8HJKjek3Iy9AehZbZcwQNV1j0Y4379iw6TmzIFs4ld/CqzoyoPSqN94dBdsk88XQzDtHxMlYZQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220819142048","@chakra-ui/object-utils":"2.0.2","@chakra-ui/shared-utils":"0.0.0-dev-20220819142048","@chakra-ui/react-context":"2.0.2","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220819142048","@chakra-ui/react-children-utils":"0.0.0-dev-20220819142048"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220819142048"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220819142048"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220819142048_1660918896600_0.22284122101986692","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819143632":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220819143632","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"221128061bebc0a9557775ddd8bcf4bb7662e2c0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220819143632.tgz","fileCount":6,"integrity":"sha512-aQZieCtoT29AMoFRxYFXww0HVZBzxmALIYgJX05q4ykOIfBOX55GkaCcMaVNIxKJ73Os9wRfmFnP8z3mSEc7uw==","signatures":[{"sig":"MEYCIQDXk9lBE3FyHvo6zmUJwDQEBYuhf6jgcSasaVxgajVxkAIhALirqrAMJLz4MuTh+MJHTkyJZ6J07C/xPLtWDe9gMK+p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/6AoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmretg/+JCm0NeIrMA8vRCjsUn0Sd2i/207v7krZ/JL61UBEh0TACyGW\r\n30TJZjUw5JGp0xjqRTy7JBzFgLz+hP/6IUytM9TlFPQGQ7obdfiA6f04eRAJ\r\nYGiu1FsNJ39vzp9frhviu6h5TJS2OKbiQZeMCWHnx6v/PbtVqFmMCcuwrLVY\r\nNGOnV6NH+Yd+zdvDXUATT765S86pCR0fCvLIjG3Cs9PjaqxLgCMwx6b5JD6U\r\nY1AmSwMKS+vgPdOl87AJKyznV3BLCpmGPZ2wrHk3uOg67zs/aq8Y0huFQZeQ\r\nT8QLyUwiPt1MgMlQVv674vWAusmpS2PmaxTHoBMbzUHY3B53LHcd6b9k8Xdd\r\nzVlWbAUedgcSz1h7Y98ue0H0ZJlY4u79bQMLxWQMSlMtGDb4GyiV1+mOvnVw\r\nSvtp7svE2kn0xExsyaUI+2pMZ7tX+JCHsLiSk3RRfg10b1yA+S8bEc/onYXt\r\nwk5rkeIL2bAjpJhMWxwFoXpVO9CVjqaIkJKpZoPkVr5546BsuE4ViMXsiw0a\r\npekExkw6M9ZtmaTcvFOyqc8s/JOL+Y/YSZWFft01VpBTlOWV/8LSHuTzwGWD\r\nMnNcKX7W0xsy0J4xCXn/tb/SdzA0wzHiWXhjJfijK84j0nvznxq+p8SonO1v\r\n9uXe3OZDNYBcf1H+MF1UO3qFGgdtE8fu5j0=\r\n=d15I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220819143632.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/7ae6250dafbf0d376eb363038928aaf8/chakra-ui-layout-0.0.0-dev-20220819143632.tgz","_integrity":"sha512-aQZieCtoT29AMoFRxYFXww0HVZBzxmALIYgJX05q4ykOIfBOX55GkaCcMaVNIxKJ73Os9wRfmFnP8z3mSEc7uw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220819143632","@chakra-ui/object-utils":"2.0.2","@chakra-ui/shared-utils":"0.0.0-dev-20220819143632","@chakra-ui/react-context":"2.0.2","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220819143632","@chakra-ui/react-children-utils":"0.0.0-dev-20220819143632"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220819143632"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220819143632"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220819143632_1660919848437_0.5980467327218992","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819191103":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220819191103","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4ce20460ac716b82ba3afd319c65abc47c691935","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220819191103.tgz","fileCount":6,"integrity":"sha512-EUzLzP/hVsFcFulkGQmTGn706Oz9pMD7KXQyYo0Pqkl+tiZx5SLz8emgEmvT5z77SyNFanVz7YHu/oO+HIxWyw==","signatures":[{"sig":"MEQCIC3t9R/BLbfJgoDlLF5AYu2z4V0Wj4vyjoN5DThBwKdkAiA2SJ1UvxWp6HIAFiM5lLaK8uuYM2Xzxt9R3eSYy70Q0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/+B/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpbvg/8CIyKp+e85X8qXWVo6Flmf7N7HNNq+AatSthDTl4xUb9lWEZo\r\nAcvsLbLNqZ5dwR8Abg57H25mtXBnUjBV/Rn+McGdyylUY3TI6aqK9jtma4jL\r\nl+x+kuO7legZKMukmBePnLnx52t5g6ipuQdk/i8gp5HP1fvBcfD/j4EQyikF\r\n5aWjwd0C1fFUNufzlkKjt8tm6TGeO2AWDqgB284avIh0BVEx542p0dyGwjgI\r\nTC/FXafpTVgb8G5dmi7puF0G5LDmhTe1OI1Ng7OdQRojlYTthzjIoKkb+WdY\r\nCwVROsTzO19y8oKhfe+qhIzumL6VOsHlMaqBe26PknQeJqMN8sTPltQzP/5H\r\naPAtcrCFAlyjxUXVPpZG52DW85oPBLaPo648w3vaXQsYI9nNHZHjfcx930pH\r\neXqTGN72+ZocHAnrycnK7l/aq2euhGIYc8ExqxFIokekrhL1gnEvJEBmbbCI\r\np8s/7tRfH+XwPU8whdkOg8VWil8xh/tK4bzZMY6RNFgV/9v+JWXpMKnG9wyf\r\nPGVLY5FwqGf4aU1ZkNdMBlmcIXBIGPYvxt4Sxrnh8MhxtEv2HdzUqzLCscb9\r\nj9obIi4jkYThamigYqxwMB/UiM+yOxPJZ1Z4HjnZr/ND3ICjmTpn3NaqNtei\r\nMf0qjz8pOj96ZjAYxYCrfI6VxLg/V2fhKSQ=\r\n=7HWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220819191103.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/282cbd44f16964c8676656d9ba1d6519/chakra-ui-layout-0.0.0-dev-20220819191103.tgz","_integrity":"sha512-EUzLzP/hVsFcFulkGQmTGn706Oz9pMD7KXQyYo0Pqkl+tiZx5SLz8emgEmvT5z77SyNFanVz7YHu/oO+HIxWyw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220819191103","@chakra-ui/object-utils":"2.0.2","@chakra-ui/shared-utils":"0.0.0-dev-20220819191103","@chakra-ui/react-context":"2.0.2","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220819191103","@chakra-ui/react-children-utils":"0.0.0-dev-20220819191103"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220819191103"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220819191103"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220819191103_1660936319303_0.18961727296873732","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820120308":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820120308","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c1264cd50bb78c7cddf9c9c0d5015f8daa7bfc86","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820120308.tgz","fileCount":6,"integrity":"sha512-lGzEoiqGh2eJkpyAH+TZwza3q+Ame4hurEoQJ77R2bMEgJvX+N6KisRv865OgJyU/aq59dm8S/USPXv6HO9nMg==","signatures":[{"sig":"MEUCIF1fhkqiE9+CjyKi6LfqE7uG53uzOo9q+CtLASJPbSs/AiEA9KmK9bGG2nar6u2WBzfkE+z0D5e2zFeM9NmhSkkrydg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAM2rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr03RAAi+fvseck6NkiXWEDzlR36InfY2reO+DqIMV96gYgejyIpYSQ\r\nStuZ480Pe6qVK/BV55oIYGh3/VL40lWwFI2e1QAMFAcl5tB+5ki106J7h8fL\r\ndIWb+X2EO4KnyU8Ne23+d6zOF9kcBD23HxupVI2WsqbmFjHJPtFtGV/wU77P\r\nnZrdCdK7UkXZusZ1guaua0r0w+uJURi6JVyTiyOXfYIZ2r8R/CtJ9g7yHj1+\r\nYms+m/L1rkJynJWnfNzOchnEVLPyRT3StNMMzWk3H3HJJi+H4zLCNwwdClD9\r\nn/Qip2er70KCcsNjqbAcmFFpGiPfcp2JvcuIccxupOu8mEtLz2lIa8aswkBL\r\n88zSdecaJRu/aTZ6LZGsAvx/G0oLqaz9Gq2zuqGKsewfJ0vFIXm4FACsC1aZ\r\nlvLMDNQM7iY7V4sjHKHfplXlX3ngegzNJmFpch0nhY+1AAUUg3axPAqynwkw\r\nl4frFNj7N/5jFZUjvWNEFTXchocp1KtMOVrzNzpit3+qTRDNeBOrHp1tTwjV\r\na8K9/+dPwb/Z7i3UKX0+syny2UP6OQydzdu9E8p3OsL0F8Ub7F3iPts18LnP\r\nh7myk+g/TxqyXbeHuaY9u8v9F88tKelE2UYHcDGzYCW3cvQ2XFJMryNfeENh\r\n6KVSf6r6FCj/0W0kYUQFbSwbxmITwlmeWmw=\r\n=uDfs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820120308.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/f68a51f75eada8ada0e73bcb6ac93009/chakra-ui-layout-0.0.0-dev-20220820120308.tgz","_integrity":"sha512-lGzEoiqGh2eJkpyAH+TZwza3q+Ame4hurEoQJ77R2bMEgJvX+N6KisRv865OgJyU/aq59dm8S/USPXv6HO9nMg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820120308","@chakra-ui/object-utils":"2.0.2","@chakra-ui/shared-utils":"0.0.0-dev-20220820120308","@chakra-ui/react-context":"2.0.2","@chakra-ui/breakpoint-utils":"2.0.2","@chakra-ui/react-children-utils":"0.0.0-dev-20220820120308"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820120308"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820120308"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820120308_1660997034856_0.9379449601970471","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820124231":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820124231","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"813a6e2b86eeaaed5cc565779014a8f2ca795077","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820124231.tgz","fileCount":6,"integrity":"sha512-b5ncPyXdsPaA2u3RyWnnYbSeTE2/nSz4BpkouBn3X4NSsRr033rhDp8nxdaVrmSvcC3iC6x3cpP/Ge2wNRmP4w==","signatures":[{"sig":"MEYCIQDdyDaSvz/pL71vEQIMYpW8nfvAkNCkv4EoWsbseavF1AIhAPhyCpDkXXpMJoSSiVlHXFQJNf/tOwnHWHHOZ/TtbZ6f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjANcFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3xQ//RBQRlLWJiyEcFjXDEJn96nedhOt8DgcyncK+m/E+diUMnpD+\r\nBNOjZOLo5wAJ7xoXkGLRr7IDwavBsZkuehqPqaxt//NKq3kPfM7WvuQM9BFL\r\nDNZIBOLsHDhRi+nrAfRf0/2mSew076SNB0yaaQW5gJsCOpfGGiyrRuHFQqDD\r\nx1uJE/smEOorWjeyW3Ce1u6VnwVpe+15gr7VHXQ24EhHYOJwK95LPEJv7hBQ\r\nYOT/Z2A0I8bkK4QMxDphISUItr/+BOeoRf8nwa7wHSYQIUzncEyydPj/lTaA\r\n7eSuowLXBsHxLlvpchCS19bwA9WcHnpx3SQezDdKTvpPGnCXiV6dgLTdNvp9\r\nFAGjWm3M2sfxROQc91IuTZaIFYlgDYadiS82Yk9jgSkOuxkDgkr6Ldx9Sxdt\r\nl9Mx9QTz7RtdLdMrwSKPBY135Jzn/N53Jrld2Hjaqfq8FsguXaopAVugYQGL\r\nZx5+zMQPPbbkh2L2TK0+To/3+qTbcvmAEmthsXlQz15XXqHnsV12naAJ+XJR\r\n5+prIPi64rK3IlvoDDpF+2VHmBifuORaxezEHnyoNXbL2WS+w0e/MF/mA9UQ\r\n3sZx5WVfuXNTSai0BmtayUIR1fnV/0N0JuQfe4Wzw5IgGgva+L4hdzYY4d+O\r\ngFtLRS04VtH5/Ll7mBFQGPY5YQPbNiuDD4s=\r\n=IOLJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820124231.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/28cf4f08d81b06bc4aff13752a56e4c0/chakra-ui-layout-0.0.0-dev-20220820124231.tgz","_integrity":"sha512-b5ncPyXdsPaA2u3RyWnnYbSeTE2/nSz4BpkouBn3X4NSsRr033rhDp8nxdaVrmSvcC3iC6x3cpP/Ge2wNRmP4w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820124231","@chakra-ui/object-utils":"0.0.0-dev-20220820124231","@chakra-ui/shared-utils":"0.0.0-dev-20220820124231","@chakra-ui/react-context":"0.0.0-dev-20220820124231","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220820124231","@chakra-ui/react-children-utils":"0.0.0-dev-20220820124231"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820124231"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820124231"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820124231_1660999429179_0.2887511040603752","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820152257":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820152257","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"49ea42ac80f21a60d422aa15d29a86bbfa14354e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820152257.tgz","fileCount":6,"integrity":"sha512-eZDlhrLmx4w7bzGhbTBY8m5FMshC660PMGooPbFNuspKqK1YZQteFLfRJtxfOGzVBIov0fZivZ9PYCv0JiWl6w==","signatures":[{"sig":"MEQCIHkQsFQH1Gw2dzY3hC5yWZXQ3d7oJu9SYI1+DZm6hAB1AiBQhLvwHM8j1AW5N9fjV8w35MGeqv45Ekc0rCJX2mnd8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAPyZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmox7w//Yj/rqU4mvUy4UBS7pu2goygxtF8Tcl2ez6Pgfh5af3gTOFMZ\r\n4eAgSJCT4WScAFc26CTSIuQNmlBpzHeBuOX7oOpTCztcpjEw1NxoV7I4scad\r\nVmXZwXaUebLP5RY1+62udyhKAizlDlrToryVzhUGcQ6ma9PEkXVV5b2SRcCk\r\ngwVJ3DO/MUxSKFtdbUwvRuQ0iH4CQNVTniTP00uYszHGYwa9oYAYI9SCTsSI\r\nAXy/frLzRn030+kTgu8OXpoVwowAWquhZo30Ircd6hccK5JWYZZuoQ95TLAk\r\n10w0MIqikDo+Sf6DuMgD0zoytYwgTSXhcwcR/tIHtxo6C7bAkfN4+rYnUxtD\r\nhvp2mY3WtKKypFM9l4wZUgc1S6DaoTUAsjPF6NvaLS1V1RLtZgmYVdvU0jla\r\n/QVvkjqfaT9fVzYX5exzN/bk55CzS8X/ZnKWpe43sFRxg01WEijtvfkqBgF9\r\nLHe5s/UhooNBPOzL3+XPoav9MFLOtpBlFUAWiOkvYF7DaNjkSzrKOb+232Ds\r\nB9WoalYeccUoTdKIXXGTRPWpi6JctTj46iQESwiRBOV3mZftny+yeTy1irDi\r\nSrR5RCgZ6ZatS+B6KUK4jreQhzLx3X+ISsmrNky5XYPY4ffP2nYYRrmvHrEf\r\nH0UWKgsv7NQPxMJ/Z3c+y6Dp4sMF6M33/W0=\r\n=KZzw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820152257.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/bf782fa8fe13111a3a171a5ec3dd996a/chakra-ui-layout-0.0.0-dev-20220820152257.tgz","_integrity":"sha512-eZDlhrLmx4w7bzGhbTBY8m5FMshC660PMGooPbFNuspKqK1YZQteFLfRJtxfOGzVBIov0fZivZ9PYCv0JiWl6w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820152257","@chakra-ui/object-utils":"0.0.0-dev-20220820152257","@chakra-ui/shared-utils":"0.0.0-dev-20220820152257","@chakra-ui/react-context":"0.0.0-dev-20220820152257","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220820152257","@chakra-ui/react-children-utils":"0.0.0-dev-20220820152257"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820152257"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820152257"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820152257_1661009049723_0.9536413567864246","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820165925":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820165925","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3b759cd15d0b13f348f36ddb346d07a8167b43f2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820165925.tgz","fileCount":6,"integrity":"sha512-QVZTnywbcw6kaNEGLHQN6BiRwaQuTfzMqAxiuCxermFk+oxriiqwhbi0ZtoNbAjbdbIMbfbhDOZEiPvPE6W7Qw==","signatures":[{"sig":"MEQCIBlY4kPwq7Y8SDkehGQMz0hMA6QrLETcKtPQlRDOofRUAiA+YxhZcIqh3QH6J4oG5rkokrnol5Ow1PcOiid4PjH66w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARMsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomlg/+MhQ4JOAyjO2uylArW3WYMBmgp8cumEc8obMjbUYVj9Uooa4C\r\nx+sb2wdZeXBwUlQf7ly6Ok2pcm7eLh3tdUtGTl4xnZCRowTnKYsjw3pY3ZkD\r\nHOT80+o9BdeKC4mBY9345fUEYJpbMzYKi0ewJRxBR5/zVvvHQeBe6tO28eBu\r\nzihSUdxmPUUwn3VGiGnLaRhthBScDo4uLrXst5Zq2/KtepArgde2QKUXJkd+\r\nhWyLKcyStolCUbZ1v4wUnQdyq9FAaZ0nqZHtZTCp8+y4opkmeKKUkT6DvySk\r\nJvejAJo/f+WU9LaDF6+IAZSfOF3gWyyEUc/3YGSHRs2H5WJiQ1GCoDTGa3Jj\r\ngSoTDOevO7+NZpPLEUMLCs3KiqNSTFVHs8izmzIJAXmF284AsUhFY989mvua\r\nq3U4vK8zVLxCbcUj6pacOaGENflTpM03chFQJeVLzkmyBU/uLg4SYPO+UQci\r\nG3tMsBq/tVnNwvt+SaWGyt+2ek3OxTepsjNaX5eOdsgV/9MEYJS4H1TfdGbP\r\nrmPokEs3e/nXAeCLDw5XeuhPObhXc16KO2cOf5EN2N6s6102+xR70H8vIDif\r\nXCNnjpZuGl2PnJzVZ29S184ne6mNJtvXMnFpt8o9IjiDBNF5zv2iUXYhwp/N\r\nJ7XmKiCnVBsoNTzox24m3hs9tBvgzxcvHzo=\r\n=lkon\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820165925.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/d24203eb5990b095845a75b04bceb7ad/chakra-ui-layout-0.0.0-dev-20220820165925.tgz","_integrity":"sha512-QVZTnywbcw6kaNEGLHQN6BiRwaQuTfzMqAxiuCxermFk+oxriiqwhbi0ZtoNbAjbdbIMbfbhDOZEiPvPE6W7Qw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820165925","@chakra-ui/object-utils":"0.0.0-dev-20220820165925","@chakra-ui/shared-utils":"0.0.0-dev-20220820165925","@chakra-ui/react-context":"0.0.0-dev-20220820165925","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220820165925","@chakra-ui/react-children-utils":"0.0.0-dev-20220820165925"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820165925"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820165925"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820165925_1661014827877_0.5938721596771579","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820172220":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820172220","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"56d15223d4885d6f0c563931bf4ca7f6c34f61e8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820172220.tgz","fileCount":6,"integrity":"sha512-aIqWT8HAqiCUdcgkq/aFNynXw5gUR9DrtVWISvS5/zMtXuB4apRQY9kihdIcok6o0DmWB+WcjfcaUEQclUgHnA==","signatures":[{"sig":"MEUCIFokIBs+9bxHHglzGcKfyVy6wAOeKQeFR8ukCu4U6YxpAiEAmdOA6sVxIv6vYvRG+ig1zl0kfm5Q5Le+ms/lHa6aW3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARiSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol2Q//W0OjlGEGDrw7/MIy8VrgNXykdrFGMGjY8OEt3uTt/1Tcbv+8\r\niMxIt1T/H++bE+2GY6AZGb1lHFsX45SHjQsfEz2iKSczYRs+XjRmzGncMfS4\r\nuPkmciBlDtbSP6oqwkh4uMt/jVQc0S26q6RitZJV5zz2qFXOeAM2eFyA9e5D\r\niDHAiAOpbhMlfVAeGDLPuJt0tUBiXZi1p2hlf9scZfYN7a17raRAHHL9ad/o\r\nXixh8nRncx8ZmmgsY07w4DuBzLr3wB9aQLSSvCIcwhE7tTHs/i/yfBJheRIe\r\nM/pAnosHUkMtvPD9X/hohZ4VMDZ4Txs+96kHOjFnI1uKFm5SwMEfTA5RZURz\r\nga+3b3M4wxBRHwncX1j+C/5KAeXtnSB02KA0UnaC75PVzOMfGtLWMG4fj97B\r\nCbh1/B2/SQ3bnPkHqV/QhI/jYIVGL26mJPUQht6xFdcDWb4f7NN1TQ8oXr9H\r\nZ/bNm21KHpr+aUI1VHk5wlX98rKZluN4AZv4IJbvHmd99j+AaTS6IL3zGr7/\r\nbPS5tQtNxE0FPCJ6Qef+/dfH6GJLarBqCwNcppsGdUzlU4xKEErnrKGn7cOd\r\nbwOYR7+wr5JXnYRfL1TmKv1e0le9Uaok3W0D60vuhTx+lj/b3fXh7Kiu0f4N\r\nH/MCb11vTDiRnaBnqqmNC86h842ZIvVjp2k=\r\n=1Zv8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820172220.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/468d4c8548fcd269997b77935523ef12/chakra-ui-layout-0.0.0-dev-20220820172220.tgz","_integrity":"sha512-aIqWT8HAqiCUdcgkq/aFNynXw5gUR9DrtVWISvS5/zMtXuB4apRQY9kihdIcok6o0DmWB+WcjfcaUEQclUgHnA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820172220","@chakra-ui/object-utils":"0.0.0-dev-20220820172220","@chakra-ui/shared-utils":"0.0.0-dev-20220820172220","@chakra-ui/react-context":"0.0.0-dev-20220820172220","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220820172220","@chakra-ui/react-children-utils":"0.0.0-dev-20220820172220"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820172220"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820172220"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820172220_1661016210334_0.0906465280948685","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820173639":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820173639","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e1a82b02a2c0ac3c610893ed58d5c10bad008157","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820173639.tgz","fileCount":6,"integrity":"sha512-33BKUQMV5d0jPJngb/ABGc4YAetzR6Z51UuLoKP9/SqaPZq5DKVDCwUht0v8aiYx+Pv+g2wkQcnOVWxuIPvbKA==","signatures":[{"sig":"MEQCIFX2eLw7hR2+EOSNWTMVN5Npp8Qf5CFaFgXuYSbVT5z9AiAKl/aYiubac6v32dc0OXq5C7JaulfOuTWU1koujiqF+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARvnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2oQ//aAAy0w2J+k7r1VkvyNwuo5YvsZzEpTxxTgvQISOqAVb22KEU\r\n8OWEPKWQyU0yrDe1lCISOBKKunZFcD2sNWn60bSq4cTlRVF0qL3IYImEgDHg\r\n5scEBtJSA0+fszAIZ1ns3UrlJBEeJ29m9pUSqDTlrzAotDpqEQ2Q8/TgYRe6\r\nygfdC2ZaDsS7cPf8KgVqX6cHD3RbtmB2HMlI7F32SlW4b65MyhWMidbLlAhC\r\nf2AHZke8tHo1Kehu0C3FQ/Oc95BPgR6d+xVIGUHQfCMFbO1qftRbVRCiU7DQ\r\npjUj88hVaduIRbor1uLNqPmtgVfFFb2tpKAi/Tk1l2ZC8WM7+9JAgCKLApy2\r\nmE/wCl9DC3i0lBTZD+ORC1IUNeck91BkAEASBGXPhCm1mWSPeVtYID0BPxz6\r\nBkU/2TpNIUNGb9W2UPe9H0RjqKI9gBHMP1DStbIIg+qUEtv3igae3Gn+R3JU\r\nMEWtQHXcLADIlGvBsCbnRFiPumjpUTrwHnvTT9Jy2n7FAhWGhI0NXBVJwTM+\r\nIoKIZMymj/i36AhkmMrF5go/MiDJ6wfKOG7Iom6FQ2FBNXmpYAqAQqPGd4Eo\r\n/iNIiIZQxz1Tt6YhsxE0c3x8B+QRxiP3LiqVIkVSihpoU/WVeP4Tsfkd92TG\r\ndnIQpwAEIMq0WOk+Z1STRF8uHeFl0nwJOfg=\r\n=LjHb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820173639.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/822aa5d6f367be9bd37fb94a45ddd8ef/chakra-ui-layout-0.0.0-dev-20220820173639.tgz","_integrity":"sha512-33BKUQMV5d0jPJngb/ABGc4YAetzR6Z51UuLoKP9/SqaPZq5DKVDCwUht0v8aiYx+Pv+g2wkQcnOVWxuIPvbKA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820173639","@chakra-ui/object-utils":"0.0.0-dev-20220820173639","@chakra-ui/shared-utils":"0.0.0-dev-20220820173639","@chakra-ui/react-context":"0.0.0-dev-20220820173639","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220820173639","@chakra-ui/react-children-utils":"0.0.0-dev-20220820173639"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820173639"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820173639"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820173639_1661017063719_0.4619352545511852","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820185458":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820185458","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"254922322277aff246986e6e9ca2b0eed186013d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820185458.tgz","fileCount":6,"integrity":"sha512-Ur7ifidWkjDsv7U/ZCYtBAkjiFJsgp36gJUcaJDD6WCA8DtBe37kRGtzCUN6KfsWP9YO+TR9jgGs7auCUQ8uFw==","signatures":[{"sig":"MEUCIC2AtnQUsIPKKr6bAnuogF7X+NxolS9dcAs5tJZKiohSAiEA6ntAXAe0/V8sRsAXhtH+TZzYUf8BuAbIv0LOXADdYWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAS5EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4FQ//ZBb0KqK86oFcwFOrFtN1m05U86MWodCkBm2Dx5nC+hp7zGgg\r\nYBCKVatyetdPf6mjyMuYCKsRmfOYmU/EKnZHh5bfUsnFHM/7c7INi/lx40DJ\r\nvitipYJOJwpaQMrwZIe7f2iX48D5YmfQUUnB38T1IDQnPL7izpTAV61QxDXg\r\nb8FmiNCkUai6dY7YDF84YQWjN+fotvCnVPb3QnpcSy+QMrXxwBdrRKPCPI6X\r\nuzhRjo8BMAm/+c1nPCxkVexQhMvKDEG7h6JPS2I/2s9yVQQ02D5Ik0NYMO+/\r\nOp44eFlSihVWtvJVBI8+c8cq1VWLt90X+PYg5rK9CuVRNt9WQkJ7JhW32ETe\r\nF25zINJt7hOUGxTQFQSYWQ/pJ1KIu1iJXaRWumcB7cXfABNXKQiX5JXh2cVx\r\nvye8oLE5sb/AqEvWahWimF/4UBOpqceIy1KSOdIe5s5Vmd7QPYOlEThixNa0\r\nHMWoggdTlphn5h9ex/GfYkbyTJo/K30chMo6eT3bmua27GlXliAI8aILQQhk\r\nkKNF/eplql3bFqAACIerNslT/Di3Mb4EyGsLcBpf/3uw9rd/RGCiHo2Fcq65\r\nFixHnsg1ccrVc6P+eFpsCTqM7AxBsnNbdEqx1bF1GhMnNTO8gYDWCyX9Gsdy\r\nu7MD5G0nCF3xR/JcYnBhC2tTk2WfNO+KvIM=\r\n=+oW2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820185458.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/5e2f22e877f60130573187c3e65c62d7/chakra-ui-layout-0.0.0-dev-20220820185458.tgz","_integrity":"sha512-Ur7ifidWkjDsv7U/ZCYtBAkjiFJsgp36gJUcaJDD6WCA8DtBe37kRGtzCUN6KfsWP9YO+TR9jgGs7auCUQ8uFw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820185458","@chakra-ui/object-utils":"0.0.0-dev-20220820185458","@chakra-ui/shared-utils":"0.0.0-dev-20220820185458","@chakra-ui/react-context":"0.0.0-dev-20220820185458","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220820185458","@chakra-ui/react-children-utils":"0.0.0-dev-20220820185458"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820185458"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820185458"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820185458_1661021763844_0.3864467123374584","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820193723":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820193723","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"209b957b39805f6673d6a5c8028803b7b7266144","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820193723.tgz","fileCount":6,"integrity":"sha512-CD6NrmbBDYOYOM8RAHz6Yqnm1xYqtl6CLav86Prfol//DG136YCgEVGJl5BFrNrmv5xt+sZFvp+t47KqZx/OmA==","signatures":[{"sig":"MEYCIQDL0NILDO++QHEVr/GvhyBO22/HTjo5radf1e/cPFPGMQIhAMI+VmBnN2zqGA6vWNKY93okYZ2FU3ns5Ay2w6A5+5BJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjATg1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrjw/8DJr1hs053N0yH0rvwh6lQxTATuXYuDycfpvqFmBmc+ZUEMUB\r\n845wD0ipFGfhk76L9E9ylzpo2GWJBcbusLTRZt3GgwhqMaAdqj6CFKPv1iDh\r\necaZiH0yNdgxkZAmA/qaiyuxpE5R5TRzYpQ+24OOEQjYXW4euCplP12TSDPb\r\n7LTMvamn1T/gWrGiqG3JLWhoLMpSzBOHC+Uar3L2/8sVFS1RFL1iUL/Qc7yt\r\nfHsgAq9GVSOYMf0fz4ynKYuJI4Zm6QuTGy9ekpmjw8KHUPO02/Mvyx+Wc8R0\r\nqmNC1T7PyCQr7u0KPVsp75i+UrvZ9P/10YW8q5SbxD0iNJJvLvZtRBmnlpPN\r\n7S79CjYyb/dY8ZWWIOGSEayIHLlHKMdIEdUAgQcCf9WUen9gNC9k038TCS5C\r\nMpotUdj24DWP85tb8o//7+W8Yc7CPQ0b2waKHulDX1U0Mb5K+MsvYBsFJzIE\r\nkhasOlN3kZmyuDn7WF36CPUjmjUOmmyUIk6551v6VgiBkU/uFwMNQO3ZkBwQ\r\nKF1Sy7QnPNsrVonEC/xOLYFihdGj8zBnVpbIX4niwj1k3+BCowPC51dFbk11\r\n1x+IU1EVw+djDQ51kzXOU0X1L/P2PLFk0oVSNU48vSgikmvOh3H0w7FQAISV\r\nZIlWjjIIifRenU4ZaP00zhz8YXysd9uEWZ4=\r\n=sJby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820193723.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/5b8e8435c3d5867295b92b0c555b2dd9/chakra-ui-layout-0.0.0-dev-20220820193723.tgz","_integrity":"sha512-CD6NrmbBDYOYOM8RAHz6Yqnm1xYqtl6CLav86Prfol//DG136YCgEVGJl5BFrNrmv5xt+sZFvp+t47KqZx/OmA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820193723","@chakra-ui/object-utils":"0.0.0-dev-20220820193723","@chakra-ui/shared-utils":"0.0.0-dev-20220820193723","@chakra-ui/react-context":"0.0.0-dev-20220820193723","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220820193723","@chakra-ui/react-children-utils":"0.0.0-dev-20220820193723"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820193723"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820193723"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820193723_1661024309076_0.37116374574081856","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820195548":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220820195548","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"cd280f871f70423a264e3dff0152b69668beb58f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220820195548.tgz","fileCount":6,"integrity":"sha512-/2rfRl5QACuSLu8ctkSTITCXvYtsiE/YMwVJag1ez4/rkS6JWXxTmITiebtl5sEtTroh7N7IT8+DbXZTbKdyIw==","signatures":[{"sig":"MEYCIQCjJVvZsxk9OfXyk+UxdrkAQKj3EyRigsFIMQbD02w3JgIhALv7MPVO1Zh2zkuJfJtgfgdH84W5kghD6hbUOfP4YyBX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":77463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjATyGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgFA/+NLMMj75H/SGzs4a0x8I3xeVa782t8cdz/Y1S+xKQ/98nmRDL\r\nLkGNyxr979Wxt8kv7fMyuVfpYs3gvmOl85YlEtJQ2Sn/MGDncFGJbWODewhW\r\ncsNvFWgop16xT6BYpuK8ry1fRav29AVIGlNr9uWo3tpdDxYMxG9/W4CVPstL\r\nvQoL7WMlGjchKnZfBPx6ZQ0UiFXBMvVLNtEgbKNVfo28YB0+8Bnkmc0BhZnK\r\nstyTGWUd1+sL7DNFK/J2a7JsoB0NXmcQG/apIXgiqhEcViDc8QeLjfuDmolX\r\nXeB+JexEVjixL3D/5UZmY2fe7sxwVga2DSLfWHCi2O+29z3F9+KZUmnMQGYL\r\n0OG1DbiYxHSuGCdTsqsoeXc7eflJ70L8sR82p/kgnTX9/hQ48tqBHtS6cwJf\r\ncvQlAKmjmda5gCreU9Sqy9IZuBMMNN6P4GKAoBUog/SpYK4WezAtenXvLjWD\r\nxXz0ZDJ7CQ0Frq/ue46YODX3sc48pRHPO+98HZ07du3u2y3FQw3Zot17HEKm\r\n9thXHzpG1wP6KD9abSldhIVVS+/k9p+66U9Ce37mZAlnCLyZupPNA3fYbEGa\r\nB1iCLZtZwxc6uO9BvSy1ZShBVKn3d7Pg5ChZvZoAVT65i0AGHA8CxnUcqh/4\r\nS8i4ErgUa9Q4SMu+S1fcfyZ2FVy7eZnG3EE=\r\n=eYs6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220820195548.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/bdf9527d0ac8d3b81f5434e215a7e8a2/chakra-ui-layout-0.0.0-dev-20220820195548.tgz","_integrity":"sha512-/2rfRl5QACuSLu8ctkSTITCXvYtsiE/YMwVJag1ez4/rkS6JWXxTmITiebtl5sEtTroh7N7IT8+DbXZTbKdyIw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220820195548","@chakra-ui/object-utils":"0.0.0-dev-20220820195548","@chakra-ui/shared-utils":"0.0.0-dev-20220820195548","@chakra-ui/react-context":"0.0.0-dev-20220820195548","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220820195548","@chakra-ui/react-children-utils":"0.0.0-dev-20220820195548"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220820195548"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220820195548"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220820195548_1661025414140_0.38911790145987424","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822051456":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220822051456","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b4ae2a8b1f04cc86edbd45c1da89a7ac695112c9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220822051456.tgz","fileCount":6,"integrity":"sha512-CjKbotBQ2JYTCuNzi5SJ9oBN63YBPSTT1/NPhQxG0SSfahXJ0QIX3W8iFP/EFX4k4NQxcsvsj2PPJXg/bVSiNw==","signatures":[{"sig":"MEYCIQC7td/6GUG2GdiTDSZ975VK20Cr6rYRIydRvReHm4/w4QIhAOBIcjaCSRQVsqL3w2OVMNBT3DmXU0jRx6Bb9ZYYiQPq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxEVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmor2xAAmr5j/Tp+qqP/YQAU/cKEhdhyMYLtlq045iL9evtrjOx+fuzZ\r\nLAZG/RjIJPPjntnAfbpfM+HzZNf9gXNvUp/vkdykO3czIW7MyDbKcjpz0UCX\r\nzogNxpx/wBJsjSOUwQBPkYopz9ap2E+R22rVc+aGHClzKk4RN4jO68VgNRQ3\r\nUL3zV3YYkiErK+J8H0cpALUrcW7PRP2eUUz3Dh8JWvSNbkrm3Se++EPgGkRX\r\nlcnMS1vGA7uLhQW8bIU4rMDlhtCJ7+fHSA2UDoBOHVMPN6pk9ZsXD/3TYDCa\r\ns0ZyFOuUKGYPV2Ko7DcO6C9WJBx24pmmQ6JH7ESVSM/hJHgtwqRdPAPXDhEO\r\nD3CjkK7E7HlHMOB81HGjq0h1oqgnAmh3gediEZu78rwKItNW/ZIKvqt3MH4P\r\nHSlEmrGwL4rTr07UL6BkHFsYk0fL9A+9Q/9PIcoR1s+V3z76DEYTPOEzX13B\r\nPSe+jVK9nddO3tBxzrw2xQwRc/vAXXjdfjLpwhjnLK8hRHVKwJcZR3NlcWTT\r\n6btU8jWh1Oa0LouVrZz8/QIXAaz7cScw23mMXNWw/+3el0fwynAwWhsuyT0g\r\nZwa/E7CXCjMtkdF7pjXgfG2dtzkGTdEV1K96HHFCL21v7iyhAoOqTD8PvyPc\r\nlQQ38+T/5WJDYgcADBdkkXoVB4kAmxAoxrM=\r\n=HF4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220822051456.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/188970b29eb4ef85f29432ec4c63bc82/chakra-ui-layout-0.0.0-dev-20220822051456.tgz","_integrity":"sha512-CjKbotBQ2JYTCuNzi5SJ9oBN63YBPSTT1/NPhQxG0SSfahXJ0QIX3W8iFP/EFX4k4NQxcsvsj2PPJXg/bVSiNw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220822051456","@chakra-ui/object-utils":"0.0.0-dev-20220822051456","@chakra-ui/shared-utils":"0.0.0-dev-20220822051456","@chakra-ui/react-context":"0.0.0-dev-20220822051456","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220822051456","@chakra-ui/react-children-utils":"0.0.0-dev-20220822051456"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220822051456"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220822051456"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220822051456_1661145365582_0.8268777980289079","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822054045":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220822054045","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9569d458953bffb656068c016e0bec4a86c934be","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220822054045.tgz","fileCount":6,"integrity":"sha512-7ZxCY/HsrsXsA1p5QLKBqA+ZKA5NJW/Gbf028aRqlxPBaDphuxGXSi+v9zBt+UYLgTbzUr/jRVgxGtd511SQng==","signatures":[{"sig":"MEQCIHpeHQory9YmjgUKlF+tGQnpTKnyxDOSs+3CpNmAA+HAAiAHxuf5x7z1lo71mfSXak4ksCF8Q9ka7eZ7gyRjyKytiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxchACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXUBAAlEqe+j9wskUmwCEceXUM6ST7YOufgbLDclP/v2g4K9pn34ya\r\nS1E/zgdNmtXluG0oMOaJciXSBLtP7uu0zdpCpG9KAGOvrrOY5eXdK/gU7+zL\r\nB+xLUpdXY50rtcRRiEROy6jjpK9Et0YPzVSFjXDukdghivN87qERV/awnS8J\r\nx53qKiILF0u53QXykaR9B16mob4Etofl8yPJMN+CNoTMEql91VNtyFs7Avyn\r\nosrUFCY0zbKazT2ZxY/x7wf+jmsfZD6St65VgOVrprQqsPZ6aBIyeGax42QM\r\nyqU62MjU6NuoPFdbm+pFYuai1oFYu+GkdYWET6MhY48YGo5K0IynZIH/QkH7\r\nzI6v1km0z45prG01tD/RB+uFmyKncjeiPBJ3hI2nWdi5wQ/0ViA+rh7LFrzm\r\nSPPJGO90AXz14b5YLt5di3oP+TNuyG+wrIkIBKrOgd771oAK2bEI2ZiTzzgA\r\nJg3iSbPGwt+B25BgGI5JmmRIgyq2BEmCFFW0U4RHKfHQ1Bv8DiN/irsvxBWK\r\n8N1j2zO/yjmyejNh1f16/xgurljzyWxxNSQ/Gv+anO8FyZCHJvmvXukZuMWH\r\nKQfS/vtEce8mGLft4GIvv2oF1tPCtk8OrpqJmcGENNhjXF39yNkgmIymYksm\r\nVrXE9dQSU4otSGY8LVIQeIreM8/dM4SHGVU=\r\n=jkib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220822054045.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/8756430ffd0f59d6d329b6ce903fe2fd/chakra-ui-layout-0.0.0-dev-20220822054045.tgz","_integrity":"sha512-7ZxCY/HsrsXsA1p5QLKBqA+ZKA5NJW/Gbf028aRqlxPBaDphuxGXSi+v9zBt+UYLgTbzUr/jRVgxGtd511SQng==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220822054045","@chakra-ui/object-utils":"0.0.0-dev-20220822054045","@chakra-ui/shared-utils":"0.0.0-dev-20220822054045","@chakra-ui/react-context":"0.0.0-dev-20220822054045","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220822054045","@chakra-ui/react-children-utils":"0.0.0-dev-20220822054045"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220822054045"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220822054045"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220822054045_1661146913149_0.6267267949107658","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822055339":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220822055339","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"72e4f71a8699dd717af196e8d7a61c4647d4533a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220822055339.tgz","fileCount":6,"integrity":"sha512-1zKxYgJZaij2LbZebZYDurASBvHHhtSPcSX3XafNvMwG5q/JsIlYfUN4DLT9POg/3xNw5VCPiPM/RAr3a5/psg==","signatures":[{"sig":"MEYCIQCBFRQMOY788TKDjBaqWITt9i2muaUWEtj4RYn8UUmq+wIhAJkAR97xBkYEt//xiXAneXMVGEicqr9+x54SM3X5CWx4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxo2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoc+g/8C0y4hHRP02FWzzNgcgibglxfrHrzZT3z2epCSpPti0QkWbEe\r\nrZHA1mOD+n+J5A/5VJMUd4EJNysiktF3bWYhicBpFQgs6WiBlNxwjVY0B7nL\r\nhw+9kCh1561a+nqv5r32MtNHc1cfgi/6GRrB20Pr4qDY8m5mdYgbII7Rs45L\r\ntKsTV54GgaV6FDl0fa7f+NX52AJwI9GEhCisNDkO0f5HikNfTCxm2g1bjtVr\r\niWmYQGnJHrOPcyJzdLsXtyPhpEsaq7Z4q2wIXy9xxBFCGtK/oh4Pj705QLvf\r\n35xXfpfDe9aUmlTDADuDs5OKJyYE0eJxYG7HHOSvMESSGMjjDcp5sjFJ7XAn\r\nqseESy7Jt44RX8wAKX7yHyNy42qheuDHivQ/WwKdXa2fMDRpvdMSkEZ+nQFA\r\nGZlwLs1abaKl+8vAvOP2n9sMM3bw0WZ1Sf76mDl8RqJu5kCpk+p+QEzVAZLs\r\nyY6dOs7avsvApgpzdxH45btOFSesHcKib4ep/29iPWT1oTK8uTos22GNlcmf\r\nVL7kh0n6n9xutxO09GwuMHHv650KVm1sb0aB6Yz+HbdGdAbY/FxoDyT1l6Vi\r\n/19zJOcqvGR0WyqF/qyJnC4vFM3ULL4ot2LMLxxTUlUhAGIRPgcu8h+4+WFr\r\nV4nmP2qMMtUF1f/rjePBg/Um1eI0QpzVR2Q=\r\n=7I93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220822055339.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/49a988585f49f135fc9e6bf2dc447d83/chakra-ui-layout-0.0.0-dev-20220822055339.tgz","_integrity":"sha512-1zKxYgJZaij2LbZebZYDurASBvHHhtSPcSX3XafNvMwG5q/JsIlYfUN4DLT9POg/3xNw5VCPiPM/RAr3a5/psg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220822055339","@chakra-ui/object-utils":"0.0.0-dev-20220822055339","@chakra-ui/shared-utils":"0.0.0-dev-20220822055339","@chakra-ui/react-context":"0.0.0-dev-20220822055339","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220822055339","@chakra-ui/react-children-utils":"0.0.0-dev-20220822055339"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220822055339"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220822055339"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220822055339_1661147702696_0.7795446663087857","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822103611":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220822103611","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c631cba43276045b4a56f19b3b2a060ad7343061","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220822103611.tgz","fileCount":6,"integrity":"sha512-/OlPzcopiJZTkyev1JJ1FP4vbl5d2pIK8/TE6Gye7gKPVOgsorZjGk/gTuLu7LmNuAbk0Veba0wOYqaYrtU/xw==","signatures":[{"sig":"MEUCIE/790XTuL3UCRQ7k85plZZy97jPoE1W14CTX3rnjEy5AiEA0mLLXTpCr/evFgK36G+oEzOrXSp2hwlFiOw1CEdXvAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA1xmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGIA//XpgYQPfuTs+ID5zxmSPtKyDSNfy1HJj9dl3DE3sk5mdDl5iI\r\nOgsB5bPg/1VoUbrpQMBOTlVXgZ+vMP/83xkRp7a5TScOwpPYwstGxUXEhsM3\r\nzUStCL3dwEHT+FjWXdb4vNNKMeJysiINTGE5oRjQKlKP3VRTgpNeAtJAyNxC\r\nezd5rAC+J8r3yI3yuk9KxaXtFdTJqM+pobNi0tzOt07wX4v8GhzL1gciytVO\r\nGAkOomL9JD8V39KjZ98wz/rTbLT8ZhKL9LEc3bq2xr4lOHMg5CpitfVU//PO\r\n2rm1rLv40qtPPjnp+han0A3LdKQ7KZPXhjidHAbro2oRP2MiGWn97q4WkOK5\r\nmpYpYwyTt68dFYURXl0Mvqax/nhDEyE4XqFuNG8j3N+iX1SNwkSSMLUysY3J\r\nMUjeTXg4FdAZWKM+37nMY9mMiHRctC6g4Z3Y41CSdBk8NVX9GP3Lmjx2E4IL\r\nyXPuyJfpWJKOdWdmBbgoc9hFy+MymbzQtsamjImCjDRKawenEsKQ1bhX3/A9\r\nnU44AKJVk+nAmZr3TK0leQOvJ7Md+zszqh8KZYc+ZX1AgAh1glIj6k1p0ZJX\r\ng0CO5IMLiHjC6977Bxf35cE3HVJbAhbM0jqWuQPsrVnpsW4nq/l/NP/B8VSq\r\n7t2i59xxmD3uUH9qLiqmyLqODhh1IlXOU+g=\r\n=uYGA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220822103611.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/2777580cce21786a10f3477c647cb16b/chakra-ui-layout-0.0.0-dev-20220822103611.tgz","_integrity":"sha512-/OlPzcopiJZTkyev1JJ1FP4vbl5d2pIK8/TE6Gye7gKPVOgsorZjGk/gTuLu7LmNuAbk0Veba0wOYqaYrtU/xw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220822103611","@chakra-ui/object-utils":"0.0.0-dev-20220822103611","@chakra-ui/shared-utils":"0.0.0-dev-20220822103611","@chakra-ui/react-context":"0.0.0-dev-20220822103611","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220822103611","@chakra-ui/react-children-utils":"0.0.0-dev-20220822103611"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220822103611"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220822103611"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220822103611_1661164645894_0.2825410913403492","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822184448":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220822184448","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e6d5d6cfd3553902e89a0535c9886163aecfa2d6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220822184448.tgz","fileCount":6,"integrity":"sha512-+VwrBYyE2q73/WWWMdDh1y8xcTBcHGMdpi7pZJqXuQlKxyYW68KsbfiV2KwhomAEWGYvlkxgiuqw5OyqV3Q/Og==","signatures":[{"sig":"MEQCIFBD7MwnMkbmgpkAfl7TPWP9WgD6y2mTQ1pDy4JO8UelAiAmQl610Iqf33XUv7PmwCy91eCpWMLpN7K3h3s+6opdnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA87vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWkg/8C+FP+xj5vnNs83DtGR0DbiTskIc8UtxDmI0TzcPXFzoNMiwP\r\nmll4mgHsd/++FHURDF7lih/Nobe5sZm5IpVUjLkvIRR5IM3lMjJBpgeJAan8\r\ndaC5rOVkYSnhxOPW3lGjt7+ntumlS1uVLpl/n0+kyFxT5uC15LzTcxuPr+8L\r\nGN7Qg6m0C6kQgx8aWDXCkLrKL+cVMOvI/zoK5iwUT5dTvH+EoG8Uln+5na1J\r\nFG/pmACoHuJJP7p5yz0m07ziqpNHBlsQR/95o6i/D7FTp4vMaOLYyGrVYQfk\r\nqYuBErU/Awp706Tx+Y4re85qd+oPcNsmr2ZIvPpRqloOGcXox6bkuBzEIy6M\r\n+AWV+Sa8yZoC7WOC+L8ne0cr10OHd55QpaxGvHs0+L61VQsHGiSDNHg+tOnG\r\ncVfKY07YbuwvzZ8HXeQvUO2ihLC/0y99fv2ZMXtgsIs+RGC6hgPGQt8Fx9zJ\r\nIRkwbvXaz9+eBHQDP1V6gz0igC6a95A6ziSvF365AwvVilfS8ncPtnwEH3z6\r\n3VtbSNwTwXkxcxYkVh/IkP8KphLbn9fvOBwuqy5yGJFUaJUBOToV++3Y6lFE\r\nmwjy4h5PldA2XOq+t4Lggib1ERnYQAWDoGFo5SL8IIyQuifefG1Q9ZgrCPbV\r\nCTNis/bLLUz2q15fq1etPnfhG4uLPu0yNgY=\r\n=G3Ql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220822184448.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/ec30702beea56b09700f7732cfcd97a6/chakra-ui-layout-0.0.0-dev-20220822184448.tgz","_integrity":"sha512-+VwrBYyE2q73/WWWMdDh1y8xcTBcHGMdpi7pZJqXuQlKxyYW68KsbfiV2KwhomAEWGYvlkxgiuqw5OyqV3Q/Og==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220822184448","@chakra-ui/object-utils":"0.0.0-dev-20220822184448","@chakra-ui/shared-utils":"0.0.0-dev-20220822184448","@chakra-ui/react-context":"0.0.0-dev-20220822184448","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220822184448","@chakra-ui/react-children-utils":"0.0.0-dev-20220822184448"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220822184448"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220822184448"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220822184448_1661193967290_0.06427831242674675","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823150801":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220823150801","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a2c85325ac276da4f04d891651daf0a9ede5f413","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220823150801.tgz","fileCount":6,"integrity":"sha512-6LPqOdAVGenFsvfgOeIkTS/N661fY7Rlq92K8tWLGNEsICyiuyD1sP9O+54sDf8CNU0bGLq3Q+1HMYO54Btwgg==","signatures":[{"sig":"MEQCIC6n9aT2VMeVHdyGBXr3TZYrUwig+lp3MofvqhUsltxeAiBosM+V4l8SWVI3PwNfcEKEgRMnBXf7zqjS8rostlQ+sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBO2VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/hxAAkSTHgH3HJkzbw3XZEb1A0/PhGAM0BG9Nk7eIzjtiQ8BcxNxn\r\nNqAv4x0+k+wZRJSdeegAj8N9Mbu6f6m77eVsuFnFNQdn4U2DLtRRqdR/EBjj\r\nikEljhtLd7HXIEAIcpL8TGhGsCddozW2pyiMB88hNCRaMKyeh7J4cbo17Don\r\nV0e0XJ5mbeePVeu1A1GiUFzku/KTWfhq0Da6u7GnnTUEsaM/kK89ICuMHP3a\r\nwRpI+41v9FfK6kfCM6pz+fiPsVxxdL+YM3yiE1BNfIGaRlNjOG4JEphWAUnv\r\n/U3/huaqzDBlpJOy3m1Uw5aNoSGqAeWzHyNAwRZ97Pgv9H3cisn3nh0VgDmw\r\nrT9pnQjyoSLME0jLlyZuKTLaWjPGVoQ98zFSfwalpaeCktqBHJMXDb2TYcd4\r\nJBbyQS/vTSGMAsVtCyVA1Xtih3J9/9GZSfHP65o9baYAsc0kwNcjQtktcJ4n\r\ncoY4KB9oHEp0T4nZiRtBRBmAlTRtJ/xMIOLWeQKbNIvqVYEwMwhP239iZiQB\r\ntyhR6Amw9lcn78WymLo6+NDsfZfkddrdnfIYrZF9IKPraXHztklFNvsQ5PD9\r\n5VVqb9hQyJPHK1gGShU6TdjVEJEeVN7QjxLwHIwPn7+pg/h5cZlyP2iCW+Ad\r\nQuH+N3MOvXbtEqIA/qWX7ZULz0rq8kfT3aw=\r\n=VD6K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220823150801.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/de7f70767fdc8c93828e8197e0b51a6c/chakra-ui-layout-0.0.0-dev-20220823150801.tgz","_integrity":"sha512-6LPqOdAVGenFsvfgOeIkTS/N661fY7Rlq92K8tWLGNEsICyiuyD1sP9O+54sDf8CNU0bGLq3Q+1HMYO54Btwgg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220823150801","@chakra-ui/object-utils":"0.0.0-dev-20220823150801","@chakra-ui/shared-utils":"0.0.0-dev-20220823150801","@chakra-ui/react-context":"0.0.0-dev-20220823150801","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220823150801","@chakra-ui/react-children-utils":"0.0.0-dev-20220823150801"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220823150801"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220823150801"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220823150801_1661267349257_0.21169467117491525","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823165602":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220823165602","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6e6112fa66a945549da703abace89f658da8331f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220823165602.tgz","fileCount":6,"integrity":"sha512-08ixNtSQDoGLE8hJzkN6A9gGTw5VVuC1HNPVvtXJpgX62ZAoc+0Gmr/3fyQZcAp+TXOiv68d3Ry4+FTunRUBtw==","signatures":[{"sig":"MEUCIQDdTnhpVrFBcydsF1CWEq0y8odpFlKa009NNoEo9HFWugIgIQ1BM+NsDn08u2oTejd53u0hnZq392tUO/DBxG5vlOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBQbkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlPg//bWT7LZG2Fk8QAf+g2nbgJJaX39GVGAJgb2vSroMWrUQqCKse\r\nF92r2tonry8YA3FVgNxcNZXEZgTyBGJRxYKOyHKldwmf2x/5FzH8gep34Nlz\r\n7bgOOJuShhRGuujGY+PyTMyuWCZDKyKsTse4d1LELPo41TZDuSy39DYG1el9\r\nOQxtGCi8AcE27MIcEn7K20XVXW001qP7JZVjV/jJyFHIUwC9MKLYHA6V5k3e\r\nSlmi0O9GR0bEt0IpeQs9lY/AhLAogHu2cYrzWB83HBbEejz+yZ2iM+d0osFM\r\ncsHdU3WR8RO6g2xcs5DojOT1WFzUfa+exDEei4kanBPnjzV3chtcFKQaHOYP\r\nXIU+1lopU3awX8Jfk8CcvLX/U6uiF+y0SlgHD8h65BgIPial4L4dje4uYNfH\r\nFhxRcBPcp/6pSE8epBs6jtF/CltqPOP/It2+0IJlbDyALEOs3UTFByCN9tI+\r\nDV+vAvtpsqeH/33ANEnFJE9IMf/sdFst0K+45UK8tDTCyBkd27RS8+VnlDJP\r\nwJr74m0nccpi6g/UpSGutoMZKMsm3lG/orDMr+dXgR0xuJ36CHrX567yqeYd\r\nzIcil1bx0Pq4MMxWjwyBAny1zUUSgPDmhO2zFxfOeuE4cjfZvsdJTIwW/hiA\r\nn9beQwgXnOKG+UsMIiDtbNugD5Yxl0B5D6Y=\r\n=9+is\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220823165602.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/fde01b56985e39890e0fc6d481024f66/chakra-ui-layout-0.0.0-dev-20220823165602.tgz","_integrity":"sha512-08ixNtSQDoGLE8hJzkN6A9gGTw5VVuC1HNPVvtXJpgX62ZAoc+0Gmr/3fyQZcAp+TXOiv68d3Ry4+FTunRUBtw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220823165602","@chakra-ui/object-utils":"0.0.0-dev-20220823165602","@chakra-ui/shared-utils":"0.0.0-dev-20220823165602","@chakra-ui/react-context":"0.0.0-dev-20220823165602","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220823165602","@chakra-ui/react-children-utils":"0.0.0-dev-20220823165602"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220823165602"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220823165602"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220823165602_1661273828477_0.9142554727036081","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823192757":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220823192757","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7b81b90d8a51eb7023f548b644cd1cf9db0b61de","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220823192757.tgz","fileCount":6,"integrity":"sha512-14Ld5q2Ofk20WYYCkC0TbTIpyJ7+eCu8w5m0yRyIhYDtYNP5BoEhAOPhlDztS61YG4Xs70ExsgiFKpk/cvMcJA==","signatures":[{"sig":"MEQCIAKXulsh78ss5odHLh90REsVlrvYhmRAQwqzJ4lQCIVXAiA3PXwvPM5Ex9wr75MzTsIMuVY7DzY8sOY6uHgsSPXrqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBSqRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqtzw//ad5nouhGDrWfAne9AgZ+EXxTyzglXrQGzqbeYZEPbZMi40vy\r\njQ1jWRCEFnDXfitnC4SB9Imsojc+w0W4M65KLRCZvSBA3Ui0CCP0E4C6mqil\r\nn/9zCPzGkP0/ewxqwzwQTcT0PVJvU+lCNHxUsNiNIBuKhc5iSv/3ziGKwSvd\r\nLywrDar7zjbXCmqWJOdSy0klLDc2vitK2jitAN80m/BTBK0T06IXXM5ti8O8\r\nGCqFZ8UB1a6/qR4dWhah88IuU4SA81RzGsH0FmulFJLUaTNnVnFDRrdTSZzd\r\nBEPKHp3C72ecCzcC62UkoGyJsYj+gwsN1lP/B5ky+iGgD2gBztpb/GPojmmL\r\nq5BMLtpgMhW6AqKj4is5VSjsyPyBASIErYmpmeH8l/b8//GlDZawxOpJXMko\r\nrwihGBohu3/bBLlivaiGdLwHvuLPYx1OeKLMb6Ss/mEHorfPf25sO1BC44Cx\r\n8XP2h7dDXDwhXocN6iqmRQNS5cV19XQXDfFQ7j+xNgrZ11+dNoLezVXgAJjM\r\nTr0MDYcYdSMzPj7LreDxcIEbbUWoZUTe3qckLITsKruuAofM3v1WO37gCYU9\r\nTUycJQtJDm0QhbfcQoQt8VwcXEUnHhQpVDt6v7spNXHwlYgLWiHjM2PUpNUs\r\nc8qbj8BjLzRpeXfKEgGtfbrBmYAA+SvRT6c=\r\n=4or5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220823192757.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/bd6332a8d8e152571407897d808e7b7d/chakra-ui-layout-0.0.0-dev-20220823192757.tgz","_integrity":"sha512-14Ld5q2Ofk20WYYCkC0TbTIpyJ7+eCu8w5m0yRyIhYDtYNP5BoEhAOPhlDztS61YG4Xs70ExsgiFKpk/cvMcJA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220823192757","@chakra-ui/object-utils":"0.0.0-dev-20220823192757","@chakra-ui/shared-utils":"0.0.0-dev-20220823192757","@chakra-ui/react-context":"0.0.0-dev-20220823192757","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220823192757","@chakra-ui/react-children-utils":"0.0.0-dev-20220823192757"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220823192757"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220823192757"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220823192757_1661282961129_0.10198305905238203","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823195046":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220823195046","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"25c73faa9ec7e653340be6a52a1d391191670517","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220823195046.tgz","fileCount":6,"integrity":"sha512-3CQEsk/9J/w1nw0htVOm3f5KyJZnt1Tu2djbXrRMpkaqwUU5PI5q9y+dB8CLc9wMEcS1SQZXxOt3gYeWZvqCAQ==","signatures":[{"sig":"MEUCIQD1lV5qd87XqQPuLmyqWCYi4og+wPHRhfrGc8wHlhDr0AIgfUL9Ra/IZhoWErYJQicFlUqrwYvy/PfgwmBv21jyXqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBS/1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbThAAho1vszYAvuWbza2BlwShZGkZQA4yjY7jougDpbpKgMqD3BAw\r\npC01ENMGP+lgPK/ddaROy5haXbZPewsmB1YSuEdtv2oyBV8MfFvb1KVcpPYX\r\ngf9+1EGNlVwB7TcGKx1oocS/QhGctqufFX/OzRCvhhDVULE3gV7zJRchs6Tb\r\niKO4KSl7QPcmW1MNxpwVWYdpA3/NqAEJ+yukK0aeBVE0b2HuK8NAEWJWcqFg\r\nwQ705q+b+gMbaJDc/a3gIN2oahrXtwrxZZRpDRNbMMvVjpBSQbX24Ls9DO1s\r\nQuqEKE9Egl52xFDbFWgcbHYG44sDcl4NhXYlz16wcyGt2Kpzm4ai55M8WtLD\r\nDD8OmP9NarrShxZxxaTFj/JcnGHFPu+tiJiHYl7Drl9QeYN2R2HdLsHY47cg\r\n1O68LLWi0VTuFXEdtrb4h6amwUETITaktEMGGx80BPRKHulywUx6mDd8IVXD\r\n849Kl825gTdPICQxS/A5NOlRI6EnXzQOfoCPB/sfm9XXrMG5f7CFyhvpZo43\r\nnzOBiSzp9RQinPvJQQPPnGdTTfY3tOLZNlCQpR93Qslxvk7YLq1h1yy37ubI\r\n0Gd/ZWCcHxmtKYtZofv79oHH5589POjXYUjgYn2BQKM3N/HON1s5mTntoPnD\r\n7YCAcRNcNV0dryVugb1iz1ENh4OM3S57+Dg=\r\n=lsV8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220823195046.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/176dbd9eda5185e388df23f3ac5d0255/chakra-ui-layout-0.0.0-dev-20220823195046.tgz","_integrity":"sha512-3CQEsk/9J/w1nw0htVOm3f5KyJZnt1Tu2djbXrRMpkaqwUU5PI5q9y+dB8CLc9wMEcS1SQZXxOt3gYeWZvqCAQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220823195046","@chakra-ui/object-utils":"0.0.0-dev-20220823195046","@chakra-ui/shared-utils":"0.0.0-dev-20220823195046","@chakra-ui/react-context":"0.0.0-dev-20220823195046","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220823195046","@chakra-ui/react-children-utils":"0.0.0-dev-20220823195046"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220823195046"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220823195046"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220823195046_1661284341654_0.7753816972907757","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824074122":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220824074122","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"aa6704fe61ba54499eeddd363d2fd21fb4a93e8a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220824074122.tgz","fileCount":6,"integrity":"sha512-N4JA1xuPFYgLazhsKvDDGGQQgxbj4uZpYYw1oT6p2Y4AlkMyVCpPNKO8jt4Mlk1Nfh8v2aigOjOY67b3GvL2Sw==","signatures":[{"sig":"MEUCIHW8g/oSVwddTCmaitD9zKhSYxrkv/cPMutmxBUrK4j9AiEAqDJ61l2zbr/F/HNkq3GTFNAoWxI59DFIyxx4v/kT2j4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBdZlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoScxAAg/1vpo6I2ZPal7Y1n1sDSpTngcEqaq3+aUSAWQA8Lx5HNTDK\r\nSNxFhV1/M/pAgp61HnppgnbOQt6R5HlVy+v+V/trMcpeiVSOk9F27Lo1L402\r\nxGNtLU+FCnuLkto8rfD/nl+etZtHMVC11dLZSjQwApD5y5wlrlgRyB6AfYsh\r\nUf/g+G48mx4httSDpGpjwT2TolnUj7GRa56t9m2FXvEhgCBsaSleOe7OI+MG\r\n6l/6VBmUzezSTdPHns4LtgZaeWuMI42uguOXEq+7wI6MxfW9St/RLlwlwE1V\r\n7nsjyjYWLprcmtjo7VB2AvOLCmAUVmgTk8suT7tbrZziLUxru02udFxqrcba\r\n5tMkGjk7+WIH9dpF4J1189DgvRCQYGDpgDmc+JFnPnk8WUs2x9TCTXlFV0Pb\r\nllpqEKiXx92co3n9h3Ct1dsCUlT6lXY7Sm7wPPURWXC9jqzT+YZR62baYq3+\r\nff3k3/y5UvvvvY3npyioboTqfU4YHgB37ANj0RHwJYNMTNExthz528LdLZAP\r\nGjzgmzCOvTKyhP9UR5CZJoILMcCHnmCgFkOTmAmBysPUXySPaBlDIFU4Rz8V\r\n1XxQ0B8Xa6sCflknGqraYhLfjmofyL+Se+Nsyd5vD5EApZt+w6apuDUcavEh\r\n8SU3L5MPN+DhFsKwgy/QDKvrhDhUzUF/o4A=\r\n=SrF1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220824074122.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/cf0e3e26aae82265274cc0c68712db30/chakra-ui-layout-0.0.0-dev-20220824074122.tgz","_integrity":"sha512-N4JA1xuPFYgLazhsKvDDGGQQgxbj4uZpYYw1oT6p2Y4AlkMyVCpPNKO8jt4Mlk1Nfh8v2aigOjOY67b3GvL2Sw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220824074122","@chakra-ui/object-utils":"0.0.0-dev-20220824074122","@chakra-ui/shared-utils":"0.0.0-dev-20220824074122","@chakra-ui/react-context":"0.0.0-dev-20220824074122","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220824074122","@chakra-ui/react-children-utils":"0.0.0-dev-20220824074122"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220824074122"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220824074122"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220824074122_1661326949087_0.8713293419249306","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824080240":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220824080240","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f871509aba65d3e15be29d7208e9a4149d011aeb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220824080240.tgz","fileCount":6,"integrity":"sha512-K9SeZ9jn6WrrswT1oV+Yi6WwhsaDNjMPzH6enT44HqmKhpBrm7wlprNWEAPNOKioBImDc1DMevVx1wsLBFp91A==","signatures":[{"sig":"MEUCIAGGLgX5FODoIiXKbRuWATZuFVWXoErEFNQkzQmLc9ZMAiEAh/LTwZaH9CMdwT7AfspDBAV0mAAn8+haWdWqvN7oWXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBdtjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8zg//fXWf3/qkajkJw1nQwitME/WNC3rjgzCa+EnGVt68BxXhhiuZ\r\nTYFwn+k+TVk7wjoZDASPjMtCGZTnKwqtl5dP9eIF6DB8tEgyIVgoJ/VWZe2U\r\nseQCY8spNkDIavrOR+A/Wjiis1vfEfSBfAR+Wy9tRNezz1Xc/ske01sQffa2\r\nqVBFiENjXfu18Y3+VYm9To/Y2R2yJLwHY08WjeFeeSKvqbGzdog4857F+ZVw\r\nDRQiYzDTqnu5ch6wA1YwRkYI+oXTkeY/2AS7nw5JdWF3kqYfe2fel3SkIfvS\r\nLGOK7zLWcc0bs9hlVDwvBASyEQi97jpo/SHclfFXjnwV5/tSWNYRYUTxC7Q5\r\nQQfZ3oXbh2YL6207EUycbQjqQfchEolIcy2indlswDmdrGmANcJ0B4I5TRej\r\nAl+0WXhpW4E2jXHOB6FUMMCgGj9dVlqPFx4lZ0hVz8CCm6gszHuVcczaxzcN\r\ndWtagRloFvh21JhAnUnozSn6aXFPuPHBSgifjajQwcDYmdFR99fw9cHFpflu\r\nU9Z4Z2K/f2R6haReIO4HKHa7800F46/fjZ6cFSXmNl/Fo3QQyzSmZ9Ux22x5\r\n3IMefAJZy4q4+g+7PF9ifY4/Xy8dFWYI0vzXUz+gxwMOz9O9pdFHkn/A0z+n\r\n15089QLlI3GiY+XArX7BACoUSygEmZivwng=\r\n=ulNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220824080240.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/83db32077422c0b643f36db79580a334/chakra-ui-layout-0.0.0-dev-20220824080240.tgz","_integrity":"sha512-K9SeZ9jn6WrrswT1oV+Yi6WwhsaDNjMPzH6enT44HqmKhpBrm7wlprNWEAPNOKioBImDc1DMevVx1wsLBFp91A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220824080240","@chakra-ui/object-utils":"0.0.0-dev-20220824080240","@chakra-ui/shared-utils":"0.0.0-dev-20220824080240","@chakra-ui/react-context":"0.0.0-dev-20220824080240","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220824080240","@chakra-ui/react-children-utils":"0.0.0-dev-20220824080240"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220824080240"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220824080240"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220824080240_1661328226715_0.3761588985844322","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824082222":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220824082222","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3715864b0684e3a229614260c33a173ac9ce2dc5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220824082222.tgz","fileCount":6,"integrity":"sha512-lxiaZAlOc3CpK/Q5uXd1/AARbbOMaMbzVzVr/sDyxzA+owwgh880XsKVtfkNag8ai2FOcpvtKB9DLlIYYn0BWQ==","signatures":[{"sig":"MEYCIQDicVyMGgLq2Q7NrR3f0nCiuiIKPZxI6CqQrRtJ1YvTVQIhAIaHpjLUYZyz2ezvyXbFrxzIlCBilNOIiIZ2PngetSxF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBeAVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru7BAAobt4fyGkBP2y+y9ourVQnQWU80A08cKj6NJl4trqU9M3miFF\r\np63ggA5bXp86Yaok+1iw3fK7pdVE0LOQNkAAiGPRETl5KwSYaSDnis2NftFg\r\nmoAj2EN+Mq1FXHlBWFv4NiHMUdWUrYkFhSLvSp8BZj1zC/HLW3uBxxSwT4U7\r\nPno4qhZlQRrXSLvofhFUCtHbfdgZ8l8HrTtZUy+ufLjyb+2eE7DkEPKzBfL2\r\njXD9upNomcIq4NGbqgK6tvTS2fdoL7xaVlo9g243QLAcitB9kcHp3NbGDhw6\r\nJDFKjhEPE57Gv3B+IQeEhjLcVk9R2ZgvWzFiUUvi+LvGWPUPrz/Lxki0vgrl\r\nzjKBcU9HjOUV3lLJCme33FZ+1k1zgIErARKqFHk6VPlyI92ARDmipJ8a8ymN\r\nNPTcnSmQcLo3wtd9go5hvoBtyISU+ZlDcX/f8bmW94ek54so1Th5zhpHMhq4\r\nwE6zYKVjwDo7TbG7Vi85iIwVsr9dt7RlhEHrxmHvL60YUetN0kWLKvfhAHMf\r\nw/Sciq9MCtGYRAqWmSI9MTBwusagT9Cqd+hHi97BN/7x+Q07uszQFdmOvJb3\r\n4MfSQ5zm+Pd/EDXJJwl6WQoPsNTW/oOwd0Mc3xV2Ue7SFIu3VLox+DEbVdHM\r\n451z8pUl7ELnG9t/6DCsUB9RXsyCNDz6D9k=\r\n=NqbE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220824082222.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/e91c4d68c9aa4d738aef719cd6455234/chakra-ui-layout-0.0.0-dev-20220824082222.tgz","_integrity":"sha512-lxiaZAlOc3CpK/Q5uXd1/AARbbOMaMbzVzVr/sDyxzA+owwgh880XsKVtfkNag8ai2FOcpvtKB9DLlIYYn0BWQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220824082222","@chakra-ui/object-utils":"0.0.0-dev-20220824082222","@chakra-ui/shared-utils":"0.0.0-dev-20220824082222","@chakra-ui/react-context":"0.0.0-dev-20220824082222","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220824082222","@chakra-ui/react-children-utils":"0.0.0-dev-20220824082222"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220824082222"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220824082222"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220824082222_1661329429446_0.9724338135799806","host":"s3://npm-registry-packages"}},"2.1.6":{"name":"@chakra-ui/layout","version":"2.1.6","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"3dfdd8b3f08d9ff34fc923d44ebe4bc86291b889","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.6.tgz","fileCount":6,"integrity":"sha512-QDNaVu44UI46c+YlSF1KrzJkiwua0UtRXNTnR3jBE1uzcuqRow7xgr3E60dLphY2cPFqAljfQZUNlP3sgvCLww==","signatures":[{"sig":"MEYCIQCfZLiAv3Ith8TzDklG4ZyvTsJ5y0cg2VOW6gJ0jXXd3wIhAKJsPZokTtHq5hbXxFDJ2j7ifK+O9mOEEFvPzgO+KCFp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBeWEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGcQ/8Dy84LphMiVVNFrHGkpIrqjQzHCdRfLKV/wsUj5wrvnOUcYhl\r\n/3w5BnT+YpBTvfFnQnB9d8UsqHxErBuiUC8YeyB/ADg8JLNsYeJpFm2cr/XL\r\nYxp2915XBHZuqKR0OWXRNqhHhkvEjw1D8TsO90isSvdaNpeeaPfhCQ7gCprR\r\nWM/tOG4JJgUUki/FD6kJaFR4YBE3dPOiwkPTKTdFGuTxxwe4baqvb6wybgkS\r\nckgWqf2QN6cW+kb9NqySUw2wylvic49m7zcmocoF/mwx6tacL0+u9G45i9PS\r\nAYaweYgNxLh3GjTl52Vl4KMkjneWGM8duTX6jrxJCVCyAQZMP0lmxPZDdS3b\r\nsLNqgPPvhXyZiv7mwc70wtr4RMQIYy/8yQmb67BTbNxX129UpnaVPEg6foa6\r\nFf1TllDQI3T/EM3a7W2tSSF0j9phuUSjbgvl+GnUvZMWnvKryAP5EHHtYqDY\r\nUYuXgvR5fsg6TvIPnMiZFq/8dOwpDw5zZ8cShnfem+qz47JxG8sz1ZvtC7XL\r\nePrtvk6TlWxF/ELukJDBH17Xn3H88irN8xnfbvrUwxT5uL1Vw+Y0jLNGj5gH\r\ngdlal2ZjF4jsxbJ6fnC1qP7a3Hgi82edv2Ot6Smw+v2Wz5D7oGrPvDfYoKRU\r\n77tproBpJH4ss8el+D/xcHSUatiRQeQd7o8=\r\n=P8po\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.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":"/tmp/11d403960aeda14c86c6af12ad8c6c45/chakra-ui-layout-2.1.6.tgz","_integrity":"sha512-QDNaVu44UI46c+YlSF1KrzJkiwua0UtRXNTnR3jBE1uzcuqRow7xgr3E60dLphY2cPFqAljfQZUNlP3sgvCLww==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/layout"},"_npmVersion":"8.11.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.7"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.6_1661330820509_0.7051336128430072","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220908052147":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220908052147","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20220908052147","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2af45e06c3047d5a12000e27da3539f75541dfb4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220908052147.tgz","fileCount":6,"integrity":"sha512-lgYld83LUJsJxc+PJw6Tp0691UZUUfWMAdfXF04yLuSel/VBNZ6mMz5k83JWBIRMn2cnrArazxYzM0aWP/CHxw==","signatures":[{"sig":"MEQCIC7PWrv4U7dOAMCTWXnW/VF7XWuaVZjWtK2Q6hVYhY4CAiBR0uBEITcFakJnwyPip+ooXsu9xQIRe/oBXC2AJ0NDFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGXwIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt6g/8CWjMQ9diTieQwanHGbfOKs5w+jlK6wwOwN4AZqfAf4drpn5a\r\nScdbX+Pc2cptwev8wqWQdBhEF2yVuTyE1BvYjevEAOK48nkw1h5wx8gr7ZM/\r\nVUl1xFYbS826Arbo1sESPasB+BZ361ROZh9sIV1regvWjdYROzS8ty6eUGCA\r\nFtiOccRePZpirZlEiAngyUKpD1nPwDnniq4Se3odaeKoDmUzkMY1t/G9OZ7T\r\nhshDPbyBFZvMAKECwPXxQg/r+xnN019NLFx1MWXPUWMvd6iKtXI24lCZEr9J\r\noXmOzHimP9Fe9pnOdLgRwxSJn2Lnsg13+lGabNx0asWmooFvCENJtiHN/gLQ\r\nlIqQeva3fwEabUQI9sbofTjJKilwrZVoLw3bCG6gr4vrhpYmG/QJlRiqdN4d\r\nNJFf1ITwQD2Zi9WU9/IrcbsGTiAvPP5HemVILv9t/DkGg6vXcQ+u/N1APoXg\r\nTMAnn7AVGu7JKXrGtHJeTYYR1rD93+vVWbsRtP4pfMCxS46JaDQMjn0oGvn4\r\nIl/vP4O0OuLWPiHeB3oSHt3GVG9iZcHrA2MJRMwvKXY3zmzxXrsw9B2ScUsH\r\njHCc2Uxawq7ErW7c3D0JHgIN1nNy1tZpYWnxxPaOpirBlf7aSn63shSfjCiy\r\nH1pO8ZJUVSuX3BfmUNq/2TRCejLwBWdlIH8=\r\n=CR/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220908052147.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/7387a8d46fc7a3c7f64403eb208ec91c/chakra-ui-layout-0.0.0-dev-20220908052147.tgz","_integrity":"sha512-lgYld83LUJsJxc+PJw6Tp0691UZUUfWMAdfXF04yLuSel/VBNZ6mMz5k83JWBIRMn2cnrArazxYzM0aWP/CHxw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.9"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220908052147_1662614536323_0.9140228505968961","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220908054014":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220908054014","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20220908054014","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"167e10d57b2c42a3cce7e9e54f58b130f10d1c11","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220908054014.tgz","fileCount":6,"integrity":"sha512-SWUnCSMnU1/Ip+hMbGKlzfdnJzlMxbD1bYaCHHMSocYDcMmNYoB3Xh9XCO37F8jzoip44XqysZ7+yBUkla3HYg==","signatures":[{"sig":"MEUCIQDGTxim1bg1t5JidQu6KllF7kTpSKK0IslDVJmOh03j0AIgGo0SEgm7ADbif3JqIKmlOy8T8onlxo/lS//56PL26CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGYBfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkXg/+Oy+Rga8+nCM3uTqfJ5wKgFa2/OvVVmpTkgsWSrhcp3Mddp07\r\nTsP9BvryS0JRgr0wNRGj7n/FjaEa0e3vlpkofCJkynE3fN/h3heCtGKmZAh3\r\nTXxZ99nOaH9ouz61R4aIMStVmORD8CURqHqfVdys26zXvIpkD6EbZW8wAKjT\r\nwtucpSpiNKVD9k2Ql0OUaSNmVr3WRnkafIMtINE0tN3tTxzxSwG3OGxwLly+\r\nTHt/O/PDXFm0sAcxK6+N/0F7BisrK1h1nbIbm/tDqFDOC2672O1aoVf79FJ5\r\n5C4z97GhuOmjXF1ysQORfC41alxXtb+qL2LZUD+/QU3hBUmpZ5DN7siOqYWg\r\nKtnMwNf2uxBK6Av3sfGH5fxgpx2gl4pMG2jq3lS20ZuM9Vejm5lCHSwOXdvw\r\nVdKNqilrDpQTgzyxAfpiB6uanra3O/Rq+vo8TBEgBrIOGI4GP9cLHlcvVjAE\r\nYiKHKEUjFJaNWJkoh+8YedMLkgAyQWuUh1pAqtxu5WY4SjwXEs+8f3gy6+dM\r\nGCkxbZtP4IhhFbqKWRqqJoUS8dUnypkjIUnuc9Cz8XVFGWzwZmjr4H985RHH\r\nKKpZVxzgfyC5+uXrkpY4qm49BftJAm4kmlf6l2zPnJ1na14Q7YAS15Ma4/Be\r\nT09QYIlqOvpl3LIl5Bd0d4/mi+2p7gD81SA=\r\n=faZr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220908054014.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/67cd4a7a78c5768b4b59c4e6ace2662f/chakra-ui-layout-0.0.0-dev-20220908054014.tgz","_integrity":"sha512-SWUnCSMnU1/Ip+hMbGKlzfdnJzlMxbD1bYaCHHMSocYDcMmNYoB3Xh9XCO37F8jzoip44XqysZ7+yBUkla3HYg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.9"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220908054014_1662615646405_0.07785505142526361","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220908084954":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220908084954","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20220908084954","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7f125edef1bb6fdb7c7068b3c396679044d09a29","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220908084954.tgz","fileCount":6,"integrity":"sha512-aLlSK88ApgrvL2w7zmIQr1xSrQgVGBG7NcT1U9d6q4ay/+ClZrhI03sw2jwH7rr3RqoXa7IPcrOz728Im6M7SA==","signatures":[{"sig":"MEQCIAg4l7ih1OR4qu/XagEiiL0pY63oFC7T+wJwrRVUnkgJAiBrq0vAf5Hg4OhfSKq3a97U/ofsg0oamJGoHb7Y8qQDbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGazZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokpA//YCtPA+hIWTAhrJWecz3O00M0JjqtVrQ8jpGiekhnfIKI+h5n\r\nkEQ2CVH6TNscksM9iltmtlVaGmWRLy6gWsFOcCTXKwD9ezDG7u6On6ROsPN/\r\n18wDpz2bu2BMjb5P2NEsG8ZWU++zdSAUvdfqiid7VYAB3qLqS06i0H/RrspR\r\nJZZmJthUPdRMK6LiBkpY/52V8j2OzpTQUy4YTSZo8vzqbUH7vJt29/jWqdfL\r\n4l/QeoCdHw4XN0sWiwiSwHlvky33MZPD9zpvNTL1cFe0SpGCzZwXPVfol6Fy\r\noN+EAscoK74uITti4yHWu+kqy+UpMsUoUt/a3LWEOLJLLytldN3P2d6kFDYp\r\nShpFthQ9nnqaqJ6CjOFTYsmiIaZj8c0LQMrmj9U3eRoGwi5hhDTYpfgq+L1v\r\ndvNB1c1/uKYH1KTzcjNazSBqRWskY2dnXqN739Fxq9h2gZXfkpn9azLulCsn\r\n3GIBHc1p4lDuZBxXTb7JhXH/4GBI84pwuqBI8hKudtB6ysXNLAv1L4BbxEzB\r\nsUO/mhbDD3wvW+3HPHsl9xosp9Yg3VHOigNRvdctyZDfqqHFqdHStlwJmkvW\r\nH6dMEvCIV3lk2nnAw5F+5YDPxF6PUjTgE1fp3SEdPU9nIQqCp+DfdtiFqs71\r\n/dfUJYTy65YhL1SsqeXb5b3/ouDxwGLDl8c=\r\n=y2CX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220908084954.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/355b75de1cbce765975199cd7c8c859b/chakra-ui-layout-0.0.0-dev-20220908084954.tgz","_integrity":"sha512-aLlSK88ApgrvL2w7zmIQr1xSrQgVGBG7NcT1U9d6q4ay/+ClZrhI03sw2jwH7rr3RqoXa7IPcrOz728Im6M7SA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.9"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220908084954_1662627033431_0.16853029480835025","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909073735":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220909073735","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20220909073735","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d2c7b9950c9380ba6e7b31d61565beff237a0de9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220909073735.tgz","fileCount":6,"integrity":"sha512-L/yV9/e6DcR7MdLqUw8gWsjx3I9/ULidbPY5ABkbh+V73QxxmdHjJhLUwjJBPuDbJNikMKktndly00FftqWJNw==","signatures":[{"sig":"MEYCIQChsFJ6ZEs8dzoPX2teNX3t0LHGCWooKmU/SgL6BbQcQQIhAOJp5bh98LArWDJOeU/YPWj4xYQCrn80Se8N/1RziaJU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGu1lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE5xAAgIVCx2J7MYwfI0HJaWPmOOVANC3rkvMZG9dOCxu5h44WeK7O\r\nRxAg+C6gNiWO0o0PetAvdsfzehFRWJm7oGehDsp0MZ30FlQb8uaHhvJg81K2\r\npj9wESGvX5gVI0p/zoaEb9B74RyG8uJTjATjrbI+LltMRieGfRhxld3MDfZ3\r\nQAOUaiOoiUmaF3Rh8YfPVP+3ExvnwPT7PbctE3lbOYDkzJD4v///NZYbYz3U\r\nLaCOlMQK5dsTHxSIhKu64O4jP1X5iL9wWmjkZFkR2Sw9i6Kn5NdTnG4C2TvU\r\n+uuJp2u+Xp3buPWamrkFJVfJ4/XI+XfkQNiCE0sjsg03m8x5BZgWr8Dh770m\r\nx6GflDXwhdGO9VhX7RGdvRGvCsJcO8jOsiwd5Pm0GYwuzQeRfLY2E2rKqAMY\r\n3TpMquhsgFMVY1QHAkP7YrSc3r8jbPHlClqkcU9WZGu5eeEkTBy6eZqRNQUj\r\nTvsqiIPuGNx3IDbBwMt6hT+l/tVYMs/VVyAYIJElKwYf98NrB7x3il7xYsHp\r\nvCsWmr4eFY8NsLdSmTPzqvdNYgJvpyJ5tQBoOBtoygqRZn/I/nan9i+hCKrS\r\nZTnDRoR1xlpODVgztSWKNzt++/9k69eM+UypJgGaVIi8cLnKVOEDnWt/480t\r\ngizVF6MXKJMwHNOMwZGoO2yjuQInR8LELFE=\r\n=4xi/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220909073735.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/4b647782390e7ca7175a75b0d706756b/chakra-ui-layout-0.0.0-dev-20220909073735.tgz","_integrity":"sha512-L/yV9/e6DcR7MdLqUw8gWsjx3I9/ULidbPY5ABkbh+V73QxxmdHjJhLUwjJBPuDbJNikMKktndly00FftqWJNw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.9"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220909073735_1662709093070_0.4336117403413806","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909074555":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220909074555","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8bd6d4b1457710cd25f5d995ff2c7e6f745440fd","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220909074555.tgz","fileCount":6,"integrity":"sha512-BeIeyNiXXa/kBZZVQ7mcv5ANnwKQoluLEffPxJ3AQQxkSiI/WjbaajGq7O34Q3gCue/NP0Uca9rpQ950O6RLVQ==","signatures":[{"sig":"MEYCIQCW4hjFR47iElfm1g8yLneCv4MBwL7Xp0dOeepJwaTjdgIhAL0XJ09KvBjye3UTzwZ3Q2ms2RuiDXoVvYXrNWx3uPbF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGu9ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUMA//YKiCMP/KrtI/K4516RLOMMDwlsLQDdb/j521EOMhaS7WSGFG\r\nRjMGHTyoX0ghzRQT5C+y9NvomruC03TZfGayVDzCk+n97KqVjrFUDwC0qWpW\r\nwlHBhc69nzlQ3lyqA7KemRIZzG5xiQQvxN9NQbHtrnS7CpJ3PTCktwZmFCox\r\n6ydUy/il3f3HxjqbpmB2d8s9lq2Zo7vEe8Y2B6rdYA+b1KrTke4vqdRx0/a8\r\nsOq+jeTr3PLN4GyTpTEQpchMzomB9iI1AYOc+pbltmhVuEhpJkhiHP14Tq1l\r\nKQl1fk6r1JuQs6RD4R8P7KuCUBzSuXlE8B3ekiGmYAPyUVHZrl3T5jfpNQE2\r\nPU3UX20sRfKSXf5YRCYL35pkjGFkNBC9InYWA8810yGz1isD7ghlRcIYYJN4\r\n0KlgYyZFiX5Y4ME9wrX2TbnKkLuF4NMzUc2kKFD59B+oDnK3pbHBtXGFPKLa\r\nk7uKc9klSrByiP5Bi9Ysd19OaQCofHacv3YFRpjzPGz1ESa8byQqiJwtdbIt\r\ncsfhdYS/cMKMDpMCcMrvQJoR34fvcVIMoOZxClmuSqojU8uNyL1dw5+1/p9L\r\njwiCnuHqYKzPxE9YwkwkPtY1jdDk8kgXfflk4MJctAVChLDZbMblOqaMRM9W\r\nMxBUWej6Zre4n4sN6mF3JUCnoYNWujetlw8=\r\n=DTA6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220909074555.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/63c28fdb8765ef76189f87ff29f68784/chakra-ui-layout-0.0.0-dev-20220909074555.tgz","_integrity":"sha512-BeIeyNiXXa/kBZZVQ7mcv5ANnwKQoluLEffPxJ3AQQxkSiI/WjbaajGq7O34Q3gCue/NP0Uca9rpQ950O6RLVQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220909074555"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220909074555"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220909074555_1662709593251_0.009698633795055311","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909120637":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220909120637","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"33976666f9888144c76a735fd9cdda5a36ac4f4f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220909120637.tgz","fileCount":6,"integrity":"sha512-9UMhANIY908BodtpRqb56bZ4h9fuDBLTFh5kBk3Us2Jg/7jg6IUDfBFTXPaIlHSRt6I9qXc2IQUCiWKe+rtK5g==","signatures":[{"sig":"MEUCIQCZt5Q1Z/MW8yMRSurnAZFzkMl8vaon7psmOekSGDhL2AIgYvm80HglPUgEWePFjCCpQwxUQz1PsRYgxI6g7ky7bqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGyxzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDVhAAmz21Yo+7dutlBAQJh/aUhgERb4IPk5BEv4Ua7keqW/pB53Ni\r\nqvsZbaDOSJ66tlSZ6KavOmQq9Jv5TxyNLjk6AX/O91CcONWKKrOrvBJxZ0a6\r\nO2CXqNvzAg34wMklxeYN9Mgekzr30gORCmtJmbI6sNAuUExYaEXmtFSGWfjY\r\nCdheA2kCeAjpPyF5WMwOXgAZPAyfJqrHNVUhZu9cCrPf/YaguKAbEJEbM7Tz\r\nIDTV2eSdcsJrysClJ03KNLeiG+zrD4AaHHNuZ94B3w21g/kG1G1AQgbD1pJ3\r\nPu53IewMQ+ul10n1dUdq6QLrdQdgpyka/u8/Jl4XnSjqIGyyXPH1tJ1OaQj8\r\nxzg0j/1QfcvgEL7aE6mB11/wRF+bjlNye7udZC0RQWOSjEFBctBpWtt819bt\r\n1PlQYPrZ937e6Hl6RYGMJ/8jzLuPMHzqXgpEyQRMzaoxi8ZNOefCZHhN88nb\r\nnRPfNwJTtp69h/omESYUHgFE2N0MV1v+XWAC3T7QrOROYLwiYBKRfCIrmFSE\r\nOts097z0tyQMwUU7ecem2ASaAne6/nmjR0dz0ABlU0jUJGW1n813DljavaoT\r\ng85GBQHUTUGNCdiVnfbcntCKbSGefPm6e5eLM9DtjWh748qNgF4eEW83Cb41\r\nU3kbb16rLhlPgtG2Qx+aQpu7IGzqm6hoWXE=\r\n=q1qx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220909120637.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/80128d1aeb64d7d039a30210224dc258/chakra-ui-layout-0.0.0-dev-20220909120637.tgz","_integrity":"sha512-9UMhANIY908BodtpRqb56bZ4h9fuDBLTFh5kBk3Us2Jg/7jg6IUDfBFTXPaIlHSRt6I9qXc2IQUCiWKe+rtK5g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220909120637"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220909120637"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220909120637_1662725235416_0.6105476799712455","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909123132":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220909123132","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ddd34bcc1882a65baa19088d05f502c01a2a53ce","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220909123132.tgz","fileCount":6,"integrity":"sha512-hyg6u95tGOl9tKR90LicL0mZ9RkQQP7V2JC92utcSLLyBvDEDb7auiYHPCcA/Tjq8Km1mEfvDBLkG+aEMsDJVg==","signatures":[{"sig":"MEUCIQDHWoHOGy0NahEjPuDdSFRW8KYXDxweVjJfKLmjp/RcTgIgdkPS0vglv3rdNJckYtzNqNlvKCJAyemGKnjhI6PZPVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGzJNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqS/g/7Bxi77buv5zIYg/He85fCxsYPXfy4OAMI0Kn8qQ0GurgcjHzI\r\nNaio9C1EEZ7AI7aiBwwQdR2ccspBdTHpBWezP0PHp7yza9mfFeWIMUz7mFzu\r\nx0EgOh7UY+QPWn0Co1dAKBEFYL5f55lcK4aiKhqTLwVnEwcfDKiYivl6lrU7\r\nc3Jo0fBuKYLp8PuFdZQL+FNiGYwuL/WZW3+fT4yEM+OzlXAKI/1bR5d2jTE5\r\nS2ruprSF+70QHhVUsrz9aqLjffMizFrkDM90NBg7h56CRos+npXPmbCK8VKJ\r\noIaBZwfkFi9S8ct8d3WbYrN5CRueiTSRJAepahm/BDSIkRoeP758diCG5Sl1\r\nW1Udp73lxn0hKkmgWwoTO14IihD3kFLiKeqztl8KZgp5LJ78f89wKYYJwDLw\r\ngdOhCYw8aq1PwuTVWwWdVDH1mRvu2Xy+kfuFV7F2cMaSa1ZXjIWZlPEx6EpI\r\ndtPS9GvOPtZIA1zqSo8H6UOmvkzStgNt7A3AcO0x71AbuTYBfzsPYCoSyi9+\r\n4991KIisoeVhXsIgEzAQceqNPJCam+yUzBsjviQbYlNNSN2ReTr7lOhQI1M+\r\ncGADmbwTaHtsJEw7aowCTdiLMghSc3utsxMjR3sAgPWvhNyzGQxGFnu1tGsX\r\nnn821iIiji3N1HGQ/jbktjFcnAQumqi6kEg=\r\n=/LH4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220909123132.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/1a7a2c2822225623e6b3c29501befd66/chakra-ui-layout-0.0.0-dev-20220909123132.tgz","_integrity":"sha512-hyg6u95tGOl9tKR90LicL0mZ9RkQQP7V2JC92utcSLLyBvDEDb7auiYHPCcA/Tjq8Km1mEfvDBLkG+aEMsDJVg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220909123132"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220909123132"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220909123132_1662726732895_0.526697811209764","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909123934":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220909123934","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7417bf595990adff50a670d2a9952a2a185fdf91","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220909123934.tgz","fileCount":6,"integrity":"sha512-xUSXKOCdOFF+9hWeyFRGPlCRInJgwVHLnI+KTjNDipMiV92W0p8Npxeps+K+GLYh+Qmx4Q5CYaCqRyydohGZhw==","signatures":[{"sig":"MEUCIQCzLn8fE6RaPtpnHx2iZujf6Op+Q8Uv7oZ7RVFQKjtAggIgRQ3mlLzZIn/790HHTPFBBHofzl4h6wQgRkEbHa2OzQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGzQtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq70A//eDcgKqApSEZs1KN9NQHXXQzFc9YJju1QbrtEvurLCTiJJIQw\r\nLTYk/7IrQdyALpEKn9DP4erEJ7TU/U+aHYOlR5s1L6GOSveuXEKwSnmfKdHH\r\ni1ClTHJFFOQhTM2iBMv7n1CFT0sfF2EnPGvnG9YyB5v50ITEl8wxJhq/RkqR\r\ngeYwMhqo5nL2yj0vv3JyYVGdYKzfCWq78QHmFNspxQhtFeLwgWY6sS1ZS2XT\r\nU4iAn9HIhBcAUuw/0cGeb1lYLvduCQdqhd2DQJKT1tjyRBx96ePj9Bedxj0M\r\nADLwTAkEjQC2NKNzk47SA3dk73rwnJeRbIZwIMje8DLBTszPzcc9fMH6GBLB\r\na7gTi9dBsZT8xaoxkLuJREZkEG29fEEaRrWG2B5sEkU0Zu9/GSJKLzWjsF1M\r\n1ifAd2ZuTQcNpRohWvjIFBru2xE1gjHvXzORMefhm6XmUpIiN3Xsrkhr53h2\r\nzJkIrIhzVqj9InnUoELfNrX3kbSx0MlvL5UQK1IfLQwn6027Fxea2AdfT9qH\r\n87h4DHHEyeZmPI5sNyp0tzktz2ehsrcZYaTmWfi3JwnfWIz2Y2MCWfwcVEhc\r\n3O2dmEvfhp35Ga8w4MKHg+5A3TSzRpYnazijU3Zk9i8pYAmu9TnuIKF82wPn\r\nXX9fBakp7+4UwRppjffqNhdIGzvUZd0u14U=\r\n=AcMB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220909123934.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/f1b4a805f2d327cf698ffe23531eca4e/chakra-ui-layout-0.0.0-dev-20220909123934.tgz","_integrity":"sha512-xUSXKOCdOFF+9hWeyFRGPlCRInJgwVHLnI+KTjNDipMiV92W0p8Npxeps+K+GLYh+Qmx4Q5CYaCqRyydohGZhw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.9","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220909123934"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220909123934"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220909123934_1662727213002_0.36347171073423246","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220912120959":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220912120959","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e787826cc0ec45e1bcd2e695724bba5ca617aa7a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220912120959.tgz","fileCount":6,"integrity":"sha512-BlZP9qlSA8xKu4O113dMHpq4j+ms5Bi+RRe6TRYs6ZCT5H2ZOag9ZbUDdF1wnUy0N20FFT/Np8Zrs+b9MzjZMQ==","signatures":[{"sig":"MEQCIExgy+AOhtus/reqX0mffslC4QINaIYU5O9oeYthDuANAiBZYpSEIWMGWDs/1lByLL06e/GKRXY1AzKHd/uPjw4DrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHyHTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrElw//b8jeMpsw3G45KaW8HCr4nwKZqAGeK0CNi/5UPd2jsRRkKr1C\r\nxAcWfA6YR3ih2hpVA9StYT+n4wA+ZoZP3BZ4H9BXNyoOPHpltx2mUVffCS40\r\nMQnzsUmQYLnfZWj2kxmox5p0IMu3ksRpGhondF4YMTm2pPJC3CQzbRxyISS+\r\nICgWzgRxeoNiWXh28+tfOx10fnvGt2M/W5IQYAmpbHX+2bP5nIN8PB43GESJ\r\nsuspaSrMEQ6bwSHST5PJT6j3I2+NWoXgKNUO/66kjWCGnp+nUP7QmrlwzB5L\r\ntSO6XV+jS9X4BzTPdS61A9HT25jGpV2jpA9sjLwovxrYTUKE4o8fHQDBzi7S\r\n0/FXQmh9TGRGjfujUplaArh6gUtiFzuF0OLEREdOEczi/nQO0gjouB+7WEWD\r\nmZi3qx7h0fX1ahqEKJiCd2MKwyQnhWneWYlYjCM9cZCfDtBE9XTCnnUWCvR5\r\nabPJ+O9lIlkYdHPZ/gYz9HtouTlaULgCiiqMk77w2MfP92ap93EPZY+cV/lb\r\n/PsAvEEt6KI5BJl1ch3CO9+N8bndZNuqN7Bwoe+65jWNLpTkmE6VEwczAGff\r\nLONQNzMuXCbxtTAyKhiac5nMbJvbIsYFWeFIKwFJG8Zq5dRxTeuDR+L08CFv\r\nkpAN/ykDjpazb18V6nSZHZ4VHwdBv7b8blw=\r\n=VrE+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220912120959.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/657488517efb6baab0101285d2bab07d/chakra-ui-layout-0.0.0-dev-20220912120959.tgz","_integrity":"sha512-BlZP9qlSA8xKu4O113dMHpq4j+ms5Bi+RRe6TRYs6ZCT5H2ZOag9ZbUDdF1wnUy0N20FFT/Np8Zrs+b9MzjZMQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220912120959","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220912120959"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220912120959"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220912120959_1662984658817_0.7644683230083185","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220912132201":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220912132201","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"0eb98787b9f484514d731f0880bc717203b49014","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220912132201.tgz","fileCount":6,"integrity":"sha512-rJGBv0pIG4NjxLM75mnGitw7D7IiPWcCHDo2G3peUbOjpnhHhnGFcJ6cjf/RC68aeC2jKs+no9OK5T/d1ZPdTQ==","signatures":[{"sig":"MEQCIHzFCjLSlEHXK46pXhYARkzdszGLmsLwFLyDF9gFO7aWAiBkCgrC08z/3wDziYVXCpHOatiZcXcdtbNj7ynMTsAb2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHzKyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolXA//e0pWH2pma0bpiP4hvPIEvGVdbATbfYH2X2Gx2DQ2sJWM4pT5\r\nJMHO0SzeU3ovgz2ZNXQ3ObZLiDBbbB+u/R87Mnh7K/e1x/a+qmd3w2zq7z98\r\nQ1OMHf8FpcJKouOdu14wIVAd1zoaB3shAZMeKCMQSzzyTMZRM20J7V/s1SGX\r\nQgOFPGhr5UcPJjsNd7QOG1r6ev/+VDR5d0Ut5afHV4C79YlzksH/xi6nHk4N\r\nGH2WRIOzpRqsKOWNkdZS9dUR0ZMbXIxkhq1ZssuhOOfM/wBpXYCj9hrYAwMi\r\nBnVxnRC49+h4OUJi7XseUPapRH3u9Qgcvk248uiP7hgKBSWBFTVG2veE6bn4\r\nmtQfhVTbbOn++na8G2B6ADDbU1+FntfUU+CUMtZUD8DmCchpTszGhs3Vzx/e\r\njrcjZBl+etAD9CaF0108LqlUC8V031KtILzXIbJ+hnYkhUtDBN5ov0RPpRSt\r\nEI3kPZQXTIwgjtu7Q/rSE+TrmqZKXDLMC5XKDK57tb6YPcBIC7Cn9S3ukAyx\r\n8CO/gA6q8NDZKoqxtMs7O5TUpYJ0TvSTnINN9fQESW13E+zsa9MypYvM2veE\r\nOkeNXtjjmy3P69lefrC71kLZaKETycDEj6QAD1g3SgF/MeEaADqYeirkHyKw\r\nPLgwz2LW0iJBI1GhTarVV+JCtVRoFcF/daw=\r\n=7tkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220912132201.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/590eaea77a3418b8459a777088950851/chakra-ui-layout-0.0.0-dev-20220912132201.tgz","_integrity":"sha512-rJGBv0pIG4NjxLM75mnGitw7D7IiPWcCHDo2G3peUbOjpnhHhnGFcJ6cjf/RC68aeC2jKs+no9OK5T/d1ZPdTQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220912132201","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220912132201"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220912132201"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220912132201_1662988977773_0.9286921226934104","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220912133211":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220912133211","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d85c58aeb9e3a8421c37923399e2c22472b1ddc0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220912133211.tgz","fileCount":6,"integrity":"sha512-/shxNCx9ruwUUIaEMSZnSjlMOCKQzjbZEYMhHiNw0wd4par+uSf8qmHkzUtVLrA0W0OVpQzYB0WriHs3vAkMlg==","signatures":[{"sig":"MEQCICIsZYxUqRzH1q0Te4nnZ1ilO5+CywuYbfFaKQSqdJ4gAiBm8dBTZaov2Y6JR16wAdIE0sRnkYJkngNgFs8RXUkA3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHzUYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+oA//b809x/ja6GNBF51vf6brRabjvcBw5gRWXaDtvYQOKS2ogUef\r\nrlwNa7BgfPmRRS3/fc+oYsvBIC68BXRblRTlk4GvWVsBbeN0UcjIejIWbDPd\r\nqIlpjZRewE1YNvcDJQ/cOgiz5PeTLn/gT7hWKu/QDT9a/t0rZZC27++eGRBz\r\nU5N5ICsplpM7Wk5FWzVE6yliIbVTMgjyK2sNSoqQSePc6yvWg48svvhKiJdM\r\nvPuzXPUq7mcvYBrVk280E4fyjmKtC187k0qjflVGInjIdAIyEWQPz8fi+kQd\r\nf0/pqPFplRw0molI7U38EAq9qM0zE0rJfoXAWkAEPIrLigJxTi12arFeDaMf\r\n/QLN8sqyTInVCGMoyjjqbc3zvqNsDrawHQdCdW7mIF3q6m93PdclxuQY4b19\r\nJdaspIB3HIIJc0cJvUWbgXxlgu6JXiWU+mR8SVzpyU21Fd+Re4DMR061ddSY\r\naVYSNmXcPSMA+zX8aNcfAhSlaosx3JnZ26pfXVXL60QBbCFzEytWgXD1AbM1\r\n51NZdc+ZqV1TtNDA24Vua+J6r/whEVpLyvoZ0FQznVQlODh5xn8vRA1qVZeq\r\nluKh7HdcKjZc29r2ntJAGUd8FTkz22SE6isEnZWsjY07IOql4JmLlfTddSuq\r\n2GbIKttezt9KqhC8PAikvdLf9UbwtoKuJD0=\r\n=E6EM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220912133211.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/c5b184c717f430f0c26238e61bc64f24/chakra-ui-layout-0.0.0-dev-20220912133211.tgz","_integrity":"sha512-/shxNCx9ruwUUIaEMSZnSjlMOCKQzjbZEYMhHiNw0wd4par+uSf8qmHkzUtVLrA0W0OVpQzYB0WriHs3vAkMlg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220912133211","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220912133211"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220912133211"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220912133211_1662989592513_0.9286334237556728","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220914090509":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220914090509","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4d1255aa0e111034bf254f1059f9b69dbdc23c9b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220914090509.tgz","fileCount":6,"integrity":"sha512-IFlzK84cw3+0sHAOPn0oIDk9XGGr5yNy39rK8/2gbvd5zmuL0LxPCNrcIbgezzmn3Hhp/bY6zkBUunGszHdiBg==","signatures":[{"sig":"MEYCIQDeHbwUb9YhonuUK00/Kge019YIROkK2Fxs5xTI8/pzpgIhAILgvHYyuwgqvirnpHztyxnKcNw5PGR3BWwUMxYXSntV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZmKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzuA/+OPkf5+aOZcLU/0XPX+N9peHI9TYYHweu4bk8fKO0BvNsbxXK\r\nHEnOK+z6KzwpsZeigGE7jh72Cj+t6du4hca7FHQJCcT/wUrsBzDAJm5H10R7\r\nNAkr4UqdU+BMDM+De1zRCdd7HdmfHH+65ZJfVGW7VjNHuUST3EQDwBoCNEL9\r\nmzOtJv2yERwsc3GnEaD0vitS74itg3gbV9TkaUY1Y1x6GPWuLg8jz1e8Wbty\r\n78cBYf2lWwtJlN6XEfVMi8eptOjOANTrUlhPB1U2bIMRZcH6jX08jzBXamLh\r\nLHkquXG9/upzKjIZefu60MZy5zDdJwvVHGVgpvBlJVoLWbewAvHfercVJ7To\r\nkwCNw+hQ17gSHgj+c8S6UCoyfRfs2maJmGLAAxVAwHvJmO7ZKTyjF8FpUC8S\r\ntOS0haIIk57gQCGcU+dGHAuDgWUgc92+4gUo71SzT63bDgMUaANOUQuNmYou\r\nb1Kg9GcUhdS9m40GzwR8RF2/5ftNcO5bpIoLip7MSlRKa3lni1ZDL3kmmo+c\r\nN615rkGk0pQF3q71CF7aIC1P4pPJ9fLuGXj3wUn2+4yFLD5Iom3SHgz1GRmS\r\np7z/dpXDzpUCukeBu3SjCFj1szKHprb8UiZjPJHP/i8iB4G2PTupk9pgCg06\r\nnEz6v8bwez/f9yDyb6DAvYyfDSlcWZ4SFig=\r\n=iNVZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220914090509.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/7a95046a57b64489c5bac1f8c2e36d17/chakra-ui-layout-0.0.0-dev-20220914090509.tgz","_integrity":"sha512-IFlzK84cw3+0sHAOPn0oIDk9XGGr5yNy39rK8/2gbvd5zmuL0LxPCNrcIbgezzmn3Hhp/bY6zkBUunGszHdiBg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220914090509","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220914090509"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220914090509"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220914090509_1663146378630_0.9463880102470468","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220914105014":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220914105014","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"fbe25505970646b74d79ff44ec9dae3fb3048197","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220914105014.tgz","fileCount":6,"integrity":"sha512-VgpQp2DHZ5RaIoIalqFazNdAdMuEikQX3xnLd12mzc6NDV/Aaq305Nq7KH4EYPPPH17X7ei4aAAfsva/Z9o7eQ==","signatures":[{"sig":"MEUCIHULFOmWESxhTw0fcKx2Va5USLNMe+cfrVM/pURnVJBvAiEA7zdK7cZKSCkNtMkOxt4/XXIs00mAugeJ0ZPHhOgY/XU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIbIeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomRxAAnLAqVEmFShpivfV6B+alUYHkG5jmCbjV3/H7XCEPjaDoHY5w\r\noqqbFiYc0QptvdMHAlVMmTfyyC1cGYa3k/BR/kVUUN+m75lU8lIikwkHRxon\r\nGHiy99/N6R/Gx27P4ATqNbDrTvs49RZiJb4fIQ6bqcK5uF22qP7xkpfQfgiV\r\noUhinULrV7CY7IF34X1cdCZ1dlHVMYb0Tz3JwZHG9saycsK1+PPlXHybzKTb\r\nciOqumlmBa+CM9JiiV3TxjY/3QAJYa0H4Z1pKrq7K4u+eRjGSKHwD2Vy6m6v\r\nOTImfRnSqbjduUJcvbCpXBG25sRJ9KmLhrvzIfjOtaljIlVLPQhKpBgvfRGP\r\nYKamEG5UqbRS075nO4w3fEaTgc+y4bN+5h+TMNjtIViBN06ak751YJPEnyD9\r\nbiGml835E7DQeeLGjmiGUHVWPA5oeRDep5Px0fZw3rRUIV6KDC+bVWLsOX5r\r\nsOaOIyz0n3sib1r0xLbDKFDEroFUJPcUdwEkaPbtInPWAeeLfeOB9CSVufbu\r\n+eWIBZky1CHNr1VWbVlVPjavTjNFH5S3jj+ejrMKxe+sNPdnYTKHLOI7n7gE\r\nlrxDhvBvyxKl6KDCrH/nHFnMhZhVteVsd390NV/itsL66egznusGkbvXz2cc\r\nQL8kvJEDgOdaHnfwlDV9Ozp75LtqUiNGLdA=\r\n=eCmi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220914105014.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/32e7a83939211de1620033fad9b1906f/chakra-ui-layout-0.0.0-dev-20220914105014.tgz","_integrity":"sha512-VgpQp2DHZ5RaIoIalqFazNdAdMuEikQX3xnLd12mzc6NDV/Aaq305Nq7KH4EYPPPH17X7ei4aAAfsva/Z9o7eQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220914105014","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220914105014"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220914105014"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220914105014_1663152670607_0.15462168477468818","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220916140800":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220916140800","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"270b2939a22c537341310bdec6d97e2ed06634d2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220916140800.tgz","fileCount":6,"integrity":"sha512-tKuOniohqo0U8ymcYFtxuvt1DO1pF7M+X5VwYXx+EuPWUQv+Pit760sEXK9IAMOOCFQ3iHjakvBz/0lyiLR0Rw==","signatures":[{"sig":"MEUCIQDCi3BhGXzhF2wWbUL3lkp8KDO9QiSRhW4laH6xVI7UmwIgKwIODEL0MhCDSFZsgUopiS2fjqaN0CnLBqAD8gRs3yA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJINxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXAg//YFVS3tDUY+KlKQm0wT9duq8lrT1tZ2zt+3Sf+T2tyZgEwsw7\r\nQ24IizQZHlMNt5+o1GCbDa9mAa9T9415sWTVH5/RDUaSs3Uxwh2TeUwzAeR/\r\nKJHGIz8GVGeN0+h6DQKOvByPr2x+mFnPIYgWgib2X8C5DQmirg9FHeyGDOXS\r\nKKxUXk6IbDFZpK+npSrU1anVxNc9qILC7eDrSSwNzuRjC/kEwtCVVJ+6CYt4\r\nldKN4HC2O0ERkN0eibYXbF8bXCq3bAQG+Q006yEH+bLNtw3IOX/Ld8h2BqpJ\r\n0H5wm6DjhPzOnTfvq79Mbjm+wx32BBfc3VrkJaeHGb112GuBzLecIDO6KHTG\r\nGWBt0owH1sqe0z0P5OkcHkA83vzyLS9DKNCqwKQb5Tm3YYm7gwGj+/mJJE/L\r\nWjjhN7N0KssuboTZ4jbG8V0yGESrd82M3t/XN69NvP274JkXVLiPyWC1FO4v\r\nbZh5nOMumrNKmZl6LVHZEwxPmE77N8zGPi66s7BoxElHhwbPZjcjNtJpTF7N\r\nFKArN994zB/aAcKI2Ocue1SOdKs8DF/q1XJbJffoXnqq2HKuX+fSKhHts7iD\r\nL07uAqwo68nmGuDJ87WmugohK13RZtHRvARzyelO8EwffE223fdqqKAjfzn5\r\nJNXcKOZmiLk77hcq3Bzd1QEkdP53C6P+c1k=\r\n=iEs/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220916140800.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/30b0841240756bdf5f2679e8761b4e9a/chakra-ui-layout-0.0.0-dev-20220916140800.tgz","_integrity":"sha512-tKuOniohqo0U8ymcYFtxuvt1DO1pF7M+X5VwYXx+EuPWUQv+Pit760sEXK9IAMOOCFQ3iHjakvBz/0lyiLR0Rw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220916140800","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220916140800"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220916140800"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220916140800_1663337328886_0.15424527538893917","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220916141616":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220916141616","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"41e9eefc4330dce3e193ea36c66e88a1877a7bbd","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220916141616.tgz","fileCount":6,"integrity":"sha512-lNUf202GreQUm/Pg0TGbuNBDut8oYX6FtDrlzJAOI9hTLAXrAVpoIfbIZrjHwk5i8MBgRIHh485z0X6gSnEBKQ==","signatures":[{"sig":"MEUCIEIALAp70gh0d8Cxvu6dQvp7vktHUKppejgfzxbpOouYAiEA5LcwTL+SslfYL01YQkWOnvNhVKek31p/IPrwmoTqub8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJIVkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJohAAmSgPxfpPXQ2A0Ixb7NXYF40ufsONpWz/+wSpWYj5IgSYBJC2\r\njD+g1zvgv3xWFHw0vG9Iup3BkGYtNtShKNdJI3hIh8BcxtM3VrMBme8fhpRL\r\nIFn/St4MwsDp9+AIZeH4iIJsWO1XiwVDC0cTzy0LO+CL3wzxvOMWPI0rCtQM\r\noM2Q7ABhUz/XPLhyGkM5Gzn5DWJze5TRsp63lW5cV13rq12hyKELEAcjoZT4\r\ndGthD0N6oj8yHYxyhcfXebxTxEckDUstweojgaLoWK6EWVFfnnuyKzZ1V3p8\r\nF6iGx8JwtJCNw4bPOtWUXpp06AXszjjGvP/IIutgLB9g0jVEnC7N6vVTi6O/\r\ncFhC0scnWSfsLm3t1GT4vAk9IbhKpvRzWj9huaRBTw+wc+Afwt2g1QzgltWq\r\nWBhtyRcdwRmaenwvmWyq1ACyQH+r8A6acxT/TKq737iItKd0HymtUZwHppEK\r\nORTDYY1OlCk71e1TMMYkSld03WspESu24tlGhw1pUrvy4/Qn0GIjyWhyuBUg\r\nRJ3qc9wOt5egMH/swnN8uDP4wCrLSlsWz8cytu9yYblX4ZgNPZDwwWHlrAF+\r\nTs6dco3PEGTni2VUZLV8l/aANhnHlriwjpd7APFTG8BB3EORZqHOQFE15Fq8\r\nsuRDNruacsxcoqaZqh4Bq4brJBGx1ktDW5c=\r\n=pqhG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220916141616.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/24e70e45105d304c1ada9605f7c08765/chakra-ui-layout-0.0.0-dev-20220916141616.tgz","_integrity":"sha512-lNUf202GreQUm/Pg0TGbuNBDut8oYX6FtDrlzJAOI9hTLAXrAVpoIfbIZrjHwk5i8MBgRIHh485z0X6gSnEBKQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220916141616","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220916141616"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220916141616"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220916141616_1663337828163_0.0772826732947689","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220916144141":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220916144141","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"cbc18dcb37288bcc23d33ad084fc16ab31484624","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220916144141.tgz","fileCount":6,"integrity":"sha512-vmzRCLKAB25HXwjVj6qDWC62CyF8mc1zi1Cm+ljbdC+XZ4cUHkb757VP+BmrwcrOZoVFlqEIzsHVFMkSzP3V+Q==","signatures":[{"sig":"MEYCIQDjWCBlgBrcdrB+NCH2IT9cLAesa2QQzHPejlanbrpJNwIhALd9QkS7VmiF9cESW+3E07FgA9ZVfsXbxbqP9OhTxjeT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJItgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobjRAAkS8hxQVBCZai7UcMG+xOddy26C5RTy2Ymy9kwQR5Fjy/fLwb\r\nzHF6WvO8qRJSLuNETeKGIA/iPxZfb+o1UqDsGw4TqCDwvDTAN+lWKzDysyk/\r\nHbrh1UyFlgqBGZxrRh3sr+gLgMvEUWe06Vz3kRnrtj5MBYLVdGOYdxyerPjW\r\nsJ4ZW3y6OL7HxsQDo3LTtfnLeIJy0URwHB2gdRSZV0b6cP15P3L+lhfvEEIX\r\nn23Z8FlL9YurDkXRBmQB+zjSC7VSvs4EniGqUL5F++rfpeujEzhVTAf1tyDZ\r\nICf9gm4YjBoafXBgFYXo1+zFOst3nLgT1QTj5ctVl2Dmx1jBwuHCokzlVDZ9\r\nSDVEv5E+KUXM0ZawlZlJRWPi4DhSQc2cOl5qo9PajqfgpKuhaDb/RfLpweR3\r\nPMFqgbBljDP5Os26hPq0/93LTHBd3ynmz7UVADA5cCZI3yL6bq8v5vG9vaKV\r\n4kmIp9IzW2BLrohYkadwGW5d3ovB5SwK8ecT1it7bn6rawUH1JJUVL5CPsHR\r\nl5nfV8NwvIExwCslShZg6b+VG9PbFu5HHult7qyg2GWnwE7elBsYNlkJMnPe\r\nHDhg/JPtxiO/yDHm2otEEjf3WlEfDHyMEZnQxAZmoZI2627EI1f4hR2UxGqR\r\nruj7gR0xJgY3G3aP0y6OwoDv1qsL4RQhZiM=\r\n=aBaT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220916144141.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/a9417f92dccf5da6d9cf465331eb8af5/chakra-ui-layout-0.0.0-dev-20220916144141.tgz","_integrity":"sha512-vmzRCLKAB25HXwjVj6qDWC62CyF8mc1zi1Cm+ljbdC+XZ4cUHkb757VP+BmrwcrOZoVFlqEIzsHVFMkSzP3V+Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220916144141","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220916144141"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220916144141"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220916144141_1663339359887_0.5921453936569694","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220916164745":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220916164745","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2c66924a14d648f89ba2e8b965423f30dc00a675","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220916164745.tgz","fileCount":6,"integrity":"sha512-eo4s4TY33zyAZvkDwTs7A2FoV5AaUav8eCYf5e21TvyRk0HLeIc3Zg+tzgT/6VmbZSnkZ/AsDldaCmvWUxbqLw==","signatures":[{"sig":"MEQCIGmqm+Pv6DfrmPS5YwddwzxLuObgPOBFLB7R+I85iws1AiADX4RgRv8uNMb282zt4UZVsiGUlZr4PUjrM/ttVk9yrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJKjsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0GA/+PdbBU7bfFGK0CPLmTBHSLvKXCenT2cW3TzllF4OoXAl0r4/C\r\nTsjXBeaT42KwWzqmq8NTmAgHyKSTsYRtPLljrADoyyU9jpYIaU/r/LSpC5gQ\r\n1GMvdx0e/6I9Hxmt0uYohXWBkkT1qSYRTFJ4d4/jtQiqI3z0B8vggC06bcfH\r\nnzVSQFoap8D7WQbd4XUiHRvvfBsH7aBRwLM5O9lHpW1QLbOBP6HJ+Z3k8JFs\r\nULKcLHPOBsDRmvGTsOHRpPj+sCpz1USJnNGOS75e19vwKVR+AqGwmg85fuxl\r\nQsFkOj8QCIXECGudsx4/WXJvrmlNc0EbNtdoPGgMZHujWuX9TcKg5OQFFsPf\r\nhvjFZChE10xgF2XEx1WK9At8edHlM6aNbQ+e7C+5UHbdadz93pRsxiH38t9A\r\n0S/Av6wZ+ir6irHv5gY4SEqGBXVdjQe2I9y/KqhxO2W2e1wECYg1UFu3pSPA\r\n0ppLf7kX0NgkMImqK/pfAz+JuvNlSqsub7lmckvx1Ho6WdLy/uE2jh3CUp/V\r\na83W58gr3hSXgSPzo5LlXKgsRwBleU0bfdxR7OLmWgGgMgvktH+Vw4Kvv8oV\r\nwakB95Z2AcXt2HFmJHBL6XwFQKkR5EqBhgd52HuIEUNd5sdVSFaORw6ee+y0\r\nlg/wfjcg3YSahBaaZjgwOw0z4dY2pMTMo/U=\r\n=gbpL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220916164745.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/0d67911705cb45205bd69d253eb51ec0/chakra-ui-layout-0.0.0-dev-20220916164745.tgz","_integrity":"sha512-eo4s4TY33zyAZvkDwTs7A2FoV5AaUav8eCYf5e21TvyRk0HLeIc3Zg+tzgT/6VmbZSnkZ/AsDldaCmvWUxbqLw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220916164745","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220916164745"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220916164745"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220916164745_1663346924136_0.9367951846421094","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220919061024":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220919061024","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"27e5bae9d19895d360233744f775e64097d38965","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220919061024.tgz","fileCount":6,"integrity":"sha512-ytUTfBQxxX9scFO8JLNt3ayrMR8K515y1suiTT119XvxCE2fAwqdAzKfY+3dHggFuH0PJJXKMe9UuBl67wG30Q==","signatures":[{"sig":"MEQCIDVvicpn6lBmpxFlElesvFLOEbEoHtV6g7s0RGpIXEEwAiB2jOynGj/3FZFt0UiNRdP+9absgBaxI3qAohjnX8zJWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKAgKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrbQ/+K1cAKHajOtVOqR5Vk0zowVyb5gfABV4t6iVZA0HMEsZqBqXX\r\nlrF8aQ8FasgHT25+7bsqCtb4YPmdRZY1q7BRKhFpc6jaOpFgWgiDlyV4VlFA\r\nO3YoMaFW4/UJvRSaZmGJAD77mmU1wlBpN3AMhZRhpKj0XM46GZbiCplpD9dD\r\nI8Hf4ECNkwyuQalX1rD+uWhumXqq/KxKfXp5ZtxU4K+A5nPUcMfPFDn2nSqM\r\nf7w97KisRLQ62OfZR444yT9Er5HW8hIkcBWM9C775gWMZBIh7LUuwol2ZD/h\r\nvJ7TAGDsSTR3R7qLVUEmuDiVzgGAOsoO4Qzz7XVRBi5fbinx7e20d/jNsQo0\r\nZNSiAraqOmKPH1egKWf86qfs/CyjD0RlVj8pyqzUuVjdflPRpgGgvmMtmGGJ\r\n7xeMVUYzkKhvZJTo+YdAoYzyH9dpvG/eHJlvrFIOdO5ZvY9siE1yrdCl9aES\r\nLxcUZUcvY/A6lHsXWP1jrqe3ugSFF2efrcDQHdsktGRr0QyfJ0CToVVAn3Ob\r\nJYb8WnoT3K1c6NueksbMl5U9BrRJBZkW9XTBdl0wuGU/yTpO+a9TpJ5QrBem\r\n4TFoDIL0p2dNb/t46XMu4A9QntCP9bvX+8zoY4OQL3k9lxa6ihIio6emyDOh\r\n7BUJlVfjQpgdTGAmdL4nldbkJl8ThSaTLg0=\r\n=ztLc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220919061024.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/85ef30a73ed715bf80d9e7f78bf0d383/chakra-ui-layout-0.0.0-dev-20220919061024.tgz","_integrity":"sha512-ytUTfBQxxX9scFO8JLNt3ayrMR8K515y1suiTT119XvxCE2fAwqdAzKfY+3dHggFuH0PJJXKMe9UuBl67wG30Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220919061024","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220919061024"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220919061024"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220919061024_1663567882734_0.5947173020021783","host":"s3://npm-registry-packages"}},"2.1.7":{"name":"@chakra-ui/layout","version":"2.1.7","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"a273a220a1001d145ca96f3c88edad90ed0f7ec8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.7.tgz","fileCount":6,"integrity":"sha512-KOPTh1T71HiWA3YjHpXmZx/sSXSMKJJc+E+1QRrhOoUPwwEW0jLLpiKGLmelmmB+ZrMMWaq8io0du038xPqkGg==","signatures":[{"sig":"MEYCIQD2UFOx9uRHpOW9w7Og5j7MJiFkdKbzdyiF7ia8PXzFBwIhAKe/QdTDv1rcfVzWmZukHjpE9IjSsokHF7dobVrFKUW1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKBwwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFpQ//YY3QRtp/N90E82wW405umIL8qRJdsKvLmCt9infEzFU7kfMo\r\nP45VLr1Ii8tQXQ4TPaAMonBtO4xujEQs7icvzvZxTNhD3/+QJUZ4/yN/C34w\r\nQsbXA1MZX7jSeXHquv+12aG/jcqhwABT4oDMhsrJyUosboMSUxkQyC1n3QmK\r\nfm5v9W2LD0R1gdZ9Xjq8qjo9/dUabOVUVNJ3Onl26IQpnzomOYmGQKFHbjxw\r\nyPFTwPH1cqMXqVxPKdszSTIfuCjZg3Y/M/DYUrw+jIF1XyyXVVhHSjvNPutH\r\ncpLR5GJaOEQYy6lkNfCfCEy3J+eePuPrTloM2riQcEeCwaW4BrbCs2YpjQjH\r\nt6b0yADvyziePqEkxd4hpMls0T7gRXPvqEeG8/eL7X48JTEbgiqhgilxmoVK\r\nfFyutyg80Ibufn4NFWvPS63Q4FZUhXm+kk/Y1jMqsi09yBU/57HD4++75KAK\r\nYoWQGDmzbxioDzQ3R9JMdkK7r05GRPf531/PhrdVMcZDCzx3nmfo5fi3hA0Y\r\ncN9Oj74XyjDLoyR+lq3Q+hFkoh90YbGYdLWWbFjyzO3z/wUW3dM7qOZVrJHs\r\nxbWlLN6+2GdG8NQ3Om13Ec0P46f4XtMckr77FZ4HptsemRv7ByuhghIlHstn\r\nrKIdCx4NYoDIMpITaZd+CpCPljvyHOP1c5M=\r\n=cSIs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.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/055c270cc1e91d0a2eb3b8b4234844d5/chakra-ui-layout-2.1.7.tgz","_integrity":"sha512-KOPTh1T71HiWA3YjHpXmZx/sSXSMKJJc+E+1QRrhOoUPwwEW0jLLpiKGLmelmmB+ZrMMWaq8io0du038xPqkGg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.10","@chakra-ui/object-utils":"2.0.3","@chakra-ui/shared-utils":"2.0.1","@chakra-ui/react-context":"2.0.3","@chakra-ui/breakpoint-utils":"2.0.3","@chakra-ui/react-children-utils":"2.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.10"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.7_1663573040421_0.5967022468548673","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220920121057":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220920121057","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"efc64cab8c162b293ceafed70e98fd6745f876a9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220920121057.tgz","fileCount":6,"integrity":"sha512-jveAUzWaHZ0IpkjrEdreisThS9G++OlDtw7rjUHgOcWkMgtX1+tHv3o6jXfVOtYAUjdE26uAQ4sxqPDMhtr4/w==","signatures":[{"sig":"MEYCIQDC34YL2x8veWt4jrVQm6FjVXX6aFHt64z5FJsOnL8jyAIhAJlLpGaiyBIboOYXIyVybI/AnInL+xYwoPYqa5ewz+bB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKa4OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOkQ/+KH8UK5KiLMm/uRJuohtkz7p2Sqc1G+AqRhnL05GjcZ/bm2Gl\r\nDeCPNiYWxBJMc1UhhXzDNW5ALKZYKN21mSLktFjTTgl78WlmhOX5bHMwvbSf\r\nPd4dV+uO2wM8u+G6E8WWoaxggY1ABWiM8QPmodchxQZPdGwePqlMM/BSvlQn\r\nNwO6KHhBuBa54WEMLIbDN4BAWTlqOqGuZvh8Gl8scYnmpo/2s51MFp0CvnCb\r\n0kZCaPMtZ3x2bsiymeDBRvtgOhMYbeIBcvQ4tBmqxY833xb8WQRX8gJ/+i9n\r\n1vzCKim3sIKdFA899HKiSOLzGiZL2xN6mYU5JdXy5LQkCB8aCGlhqNMh32WL\r\nl9UqrjUUbCF774RgznK8t6XnBQWBNoDdO/ZqLpcxEfGuhdD+131ex06TWEGu\r\neCA9lfyIHAATECgU9N6LSaHhi98n0eriL/QMLPCGcQwIYg4VI5SnYOScMFhH\r\nYZWj9RRa+xOdcWDkVxO8o/SPOtErjP3xhgmXDkFC9Uc+MGDCdZ8eZpX+grbd\r\nTqzVBXwHKuIbgQtqJBCVsY3htq2IpcQzdB3kEuFechn6WLtPjypKxJCri9ik\r\ng4G3WtNR3IzIFg60xD1ttUnAyDrFYriex2lvheWQTXfMkKRJSxe+MsNMZcAS\r\nqGaCwoW+PGAkPkPpR8W4RNeXCWcDqRPCFqM=\r\n=DyBw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220920121057.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/cd23e46a199e6b821cbe3cbcec23e0ab/chakra-ui-layout-0.0.0-dev-20220920121057.tgz","_integrity":"sha512-jveAUzWaHZ0IpkjrEdreisThS9G++OlDtw7rjUHgOcWkMgtX1+tHv3o6jXfVOtYAUjdE26uAQ4sxqPDMhtr4/w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220920121057","@chakra-ui/object-utils":"0.0.0-dev-20220920121057","@chakra-ui/shared-utils":"0.0.0-dev-20220920121057","@chakra-ui/react-context":"0.0.0-dev-20220920121057","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220920121057","@chakra-ui/react-children-utils":"0.0.0-dev-20220920121057"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220920121057"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220920121057"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220920121057_1663675918218_0.3262602582583347","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220921093814":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220921093814","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4c505c3cc177601f7c4414eb86d74a7a790ec508","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220921093814.tgz","fileCount":6,"integrity":"sha512-TobtqtjluiGFNBJD6rFsLO7UGgTB9lhpT6xC4kCl08hToYhKYrZlcKOZvS3ftccED1lHRoPpniT1PVSUnEvdnQ==","signatures":[{"sig":"MEYCIQDNZFJK9Qf7C6n+ohi2vih70+y5OtBLb4u9D6u4HjpoWgIhAP5vwmTb6Q5W6V9aT1vyRSM5C3+OhmGMht1niPZ6Ehld","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKtvdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQqw/9EMred2TA3IBhHUpMfIU77iOo/Du1qSZWsNGYJ55wXtz2C+aY\r\nCNUkDLyOEe1xyuWYntmgDRoHXZzWERPfN0ej9/80zIBjKdjJfH98SOopi0WT\r\n7v4K5YnS/PIwUPc8RfZJngrEhm2pL2U0uR8WcZmIE5ZOfgr8lgrCFof0MGE0\r\n3TjcIB1LNRPa87LJThjThSiVhvVj4UmbJjqoXYf3tpbvmhvG7zs3qecxBY+f\r\nzeIeafwinKkpgcJ1ynVf6xKvf+56cnjKp8T8vAiYMQbmVFrCjluFrXIzDfru\r\nEwyF5XLVCElRzSTOS3RyragUls05Pm0nKNHCActYmzzlm7LW9oSZLLZniMOM\r\npVzpUYWDglGkkt5z0KXTcccuPhX2G3McpR7zkiwexKEUMl/0p0C1Wlf+tfov\r\noNlErLjzQtSvM1UuOjledkuKXnnKq0HOCf1e0jFG6O7l0xbfW1rEtqxwZfv9\r\nTheDW9fRvKjligOWpAVbbPSxhlFUUdytplIp4VTOCgfjqdtYDJ2XqsMzQUGq\r\nKG4V4c3v3ByQl1ZpfAXfszqbgV494+Vz64Zog/yA8G37xZsg85+T/kb/ufgG\r\nVC+IqKbCvnO9iuf3lmV4RGk28T+mbdO6uyb1LemfpGJL9XkJlhrEDLz1tAUF\r\n4LdF9cILvV9JfEComoCWn2U9xI1RpMZxAKc=\r\n=3A/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220921093814.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/9c1c80f7f0351a7530e704dfd3695d80/chakra-ui-layout-0.0.0-dev-20220921093814.tgz","_integrity":"sha512-TobtqtjluiGFNBJD6rFsLO7UGgTB9lhpT6xC4kCl08hToYhKYrZlcKOZvS3ftccED1lHRoPpniT1PVSUnEvdnQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220921093814","@chakra-ui/object-utils":"0.0.0-dev-20220921093814","@chakra-ui/shared-utils":"0.0.0-dev-20220921093814","@chakra-ui/react-context":"0.0.0-dev-20220921093814","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220921093814","@chakra-ui/react-children-utils":"0.0.0-dev-20220921093814"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220921093814"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220921093814"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220921093814_1663753181094_0.35952275454810323","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220922114557":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220922114557","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"74b1cd5cdb8887c0fa7cb89e9b412607e53690cd","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220922114557.tgz","fileCount":6,"integrity":"sha512-+B7TutJprz55EtKp11mIEZ6UoSST3jO1F/3jB7Mdh0dpeUBuzW/UJSciFPTVAe4p401RFDSugvt/C6L6aLY5eg==","signatures":[{"sig":"MEUCIQDbeFdxVxA0+NY3r6gLD6oQNCu/J67SoiP5T/oLV/QATgIgZY64OZ66mkFJd1oOvv9YOD2zRG2qfJ9nMms/8kwKFXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLEsyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq4w/9Eq2eZfNfweztDAddR8qMVcMmwMcag/jNvOaloMOFm0T2rtsJ\r\n/Vr2N6EuJUQy13nc3jUZIVxCpAKVNzqYjqkZMInxk9zQZ0wfcc9NPXVx8GtJ\r\nfsCP/RJgyXDInetc6jF8cxAWNaYJWyzQ91bttoYeZ7y9LlEqDKdtRyep6o3C\r\nGaE2uOgjCNdLiHfbgXBcDFDAHo4adUNnky/bDsBu2vcH52n7MxEOf3L6VJwt\r\nwjf9BlJgVM8NdVVAkqh1LRWZ450qNgmg3+l31AIQnsbfAeHpGU8hLmrCUBD4\r\nJ5YfkdfxYBsvd0XvVzEWEMI2uT/gpm6Oc10UiMMcX0TkaAGbEjpmvCSqIy0q\r\n/hwfhaI86mU/SGD8zEs9usagu9dNiO9H9y7JcaB0Z4zZ8P3xPhkNSmrCnzpu\r\nNT6HA68iAjsDnWKPYGwssX3838ebj62/AH3+RtfgkhQGnqM7hSvDrpfuMzbX\r\nu/IOsx6NmnzPW/4N4geNeKy5H/9jeLsZG1sSHBuKZnDPxyzBHIz/k/CLRhhw\r\n5i+AFiFEHWFwIVcZZHGvLH06wD2puptj3jnZXWt51s609ZLvkpOJUQgc+ITL\r\nyAx98XcfUsxxuwjtjKsNu0J8GxympO9IW/A01gM/5emvBopBHjB5NHmhWLIW\r\nSyE5BBb6fGWjC9sOjLCgPRuAr5a3VWZ3vwI=\r\n=yyQu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220922114557.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/3fec90b1a01556802c1cd0d6fc64490a/chakra-ui-layout-0.0.0-dev-20220922114557.tgz","_integrity":"sha512-+B7TutJprz55EtKp11mIEZ6UoSST3jO1F/3jB7Mdh0dpeUBuzW/UJSciFPTVAe4p401RFDSugvt/C6L6aLY5eg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220922114557","@chakra-ui/object-utils":"0.0.0-dev-20220922114557","@chakra-ui/shared-utils":"0.0.0-dev-20220922114557","@chakra-ui/react-context":"0.0.0-dev-20220922114557","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220922114557","@chakra-ui/react-children-utils":"0.0.0-dev-20220922114557"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220922114557"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220922114557"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220922114557_1663847217821_0.19541366876890898","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220922115811":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220922115811","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c5b3574a6245d4c17409b78de9c570b375621f7b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220922115811.tgz","fileCount":6,"integrity":"sha512-MKE903q8RqYRVdgyFObTLa7iWffYxMYJ5zSryb+tHz43hayMh3H4HaM20kPk/fFvU882VAdAJ8GoXPYmeWyvww==","signatures":[{"sig":"MEQCIBDy7x16yS++QxZIHW9e57hthHe5FWesEz8A7yJTNMSLAiBY2zAvX41L9uctDQGw7vnBcI6FPb6DuU/Rqiukk7e80g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLE4SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5zQ/5AOnjoFj+u6Y9+TMm8r+me5X36YKQ7IZj4opJwpD+xKJhdgNd\r\noIEY7rkMgFFU/OmrUNNhRXR6eQpwYo3PS5crt4R39b/cLBAVDt0W6KTTB4o+\r\n11PvPoNH1ad32f6oNv9gjopSrBeJf0/O9P9cK+ZEuazo+Tz8NSlyKafhjia0\r\n0U45xH8B26m3BoQf43haDCCUuF35FTrVd7MYaYgCMN8iEHqOPg/6pK9HpA13\r\nGLav/JZeWhLfLruXnWQ0O2whayDyj4rFZ1YE403Yx0ueI6hFNjvyCWBRO3Aa\r\n6rmkTGCv5jtZ+tEPBquIrrKCC9lKD644QWSM/MPYLA2qv+yseB70TYBPNazV\r\ncVYJyRYPXoRrbIpGOPmepF9bt9u3NY1d0kE0xhLOvREUyhuSyJ/KlaD8kicP\r\no1+4QjRmHaISfOH9JqJIyYC/pI3ZBlBZpG0aqEUnvDOvoeZT0xCUnOxi0Rnb\r\nm8gAfUBY1k6cb0r1lopTqDCCi8/Oy2uhqXCtPwyjIdiINQz61j2ceMU/QEaM\r\n6ppzbURmiN3GONEWTcls3scW7jnJKUWr3UcA0vTHR1TdRpU/kxqfGwVSMQtX\r\nqgYtrVYZI6ZYA+uBuxbPTkmXt4PCROAfwmRspOBp6wWWWfAxB5YDShdMWUm0\r\n2OkMr51oWR7Hup24lZS8anU+DKpXfXDaWao=\r\n=cfnu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220922115811.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/d1c7739c763d56face08de18c6d9ec2c/chakra-ui-layout-0.0.0-dev-20220922115811.tgz","_integrity":"sha512-MKE903q8RqYRVdgyFObTLa7iWffYxMYJ5zSryb+tHz43hayMh3H4HaM20kPk/fFvU882VAdAJ8GoXPYmeWyvww==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220922115811","@chakra-ui/object-utils":"0.0.0-dev-20220922115811","@chakra-ui/shared-utils":"0.0.0-dev-20220922115811","@chakra-ui/react-context":"0.0.0-dev-20220922115811","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220922115811","@chakra-ui/react-children-utils":"0.0.0-dev-20220922115811"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220922115811"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220922115811"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220922115811_1663847954581_0.01789965611669042","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220926164115":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220926164115","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"607bc5751c5ad0dcc1564030a02bdad826c227f0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220926164115.tgz","fileCount":6,"integrity":"sha512-AwB6rEtNm89tLLH9PTV0ArB9/IT7aK/rVzoOtDJ7V3cdAvkjTJmX3xId94fTvA2lM78oZ7cjBtv4CJdKDgi0fw==","signatures":[{"sig":"MEQCIHq0kO237TCq2Yi96iMEXIEnpmV8DDmUG/u4r4vlpKgwAiBUie1PfU+aD0AL7v/WvWQptDq7EyvUqk1dNA+14yxG3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMdZ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpEg//dOB2FlZrYzZc+wJlTOLqm1LgUmewC+H7RSyn3H/TGtYNnGOV\r\nWCmebluGjC+eZNvg3Uk/19VfP+DnuwoZyLsQ0Ft1bL7oFkeO6BoYR7XpTTsH\r\nvaSKP6UJiOFAYCoKmaAS2Cs3C70XnXsZYOdS9GH6j/aMPRl0Vs/8G0Bcfa+2\r\nFd+qClkwWeNIR5kej0SSdtWQZNdHpEnBlo7rJaGV4PZh4xHBr1PEtWX4FZIZ\r\n0p3zGTFMG1ItBrf1X5V+2nWxP2UK6Bua4KodTtNd8BZKHClj5TS35860e+LM\r\n4RRnYXRomodx7EKYJwkX9rVyHnnupt7YZaO8njslZllY4ku53gN/rEcbsMQL\r\nVwB5WffBxDOSzJFU+4CxAHfnWlp5uzDlnQO+FvVoltEQnautkhd+lU3WQnQU\r\nYF3ogy3Ptjk/2JjkTDzD9ly4InCYh9zS96c+Wa9kzr0ZtcLXUMmHBZGmNu0O\r\nO9Lpj95aFUEZL9hOWUO90f/SzoOiY5lIRg6TYTUaTfDGJRMG9Gl1HJk+v8Gb\r\nWJEwTAW2PGCK6Irws2v8Ik5YqxlbHTyngq17cgDe6pQ/w5rT9nzazbrtfBSZ\r\ntOoUU6reIGEDh25RmlmftD64FmTMRST/XEnWN7B/JkVzkehgsQxTmYd5ZutE\r\nviakhddOW97pCoIvwPtO5C3V9HQ2U7UhDo0=\r\n=OalH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220926164115.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/af43fb24dae42f1c76d9b2fd3148df98/chakra-ui-layout-0.0.0-dev-20220926164115.tgz","_integrity":"sha512-AwB6rEtNm89tLLH9PTV0ArB9/IT7aK/rVzoOtDJ7V3cdAvkjTJmX3xId94fTvA2lM78oZ7cjBtv4CJdKDgi0fw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220926164115","@chakra-ui/object-utils":"0.0.0-dev-20220926164115","@chakra-ui/shared-utils":"0.0.0-dev-20220926164115","@chakra-ui/react-context":"0.0.0-dev-20220926164115","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220926164115","@chakra-ui/react-children-utils":"0.0.0-dev-20220926164115"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220926164115"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220926164115"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220926164115_1664210559039_0.11070783458145206","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220926165450":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220926165450","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a44021175de37ac1c5eaf72b4dd304aa629adc52","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220926165450.tgz","fileCount":6,"integrity":"sha512-OTeTsuLF0oVdWgwJ/Y6c1XWUt9PXKAHunX1+WlfCtuW9l3RozWdmOh9wDzDRcos2eXK12Z+G1ZnXBJOB0S5oBg==","signatures":[{"sig":"MEYCIQC5s2e+qmzcBwq2Pf5n8Pz/6gbRPC52uwI9feQB3m7cRAIhALqV/JL049OTly2VTD0MjVZ2odxMN8dIo/7Lwj66tU2x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMdmWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQBBAAk4drt5U8hC3oa+Ylq8xX8iO+iWfk3q3Q+/kuCjz70TOgg0Vv\r\nDqcSsPgvwcLBSEHMpORhHm1pej44iIo209PC3qc7fTpN3tp8HTBDJtT8iNXi\r\nAVLfjvvgXoLgsI6ZfrXszsxYdGrzAt/CfXKErPjG7nNkoARgtAPDdZnnrRVm\r\nsPwON3U6zNACjXNa9vY/xLOPn3JRmIXzOacHUTpqbNu/9pbblck9n947bSu+\r\nY6pISggADa9Ws/oaBJ9+EAykjhmP+MXX7MHMFeVRHVJMX69N8eMZjABCly64\r\nmTTWs+hpbWtA3fzrkxGhkBgVlUJREwPe6diSKVaitlSHn1nAgqptiDYbBBsB\r\nd+jFrHP/FD68PyT3NKXZlziy1yjG89EH+88cTIRCBuFRb4nhJkF3+/TF3/A8\r\nZ4wi2stznaAnF8W3XnRXTr4uByuY+Css1fX5Aed1tCwp4zHCSujw+mTrIkCk\r\nwAwr0giGPRPXmvM7QaNZMjFvrEjO1DGNeYEeDr7tcW1QjgD4pjglFZ3VRhDv\r\nMhG5g3buTFZHdxc3jeDw/P91Ybv+zbMSrYlQDWF4gYal/Hc2UFxW3kYsptkL\r\n6ul07f7Gv/HphsHWZMV9Mu/a/QvC2wsvU+sr4YsILp5yxoW2Y7/k3wlFQw90\r\ncGNktA05+AwIrZTepuagBGt6VoF79iuHaZs=\r\n=bBhb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220926165450.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/0a6ba0dac0c978f66c21814563334993/chakra-ui-layout-0.0.0-dev-20220926165450.tgz","_integrity":"sha512-OTeTsuLF0oVdWgwJ/Y6c1XWUt9PXKAHunX1+WlfCtuW9l3RozWdmOh9wDzDRcos2eXK12Z+G1ZnXBJOB0S5oBg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220926165450","@chakra-ui/object-utils":"0.0.0-dev-20220926165450","@chakra-ui/shared-utils":"0.0.0-dev-20220926165450","@chakra-ui/react-context":"0.0.0-dev-20220926165450","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220926165450","@chakra-ui/react-children-utils":"0.0.0-dev-20220926165450"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220926165450"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220926165450"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220926165450_1664211350617_0.000008005913092690164","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220929105632":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220929105632","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a82f40130c2aebf09b726536f8b6871152d86355","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220929105632.tgz","fileCount":6,"integrity":"sha512-ZAx7RcUOCYyLS3P4YCnSyFYaLu5oabm9EkTk8G+VSdGrwfOe5UMu2WUyD3HpttiZvBGCZsoN+7LPtZND0GmqDg==","signatures":[{"sig":"MEYCIQC9HsaPC6YAXT+ca3pPx4Zav+8kF2O5u6uKgTNAxvxEGQIhALEI6tFCVICQfnLZQdrT9KQ5jZxn/s5S3xZoPSHKWQBw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNXohACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa+hAAjd4f1mFq0P4oR0wTvu8B32dirPlKZgFsmTXohhTtNG/s/BE9\r\n2a5+dugKLiH7Hh5b/l/jKFouVFHdPwv2caMMHsBXsy8MitZBKQa9JMjXk8Ul\r\n/sRKlaCXw3jskM797wT54XX9XvmzdfARSIcnr/4Ixahu1s1xKEoFuYwejOFj\r\nhjS9rvG4rc3ezapmx1okT09G+KTipzIkld/84oBgDgH1WRBj46nLlF3nWK06\r\nFtMgbJtM5cRjTaAuevlypCyJLjQDOXi33+Ea1kRwnDteNb/IhV9Judz6jbdW\r\nonA/QQ4GiI8k1Urf2bIYiqurTRBlMyvqFYlKhvvbCb9+cUYLMQIaSs2KQm5e\r\nZtNwk17+hIHBqk/njwRIZljnEvMLzg3Ei+SPMimxCH9mn7rnOML4RBouwxmS\r\nHb0ipRrVoHt6Rc/8/Cdz+NUVsAMBJe2AkCmg+597m+z1VRnELkIkBlaa2/Gv\r\nua/P9lTIWa3g9JmAcHN2HR/U52/MslfFu1sQ6dyCkLOFcs0FEKtfm+h8C2i0\r\nqmJ0hPbxWFJ3OLgvtk/5Et8I+jooezd5lmbGRJHKjdl2oS2xjZt4lsI2C7d7\r\nnIJc6CK5d1VV994EgfnnZbo49flHrM1PwDnxFJdwiiWlPGUjJ7Vv0EwGTCtD\r\n5YVd9TEqNM56wpiNrEew7U5rh2mK9hj24A4=\r\n=/87J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220929105632.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/c3fa0793016f62be0b1e0a080043e66e/chakra-ui-layout-0.0.0-dev-20220929105632.tgz","_integrity":"sha512-ZAx7RcUOCYyLS3P4YCnSyFYaLu5oabm9EkTk8G+VSdGrwfOe5UMu2WUyD3HpttiZvBGCZsoN+7LPtZND0GmqDg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220929105632","@chakra-ui/object-utils":"0.0.0-dev-20220929105632","@chakra-ui/shared-utils":"0.0.0-dev-20220929105632","@chakra-ui/react-context":"0.0.0-dev-20220929105632","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220929105632","@chakra-ui/react-children-utils":"0.0.0-dev-20220929105632"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220929105632"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220929105632"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220929105632_1664449056873_0.8904396745460796","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220929132459":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20220929132459","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"78b5d842fc9462c908b3935423a95e7cdeea9d35","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20220929132459.tgz","fileCount":6,"integrity":"sha512-UYIZB6As1x91AJM9LCsKrO0mf1UZiIzMQnmIiJSmJ0jZKWLLN0q9zEbCP3gLnJvPSjO7u+ZSJx5G0Y4DM6OEuQ==","signatures":[{"sig":"MEUCIQC/36wKZjkntRSkeIFHgUWQ+99SPsQqs3QUlMJnuSaAKQIgUkijacwx+na2O8436x4TSHI0PTa+uOczoJtVcqzcEBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNZz6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWhhAAmkM2gPSou9OgpAEapzq0lOB0NDCYUfuk8I9bXQ5MXHYsfw/1\r\nRhwtamMgolsFvIheuE1n2fHa3OSJeTdrajOyX0BWGU9cRlJHlPcjdfX37ov7\r\nVrAHY43g3zRWCLAi/6KLyRmpweYwTxYy6BSw8BLtCgjJM1PWjj9TWpEdH8is\r\noOnOn8o99LCqJ3AGJdD3mBu6Pwj9mABnUpaQPlmGeXFKWM55cAgYcCBoKSp5\r\nimZtaSlQw0su1lFUq3PQQmpMEqpqS97LCXuE0llpr+dKLW59bGKercYpGPrk\r\ntsJ0pk0Y3Tjwid2PgmOfXSHNVjI4xfQOjguBTF/UayYOdW8zs8YV+/PUzShe\r\nKPzdNVgkt67tipv2ClFt2GBUFijpfPq783woRDgNuP8G9b5XFsaMp9yNaj1m\r\nzgl7upx14+AEUpNbWED3XnQvqvtLzCMh1bgVmv6eOciuBziU8rBXOSwnVRqm\r\nunm2DivC06wJWP2sETx4pBt7Orm0J5iNt3CAS748hucnpw9H3SBCC6rT6nPT\r\nJ3QRv777xJJI10J842K1qS07hcYZrVGZRqN0iD8/Ly9T8OvkkQ6vJBpxace1\r\nCVfFiQAG/A1QEqPIFoWvSWbGhmJ8fH3FAtagFyf7uZ621WT85HEOlELAwTsQ\r\nIg3JwvOtmIrke1tRDslP8LcWJAZA2sBWTpU=\r\n=8pf8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20220929132459.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/98cf2165063311d7250acaaf9a03af0c/chakra-ui-layout-0.0.0-dev-20220929132459.tgz","_integrity":"sha512-UYIZB6As1x91AJM9LCsKrO0mf1UZiIzMQnmIiJSmJ0jZKWLLN0q9zEbCP3gLnJvPSjO7u+ZSJx5G0Y4DM6OEuQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20220929132459","@chakra-ui/object-utils":"0.0.0-dev-20220929132459","@chakra-ui/shared-utils":"0.0.0-dev-20220929132459","@chakra-ui/react-context":"0.0.0-dev-20220929132459","@chakra-ui/breakpoint-utils":"0.0.0-dev-20220929132459","@chakra-ui/react-children-utils":"0.0.0-dev-20220929132459"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20220929132459"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20220929132459"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20220929132459_1664457977874_0.7897247810052523","host":"s3://npm-registry-packages"}},"2.1.8":{"name":"@chakra-ui/layout","version":"2.1.8","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"5bab204e33079527e0756e2f3616718888b5f14d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.8.tgz","fileCount":6,"integrity":"sha512-pcNUNgMh+e4wepNOlCg5iDrxGg4VFBpqZPmSHoP4TyPN2ddEnDRLoMLaREMoX7gEVyTsqEFOFg+wa3JZK32H4A==","signatures":[{"sig":"MEYCIQCAe3U9PFO9wtF5+D/rQnbMV9m4CgX0YXx4GoETkEjM2wIhAM/C9R8Z7wNBwQF822yp5AGwqLM9qvYxy3hBPQBVvecT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOqeDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxGA/8CKYvGBk0mAlCzVjn6dPuzux1OJF1xPii1fpjY5mnx1vBltE7\r\nL98qD+e3NkHGHuxkxgeF0ei4fmnyqHYcay7NaeHuBQqw9Fx4Mr8WYp1thIkX\r\n02vIKCbAl47TEDhznB6RzxwjxiRHxOS0S2F7UKiFIljaM25kHYLIe2ECX/7m\r\n57hSXJrhdZZo7Asi1QBqZlcOzxOdIFiOdae/1cFZeFzR5aJdLaVMnSpKs4as\r\nCAvLxTge6en7skAyDY8QBDpa5e8/ojfnFsbcN9M4aCq9rtqwxXqd+57xm4rI\r\nX3iXQvonBeebVVV8uHcFA8BZK267hAs8nNdM57r1S8JLy8tF8ffTTZMJ3prk\r\n34xtBp43NzVIwah0z16LH78niZ3XsJ4Eua+AbYdJoJrug3ot4FJDZmZlpkBN\r\ntGlv3rMt8BKrmNmRyNRPsfbSFbXdlFlP+bQl3xkK+0ji3/vfARGX+yLusOsL\r\nF0WWG8zLwlZPW60bCDqReCSgFyoL4gVWOPkmqdovQLOguwv8tZV1u+sQIh3m\r\n+IV8p5GUtkkC90l1jT3sSNq4KnBDihb8UDBdPBblgCj1XudJIiMUCUNf6cNb\r\nRrELezyKHAN5xsBkbvuuaTrMUVQm9gMOnfa5ezbMKpDecSGFNzg9+xsG2Zg0\r\n2ji25cpIE17Sat39tvPUP8NKOgufWH1W+N0=\r\n=m/se\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.8.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/a4d2ceaf6e60fd0afbaa3ac432601381/chakra-ui-layout-2.1.8.tgz","_integrity":"sha512-pcNUNgMh+e4wepNOlCg5iDrxGg4VFBpqZPmSHoP4TyPN2ddEnDRLoMLaREMoX7gEVyTsqEFOFg+wa3JZK32H4A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/icon":"3.0.11","@chakra-ui/object-utils":"2.0.4","@chakra-ui/shared-utils":"2.0.2","@chakra-ui/react-context":"2.0.4","@chakra-ui/breakpoint-utils":"2.0.4","@chakra-ui/react-children-utils":"2.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.2.12"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.8_1664788355635_0.4334698688455656","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221017063840":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221017063840","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a2ddc0df177ddf52e31e81cef3a6a2a5cecb2291","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221017063840.tgz","fileCount":6,"integrity":"sha512-b7Iw/BiyKaUgyt7Jz94TyLNDeY46YrZGBVsNlCK4EAsuHVs6h1FNqDawBl5Y6vA3bA7K4GWdksPZZdLNUWgOGg==","signatures":[{"sig":"MEUCIAc791YQAxl08LRjbJKMIeuTuEV5gDT1qWBhE//0A1nMAiEAjkNCyL1RRiqwm5xbwKt3XrJ45WRcdvB53pid6NzMqH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTPiaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5ZRAAmFnB6Gpve3keCCocbhnTqK1kZfLu3Nco53S5QXxVwaLwz+7D\r\n5VMb04rE4BP7fENbS8UOaLZNP++GlZZYrA4AvMatVO/kq+kyKeB8c1VTPVrx\r\nJrMmwmxuEozaN454AttH0jqfvT2r5A04BuFdl7rzogizq5ogziaQiwnaotkn\r\njwgqQG6pWoNZwJ4Xq/Dp8l0m5R6vJnoT2MWzBwt/eYx1xbAleRVafjhFuZTa\r\ndN6eyWdNAVYYJpnGoSPOLs0slh5oRHSsvDohOr+wlpSbd1mnlAJqobi/0M6w\r\n/2Kw80wpqn494z2AGfdBiPVYcLjpo9QsBchEcCUY7dXAH3vOJbhIZSi1kyQE\r\nULj16HkLQUMRzQL7wCAQ35tHp/qmPP8Mou58fVLhsGQYZwjm9qwAB/RFvdsV\r\nm4L9LXEcRrv730eIFV31WuFxzQ7mi9tfdZ4aMI4dxi4FYzcw9XJE1nzlPUQk\r\ntMT/G6zMev4UuQWSu46dhGGduQuwcEvPNwVlmqic1XIkYjE7ugH2iI91agmq\r\nZBk81nvEKgdSqHo8TdibUE3r7UErK0pKsmuKw8Z0/o+rHOt6/LpqIPeRdp74\r\n7x10bdmGknmzRCyBuf70phqV7aXyVc+nPjzb8WBgaLcNBNBIkkgMW1YVR+KN\r\n/TRRemjv2yMOL+w9G3soEopSrzMqGggCiI8=\r\n=KVhh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221017063840.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/77226065b635ab90d713eb77c941043f/chakra-ui-layout-0.0.0-dev-20221017063840.tgz","_integrity":"sha512-b7Iw/BiyKaUgyt7Jz94TyLNDeY46YrZGBVsNlCK4EAsuHVs6h1FNqDawBl5Y6vA3bA7K4GWdksPZZdLNUWgOGg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/icon":"3.0.11","@chakra-ui/object-utils":"2.0.4","@chakra-ui/shared-utils":"2.0.2","@chakra-ui/react-context":"2.0.4","@chakra-ui/breakpoint-utils":"2.0.4","@chakra-ui/react-children-utils":"0.0.0-dev-20221017063840"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221017063840"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221017063840"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221017063840_1665988761781_0.13936432418164735","host":"s3://npm-registry-packages"}},"2.1.9":{"name":"@chakra-ui/layout","version":"2.1.9","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"3e9cc7b5915e033907367e40fc97d218efa5f777","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.9.tgz","fileCount":6,"integrity":"sha512-ztsavtirtdtjxdqIkGR6fVcrffHp6hs1twRFO/dK14FGXrX3Nn9mi3J1fr1ITBHJq6y5B3yFEj0LHN2fO8dYyw==","signatures":[{"sig":"MEYCIQCCYF3kAJ68a2MEXwhzsgSCBfr/cTda+JUJV/SvvvDEIQIhAIt1F7VoBpmgjD/7aEk8nyiJhgAyf+5Zca1XWkJjdp0+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTQK1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUzBAAomWkIFZct2qA+IDfnw/uzsEa+icy6DaDn4ct8saeN7TUoAFE\r\nMLXUt0Snp3XwJg3Ma/DmCnruxhw0G+htEholyz9piOvhu3bquadL6vwOYcVq\r\nhvixQVUkZiPhpf0qWc6RKFkafqBwcQf5skrVEIkbQVlv8SJ+yk0iDZbGDPjs\r\ndybUotsCvQvVSt41tj1WJv1EcYFzPYCfvORCC6HKowYpoUvyeuNRK61/qkfR\r\nwCSaFwNQTpI0Sj7qRvwuvjXe/ilGly1ycT+KOj7Kfo3h3onfKd84vba6odfq\r\nDXwXTL4/tRLq3aIR7QLTtekzxmRulvWQja0+6OZJH5IiTQojj+YgOeWrcGCz\r\nql59/57L4QGgb5s6wxjbW89s4fgY9hi44P4yhlUiCm50cjjI9m+LbeD3HeE1\r\nBo/MENCJQe/9DVOGIiFaKQyqToQm/VO1U462g9VGtYFXWJcI/I9UDokIJx7O\r\nfjaE11bZHHU6S5WztMvn5BE/e6JaU7YNf0X0nk/MmDyN5SJGRx620yRfgp3C\r\nNbkNxMGYkkGzjDzZ8xhdw8+AG6zIYi3EnwI3EyspcJ4nc0yNK25fe7zCFVE8\r\nNN/dM1CC4P3qyZAmHO+gsP/HbsBX3g8tqETrYHd5zb6Msr5qxPgkV9kiiwi4\r\n2cp3pXWXqYWgiJbxZ0ZyBJntlLiHnw/D020=\r\n=F/2w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.9.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/50d87808998a079865ffff46529096ca/chakra-ui-layout-2.1.9.tgz","_integrity":"sha512-ztsavtirtdtjxdqIkGR6fVcrffHp6hs1twRFO/dK14FGXrX3Nn9mi3J1fr1ITBHJq6y5B3yFEj0LHN2fO8dYyw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.15.0","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/icon":"3.0.11","@chakra-ui/object-utils":"2.0.4","@chakra-ui/shared-utils":"2.0.2","@chakra-ui/react-context":"2.0.4","@chakra-ui/breakpoint-utils":"2.0.4","@chakra-ui/react-children-utils":"2.0.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.3.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.9_1665991349712_0.8232402584996856","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107161407":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221107161407","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b248c9f43452708170103331e775727f29bce1d7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221107161407.tgz","fileCount":6,"integrity":"sha512-otE6MWrpZAqs3TfJLGbVusVlODVhqEy48Wikc1oQXVth5ucwtvmKTXULDVo0tCcXn+OCqVXNH1gg/H3+IuwuLA==","signatures":[{"sig":"MEUCIQD1AfjP2KS6exFCC2vVUHfBAimcOU7tO60GxUAK8lX+EgIgQcHj1RZ8EoDjrWQwUBEPsKiUDHyTHfUal01AYnnQJVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaS8YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlyA/+PU7ZPUXCu+zUHmqsfSHEvSyi5V2QjSWReGV8CD4MlRh9vvOQ\r\nuCQtvvN/BeQcdkkPcKOujDV2Kl+dUkffsC7jNQmnxqr8FJ/Rusol+Y9+2jTp\r\nuTl/4eOtcKniRB3wotZHhWGa1ovv3sciYMhh7epxHpmZxnEnusWp3lgUQ4M2\r\ndMqS3fzZK+4ZI5ThL9E2nzpCBEOB+DpTGb7/hGu+CIapMjqqAtIU9u+sa6JC\r\nHXft6dmY3EzUxf/AvFvIjRxgch4WaoYXZS4vrhK8pSiuch+02x4QosvuSZUn\r\npLZdFZWiIx5bnGRrXhqg6MP60O8O2SJ7h4ZWTIu/ZMoNNJ0mnMRWojzktICR\r\nu27Z/0RfZzZVzuBCqDw7kfV9EdbowkG4KbaGAOow1VcB62B0Sf4bO7YztQg2\r\nXx7/86Jz69Ok2LvZ+EZSLS1JpzM/+LKqqE0oCOu51gcXtVGXF6bD8cPNzJDW\r\nXHid8LmjBaz1mU/K+o6Tz/kaQIimVt+GoVk0g7oDPY3mDKcW/2VVfn5PIdv8\r\nFCIw/CrLERub6bL7nLbB80wT9IB3EurQ9DKFdlKvT6/mpso2VaqrPw2YYVcF\r\nohPa+27d9Ry9IJ9nZnwLsVM2B4ZioKBg8JIAKlsNvSO9xd5HAuN2IJ1mnPpY\r\nu+5HKt81SEPdyaAZOrIRrTOFj/wHDxEdMII=\r\n=ElsM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221107161407.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/d110ba2669ceb560ee0e697e8d890272/chakra-ui-layout-0.0.0-dev-20221107161407.tgz","_integrity":"sha512-otE6MWrpZAqs3TfJLGbVusVlODVhqEy48Wikc1oQXVth5ucwtvmKTXULDVo0tCcXn+OCqVXNH1gg/H3+IuwuLA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221107161407","@chakra-ui/object-utils":"0.0.0-dev-20221107161407","@chakra-ui/shared-utils":"0.0.0-dev-20221107161407","@chakra-ui/react-context":"0.0.0-dev-20221107161407","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221107161407","@chakra-ui/react-children-utils":"0.0.0-dev-20221107161407"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221107161407"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221107161407"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221107161407_1667837719819_0.21235067510751726","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107181117":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221107181117","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6326768cf1b043bb2b673cc24e54956abe806f99","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221107181117.tgz","fileCount":6,"integrity":"sha512-2r7nr/tit/8iD46KVLk8Nd03CD6tVYgMfrivgKzqHgtJDWNvE9RmlhI/l3X6laGJaPWoWOdtlxf5wYt8iPegkw==","signatures":[{"sig":"MEYCIQCCXOf9qCQK1ZpHOIYl2eEell0j07Z9UciTvBYwYvxSyQIhAMVpN9Z8H5Iq3/wm54fRD99JtBjgzCG5Vcy7pTIYcf9K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaUqEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGXg//UbkJYs4bglKVu8Hq5caD4QU/aLmd8qvsr+rZOA3ZHD0AKFzh\r\n1fxyaNwR1F9lD4ETdrFFvuBUPfr+EXUFmsNCgwJyRGBdulBVsOOl2BfS1iCR\r\nnkkzfwrEOx5tq5VQiuEIKijxTN7N5PSUvYHUpmOU2bdA6F7l7Q9RWXZ55ZBd\r\nLdaqkipTxaCWzy+e+zbpuRzn3lDaxC74p1LheoxfBEAx1rkFgDNJvhcIYPhm\r\njnYmwVk4/X01Du+hKAu6eZY34NRVgJzyg047F6vFcVeoMW7Mc1NoR49gQYPg\r\nhhwVJ4/NegQInVNDlrfhOz+e1Eap76qyLzF/8cnIaBk0rCTQazPGth5jwaET\r\n6fE5oUX8aZTCa0uuALCwi/YiKsgt7NtTSvxIOcR8YBn9g37VbYAJwTySDks9\r\nt998Y40U7uDT7/ad2NIUxwlpOT60okq9I1plgI6ZAbg09nD19fm8PBMekCbX\r\n+hfj/X6uZZF08MDTwabWupyifAvZTPMbuV87w34QozEXXVmZsj9gMLK5CHsZ\r\nbbMInAQ30QOSqqxHHtDCEd+sZOz2rILTeJPfVYtC5/NId0ebQZeE0WZ8upsN\r\nR3CvyUr5dRGLzfBgDbAcUrjZC7/182hlNG1ISlNHQ24z4JC59yHp4pnWJzFd\r\nCK5SVNU6nG5dpvGTN/dhJlTTa0hoZ6EnIhc=\r\n=FSGT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221107181117.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/958087ffbb3bd8e618dafe9a2975779c/chakra-ui-layout-0.0.0-dev-20221107181117.tgz","_integrity":"sha512-2r7nr/tit/8iD46KVLk8Nd03CD6tVYgMfrivgKzqHgtJDWNvE9RmlhI/l3X6laGJaPWoWOdtlxf5wYt8iPegkw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221107181117","@chakra-ui/object-utils":"0.0.0-dev-20221107181117","@chakra-ui/shared-utils":"0.0.0-dev-20221107181117","@chakra-ui/react-context":"0.0.0-dev-20221107181117","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221107181117","@chakra-ui/react-children-utils":"0.0.0-dev-20221107181117"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221107181117"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221107181117"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221107181117_1667844740770_0.06117009317154909","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107182607":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221107182607","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"131bdb4bf8a2a80c7aac019ba6d96782361d5a53","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221107182607.tgz","fileCount":6,"integrity":"sha512-j1N2kDs+ifUsIlWbGGnhcoVUavsSUaIdMjxFFp0/1r7IFhUcSVlxT1XW259V+wwrk/8Zq/CgElLU+PFaimJI/w==","signatures":[{"sig":"MEQCIA0rOCe7aT9rYHjDwuPAh1s/Ygup/lo1zLWQ6SksUyqoAiAzT9gpLdVacqiVod3sHRvbSD89wrHchuw4V0rke5XATQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU39ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMTRAAnoML3nJKbeI1gTV8USfvsGPzf1r525ijO+nI2tT6M/g2FSm2\r\nCjKGaN70LL5elwCsmHoBBcvrE+VDPPamkcHpN78AakUYilVTczvrn/W0+ug2\r\nqCKYXuX8y7elocHCO2EWlNIDGojCCBZwYL7ziHz2bIY8aU33xu7P91p5C/dX\r\nfVEtPXL2diwO1BsRBtGt0boE95DAZzO3NIKQ3rNzLn0qYrfH5UctAKSklkYh\r\n8SoYNxqOhrYNEHfhgzdMIX6i8veKcBelg6uLUs8ckcuJA+6J7CjIu3LSCFAj\r\nYQM2C2HOZqnwAhBJNHrMzF330JjJTcpf+cWJ5flqKKeWDhQlxy4kpccMYqjK\r\nB9MU+1HrdP3Ht6tNNK3+5hOPuSNGuEkNhIEa+/itq9nxz+c+ARjimBUW20mV\r\nOLGfdr7Y41E4rxk6GUAfBxvg1qIPrhZeFeGWoCInKvKEgR/HSbjSpd11Vv7T\r\nLyHtemP5LaeVMtG2TA/ORuQrCTC3PCaPIT0NqbRRIFVqUWVdcR5L7VaVOA/i\r\nEF+nUVzKtZwMzVD/kelGFvxpcrbl2fnuICiNiYs9kh1fif4K+tUw0/btyiof\r\nmhjgi2LvWwW4DL3wM6usLDSP86Acx7pQskEUUuKCr/Co9Wj1WJcwB5dePeSO\r\nifL5C2gsQ7Pi+rVCOxoCasmU2w7ny6cwWUc=\r\n=icgh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221107182607.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/d304d99ff8f3a58509b9d48a076a937d/chakra-ui-layout-0.0.0-dev-20221107182607.tgz","_integrity":"sha512-j1N2kDs+ifUsIlWbGGnhcoVUavsSUaIdMjxFFp0/1r7IFhUcSVlxT1XW259V+wwrk/8Zq/CgElLU+PFaimJI/w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221107182607","@chakra-ui/object-utils":"0.0.0-dev-20221107182607","@chakra-ui/shared-utils":"0.0.0-dev-20221107182607","@chakra-ui/react-context":"0.0.0-dev-20221107182607","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221107182607","@chakra-ui/react-children-utils":"0.0.0-dev-20221107182607"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221107182607"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221107182607"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221107182607_1667845629296_0.6714982330841248","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108071844":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221108071844","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a850541ff9cf1db02d558afc1e14714a0a3b08b2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221108071844.tgz","fileCount":6,"integrity":"sha512-FvupOMurrZhOeJrgULcZ+KSECKbfWxWT8w8p8Vc0mIdkQF/iqxQZ5FH8ttL1zQ2ui20igPMhb6p7X4Fy9JCcSw==","signatures":[{"sig":"MEYCIQCY+gNIH5IJks4wXcFHpM/k6f9KzlPWKVSl/0ZH3aYKygIhAN5TatXnCwbxg3zBgwKVoOeS3R7/CU2xDdlEt4I5Wegf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagMUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm6BAAmxpnoHa9nO1yDacDSAp3sCgKTD5Glg7yIdUUvN48lHJeVCJN\r\nwrrEP0q/vcIn7AAEPqwryw8pZaDdLEWvqbgAeXQjDmwWAw4BYGCvP2tARRIH\r\nu8nu5N0JUe7lz8mQQB50qh/hbkF0Y3VSSwn4CriCDpqYu6a6+ti5DiaPx1UZ\r\neA374JUj/Z9A1/mGCSkGD1GHRyydWeaLN+xuGfN9oKNsHZAOeth/gDBBjUAP\r\nif6YvMqu6NCrbiCZAoZhfu/LwFCzRt5SeraeKN7L9Y2XIRwwXsIJpQzKjI45\r\nB7AVULoL8v23vEQHG21Zqf08w0zL5z0NG8poHLjhSqioRJ1dFots1pYm/KmZ\r\nCKIBCuUZXphp2H4V26HpuNaMEjPL239PT7H2/9N/22wvvh5IgbvMo08sJ5f6\r\nFR19u7bg+X+fpUpwYu+DDSrZ9ckqdT3GCIy/1/bg+IbxnKWDjiaVx9EzQpdX\r\nwqcxH+k75Mx6FBHFgIaHHqfE3abljz3TBuyjIeYTpkko7DB6FLfHG0taq0ow\r\nynP+6QgB+q297/bucbLEFdGrLNsnNKXZwHoAzEet3T3yHE52iJ3LIabjNeYN\r\nrqVn+iemBR3GPKcPcTY8f8wOGtNP4vUiKDmObZJ3dXmkKQSVidfTes+HLkvU\r\nlMqXP+v0JqtdKxBd8KwAx8SuQHeqkQzE5Y4=\r\n=XxU5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221108071844.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/eecb5b29166e4cbcd2b9d1d8ba1510a8/chakra-ui-layout-0.0.0-dev-20221108071844.tgz","_integrity":"sha512-FvupOMurrZhOeJrgULcZ+KSECKbfWxWT8w8p8Vc0mIdkQF/iqxQZ5FH8ttL1zQ2ui20igPMhb6p7X4Fy9JCcSw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221108071844","@chakra-ui/object-utils":"0.0.0-dev-20221108071844","@chakra-ui/shared-utils":"0.0.0-dev-20221108071844","@chakra-ui/react-context":"0.0.0-dev-20221108071844","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221108071844","@chakra-ui/react-children-utils":"0.0.0-dev-20221108071844"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221108071844"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221108071844"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221108071844_1667891988784_0.3556635410789384","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108073543":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221108073543","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"25d1a3bf8309e694b9a7d5354f53b64002c79b85","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221108073543.tgz","fileCount":6,"integrity":"sha512-Sb9wMWhOHIIXMQAMwYg/RkQopTLKzAo+Kl7BPdweSL9zBUAje4xJP86DPacM393qoV560tovrmS2a6PR2l0w1A==","signatures":[{"sig":"MEQCIAFf8j/1N2P/ipDMB7QtqntyiK97Sn3tWPcXQKwaheH4AiB/vbe5CvwWoTngBHiQnYqJwfZ1SPNZMQkYG0h+/PPYlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagcYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+KRAAgBU1q6Ec4tgAKkPPdJKCEqr4j3sWGP8+4b5A08LRKLYuJpCD\r\ngqfYuhS7p+vbVC8wdA40GiUMk4Qrak5oNFGGTNtky6AR3xwnmvE49tgVLNh/\r\nI06kWVGi7yM5otEp9UJlczHYUZeD5cpuTBgiwYWX+NTIM1ViCDtIkjoxoWoR\r\ntsZxT9xWYNP4JvRH/VST5WnZI60ilI5SPN6OpaSm8iOX+881UbKnbYyiozMI\r\nzFrTILS4Xrt/STH7k3YJEoAeTHiFMCrQ186oE0CqFUcQ1DdVbdQMjGHVKdqk\r\ni6024I3i12022te4kg5LsSEW8sInr7W0Ysb19pEyyOvX2qxcF+bxN6VKD7Es\r\naQXWtJa7y9Kembtk7KkDdOUGp8TRXNuYD/ZC3beAzm5+gRuQzMnyK79nfDJN\r\nSgNPdXxnoOLtB8DDLPH1Puv7EKbhRRG+pz37hxpUFboXn26tDb2+o7WoRuK9\r\nCd3H0Ii1ORIUbzWpNTei6l95HWc6tN1EEl2kDosReKqJ6JjLmMsH8aLz1OUT\r\npQaaa+g5bB4X6rv33k/7nH+E2GulerS5C7zM7++YXpNGHlz/eXyAXvUs+c5H\r\n51vjamCX9BlYZ5l+E55ZDgO+1C1s3+LBNIK807bmkZxuGMC55JZAgf+I4ASg\r\nOVclzGOL2KFnxe2dm8XRJyBDX1A+i4N38is=\r\n=4C+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221108073543.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/4435cab9d8971116edc368f0c6cc2f4f/chakra-ui-layout-0.0.0-dev-20221108073543.tgz","_integrity":"sha512-Sb9wMWhOHIIXMQAMwYg/RkQopTLKzAo+Kl7BPdweSL9zBUAje4xJP86DPacM393qoV560tovrmS2a6PR2l0w1A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221108073543","@chakra-ui/object-utils":"0.0.0-dev-20221108073543","@chakra-ui/shared-utils":"0.0.0-dev-20221108073543","@chakra-ui/react-context":"0.0.0-dev-20221108073543","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221108073543","@chakra-ui/react-children-utils":"0.0.0-dev-20221108073543"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221108073543"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221108073543"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221108073543_1667893016072_0.7338359855763452","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108075029":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221108075029","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"88ae54445dfcd3524f81fd5918ee68fe4fcf6c41","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221108075029.tgz","fileCount":6,"integrity":"sha512-fjsPRWHHkvu3HtesI3HloMuycGE/NlNllcZQUIcU4935ozsLJf1M9b8II69xrSWlstDzl2ScR9AJi+jaEXrUig==","signatures":[{"sig":"MEYCIQC5/L9JJyT3GVZXgWopwXHdVhyQHV/1fx2QWztz3XDoMgIhAO2JI8y0JjS1YYuXyFBmeksAcYhxcZb8pZLZnkDa0Qsi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagqLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFMA/+PGnezbhq2ErqfwOPMqyf29z29BmEKil+HZgCE21WU1jyqeXQ\r\nlxl3RtQAGEb886bwktD2wNISX2LKiWT4ZpcWuwD2kHCQvx2QGL95Y3HvfW9S\r\nA587/nClCHV3Dyxzv9aanolZacCdTIoy8L0Jsk1MI4Sq5wrBHrq9dzB1rkQa\r\nJ5srLiHAxJ7PtebTw+BV6FmYGhqnioji6MQ77AlA1or+TENkwZP4HFOyypxY\r\n43HvmXZjbqSA+URdaUiDLwZkcJXdGm2+Ng1cKw4241EKIUvr1do2dgnskETx\r\n5gU2bUGFBfiscyheVjk6ZdbzR3jVBap9vudBA6xnBSOWfIa/mVgzRhVGgsRi\r\nCnSf8NFMaez967CCs0ovL2Js2rZaS0y+o1pAKisVS43t/nPNtAmChWcki8wQ\r\ngriFGnopjwjWmD0Yr/ZX5UIK10tZXm6W46QZKnW0ssyjBTOiYRQpUV3gdNQS\r\n7noIKRrYdN25Qx+noMtAtvKaU11IlEgg4/9XfE+0qltCXhroWlwwtFiyL48m\r\nkVgrBxb2peZ2ZLSzlVUDIwA5bqerWkmEn3wF8YGizUmt8T9HYkx0an+s4p48\r\nnjESp+P/9gqkZVoBu34f+ad+uLaqCPgInjXK5qWJ9E/dwy2iyNTXNeORLmEe\r\ndU8sUXOxudPhj2D6G/55eNM3jbwX9az/258=\r\n=XSn5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221108075029.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/c8231455cfe63184583e66fda6204083/chakra-ui-layout-0.0.0-dev-20221108075029.tgz","_integrity":"sha512-fjsPRWHHkvu3HtesI3HloMuycGE/NlNllcZQUIcU4935ozsLJf1M9b8II69xrSWlstDzl2ScR9AJi+jaEXrUig==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221108075029","@chakra-ui/object-utils":"0.0.0-dev-20221108075029","@chakra-ui/shared-utils":"0.0.0-dev-20221108075029","@chakra-ui/react-context":"0.0.0-dev-20221108075029","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221108075029","@chakra-ui/react-children-utils":"0.0.0-dev-20221108075029"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221108075029"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221108075029"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221108075029_1667893899361_0.5590962365093137","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108083411":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221108083411","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"17528c8650ab23de9afbf4f53babfb27ce07fe82","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221108083411.tgz","fileCount":6,"integrity":"sha512-CyV0+lt5RpigFNG1d1dh5bqKBNQrhq/XJaeoWqUBFoekc2QgTkwHAXa13aBsxdSt3MAZ4yAKsAsNNGZOhswy+w==","signatures":[{"sig":"MEUCIC6ol/LPrMUGFqsyPI13BbbB+mMut0TqtPet8kqXe+zLAiEAgN91yn++haC37/NyPkRF5la9RXNOP2PKYvnle2lINZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahS6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf5RAAhqBOPQWbO+9Rh5o+gV07Z3ExwF1IAA9YbozwSTaB8gdTQYQB\r\nw9hehCgygQgEq72eomjAJLanRCvsvG1wpFHXfDQX90pw/yYSW3NpR/ADFUR5\r\nMTav4mXwdX/Hl9zSqn1n2boZf4vXOSb0qWhS2moaPSy0d677O/MRKjInW/UM\r\n+krIG4Rwq2WGPooHVXGye02nKA/4iHSC4iiewNdtrtpIQgiJmmAAyBnGhDDz\r\noo3cAg2jDCPQ7yV9goiN03n1m6cDse4QZdnYzcvsOwG/Ct94Ia43LoaCmoeO\r\nhcevwZ4bYSd6GncFpLRZcpFVv+n/DVUTfcYgZr8+G7ry9rFyuTNWOts31hJc\r\n6FrsP34cwmnwqv+EFUR6jsPOD8LsTjAeiyU3AZgkn0hruq0kywX7d919bWyx\r\nqDxSnRRuUYG+0NjNsLT9FrNSDL3sz99PHoCW5Yxkvhh1QPyfz9t/YihlPlHE\r\na5m45uVlG66g+23v+8R2j1qjSilUovig+4kO6pUHz9ygBLqJmTDNSuC+f6Wm\r\nIDWFj8werBoMxnI+00SCBaHyo4fGullbBMbuxoZ4jDQVKAnGNyIIqsF0kPSB\r\nYpb+v8efM8ybqU/Xu0RmyKPJTnryQKtPcnwtw0WAno2Co+AFcPHHOmLQWPM3\r\nrmqlrO0rYoe+Qxl1gBgSuL0VM7XW00Ss3Ww=\r\n=V2Zx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221108083411.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/9d5ec313bec2a86c10957f4e2c53095e/chakra-ui-layout-0.0.0-dev-20221108083411.tgz","_integrity":"sha512-CyV0+lt5RpigFNG1d1dh5bqKBNQrhq/XJaeoWqUBFoekc2QgTkwHAXa13aBsxdSt3MAZ4yAKsAsNNGZOhswy+w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221108083411","@chakra-ui/object-utils":"0.0.0-dev-20221108083411","@chakra-ui/shared-utils":"0.0.0-dev-20221108083411","@chakra-ui/react-context":"0.0.0-dev-20221108083411","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221108083411","@chakra-ui/react-children-utils":"0.0.0-dev-20221108083411"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221108083411"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221108083411"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221108083411_1667896506234_0.49738250994410005","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108090938":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221108090938","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"809ef70c7986e7e4d53d7e0b10a937cc3e95ae6b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221108090938.tgz","fileCount":6,"integrity":"sha512-YwSnvoUjIm6YKO41jOUVMW/Di1yX+6FvBdAJ/WefKGoJpLHIntD5EJ/ingRntZDprO6y7qSajEnNCLH3Z70Z/g==","signatures":[{"sig":"MEUCIEiBFRArK0dpZAgx1YS6/3L0x7UgyJZGMtU9btK8xNT5AiEAgnggjr35/0l5AEHc3pC4qMXA8feqihGfMnwn/E5g2wA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjah0ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq73g//b2txzkdhAVVUw8njzwL7YbBU8S9eXxcRR2zt4rcnHmxILE7N\r\nVCIJX8EhrHvkmQCCIHD2ZHzcSGyp0ADP0SWSTGKGfpLkuLXe/QDt+rn7pyof\r\nmjsVp47MqSEJNT73hL5xk/TLHw98ur5Mtk0xBlqNTbGC6GRXal4SxVdfyx8w\r\nM68Br5gk6Bjaz6kAUXcdRwsBr3oLN0lsRJSEqU6ECORXdzwqC834cA/Qn1Th\r\nzWANwA7LwtA1gWKMEdv6xVLd8eSDL2btebTUpph3/zb8PYtlNY96km6il6Zi\r\n8HOXhrGsfMyI9BM6cdOqUQMIRXQ0Xj+hFdlptjAT2Q66/zip9/5wdBYQmkBc\r\nx7o7MYL/nR8Ge69rM9rRxNwBlq31+fXDNlfQ/XI1HS78NF0f/7ab5YGmKrrM\r\npdHUYi0DyKvkYb2dDieJpMKGe9ETUeJeDNzVvXYdeO95uxfak5IakXa83Jkj\r\nkhOrR/LeZNwZ6pLC4osfaJWPLpVLz2EMAkUlWr64lGrVej45lDUPhSUqq401\r\nU3zAqJC4zaf4pXaV7BhX3/FJ4VZVFpVX+Y0sY3yXkYI6aEthRnDPTyZjlc2y\r\nzkrdfNaQNZUDPxTAcJMaeRpqtoDumQiUsEDvVu2dV+jg7FBC8i/GZOCuYfFS\r\nDjBkoSgbcKUMNZUZvXITl+l7M3Lz83vlwV8=\r\n=lTQS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221108090938.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/869e18a95df036349a812829dd5819a8/chakra-ui-layout-0.0.0-dev-20221108090938.tgz","_integrity":"sha512-YwSnvoUjIm6YKO41jOUVMW/Di1yX+6FvBdAJ/WefKGoJpLHIntD5EJ/ingRntZDprO6y7qSajEnNCLH3Z70Z/g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221108090938","@chakra-ui/object-utils":"0.0.0-dev-20221108090938","@chakra-ui/shared-utils":"0.0.0-dev-20221108090938","@chakra-ui/react-context":"0.0.0-dev-20221108090938","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221108090938","@chakra-ui/react-children-utils":"0.0.0-dev-20221108090938"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221108090938"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221108090938"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221108090938_1667898649655_0.17795841056278228","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108093520":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221108093520","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6027778bf31f97e9bf11c73eceb2d9f60d319c6e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221108093520.tgz","fileCount":6,"integrity":"sha512-mwQuw0vmrhKb+YwJnFYJJUyPlsntzJa0EKbuE+DPAyYmBXpgfv701hq90C43577hDt05ihsK6Nzg4T52hKmO3w==","signatures":[{"sig":"MEUCIQCebviVc4YRv+iA/Xm4soZGCcwxE6B3UlaWNgFvtiBhXAIgP0GDfDFMjJlg9PVkeUMni+9fAukJdoWYD7f1X7Zz+RI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaiMpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMQg/+NSGU6We8A4LqWV1Xoybmi+htjcCXexX6Ph+Ag1SLK6AAHx2D\r\ndHWl0up18BUkRsvKVRWTJcEE60L/vakGJ0/8W1GBYyb0BWibRcqh70XgLo9B\r\nqx0PBLjFyecj0gPBge667XiWnSd2pEoa4rnKwO6Pdg39zkuqEzNZO+OBecS+\r\niDUwHcQltPXeW4e5K/5YSwqM76WHMEyVNjYeCwnKZcLP7Ke2MGA3QQ0Jh5yn\r\ndfhcrgf8EVUmqtrlX+Hpndgb2Epx3BkgP0GlDlT36qCchRVcS/gKrFe2IqfM\r\n1Q3Zj12d4KMxwecHXUJ/2tBgSelYR5tco2eRfXFBfl5cy2JGAKJPDaZTNy/B\r\n6bg/a8QFnFT54CZ7k2FGFlqKX8RlTKWEfc1iTR3HyyzG8tvsApapnnKjW0vh\r\nK+eTM0vVoVnQkAquqks2kfI5c+IGUEXvqNUxw2AYfr/NOmSTp4whC8AP3UmA\r\n/BjEObxmqDxH8w1i/OaqV0sL4NQWN62opAgI1EDakgwnkGzsM0u3QkXAXomN\r\n0UfK/VZHZYoTzFGwG8KDaS9s5z4hvTYFkpz7+UZ9NiFg4cp1gBV+TwaeI7Jm\r\n0JQaJ3icT30fF3fZs3wHhc6IUEyRo0ta1kRAGlWxKULmJRGHP2i4U4D8Ze0O\r\nXboI9XYwjDVbF4EQ6uKC2S2Je1TLk/8oqzw=\r\n=mlrg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221108093520.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/55596b75184731d1610638be5a1a19cb/chakra-ui-layout-0.0.0-dev-20221108093520.tgz","_integrity":"sha512-mwQuw0vmrhKb+YwJnFYJJUyPlsntzJa0EKbuE+DPAyYmBXpgfv701hq90C43577hDt05ihsK6Nzg4T52hKmO3w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221108093520","@chakra-ui/object-utils":"0.0.0-dev-20221108093520","@chakra-ui/shared-utils":"0.0.0-dev-20221108093520","@chakra-ui/react-context":"0.0.0-dev-20221108093520","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221108093520","@chakra-ui/react-children-utils":"0.0.0-dev-20221108093520"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221108093520"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221108093520"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221108093520_1667900200767_0.9815780295865033","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108100218":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221108100218","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"9120e69a90c8908dcb61378f1ab832b8bd493c21","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221108100218.tgz","fileCount":6,"integrity":"sha512-iYv1E2tCRcG1EE0t5xq51gJKp1tKZr/IlqWpw7WXa/lbft9W/RpyzD1lZtZjgYM05qLRG9LPq6vIIThh7zYRMg==","signatures":[{"sig":"MEUCIAblcCwRh3IuquggJv2QP7iQVP8hkgQYslz5kmxbthJWAiEAsCmEalFOWKLLBq40em8BegEY4tdl2mzwqui7WmRx6Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjail9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW4hAAnaTiknrOdq756QbU+eawuzsw0BpZC6FdSpFsAE6wYDHflYPN\r\nvOMLyU4nNuTBPJPkpV2QFeSbmwZUgQMT/JmAwSlilvn4FZmXrSMzw0PevkF4\r\nGOP36Xxdj8h5lHNtDQEkoXwvBhlQQMfzYuGtEbVskJh98EQh29tpKAX1dbMK\r\nZKXnUlu+/GBA6fpoenefebq8I0dvoBGbOcDQttol8UKmPvebFESc8mVXj/OB\r\ndQ2jm9KShGr79qXSGz4vUuebjTSipf/f2wAEJxnOLUUw8gVTk4sdcis+p77u\r\nlBuDBX3dzXzVTYh77YAm4HvFN6sSHjuzjaLvwa09Bypv3hPaDWLgOPiaBiqm\r\nk2qmx8uNoh4xilwr/4jrIq7fwgJWmx2SP5yw2JLVeoy/8AzpxyxmYqSLVqQc\r\nAoURjqHHhlCWVh4V/OTPz5EYOMgnqQ92MV5sp92Js5pve2lVeHF89LswI/Q5\r\neGkiNm0z6bAIuYUVRP690aAthXaE++ZjrrA7E6y9+sWa0BxZbhfk7a0V0AL2\r\nGD2M87thdatUFZM5IiSklKf2XHv7OSgcBRfgY/udBrxfjPKPSdTGnNQho5tI\r\nLBftEUcl5Suht6xGr/FWCC1IEKB+64xqpzVTGiZ97poRzTSZM3ueoaYehbf0\r\nyVbHfMLeTEbhNUIxcVDHR9anhgEalxDAJTQ=\r\n=uuYa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221108100218.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/38e2910f92c2c6ff44deb3862c3cdef0/chakra-ui-layout-0.0.0-dev-20221108100218.tgz","_integrity":"sha512-iYv1E2tCRcG1EE0t5xq51gJKp1tKZr/IlqWpw7WXa/lbft9W/RpyzD1lZtZjgYM05qLRG9LPq6vIIThh7zYRMg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221108100218","@chakra-ui/object-utils":"0.0.0-dev-20221108100218","@chakra-ui/shared-utils":"0.0.0-dev-20221108100218","@chakra-ui/react-context":"0.0.0-dev-20221108100218","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221108100218","@chakra-ui/react-children-utils":"0.0.0-dev-20221108100218"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221108100218"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221108100218"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221108100218_1667901821172_0.40275742511582835","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108124603":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221108124603","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c6a3ae96a0186cd8bb40524232fc3b583cabf25d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221108124603.tgz","fileCount":6,"integrity":"sha512-8sh1rjBOaRFjxPCdafpd2URUCw7l9u2ZvodauZGR4EbTEqLj5ehlf5tgAqkR1Rk8iZffxUU2d2h8XKajjeYIaw==","signatures":[{"sig":"MEUCIQDb+1CfCNcf6aikhM59hR9ZBd7eRisoS81ad7eqQoGbowIgFqdI/ARLDl3fm0n8P9U0rPxoIOfub82W1oZpw9E8Ees=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjak/HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo91BAAiG+2lJEq7P1oI9wXRrvqD2PZeqPZsPf8sJSc1Lv3dF/I8OhA\r\nmu69VK3/TX829bOnP9Rm1ofced5JLg6EsIMR5RuxC7TsOaYA8Sw6n3qjQJnE\r\nENSiNzUXPZowS7321VM2F+02mfmgeTvqqm4sp4N/bJEDMq82nqhbtrIjW8Iv\r\nX6icoRPTy8Mr5ElRyucAclEExV5WSM3LOq5oY+U95YZMmGioHHSjHZq48yel\r\nE4ZssvNqu4l1rkMEmug6DemuZ25nYU/aC5zWzzmCaafOympC5odyd486k/Iq\r\nHzih4ayvaikB9m/ROvWvG41Kz4M35pNcqVewpeDHOrgN9wo0B6XfEG+LSKGo\r\nUX6mew4sZpEXH9qXWgo72NEhYu6F5DIpa1b1vvCFuKmefBj2KyW6yFHL59NM\r\nD70rDxmHCS8/97UvxWfvxW4SsqUcqJDuAd+E8M89fCu/XLF/K9RInECz19kk\r\npPh9jfid3iwg99fgcPK20hN3QA5ZErsx8pMdsm+wXN/5Odr5jgCuCdVBG/3X\r\nFVE3sVZHU4i4IHpgQpFILZrBq0WjAYAhlXLSr+ah0gL/I6ol1waS4qrT4JQw\r\nKzbbk2qnPWv3a0FDdCZ2+MqOWbwYkpCVxaNJhduyf3O4sn4fWKBHnisYJgj3\r\nj/io0oAl0o+W2A05c/Pn0trfKdrcyXFDqww=\r\n=TnRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221108124603.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/368deaf3559f30e082b377c628839cd4/chakra-ui-layout-0.0.0-dev-20221108124603.tgz","_integrity":"sha512-8sh1rjBOaRFjxPCdafpd2URUCw7l9u2ZvodauZGR4EbTEqLj5ehlf5tgAqkR1Rk8iZffxUU2d2h8XKajjeYIaw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221108124603","@chakra-ui/object-utils":"0.0.0-dev-20221108124603","@chakra-ui/shared-utils":"0.0.0-dev-20221108124603","@chakra-ui/react-context":"0.0.0-dev-20221108124603","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221108124603","@chakra-ui/react-children-utils":"0.0.0-dev-20221108124603"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221108124603"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221108124603"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221108124603_1667911623300_0.28372602131303326","host":"s3://npm-registry-packages"}},"2.1.10":{"name":"@chakra-ui/layout","version":"2.1.10","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"fa9b177ecc32c674ba2208e52faa57ae877bbdb5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.10.tgz","fileCount":6,"integrity":"sha512-9WlbZGIg0TMIwnxuCuZfkE7HJUInL5qRWgw9I3U960/4GYZRrlcxx8I1ZuHNww0FdItNrlnYLXEfXP77uU779w==","signatures":[{"sig":"MEUCICHLQkCIRKFCApvCO2ArgCQaIABnL78CGQd83eoipseUAiEAxuJpgp7gsX7rbwmJzcDIH16L63E7UJ08VnxBmtlmGSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjciwoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDOA//SmMf39ROHxB8hK+KWmwv9d57hBdAAfJ0uiFL8Wh+nkA1a1pr\r\n4L5H0VHIWrndI16QR6QrhdwRkEvspoo0/kQQ7B6+jZYl9Byeqx3vD6Ffe716\r\nSA0RdlH0y0vVC2AXQB25QOqXLOe3+CFjDJUM15Kl4fzBJRNK1+3mRcXox9FD\r\nJSRX04LVl+A6gsc+dpT6EM0G9c+MvdeqlV0vSfEOgMjSkNA6pwTSOiPyPdAA\r\ndJk68a+MdfUrC8rlT8/28MdlKYqAkEsIOCgKp/KYaWbF31UQ49rP7iuglXge\r\nNUvlrQes4eX/4gpAG0enV8dyQ1dws9JpucYAb2Z/gtavOtJbe3EchraJGhn+\r\nvpMQkUgTlNzeAXUNgZ2IiJ6rjkRYCvKP87cuxz/ISLxUl85lRm/Vq09hukwU\r\noqRKC9349dT3tlfbTG50brsliFQNQTqlpRIfCkwgx73cLZavyuVL2m8tSGC2\r\nyokSa4QzsjH+bCbdzGyDNbM/kUdsEaxEF9JKmGbtg8G31aPZbQUemzjAWjIc\r\nGh1q49jTTS6mnggFOEHuuwsBcKIG1JLC0BfLEgLmxC6WiK/EykdzlrOxFEsh\r\nRX1C+Bp+lDlzZcUND2ocswUMyekqlNseIrWJGBNRq+isvihDy2XNwGBObaBB\r\n4JQnKms3WpPveDMk+N89qYB09/vkAYWa3f8=\r\n=w9Bj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.10.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/34ad85b65c58e76176deaf6d5ecfe382/chakra-ui-layout-2.1.10.tgz","_integrity":"sha512-9WlbZGIg0TMIwnxuCuZfkE7HJUInL5qRWgw9I3U960/4GYZRrlcxx8I1ZuHNww0FdItNrlnYLXEfXP77uU779w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"3.0.12","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.3.2"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.10_1668426791856_0.5088397600789576","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221115102409":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221115102409","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20221115102409","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"32b6be7d6b8c6ac78e6595b82dd434f82052c075","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221115102409.tgz","fileCount":6,"integrity":"sha512-Ttrln2qiqOJGld/nqRCbQs/YjWfj8xekVq2hFhCj2nI3K8Io8kOzUdOzc1CASE5UCErv7I4a9hJvOlZ/cX4cCw==","signatures":[{"sig":"MEYCIQDhwWtXXIjZM1nYHl4PwBU8dYgVqiDMr94nTiByxb1E5QIhALugxDnIwlJEtoGk756dtyghNiytjdlF5XGOs3O4n7G7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc2j+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjIw//cepCNS9qYuYxbTbaX5lM5r+UaD+VjPYmpAPuSnNrxuuMwbAw\r\n7kqnJ+DIEa3W9HNoD9gg5TxbHm/uXDyybi8ryWPJ/fZ3kYYzn9Iw3JN2Wo9O\r\n1eTwCs8NYAjTps0IfdzTj3D8yAeqz87sAJp6JaUx9bp6WI/VjbBRmesP4fVu\r\n4UITTGrUfa1Ph086sScTyMzXFsCD/tbjO9ZR47z7FWq5afSK6Hm0a+5ExZNP\r\nA6iBjrYGZHFpn7kqoLXAqSSIon6FD/3j5pO6LxLxVDD429plnS1pEoQD0Y+9\r\nuDoDdTY2mxA0LXx7IEEZ5CKaLHodyxdrKBLUaAt7PyJsMDiQITyiE4AOuFU7\r\nKEGx5RjzhrVI9kWwQIx7Ei3btmY90x0g2oEyucghVGGqSjx5J08AImQMo2qF\r\ndZ1f4zt5YB6jKXBUqmO970soiJL0gML71VWV1aQbbEJflcWnmFY4W+2ElH3U\r\n3kOaJH9YqaViEZYhZOqU2UsXFVGKxPxOC+jb9C6j5aSOafFGwgsZMgHdjjps\r\nscTBhm20ZsqYvQJC0voI5USVTK/106zKepX47pK6QNnHlH+v3bb6niwVOq+H\r\noe7FUTmnE324HH6McgrsTsTHm2geRh/vOyAV8cDQuJCOSB3kc3zEHfXpHCN9\r\nR5AEkvaIXefhmpeWV+JYm0+6eD9Ls4Hnc7U=\r\n=nKMZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221115102409.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/a3693d68980c93e5348dea37354368b2/chakra-ui-layout-0.0.0-dev-20221115102409.tgz","_integrity":"sha512-Ttrln2qiqOJGld/nqRCbQs/YjWfj8xekVq2hFhCj2nI3K8Io8kOzUdOzc1CASE5UCErv7I4a9hJvOlZ/cX4cCw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221115102409","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.3.3"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221115102409_1668507902720_0.9656757869050374","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221116102301":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221116102301","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20221116102301","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"40f7e8ce4acb2ec9631d1de4576cf2ee17ede8bb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221116102301.tgz","fileCount":6,"integrity":"sha512-AmtKFfgsL0L2aNoEea8iKuJUcCVuQQJmrDdRGptLi4zlRLyB8dHZLVrm6HPyrOOexdeqm6HDT8iR0gj7itoSIQ==","signatures":[{"sig":"MEUCIH+Te4eNHbDhgIqgmAb6HZ1QWZjeoZ5/LRZ42fK/97gaAiEAk0ewYqBxAttX1I0TPGn/4utEygyaZT9QF5pRlRZ8iOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdLo0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/zw/8C1i/vpprD8uGN+PboJ25j7RpUjQgzFqwbHI+yMg3l3xDCOBd\r\nU7nS6T6RTdBaoCjF8eol4M9sn6M6RUQmvrk1Fc5l+9QnhXukBU5CinLtuQmp\r\nD1Illn5UTsMvJw1XCX1BiO6E/+s1i6AD1e6D5gM2xNuusOcj90C7F+1+dYv7\r\nxMrukTR0Ik1Kg+cvyYTN/ZpFObUUiOTO3DOBgNegNONIwBsJAbhgeXxgQKQy\r\nTGgv/qXQ2N1upQnifgABdMnGWk4z/HjDKXbQnJbILtUubh+B5YKUSkI7enUZ\r\nFZqoHGWQ1ur2XMp0knmVOAnMpeN5KF89s62KqEPqnBPITTgGNalSTegORApV\r\nq75UKhfDCKvnABwo5j/gFHmvMwbZQyAygoQ5k2Rme61aeRJiBIgy2cP5aHnJ\r\nqECoFBIiSriBykP4HBn4/VF9neujhxKUyf0Flesp8wlMzGvBOu/rKawzhBK5\r\nfpUvSehHwIcHqoa+rrpJTnWUNBV+EmtOv4Q+f7Tj5h0kJ6y1haq++44UqTfx\r\n6UljjzQ5fgdQfx9/oGNJt28FN7uvXWdBoSYh4YXESO66hbYa/w90oQ0PjZzy\r\n/d8/e99CTUe+5nH2xUEj+RaDurk3Xws5OPPE9mJMvU4XeIh4zUJ3WXWPLmmN\r\nVYJcKi4y9YwCOJyMq7yuBDvwavrv7qeTW4w=\r\n=s2zO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221116102301.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/d85f25c1740ebe0a7947bb4212a808c9/chakra-ui-layout-0.0.0-dev-20221116102301.tgz","_integrity":"sha512-AmtKFfgsL0L2aNoEea8iKuJUcCVuQQJmrDdRGptLi4zlRLyB8dHZLVrm6HPyrOOexdeqm6HDT8iR0gj7itoSIQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221116102301","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.3.3"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221116102301_1668594228392_0.42965676676027775","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221116103758":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221116103758","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5a72b27707a934ae9681ea1f30c73e794ddaf068","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221116103758.tgz","fileCount":6,"integrity":"sha512-ERFSok92ahxz7PYzhzouolQ0AQui9+f2EP1rYCr3g6YiNquhM8rQxLIf2BdRPLNLXqf8mh+MGl51FAULW3J18w==","signatures":[{"sig":"MEYCIQCChszOx/N2BSIodKTokUFOyUJESUCjOj2KiXkNXEBOBAIhANLBVJ/IucPliTu2xqhftHbLoWDA0Z0wYcu4Rp8iQQhy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdL24ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBcw//RhrbSgnILdRlkJgBC6GgP6qnnTxZFehgpPfu/Cwh2wlS6sab\r\nrRhK9D8MnFSZalW3uMwFsXMrpkfCjh2q5shOpcx3i5AS76wkGTw8ZJeJdAg8\r\nWPqZYydqFVo5onB0SFBoeKqKQhSqgLsUgU6bBTDL7WH2oR5GO+TnH4FhBTDU\r\n3tI1gC3uLn89lbsvkJRKhyQcx92IZ+aph8XznlCMGitSw+5mb7pAW6Yu4okz\r\nP2KhXnvlp8vmD9XK9zyxVyWnQOZycHYTQWri26Cq1AjJcaqLDIjXeiHkZF/8\r\ni9yOT3ME9TD58NPzw1cD/KSVl3U5lRbWaEWi8VLbXB4tYrNrDbKgPZBIsRLJ\r\nvoUZGMQV/vtXpKgt7pa9xwgBp0Uv+fr08l2WMNN/lfzi4RMLrIsghIQfIJcM\r\nFo6UFdnbg0Ft4HuMNb4OFUFWyOREhwwAPMfTQ7XkQl6tQAGTXKVRmC3X8MUh\r\nxXSsQUgK0JvaschUogjeDPfI9PfxZ0phQXsrB5XiPP/MEvMgDh3KUzuujGfj\r\nZxelNIaqMqKQDtIqGebcDqZ5PMHAecgLyMg2oAGcoIzUkkt7TYMIVv2dK8a4\r\nw/IXWZGelrPCVI+pwilRt+I1TT4/mZ3i72PAdxYJXmz6dGB8VodXQ18Gie3J\r\nyX+bzElJvGrXhEGBtl8hTOQOo14QgkRXoaw=\r\n=NCSz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221116103758.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/96c9e600df3989d59d6777c4156dd532/chakra-ui-layout-0.0.0-dev-20221116103758.tgz","_integrity":"sha512-ERFSok92ahxz7PYzhzouolQ0AQui9+f2EP1rYCr3g6YiNquhM8rQxLIf2BdRPLNLXqf8mh+MGl51FAULW3J18w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221116103758","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221116103758"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221116103758"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221116103758_1668595128752_0.8742619759753947","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221116105413":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221116105413","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3d1ba0e5c3fd626d06bd1c61877cbcfd9a5afaa6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221116105413.tgz","fileCount":6,"integrity":"sha512-/DyX5ENGwjZ3GyK1oVxm2Dg/nnlpZlK89WdsZIBGlxyV0IQNDvnxmzK/F3fAV7UWW3FMOvvR8/ZG1GFvxZXutQ==","signatures":[{"sig":"MEYCIQCLoYs/z7epg9sORFjdSF0OGjrSs0sV9Og695qCP5QnzwIhAKS+gg2j7YR0GIx3i6NgzjEz5z5F6FJD1iMltA01FYRa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdMGGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwyhAAnGt8C5+sEellrXU0X2+jroHuaAfpwhWzpbCGW5yz70L4WHJu\r\npkBWfN7543PUq5GORCCnI9a12rgCQ1pV069KMzKGDCleMVTiF7l05VxC/aC3\r\nvauPPH710ROoN9iFgKiNz0/S4qdqhtpeVzyTeMlUrwYFdAnOiq98O4yUZZfV\r\n7ACFP1avChxy2IiIIBZR1AK+V0AUVNaZeQARjz1nE+2WFtfaLnB55YfNvdQd\r\nHio3CCsK/dGMBcIf+PE6HSM6ZycA14FWmuszjQn40OV+/dw8eLqEz4OJoEaZ\r\nlPvTGklwVbDEvmQEa1aS7BBA7LSpbh9Pg5UDMIjW2i45pWh8oi6udJamKGzA\r\nBK9kCrxzhj8qrIz98gG9C8vAksPd0dpubh9FxRnjIS91b8o/uhFgkfI+baqU\r\n43RXyLhsvi6oHb4XxwFWOR18S4UYonCV84UWUhS2MnuPYNV1kv2KiL49v1Fo\r\nMme+VlJaJUEP4vfxPgxAMkFlN79e+oYEbYG5PV5JzwdAbkeakptBtII+T9lS\r\nchQ6sXNMBSss9U8aZxj9Ryx599VMb7TwqXHaiuhnDP+Pl3MJm9Xf9AIN91iL\r\nzGP0VwHVs305zCpPq1qJTw/tQqeogMF8POrrtdq36udmp1PAID0O20syPZJD\r\nFPt74xLt1rZV7IufPYt22e6SXy0nGLvbe44=\r\n=mnJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221116105413.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/356265bdcec6bace4ce6333b28588bff/chakra-ui-layout-0.0.0-dev-20221116105413.tgz","_integrity":"sha512-/DyX5ENGwjZ3GyK1oVxm2Dg/nnlpZlK89WdsZIBGlxyV0IQNDvnxmzK/F3fAV7UWW3FMOvvR8/ZG1GFvxZXutQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221116105413","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221116105413"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221116105413"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221116105413_1668596101992_0.10699942283659536","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221117065458":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221117065458","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8c8316cac517a3095a83f475c8490a655abcca46","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221117065458.tgz","fileCount":6,"integrity":"sha512-6DnnMyydLUTY0DIbyQzC+cEY3GJsQotsyDLug0LRqliyDzpwVHywwP/aW6FZZCYDnZnPl74eFUi/S7NvBSmTlA==","signatures":[{"sig":"MEQCIA5Mmdy2bsWheLOqg7mgnJmPhrdOM5X5au9qL3uw+3VcAiBcprd1peYQEbU6DbWsCFvrtxz4XihNQxeyEiSGbcRviA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjddrzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp6w//QYIpvd0+AhyogQnWyvsb9EmB6ZhYIUtrP9DHJONfHEbVtnhW\r\nJ1yR+SGqdfCBGx8Xv+2TbffPuZlv1KezR6uN99jnunlo8yttnWTUVCRQ8MJW\r\ns5kwM4htaZ/Qk6ddZgbHhRXU5kpuVL6TBJfzmH5Oy5grROB8kSH1kgqp3PQ4\r\nQq6jDA/4nceFr/w2a77QM8JM5waso9Ui+m7BtogXZ1W5ULGHcJ+ikx0lYTl3\r\nTSUlyb4XAsINrVChTCL9QJV212Eq3nG8ljMuXcv6IeVF4dSQIP6FGHb1HRry\r\nLgl3GdorP1LXH1sMhjrTxugTbzHgKGkzyNEnWVfzWb0xdESPl6OnkCar+Oh8\r\nEPmoqD71l+0w0gdCcaWdT4PkTUtIt+65Fwv0BiHmI6Mps0t8zZ7/APFsxvbI\r\ntzK6d1LCk0HnOdwP17O07hrapZuCgjXh2489w8uCItpFaoDNLp/Em1gEJTaz\r\nZWifZZKQFpNVGWX2DAE/QOvjKOccBGxv2PsgSAkwvc7WisVSzbZm1OJarS4E\r\nPGvWWlqlUkWYep39pXMaVPenxtUYcInP0ASKK8OtN2ziRJYQC7djwQAi+4Te\r\n1BroAllX1ocRcZbLTARnNkOYLRfAm5eP42zvbEuQ6Lqv3cM+82IchLqMVnFn\r\nXuDzGu4ZNcbxwAn5H5c526QDo0CuXDC1H2Y=\r\n=lA6g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221117065458.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/f95f8d6f301900249e77c4d2d35f5724/chakra-ui-layout-0.0.0-dev-20221117065458.tgz","_integrity":"sha512-6DnnMyydLUTY0DIbyQzC+cEY3GJsQotsyDLug0LRqliyDzpwVHywwP/aW6FZZCYDnZnPl74eFUi/S7NvBSmTlA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221117065458","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221117065458"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221117065458"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221117065458_1668668147099_0.8161237399337173","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221117150258":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221117150258","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5c3b8848b232f643fcff1d8dfddfbe51da956d35","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221117150258.tgz","fileCount":6,"integrity":"sha512-Z3HG3hZNNGq+OgTywvJmpFJOKQ+hEgqUuhA+MgIYdpwQBxqalnKYewI/v3mV/IIddclWj3avuGnhNeXRSYM3Hw==","signatures":[{"sig":"MEUCIQD+5DVNW121PQwfJrJXKIQiHO//eR1gGDRbO95j+IHhCQIgRCtviBIS99HSAu1PbGCVP62XtMZnSbqrOazZk0dHYNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdk1aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmogvg/+Ju+LNgG410deabmqoIgBoW3uuqpvVSd0Sra1sT1dauElQF5/\r\nUzFC/ZTJHuvYWXswe3T/mvY5wvYYM2sXefseOxXtzb/UfdX3Q0mOYcPJS6d0\r\nn6RzS90EBjGQbapB1Zmkl/3FP+5yWOTn/YaLivzf7blmwl0hczHeQjFKGsdt\r\npaLY7diVY9w9sPp8bQ+R2MumH1kZTOVY2QHZUrLzrGh2pfwuoEs7T7SB3B4j\r\nseaXLWbufOpeMi7l1h+oKw6bYj1aIeVwdhebsXLrZBSHH22dS3O+d4/HvfD3\r\nCRMyl3Uc4Ws9jBSbgyWzSV9GVTDlMOImdfq474gPFYDXzGBICukDZpPEMqx8\r\n1WEyoWsa1inF+72rOGPDa2gYguTMsFv2EidyNwr3BY/8093Mx7us6VozOvXN\r\nJiSEdUbH8dlSwfEjp7F0EDxeneg3FXrKY+Y2rOmfU9/XkzMe9eyzt7ew0zCS\r\naSMbvXUZIqc2XKB/toBGZpCw8lIYzHWKatZWe+Ne7Nelu6lPXS0dbiRVtkYZ\r\nqVNXdu4pyvXgX7eD9iU5zavUek2XLaNGHAWbVMtJCkVPuBuzbvhNxKA9a/VD\r\nEdOcD7dXFgMSPowP+SRvqiVA6USF1FayoSk57ty40qnBiPYlB5KJbEdqBTfk\r\nvFS2lc1nXXEhZLCuOfUxbaI0269rofCAgoQ=\r\n=CKRu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221117150258.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/020a26efaf67c1c487d52a56928e9007/chakra-ui-layout-0.0.0-dev-20221117150258.tgz","_integrity":"sha512-Z3HG3hZNNGq+OgTywvJmpFJOKQ+hEgqUuhA+MgIYdpwQBxqalnKYewI/v3mV/IIddclWj3avuGnhNeXRSYM3Hw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221117150258","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221117150258"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221117150258"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221117150258_1668697433981_0.5985552834882604","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221122115819":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221122115819","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1dde73f86bb184affc74919d9ac6b7fa0bbd99ed","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221122115819.tgz","fileCount":6,"integrity":"sha512-il7AbbqY23qupW5yWR6YC88z/ZR9ZF3nnP0s3kcVMn5ya+MSCXCeE92lQWpqOLCDjI+zZMcoGby1OgZ5wloh3g==","signatures":[{"sig":"MEUCIHf/VVZ29ghuGD+k8ArUwGB9W8hj+qzUyU5EJ9NBJtutAiEAiN+K2ZFovxMYz7E+RaRnPnCSX19aVTD0twGinfYHqJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfLmEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Nw//QFDg+1jwgwsrIk4C3gBnODnXPnOMvx79wxBlbOwpQXAUSeq6\r\nYF8KHmYE0SDoYilVw0YSj2PNZjEUJJjPft7ggg/aWPQKrFptJu56KoA14lnD\r\n4xioxCMKlpv1yeY6oxLTaRH5GKCH6I4n3a+wxY/Eh5PCAr7llXlsmaZr/T97\r\naKLLiINhvH67CpEVhHowtvVmW3mPPtuONovznEjGabmmWJLrxPn+I1y8zqgv\r\npCg6IBrvuWcf33AI8CqDLLdVnZ+x7z541LESPXTc8V+s6M/p7EJ8ZpFcfrvz\r\n/tCzlJfWohdUiAFJOxkJZQ7HL0MCehS9Zvws3Mpd616y3h8ZDiSy0Rs8wAOd\r\n06Ea+fjuGscK8OaZG9wA2QC5urcJXzKEbWa6u07RYuthphX5xizvFSiqsIrO\r\nEZ7kjvHUJ4hkESprCD6pRs1OuCFZbR0NyZhm9XIorDeGp1+nLRts23PjJbmX\r\nNYcT1FnXbOLoXEhn6AZTyE7OED5nKQIwsrjJwZUl1FlxAR7rAxHBdKEAfuqD\r\nhi87knEg/F8mAsfbDH4SUFDj/EmH104FlSrWTmOPEd+u/WjZUF/QSqSy7w8g\r\nlCEmhW8t34bu9JBqztYp5HFIPUSKn6PDJ3R/Bpo27njMak/2ugbCu6F1wmtt\r\nUSYPVr1kW79o67RgbIOicWLMoFeE2nUvwtk=\r\n=cihB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221122115819.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/057175a11c0b379d3a6aca9878a2cc5f/chakra-ui-layout-0.0.0-dev-20221122115819.tgz","_integrity":"sha512-il7AbbqY23qupW5yWR6YC88z/ZR9ZF3nnP0s3kcVMn5ya+MSCXCeE92lQWpqOLCDjI+zZMcoGby1OgZ5wloh3g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221122115819","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221122115819"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221122115819"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221122115819_1669118340438_0.7370694250652512","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221122135803":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221122135803","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f760dbd3ecf76c08999eb08fe1a1c73fedd16e62","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221122135803.tgz","fileCount":6,"integrity":"sha512-twj62udt0AWFerrEdMvyMDpsDLyTW6CyL9wqkcKXxjFV48GK2ly5n6gOSZlgm4gK0FyVTSTE5silZQWNcJzXZA==","signatures":[{"sig":"MEYCIQDHvjld5KSSiXpuH8H1Acl91dE+O7EklmLt8fztZVysVgIhAOUoSohyA1ydYDMVrNmmosQdtC2ICBxCSuA5i0VkXTJt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfNWdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUXA//T+CCN6DA9iuyUKFr2NHQ8+X2WxWqdtO4K7hV8qsA+zYJYML+\r\nQjybLZPHAg80dlk0/8MNQa2vMswrdMB3w8lEyLEtS8jnUfPiuLxweoldrY1B\r\nf5yVt+bTqjiZG2Q6OtnhTBdyRz2b88f5nHJogdnmaT1ANz/yMFrj86CRV45x\r\nE35NJcm9SXGXhDql/4m5/s8BLFQx7Hob5prnxIcG/Wu6HOrB+li35u3+N0E7\r\nEJWUaZyGn1QSQtRvCM1FaVSnUHFNw3wJsQPx7oIiFOOgLn8jJXCg5UBqg27w\r\nP3V4YNq+tnF1ZujvpwUindqdPVXNK6RadtyfdlCUsn8+GkZs8Gbj0uahnN88\r\nYM7gVjzn2h54djm8JQ9I6cp4/3devmaU7keQqUSfPQX9TAp+ahE6cfHA3q61\r\nli71L1G+y+xmfnYy95Jr7q78qQ+dlT/+Ol7bMJgQMUXL6ojNC/djffSBEQEj\r\npyc+Uoe1O6F5r4ytygjeCuvGCB8CVRTxZKeCofyJBU7fZe5eahhivvamaZBg\r\nQHcc5dcuMCTAh+idrCXYbYfbu0R58ieEUDxNHF0IFjk4k7BP/HtHDf++UivL\r\nvCndxM1GZQeh6/BTHdQM+2bghOj8prgiV53XbnD1RGGPstVJQE6T0//Ee78R\r\nbrqRSKAhvbXe4mRAoQC6ZO0nIYudBv0uFu8=\r\n=dNyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221122135803.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/3b32a8146ba26b278eea5f9c607280a4/chakra-ui-layout-0.0.0-dev-20221122135803.tgz","_integrity":"sha512-twj62udt0AWFerrEdMvyMDpsDLyTW6CyL9wqkcKXxjFV48GK2ly5n6gOSZlgm4gK0FyVTSTE5silZQWNcJzXZA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221122135803","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221122135803"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221122135803"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221122135803_1669125533236_0.3509690870320079","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221123123308":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221123123308","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"bbf274e75f861ee762afe777251b7220810548da","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221123123308.tgz","fileCount":6,"integrity":"sha512-ZVI8yoOCr0p03AtfoBd6y6pQOIHRD5mrM0Cu0NEDcg5YIu339VWSH6a806QqJV5067xv9tPEqhOG+Xh89s7H3Q==","signatures":[{"sig":"MEQCIHIoOD32PrGdOeBDHLUVhb8gwH+1WPV5/sIedAK/T8jaAiAIz3m71K/68EqKfYq976DPcA5B+EqWHhMa0bvNHGbKIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfhM7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWsQ/+Oad0nr6Gf3UAFOuMNAr235wT8TQN8iVPMYA2sMK61+Z23Wl+\r\ncD4nHG4yVYzLm/kj3JD0ddv/gsNJ//TOMeIVVGmNDOsmWy+am+eXhZ8ppm0t\r\nh+Z3WJfpPQSz9g64I63ZsLOwPDgyP3rnHUvz9KRzyOhrdgA2nusJdmsfkrzx\r\nGWmLqoo3DNa+HiU8LLrGmSg+9c9Ih5cxD91WLSDbyBLwIUpCPVNtbOeyE6R/\r\nU8fU/2DOJCTL2TlEyw3ZTFBGR7pr9evj76fuohhCr9Mu8iR4C/TjM1QVVnQF\r\nq2hvYmNzbe/h8TUEreG4vUWiWV0bwfZxeWrJIOeoo5oxDhc3lop1PvxTgmRI\r\nE8eyXzYLktQoVUaFVjy8/RjVjhe+WKBnw2pjFc/c6MBZtbCJ15jXyMqUWOPs\r\n0qjvAWk6LFcxBapXr6kH9Jfdo+7SaMQLDaqtjkXl7T2f+t8oKUTm4wkdyaSG\r\nFtDNjNLGh5OkHAI+WPS6xg1s78Di8VJF0OvTXGXQ4tkeeey+grMDvOZbWRnO\r\nbB9EVgNGWrUvdhesZkkPN68dS2IS7i+P7PFrIdwXJuuzQ4rUNVw0YvhO8ixr\r\nvW0ksa9sVecXqnGICXTukHT4KGF1hTf167921bMVRYrwxutQS4WmlGnS+Dpr\r\nQF3OETRy++166qOh3YG9txePkIgYgT7ho4o=\r\n=lSY1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221123123308.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/b5b750fe80d0549685086231163b86d6/chakra-ui-layout-0.0.0-dev-20221123123308.tgz","_integrity":"sha512-ZVI8yoOCr0p03AtfoBd6y6pQOIHRD5mrM0Cu0NEDcg5YIu339VWSH6a806QqJV5067xv9tPEqhOG+Xh89s7H3Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221123123308","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221123123308"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221123123308"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221123123308_1669206843776_0.8264728560840242","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221123130515":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221123130515","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c1d31d9f65f88b05809a08bc591f9d49e8e360c6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221123130515.tgz","fileCount":6,"integrity":"sha512-TAL2+4C0IGqDU7XAa2LHHiPEur/VV40I9keLI32CaN/vngrs/b6TW9nUhFZGcFc9RZdNkJFvcGWxxnsf/Qd4kw==","signatures":[{"sig":"MEUCIQDLrMGsRPxQZAKdgt7nJPHULIdzTBFp5kgupK6YlqHhjQIgLgu09uoNDNl19jQ/5CURkTwstbLgZ2MA5ajVGBis0LM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfhq1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYHQ//aUGck6YZCfwMgiZVgMMg6QXmU1XtE2o2NP1Y7uORCPg6jVQx\r\nDTUSgh8068yeICnODuQClhkVolpuVhZuXAEUWhiApqNe61wI/nMBqiCSYs1k\r\nNyqPxJTOL8rZaQ1k6p9Y55MvoaLLxjOl7wlVl+1YQxo8qTroHg2XOQXZ2Hw5\r\nf5Q/3vudcApK16YnmujPDk40bJq0pf85n928KdgjBdjl5mmaQhNF5S76h8bo\r\nPlbfk7MGCykEp+dQ3eRvejPuaRMDpaQL+ymfuqt7h/wGRC3uYl2iHOf9H4lH\r\ndBzH/BN56TUuhWBW7XPqtGz6tPlah/rCP6SbvVkHa1GEREGTvyg4IoOuBu8K\r\nez2pwBGoL0ENaX6W/zw0fC6Ns9zNUA9jTzJkMFWLhh3PZtta2Erhl9Gy9fsa\r\nhAL47dEZRkPTW4Q53ZAX5a05q1/TnH6r8qkbSdxYX0zdJBmDVvpLm6oA1XlB\r\nuw+sPtbCRVtAL5CdMtklswUx0xUFtvyfzyw5i5QjaD0ZvPc6h6QFXtHgBR6r\r\n/JCvGiSvPyidytrEcCErnEmEXPrAvXzWeQqohgKmLYcuyPZkUucPrLnFqMHt\r\nmGAWjyNcDwP+m5etPk3BZt+Pf2tMIzBhFYpJ2eTMVn6so7k5EQsAvKNkCSj9\r\n4ZZjtv1Ocro/MmNbYgRG2LDdjRSfg1jpbI0=\r\n=bWtt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221123130515.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/6c5296ab85fdb37ec66fa9995fd636ee/chakra-ui-layout-0.0.0-dev-20221123130515.tgz","_integrity":"sha512-TAL2+4C0IGqDU7XAa2LHHiPEur/VV40I9keLI32CaN/vngrs/b6TW9nUhFZGcFc9RZdNkJFvcGWxxnsf/Qd4kw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221123130515","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221123130515"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221123130515"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221123130515_1669208757327_0.6673663078240628","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221124103928":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221124103928","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"552dd1db15365489b06f5cac05eb32003d11d238","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221124103928.tgz","fileCount":6,"integrity":"sha512-N8rJfdXmqZtsbjY3lYRe3buSDUor980vt0FzbfEx+CJMq0XQQgmKLGpmAcK1cRcZCvgvMv4v40lbv7QOHfWs5w==","signatures":[{"sig":"MEQCID0NIdGOGao9zw1nuzllv0Ycx6xGp0j4ate0dHSfF1VLAiAU+Ngchf+hyikZ7e3CRYE03O2epIf45LRUIgixU9KlZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0oLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoonQ/+M2W+rQAqNkfXeVZSGZMffhQfXU0uGZZ7jkZnhiKKuTjkSHXx\r\ndaG4YRnICfNwDxTDzbSRQpxpQeXV5u/hCyBunq3fZqoI2LukJSulSl5sZKVT\r\ntLrrXtliCKZGIFPLpqFOIRCz3oQ15+cQ2dEyf5OqEJVuxfxXnw+VxJKJKj7l\r\n60R0X9y3BBPI95QsqSolb2NIs7ltvVPVOoLeqKAA9nUmbdD/MLAwNeKL9FJk\r\nXIVxc7bTTNNOyA3A/L83Z4zyYv81Ec30JRn2oflPGjzGYuP4u0fGdoHfqFTp\r\nFuNFwK5cv38PA6iq2/CtBWl7hhv8pBZ5awjtdbkiuAnfRSsRcTUTRdiV5V7h\r\nqUGYVqlWNULA3Bex8BYP+UHFYUbJNZJxXvBRLq8YnQcNzf88NBMOWhiatzzM\r\n3IJTUxHgP8P+JTeYDetr4xKt8eQh8jdeNA1YPeXFCYnn+v//VeMIgEetRcus\r\nys8vQz46LDAvxc6IyBMLBzQrA/UR2Y6BbALPqhc1F50iqr5MQFiq1VZVhIC+\r\n+hfkt2qKSEx/l9FPg5iB9EI8DPxsczfWQNNWyqo7U+CChMgyRw+3ZqpZJeN3\r\npkmVWYDHTmBwlXw/5qzhKQA2CJi9/VMAwReDkgob8LQVJYt0fxswP51AVwdx\r\nGUcwLTZMDb/WbPGv8wcufek10wVmaa0hHq8=\r\n=PnjX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221124103928.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/c0143bc9870b4b5321b06a81c7606a82/chakra-ui-layout-0.0.0-dev-20221124103928.tgz","_integrity":"sha512-N8rJfdXmqZtsbjY3lYRe3buSDUor980vt0FzbfEx+CJMq0XQQgmKLGpmAcK1cRcZCvgvMv4v40lbv7QOHfWs5w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221124103928","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221124103928"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221124103928"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221124103928_1669286411620_0.35233950728244734","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221124105520":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221124105520","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b31a48405ae42f83fa61114da33dbf9e80e22d14","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221124105520.tgz","fileCount":6,"integrity":"sha512-GYJJOabwJ1Q4tlpDpRyHQmtun/ilwNbascglAfLT/aa1LCqAoy5bM4Gj+yNJNxRI4CakV+g61EeXoEz2ejs2WA==","signatures":[{"sig":"MEQCIEN/hiVfs6rDgTfFvamK2aFQq3ocA5ugjV/BpK0rEniBAiAHAgVJ0Xv3FuCI30FFCzxevUxu2wbudzokg+Fb4suWqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf03LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI9A/+LIWx63i2ZtraLB69UYi6kEgkcwowQxocX6HkJdd8cWSuHKJm\r\nLb8oGu2HYb91UPEPBcjkVh4j2E2tJkv57ITVLNKDt1y1J3g2t5nDerhldz05\r\neIKy7BrjVt+6uGe80Fm9Aw1AA4qrrxHEcU03AGhRPhmO9z9clZhs8crM2nOA\r\nl82AiQK+oLbW0aZEfQWI+bhETj5U939cBxtrEP/ljpSyyWc11HAXV6hK7xsn\r\nxy1u/knWcirnSg2iJ00v1F8MiniWeknuwjQkihMEjE2zsGxNqlBK/e09qzqX\r\n3kQmG4RWZpz1Kd+O28A3viY02hLO11GGPcAIHMERCfhicCEjkDP/4oFYkbTe\r\nPIWn7BXpXXRcQC7vQLo69jhetSpIt7+YkbWNghDZgyLvYgCSbcu5vzDczZKZ\r\nqywgfIw9nrpRuRkA2z1Fb5KptIVRjHIYUz1+qYl+HdkrAxUGh5ORSMUjePm6\r\np4XXFM27gd8jdO3vVIghJFK2Xp1Z1DIODtQpVLQivKbCdXMai7c8KEZ1bNBn\r\n7/lE0q0vlJCNU96g8U9PQJxgVcuUGHSsh8vtk3OEcgVIx0yRMJnS/JiFn5ZC\r\ndodTCYmwwe+NX3HNCGM/7My43CWXAecp7EgpWf7GaLo6UIswBzlUmPrDCfHk\r\n0Cn/vBa5042bcekL3SlX5EaLOyOO9ulbtIg=\r\n=R9Nj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221124105520.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/fadf49cbfa0d25cd73f23f3c41b91f86/chakra-ui-layout-0.0.0-dev-20221124105520.tgz","_integrity":"sha512-GYJJOabwJ1Q4tlpDpRyHQmtun/ilwNbascglAfLT/aa1LCqAoy5bM4Gj+yNJNxRI4CakV+g61EeXoEz2ejs2WA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221124105520","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221124105520"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221124105520"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221124105520_1669287370928_0.8024753042344939","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128164126":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221128164126","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"33177e99e1c3c6ef6378eff20683738ce8094919","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221128164126.tgz","fileCount":6,"integrity":"sha512-4KZ899RiCP4+tNh2VOGQ+9RY+tS6jzNeh4VfBOdER3dmUH8CcCNQnDnsgu6ZfPl7oQbGLdcA2zs8jTKhCrHeqA==","signatures":[{"sig":"MEYCIQClqRfIRCms1gb+O2Zvsy85nciMvPBbQkjMmEKVuGg2twIhALvXssTjPRJV1VH6kZJm5qyp7oih+N+jZn+YR16Le3Gz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOToACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+2Q/9HLwc18R97PX842jklDAnhImUh7tfbSs97BPEJfVfICBIA2iv\r\nb6Nn5GxXRmveUN2Y+WG5ak+2WG9NM/bFemS4qGrNnRcC6vlq7rQA0WxZq51w\r\n25RzhoYhn4AO8oZkoZuvygyH51xbY6Amgkz/G4K+gLrXw3+Fv8yRCRL6y64t\r\nCirHyig4rZXQ7MCcNPUxCo2FA13mrMedmmo2AfH4931ZZmPh6t+hArpz5kWr\r\nTJrjtdPdeq1zFNmCGtcy796MbJLZGEiXMxr2Rjac45FlDIbZruFjYLYoVdyn\r\ni/oNlVvqj54pM+uWuGsQwSifEbif6sf1MeVG6Uvq1BTA2pvHCqYnJfpYysdg\r\n+a042fxPiweUi8Fr8TFbQMPHegsSA8R9vsoQPRl0UuVI9mkmJSqYUNRbG22L\r\nTmy7CUilJQqViD5+wCafcsG95W0MO9pV0QBFvjlE4Uowlb9GykQTgwy8rf26\r\nGuVArEV3SV6VuwEthjhVWfZuQyeVjozEE9Tq8V0PwaGXHVhN6SNYUoZwSPfv\r\ntd5+MXPqMsLetEy9vA7C9Yi9zDlJH3IF3S4fnA2kRB8kpiQy1ygdWd1AN2iH\r\nhyVtjyVqyHjrw3/SuvV6j0qxoPQfnEvZtIemMA2UnCyGj2ZOsz+emVP+OW8Z\r\nNy5aSIDBTF/92hgxU92fWohp/NoD9hwmz94=\r\n=UgFC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221128164126.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/c072c109fb35fffd3303957853e54773/chakra-ui-layout-0.0.0-dev-20221128164126.tgz","_integrity":"sha512-4KZ899RiCP4+tNh2VOGQ+9RY+tS6jzNeh4VfBOdER3dmUH8CcCNQnDnsgu6ZfPl7oQbGLdcA2zs8jTKhCrHeqA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221128164126","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221128164126"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221128164126"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221128164126_1669653735967_0.6468679900511332","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128182021":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221128182021","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b6be7a936aef53f6cb2787e317bd68565a831732","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221128182021.tgz","fileCount":6,"integrity":"sha512-OiqNGYL6zoJrcl5GR97T1Uz3BaFQbasHWERW/hIPLoVRh5v66TvMLq0DFaTTnN/JhMpVsiPiKV2FrBAZ5og4rg==","signatures":[{"sig":"MEQCIAv/lmpziBnd+SH/nj0RHnPnhjVJS/2svW9LIYFp90qcAiAcg//KsEeLpjWoVAIbIfH4A1CK2F7QZr6QU/5/lYR3Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhPwuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK2Q/6A5TagiWogV++QSKVgWKhbzEw6cM9FhefLqcdcad4P2ryvPsZ\r\nvU8QCE4x0wLSYwIOrD4U0Dyf6H8XmnaospbeWro6+5X7Q0rOL/DL+J5iFsAi\r\npgVf3UgD9kGd2gexHkp5HIiTogP72YTg5oOpXtjRl9EYgAX6GEZWdovYFGi3\r\nM7nxY0RVjp2JDQ8586IwMDmMD/+zdtZ7kaMiCqd6362BEZ8gNB+/Yc5Du1Xi\r\n6jWVakQLItuaBnS9di6kK40BXbkvcImTLxTHDLTEg3sWltkfZ9M3TBAp4C5Y\r\n/ozypXjpjyu/RW3sA+Lbu+r5oi4EW8z2geQILnPvo4P1QsPoJnq+HHsuLVBi\r\nTN0OsA8Swfzqz0cEqgy3Fqz/+g4/sgzjJ0OC4cMKPN39OdJ1TZQJf/mZczIa\r\nZDCxQaj+7xjHco051U2CaTqUVkmH8mU1coOKjWYG97JAEvIOm+SqscQat6lb\r\nQLbl76nWWfFEKGegUb5l3Fkumynqj5WpO4QphRNY43E6AhMre0nh2PTuN1tM\r\nn8Z0r/Du7ArSnX84HDHdSqs/CB4RxYC1iB/ku7ry4v+Q6spcTy9QwHm8trAh\r\nAbii55aC6O//d7i5PwqrolYCC4uy9x6/xLQHZLGl/oWeBolambr/08XtDVuL\r\nx8C55NIioqvhW/VlbCNKn3d88pD2CD/xZFg=\r\n=SRo4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221128182021.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/c00f6970327fca945261c82bfa7d7573/chakra-ui-layout-0.0.0-dev-20221128182021.tgz","_integrity":"sha512-OiqNGYL6zoJrcl5GR97T1Uz3BaFQbasHWERW/hIPLoVRh5v66TvMLq0DFaTTnN/JhMpVsiPiKV2FrBAZ5og4rg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221128182021","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221128182021"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221128182021"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221128182021_1669659693806_0.6431327660287678","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128183433":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221128183433","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c7f7bfe585265931f956ac5755c33a6b42e0677e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221128183433.tgz","fileCount":6,"integrity":"sha512-aoELb+tQQdYkwurGcOnG6tdBM/KeXyvjOPTvfGey+qU0zdIpWUW5sZPPexc2R9iQLDArxFPcEjBXx8u3M8CfAQ==","signatures":[{"sig":"MEUCIHyTAVeO8o7Clb20PGXtkOI96RcE7DKx56R/5FqzrcxJAiEAiUUBOBOniW564uiJXEl68tl8+sw68hVWj9DJE6UvKJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhP9nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9mw//SqBZRxbh4hX6P1Inc5Lxp/+4epNo9iQWszqaPQdT8BYjFGez\r\nr6SJLwUMnWghmLIRRztsjUJvO7zRNf0kYfUvwp3LmBRbFalEICE4DW5NdJl1\r\nCKk7mbYMgY86z83+efuawSKT8oX1gS6CbyK2uzYDee0bS3Xk/G83nR0FsU6Y\r\nn3LEr1FTLJeSGlVFscyrY6FYOmU/xa45gZuSViPV1/yyGAHNtbFFFefw08Sv\r\n2JOuWE6QCZjkcvXRshWEl/rBBSTjyGW8GetnPglfajgwT9zNUw4NfOcpNUrL\r\n0GaPiaDch7pobN1c77p0wjeyRJmlObIxDIapoUhJD9T8CF+ovpM1iylucS8R\r\nqe1jOz8lZM9osbU+QmIJ1RH9G8HCJ28xRpLc6hB8+8R7gdpysG4BxcaPqa8+\r\n0iqnq8FWOy8EClZnVab8Kcf2lDZL3Rmg4J9+sau3sZLWrh+vMe46hAke+R20\r\nAEjOtGY27+gD08YrBNTf64MJ/qorq5MSerRBmR2r5cg6TrlwBc5XtAmZ7Fzw\r\n6IT4uQ75x//JmmNWVlgWRtOjfGPirQ3PXaPMLOwLSboP1Cha+J4npQWU/gwr\r\ndAf3i0kEZ6Zvx/HTB7Jbcon7Ty67FEZLxaTgL3PnTVpc5Uac4xpl2A39dh/T\r\nJM48fCu00ERy189sRP0aIwAqosnQaQkLM4o=\r\n=p+o9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221128183433.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/aedcea727a163d07535f3b9fc9f3808c/chakra-ui-layout-0.0.0-dev-20221128183433.tgz","_integrity":"sha512-aoELb+tQQdYkwurGcOnG6tdBM/KeXyvjOPTvfGey+qU0zdIpWUW5sZPPexc2R9iQLDArxFPcEjBXx8u3M8CfAQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221128183433","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221128183433"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221128183433"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221128183433_1669660519320_0.24697756798999815","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128185230":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221128185230","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"ab15e8ee1ec551d78a539548b1eab5495e2a8e42","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221128185230.tgz","fileCount":6,"integrity":"sha512-8X2nTSrjYDO2NE4L0zLtnFV4RXkjPk/S5Hzrmgn6WrzQsOq7SRMKZB3eVjXMBGDmyJE4a4ofF9nAXkNM5Yd2Mw==","signatures":[{"sig":"MEUCIQDLmShs6w3atL/ygPw2O9xgyj/Gelc4mQkAEydL7Xn7IQIgDI0o7SUvO63TlvLCp8ROIuVvfWX8PHhwLvrs4BwySrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQOfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPAQ/9EQ/BHUgpfvpmnDwa4h00NqF4gaP9qEWofed4fnqhQCUsMO3D\r\n3qVku6VpcnkCslXwIwi3gbbnlXYRaTf5N0cOqD4gncDQRYukShR5CtP6SRUi\r\n2Pce5Q5EpzaGRjUVzDXMrPt5H5ybcBpAqoBTLe/2hVAVzjOTdKvUIb4BHZXa\r\nVDLm4Jht6aD/fLOiRRDJWa49kz7uQGVocyZyfN+te+mG1FrSnBl7k5R3kD09\r\nCNqoB9YQ2vpT7juZYB4fKljd5KH0iokQT6VSIMF+7MU/RN1qWRP47ZxoQO3x\r\nPQwmHlL8vSHdf7SAelhkoSqY6GPVM62gZI5XsO1/U48eWk6tWMYTolpld+6b\r\nWptEcIXmtKwkjhGPO/zUF10LjiFbwY6HnWZpwIuXFJfb2luoQLMGlPf0waB6\r\nStCIQCOMoDd1hjLMoTxdfarbiVKckH/mhd0CVJk5BzybK5QaRzAaQ1lDE4of\r\nKDIIvSD/n7JMVGT2J8wtJTYsaebB5uWP+RLjmeMdwqOH32f9SBoeSq1H8/JJ\r\nMkUuI2dPfiIvLWE6348iVrOkgW0ctalhaGpOgDDPwqWRwKXp/0O//9H8TnP6\r\noJLw2XD/TixrJRcER0nMRktmdLE+1QzTRlprxbAHUoWxM1TOKQ1RS+MARi8W\r\nku3ui0BY5jedLyFAlhTimIXxq+F7ID83fIM=\r\n=M49y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221128185230.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/32079ff875cf0f89306b6eb15bc999b2/chakra-ui-layout-0.0.0-dev-20221128185230.tgz","_integrity":"sha512-8X2nTSrjYDO2NE4L0zLtnFV4RXkjPk/S5Hzrmgn6WrzQsOq7SRMKZB3eVjXMBGDmyJE4a4ofF9nAXkNM5Yd2Mw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221128185230","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221128185230"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221128185230"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221128185230_1669661598885_0.4086175128551348","host":"s3://npm-registry-packages"}},"2.1.11":{"name":"@chakra-ui/layout","version":"2.1.11","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"6b0005dd897a901f2fded99c19fe47f60db80cb3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.11.tgz","fileCount":6,"integrity":"sha512-UP19V8EeI/DEODbWrZlqC0sg248bpFaWpMiM/+g9Bsxs9aof3yexpMD/7gb0yrfbIrkdvSBrcQeqxXGzbfoopw==","signatures":[{"sig":"MEYCIQCai22jA8S2RvGaOOOQv9BqToCGn7z3q+gDTAvuYQPGmgIhAOfJ+G2X3H8F2sFEALRyB67Nc39untn2UmljIlL+AbOX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhaLGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmredg//Ub2Nn2RNBsrlfqsYMykhmplREPaiGhgkUsrtPciaCcxuPTRa\r\n7zI6vQpAZXeul4GV05Bn+htDMvqwK6DAayZyJpv9pc2MafIFzENP8h6i4FxD\r\nRc4TIKYdzlBQmb9gcg16L01pY5HC0Vimq9gfU4MUr1u4EUTUrz+/cwkLQDsC\r\nkuBDRaA1v6VpoIe539iAFdGoYd0b9f5bzmwlzF6VBV163rXz05EyCn8S97Eu\r\nZ6C2OPBBexiamJ2MofUOC5uPgsW+dG8KNKdPouxYg4ZzVNOdG9LpC4QzVBne\r\n+y1RSeYCxnGFg7qX1sVVINRNHpScKo6mhio79PXVSZOs/qI2CBOjmbtYnWs1\r\nXYhf37F2n+J6Cm6UN2/Ex4r7mrArc7Ok/zzPgmXYj1M03v01GE8kHZCnV05s\r\nIcVNMKxpz1Mt53PclZhSky9X9w4Hxps9vqtOzq8TBf9zGO4P4b9B0O+O17iC\r\nU02A8LEBulk7y9mq6PZeGNowuYGwoC+R02OJ58DBQScTPTll7xMV+Vy6qmLt\r\nB9BWb2kvJ2Nly4QyaYhJeIrI/TYbAZvLMwbciJOxlWOmXmoP8z3E/dEdBNc2\r\nydRUmj6KAUjVTqvedjiI6zoJkSkrTFLlAQBvk9+xB25ArJtS2fmyXmgbS+Ml\r\nv+fFFPc+bh/EKdVguf2W0wgeUWUnwiPIhp8=\r\n=NSYi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-2.1.11.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/ebe94f33c59369a6c2af4a0ebcfa0939/chakra-ui-layout-2.1.11.tgz","_integrity":"sha512-UP19V8EeI/DEODbWrZlqC0sg248bpFaWpMiM/+g9Bsxs9aof3yexpMD/7gb0yrfbIrkdvSBrcQeqxXGzbfoopw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.13","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"2.0.5","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.3.4"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.11_1669702342026_0.10587638482181494","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221110721":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221221110721","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c145c6c29f141c618d51baca77fbfd0020186ea1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221221110721.tgz","fileCount":6,"integrity":"sha512-ULz47FDHRY5XUnaN3rIyJv7cBIHywFcLbRItgokGz/ghUwKqvIQ5aSrDLbt+EvG4SAApVvuaPWjCtgGDoOzJww==","signatures":[{"sig":"MEUCIBFdWZli+m/1V5hHxKFwclEOLKqV9m7T2lu0a6r2cDxzAiEAwqk8QfdHWXBnf6uSiKsKJ+m5IX+FWW/LjkZaFk2dY9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoukbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAVg//W726UevIyssHRxcaMVYuDLFZBMbR1OzWvSQReDAXov2UCZ1w\r\ncx0zXg60XbjJiaxIFJanKJkuhMCdNzmpdOOJ9ITSBjZ/TWoCjhibL08tbDta\r\nrbnNGyUrOne386FesWQ9ntolvKICL3a0JT6d5540vexnk+PKWP5x5i2n9nED\r\ndEMZTpeVS8yrst7zejFTp0c/5jQn0SZfVsAIjtqI32hpD89CIpVbViO9ImQs\r\nkXouAJy42NjtqTBwScKfPF5Qt3IWEFKSQJSpPj+mVWG4XWx5NAqF87pQpYPx\r\nJRwb8K3TV8Y7mxhcuYM01iJA3Uck+3nXSTpzOZSs1ob4WtvD3oAl75bWFm0I\r\n5HSwcI0Et2MAs/yFhyNcLNlt4DM2croRUFP1+U7m4FxIheuCw0qosccP8rkD\r\njmS9Z5LQxjBERoEnGzFikDagZLnb70VGbRNlQAmZu0p3hL7QzylbeIDsSwsV\r\nNh2J99jy/HX13E/VOABirpK20bnparot399rY+pCsKG+gDG50GHIW0DQCnqR\r\nzsR6HyAAy/O6qESzPvb3QyoDtVBLkNtMUKF5Uyr59TCK/DyjtBb5qXjOUokF\r\nIcAAIIVCq0GemHDn4L7n7DOqwgo4YsPjjQJs23RW8QscNCpHPoJ5mWz7dgyZ\r\nBfbqhqSB6KGwtiajuQMJig7/bHJ4f/eIJhk=\r\n=EHVY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221221110721.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/03243f4c9fdee2ef1133d36412fbb380/chakra-ui-layout-0.0.0-dev-20221221110721.tgz","_integrity":"sha512-ULz47FDHRY5XUnaN3rIyJv7cBIHywFcLbRItgokGz/ghUwKqvIQ5aSrDLbt+EvG4SAApVvuaPWjCtgGDoOzJww==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.13","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221221110721","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221221110721"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221221110721"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221221110721_1671620891199_0.889828124841423","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221133224":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221221133224","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d87cd66fc46783b7ea22a3b35074f76d43ca95d7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221221133224.tgz","fileCount":6,"integrity":"sha512-reW845v9K0RzBpTaGXLDG86C3YCTU5bqzxGPJwZyWorz2F/3+N/WKowGVP/78RI/w5uz7gyyIJjzOTHSZIXazA==","signatures":[{"sig":"MEQCIGQXudsh+ViSE4O95M2I/JhJ1kE1m6FqN6Xpze3GNg50AiA/9n/PPmtWc369vs6JFGSWAQhnHHQXqNCde/AqRqhPHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjowsXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4dw//Yt1/D869bKx2A3mIrNEidyNcko80q06sHgtl0+nZxV+pLSJ4\r\nx7obRATEqPmYQG4o6lpSYGeUMPfpQArT4wSXhCVNaDPVc/0KWG82JZfb85uN\r\nP/iSZGBuhS4uJkBWrLSZ4h1wo6S6KLYow2pZFxrsIcno0R4io14uQrMCp2oo\r\nU7NKO044M2LfVdCxQ1+xJC0dousDPL1dDiCWLC9+UDj2nFpcNWDu14dc7NMa\r\ncXCGFNEfWJguQxWfNjJB6BNBA3NM4cK19RzMINTUSblVP/N7miVleaH6Dhnj\r\nOWurFHwlWpX4Gb6E0Z53eJIPGrpsGfEhsv4vaJ6QRpABSea/7sgja+wEuh6O\r\nC0kifypOn8ovddODipjR0E+G3O7VzGu8hOcWcsMDXJWNDZ3s+TYvswhQHzUh\r\nzUoZoeC9L1RSw9xr1V37rEc6xpgvL3LUbALsigHYZ8lHFPy4og+u4ryImPFh\r\na3i7oV/T+T91R4TXjxdVEzHecYexYtclDd9D/knWAEZoAnsvoba8owpZZ+ey\r\n5xqN6DadTQEvBkzcwIzcsWWdoeuFeLSSrccpjq+NHX2lbcXXvoMO1Iiz9TCK\r\n8vHGj3s6C4H7jBKcy+HDXnYaIwvDYanTA9uNMv7YR+0nCKIodeKVkzGGDBNq\r\nWBUA/MiZZmHJVqy7vt0t3m/6VVBqlH+1EpI=\r\n=jMDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221221133224.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/15f7493201e639f71d1ef7c054d9c700/chakra-ui-layout-0.0.0-dev-20221221133224.tgz","_integrity":"sha512-reW845v9K0RzBpTaGXLDG86C3YCTU5bqzxGPJwZyWorz2F/3+N/WKowGVP/78RI/w5uz7gyyIJjzOTHSZIXazA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.13","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221221133224","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221221133224"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221221133224"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221221133224_1671629590996_0.3132020815186123","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221152939":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221221152939","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f60a1a44028666ad1de636f2a6a2565f722923a9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221221152939.tgz","fileCount":6,"integrity":"sha512-sSjhQ1kl8Evvb9Z76b7NaPqOdqcz7ze/pwQON1mXEsNtFygpIkX+G9xayi0X5ZKmyoISbM705ibVvZ/LpS2Vhw==","signatures":[{"sig":"MEQCIHywQFbbi7hsdknOwVg1a6VsxTPQ2yxGLgLbxLpJPmlxAiAi6ZO4mumaUIV7GFppY4XK7ABS6UlUWzT4Hv/3EvkMNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoyaMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi8Q//StoavUzA04sUvShTcC/6vJgHNVgxvCatuTDzsuEwXcxf5Otj\r\n7VO6PzFLtVpjiWvsej1Sw3B6PU4WzQIZQg9kjrZHmbFvviTEdj9ogovCR0ui\r\nylgE/5asZsgoT+flf4Wi0i0iGFtttkSTZbrkF9/AvVTpCAyEFevZ9HionMRC\r\n+Vo6L+m+1+dTADSiNVgck+B9R2QBwuZc/TBa0p4sxhSR0qaCCWBYcMkfeBpi\r\n8bwkd0OTf8jWzmPY+4+mUN1wJ8XfrbstC05wYad1klDtd9+D2jiKkmzeyzsz\r\n2ymnaQAbXBXtXonPgrKkoZYXE9RTHKVyt3e2veFG1IZNH4ccIFKqkAlg+XDh\r\ns54UtSPP9jdZfQz3fbmXhSBYXF+aAdVCxiJL+uaBT5MCgXjhRwf9ViyvdC0f\r\n3dEQAnrDqzXX2ybc186/qyPdBm85wvzMlsWCRrxGFe+c/b6wRa5+/PYRVQ6X\r\nnFZD/TAKe9kimrvuDY8/EZ/Kd4Ec0swfUjo4nFRZXLmridZaIMF8zdNZNGv4\r\nlnYcxFVUniI13GvQZclYdAk40kdS05lYFY1XIbjMn3DggZJXS06t4gmu2cvo\r\nKP/PD/+4PaoV4nAGiZIeZ25pq/4rWzXptkD2mGUESGaxpLAc+RRGGeLfCKJi\r\n28aa7N+mMu99c9CmyHXsMcmt3SqBOv1Yzuo=\r\n=quC6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221221152939.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/b251037b6b10de906574d801a95ac6b3/chakra-ui-layout-0.0.0-dev-20221221152939.tgz","_integrity":"sha512-sSjhQ1kl8Evvb9Z76b7NaPqOdqcz7ze/pwQON1mXEsNtFygpIkX+G9xayi0X5ZKmyoISbM705ibVvZ/LpS2Vhw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.13","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221221152939","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221221152939"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221221152939"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221221152939_1671636619843_0.45941577053232585","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221222051548":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221222051548","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"19b851f1caf9f7e8571ef66974859aa021d8c192","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221222051548.tgz","fileCount":6,"integrity":"sha512-J1qb32ueF9igt52+2sDt2NTfjgXIpeTKhm0Lte3m3zjdI2hsgXNEQCXapJdNI9MeyTXa5t8M/JhdN37yzMA+xQ==","signatures":[{"sig":"MEUCIAMrpUUlpgkjJcKFNIckCvVrmEkkCLAxeRYaGg8Fpk3nAiEA0o38v+2gUKI4WDjkmh3U6ynBLaysB4MyKQlG9YA4pzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo+g3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruTw//Ujidd4gF5wTaP2jKtw+kYRhTNMMVQSHJ3B89lTfwjJPyiQzl\r\nnL9ACezKBKj6iyLNCdZHvVkL6xlMl7lr9e3eB7oFcAn9G6sBSDEBWnu4a6mt\r\nWdrEWvLznDAfunJ+NAStrxTY0m3czZfAZsbrIpcSIaRHqdigHCG2z/Swp+OH\r\nLLI7NlfA68vL7Vv+Zt9G+YTrFnWph6zTEgbGSeK2DmMoD9yIxvb3DJG62JzF\r\nIWjveX6JYg8ZAiIVWIOVZm13giYE6LvGdusaEIhgTDKkx/V6/NAIs6THVHsd\r\nek0m2F2ClCndKVMmyxVNqP0C6WhP6S5dmQliBD8mon5m0Es2dxm14w5jhjge\r\nLVR14ROFF0A4aY8y3MbQeWgesiE1jmqowjEEWu9wAEwHrrrdcPV1JD1vhlub\r\nOkpuUEsfn7PJ6gzjsgHu6Q62scl39/AFlw7rfUoL9PFpceuys8pCwSbTNdFB\r\nM+83psXLiVliejQpRm+hzQkLVv2seV4TiQQYXg24vqD3021SpJNyRx5+n0ij\r\nuRSvIQLxfKcx43tche2NCTQmPBUeIHh5O6GT0Hl10XWxzQbhgis1qvCUC5Em\r\nAKRbkXvGfS4IB9U9r9yAwyEBbVMGJFEaiWG63Bi368k3Yr9GV7X9KqqXYMJv\r\n9NlP3cI2TEZItuM1XfYl/QqX3jBRuDKeBHQ=\r\n=kj9W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-layout-0.0.0-dev-20221222051548.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/e6e1fb6e29ac49b9f005c5a8c96d29ba/chakra-ui-layout-0.0.0-dev-20221222051548.tgz","_integrity":"sha512-J1qb32ueF9igt52+2sDt2NTfjgXIpeTKhm0Lte3m3zjdI2hsgXNEQCXapJdNI9MeyTXa5t8M/JhdN37yzMA+xQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.13","@chakra-ui/object-utils":"2.0.5","@chakra-ui/shared-utils":"2.0.3","@chakra-ui/react-context":"2.0.5","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221222051548","@chakra-ui/react-children-utils":"2.0.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221222051548"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221222051548"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221222051548_1671686199283_0.7604755929988327","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221223180742":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20221223180742","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c6f915ec07f052c00efd8bf19750c6fc2cf2d695","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20221223180742.tgz","fileCount":114,"integrity":"sha512-QOmlYD2mxMlhRvBupR+6S/lg1i6euzZNcM0XGfcCbTHmj1CC7JPoUIzlIHcv2MttNopni+3HDIzJ+9z0o4rxQQ==","signatures":[{"sig":"MEUCIQDXgcpuX9UPWqO1r1x/luEkt+ZOEJ5fGL9kKff6C1SYhAIgCNA90fVyoLiiHhCoJX5tuJs+wsRYwoYPdPAUjM9PzGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpe6rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdYhAAnAmr1UlbVJY/P4VvrplJDj5ixrf3r37QpoaDQKTGoMKxYTfm\r\nN/7PaovijTVD2GTXb0ryBxnRmdHGUvoXsxAV46FQe8SuYNQ3GevxSBSOFMMn\r\ni4m69YbYNUUxCnv5B1SWlW+eUArZtJCUpzPUZjkL4TvymgFUWrzcWM52Ww6V\r\nFYcZlSsCydFck2vcrBWs/+MaLZ/arpGUuD5nLcL2n0xlQ9qV4L1/dURF+799\r\n2/Vz7MvaLimyC1r/AS6o2G9olbURZH1botDVLe256zWxdBBgpv4Ec+P5lMzV\r\n2j6Gt68AP/RLWGRNFB6lGYyYbMmJGtfhxQrR3pmP4jjWGE6dU6fj3ave6jGM\r\nlD5HukKDKjFjKiTi8+qzsfYTMkT8fECXcxJSim9k0+keSUYSsFSJrwgiQesP\r\nPmtR/JPR85zdfZ0UJ++f7SDFnGeSwEfpmoeVrbgAXWLA9PGmKwSFTeYdAtAe\r\nOslLr5oKSWi6espdgDPpb/1DFtzxiv83vv+wfM0maYwZZ29/dw7Zb2ZQA/JR\r\nwCQ2UdBeDQHVxe+435v6DWyvK/eJDOUYQ7hz4rcgWQ+LiRX47ywSOiK8zU/t\r\nwnX4FJZgfhsqQzetiWb2VP7H0qjeTdDa7G2h9vJxRJTP+LbxQ4oqX8FiJEQT\r\n/mWun2CTK/q3frxqE7oaT3BiIUSvJvww5uQ=\r\n=S2T3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20221223180742.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/276392b36e4eccecd1c33f8a7e0ca57b/chakra-ui-layout-0.0.0-dev-20221223180742.tgz","_integrity":"sha512-QOmlYD2mxMlhRvBupR+6S/lg1i6euzZNcM0XGfcCbTHmj1CC7JPoUIzlIHcv2MttNopni+3HDIzJ+9z0o4rxQQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20221223180742","@chakra-ui/object-utils":"0.0.0-dev-20221223180742","@chakra-ui/shared-utils":"0.0.0-dev-20221223180742","@chakra-ui/react-context":"0.0.0-dev-20221223180742","@chakra-ui/breakpoint-utils":"0.0.0-dev-20221223180742","@chakra-ui/react-children-utils":"0.0.0-dev-20221223180742"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20221223180742"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20221223180742"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20221223180742_1671818923104_0.8479580731511576","host":"s3://npm-registry-packages"}},"2.1.12":{"name":"@chakra-ui/layout","version":"2.1.12","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.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":"b75d45de693aabd4585e62e75d97a1718e0024ec","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.12.tgz","fileCount":114,"integrity":"sha512-iIz9QiS0iB+8NUX5r9TtCbV2JbGzEbKVPiTTtnf48utu12lX4xcdpZJm6jgtgWjvwyo+N+FxyQ8oNff5OqN+Hw==","signatures":[{"sig":"MEQCIDK8PpJC3LHyviWxOLOccoTQNwGJI2ktL0yISanaOw2vAiB5lXUL/b1nB6gYqSIMAjb5YUxTItftO+OxsdtIGEkuzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqZ4YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7Jg//a54chLL9r9rR9n7Z/67TGD3IKLle+Vzg/wwMgxaqwwZ/oteB\r\ntCvsvrnvcyhnpwJUVp+at9PQ6IBNlxMjX87uMLBVyWL6Pp/EEvXKTZaw2x+x\r\nSfBgPM3gdqgyI07p4bghFUM64BqeKxSjCbCgZ/NZAQt6wH4yo2yXbazwExee\r\nAFRg2VVHwo4tAs5pvOxPx6l61/9CU0nyOa8HgnEfT3qKqUS2iiHX9H0BAyCD\r\nBq5w4gtalmubgmqUiNIFbuk50lpe4NeLg0aCFqun6nW9BUtSE+Oa3bRExO6q\r\nv4H1hKPjILPR5kcqV0WixYmAxfR21Qe66++Ums9od+UvCV/ymTGBQyV8fbHO\r\nuAFCS1kN6zzoomfq1v5b0XMin0nVXZxW3rj1PGBGUtOr8bbUJbvPYxiVpKJF\r\n6yh8Mm83k5XwbW4c5j4P7t7Id38ytvacSaGGtW6sLKLZZq9TGgQQFy4LQVbb\r\nndj3/PyXm4LIe8WzKqzpTcSfQhPzUHNePM/wGRJoBCzEVJXIkT1/7mIwAM/H\r\nrSO+Fa7vvl1C3faNlUGfh7Q/GJ4M1BM+HdJ8O7uybg83WxPYbfyRRi4Q0BTT\r\nbgvcEjbiXlVYf8vZm46LmBWPLKB0B6dXCsD3GDHxhN/Mi3jiz7pGqDNucIz6\r\nEiFSWblAGXDZ0Hq8/g8pLCnmnOR2gvXfx7M=\r\n=i754\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.1.12.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/a4907c3e1c18cdf8aab7bfde5d33df9a/chakra-ui-layout-2.1.12.tgz","_integrity":"sha512-iIz9QiS0iB+8NUX5r9TtCbV2JbGzEbKVPiTTtnf48utu12lX4xcdpZJm6jgtgWjvwyo+N+FxyQ8oNff5OqN+Hw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.14","@chakra-ui/object-utils":"2.0.6","@chakra-ui/shared-utils":"2.0.4","@chakra-ui/react-context":"2.0.6","@chakra-ui/breakpoint-utils":"2.0.6","@chakra-ui/react-children-utils":"2.0.5"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.3.6"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.12_1672060440073_0.1566894155191183","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230102093714":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230102093714","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f170fe4d2d47ef6d30cb9b0d470a0218fcf420ed","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230102093714.tgz","fileCount":114,"integrity":"sha512-4saXnmFd1TBOcEjBjgiCoZShH6Swqs597vAB/SgKPjlsVIkAA2y4xjPsjsMOypNSTtJW4vVbO0r8RO8YFm56gw==","signatures":[{"sig":"MEQCIA8gqIAjM2XDuw+gTRyKu6//eYdTf7e7VH7Zuj31xwfrAiBiRgVEJ4UJ6FUUZuHs6cqBWteoPZYrBc867grFErbfJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjsqX6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD7A//cV5xie1W/a+ux9WLsjf0IR3CpXrCrGQhLfZ6znIY0LKee6U8\r\nDe+qJmQl6rB87ZHdEodYfZxy8Y6V9xGtVEliqK9m+Wqsylb8Lidqj0bGQkq7\r\ndDpaGVnef7OLM1DUy8xLL1Fg8X+yIy1cT6lGfzQ4/p1v34HLw4o6J3I7NsKC\r\nw/PPInG8NM4UYOxp5oVNceIhUyLseMW3dzfQOspr2d+mJFWK3MLIdMZRElvU\r\nsYwgciQ+jrDWFayMHBITfd/EeKuXDKXW3AfgkzRDrriFfM8xnvi4CHV0Mbjp\r\nkfVGhFpbrYqjRaHgScu2e+yXIo0yLfKA0eAY2en4tLL+XUq9vKhq67Jy0IdS\r\nQOnQv6QS3u5ghE6OWTyYeYmRwQetriSyEqDYTTTsGWWAPDh+WXPFJd7mllC+\r\npx6LaKsJ19t9nR3KwOtOvtzQHZvg2InO5p861WBizA3j8AwZtxw2WxoYYeNr\r\nIhu5Jj81YVIO9nR0J8Pw26gay5bNrXgai3XQGgBzuLMmcJRhEDnAAkwSve1K\r\nmCWrAVf9WHTLOSOMk3MqCaiB9GdjbWebT1ejG5qWqDV0RUhgIu/qB5nYlAsX\r\n0Hc/zbNQak+uL3xxi0vW8GJVF5zhDj8knwxfdIKCo7B0YImwfDMy06GDPjwN\r\nqGOK4rBu0O+7quMevEi9ha4JA6zl3Dw83Qk=\r\n=4DfK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230102093714.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/cf834f28ee496b2ab06cf8311a091d56/chakra-ui-layout-0.0.0-dev-20230102093714.tgz","_integrity":"sha512-4saXnmFd1TBOcEjBjgiCoZShH6Swqs597vAB/SgKPjlsVIkAA2y4xjPsjsMOypNSTtJW4vVbO0r8RO8YFm56gw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.14","@chakra-ui/object-utils":"0.0.0-dev-20230102093714","@chakra-ui/shared-utils":"2.0.4","@chakra-ui/react-context":"2.0.6","@chakra-ui/breakpoint-utils":"2.0.6","@chakra-ui/react-children-utils":"2.0.5"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230102093714"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230102093714"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230102093714_1672652282254_0.8032050115907683","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230102095417":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230102095417","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d14048349d1664cee181f91e5889133d213933b7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230102095417.tgz","fileCount":114,"integrity":"sha512-l6g6RU0fT3RQ/zWQ2pyFzU6juiiWTRZ/K9bz2YCYG7OBuSCvcRmn/+7eW7JRewMX2GW3UFRgoMIpBPong2BgAg==","signatures":[{"sig":"MEUCIQCrUnGoqBH8QMN/cZoXVnyKmKsn+xDWXr+QtquXRmLaLAIgbMSRJH3nKrgINFTTOODM/CLjBwqx6ygumTCM0hsQdWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjsqnzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWVw/8C6iuPsUlFX9fOJFsRA+3+aDLGmEdO8NlEY12EYlMnIPOmgJR\r\nNxuHk/A6n64Xi6G+yqiVy39jCA7ZiNJSV6PzCdUyjWDXpQdMsUMaMPaEEzIt\r\nu4cSAheerps0C2ox0QXPxGWDVmKrAJv2mf4UnebMwjoRYwWfOooLkAlfJ03C\r\nKG5rCn2/4Fce7Oh3HDYY3dkm63vRex+AxUl5qS3xU0Bxk1lUV0NSbn+Uq2q1\r\nTJyLkQVbXL5/S2DgnYLPfz26VS9g3WiQ+GLb/TjVUSEwW97AICHKdN7wsEKT\r\nQGHaXHIm4fUm4SRhfFA3aF50Ysv41ZNAKRn6RrfgUMwmYZ1TURaR2WSbgToU\r\nf39l6PA2BLF2eqTfwWicIq/RwoEuVfaPV730awtqkLPdYNFUy/8Nfbe2a+tO\r\ngZ1RuyY4+yqnARvARdUPAvgCioV+3M/dE5FLuyonHnYpCed6+V0usKifukob\r\nZBe/DWD83S3b7QGSI0qvY/U2WNlLDt+TAo7dtnTN5yk6DqORwrje5J73v1vO\r\nR195sWxHx8XSg1jqbt1LrGbnXKdoPl09mCjlGhcgICJReaSkWSFkbrnMyyPS\r\nFGiYVZcvb8VSHk8fcJYw4+RJgt+RWwPn4GFnhCHPsZHUESoUg44mrPtOAGF1\r\nhv//xHbnlron4NMdV6MMF06UZkD5xkjcaKc=\r\n=2YRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230102095417.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/a3ce31bc7832603014a3c3de2898e1fc/chakra-ui-layout-0.0.0-dev-20230102095417.tgz","_integrity":"sha512-l6g6RU0fT3RQ/zWQ2pyFzU6juiiWTRZ/K9bz2YCYG7OBuSCvcRmn/+7eW7JRewMX2GW3UFRgoMIpBPong2BgAg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.14","@chakra-ui/object-utils":"0.0.0-dev-20230102095417","@chakra-ui/shared-utils":"2.0.4","@chakra-ui/react-context":"2.0.6","@chakra-ui/breakpoint-utils":"2.0.6","@chakra-ui/react-children-utils":"2.0.5"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230102095417"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230102095417"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230102095417_1672653299266_0.08712832314164176","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230106083209":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230106083209","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b0ce27eebbaea5502fc73b98ae30fd31eac132bc","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230106083209.tgz","fileCount":114,"integrity":"sha512-EJkKVzq+gXzZJj2AI6WcRwUW8c1eljgQ2RT/p0ju/OALqqPxnGyY68qOoU9rM0J60w1EJ4u/RVnL5NYfK7lxMg==","signatures":[{"sig":"MEQCIE20OYrJub7C/Bvm0kq2/gGCCA6z+4+CTPmrmhP3ZwOoAiBSin78hfOE2pQb4LYgqaCbmpvuuaCl8M8m/PdNGldoUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjt9zCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqryA/+MksORok2FY9x8deQcCWRGlXC64RKNAMqjuilj5LemEBZ6HKY\r\n0kl7M/ujcYf+/xKkCX+L5/h1FcK27Zzvabglm5iRcShs2lUJFBeZ1fUXpb7z\r\nSxT5sI2y9kygN2AR0zN8sfR9WN4H4LQFxhPmk1+lzOvwpDqgmBoNUo7ku+3v\r\nG76H27JuDbWPinMA0DqAcKc8/VV0sS5WSByRzaySs97WXE0kHkyKtzahJTrE\r\niIADBX2PKrdRxewKEikBSjK4H8rKg/9dg2fOBYl3ToZeceQiJwChi3FOMAcm\r\n4q1HDv7gOvHG0i2ktRCqbTffv6NEr/iB0hC+RIiXxJKalnTIIYUpfFQCJZCD\r\nYIRtnQYS1gPKN8bTXycualN3cfdnDcWbYOhN7J4KWsptfEvfNhPktjY9Bwkh\r\nVNARSBENgR9I6d+xpnypSvakHBvm9WqEUfnbQRETDcuc6jFPq7ZUNB/wvv1r\r\n3fD2zKj8FHEErRU5/87xk8nFS5qMu0+B1EHODvdVFe0/RNEwEKL5EkKc5O0D\r\n233mP5e2AEtbjUuihluPmmT3BAo82W55BABtMGW0jazwQeAbb/y84UoR4vvA\r\nreZ2Dne45YfDhwTAL5g5QDG2awr5CY8574ZGIA59bUpeFlahCNi/Ad1uIZzY\r\nl1bCOcPHIoc1kVb1rSMx7b+qNnbQa0cPFXk=\r\n=IfzI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230106083209.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/18e981a7cfc52ccd16143127970d8c5d/chakra-ui-layout-0.0.0-dev-20230106083209.tgz","_integrity":"sha512-EJkKVzq+gXzZJj2AI6WcRwUW8c1eljgQ2RT/p0ju/OALqqPxnGyY68qOoU9rM0J60w1EJ4u/RVnL5NYfK7lxMg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230106083209","@chakra-ui/object-utils":"0.0.0-dev-20230106083209","@chakra-ui/shared-utils":"2.0.4","@chakra-ui/react-context":"2.0.6","@chakra-ui/breakpoint-utils":"2.0.6","@chakra-ui/react-children-utils":"2.0.5"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230106083209"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230106083209"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230106083209_1672993985820_0.3528629127436329","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230111055325":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230111055325","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"77376a19c3496620f8367a8ff27fb774a4b65fe3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230111055325.tgz","fileCount":114,"integrity":"sha512-S7Id7PGUkD2eBl36/39d/mj4chspGmkY2ut3b2IxJ7fU59k6wjuQJ2IO1tYGGy/qhHYvQcTcri8MK+n+oyEJbA==","signatures":[{"sig":"MEYCIQDvCBtWTRlxzyEsn9dNEtOU5+RLtQqR4TQFdSXSpEYLgAIhAIaUFoMPdJGLuup4QbqttJHGhrTPazSdrRRlvTgu6oO5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvk8HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSeA//U867T5Zsu8StUgDCk+3mTj/l7uwSZnDjPOPsUOfIVXa43S+s\r\npBdIk1IoJ584RY97co/lJWxu8YR4JppRmbxy4n9cVzM1/OPF24/w3V1r4udQ\r\ntBn278Bi6xYGZRrIGK5lG6QPzd7s3AKtYTPqbAKtO21RnvIiFMb0qOZjzxHl\r\n4gGZwGTFv56F6z/X+tY0kpkbdhmGfP85ONMBk9yTUH57kVBGc8itYUJdsykB\r\nSttuTO49yFbTOfenQuB0G1D/hi0zgWBH46tDGxa7w/9IiPn1XqsX8vCQEZOL\r\nzj/igUPj5yO1iLKz3/K7nC2NOugn8sWiq4ZTmXtzJrMQTDu7oLszoL7fMGcR\r\n6lQJc66DHilIJNjV+diwAXJVa7WOQu2o8PwM7Ex9Xr2JQdLRhn1kMEHC1ASz\r\nHkDl3IvoVYhVI6jTGCFstpVXuzWYOjQfZo08+mebc6bTK/lgjKb7mEyj1FOv\r\n+FjYbFJ1584y9Pch/hduHJ6bXNCkYnU00EOhyMzr6qU5odENVxtlf4r/+ykT\r\nWrY5OXpX76wdf97uWsSYF2MoLrptmtJo/L7V/Iep6l981AAUHAIfX+l9OZYL\r\nFYz7ZLu4o9FI1LkhIVwBNt75N3GI7/8MXehirj5OlAmjbSnWLuytP55bbNWZ\r\nB6uroZ2SVdCLRyHxfkLpRjYQKAAlYRkJuXg=\r\n=NmEk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230111055325.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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/b4619e92a7fbf94027cefd7606465119/chakra-ui-layout-0.0.0-dev-20230111055325.tgz","_integrity":"sha512-S7Id7PGUkD2eBl36/39d/mj4chspGmkY2ut3b2IxJ7fU59k6wjuQJ2IO1tYGGy/qhHYvQcTcri8MK+n+oyEJbA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230111055325","@chakra-ui/object-utils":"0.0.0-dev-20230111055325","@chakra-ui/shared-utils":"2.0.4","@chakra-ui/react-context":"2.0.6","@chakra-ui/breakpoint-utils":"2.0.6","@chakra-ui/react-children-utils":"2.0.5"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230111055325"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230111055325"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230111055325_1673416455262_0.7112896150180199","host":"s3://npm-registry-packages"}},"2.1.13":{"name":"@chakra-ui/layout","version":"2.1.13","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.13","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d9dfecf28fd73082a7560831caa5a189fd22eaaa","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.13.tgz","fileCount":114,"integrity":"sha512-Lqo1UnvSJep6AXEjmuVApeT+dt/v0bdeNxT8KuA4M46i7lgrv8I91yAbdoyxlm42dM9AQjHVzYOJrlfO3krDtw==","signatures":[{"sig":"MEUCIG4I9ATS4oeGPW+CavccUfitJSI7YsEa80E/URNmnlX2AiEAxQazPS+anYpLDysnuFP1+WYBUhN1UZ9T5Y6hMorkCts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvmXZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3Ng//fA1DmIbWvu9x9sfrXPQ3yeSgOfLeXWcRSXT4xIghxJDTQUFG\r\nGnjvI/xfcsUwEbGHuLYVefpFWXmJGz2hmt+P+9h5L0fZAP/uq8K5elYx/p4W\r\nW4YJTHhtN79WqiSzzmdi76TS3luJGRwSjEiNOM7egrC/xkeE6+8JE7+ntOIZ\r\n9OIEZn0QeO3P5m41UceiQFuV3rE1mrqzGp0Y91bJy93PIdcALtwsQ2LEsrY8\r\npSHCCWszOv61TDT/FRL5Lof8dzNnQ56/CkcmgA0UFzHYv0ZLaWxUMrbpjRuq\r\nZ1nEIHNCF4ms5j3Nzmdu1veHfctzlNNtuRv2fGLKDM8yLbYfgQ1gV99OqPmA\r\nuLPmNhO3DBmC/ThBlW1RMgwT870cuzE36e6YvOkxOh3QYSYaVSw79qBpX3sk\r\nXzK4O4OK9v6Xs8SLgnjPRNhs1NrBs78LO/RLVmeTQcB0Nmkf65CANMhmhz5Z\r\na82kVQYBP6K9nBm+Pzg7AokLhX2qrLOcRyKvavR+QBCWjEj9xhQ38pQyqnZ0\r\nOS+8BZP0hmmYfTwuAOnUP4Ws/s9Pa+GAD7+2YOIBS1gNK3JPhqHYwEkLORRw\r\nMHXx8SiUIyyN+M+ociZIeDMo9C7qWotag3nW5KPBJSxu2Tv5BxSlY5QKIDLm\r\nvmeQjIok2e98Mink3/kfcW7AQqnL/TBn75E=\r\n=bRNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.1.13.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/49c102118fed1641ab53c3176800a914/chakra-ui-layout-2.1.13.tgz","_integrity":"sha512-Lqo1UnvSJep6AXEjmuVApeT+dt/v0bdeNxT8KuA4M46i7lgrv8I91yAbdoyxlm42dM9AQjHVzYOJrlfO3krDtw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"3.0.15","@chakra-ui/object-utils":"2.0.7","@chakra-ui/shared-utils":"2.0.4","@chakra-ui/react-context":"2.0.6","@chakra-ui/breakpoint-utils":"2.0.6","@chakra-ui/react-children-utils":"2.0.5"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.3.8"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.13_1673422297783_0.31824664967780647","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230111211417":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230111211417","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c48e7b57947349575f3fccca907752c7a32334f0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230111211417.tgz","fileCount":114,"integrity":"sha512-PtxbPvYS2ukEtGEExB3u3HwrEelxwWvhuHRqguOnCo4UGZVbI1HNl4dtzM+bWlu79OR4fiv87Xz26sUN3lAbCQ==","signatures":[{"sig":"MEUCIQCq014TrmWRIzV81Y0dE83AjEZG7y87+Bnnc77iVPkLMAIgfp2ran8jZI+eyQMzu31EKIWmPLE5yeFayt2ouCxZEAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvybsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6rg/9E/uetwEJ4zvGzcaRm0gM1lROobC7KqpZ21V+yYrjrXePn+Bh\r\naP7/H4IrpEmNEfIXLSIYHDGl7keXqT40WHqHm0RwPiXTjxSk024v1cBV0w+r\r\n1b79+wTG5WdMGN6aSHwQP/SaYG/bh56FnmnnS5i3auvfNdMtbtjM22Fga6nH\r\nWKrWRuJDsDrVBpciIg7nG5g/LuhfMx677vJMj/tRwtG3DGgDkqyoXXdQTneS\r\nec69CEke965lc6ZiQahVIixGcTXXMpXmZAvIOU/w5KQcslbMUwBunCJf0eBI\r\nnt8XpzaTFT/L/ml1vQ70NaA5hc6YsBYlas8dSQTxsNizlQoRsCAnyFb0V+pq\r\nBHshOpmJ8KHOYeP3/ry2PWL1wwRVYKcs97EAI/lUevnlR5EtUn1ZRQpvHdfH\r\nwoAIjQMH4YmUCHyI7/kZ+vj8rAspmzzSe6cPonbD1Vb6mxoWTgvn5lqrTTLV\r\nbRyVMSuMjkIaen8HLM4gCFgqrStswm0uPX3oBZhhBOnbX0cKWEnrGYuYZ6Ll\r\nAhCcbly4ulFleIIbYC3Ei6Q/IEFCThkzbIzvP0e6zWw4NuI65bTFccmsJP9T\r\nige8TY+jA8fuP5ZmW5OVhzz4DueZjcrR3SSsAGy9m2++jEODEcvwYSE3Qoxe\r\nGjK/vPeGfzAPZbabbLij6YJRg9wlEkA6NiM=\r\n=U4UO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230111211417.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/59c9001e61d56b8cb23393da1f54b064/chakra-ui-layout-0.0.0-dev-20230111211417.tgz","_integrity":"sha512-PtxbPvYS2ukEtGEExB3u3HwrEelxwWvhuHRqguOnCo4UGZVbI1HNl4dtzM+bWlu79OR4fiv87Xz26sUN3lAbCQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230111211417","@chakra-ui/object-utils":"0.0.0-dev-20230111211417","@chakra-ui/shared-utils":"0.0.0-dev-20230111211417","@chakra-ui/react-context":"0.0.0-dev-20230111211417","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230111211417","@chakra-ui/react-children-utils":"0.0.0-dev-20230111211417"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230111211417"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230111211417"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230111211417_1673471724610_0.34561353745952816","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112113621":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230112113621","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"8bb01a6df83c5fbd97460fd4b8ed13d15f66ac77","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230112113621.tgz","fileCount":114,"integrity":"sha512-cjTPNHmpPOhY+BAUw8Ucfu8+FqOaauNeLqg3yVTjsZZ9uP3dOeEdyDTqQYkyTPCw41gDtFw6yWoFPks7Fqz4dg==","signatures":[{"sig":"MEQCICOX0gaYmewqmxDL3Gbnx4zKaOlSlP4XgCM8Jogd282tAiArqAkAn0XdAOUzwcTBOCS4NYGUiVpeXEYXevV8KZaqOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv/ECACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+JBAAia93Mx8pXFx6HRUNoSLAGHOiFk6bLH/2z3XNofZTLFeZTpUz\r\nouJdOOxK2d8yowJzHistc0H+Vu09/6asmUsxhE4FkgFvhfATSRhpp5cHimJ+\r\noywhSbJ6mnhAra4dGmulKy+MNTf6/HCm/RV3EHVC45m/vst3y7YRkYFNKMQ8\r\n3EEb5SSe4n8g+xLI85Wlnl7RmTVj8SG6gq7rRv3tk48IPF/q23d1jENQ+9ZM\r\nkquGQ93JB9j1Zhg81HNWM8UbAW6qmez/rbyKvjbMj9Mkjbt1bCM0HFWzX3im\r\nKE+P6eA0FSMmjSWsxUiGbxR6v2Cjtfa/+j+qdDxgZvz4+QorOjE7ly1QpQry\r\n6/QqRS4xIWElzpyZNaeZ1hA/N4/2iCAivk9RwljygIyL69K9sKzBtVF0qgRO\r\ndVlSPAY5sjj2y8S34KG5HrowG1SGbaxcsjFPywKpRneo3RU8XtB2BrAXpYYn\r\nyIoKivmwcZh6bU4GX7rHr3UbSbv3EtukF+A4132Ig26pxqLv/UXTtWQQLo9C\r\n3xX9+AJpZOKapi6gOK0qilSuJ74TwbPRq0g7zChyvOFSfrZhi254Jtf5RtbP\r\nKIefEpq6xoOzhYi1y6CI5fG4HmBkDxsiiuImNLsvMJBsnqY72+cYO21BXl6I\r\ng7ozHfTlYKT4uWeAuWQq3Vxwh286rYZnUXM=\r\n=CVd+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230112113621.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b047de4cb0b9946dd61673e81450533d/chakra-ui-layout-0.0.0-dev-20230112113621.tgz","_integrity":"sha512-cjTPNHmpPOhY+BAUw8Ucfu8+FqOaauNeLqg3yVTjsZZ9uP3dOeEdyDTqQYkyTPCw41gDtFw6yWoFPks7Fqz4dg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.2","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230112113621","@chakra-ui/object-utils":"0.0.0-dev-20230112113621","@chakra-ui/shared-utils":"0.0.0-dev-20230112113621","@chakra-ui/react-context":"0.0.0-dev-20230112113621","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230112113621","@chakra-ui/react-children-utils":"0.0.0-dev-20230112113621"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230112113621"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230112113621"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230112113621_1673523458744_0.19161850340996556","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112141201":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230112141201","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f2525c1bb6f6ece7ea43ad791943b6018170d01c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230112141201.tgz","fileCount":114,"integrity":"sha512-t4klvGrM9xoXJ3Nfw+yhU//ohJQn6hv9cNlZVbO6O/ABUWAhB9wbxDskqF6W1pPU+Z+VmJVgAb6F7KtPvi2EVQ==","signatures":[{"sig":"MEUCIHM6+/3Hlk1Bj8jZscaBlEu42ZmM1MWvYyKcLSogfJWOAiEAkPI/nDK4CGLVoxp6TLNMZhen+sZPnGJFxdH878vd08o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBWNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfJg//cP6GRViLQA2c84yfCGLWBEaWd0KFcc9PsKmBji7KRvcb6ymv\r\neR26gAHWCBv2VoFHDwCslRD2RU16f7npnj7dA0MlL4I7jcxxEtqUALOVsXrS\r\nRhOMmx74Q7dY39hZyRFX+akcl7Zj5hPYY+DQKfThVDMPI98XQJG7LkmU4soq\r\nw0Oty+JCSG6B3uGVaWi5A/+LxvZiO/GtA+HUqkoIJ9E8yf5SOXcuDkiR9DFN\r\n/q9Xy55qyGrKVhiyrdXsNB60mMHcyqzYtey/RZ3Q4RFE5p9wYyLBZitYkA6a\r\n6yboBvl4nrPzTeHruCE64vO4+OGZbkY2MnKaY7wMCfCm9QmmoMZ0Tc/x0pAE\r\n2QcGYERHPEB33B6+Ak/bwDh+PpK423dHDxDedKfIZXbCvBS0EkqjPNq7w84x\r\nJ8jfTMzQ07/aDTs6lRmiMc79NMb66UUhNGH8YLsYs2qtRenj1U7Z0+dUiAsx\r\ngzuQyCqjxCOrFcxL1ZsdTDvjBGw7nk2DdkNrNmb1HnawuKzCAYw69W2umbxe\r\nNlKbf+LfpF42N1p4vQWb4HvAb2rT05K5bu17kbkGSgsnk2QNw7SLJBn/576M\r\nqEbTCsuUkjjO7o+S3dzYZtxr5EypsH5MlBi6lh1fdNVkFFSLqiAYSa+/enRv\r\niiE7NIISfXKBN94bO/laWpNSYs7bCazi/m0=\r\n=NjR1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230112141201.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/cd7408d258ed7f6062f2d1d2e7379535/chakra-ui-layout-0.0.0-dev-20230112141201.tgz","_integrity":"sha512-t4klvGrM9xoXJ3Nfw+yhU//ohJQn6hv9cNlZVbO6O/ABUWAhB9wbxDskqF6W1pPU+Z+VmJVgAb6F7KtPvi2EVQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230112141201","@chakra-ui/object-utils":"0.0.0-dev-20230112141201","@chakra-ui/shared-utils":"0.0.0-dev-20230112141201","@chakra-ui/react-context":"0.0.0-dev-20230112141201","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230112141201","@chakra-ui/react-children-utils":"0.0.0-dev-20230112141201"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230112141201"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230112141201"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230112141201_1673532812864_0.5522680493892433","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112143332":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230112143332","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c6eaa820e5d3a4400ac44e0de6dc34ebec9baf8d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230112143332.tgz","fileCount":114,"integrity":"sha512-K+zlzEmVhZCFz4eBiw/wxtkKAZm5JDeHYhCGLYGuDhgiHGSYfeTQdxH8TE7dlVTHnI7fpjM/19NDAQBy1pv8SQ==","signatures":[{"sig":"MEYCIQCE0C6JVLPK4LqTWcWwdcCmGfTZq8L3a4jY66AY57SLIwIhAIfMSQRJH1IWtp+LOqJySHgrfNyPKn1b2Xt7PKE4JQdK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBqGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotWA//dc06tH95jkwtkYiSXipm4AfzLpjR1mNr52LwJ3EJxKSciz2H\r\nh6HUo7ac1jXN7jYJokG5xf4d0nXQzVJMqjuKwg1QqaIazkOfKLf75Tycb0Hm\r\nvAzQd3H+s8V9YDF1hwBR4hP16HdGkASIfvdmAxTwB/PGK/t3fUQ2GTtM9Mdt\r\ny4syVxY81bafXk8y9Jmk1ciUDvJq7SKU4DgUu9cW4FPcLtcRESWFU6aW2FVU\r\nFDqzYrHyglQstFKuJiDZEHPmGuDYjS9G+ZayGNwXFOx8o+uvicXDcLtYfhkZ\r\nNmC5uMq+qrXUr7rf9OUnjeCt2dXIWGVHoaN1BSeKCVp71LsU2dU1Gqqezmse\r\nLpiu6kNtOFDewGfwOHVuTaxyzcBoRZ2M4fKiF5vh3gHqU4I4ln2nkW4D87uu\r\nvXmGsVtOlIJWNlvRrppg2BWaAT8UlCFkOKkPEgS9QiNliARbtg/MRdFGQDbL\r\nSW2bC93E6IQiC+JZhqQ4AktZZkPTyApStGHAMBNfxRzX/U+gLyBITZMRJoJy\r\nzFNqc+SltSrASV6ATowNzVG513CCQxTn3gkG7HgXAKjfV1gT0hXZ/jDRcYJt\r\nbI5hA9oRxbJs0NceUChDkib/BZiY1HPZoV+fC8i4J/0UVt4IEMhOIaFygNvH\r\nYGLezvS3V+OQ41mcnthEa30eoMkO/JBwJOU=\r\n=GT02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230112143332.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a14f20d5d8d84438d3ee53a6ff40f038/chakra-ui-layout-0.0.0-dev-20230112143332.tgz","_integrity":"sha512-K+zlzEmVhZCFz4eBiw/wxtkKAZm5JDeHYhCGLYGuDhgiHGSYfeTQdxH8TE7dlVTHnI7fpjM/19NDAQBy1pv8SQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230112143332","@chakra-ui/object-utils":"0.0.0-dev-20230112143332","@chakra-ui/shared-utils":"0.0.0-dev-20230112143332","@chakra-ui/react-context":"0.0.0-dev-20230112143332","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230112143332","@chakra-ui/react-children-utils":"0.0.0-dev-20230112143332"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230112143332"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230112143332"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230112143332_1673534086134_0.1850002094584855","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112145104":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230112145104","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"fa2701e3c0e741aa89d942c0b3e27e9b8728ceb5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230112145104.tgz","fileCount":114,"integrity":"sha512-KHUvJ9aieJWNs+F5b+C6Ube+6jUkzZuzYRBUqhdKM676w2vToK/HqJvY48UO+OG1zQcGfzgPeYfoKyDZzff6Fw==","signatures":[{"sig":"MEUCIGMQt1VU/Dv36mEnBk9zKSMPELtsPRND5aG9auVZ6pruAiEAwJ2s10T4bGu/V8YlFqDFzSPcfV+iXZoK+yfgX1HvOyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwB6XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpySRAAgOATxoj7dwK3MFdDi6hAKVbnrVmiZQ5XKUIcgcOY/J6pDgHc\r\ndUEKv1LQNoTPq1BD0fKDT/bQ7iUYHPNn5uCWvZNILYPnS080AQsWtmnc3tj1\r\nHAmziaNGapSjsMflFvOaOYpdnxOYYnuuvWkqie3co+MqZOFg3pQChrj+V8Oo\r\nPpnf17autqX6/y8ZeRnUl9vYZmXqeojcYN+m+v8XwCEqMm7qfeOVS2PDDsgE\r\ndj2WUgnvEC6NCVXmMLTU9lzFeSxcn1DDGgbOsAfdMPjsHFfyzxje+W1Babea\r\nnFAOPuSn1I12ll6BPpfb3fdZ+s3S46NmSAeI07tKJa6VD98yYo+t7SFVKhqE\r\nvHfmS/aFDpA4OjDolNCtr6gOqzEDfqghCQVduuU7QXz3iasndq0KXhE78tJ6\r\nVcz/cks/ZSY5OXn1HXdqZRB3PCxRPh9BnRTCMq12XNBVgaNcmyJU+LgDSMAe\r\n6kWcWGXEwqaVHhjEyMMzYom2ItNPdMMkj6AauzZfPqUmaKxDvZBiYW1VAjb1\r\nj2/xc/WPiLZoxgBPQBwVlAVINU2BwZoAzXNcTALv6gC+96mAoJTOZRvwoAvb\r\nP1klyBfQeKzl1OnwLxwPPlcYwDsrjPI1QI+ZN/W9zh9IKdlv1J+Ole8k9BmN\r\noOo00goppISxk8YKBkWLgh5u+5YxdRXjlLY=\r\n=Y3oI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230112145104.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8480820191953e8600218896aed86207/chakra-ui-layout-0.0.0-dev-20230112145104.tgz","_integrity":"sha512-KHUvJ9aieJWNs+F5b+C6Ube+6jUkzZuzYRBUqhdKM676w2vToK/HqJvY48UO+OG1zQcGfzgPeYfoKyDZzff6Fw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230112145104","@chakra-ui/object-utils":"0.0.0-dev-20230112145104","@chakra-ui/shared-utils":"0.0.0-dev-20230112145104","@chakra-ui/react-context":"0.0.0-dev-20230112145104","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230112145104","@chakra-ui/react-children-utils":"0.0.0-dev-20230112145104"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230112145104"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230112145104"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230112145104_1673535127740_0.04575715582572859","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112152756":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230112152756","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1fdbe58d4a752d6b5a64d2951552e7cf88634fc2","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230112152756.tgz","fileCount":114,"integrity":"sha512-G4rkFTNWoQR9mynf2IAuc+1/ST3xcBPpq63we34wo6tJsQas2ATPebd06qmFMH0W6B5656ydWDVPzPUeCspYJg==","signatures":[{"sig":"MEUCIQDg/WiYaYBkREijA4+JrHt2rJ6gLKvRhM49LjLdtJgD4AIgRwv8LKtFdllb36qr4poRbLpsTp0+1CiiJtqLHFkasg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwCdHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE+w/8Cp5AzvNuQT5QXfrrNoIJZNjmSHP2mtmjbE0NdL8KI5wMa+b/\r\nYZ36cQpN7hirjpUIgSXfAGkbn6DO35sC0kevOzSF41DlEgAy+TiOgyI6Ydjd\r\n3X9meZugAj1fpVl0kY5slnwVsjYlfkJHaPHlWa7MpX2StYAkRrYRVE/L0IJn\r\nGROV863Qi22gbgQ4eDPh9W2bvf/koxXKcN8u9DgEiheqhULxL/pRKL20V0ip\r\nXcsHqf7uZFAFjjjJvIxhOmHoYcWmcfCn6hVUWMMile1Vpz/+jf8gUn10BrRY\r\n94P6TRxJpa/7wdmKQw7Hfjaz7YLaaouOaQPyAtP2Iptez59lMCIEnY4y/8qg\r\nrGmzrlgKQYIFsg2d9ZRXt9pLy3dEVbqA1vJ/67ULI1xr105k5/DTsnfLJv1B\r\nYSCGc2CRWFtmwoZr4b8HVeujFbUfJFusi3KxRatWxWodj4nVGuyUdTXOBDj6\r\n6R51PY1ViKnEDv7P+TFF6RlFTfutgj2oNtvHc+MpG9oxZue7n8VncQhMszIk\r\nA374dS0oq9GsYx4gtwl3QjZVRmH9jEefc9lg9XOpCu4AI6b/O8hRhPZufBJM\r\ntrKi8iPxd1o/BDHCsYwsGz0TgJmhk3DX+4qbQHmhwvBAsgX/aJ/8J3SUEu53\r\nKU2Afp3znc5lUgUQ2HPrL2hKGqfWxC0eBT8=\r\n=akx9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230112152756.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a585e4f58653c7e081e885af41427397/chakra-ui-layout-0.0.0-dev-20230112152756.tgz","_integrity":"sha512-G4rkFTNWoQR9mynf2IAuc+1/ST3xcBPpq63we34wo6tJsQas2ATPebd06qmFMH0W6B5656ydWDVPzPUeCspYJg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230112152756","@chakra-ui/object-utils":"0.0.0-dev-20230112152756","@chakra-ui/shared-utils":"0.0.0-dev-20230112152756","@chakra-ui/react-context":"0.0.0-dev-20230112152756","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230112152756","@chakra-ui/react-children-utils":"0.0.0-dev-20230112152756"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230112152756"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230112152756"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230112152756_1673537351514_0.20005187951403092","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112154520":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230112154520","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"d9f29cbf21cf6cce935fc8429033761c57127af1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230112154520.tgz","fileCount":114,"integrity":"sha512-4PuhHmOYxC9ibKfHoMfl0SUbX6Spyai5CvePXEpFCgWSbH9df+8D/tgSdfh8Vu6N7lCLBOipJBtdrhj+VjKm/g==","signatures":[{"sig":"MEQCIFftByXl7nRPAq3YbRrKOC4ci2Pw2f7wzzsbe9bn3RCmAiBP+UISCQqdvbvm4wYiL94d5rouds+7NXITZ7Hhr6qj1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwCtSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpytRAAnPxorFZUx7VXQzAbb5bP95yrJE5cAyYYuUlARrmQqQ2L3enL\r\n8bs9F9Cot6ngye8xz7LlzQ2AhJbg7LCewTVchOiXkx7AcEm4roZUAd40HSrV\r\noaeY71Cv/vmVW9xydjrbH13huA9zIlllqpz1VTon1jvv+VwS8R0zWNsPiftj\r\nBIvF0l77sZyZibkXfRBefBp+ggwwmgEaUbp15mZ3lgXRxtZnGKTR4dMvAlB8\r\n4rJzgIsuqepTSDAip3rNvskQEgpIN2TrfjA2/ChfSIN+oarZPZIQP9f0I2dz\r\nsCmkuJZPsfSkY7/oLW/35KDhzXRF5mYVAxFEZ1LEC+d8dUKACqMKzeLq0cp8\r\nrwnu16xOSyonEyjQU8M7pB4z+6WO/nBBUql9FhrfWO3locuVqsWrFRbHwxM9\r\nbe/xd8ihhh2JqOSTkRCbgm6inYhZrnzRvLb7Ha8rWfwxeRSzULun+RKv6OYT\r\nMPtgZE16+K1+jOXhrc3l0cPSoQZpX66ZC2TagaK/gAnyc5TQ12cTm0Bfug7/\r\nd34MkELginRVuebyDHHFYhBYTXQi+GZkljLDUidrlTvQ7A9PIvFwlFMGsC7q\r\nWZZuXI2dmO7BycoJnrpy7LbYJe+pKjd9xvdMaKf7NiILSEKaa9DJ0EsKOKKQ\r\nBSzdwL2b+NiACcvCR1V91UtRfwSE0C1WmuQ=\r\n=ukLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230112154520.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c4fce9ab37b8e268f9f6e9c06d0b796c/chakra-ui-layout-0.0.0-dev-20230112154520.tgz","_integrity":"sha512-4PuhHmOYxC9ibKfHoMfl0SUbX6Spyai5CvePXEpFCgWSbH9df+8D/tgSdfh8Vu6N7lCLBOipJBtdrhj+VjKm/g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230112154520","@chakra-ui/object-utils":"0.0.0-dev-20230112154520","@chakra-ui/shared-utils":"0.0.0-dev-20230112154520","@chakra-ui/react-context":"0.0.0-dev-20230112154520","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230112154520","@chakra-ui/react-children-utils":"0.0.0-dev-20230112154520"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230112154520"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230112154520"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230112154520_1673538386482_0.23681698167201048","host":"s3://npm-registry-packages"}},"2.1.14":{"name":"@chakra-ui/layout","version":"2.1.14","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.14","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"612f1a6b3d114834b8b86ae231f50067fe37236b","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.14.tgz","fileCount":114,"integrity":"sha512-RL8W684+DAw4dwnuGR5KtpDUhXKPjGaZRyi/tupli2iipQx8R27046WrS4/6DkYzok10vgMQLwvwfkk0Yn0u7g==","signatures":[{"sig":"MEUCIQCNo2OtQ9L2GP6Nk5mXPD1O2XGZbF9ejkxl8Ebuy0ZCUgIgPpJPs16z9qEECtg388PqOKHv8dnWgZSPPvqVQVIXzao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwC/lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr2hAAoGfLxzYdagsPQeTxPpbm4kO/uknusCiY+kqMaPcq8jw9Yukd\r\nvMveRtO4u750f9WONv7pacY7H8pHNslOib7bgk31aSgzVGaG8tgAcrCzRlSQ\r\nUE7AwDojDHcRGKC+8NhcbAdQMSH3jZm8Xx7NM1/xOiGMDxQs5Z8Bnt5o35RL\r\nWOKoZubiQNpvA19aeaU8uuVr2BATxlPzVRRINICZT0glfOovBxEy/+s/fHf4\r\noJjI+uI5Z9ILiZPwpPO7c4xdVXK28kTv7nMiqGQ7WVih7xbkQ2IRbXd3zyZp\r\nKm/fA3Rugf3Y6cxrkO8S2WvADadWLp5zssblPOjE5auJWNSPQnofa2Jd+8+Q\r\nQ25Tgu2VudEpNzBqjl1F4qarzpK/RGurO+aopwqOb28kGspc1Sn1D+UE0hxk\r\nOemY9CLRJQ84j4m1XRRpLq7MDscfDebJ91omwbZqNAPBSo4+Ru4pXRiCwLuk\r\nIadVkMSXLpaoBz9K0oO2njp5DikZ5OOE5bc+d+i9Dx5Wtr8fuanMWXsNa+es\r\nqVk6E2pAsiB6Pv3rwKGyQa1eSJz51uKtKBqRPCR2NYKeGsw9Wo/GdjXl5cja\r\n1JQ+bGc233sb0tGuH0kysgPHo9u61g8M6aAZg9tYY4OyddkexVibr53Yhlbt\r\nThsTttvwg2r6PHHSxF85x84brqdPeRSS4is=\r\n=aBqw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.1.14.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/86c9cf86f7e1b0daea505456a7cefe72/chakra-ui-layout-2.1.14.tgz","_integrity":"sha512-RL8W684+DAw4dwnuGR5KtpDUhXKPjGaZRyi/tupli2iipQx8R27046WrS4/6DkYzok10vgMQLwvwfkk0Yn0u7g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"2.0.7","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.4.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.14_1673539556958_0.78472054143694","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230116120206":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230116120206","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20230116120206","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"61b00647beb7969f6f0bff40481a9c3766d983c7","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230116120206.tgz","fileCount":114,"integrity":"sha512-7OL5hKFSPb0HVvuJAPfMkXSfAJcbmYVBhY2ZGovdiCZKpp49mnA3D+3N52U7zLkWNB4FTTXAHmMv64SvRzp7fA==","signatures":[{"sig":"MEUCIE+0OeIpvzpcwTGd/cOz0SF+lwFFod5EcAYH6lVOgt5BAiEAsLgfzquTgwKZKZk8iFppk8dnE4DTgMzMfBGmRHmNB54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxTz1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3gBAAkhb5lVrGQyImZXyE+xsEEoWkvcj/iAUVuy15mErCMO0Epqk+\r\nGeVA+sb+rTBnyq1Hx5TgHcrDGu4gxnsio6lTv4Z49O2l8f+QO4vKsCcJvAY3\r\naCi6huqqwhSUDeKrqCr97uZuCZ49DQHA/OUZhe/TRjwTGdmpExTwzs2YR0GU\r\n8JzR+IPDmruLW4jeajkDYCsC8PTn9qy+PNto+W2hmeoBRJ6f+F7oFmE+PL0C\r\n1QVOXAYLNzNG+7qodnAULJV63ZNDverNXjfMG3rfpKFcp3R3WL8mDPEjO7bN\r\nThkmysixxQMjIurlGGEnkG6RO3qr3JpS9ocz6ETUp9bt2sbXsBTfdXCy0+HV\r\ne30h6N1Kjb4uAzBIFOb+0ROUZncFeVN6rwvLxxWJrmrymKQEBanJGwLfC0Vn\r\nzsVOZw6iKOloNXgWhO4qMa8qd0V2TARuXMJGpFSVB2gYJCD6F/y8wi2cG54j\r\n/B+CzEWYwfp5lktZSBeln0JIbDt9eGjjG0OKsJ2BlIozQaL8IxE3XpPTp/wq\r\nuiOdqmygidE24g2YNAnKB02XoGJGuJmlGL9v1dH46mN/nkD2yZG0rsoqUfVb\r\ndh2oRIDxTap8TpV1jUgerb/qzOaBHgL3Jl29WUTKmXgIU2fYwQnNrEw1xEw6\r\nWHQIO/MkmvYwoWGpixvmLFum41P8fI77uyc=\r\n=L3xN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230116120206.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c51cdc742563db469ea0d5902195fc6d/chakra-ui-layout-0.0.0-dev-20230116120206.tgz","_integrity":"sha512-7OL5hKFSPb0HVvuJAPfMkXSfAJcbmYVBhY2ZGovdiCZKpp49mnA3D+3N52U7zLkWNB4FTTXAHmMv64SvRzp7fA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"2.0.7","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.4.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230116120206_1673870581613_0.585625824438835","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230116122157":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230116122157","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20230116122157","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7be7c5e4be448e12614386e6372d6c4312e0f055","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230116122157.tgz","fileCount":114,"integrity":"sha512-BRJdt9sPoK/8gQIZyA5K/UOCyGUGW3uujNMxWKEIolI8Bed2ZwDg2aS1hz3hh7vcxOJvvGmX+a3Rs3ve6B+GUg==","signatures":[{"sig":"MEUCIQCZas04DRPtbQQQ6qXrnJ3T0U+rOvw79kqhK/PW3Gfy6wIgV78We6LUcHMv2v0GlQwJDS68mucK+jfNVvNOzIwCIuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxUGoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLyhAAlFd/ML6H1BT+tSkMcy8pclt6uObd+Qd69o4RahbrK8kn0yEK\r\nLFWvpa83WuvAQDVLmuULjN5HmXEzEvNydCzS+qaGW+ljR2N4gGiobbU25NuT\r\nSnNAsaF7jrvPWzx6DnG0aobTjL0uvSlBTUxsQyIz8vLRwaRu6A5XzoZzQsoU\r\nZ6Cq28vn23hCGTXSQnQ7i7KvkibuvLa+0MfyLcNJL+EI0vfhGQ5Fnh2axSFe\r\nfVrUPJ/rC2z8x8gka7vI3sPaFnLRLlJGLJph1y8vXCk2MuQoUgK6/fVPP8m5\r\n/JaxQcZFgAvsr0XYr8/rHBfIwmUuqCebib34g6zBxRIOx4+POEC4DPtG0emr\r\n+UtFihH/rpxlaDMC6d8vNNYiBvbcZFaPE7IR2xWG9LnFE/qcbZR0uFzfU2JR\r\nrAanfmu1uBB7EXlCTKSlQGwLPrKwU2KH/j9Hllsi1HAywvoFmKzj1h1+XLJC\r\n0egGAPtILuNA5q//IXFPXhAwhEcJnWBKVnLvpUv3zoW8bQ9Pli8sWvmJ+vLH\r\nPx8c/fhvaSVHMDpeelK+Q71ccn7XHqmw6WKKLTWvyevAJ8W4JEIgRFq8ijWV\r\n7vNMc9OPKVuGlGlu2cdGr3KCHoYXGUQj011vFoJS6Xb8hiJLAMWpROsloyAi\r\n/On4pDfooQS4/caocWBMkR1kyLYc86fl/W4=\r\n=8Mb2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230116122157.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c2e446175dd244d2839fe9324df442c3/chakra-ui-layout-0.0.0-dev-20230116122157.tgz","_integrity":"sha512-BRJdt9sPoK/8gQIZyA5K/UOCyGUGW3uujNMxWKEIolI8Bed2ZwDg2aS1hz3hh7vcxOJvvGmX+a3Rs3ve6B+GUg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"2.0.7","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.4.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230116122157_1673871783883_0.6268711588294502","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230116124502":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230116124502","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@0.0.0-dev-20230116124502","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"08547ce9a468a0a2bf081a934b29133c53fbc101","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230116124502.tgz","fileCount":114,"integrity":"sha512-7JfJGn2TtBKQ/nrKgIX1+BMS4sTUyEzHcH+WEfab72KxA3t1wwWwaVFkscj820zVwFA93KR/IpsIsrbGTxYJzA==","signatures":[{"sig":"MEYCIQCBuO1l8Iz/AABK0AcktQPh9jBIMSibzbIBzZClmNtQLQIhAOYy3EAWna+gehzWTJRUJvsRPXmAWxgSAB1MvM1jTWeP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxUcEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnTQ//YQ2vduLTMET0A2Ot9z08oQHbQSTZmdsqRThAHfJhNstm4gOJ\r\nt+OJU1rWQroA+/Boy8jmQUeVOhGBPlBpD7/3Qf/1/UjY9lMIoVDth8K4NQK+\r\nfFYSuj8RNbxFFKF8T9ELT4nSqnTUgiKekhZOqzkHizOHvRSdVP41RqTX2pH/\r\nxIIgZ9Bx6tGZdUsQwMBtiw4ZBQL5BFkfNoI22DrpwRq6bYg5rh/Nr96O+Yf7\r\nAuGbzyNAUtrgd8vkx87rXzrR4Ri+Of6gfWmthgkWTNgD6UVRO0iZsB8qKwP6\r\ndrDVyMbzuRCl9fVj2IwUwLUJp7sJgZ3Rclx9aLUCA6guR/Pxv9M/Go4egBS0\r\nb3x28EacTuw+ZjqMctmGlAfYLjIvRBLANKz9ZCj+KJ38Tqy4cW+1sAV6uKTh\r\nHDR285fBICpCJtcHoscHf33whn9wG3QjCxgEwEj6AxiVsUZSpsNL17Xv/rZP\r\n7GWny6s6iVhiSH8KksYnEEbE58kpdFIPKnsASffzJj76o4UvzWV5++DI1o6t\r\n84/O8H09H9JbF7nrM557mCRT/JkJjyDJXLGBfMdgJ73ijwZ2zC3UVHcASgET\r\ncsreUd9ZxqaGnQjxAnjn7WVrvYa2VVTgrei5irlnisoy+xuL9j5UlOgLSQn7\r\naWdyBlhBLsLF/DbrRBgi/Bu+fd3KKecZOG8=\r\n=ZTW0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230116124502.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ce66cac49681b05bffe82c99cc683f58/chakra-ui-layout-0.0.0-dev-20230116124502.tgz","_integrity":"sha512-7JfJGn2TtBKQ/nrKgIX1+BMS4sTUyEzHcH+WEfab72KxA3t1wwWwaVFkscj820zVwFA93KR/IpsIsrbGTxYJzA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"2.0.7","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.4.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230116124502_1673873156750_0.24579358497403758","host":"s3://npm-registry-packages"}},"2.1.15":{"name":"@chakra-ui/layout","version":"2.1.15","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.15","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2238ef7a0c515f0668cefcd9967bb9a179c04714","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.15.tgz","fileCount":114,"integrity":"sha512-dJYzBm2ywRYNmtadot/5ii+Gztsx8a9Jd+gFXiSLcfQs/QRdboqMyr/0O+6RY2sI7Mwvyo6uo9AvGJBU1djrNQ==","signatures":[{"sig":"MEUCIGJrNrqz5Rlk4UKY4IVB+lrYEm5th3sp67SgqZkOlulXAiEA6NHipIbdY8f1GdvaZ3PogxnyfYBLhMYOSE0dz7o/d8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxWgWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/Ug//Qn1tecP3mM7Cncdwhw5t5sYXN0GO7SI/is/AzP2K0vgqyNhw\r\nn5Z7v72LYJ4ObagoUoiZyio3wz9h1WloPelFD51+CI7ovITpTr797WFf2vUP\r\nCTX5tcEPv04NggT5MmXHkX1SosqAcfaLX3dk/jinEQJlKqhNin/sf0J0nMp4\r\n5O3vd/viWEf6qOnZeLEq/l+CnxfkHoGPrXyRyO6nh/wDBnAP7xHOnAeAPPuG\r\nyvzOm8ep0ZyVoL1oPhHUrS6Id5CGWrir5LQtoLY5On13NlPzN2/yNf4EitUv\r\nOvCg5O6BIDqbAvxUf0os4Y4m5HaEirXajkeyIJZ444NyT7aKVaqH4ojPWPbn\r\nRe+xmYH8y3EFKTRdWs9YNHu6uH1oZyYVNcYVq6JMTyHgafJTjW30ZYBVuhcH\r\nOmyKa9UFt3jIE/BcwvTewbNp5upK0qSP+6UC8zEYximMpl+cM57GeNjYZWKu\r\nilv34klIKduDTqQXR8snnbRSlp+9dUk01ypXnFkA8FyiLHsYC0RmvMTpI2bd\r\n7/MFEROyMVq70nu3Sz5gZNQ9BzOu/Dix45bd+/mSJrWcc+6QRa6paxTh40H7\r\ne+v7F05slA3WKP4NbsmByCQ1NrDQlnJkbXhuaygGFXMgtN3H6DSwSczNpLqa\r\nwtly3qZRnzvb5p47KHEeM4jS836tVM8ufh0=\r\n=+aHO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.1.15.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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a04b2733725a92878a916bc3a211e535/chakra-ui-layout-2.1.15.tgz","_integrity":"sha512-dJYzBm2ywRYNmtadot/5ii+Gztsx8a9Jd+gFXiSLcfQs/QRdboqMyr/0O+6RY2sI7Mwvyo6uo9AvGJBU1djrNQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"2.0.7","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.4.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.15_1673881622615_0.36067553978286737","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230207153012":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230207153012","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"65b7dfd13c8691ec50346d1f5231c714e352991d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230207153012.tgz","fileCount":114,"integrity":"sha512-vMMs9KoOBvTS8wyKHaGB8OKYF9fPb49XBL6+qK+RukQEzRIfl7dF0tKXnCgJVQM/Lk4tTpA98a+/i+B/2N3aOg==","signatures":[{"sig":"MEUCIEYAK3HsiwbQpa8/5GG7lRxpnKkdlvlJah2DGZnKTDp6AiEA0y7bVIP1VqDN2U/S8yhpOU+2IjaZviLzSYNyJWvhqdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4m68ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphfRAAhyecxfwULWZrwVAaTX5Q5wym/tifWSZ3U2hdSJBBIZlJ75LD\r\nOG1TiQ1N02SjCPGLkznlvFubRifsVP1QykRW+lT/roFykMtlkDTSPNyy8g8e\r\ntKGy8g/U2STJNpGf7DXCgEUi8eWua55Yu2is2XBUfvdtMnGly7fB1+XABQj9\r\nv+zuo1BzQcjubYkFRSdjrq2QrDk1xev9pgST4fAHp4nb7GJpyWahotmLEqDT\r\noj/AzCxtSh0bhDouEyVUJfAL+I/kL4aYM35eoKRBnWiUN5mekar6LNtmi2Qc\r\n+kk0vaJCg3+OtmEsFFk+ogkwsQfZEDt79IJmUNx8KdYm0EzhMRauRns3+C1A\r\n1oawY1vv/XrCpRa0ztcnrvqK6cnuNs7lCDHnOzPNo7D7MUx2Fn/Kai2Qqyi1\r\nZJQV83g4jotSAB3EcOoKfC/Ui8F+QBn/Y5e8UjUltPWVtNTXs7RkQ4H7d39h\r\nP9594G3Z/5YIbZfYv1UjwjHjdcuLnhDq0GXjUcanW6V05V8nLUPeT0hr6Cgu\r\npa2IfITMBKybVa4s3+N2mgLTzpsiBlPjCQKdgOZSXnxdDCvKLpjAY1eSCEDN\r\nxkf0pJ9icZTSkDcI86ONRN9JRFfhcEZxd6Dwqf13HG+Hihpn8hEEQeS1RoZ6\r\nT101Z7uWeO09iAmRm4l/d4rVvj3Jr5//DAM=\r\n=0ZeU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230207153012.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/39a7811af41bf93014c63509758087e5/chakra-ui-layout-0.0.0-dev-20230207153012.tgz","_integrity":"sha512-vMMs9KoOBvTS8wyKHaGB8OKYF9fPb49XBL6+qK+RukQEzRIfl7dF0tKXnCgJVQM/Lk4tTpA98a+/i+B/2N3aOg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230207153012","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230207153012"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230207153012"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230207153012_1675783868535_0.667621657722923","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230208112929":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230208112929","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"33c406d39a355fdaeb6c1e7e556eed4d5c40afbe","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230208112929.tgz","fileCount":114,"integrity":"sha512-Ebc4F+ol1EmjRyIMaUOKr1T1NIWc4CKC/ZIrEmzz7ol0xYf7naccLeGFcIN8V5ZyFveAMxasyDoM4wxrZnn8wA==","signatures":[{"sig":"MEUCIDM8yVU17T9NAVDREGoYX7WUieZLw9OempMP0SDl84tBAiEAuD8YJykRolyVkIrQAiUFps7RVIS3Z7Hk2Aoqq67gU3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj44fJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcLhAAikcC+AVLmwYdMVWO8Q4EQCwQFR0uB+sp5kCfJYzia/8Ub1wi\r\nIqheule+fUdmwBXNG2TK/Lr3gjq8P+QHgKouAR+Le2srkpdpkENAQL37MYaM\r\naL0uPDN+NWQ4SovexXj4uhg3WAj3tct+oZ03etsdwSicqW0TMXiY6v3EbCwS\r\n9iQxiyKeS+Kg5V34zDir1QICx7sLN/uIPa1gtMuZ3t+DANGxOXP692B07bVM\r\nwWfQAIQn5/TnSIhkdKzrEMwLia+fF88DKmteu3AMKfQp1gtDQuPVW0EaFsgG\r\n9ErtrpE6E9qXyeqNoDUiNlg2YT5n/0WjgTipVmOFjD2eMY6cOhIYUJRNaXQX\r\nComDygmCwEzUO7/mnLpkHtU/ggto3YKiQyhlXMVVy+Fz6DJSV/vHUeiJpKKN\r\nnl2d9Pcckk84Fs2JfD1cLX+hGs4yE5MsTGJOl/oE65ZqTIHTZA2GhNk8IZob\r\nXfq6O4LLzMj977lhMV0tFU74BkOPy0bUvmqCGuyN33B9qKnpA2yCf7nwsrON\r\nWuoZbNkMTeZc5jY/FZaKQy+Y08vuftfwncV7IPzi/bG6KV+fBEGDgz4vT8Ms\r\nKM0t+ARwmGJfS7NBtUrhFvhHoTbAUASlfczHDS4S/sQUazjzV87lnZMMCTTJ\r\nr7IFengk1nkgKupPyBA93SWtG8hHtNU72zY=\r\n=3PXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230208112929.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1db40a98d073fef3a6e035e47d3c4295/chakra-ui-layout-0.0.0-dev-20230208112929.tgz","_integrity":"sha512-Ebc4F+ol1EmjRyIMaUOKr1T1NIWc4CKC/ZIrEmzz7ol0xYf7naccLeGFcIN8V5ZyFveAMxasyDoM4wxrZnn8wA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230208112929","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230208112929"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230208112929"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230208112929_1675855817049_0.8804648706943923","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230208114919":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230208114919","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"83071d698d50c316732025fcff7785d059fb20f8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230208114919.tgz","fileCount":114,"integrity":"sha512-eZ7zxaZFxzTDEWLFYG6klddoPbtCgQxlTATA5ftqOCAiuN5Vg25s7qkDpfd4HmymoqglFLjTQBpPfG+uceES0A==","signatures":[{"sig":"MEUCIC4bqYcUQOKQgtm2xv5DOSIMuACivdXGQfe+uJl7qzZ7AiEAiNs/Sl/wFCaXbzHsVHI/o0fSzRphrsy+UHtsq/gKsLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj44xxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRVA//dhFPbAbrPXoDPe4Z0R0dWq1q3QvC5nE5jiZm40Fq7ZoOx/zy\r\nLKYbaulrAXZwmUaDi04tcGYpbKlWdVAEJm/oPVwJYlDRUfzGLpp6gFD51pOg\r\ne8X2t7fpmtnPhBH94ef1kCw8o5qdKiOc1pUzINNy2vqERxWwXBYJy8U42kO+\r\nNc/MricMbhM/o2/n6hB/p8+c3tHhSDvmDr6TPFV4xrVymlKcPavq0HDQ9UH4\r\nJD21jatOXTmGdOG3qqQNSu6AX+nDnToXcH/ubiYWpkW6oQLQRtlNZe0Q1dAb\r\nL2mR8pwsFWmDbAJo9CSQph9702rjn/cPO2bfKaAPOyAwghoztxuXHopTBdkF\r\nFy8U7kS/3kYSzWzIEY+d1QfttnC35UUli1r8WtfVf458JG4fTz9nUhuSFaAg\r\ns5KmkcsmP1WKoqr9Y78JVUkkU/l2uOENEByZZ9i1sw/dPatWbv4Sz6JiZ4Ex\r\nZlTlZr0jkYLyv+chOz8yT5bSrFqsXTRdMFyfYHS8XlQyDxz0HoqgGzsLjVz6\r\nXi+4RRJw73Ghfixg62025cNp0CRM6U4Kup4yqYFewiDIkIzPCfrqkYHjAMRL\r\ndLRTcY6Z6w7ne/pLWy0wXRk2VH9hCpoxxHDEkb7X5I9JJfDIPskNRUDHekiK\r\nGr/VSQL4hKeMqN98oQaCXZFiwNTGyB/G9Ys=\r\n=Ju7j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230208114919.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e5b6c6439426acbac62ad99840094169/chakra-ui-layout-0.0.0-dev-20230208114919.tgz","_integrity":"sha512-eZ7zxaZFxzTDEWLFYG6klddoPbtCgQxlTATA5ftqOCAiuN5Vg25s7qkDpfd4HmymoqglFLjTQBpPfG+uceES0A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230208114919","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230208114919"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230208114919"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230208114919_1675857009724_0.8666939092887322","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230213123249":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230213123249","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a5b6620f49e76358ca5d5b0fc7bcb7b603a8b6a8","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230213123249.tgz","fileCount":114,"integrity":"sha512-yLqV+V76THCFRhbwiMtBfhZ73UCOPjM/u/NB38lkXao3+qdtO0Irk+VQBuuro87vlXyPr+7zIGem2bf06Hy90A==","signatures":[{"sig":"MEQCIBFDYwoHgJ90xTlWMX+ElNBSFDoxeG9tBOid8dvIbpfeAiAyI4Nlb5lPB2NBh85BO3BlzqvCshew+QtS/JNVmaqivA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6i4bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon4Q/5AGtbNrgFPv1k4NxlyBoY2Hde8OWtlUfg+VSt9GfbP7lF9nnd\r\nmEWvAhYUG486m+94N5qu47Iy/eDqouuXH1ThCmpZnUW+3eEhU5zMN7QmWnn4\r\n9b/RRGyqaHOmIGIEMXMg9pNVRX6HKuY7pHN9YH9mqPvA8+PrQ+YmVDfY6xdn\r\n5bamT7uhwVx0O95jCsSTzDzNN0FFwGOMfPd9ee5C01BJxMacS9b2vHHNzU9l\r\nsQ5qTZVMt4il0BSBkbsEKZdg8wiHhSlwwaseoSfCSumLSoCn3B6h3jpbkJS6\r\nwA8BvF3Ct2DK5pg8dVwYfzvMjCJPPl6rE8kwJh+m79vagofHDHiR+ubXb/VZ\r\nZDA9dIagrNifgWfKaRCwSQS2+czMyNq84YWCrOLkWrMoSMfBSfyUnUcfLAm8\r\nOuePiIIWaFLBGrhwAm20I3J3+M0i781cAlvP+Lp7rk1/mf+w71xeTTvsaoHa\r\n2u4WU/nFolxXHSlwNXkZzcvZgXAJWn3q4qGoPLvMS+lGv9l+xzH6fbptKjju\r\nlVrRWO/dEkqonT4vGd0Jvq7mckPJmG1totyanwToIlvE6UsaU6KEbzpBZPXT\r\neXUoRFOZkFxUkM47Grypd56PBmTeEpYQLhNz30QmtxTpbwf8QkWj555llwd1\r\nONbiAmInz8vMWGVX/qUMB3yucfGW0hFBHcQ=\r\n=v8Yy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230213123249.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f019580007278f12be5c0ffeef817436/chakra-ui-layout-0.0.0-dev-20230213123249.tgz","_integrity":"sha512-yLqV+V76THCFRhbwiMtBfhZ73UCOPjM/u/NB38lkXao3+qdtO0Irk+VQBuuro87vlXyPr+7zIGem2bf06Hy90A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230213123249","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230213123249"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230213123249"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230213123249_1676291611581_0.7753057037639313","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230213124817":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230213124817","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"b2b61b4283f6c26f783e32eba9e003fc29570fef","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230213124817.tgz","fileCount":114,"integrity":"sha512-aFZUij8TuOJn1vQhGsHgxfzUd1cqE3+BhaPsTi91Ig41XzOodY1B9Fls3aaRPLAdI03LtIDyRhlRwDWWe+jofw==","signatures":[{"sig":"MEUCIQCkjPI7fblqMlllJjMxibmId/uVVa/iXFOPDlUZq+GK4AIgW3PIkespbU0ehER4wundrT3PO6Ybs4gfRm7BxYK9XNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6jG7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX0A//QcRVjke7NcWS09fhjUID5N48zSxdK5Q4/1c6e9hBFOpavsOm\r\nEhkeAW7/wF66Bu7ndpH6N3M74HU3VHi8g1d2voSO09gOc3d9taUTQnfxxu/3\r\nrE91V/8k3lNBqXA7QUh5qpC4VqshNr1K1X838wrMbfAyczPYuP68utZpqIcF\r\nZr6RGp4/xTJCetGbluzxoTwnjwSpvVbQI8NyCC3sh7jDXS9CwaZm3F6EI531\r\nUcQY4o9TIIOqcrRIND2EOXnruP4VKFmbVYYknFAR1jWtFrzbmNu2LbvX0wB1\r\nJoxd81+mTGECb/G7yG2EZN2o37DCzTN65FTWfKyGk+ElOEN3eZkKMI7qnTWm\r\nClTgpiG+IhAlgGZw+R2XkkJ776Fz9y9d61p3wNANe8hLfOR/MYpAwGCE6ILo\r\nbk3y5JHzxFTSpIOnHpExxpm3CfObadArhV9mCohqBkrMpTeJbSDXx9iSsF9I\r\n7+cPxPqG2ohD5fzTQTCYxRj5qSQWyPN5SnoxO0+jH3ghkegxAlZghtsu882A\r\nY0ZXj0mr+Q9JsEOOADxMAZoECy+V/ww0yNEnLVBFyqxIAA/p4+guAtC++lAS\r\n+iANakeXObiS8cZ+qOeCbshRyTNNxtfMBfUV9PH1iHhLq7PMN6/nCI5dePX/\r\ngmK9bgYWK9r7U0VtZC8zGOWff8TBzdOUOzI=\r\n=fNwe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230213124817.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ee4c4b21b2a1dddb491e46604027f1bb/chakra-ui-layout-0.0.0-dev-20230213124817.tgz","_integrity":"sha512-aFZUij8TuOJn1vQhGsHgxfzUd1cqE3+BhaPsTi91Ig41XzOodY1B9Fls3aaRPLAdI03LtIDyRhlRwDWWe+jofw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230213124817","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230213124817"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230213124817"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230213124817_1676292539105_0.9650680736434551","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230213131136":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230213131136","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"dd7f7aca4d1012f3116580411f841ef2e958b200","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230213131136.tgz","fileCount":114,"integrity":"sha512-zyP8jwYWUYIJwY8qckQwg6flzT/lkBgtWGGxPSqgQ/Cl658Rd3X2dXQDjjGUvZZ854lBSF0l+6/rzlvX49mn4g==","signatures":[{"sig":"MEUCIQDllvb3D5/lRQY13E3KimWfJj4mehJ2DKlwNK+mp13PMAIgE+UwOg+FAyoNrIgU0S+F0CL2OzRCtSIdMe6LSS+fNrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6jc0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr34g/+KRINZot2X4ONdFbAH1PWRFSjQS9BtUduW6xGwHl3nPyPeSw5\r\nbGVuTmN+7ibqcklWMpaDKiLW7b0BEZaNDXZV63p086xgTGSO66udhwJqSnah\r\nXyyRh5/795fk3UTuEOLKS4nV80Ed30s/UkAwwZKVg7BI8DLc7K5BwoSUdzbX\r\nDy7uX9RW6myTZOjuaqFzjTh0/lKu2bUGzuFioJpn3yJ043gYL+7qGiYyl0KU\r\nSKUrgyxuYdBSqfjFVFHrfAlu2EpfdcM0Xg3IhJpNFOdKXcX3fObTmdFNZQHl\r\ngqcNzZoUWG58aMIqJuFTOQBRr5GJGwMd9hZTOrFJcendlZExTQA9oJOxlMey\r\nNFos+DAPT8W01gP2ZA5dCXjwf2VAhYu/bXOkehAqJzlD4wbvc1qgmyQ8pnwL\r\ne4g44bKHaKFGNC+jbSDtxuqPSt0LT9vU9P+eJudHKhI/YsJd0AAdqTz1Z6CB\r\na0w6GG6DlZmUijjM1Vdsf2OffTFREB2OOXOf1GiewK1/fEWAA9qxIMjekaSS\r\nS/QJFZunYFlGc143FL0mlKRNHseFFSXc+F6bv04jZTtekhvoJPlebEOuA4oB\r\nVpLDijaHjqBDUsE7FeB2z3ixBrwsRJBNpcCIySPhqhImSHGU+lLwmG4S3/rI\r\nJ3ZdRlwkGsrqIeG4Qm3Vv3Dc/R88cvr3UuY=\r\n=bZnW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230213131136.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1a0a9c07564c1355c5093274ae8c67ef/chakra-ui-layout-0.0.0-dev-20230213131136.tgz","_integrity":"sha512-zyP8jwYWUYIJwY8qckQwg6flzT/lkBgtWGGxPSqgQ/Cl658Rd3X2dXQDjjGUvZZ854lBSF0l+6/rzlvX49mn4g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"0.0.0-dev-20230213131136","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230213131136"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230213131136"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230213131136_1676293940045_0.35999525483748873","host":"s3://npm-registry-packages"}},"2.1.16":{"name":"@chakra-ui/layout","version":"2.1.16","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.16","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9d90f25cf9f0537d19cd36a417f7ddc1461e8591","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.16.tgz","fileCount":114,"integrity":"sha512-QFS3feozIGsvB0H74lUocev55aRF26eNrdmhfJifwikZAiq+zzZAMdBdNU9UJhHClnMOU8/iGZ0MF7ti4zQS1A==","signatures":[{"sig":"MEQCIH49NvFS0gMCTz6j2gyrBipBc2pyEgRXV+aLwUIWPEHBAiASWZM5KxrcEp/Tt14frJce3FVsgX90IemlfMGzPlEcVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6kY9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWUhAAm1qsqCWr75ajZEPqfHQGRIsTjwc5F8djrTp9bYUn7jFi/7Ao\r\nCiCuLGcgr1c1cKro5AV5yN6Ow/1HZVsS8h0uMf8GsyZeH0jAMnD9WWiUu/IY\r\nTU1UgiD+m6DW+VashbqwagSjbNBMIpB8h1f3XiXI2H6Ly0HBA3iRx+FRt365\r\nbd9/YZIL7pc6PSWyslHiietuIJakJY7CHprX/yivJV2P3kyZVUsodqXQQhSs\r\n8PijQfbFmnGA14nw0ASwV8m8hLp4tXyOkwjG8zcZIW0wMhC8wk2gGFMUnRCl\r\nOTD1ZwX/C4DfDPkGUPalkokUNV1jA45ETD2UUuawlL1874jWSxLgpa6HpK8Z\r\neCZWOfbX63J/jes10mH/xs6V/h1UrfgEg64dn0nc64Q+0Td08JeEmTUv9OmE\r\nyEpPvxadOj+nKIMQQQAc0v9gcHMhAWCbupMKcRBbzwvOIdYJfpT5qWfWJM1n\r\nFdtm4U/uyc63Ye2qhMbTlrOc0g0AKyPQRhxVClRqS5oVdJWWBV+PhsU3uFtN\r\n3tFNr1Vy4XP8uvV89ayZG9q13gFVrPiecHvSKFAOZk6lwmEUND54fC8HpWss\r\nUzouLw8wQmhpgvFPrV3aZ+YnRPkMBnAmqFqCvqgL/qK66ETSP28mrHrA8CJw\r\nPeiG3cgE69RtqevAbeZxG9EVTG96VKOunD0=\r\n=1jcy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.1.16.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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6fa174195a7900f112c6b231800b267a/chakra-ui-layout-2.1.16.tgz","_integrity":"sha512-QFS3feozIGsvB0H74lUocev55aRF26eNrdmhfJifwikZAiq+zzZAMdBdNU9UJhHClnMOU8/iGZ0MF7ti4zQS1A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.7","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.1.1","react-router-dom":"6.0.0","@chakra-ui/system":"2.5.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.16_1676297789705_0.6043993611070451","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230320183136":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230320183136","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e9bf0009ff9e1d24a0f8d574c56052bf3bb7eae1","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230320183136.tgz","fileCount":114,"integrity":"sha512-CqpYuPXHdYHwrbMj9+RH+AM2wT/yNelNApjFIXZm+2NGg4A3wlxfkUMy1ttcJ9yA6EPYZ1fY5yW8JcbuFcXEpQ==","signatures":[{"sig":"MEYCIQCqwj6BRee/yOPQwLvOFPIFSn4sk+B81sn0ROcjXVDBdgIhAOueMC08B9ADZijVthPVd12ToqqdyeTJqbn4OOOTB1a3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGKbEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwKQ/7BtTZrVFnpuSZvWmrMecTaKPWmKDhytB38k/cki6Jxl3OBtm+\r\nZFZQk4GetvqBYUA8jW6+K2WIuVsOKWTLAzGu0jULf+bz34kvh48sutGdH19D\r\n3gFFe5W/+Wpx2hjr3yYVaG8mT+rEOEWn+BrGQcOIZUPk0/4kZchYt/aaMRT4\r\nbC5cMW+VmNPcMx8FLrEjJEMnzOk6SSu3JmatIqsXI4fnzlSWRRe7KiiNAyDo\r\nEmKhICxsalEWrwPefggy2hrySKB6tI9Q69KgQhU4ZCm5+cxXuPvWy2UdWZNN\r\nWBV4F2KgHvaErJ6vC4MZ3E+d8FUkz3i/iNfwMzE5P2k3jOotVQ//cKQiVLhZ\r\n8kGZb4si33Fs5K6D+TDJsmCjaNO/eBhgavw7FKMYFKpl2ZLGJPX1WnfPxs43\r\nrtVP9zlZliI0AjqBWKTZpq+guZmIrJ2MFqZl7S0GtMJWfGF6uQnrpgqSNjys\r\n1FbEZgWQAJSY104f3uAzHRBYrscK11tCZ5A4KBlxquycwtjQk7Fkt+vsqTnR\r\nxIbY+LlMkWvyiZtd5vSde69eOwsVx4z0H9R/8dNZ4kL1RmlFS7yEvEstaXsZ\r\nTuCummH7AKSqstPGIyEsRO6EbMSPEZLh1Q/t+xf0NMkAtNaOC4W+3gYtXV+P\r\nIEhEB+FGh//DUwHZEyjUnzJBQh4bwmm6WZ8=\r\n=iNmI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230320183136.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a76e93d4445e9f279b5da7b8d0cf8096/chakra-ui-layout-0.0.0-dev-20230320183136.tgz","_integrity":"sha512-CqpYuPXHdYHwrbMj9+RH+AM2wT/yNelNApjFIXZm+2NGg4A3wlxfkUMy1ttcJ9yA6EPYZ1fY5yW8JcbuFcXEpQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"0.0.0-dev-20230320183136","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.0.0","@chakra-ui/system":"0.0.0-dev-20230320183136"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230320183136"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230320183136_1679337156398_0.14495096518006","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230320184810":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230320184810","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"802f6956f7b234dab5079db363cdd7a9c9c7bc6e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230320184810.tgz","fileCount":114,"integrity":"sha512-sCEQRkNItz5AfxDuBQSO7PwEHHtS0ALdOGtj8P9fYiQC8jMfofMTHMsuWQq7Vs/YkK5XdNa5OOjiG3VqDWYyQg==","signatures":[{"sig":"MEQCIGkeyuV9/iQP9N7iyo6a4TF0Uf1oZIU2EbLiPl2jeToBAiAZ7gPeFVd/5hfiOOhhoXE29JZlqh59WJ4uStl17K5qqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGKqgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm0A/+KVRPQzv10LwHBGcdS/dbY9Dsrd32S82cJhpRB2FtAWyNRpzQ\r\nlHmGxJz4u/HQUIVb/K3voa4DX1yy+wA14Ej49t2Xr7wAco5DXj/MIbWZ5/y9\r\nJCISeDMRjvK15PjCnxsKO2TvfileFuJB/Txo8+a19U2M81GKtm+BWUpElfJa\r\nFkLv+g6Qe6hfhid+cXQqlzEAF9cb5ftfQUhoTOv0m+IGi8Uatc9skSLo+7xd\r\nE099AYrz3wLZcKmOeSk3gJyBWxKmWLTWBvwcZbIwiMLeYIVPtbvlKEESwPyH\r\nNpG4bn24VI3w9XaQKr50UHIm0xBoBZd4dL9U1vdttuTn7LfwKXam0zyhvygK\r\nbVKxdH6HbuZd3qy8cE8Bv+1DIcYNcuO7arrV606f5FUIiDI/RaX9Pac6Y9mk\r\nAk1vx4riLWhrfJTy3nbFCN0/itew4lj+VRbZjm3vO9U08GLDFXDgEUZOYiup\r\nSCPpNBuL6dDqxyt+GZjHNS3BRMq77i0Q2Pa2IpGxb3Ezi9AzxxwuTr4S/Jk7\r\noEx5uvm+Owe/sD4pQVL85YxSG1X8hVmFE97LgB3ZlzgSFPq9FJ8E91O3zgb2\r\nXjYLqnC6LZotGC1iJ9Zo58XCMPTlm3PBitxsH5GURbtCvwlKBL9OvO95ltOa\r\n5qmCXtKr0/sud547u4RPaDe5om98yMSteww=\r\n=TF//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230320184810.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4e01455d3b0469562424125e0339e44f/chakra-ui-layout-0.0.0-dev-20230320184810.tgz","_integrity":"sha512-sCEQRkNItz5AfxDuBQSO7PwEHHtS0ALdOGtj8P9fYiQC8jMfofMTHMsuWQq7Vs/YkK5XdNa5OOjiG3VqDWYyQg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"0.0.0-dev-20230320184810","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230320184810"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230320184810"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230320184810_1679338144710_0.02601910999657364","host":"s3://npm-registry-packages"}},"2.1.17":{"name":"@chakra-ui/layout","version":"2.1.17","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.17","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1f7c2848ed4558c338051b889656c24c13727f92","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.17.tgz","fileCount":114,"integrity":"sha512-IOUReBf0e+q4YN1jqWByeXEnZ7cJIl+3qU1pIvfEEsOvUlSWqrmTmsb7HO3uwMAbmGTGEOgwAUmfSiwO0wBwxg==","signatures":[{"sig":"MEUCIQCIKuw1djeB5dxIzEllTKTlzBxvOKOdfOufhSoadKtBTQIgS0aqb8sB4VKC+0cDIXhrwGZ2X/0tCjqU2ycJTyV5p/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHCcrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF6g//VYBSFI8TP/8ASPOWPlcTdNshBbrKTJWuyV9Ta1ezYh2ddTCd\r\nR9/t6VajCwxdEp+V3F9tz5vA93PlkV5sNRrEVz9k9I20ZzVv+nDaPRiJoqKb\r\nD8IM2Kcp6oNm9hEs9k6WUsAyJyamJq1z00gMIgMnu0JYRG6cF7zJ3LrjYUnT\r\nwJTxNuX1/hSYh4r9LlJxog8v+Wq3aLC7TV1IekUMjoWEKZmXWPCOGH+96DQz\r\noVFQfsmPhrwRyyHIxbmZpSBf0Av0GmVxNqx/P+jdppxCziL31b10gzqQO2pB\r\nlqjjAJ9l4F9mxUPVY2wY9GFWMqnMyhA+nO99ut2bhXGoI3sB3kaFJV9srEOn\r\nv2L6C6aMGyon5LCs2kcGMAQ2UYnzTW8ucmA1hWF3d88ILMkm7R7pllLPCiKS\r\nRRWdjZZHXbBUiOkLvoiH/N3uM7w/rcQC+DAbesL9UcgN/d+dcOElJECG/Nkr\r\n3DKRTvm7zY+EJ5t94kTd68KNAudqzdf2M72BoIpjksK/TvRavOh9emB1/HTl\r\nbT7QR76G+Mk5HM7Ienlk2VgVW6eeZ8u8mHZLXOjBvb5OPlVz3s54OFsYKnAr\r\nLFJSWvZJ6GEFc9VI+ooGSLccm9tHL+oCJq1f/CVfFw4zl/wpoQVOYLislgsK\r\nWUfSYJxnStsxAnATX5ChJUozAGU3Rpmq4jI=\r\n=92k2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.1.17.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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4150a16bbc57910276f52b4579251c0c/chakra-ui-layout-2.1.17.tgz","_integrity":"sha512-IOUReBf0e+q4YN1jqWByeXEnZ7cJIl+3qU1pIvfEEsOvUlSWqrmTmsb7HO3uwMAbmGTGEOgwAUmfSiwO0wBwxg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"2.5.3"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.17_1679566634940_0.25249626775422573","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230329123951":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230329123951","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"2ade1b865d4f52c0fc8bcd2946e5e5d0e89a8f2e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230329123951.tgz","fileCount":114,"integrity":"sha512-FUTGkwP3H5iCXnuU28hy3KgJBAiRgVimwCfl4WteaGh6OfduQUUxAPXljhavaXi0UItRZwq2p5ChYQ+y5MwvXw==","signatures":[{"sig":"MEUCIQCoiFtV0i70RSIlPuKR7+8GX6ZK+xY6tyyG5Gpr9waH7gIgAUF3pFzVzsWVQucm5htIMc9BX1s3HuMmRT6uRyrkXFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJDHBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmSBAAht/Z4geJe+VCoqCJtbmSm7PHSjZkzGQxgqhj4drSaaQPRYzZ\r\n0lNTdLMy478UyLpzwce4ahvXywDrdCMmdtgdqPZXBxy8lZ0HX4/ldvHvSXBm\r\n09UsZm60uqL8EnP217/ZU4QoLBOSbw/N44tE3WrQ73EgbJS8ileeA6MOeTYZ\r\nH9Mjm8wvHVmz4MJ0hJTx6rOB+LX+QrPI5ovW/BJSHpHRvu1aFwLDRbbH4Vkv\r\nRTcxHZ9442zJB4tsIQ3nKhbFpxveeQIXC71HPnJOgs9jNGzX7v9vQ90ssTEP\r\ndeIb7cy/5hgfMIWumxrjxgXHHQBpn2hmRSSvYjKKC8/648FN3UYDFuj2bTC0\r\nBjwhBJywGQ1nRJuGmd5zSJujq56yHV79KR3wfNDmJX8oJT8/cjxRuITs+ZRQ\r\nkfzuUUx1iX7cTA8gy5WpUUXHfG23fk9GPLT1OLLEVbPkwJZBH65UhH/LJko7\r\nOjztFTE9P4uIgMb/L9LRr9OXJOHpQnkyJ8o0BE0OelIZGOFVMl4QMAjfpuzE\r\nIm3WFC6rMAaV8Wo6Cx/H9oYQLs9Z+DmyQKINRFrLtXMR9tknHF10lnTObzMi\r\njjOVX3zpcQJ7RIy3EO0cEoKt/1+SyyBCzI7XRwi1a43LnuVfFwapJcszgh+X\r\nbGpl4FaiR/dBo5SOHwXHoJ5Yn9oEcJcaTvM=\r\n=9ZQh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230329123951.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/15608f6d36bf3db9c48a35c86ab4246a/chakra-ui-layout-0.0.0-dev-20230329123951.tgz","_integrity":"sha512-FUTGkwP3H5iCXnuU28hy3KgJBAiRgVimwCfl4WteaGh6OfduQUUxAPXljhavaXi0UItRZwq2p5ChYQ+y5MwvXw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230329123951"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230329123951"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230329123951_1680093633127_0.6327373066432396","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230329140150":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230329140150","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"654c60d6e13814ab8226a444961637fde6c608d0","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230329140150.tgz","fileCount":114,"integrity":"sha512-PaQT7bmxFMXDlB7QPwwLSG0kSx1CgsTJBtmEv68K+i62Q+YtXH1xlxVo7w1SW30nFatcDrxK3EKRAAxJuLg39g==","signatures":[{"sig":"MEYCIQCxsFDBrmv1XCQfJiq2FJ4ZUxaRvtYItNWciaarZL7g8gIhAIpXp4T7JzdB63Sw3LIS3r2J2ERG4UkrsWmvRKdZLLIF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJET7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR/hAAj/1X9vzp+Xi0m7Jh8PDrDGzJTZ7CuWNJo0uiwPy0MAS5Lzyr\r\nwqdH+FI0U0ZpSYyyhhD/Km0M/t8ge2+goa2K9W9qvDK7vwODN/pziNMzZ70J\r\nRhblmXwkiFmu4okq1JxuX2s/KB8ml01PK+pBQCWNTtA/UEUI52nXHweRQhf1\r\n5PSlwqrQHv0ZP3iB1xhSwDPp0n304ucI7QjhVrKio89CXHcyaAu9/vT2J4Vb\r\n9bkOw2iYU+KXgzIFKDbMQI6TmozivIAunqFsbuffCWp7zZas1H4HNlTW+jhH\r\n4R1jGa2ZnsrvAn4yuW0mSuNInlMIfS9lPfQA+Mbm4ubZDvuYX1aGW2Q5HedV\r\n96+vxqCLU8dqIB69nF+2tPX0d29P3Zin+btl1Ep68WNQKpeIfNqqzuf0t1QX\r\nE2d9KQp5YiiN4Ctx5iMDNU7bYV+9IAml5/kDPfLLCfCIQJfsy0/XG9XwzHx3\r\ngJKZNGIjNWJWjpGMIMq01AYbB/kQ0/YtNPqFqSHOlq5gZM7TC/p65RxtMdOS\r\nTLq7h1ZgO5Lz6rwB1atbLM4mdzLB3MmogZS/DtgLnOtzFyyDREwCSSJaYZ5x\r\ndfNK9eJiKNc4qioiy6fLun0bQN7XxKFVybzaEg/Wm2Wpzdz35oq+qaCoAZsM\r\nMWypNWFmqL357+l+1l80Tt1qJcVJV5/EawQ=\r\n=RX2a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230329140150.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/575a82edf58f74270d386ba46a586012/chakra-ui-layout-0.0.0-dev-20230329140150.tgz","_integrity":"sha512-PaQT7bmxFMXDlB7QPwwLSG0kSx1CgsTJBtmEv68K+i62Q+YtXH1xlxVo7w1SW30nFatcDrxK3EKRAAxJuLg39g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230329140150"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230329140150"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230329140150_1680098555238_0.9862158395712017","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230329141708":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230329141708","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6ac032fb9d0310088f361466cfff24c7af37d69d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230329141708.tgz","fileCount":114,"integrity":"sha512-QOmFR2ZQ8CM3UTGuwB/Segym83qg6l7MqBXNH0HyK1sOoocrM58NkS1sPt0zvPXQBhlkmQyQZZj6I02QsmKB0Q==","signatures":[{"sig":"MEUCIQDtYigWKX1Nqm8R0H8fca1NhWltEvK4G0Fhcs5lYiV9bwIgFMba8Uh/fyTH48WfceYdFOPQ46+aju33N+IgZvNfA5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJEiRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2TQ/9G8EbLmVBSRz1C9mLP67rHC8g40FaJB1Qbm22YYipllV72be/\r\nrQP2Mhkrdn+aE3+2XpFhphz6DuaOH51/trXk8rJZwW9K+x4CjRbfeOPD+1+Z\r\njNaFwZhqfUGZvtYtBZlYNn2uHmtQV9fGOebvjxB8e9vieCp+PmeDsZXxm329\r\nISwEtkJ3+l9UYXTWv4J5oZZcCNVelTWcYJwhVIB/7A+TCiWEta8uEA7b4PQd\r\nw/N2nyhMr2GM0DnBVZTiqdf7zg0Cy6xGvKMlBn6JBzejWJw9/YcXgCLGNePt\r\n5fNdpSA9y9nxnlA2YFsjOPBnUldeg1vRQfNu+bjTzzwXZe9CQM5c1ytArcll\r\nWeNXA30+sYtF3eiLEhtH/ZBTKWTlF3DX0VZ9/5LhDVOJrkZ4ApLmXapNDrpE\r\nMYPgh7uurGEAAXdhzuPmzFOzxdjOLFotC5wqpqL8qFWe3wfCCbVQ1FcfDVeV\r\nvDB2Kwaf9KLHo1efny8ERZr9WAJivcmCUfT4fdiS9Qc0GTdg468kagTNeCe1\r\natXnrIgtQe05QSa0KyV4UPANeB+rY3XycDnA+gHKEF2xVrDvm0/PG/Vz8BIQ\r\nZzY3cN2O0pIhuirk+cADeP2HP7vWVJDCRjRI4pti3RQG7eXhrSAKJynSyIzC\r\nVfkWYfSLVwVpzWMq75mtB7oIsc59QXwIi7U=\r\n=+Olf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230329141708.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0cfd9dd4839e12e2b7753dcec26ec6ba/chakra-ui-layout-0.0.0-dev-20230329141708.tgz","_integrity":"sha512-QOmFR2ZQ8CM3UTGuwB/Segym83qg6l7MqBXNH0HyK1sOoocrM58NkS1sPt0zvPXQBhlkmQyQZZj6I02QsmKB0Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230329141708"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230329141708"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230329141708_1680099472895_0.47399847134483597","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230329144927":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230329144927","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"39228b6cc4a3395c49e44ee7390510b2a324c899","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230329144927.tgz","fileCount":114,"integrity":"sha512-D0LQvRI8OqqdD7j7wvTWqOyDnyYDN+VGQV55ikBsbVBvsyX8sYLlG2HbhoFp8H/HaheqDSWSlkoFxgf22xLrvA==","signatures":[{"sig":"MEUCIQCFe6KP88Q55NFMeix90K7ST25YxAmyZEJVb+lfME199gIgNoHl2pxfQ5ZBeF/w/D45ruTvwYJBnWs2GGtkpspCZQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJFAkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzUA//VRRQzPzluXbpQknJC1cizonMkCV8plz0TB0TzfTWBrMhIn3g\r\nHe71MuyxAntwzsQvpb9JDQlYDvFTuyUCFpZgcgSiOhEqcVeYE/VQlrZQFdLn\r\n6BoVijUyOL82P7PDynoBz6O96t/OEND+zncoXAhm78Xm6I8JwhrcxX40gWui\r\nLJwGolRW45z9+biCCfcJ9ztLvGf2JXIqkC8qHQfIKIn8ACKWHQVRkk0UsQk6\r\ng2byKzRgIuUbqTVhdI8aBx3vpPITG6KwW94CMruGuONsn+W2mkBYc0gWG0VQ\r\ncslPKFFztXlLZUPNKSmUFKcKAjpUEwh2fZ7NMkjAzXXb8mu04I49qBgsAMI6\r\nGR3FWVr0oktJCpEX5g7UxOBG3ZTtHxyYaCigpQ5A3ubsj4bzN4IOBDutjk7a\r\nvZxCtuYwGaQ7B8/y1qTvDR3fnIJv5JHOOFoNrX+SfL9hX6boECP3wI3ZBeSd\r\nc7Jq5BG8JIDyH2Aj8iiXBzycRuENkj8NMGexEq4f299uAC+CSnRZmYCJ2O8D\r\nBJXieUPY+fm39nHG6noqPYC2SzsnrX4pUwMOwps2lwJgXopGBRrKbxcqzpdj\r\nJg8q6kkgMs3rRIjnKacjdeXdqhLC7o6fzAJunat1zd+bLsUIyA+6CNOsEuvu\r\nQZAmO79v5DGPg9sLlKMRYEPlcLnvN8dAaNo=\r\n=JoRG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230329144927.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ac9950db0d5b4a9de0a22ed76e0edc47/chakra-ui-layout-0.0.0-dev-20230329144927.tgz","_integrity":"sha512-D0LQvRI8OqqdD7j7wvTWqOyDnyYDN+VGQV55ikBsbVBvsyX8sYLlG2HbhoFp8H/HaheqDSWSlkoFxgf22xLrvA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230329144927"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230329144927"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230329144927_1680101412215_0.7968049204384622","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230330123203":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230330123203","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7018fc56f25aa21256a9825aafbd7381a401372c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230330123203.tgz","fileCount":114,"integrity":"sha512-C32RwKXemjZDFkYiMIrOQ9KEwkQ1PTXnTRR0Iqd8JIsKhoRfUJhcZ9K0ThErRLyT4r1kG0i9m8MhQYirQ0Oo3A==","signatures":[{"sig":"MEQCIC4usY346u+vfQ+6pDbNpXDUd07aCy+0Iu7KxNBSOCkiAiBXbfgvlgvordv2s7T6fg8JnuJ87pX05yVwCM8+3iER9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJYGEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobURAAneSWJAYeOCQ/RTw3+QbTXkQpxwE70kL/e8YnbXPVe97Sm7oi\r\n24bHmHujNgoiuUy9lfMaWfPuAWGP4RWbEeYfCQbkfxLu0xl0FpmrUEZYStnL\r\nQkY/h/+VhIKsy0bAL4QRYe9WTtgvplDK0hx4SBMpUEfW/nEvLmhm1RJ7i5q5\r\n8+gTKYjj85wFOusIIaBVw2fEwx4+wt1PrURiaKfky93dQDN7Uf0s2lztPnPy\r\niqQNW+ewSpTzvV41ZESTep2/qR9W4IwL3G+zIujxKr8lHgvXcyULZisTPUCM\r\nkBYTGOhjToA5HnWDsDyQUDyJoNVbdMmEXnCogIau+cYLxhKFgOzQkf6x3a9K\r\nwafI9FKy/I2nnOsanw1SORTUhdCd2fAqKue4Rm7jOUa+jncj6tsgvYmPfV7g\r\nXY097CHIT2pzHa/CfmY2h+Q+P9Q7MMdiThomkhkfVA8x/maHxMhZZD0ro3RF\r\nvCHuccCyngsCSq5mf+2rACyYIXUjNPyzAEapXERnjau8tPE743Y9WV6HWdqp\r\nBv0SHmV5Cf95lmJvd1Dj4xS080Cgo4UUJz006Z+XJDcShp/okM/udA9Fnyx8\r\nUBuWDb7YTa2veS3KdlO3Pfa+Jlqs5uUl14Ycryue6QvYBzpyf6L+nQDsIdgo\r\nAu4gbQh6r+smK5H9OqrwlemsKLsPr48P8sQ=\r\n=l1Hu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230330123203.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0faeadd1dcfbf4b8d5c58d5113b93f7e/chakra-ui-layout-0.0.0-dev-20230330123203.tgz","_integrity":"sha512-C32RwKXemjZDFkYiMIrOQ9KEwkQ1PTXnTRR0Iqd8JIsKhoRfUJhcZ9K0ThErRLyT4r1kG0i9m8MhQYirQ0Oo3A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230330123203"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230330123203"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230330123203_1680179588121_0.023098669247322512","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230330124619":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230330124619","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"7043a569ee2b2cda1868c5ee1f61f2783cfa104d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230330124619.tgz","fileCount":114,"integrity":"sha512-nq/+tTaVeOYeh509klmJCZCHtjW7YM+kGnf9z999r1obaeKtuJDx/DHVFSimuugKmZIE/rf7l/ayXaRMifj+7Q==","signatures":[{"sig":"MEUCIQCrHX2TDFhCEuxcQy3XnH9sTqu9xzeMqGiIOglg603eAAIgXtmNaWZdj+BalKBiX9M+oF9yfsU5NSeR86hzx/PzMCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJYTEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlrBAAg7z8C1tElhs/QV7NV2Q1j10CJCVSPredPSpTc742SUkCQjXX\r\nYjHPAfu3WnUSf1QomgnwsiasmeUbhlbAvYU3ZzpIojM7ybQWF1hKTVdzbvuK\r\nHm49gGqcIkgn06PheuR6ch94pJTBmjiqX53oLeqBFv88mCZFTaf2CHFnnVwJ\r\niEh9netBJ9d9HDlVj2hRSE3wRwLJgaYVPw2BmSyRjW4hf864YCq7CmOzGQ/L\r\neHL+r7DoBiSYvXwuPtcBffnd6geImUPCBaXBlGW2gkdRU9TlFdViYERU2yX2\r\nqXfCpOnjmJGS5TkEFsmFP4bH3tO2FOIF3j3FkTMzIQ1R+lOrjaw6fgSw6c36\r\nsL6WYgTh6bhR5znhV/9FsXAIophHRiA8MRi7Btxz854eAZjZ/+578XUdmw/Y\r\neZ1BDZY4q+tGx9YPw734FRCWvBErFbaNEnAqb9orYAMYgZiLWfbyfEo6Ozo0\r\nWykSis2cO6vG8wyf7Svuw1siv1217wK/msvfouw6DVt8kiWdBmZ5Eq+KM15o\r\nYrEGzhEvJCum4meROXNQId122HCyJBevZhD7nKdlyzdfOl6lPHz6Ldn4z+mO\r\nVrrSaes75wQ0+evrHSJBalZIRNW32C1IzYGU0KiiVOkq+TKo1JjgAV/9D4rM\r\n6Tjr8XhEHZJCVs47mDs139gsOxE7RSRloLs=\r\n=gPVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230330124619.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/495b14e53d831ae7ae6b9226e7141044/chakra-ui-layout-0.0.0-dev-20230330124619.tgz","_integrity":"sha512-nq/+tTaVeOYeh509klmJCZCHtjW7YM+kGnf9z999r1obaeKtuJDx/DHVFSimuugKmZIE/rf7l/ayXaRMifj+7Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230330124619"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230330124619"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230330124619_1680180420222_0.464039945614245","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230330130626":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230330130626","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"cd022596763cd610a361666c8441082bcea5fdca","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230330130626.tgz","fileCount":114,"integrity":"sha512-yLp8asCO/f5MgZBCnZuebe3kj8XIuRJ31yyyr98Lp4jIQHdtBRQ9RXKo2jkgOOay7Pqh6J1YVixVqagBHuxgLQ==","signatures":[{"sig":"MEUCIQCIpsFSZDvIRUofrbsAM+0JGM3eYQnxM79rf8tGPj4FoAIgL2z5avLOBygP0S77kOoDfk8IuR8yyuXaweAYKZ9WbBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJYmPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWCg/9GWO0QYT3DErJmMLSVhh4pdZtnXZ7MY571hoCIOm1nLZdMYBa\r\nP/sp7oG0yFIoP6kVlstXBn68FZRzTii/VUaCbzAFnrUbqH6JTjPFkfxmXg09\r\n4nrpJZJkSMZxaMBmsZVRzLywz7IIWBLo/1RNpZnDVBU81c5B78d3K1WLdu22\r\n6nDyNgq4CsIUmkFTwnnakgXTPo1rNYOhv9gyENHCkCfdsxkAaDASfMpb1xXV\r\nk4k9eAkx2Q0FDRoLz7MqxXFUXKmFYvQr6pPbs1SdNfcA7apgZ/9a5deq5I9w\r\nsDwDiaD6GpBZQ/zKeB65C6mNjIzSVc1kOEjfew3MQDdOkd7F1kIcA5In1nLB\r\nRCL9SrB+KVFnRcvXr97RzdTpzUtM32tWFi8QaWvlpdUpJhS9xLB4Lgy5Paiu\r\n3DJUlD9MgB+5ry8n/YyNzdWJZ1iFeIsJzZz7oCqKhzTwrkaYux0lDTsw1wCN\r\nf0gJ72eZVrmryXBBX81zk5g5ppqmg154VKI3Ftsaa9exA5u5zHbRO/D1aGlP\r\n+GVFfK5QQdAdpJ5hWNj0vZuMiM2sO86aecbcVleqoKb1WgWBzIgzBr2MiD6F\r\nVewNLhw4kAGoUlo0MI8Xk/98WF9/5mUNOS/kcFsdi8aRVZhTtVFnpa1wB79r\r\nHQBVhSnOx+DOryvYNMB2a5aQQY8lH1GFur0=\r\n=6o9o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230330130626.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3187ab6c97deef784901256787ea6610/chakra-ui-layout-0.0.0-dev-20230330130626.tgz","_integrity":"sha512-yLp8asCO/f5MgZBCnZuebe3kj8XIuRJ31yyyr98Lp4jIQHdtBRQ9RXKo2jkgOOay7Pqh6J1YVixVqagBHuxgLQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230330130626"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230330130626"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230330130626_1680181646909_0.22525579245277938","host":"s3://npm-registry-packages"}},"2.1.18":{"name":"@chakra-ui/layout","version":"2.1.18","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.18","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f5dba687dfced9145d495f3a21edb5672df6bb73","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.18.tgz","fileCount":114,"integrity":"sha512-F4Gh2e+DGdaWdWT5NZduIFD9NM7Bnuh8sXARFHWPvIu7yvAwZ3ddqC9GK4F3qUngdmkJxDLWQqRSwSh96Lxbhw==","signatures":[{"sig":"MEQCIC7fgSFlLYHQ65plPevYVTHMeXRNbbSAjDx7D8l6GALpAiAQn+67yNSeeirLCB6iYe0Ra8Qm9vmXke9lthVQiZNUIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJdhDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopJg/+PfMATkQ2J54X6xUmWNR+OdHH/tX1I5zCdWkmmEOyP5vVb697\r\nbX5dp3IfSG6UWBTmdgpM5gxSA5oqENSa/TuTgD4zp92iyeW8+178cglAgnYL\r\n7D2eD66tDZRyFPknlD32xuCt4ad0iGEfFzyDMb0c29U8yAhS7IEq2EjihJMm\r\nlZRi+QK75w8gMRJHfLIXQS7UwTGfwpANQ/8NuAOnpR9mmTNk0QRWxzONxEG1\r\ngLsIumcEgW2X1FMytWYQhZC98NhR3uS89twIjkvOsNIbqJP+bxe0SHrJ4Xt5\r\n7j/hducJXcYQBleOfHUFnH5yL8cNi+x438140Me2L5t7RUUrgphZZ+NVUICa\r\nfWDawBl4JRLmk4ayKF8k2mmgvAO0uz4j2aQ7B06gB+lFkokGoBhaE/PvOuRM\r\nfNrk/LmRRTMW5U7BrRlfgBAjhhHXSq+W1nw/pq91830aChK35hdiK6A6DiD/\r\nEV0U6kP9806/ycCvU/o+IKjXHqTb5dvY6osLwEot2RYT55FN0h03Z6FTQKJx\r\nHR6Q9AI/Lc/ob6BBgzSgsF1Ht3NxyaDewvzqUuMK8nNq6NNb9Rc1/ztB7tE1\r\ntBpmSSOElcP7uB50q91IUff5NMEswfRuqGti4V0XHqrrX/RXWgNMB1Zf8eXQ\r\nWtVwK/YJuojOs09O4tDoLyj56IBvnN2E1XU=\r\n=tNaX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.1.18.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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/21151dae6427a5928fea751e1b5410ca/chakra-ui-layout-2.1.18.tgz","_integrity":"sha512-F4Gh2e+DGdaWdWT5NZduIFD9NM7Bnuh8sXARFHWPvIu7yvAwZ3ddqC9GK4F3qUngdmkJxDLWQqRSwSh96Lxbhw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"8.19.3","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.0.8","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"2.5.5"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.18_1680201795214_0.694090019224674","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424201223":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230424201223","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"449155e8169f0669c55b7d735fde2f245f39f565","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230424201223.tgz","fileCount":114,"integrity":"sha512-7ZSFezKPnxnz0w/tZr2Lr/Zg36mjHRSZQXlAb47C1VNBqWwoLn+7HkOhL3bgLVss+13XX0v7IyhiSD/q/bjxbQ==","signatures":[{"sig":"MEYCIQDtmBvfmVOXeg1VI/HUkzjtqMg4685FzWwDhxW7JRqh+QIhAM43DBRXX9zZ80LSe3kawBjEcFqZlV6YMS22RQQbr8Ov","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuLbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCiRAAnqSMrl/+vzJ51ngB4AKDj31P5zkuXgd8X1sFZfJF1XCqTxyD\r\nlML/iweGDTQZ9sjh1WUHqK42l/3Ykylu1YexplDEbpVTYdvh74Bbz8AzNtiM\r\nQRg1jZicg75hk085ede/wN5fwj3pyD8cUv5y8LwOTEQmPytz+EICrultxvyW\r\n01Jc5G3Sp4bEoxC5+nMla2f9m1aK2Lf1H+kIbDxbUbu729Q3nqkgADNAcrf8\r\ni95qgInRIUULDaAEGGg+l4Vs+Acj7xrAilst98wuoI6HG4qwx0WsLz7dIzSL\r\nz/xZE44Mk/i5N9eTmnhkP751xbAmXAjjg4NxGpxT0tMqaCxVyF+oz7L4fnAH\r\nEeZSfOTXrgqMU9141P/a+jDOB/QdfJYLYWwRVaaDHqEs7+htzCxd9cY91NGQ\r\nEbb505TA5FLuVRO1hIDvOjfYlc2WAqBF8GI8XqXdJ85QSaUxLCqxB50eD4ck\r\nTWwZjs2gey8liJQeyAH4Nwp2Dzo7fLWRNt+vprtuilHUhZa8VHrFla1xv8ef\r\nGMsNNKmbxAHcTS2E7WI5gELUGhQvknLhGI6qhNpVoKMHMGGG+q3GeWCBkiTZ\r\n7l3LxN99mzdhIpmu977ilcifgdX7QITcLV6Sp6gV7QeuYw5YYhJsLDAkUzJ+\r\nan74uQ8NUQKpmUGXBjgX6XLPdKc9vsI27PI=\r\n=xil9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230424201223.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/61298cbc9a68b038323cc269b2044bbc/chakra-ui-layout-0.0.0-dev-20230424201223.tgz","_integrity":"sha512-7ZSFezKPnxnz0w/tZr2Lr/Zg36mjHRSZQXlAb47C1VNBqWwoLn+7HkOhL3bgLVss+13XX0v7IyhiSD/q/bjxbQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"0.0.0-dev-20230424201223","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230424201223"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230424201223"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230424201223_1682367195583_0.7018838477169111","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424202839":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230424202839","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"eae2f96ca323e62f969d57a8fa9b34a19d3316c6","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230424202839.tgz","fileCount":114,"integrity":"sha512-MJguXggXkcXV6emCAOskf8aKWiVcBs9xf67/MYvxkOZiBTnbVjOX/6Pa6FpqXTVHyw1o/beDoRw7Ei3K4YtPEA==","signatures":[{"sig":"MEQCIAXd4bbHxnQNRK5X09HIWoOSbPS8vBVMbLysfH6W5DGuAiAR91R+qP7o/paH1D3OsoPZr/ZIXCYhWKVVyxDorZDBag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuaoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5Jw/+Ny3uRZQjLtBEtcGVFc5lYM/thl+b33CY68V2yHxVJrJgBPDt\r\nbXtps8EfuMbOU3C/2LQLnDdQ5ww3TJLofcjowQNXiFcJD6TygTIBLN483Oc9\r\nbD/PU7K+pVnBefzicOg2mMcgDHtgJOBs8BM1o+lw7/Gb4a1f9XcOYEyCriFF\r\nEdtaYG4yl/kmC74ziiRSGHoVzSVIy6nYMjGHbxV8DYr0GBVP5+WuzwqFLt0Q\r\nNM1Fvz5JpoFvKwuVROLlTY/ccOT2gJRD8FWnXMgEIYuFCBMNU+Ymd4jeEo3j\r\n80fzp8dL3vHrSoGILQVSN6Yb4LAuM8YiaRMx7GPvLE5t1dDqgNoW6XQ4N7Vw\r\nbPrev4ZV6NpJANDt+LgExwHYroNtSbR1oSaC/6iNadc1+eNn3cIwrZq8prFk\r\nsLdenQ5kXQqCdFbn+2DUeIspRZXGN8RTa/GlGrv+YMg28+vhQ+oCWRiqsm9n\r\nONLkLuAXWoeYA1HkmUzdc/kEMvQ6nQDTKlof8c7Vb2pKiBUqPMUeNGG5vk5Q\r\nfHswRLYAx+smO8ccferfUjZWpuMvIGYNySfRZugg9EVxyRxQJx4M/4rYZfrf\r\nntqC/cMdiz2D7+p53CRngGCnG6JNTEwvrEI1+4biXKkz+UWxuMgar5SyTn6B\r\nfZhnB1yu4eoqxiRlmVfeTtC3xkR8QRauPtM=\r\n=ZbtH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230424202839.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/47c7be36c428fbf44a775ccc2324140c/chakra-ui-layout-0.0.0-dev-20230424202839.tgz","_integrity":"sha512-MJguXggXkcXV6emCAOskf8aKWiVcBs9xf67/MYvxkOZiBTnbVjOX/6Pa6FpqXTVHyw1o/beDoRw7Ei3K4YtPEA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"0.0.0-dev-20230424202839","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230424202839"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230424202839"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230424202839_1682368168508_0.19560887355483692","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424205150":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230424205150","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"435379b38bf30e6853680bc8642157b0831f2a18","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230424205150.tgz","fileCount":114,"integrity":"sha512-xh3a+ZnCd0ml2jMT3fs3WrNxw0LuqFS5IopA9ztosEkdGUowCMJ48OCfOYk7WYOcIplE/hAuMn9o52mZLEWfvA==","signatures":[{"sig":"MEYCIQDClEZvvqsAgtKoXrL7pRc0elGH6qeyxKpcg+ya1qakYAIhAK8FePz5HfH+Vf9osdfhSz4bCdSstT6WDxn15gcqHIrJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuwjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+kA/8DAEy/gVM12jABB5JXxuVfLCE2w0kNq/KlFbBSmtDqBra6TvY\r\nDbZyZD9mywoF/DUVSed+3QtQd1dcNkNrE7uSH5a773ermGX1qDGXANi/KTXi\r\nU6CLv7toovSdKaoPWloeC/QvGgq1kOeH9PHTajfoyRRUDUZqDuTrGACKqYSw\r\nqhpyAQmgd7dd5Ljqdf/hbkZfg/B1PFWpdgvmD0ttAe/1hfN49sDfCQfgHOH/\r\nEnGgb9eu5vAQUA+RXn0qlF/lgRZxOtHibNW2HCFNBrde4rEqW1NySDeHFdbV\r\nv+Vr2ILbWb7CK+bx8MP4x6KcQpKkOoRba7q+wb3ZjcKmibFqglMaZhwoB5jF\r\nCr+lMAyFy5vzOGQR7Cd+237hWXQk73qJB3gjpRJo9Axxc0qKxi29iVRoTPBf\r\nLctR5JDOWGe4LYPvzuH71vRWoxniXT3cZ3i1A+TO2ejaxfXAwnBPIaodo6a1\r\ntvfSHlmfdcMKV7ZYUh3ZPAQWsHMsKEGYH3rfpHLeteHjdBvYxL80zESwcN32\r\nE920VId3bEsRrzhcndzo/DStSJxTnGBfPvCvXQMOkFbEUupALmejWNyQnlcb\r\n18GGbYGrA1CjWBeu/Yw8hLXWzqB+n94JMzJJgujVqVskfK5pwbdKU0FyoW78\r\nfmECwyPRpZIUQcYEDdhFf9i31TZ3uNDOE4A=\r\n=/Euk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230424205150.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b9c9aebf3b08cfe3aafa7001d4cf966c/chakra-ui-layout-0.0.0-dev-20230424205150.tgz","_integrity":"sha512-xh3a+ZnCd0ml2jMT3fs3WrNxw0LuqFS5IopA9ztosEkdGUowCMJ48OCfOYk7WYOcIplE/hAuMn9o52mZLEWfvA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"0.0.0-dev-20230424205150","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230424205150"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230424205150"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230424205150_1682369571019_0.3567676446182846","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424210540":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230424210540","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a1d6511270e4bebe37b0887a723e9b57fc1224b9","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230424210540.tgz","fileCount":114,"integrity":"sha512-N6QRRMDwL6akpjGt9RWqTFORyIvkD6Ecom2tmajN+Lg81dbm1Wf3EhqMUm7dr+kPCSlRy7bMjWNkcEvZt3bAnA==","signatures":[{"sig":"MEYCIQCUOfV7PEXSumYdW8UyNCef0g2Sranl+q8UkVZoeeSY8AIhAKD9Feg19ZDSEc9vrFeFH5Xoi2vq1S1SHF/zBshvRRfn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRu9WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnAA/9GY9b/SZem05ezuJOnj1K7uj5qHH9KRcezt0fsJuNNA6k7w+8\r\n38Z5tXa2XPn5BT4uFNEx7Yhv88uUIOX79fS64As8Ja/LIaHL148znm685PEz\r\nUKJoDqexgY15yrmButlac5jY9AHz+n1sRUxK4nAGnleN0BCdRklBfXUJhwFI\r\nx69TOtT4SHkt5sIX9GWLltwhPXJLSFgLURbgRhmNrmNYV5nhWQqYCs7K1oGh\r\nP69MRFMXL50xzAS8TWFRaeeEn6zlLgwwO5AmWlB02P0Mi0DmAxD1WFuZPAjS\r\ndyWJLKF00qB9UvcTGOfDSHSdH/Zl3s1AZSA6SP8DDA6XoSiBvlgaSvuNO0Kl\r\niy2Um9vNPbyhNzQE+jDMyrXi0AkGmxfQrBU4b8mlZmWwgQdHlu3yjKiPCNNY\r\nsQR7p/W2qnB5dRWyeeOVAjxEwWl7zEptaSOGI0Wo57nk/u6NWI6uUL2jpmvj\r\nq7zf/a/ulfoh3MoFER/KEpU1z8GwhGc3CsZc0DO6CwEjxnezz1pjITIushvO\r\n1TQjpBAHEo2p8FaRU7oP2VjjgD/fU+CmAvAiiLdA2ym7X/rtVKZdUt0e6kL+\r\nTu5/R2qtitA4dJGdZ7H9nw+DZvteIAm0oVQHSmo1C6xnV9ygcZPI9UL8qz9C\r\nYjEVKKgV0W+DjOoa19IKTqqddkizQ21o1Mk=\r\n=qXfs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230424210540.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/75d66b5b3c2e30b36af14005fd107e14/chakra-ui-layout-0.0.0-dev-20230424210540.tgz","_integrity":"sha512-N6QRRMDwL6akpjGt9RWqTFORyIvkD6Ecom2tmajN+Lg81dbm1Wf3EhqMUm7dr+kPCSlRy7bMjWNkcEvZt3bAnA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"0.0.0-dev-20230424210540","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230424210540"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230424210540"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230424210540_1682370390464_0.8218898681292526","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424221053":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230424221053","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"4974bf132e2cf94448841d23ea0decd43cbc2ed3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230424221053.tgz","fileCount":114,"integrity":"sha512-HzphI3yk0hHpUq8BzD+pA+q3qp7LUqWCJzKKfDUC5aFSQLVslL8xDFe9xM7TS71V7jxM/qr2IW8IgEC8iukjaQ==","signatures":[{"sig":"MEUCIDHwaqu0O0SrZSJKe074xi0Li9bKYSb2q0oSpKhdu3yiAiEAmT72RGrwJHFA8BL6HteTXhLW/rUE/zXo0AU2/TVBpWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRv6zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2OBAAmL3VUt4zpq5TlSXPWP6gcN+zwVbCvt3KsNTHvoy3p1D7Cp96\r\nduThGmwOoOJi6VxWo/SxZPj8Yzd6bMsqKuzNR8OI6ZRuJOuU9ZDk9OOJbbks\r\n+4O9BRcNltORIhfdOtjD4scV1/F6aJVVwgXzRlo6vGumytfqHa7L0KyhUaLb\r\nFl+hrMqQ1E2Z2c8Um7fOXOw8MqDXgAxF+xPg+Nn04D7V0Mq3ZzCusuEumfiO\r\n8N/m9c8Mz6bpOSb9oDgkVQjQpVB4/bVvqHUptaA5fSrobwMlX1cI56IvVTTF\r\n5YoSNATzmCaIHTJQoTPo7RdRpurqSy5HxVJwk4lz/Y7l47tPDHLevacrOiTF\r\na/8eouxB2ZU2sMpkEeUNVWRFwHqMMxLKYFDouwLC0BFQgJzrW0yzR0RD5/wK\r\nYMaA/a2v/kzltNhnSjwntjwwmxSsadCssLxBwb+3o3dMdhg7vtiI6rAOB/Bk\r\nejKHCCeISBmLsDGRmuZwjEf/S3PejIfnpdlddiZq6JBU6JaLrbOnBiMth+Xb\r\nf69F4LSr8ZssdbpN8GaWcGCw6Ze5d8ZuCCnSh099Kp3rmCSkUa6WLgMwYSXK\r\n3B7/8q0gn8b9hhEvR8UTf1yAvPMv2fq7F6or1USUIatsxiNCxsIZEQl6MjUb\r\nhaPhiRJgmQDhn6Nho1NYhDK7t0NwdBzaEnM=\r\n=8zI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230424221053.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ccdcc096e25f413683b27a721c6a7afa/chakra-ui-layout-0.0.0-dev-20230424221053.tgz","_integrity":"sha512-HzphI3yk0hHpUq8BzD+pA+q3qp7LUqWCJzKKfDUC5aFSQLVslL8xDFe9xM7TS71V7jxM/qr2IW8IgEC8iukjaQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"0.0.0-dev-20230424221053","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230424221053"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230424221053"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230424221053_1682374323118_0.9034152894975878","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424222806":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230424222806","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3cc4d1a208d95b9154b120f7f3f0f15ff2459107","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230424222806.tgz","fileCount":114,"integrity":"sha512-+KRfOTi3hWJiAFe9Re2rz+DcedHttUsFJbkbwwH5A7667etWINlMoWAZNs1rPRqc6lkkXxX/HONBlbVuuW31yA==","signatures":[{"sig":"MEUCIQDfWvwF57WAVto4218scrG0mG3jj5pv8s4Sz9hnVsY4ZQIgYcHZ1A2YGjG3P8Ek7RPqmO92bsBNozeV4IyzHMm+qYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRwK0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkHg//cT6+yv8GtWN8BgZ40GJ4k3sCNaOJqkeEyiyf8Oi9NlITg7Ga\r\nZCwjP79e4MGzWzv658w1P0LzbzX0NzsjGs48VDDcpgGqo3g1YDPtfn7RJNvI\r\nMpl9AE6EB5YK81PGSiwu03mkj/gQuaYrGqkWFhGoFSmG4CFWcSnOawOrxr7r\r\nIOCnaBFs/X5o0gLPTSCZ55f4jipcrguUiRulFzrorWZ0wGqUB41oSOaMZWOT\r\npH+J9H8lgVTfLQ9ylcB0UODD02J6UT5zJRJcXlxVGvFAq7zBw4cZW+hJixqO\r\nWlBNPwCBoFSomSF6sjDgiBlmEky0hDq9nj5CYbO+19umy8PK4O6rtqI1alz9\r\nozRn3czFhM0viBg8MdyCwSPLLWeYcmQJkxilP8BvWUOFiOPVkEhvNslz29Bm\r\nfzGZEy05TKv8+8zzkJwweWXUllZZwFtnExM/ly6i3NoCFVk6uUZiB7DNltJz\r\ncm7JECaWTUPCdad4m0EeOgmyshBuvR06D+FBfr6com66NwPsAZ02XKW2Xpro\r\nZhBC60pAQj2npwNwtAgeGzhP6EA7AZFrQbjfD2nMBiDirBsMVE6kdlp6FSLH\r\nzheomF9pZ8fCJALp7uJ2581RXXWcQI2/mjhLwsqDl3of3GTS0B6IYPYZZWDI\r\nYRiswUIHKGeekI9Wm6Cbe/P8+MWKg5A6iMo=\r\n=ukW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230424222806.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d16a25e1df2090d9ef2daa9360fbb2f3/chakra-ui-layout-0.0.0-dev-20230424222806.tgz","_integrity":"sha512-+KRfOTi3hWJiAFe9Re2rz+DcedHttUsFJbkbwwH5A7667etWINlMoWAZNs1rPRqc6lkkXxX/HONBlbVuuW31yA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"0.0.0-dev-20230424222806","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230424222806"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230424222806"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230424222806_1682375348426_0.027809931550172973","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424225650":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230424225650","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"01915b0e6cfc3302268b7c13ef1b0e96cbe5a48e","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230424225650.tgz","fileCount":114,"integrity":"sha512-4Nhyxc3QoOP3aVr94Mf+UhDi8W9x6DwoZ9HbbDZy5baqgZnlCJJvfH894tGmB6/P2eYW/5KhP3oenHaZVYoNjg==","signatures":[{"sig":"MEUCIDiWPaVd/2zUEknYk/VoYHBWjvb83cPo28H9eBpDYRvoAiEA0ifLUK4UAKTVj2lnNHfAoIhbAWmCr2XBFlCvdERkSDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRwlnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBeg/9F/mbYKjmJdf1viGLc69baPVuTXcnYXNXtggshjf6Ior0iGtl\r\nu+HImSy6njRzUtove62WsbchDRu5Xr7Q7bHbuKxIg42gX2pmWJu3WAifYAMX\r\n5buml26GvUAkIvR+3FAxWoO7a/TTmXIhipSfVMcK/nx+4A48b2veHICKuYP2\r\nmzwOaYkT8fWQ73eMGGP06u2u7t85YDonvPiflsvWc6mtcVRqsgRPAlOV4I7V\r\nBUDAC04S/6s7W5+KxD63qejfHe+lfkpNztn4khGYBhtWE/qayznIRkV8uJL0\r\nGTDRsOjORJrXVQfAG37qOPn/IOpppk44eAaZm+u5gnVq2mDySSu+Ckiy6s3z\r\n5sTfjtWjm+JwwSWYM6g82ls3PNSKt6mMuC/may5iA+2TGw09Pd1bVlCTX2Vb\r\nUzD4/SUF04qaTGJT86p1u5HlvOCw9AzNAB7BXtfUVNn875TJT1kKzNEMmlMr\r\nBS9MRFWs2vjAO+1Vu39Uch0SvTrWv1rz78B9y5Psff8uK9FG/ttwbRzomOUf\r\neVNOfTKL14Wkbw7epu14bQJc+QFMzauNJS5OUweBxvBtBIqfuwKLq03xrMBg\r\nHmb8Whh9yd6PwLYRkFW/CE4oCepj6px/U7+ZDfEAuE/iH3rYJwgHA6lb8bwP\r\njH72ifcMErJX1JLFoWwdyOjuKmQ+4rQNIAQ=\r\n=UgVx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230424225650.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/169fb6e304eb30f61c457a36aba01843/chakra-ui-layout-0.0.0-dev-20230424225650.tgz","_integrity":"sha512-4Nhyxc3QoOP3aVr94Mf+UhDi8W9x6DwoZ9HbbDZy5baqgZnlCJJvfH894tGmB6/P2eYW/5KhP3oenHaZVYoNjg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"0.0.0-dev-20230424225650","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"0.0.0-dev-20230424225650"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230424225650"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230424225650_1682377062868_0.49792608548022077","host":"s3://npm-registry-packages"}},"2.1.19":{"name":"@chakra-ui/layout","version":"2.1.19","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.1.19","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4cd07c64239bf83c89a49487fdbd44227737b4eb","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.19.tgz","fileCount":114,"integrity":"sha512-g7xMVKbQFCODwKCkEF4/OmdPsr/fAavWUV+DGc1ZWVPdroUlg1FGTpK9bOTwkC/gnko7cMClILA+BIPR3Ylu9Q==","signatures":[{"sig":"MEUCIC+aYa/OyArtOiPzgVwXjRzkHEiQy5OTNOqxNmN600AqAiEA5iZ/D3b8O3RXKA1eZzzYzgr4NYrYAXehTRT4s9Yv4DY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":169602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkR7XcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCkg//fFcD2Q+jpDB9GfrwB/8BnrP00ZvJzAoRTyL01NyK1qgKdrTE\r\nKE76LLl0nQAAX7AcDxd0bSSWCnDDLjdp979FWuJFKMXXEDLwvIL81bz1afWV\r\nFetTRk4VO50mHzqgpYepYw1JZOkh6eU04MGV7C9idVhvTF7qPjPNBinWo0e1\r\ndNSGW0c5AdgzKO7VdgCo/aBsN4bv2LoxELlJk1Bpr7inUHZuinzn2myjCb1t\r\nW+QalRJy4XCSe0m9jpl78xZYV69lUZ9NptwzHTpqZZ00xQZPq/sGb7i8BLY9\r\nSmWJtCQ8FZv170AGzIe3YKHn/zBi82594Z7SVQWdM4uSxXo50C+RoFRQ+HjY\r\nJjX2q7WDJXO2hsIv2JBnzDFNYS3bwouGB9qce7C3BGcEAaDritytroFmJ5KP\r\nL2XvbuzhxgG12WoFhm72XHj2RxZgspqoS0XtgTspRqXqpEbur/cb2QL1ESlV\r\noXNa0/0eRJh5KpTkJ+4Sh0t+6+dmzHUegp9W9jnKrCwGFjxZpaeZ4LzUY0Dy\r\nJHFDPU5tOqRW+zWU4NndCE0lxbKdBGwzV97dVp9MoianuRAxvvH3XfEqeAMG\r\nt4UJPVrkQVC09ARx9Q7qeaT93P5mdvytM97+D3gVf4rigfqSy/N88Xdux/Jo\r\neeonjYG7dYQtP7zhnyh8aGdAfxcil/6zCE8=\r\n=oHZb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.1.19.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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/10780569c8c15caab5da59c52d061eb3/chakra-ui-layout-2.1.19.tgz","_integrity":"sha512-g7xMVKbQFCODwKCkEF4/OmdPsr/fAavWUV+DGc1ZWVPdroUlg1FGTpK9bOTwkC/gnko7cMClILA+BIPR3Ylu9Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.9.0","@chakra-ui/system":"2.5.6"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.1.19_1682421212060_0.941726215490261","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528181900":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230528181900","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1438a6783bb2e5ed513a6caf8e00b5ee7cb88bc4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230528181900.tgz","fileCount":118,"integrity":"sha512-5NHW4NH30H5HrPxffV3Z91OSekqsdtmIsyMiPtp8CCWnWNIcIvZdqTospcAMovDiiP6uqcyys9t86jTXkegKqQ==","signatures":[{"sig":"MEQCIE5iahBhDKgiVKKFcNcuklTnP3ThIutrY4SvHg4uzK7tAiBAdzaqMx2aNiLR+yWEuwveVCyZgsJ/8KBV+QjXOcCRBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230528181900.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c2fb99af6d28f98b7bb11966b14053af/chakra-ui-layout-0.0.0-dev-20230528181900.tgz","_integrity":"sha512-5NHW4NH30H5HrPxffV3Z91OSekqsdtmIsyMiPtp8CCWnWNIcIvZdqTospcAMovDiiP6uqcyys9t86jTXkegKqQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230528181900"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230528181900"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230528181900_1685297992368_0.19639836566483315","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528183722":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230528183722","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"05d49eadd631f144ec7c0b6b1b2e41140563071d","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230528183722.tgz","fileCount":118,"integrity":"sha512-ysCa8blSBpcBucdU0A3NGdn6fj4xDnyA3uvmLRWkGgUM6NzR7Nm/6fCkg0udcMhtdrKOJTPTnFglWX0ZIkwoLg==","signatures":[{"sig":"MEUCIQDBe1XIG9bFna+g1RSJIhSEbpyP2CRkCJ6pDUzP6nLYIAIgeilG4ey1U0ai3yphP6Qfg9TFynY38P4pUHxonW9x4ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230528183722.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/531fb3c1bdce977eaf8852bf07d7262c/chakra-ui-layout-0.0.0-dev-20230528183722.tgz","_integrity":"sha512-ysCa8blSBpcBucdU0A3NGdn6fj4xDnyA3uvmLRWkGgUM6NzR7Nm/6fCkg0udcMhtdrKOJTPTnFglWX0ZIkwoLg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230528183722"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230528183722"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230528183722_1685299114177_0.6465933301936879","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528185153":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230528185153","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"69bc6c2b9576051d0bda973662ece4283e8a0dd3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230528185153.tgz","fileCount":118,"integrity":"sha512-ygrjtQUb2XqpYWg2qaYhOUCyyWQbpQuqWK4FGQNsY7sTjyy+9aAL+dMHbLOC4ns7MUsVeOMk6M6TLgO9S7sCsA==","signatures":[{"sig":"MEQCIHLV0QziE1ewJWJVNWq7SZwrFiis9gRNSsOYZM4LkYCpAiAIPHHbtUvp/96ISiIJnIjscUvGcJ7nv117Nk4jzWqKNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230528185153.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/421d217488d88e8be857af4d05cbc5a5/chakra-ui-layout-0.0.0-dev-20230528185153.tgz","_integrity":"sha512-ygrjtQUb2XqpYWg2qaYhOUCyyWQbpQuqWK4FGQNsY7sTjyy+9aAL+dMHbLOC4ns7MUsVeOMk6M6TLgO9S7sCsA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230528185153"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230528185153"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230528185153_1685299965884_0.6690515335341727","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528190715":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230528190715","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a9a7664782a473375d1992868b9ce4340081e853","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230528190715.tgz","fileCount":118,"integrity":"sha512-ydJzEZIsnhADnl5DZrEPTfI/BORWF3h2xI1rMjz/0qvFX81GgbmA0204VhMqOZxvK/LkDhlRGLxCdjBzoJTHJQ==","signatures":[{"sig":"MEYCIQC03Oy6WsgIGohYGFUfgRocemYfl5bjDi1vntVqbaWXVwIhAI2Ck2orLF2nJToqOKnI5/q7UXv88r9rhM8K8Hx6b0XP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230528190715.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/096df3483dab6d83b030b7743f359086/chakra-ui-layout-0.0.0-dev-20230528190715.tgz","_integrity":"sha512-ydJzEZIsnhADnl5DZrEPTfI/BORWF3h2xI1rMjz/0qvFX81GgbmA0204VhMqOZxvK/LkDhlRGLxCdjBzoJTHJQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230528190715"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230528190715"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230528190715_1685300888312_0.3042139114867546","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528194103":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230528194103","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"c6bd2db03eb7256e96f0c869b29b952587cb090f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230528194103.tgz","fileCount":118,"integrity":"sha512-1o3hG11RuZhx5v9w9NzSBKVKUL2Gp9zOz1keM8BfP7gneD68xKDVuv7XepqsrSesPNRd5EcsGxZYn1AOAviTMQ==","signatures":[{"sig":"MEUCIHU3gotKXS9IbXHcHELTMKF493YE42viZjZxKIvp1PH6AiEAsvFp8VV+zmk0LWAXVH7AhtFea4lqLzRaUDNczkwD1N8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230528194103.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/68357a9efc89004f3a3102972c087607/chakra-ui-layout-0.0.0-dev-20230528194103.tgz","_integrity":"sha512-1o3hG11RuZhx5v9w9NzSBKVKUL2Gp9zOz1keM8BfP7gneD68xKDVuv7XepqsrSesPNRd5EcsGxZYn1AOAviTMQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230528194103"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230528194103"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230528194103_1685302929545_0.6133817147574403","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528200306":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230528200306","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"70d5b81943dda7239c0d3cf13da09b8239edecd4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230528200306.tgz","fileCount":118,"integrity":"sha512-Q6OTtfaTwezcaeoYR/fsK7mzVu4tEl1+AhAIUoE7OLRtc6xofc97HBjYeFnITQMiJQsPVAlT1vqgWMFaBDTTRg==","signatures":[{"sig":"MEUCIQCP4/yskuoWUUFZ923jA3db7GeHrgrZbVpmEdbsQQdxeAIgIOwTYbmMXz7M2qJzcDjawEB3JdT7pGwk2BIxFaVp9VQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230528200306.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1074863ab1aefdfec42d65478f3333f9/chakra-ui-layout-0.0.0-dev-20230528200306.tgz","_integrity":"sha512-Q6OTtfaTwezcaeoYR/fsK7mzVu4tEl1+AhAIUoE7OLRtc6xofc97HBjYeFnITQMiJQsPVAlT1vqgWMFaBDTTRg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230528200306"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230528200306"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230528200306_1685304239254_0.47528749130992787","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230531082239":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230531082239","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"1bf7fea58daba861cedea983ffdb05dbc18d2ade","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230531082239.tgz","fileCount":118,"integrity":"sha512-KsG2tFGer7gNaRr3GX5TTO8aOjqeeHj7k/UIxu+TNlxYSIM0AYci2yLePr9wms8ahEiQwEjUINqQC70DeBsevA==","signatures":[{"sig":"MEUCIQCFB5A9XOanJVz6NsCelNJqaq45laBuECnXJtGs8HHF3gIgb+hMQZcBh6acwtnD92CIjsgwgu+qPZNdWQZbXID987Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230531082239.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5e4e9ff9ed67a1e2dfb63e2dd7736d3b/chakra-ui-layout-0.0.0-dev-20230531082239.tgz","_integrity":"sha512-KsG2tFGer7gNaRr3GX5TTO8aOjqeeHj7k/UIxu+TNlxYSIM0AYci2yLePr9wms8ahEiQwEjUINqQC70DeBsevA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230531082239"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230531082239"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230531082239_1685521413415_0.9451275518586348","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230531084037":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230531084037","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"e730e35834ef0984af51480518f0f3a19cac82cc","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230531084037.tgz","fileCount":118,"integrity":"sha512-aRVToaASu6IiOIvadnIFEIvBHVdp29K0PBzYI63q4w5rC40ESAY1qsZBOJg7uIeA9Yeuy5mc7nMfmWZ9q/XNtg==","signatures":[{"sig":"MEQCIFakqedYDn9X7JEDh34YiDokUqvOW6Nnm/M6j6rqQJzPAiBfdBTH+teR3CcXhQfkrIdX5w0YGwj+tFQcO0mRDomT0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230531084037.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e2640b770ea4e885e9a2006fca7b9170/chakra-ui-layout-0.0.0-dev-20230531084037.tgz","_integrity":"sha512-aRVToaASu6IiOIvadnIFEIvBHVdp29K0PBzYI63q4w5rC40ESAY1qsZBOJg7uIeA9Yeuy5mc7nMfmWZ9q/XNtg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230531084037"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230531084037"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230531084037_1685522506643_0.2621925430872667","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230531085907":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230531085907","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"455c4cb55dfa0964782108c22bbe3cc4028213be","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230531085907.tgz","fileCount":118,"integrity":"sha512-j+gqPJe/fBBSN4wzHgNlXwfQV330RH1dy17xIalv9w11GJdgko/Ah9Bn9QJHeqPGpw0oZtqQZyiYUOZdvSTWhQ==","signatures":[{"sig":"MEQCIDlMRsVTDf6Jyzbj+fNPQEtpsWyUJTW40h0OZh4Xo/FtAiB1qfR58vAF9ixR7K2ma1XwAUzITKgqX5hKOO9uCf3yUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168634},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-0.0.0-dev-20230531085907.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e66b8b86e0482970ba80e246a8abaec3/chakra-ui-layout-0.0.0-dev-20230531085907.tgz","_integrity":"sha512-j+gqPJe/fBBSN4wzHgNlXwfQV330RH1dy17xIalv9w11GJdgko/Ah9Bn9QJHeqPGpw0oZtqQZyiYUOZdvSTWhQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"0.0.0-dev-20230531085907"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230531085907"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230531085907_1685523598403_0.1218393168455223","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@chakra-ui/layout","version":"2.2.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.2.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":"a0832ba419743d8d7e442acfce59740626664d2f","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.2.0.tgz","fileCount":118,"integrity":"sha512-WvfsWQjqzbCxv7pbpPGVKxj9eQr7MC2i37ag4Wn7ClIG7uPuwHYTUWOnjnu27O3H/zA4cRVZ4Hs3GpSPbojZFQ==","signatures":[{"sig":"MEQCICMchznvPqQnmWESQTFkdcxmMPo/7cIw23WKAmLIiDd5AiBIHHAVoi/Q2vja4GayrN76xM6dW0HFpXr1sqzYxHJ8Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168579},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-layout-2.2.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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0558fae92189343e58de3fbb2bcc1e2d/chakra-ui-layout-2.2.0.tgz","_integrity":"sha512-WvfsWQjqzbCxv7pbpPGVKxj9eQr7MC2i37ag4Wn7ClIG7uPuwHYTUWOnjnu27O3H/zA4cRVZ4Hs3GpSPbojZFQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/icon":"3.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.0.8","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.11.2","@chakra-ui/system":"2.5.8"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.2.0_1685526269676_0.33003654454875764","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718122336":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230718122336","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"aaa6b6e287dcf4cb6f3f534269eac5e405a41d31","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230718122336.tgz","fileCount":204,"integrity":"sha512-mkouM28Vw/W1X2F2FqTlJoxCRTxY199+dRUUMrjkLol7JadVcnzQW1yc2vZ1rsE1jNe7lEWIwWPMuTTKqv9Btw==","signatures":[{"sig":"MEUCIQDSkJl7FF2S5nl79Pj6tT2+tPLzmpEt+pDabsrceN6SzwIgbWgw6i3/R1CZIBDJ3ya/IR5ZL9G60akGpomv7ytZrwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406406},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230718122336.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6d14e3f68f8fcfe195422d5593c12bbb/chakra-ui-layout-0.0.0-dev-20230718122336.tgz","_integrity":"sha512-mkouM28Vw/W1X2F2FqTlJoxCRTxY199+dRUUMrjkLol7JadVcnzQW1yc2vZ1rsE1jNe7lEWIwWPMuTTKqv9Btw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230718122336","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"0.0.0-dev-20230718122336","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.14.1","@chakra-ui/system":"0.0.0-dev-20230718122336"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230718122336"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230718122336_1689683114692_0.6955635253744399","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718124717":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230718124717","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"86465e37cb0abb98ded0ce4636750a9965dbd75c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230718124717.tgz","fileCount":204,"integrity":"sha512-DkvmiNa0U0P5q7fXbSAHKovucncCxVYg8DDhh02By2vA7L4KKoHFrOajNQQ+FwQLvNPdHB6+7MpEZ24ZeaFW1Q==","signatures":[{"sig":"MEYCIQCZqG5H6YfETipajGp6QYVPgOz5ko3FYe8lB5DN/l053QIhAMWLt2oNWfa+bskzM/hRWtK4P5h8CjluZGaHeFT57Zz3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406406},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230718124717.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/35df50270717b0ef60a475bf20ea37cf/chakra-ui-layout-0.0.0-dev-20230718124717.tgz","_integrity":"sha512-DkvmiNa0U0P5q7fXbSAHKovucncCxVYg8DDhh02By2vA7L4KKoHFrOajNQQ+FwQLvNPdHB6+7MpEZ24ZeaFW1Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230718124717","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"0.0.0-dev-20230718124717","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.14.1","@chakra-ui/system":"0.0.0-dev-20230718124717"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230718124717"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230718124717_1689684535826_0.4920499933037441","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718130742":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230718130742","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"479d62171da4ff336a850bfbbb5817acac68f7e5","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230718130742.tgz","fileCount":204,"integrity":"sha512-0eNYayp5/8HNpqJcyBc6JTHIM3VIhNYf5fgUvtoa2Y9ekReT2YDcM3AhHasY+w54g8qbZ8RwIMYxOj3O1xJ4+g==","signatures":[{"sig":"MEUCIQDdu+YODMOWN6ahyTQhWd7vBhpzYVFa1wC2oBWPPk4SqAIgGtvXzdyqaR+X5KLRAY7bD2JxcYm73JjHT2BmALpaXAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406406},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230718130742.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f08e9465fb04b9c6ca0274aace3ef079/chakra-ui-layout-0.0.0-dev-20230718130742.tgz","_integrity":"sha512-0eNYayp5/8HNpqJcyBc6JTHIM3VIhNYf5fgUvtoa2Y9ekReT2YDcM3AhHasY+w54g8qbZ8RwIMYxOj3O1xJ4+g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230718130742","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"0.0.0-dev-20230718130742","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.14.1","@chakra-ui/system":"0.0.0-dev-20230718130742"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230718130742"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230718130742_1689685742533_0.00907970903192079","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718132637":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230718132637","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"a9cc19db2851c30665c8542ab1fba23ea0b8f1b4","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230718132637.tgz","fileCount":204,"integrity":"sha512-UuORjK34EfQbu2x+4W0GZ/PSW3qldBRV/FJ+bhoA0HC34yACXPHx3D5t1mzneBMC3xpXFNL9IBuOFkmpgLSspg==","signatures":[{"sig":"MEYCIQDgbCzDGgqHGAv4GWMSeVI9rToQ+/kDMxUCqGVOTWp9HwIhANtwypR7zErIhSHXeQmX8iIoeXp9T6XpKGxkfol2K3Rm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406406},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230718132637.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/40f16b122045fd399f88981c20eff53a/chakra-ui-layout-0.0.0-dev-20230718132637.tgz","_integrity":"sha512-UuORjK34EfQbu2x+4W0GZ/PSW3qldBRV/FJ+bhoA0HC34yACXPHx3D5t1mzneBMC3xpXFNL9IBuOFkmpgLSspg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230718132637","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"0.0.0-dev-20230718132637","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.14.1","@chakra-ui/system":"0.0.0-dev-20230718132637"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230718132637"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230718132637_1689686888903_0.8709470874931831","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@chakra-ui/layout","version":"2.3.0","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.3.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":"c53219235db737202006b8b0881b82fedcf3b225","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.3.0.tgz","fileCount":204,"integrity":"sha512-tp1/Bn+cHn0Q4HWKY62HtOwzhpH1GUA3i5fvs23HEhOEryTps05hyuQVeJ71fLqSs6f1QEIdm+9It+5WCj64vQ==","signatures":[{"sig":"MEYCIQCAj7kRvAUtbXbThNvhviHedsqP3748XgtbCBg37yOJzQIhANhnxGxX7/VRmv4fsZZN3Vi7GR+gRRdIpztk82QHqKYl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":406313},"main":"dist/index.js","_from":"file:chakra-ui-layout-2.3.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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5ec908f6343e21a52e8f18c652bac82e/chakra-ui-layout-2.3.0.tgz","_integrity":"sha512-tp1/Bn+cHn0Q4HWKY62HtOwzhpH1GUA3i5fvs23HEhOEryTps05hyuQVeJ71fLqSs6f1QEIdm+9It+5WCj64vQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.5.1","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/icon":"3.1.0","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.1.0","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","react-icons":"^4.2.0","clean-package":"2.2.0","react-router-dom":"6.14.1","@chakra-ui/system":"2.6.0"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.3.0_1689721254172_0.9917030723291633","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230822131635":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230822131635","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"f40bca62909dc429b5f332afba32b9705612fab3","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230822131635.tgz","fileCount":233,"integrity":"sha512-TeK9/wysOsVzlsnG9xU63Y7OTIPQCzlcyzzgLzYTyAVS3Lcsyyzmtc8lNAh/K7CRxPqsb7X2s6a5nFWUVm8FSA==","signatures":[{"sig":"MEQCIH6qTtf50+M8v16NuHMhrmbP5vLIMwO017TUabjtYA04AiAIFCk+XhWLAcwHM1spgnZdMyOENy2QdjwIg8sYanziYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432241},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230822131635.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/771ea28d83857a0224e239683bb99896/chakra-ui-layout-0.0.0-dev-20230822131635.tgz","_integrity":"sha512-TeK9/wysOsVzlsnG9xU63Y7OTIPQCzlcyzzgLzYTyAVS3Lcsyyzmtc8lNAh/K7CRxPqsb7X2s6a5nFWUVm8FSA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.6.7","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230822131635","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.1.0","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","react-icons":"^4.10.1","clean-package":"2.2.0","react-router-dom":"6.15.0","@chakra-ui/system":"0.0.0-dev-20230822131635"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230822131635"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230822131635_1692710279170_0.613030394221469","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230822134434":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230822134434","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"5ba606751347310631210049af0143628f448ace","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230822134434.tgz","fileCount":233,"integrity":"sha512-2odR8lclzCKqJ/MNf6didOjwHb8V7gRwvFgPAar1ri5JKMcKjdUEfWSsGBLJdE5BqsfIUlgS96rEwGuebDX6XQ==","signatures":[{"sig":"MEUCIGqiJiw4gB3TdzVy2bcBHVItAKmZz8kqGtsh6P5tVelGAiEAomNWOVtacedUnWQvBeFzBhBUcosoD2ysakZHzyXPBNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432241},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230822134434.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/fd36bf6eb44e7a5109629731ddf949fe/chakra-ui-layout-0.0.0-dev-20230822134434.tgz","_integrity":"sha512-2odR8lclzCKqJ/MNf6didOjwHb8V7gRwvFgPAar1ri5JKMcKjdUEfWSsGBLJdE5BqsfIUlgS96rEwGuebDX6XQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.6.7","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230822134434","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.1.0","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","react-icons":"^4.10.1","clean-package":"2.2.0","react-router-dom":"6.15.0","@chakra-ui/system":"0.0.0-dev-20230822134434"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230822134434"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230822134434_1692711929224_0.6741425103361525","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230830093747":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230830093747","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"3c7a213dc55d055f40ed9addc1312e2372da7f1c","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230830093747.tgz","fileCount":233,"integrity":"sha512-zCx7+CFK57URyWm9Ixgs/TCv2EkQwBQyNgiVSMhARNvKiy/+VPh3npvgPgq/6AZIpHoAye9Q4bM8Hf9gE7F1KA==","signatures":[{"sig":"MEYCIQDBWBwb5IcPNxl8R3wAAG0P7Ezo2AuZtAliiYoYyHSR0AIhAMZc0WLp9p42DHi4H4l5VLRGW7hN2f4XHPbKw+U+9Bgy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432241},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230830093747.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b531734114e2efd4af3c1423a188e7ba/chakra-ui-layout-0.0.0-dev-20230830093747.tgz","_integrity":"sha512-zCx7+CFK57URyWm9Ixgs/TCv2EkQwBQyNgiVSMhARNvKiy/+VPh3npvgPgq/6AZIpHoAye9Q4bM8Hf9gE7F1KA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.6.7","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230830093747","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.1.0","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","react-icons":"^4.10.1","clean-package":"2.2.0","react-router-dom":"6.15.0","@chakra-ui/system":"0.0.0-dev-20230830093747"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230830093747"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230830093747_1693388329455_0.093633308084484","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230830120642":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230830120642","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"6d7118692589bdabe44f35c413a82e23d1891772","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230830120642.tgz","fileCount":233,"integrity":"sha512-K4keRAjkm+Bx4a9VetD3ef40Sloci7IaaXNCKOmxgQd4YGXEaSxW8ngB0Ae2JCjWqqp2Xn1btrf5GfLH1cWuiA==","signatures":[{"sig":"MEUCIEG4KgIIFLbQLTIxGj2iilTz+uWapS523/OVkztsS6xAAiEAq1zy065OqVRK8FewoY5ndUnf3P/lctdFzxLXxqedUjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432241},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230830120642.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/689655769620640ffa9b32ad4cecab34/chakra-ui-layout-0.0.0-dev-20230830120642.tgz","_integrity":"sha512-K4keRAjkm+Bx4a9VetD3ef40Sloci7IaaXNCKOmxgQd4YGXEaSxW8ngB0Ae2JCjWqqp2Xn1btrf5GfLH1cWuiA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.6.7","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230830120642","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.1.0","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","react-icons":"^4.10.1","clean-package":"2.2.0","react-router-dom":"6.15.0","@chakra-ui/system":"0.0.0-dev-20230830120642"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230830120642"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230830120642_1693397267083_0.027074266045027162","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230830133821":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230830133821","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"21f7ec1a039f9b46da6e231f16e6ee32005d314a","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230830133821.tgz","fileCount":233,"integrity":"sha512-IRWFRMHCOSEqbqRTI732tGUbatlBQx/Ykn8zVL+5axv2ntgMAKq3BxYfzO1H0Hel1q2/ryIKWqHIBMzlo2gV5w==","signatures":[{"sig":"MEUCIQDK2hj95v7vBLHTt/zJuOzufe6E+rSQwbe9Nq5yYF9oYgIgVTv7zk6Rbgh3YhAEuN4NI/oJzSjG06sCeh0gVWVC3e8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432241},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230830133821.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6c9d26fceaf7ee6e83116a5680bc534b/chakra-ui-layout-0.0.0-dev-20230830133821.tgz","_integrity":"sha512-IRWFRMHCOSEqbqRTI732tGUbatlBQx/Ykn8zVL+5axv2ntgMAKq3BxYfzO1H0Hel1q2/ryIKWqHIBMzlo2gV5w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.6.7","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230830133821","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.1.0","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","react-icons":"^4.10.1","clean-package":"2.2.0","react-router-dom":"6.15.0","@chakra-ui/system":"0.0.0-dev-20230830133821"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230830133821"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230830133821_1693402758181_0.556954742180886","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230908144305":{"name":"@chakra-ui/layout","version":"0.0.0-dev-20230908144305","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@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":"807bbc29b3d187ecd27090a4f0a6459238b47690","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-0.0.0-dev-20230908144305.tgz","fileCount":233,"integrity":"sha512-XYLswNTJMqn7RIkNfKbXBE/1HPmlGhKk+Xl9b15KRZGcg8OtwbAvvM02PHfvKVbY7vkEiadFwxMxTtJyB6ygYQ==","signatures":[{"sig":"MEYCIQCDUhmb3M8PWo/Y7D3g1POuxTCTzFq08UKng39z/N0NAwIhAN4KlOFC4FfE1y0y0FmdGCPA72iPAatXKPOgRNsah8y4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432241},"main":"dist/index.js","_from":"file:chakra-ui-layout-0.0.0-dev-20230908144305.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/64155eacf2e3d93128349831bd6999c5/chakra-ui-layout-0.0.0-dev-20230908144305.tgz","_integrity":"sha512-XYLswNTJMqn7RIkNfKbXBE/1HPmlGhKk+Xl9b15KRZGcg8OtwbAvvM02PHfvKVbY7vkEiadFwxMxTtJyB6ygYQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.6.7","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/icon":"0.0.0-dev-20230908144305","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.1.0","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","react-icons":"^4.10.1","clean-package":"2.2.0","react-router-dom":"6.15.0","@chakra-ui/system":"0.0.0-dev-20230908144305"},"peerDependencies":{"react":">=18","@chakra-ui/system":"0.0.0-dev-20230908144305"},"_npmOperationalInternal":{"tmp":"tmp/layout_0.0.0-dev-20230908144305_1694184251455_0.7160287363912612","host":"s3://npm-registry-packages"}},"2.3.1":{"name":"@chakra-ui/layout","version":"2.3.1","keywords":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/layout@2.3.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":"0601c5eb91555d24a7015a7c9d4e01fed2698557","tarball":"https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.3.1.tgz","fileCount":233,"integrity":"sha512-nXuZ6WRbq0WdgnRgLw+QuxWAHuhDtVX8ElWqcTK+cSMFg/52eVP47czYBE5F35YhnoW2XBwfNoNgZ7+e8Z01Rg==","signatures":[{"sig":"MEQCIEfeoXOLW+ZmuVyfdQUPPxaepRevfazsheGhMJf+9vMyAiA1GC9YrYzzOtS8Cgs4ADaRy9uzGYKZ3RbRX61vYNt/cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432167},"main":"dist/index.js","_from":"file:chakra-ui-layout-2.3.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","typedocs":"tsx ../../../scripts/generate-type-docs.ts","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7915a354a2b475e2faafa9425a177e27/chakra-ui-layout-2.3.1.tgz","_integrity":"sha512-nXuZ6WRbq0WdgnRgLw+QuxWAHuhDtVX8ElWqcTK+cSMFg/52eVP47czYBE5F35YhnoW2XBwfNoNgZ7+e8Z01Rg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"_npmVersion":"9.6.7","description":"Chakra UI layout components that give you massive speed","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/icon":"3.2.0","@chakra-ui/object-utils":"2.1.0","@chakra-ui/shared-utils":"2.0.5","@chakra-ui/react-context":"2.1.0","@chakra-ui/breakpoint-utils":"2.0.8","@chakra-ui/react-children-utils":"2.0.6"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","react-icons":"^4.10.1","clean-package":"2.2.0","react-router-dom":"6.15.0","@chakra-ui/system":"2.6.1"},"peerDependencies":{"react":">=18","@chakra-ui/system":">=2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/layout_2.3.1_1694214256675_0.42768362857402864","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-06-20T20:43:03.555Z","modified":"2025-08-25T12:24:41.003Z","1.0.0-next.0":"2020-06-20T20:43:04.045Z","1.0.0-next.1":"2020-06-21T09:41:32.646Z","1.0.0-next.2":"2020-06-22T15:36:14.471Z","1.0.0-next.3":"2020-06-28T16:35:32.983Z","1.0.0-next.4":"2020-07-01T17:42:13.244Z","1.0.0-next.5":"2020-07-15T10:36:46.375Z","1.0.0-next.6":"2020-07-15T15:35:27.776Z","1.0.0-next.7":"2020-07-26T12:55:25.997Z","1.0.0-rc.0":"2020-07-26T15:57:56.397Z","1.0.0-rc.1":"2020-08-06T21:14:41.514Z","1.0.0-rc.2":"2020-08-09T11:32:25.928Z","1.0.0-rc.3":"2020-08-30T15:30:26.085Z","1.0.0-rc.4":"2020-09-25T14:08:54.822Z","1.0.0-rc.5":"2020-09-27T20:27:40.893Z","1.0.0-rc.6":"2020-10-25T15:43:03.990Z","1.0.0-rc.7":"2020-10-25T21:38:54.173Z","1.0.0-rc.8":"2020-10-29T20:24:38.371Z","1.0.0":"2020-11-13T10:20:55.992Z","1.0.1":"2020-11-20T19:50:04.892Z","1.1.0":"2020-12-03T18:17:55.700Z","1.1.1":"2020-12-17T21:39:29.284Z","1.1.2":"2021-01-03T13:10:44.843Z","1.1.3":"2021-01-11T17:01:52.162Z","1.2.0":"2021-01-24T15:01:16.957Z","1.3.0":"2021-01-30T21:52:38.961Z","1.3.1":"2021-02-06T11:40:47.735Z","1.3.2":"2021-03-05T20:00:32.153Z","1.3.3":"2021-03-21T06:35:11.489Z","1.4.0":"2021-03-30T12:25:29.697Z","1.4.1":"2021-04-07T15:07:24.942Z","1.4.2":"2021-04-13T22:12:04.952Z","1.4.3":"2021-04-19T18:37:33.184Z","1.4.4":"2021-04-23T18:03:41.326Z","1.4.5":"2021-05-05T11:12:48.746Z","1.4.6":"2021-06-18T17:37:58.391Z","1.4.7":"2021-07-08T15:05:34.501Z","1.4.8-next.0":"2021-08-05T21:11:26.011Z","1.4.8":"2021-08-09T10:27:15.596Z","1.4.9":"2021-08-29T11:52:35.047Z","1.4.10":"2021-10-14T23:33:41.522Z","1.4.11":"2021-11-03T20:33:00.525Z","1.5.0":"2021-11-11T16:56:47.249Z","1.5.1":"2021-11-12T19:51:33.586Z","0.0.0-canary-2021118154929":"2021-12-08T15:50:15.630Z","0.0.0-canary-2021118164051":"2021-12-08T16:41:35.657Z","0.0.0-pr-20211191288":"2021-12-09T12:08:39.721Z","1.6.0":"2021-12-09T13:30:05.895Z","0.0.0-pr-202111921327":"2021-12-09T21:03:57.143Z","0.0.0-pr-20211113195848":"2021-12-13T19:59:13.686Z","0.0.0-pr-2021111320052":"2021-12-13T20:01:15.816Z","0.0.0-pr-2021111320117":"2021-12-13T20:11:32.926Z","0.0.0-pr-20211113201444":"2021-12-13T20:15:09.535Z","0.0.0-pr-20211113202333":"2021-12-13T20:23:57.998Z","0.0.0-dev-20211115102948":"2021-12-15T10:30:15.671Z","0.0.0-dev-20211115103018":"2021-12-15T10:30:48.213Z","0.0.0-pr-20211115103050":"2021-12-15T10:31:28.653Z","0.0.0-dev-20211115103321":"2021-12-15T10:33:54.025Z","0.0.0-dev-2021111913282":"2021-12-19T13:28:35.964Z","0.0.0-dev-2021112024830":"2021-12-20T02:49:00.576Z","0.0.0-dev-2021112031456":"2021-12-20T03:15:29.144Z","0.0.0-dev-2021112031622":"2021-12-20T03:16:55.704Z","0.0.0-pr-20211120212826":"2021-12-20T21:28:55.824Z","0.0.0-pr-20211120212927":"2021-12-20T21:29:56.730Z","0.0.0-pr-20211120213315":"2021-12-20T21:33:44.831Z","0.0.0-pr-20211120214314":"2021-12-20T21:43:47.008Z","0.0.0-dev-20211120215621":"2021-12-20T21:56:56.434Z","0.0.0-pr-20211120215645":"2021-12-20T21:57:23.118Z","0.0.0-pr-20211126151058":"2021-12-26T15:11:30.455Z","0.0.0-pr-20211126153437":"2021-12-26T15:35:13.772Z","0.0.0-pr-20211126153854":"2021-12-26T15:39:28.703Z","0.0.0-pr-20211126154235":"2021-12-26T15:43:09.298Z","0.0.0-dev-20211126154241":"2021-12-26T15:43:14.637Z","0.0.0-pr-20211126155055":"2021-12-26T15:51:24.603Z","0.0.0-pr-2021112616030":"2021-12-26T16:01:06.615Z","0.0.0-pr-2021112821613":"2021-12-28T21:06:50.809Z","0.0.0-pr-20211128215540":"2021-12-28T21:56:13.276Z","0.0.0-pr-2021112822349":"2021-12-28T22:04:25.832Z","0.0.0-pr-2021112822415":"2021-12-28T22:04:47.077Z","0.0.0-pr-202111299618":"2021-12-29T09:06:55.926Z","0.0.0-pr-202111299647":"2021-12-29T09:07:20.871Z","0.0.0-dev-202111299720":"2021-12-29T09:07:57.495Z","0.0.0-dev-20211129982":"2021-12-29T09:08:40.018Z","0.0.0-pr-2021112991213":"2021-12-29T09:12:52.244Z","0.0.0-dev-2021112991233":"2021-12-29T09:13:11.262Z","0.0.0-dev-20220114234":"2022-01-01T01:43:09.428Z","0.0.0-dev-20220114728":"2022-01-01T01:48:06.548Z","0.0.0-dev-202201134936":"2022-01-01T13:50:13.649Z","0.0.0-dev-20220281628":"2022-01-02T08:17:05.996Z","0.0.0-dev-20220282224":"2022-01-02T08:22:59.274Z","0.0.0-pr-20220282356":"2022-01-02T08:24:31.749Z","0.0.0-pr-2022028277":"2022-01-02T08:27:37.047Z","0.0.0-dev-2022028387":"2022-01-02T08:38:46.529Z","0.0.0-dev-2022028457":"2022-01-02T08:45:37.169Z","0.0.0-pr-20220284534":"2022-01-02T08:46:07.877Z","0.0.0-dev-2022028579":"2022-01-02T08:57:45.506Z","0.0.0-pr-202203225541":"2022-01-03T22:56:20.934Z","0.0.0-pr-202203231241":"2022-01-03T23:13:16.928Z","0.0.0-pr-20220483049":"2022-01-04T08:31:28.621Z","0.0.0-pr-202204173424":"2022-01-04T17:34:56.792Z","0.0.0-pr-202204174042":"2022-01-04T17:41:15.372Z","0.0.0-pr-202204174930":"2022-01-04T17:50:08.374Z","1.7.0":"2022-01-04T20:36:22.434Z","0.0.0-pr-202204203645":"2022-01-04T20:37:23.645Z","0.0.0-pr-20220421928":"2022-01-04T21:10:01.621Z","0.0.0-dev-2022058937":"2022-01-05T08:10:00.918Z","0.0.0-pr-202206184046":"2022-01-06T18:41:07.592Z","0.0.0-pr-202206185910":"2022-01-06T18:59:43.935Z","0.0.0-pr-20220619052":"2022-01-06T19:01:13.716Z","0.0.0-pr-20220619547":"2022-01-06T19:06:15.978Z","0.0.0-pr-2022061965":"2022-01-06T19:06:27.370Z","0.0.0-pr-2022061971":"2022-01-06T19:07:25.759Z","0.0.0-pr-202206191541":"2022-01-06T19:16:05.804Z","0.0.0-pr-202206192031":"2022-01-06T19:21:08.606Z","0.0.0-pr-202206192435":"2022-01-06T19:24:59.091Z","0.0.0-dev-202206192457":"2022-01-06T19:25:24.003Z","0.0.0-pr-20220620149":"2022-01-06T20:02:23.638Z","0.0.0-dev-20220620653":"2022-01-06T20:07:21.317Z","0.0.0-pr-2022062070":"2022-01-06T20:07:35.377Z","0.0.0-pr-202208163634":"2022-01-08T16:37:10.377Z","0.0.0-pr-20220816386":"2022-01-08T16:38:42.890Z","0.0.0-pr-202208164521":"2022-01-08T16:45:53.983Z","0.0.0-pr-202209205059":"2022-01-09T20:51:30.541Z","0.0.0-pr-20220920538":"2022-01-09T20:53:40.037Z","1.7.1":"2022-01-09T20:57:38.042Z","0.0.0-pr-202209211330":"2022-01-09T21:14:03.080Z","0.0.0-pr-20220921590":"2022-01-09T21:59:28.298Z","0.0.0-pr-202209231642":"2022-01-09T23:17:10.409Z","0.0.0-pr-202209231818":"2022-01-09T23:18:52.010Z","0.0.0-pr-202209231927":"2022-01-09T23:19:59.349Z","0.0.0-pr-2022010134944":"2022-01-10T13:50:10.668Z","0.0.0-dev-202201013510":"2022-01-10T13:51:29.637Z","0.0.0-pr-202201013538":"2022-01-10T13:53:35.945Z","0.0.0-dev-202201117413":"2022-01-11T17:41:28.888Z","0.0.0-pr-2022011175644":"2022-01-11T17:57:14.806Z","0.0.0-pr-2022011182024":"2022-01-11T18:20:58.096Z","0.0.0-dev-2022013185957":"2022-01-13T19:00:26.765Z","0.0.0-pr-202201319022":"2022-01-13T19:00:53.272Z","0.0.0-dev-202201319130":"2022-01-13T19:01:59.976Z","0.0.0-pr-202201319211":"2022-01-13T19:02:41.812Z","0.0.0-pr-2022013191557":"2022-01-13T19:16:24.736Z","0.0.0-pr-2022013191627":"2022-01-13T19:16:53.858Z","0.0.0-pr-2022013191632":"2022-01-13T19:17:02.782Z","0.0.0-pr-2022013191659":"2022-01-13T19:17:30.128Z","0.0.0-pr-2022013192043":"2022-01-13T19:21:23.050Z","0.0.0-dev-2022013193154":"2022-01-13T19:32:25.052Z","0.0.0-dev-2022013193526":"2022-01-13T19:35:59.452Z","0.0.0-pr-2022014102532":"2022-01-14T10:26:03.603Z","0.0.0-dev-202201418849":"2022-01-14T18:09:22.906Z","0.0.0-pr-202201418280":"2022-01-14T18:28:39.745Z","0.0.0-pr-2022014183133":"2022-01-14T18:32:13.650Z","0.0.0-pr-2022017182645":"2022-01-17T18:27:16.424Z","0.0.0-dev-2022017182859":"2022-01-17T18:29:35.447Z","0.0.0-dev-20220209527":"2022-01-20T09:06:00.010Z","0.0.0-pr-2022020961":"2022-01-20T09:06:46.464Z","0.0.0-pr-20220209192":"2022-01-20T09:19:43.397Z","0.0.0-pr-202202092345":"2022-01-20T09:24:24.794Z","0.0.0-pr-202202495259":"2022-01-24T09:53:39.729Z","0.0.0-pr-202202495536":"2022-01-24T09:56:16.052Z","0.0.0-pr-202202495553":"2022-01-24T09:56:25.921Z","0.0.0-dev-202202495727":"2022-01-24T09:58:08.259Z","0.0.0-dev-202202410017":"2022-01-24T10:00:50.474Z","0.0.0-pr-202202410034":"2022-01-24T10:01:15.237Z","0.0.0-pr-2022024212254":"2022-01-24T21:23:32.208Z","0.0.0-pr-202202423375":"2022-01-24T23:37:40.040Z","0.0.0-pr-2022024234531":"2022-01-24T23:46:09.774Z","0.0.0-dev-20220258423":"2022-01-25T08:42:43.271Z","0.0.0-pr-202202584437":"2022-01-25T08:45:17.487Z","0.0.0-pr-20220258462":"2022-01-25T08:46:37.348Z","0.0.0-dev-20220258486":"2022-01-25T08:48:47.240Z","0.0.0-dev-202202585455":"2022-01-25T08:55:29.789Z","0.0.0-pr-20220259146":"2022-01-25T09:14:42.219Z","0.0.0-dev-202202591453":"2022-01-25T09:15:29.787Z","0.0.0-dev-202202591937":"2022-01-25T09:20:13.624Z","0.0.0-dev-202202592640":"2022-01-25T09:27:23.888Z","0.0.0-pr-20220251866":"2022-01-25T18:06:42.577Z","1.7.2":"2022-01-25T18:07:20.671Z","0.0.0-pr-2022026181758":"2022-01-26T18:18:33.082Z","0.0.0-pr-2022026182926":"2022-01-26T18:29:52.280Z","0.0.0-dev-2022026182947":"2022-01-26T18:30:15.895Z","0.0.0-pr-202202618407":"2022-01-26T18:40:33.843Z","0.0.0-pr-20220300344":"2022-01-30T00:04:13.718Z","0.0.0-dev-20221152957":"2022-02-01T05:30:30.161Z","0.0.0-pr-20221153122":"2022-02-01T05:31:54.725Z","0.0.0-pr-20221173228":"2022-02-01T07:32:58.824Z","0.0.0-pr-20221173648":"2022-02-01T07:37:23.172Z","0.0.0-pr-202211224055":"2022-02-01T22:41:22.220Z","0.0.0-pr-202211224227":"2022-02-01T22:42:59.713Z","0.0.0-pr-20221263638":"2022-02-02T06:37:19.574Z","0.0.0-pr-20221263715":"2022-02-02T06:37:49.684Z","0.0.0-pr-20221272130":"2022-02-02T07:22:04.899Z","0.0.0-pr-20221272450":"2022-02-02T07:25:27.076Z","0.0.0-dev-202213175727":"2022-02-03T17:58:01.973Z","0.0.0-pr-20221462931":"2022-02-04T06:30:18.959Z","0.0.0-dev-20221463045":"2022-02-04T06:31:30.295Z","1.7.3":"2022-02-04T06:35:50.079Z","0.0.0-pr-202214171317":"2022-02-04T17:14:00.155Z","0.0.0-pr-202214173019":"2022-02-04T17:30:54.634Z","0.0.0-pr-20221417318":"2022-02-04T17:31:48.313Z","0.0.0-pr-202214173148":"2022-02-04T17:32:28.055Z","0.0.0-pr-202215111823":"2022-02-05T11:19:01.670Z","0.0.0-dev-202215111945":"2022-02-05T11:20:28.581Z","0.0.0-dev-202215112739":"2022-02-05T11:28:14.822Z","0.0.0-pr-202215113521":"2022-02-05T11:35:55.801Z","0.0.0-pr-202215113950":"2022-02-05T11:40:29.142Z","0.0.0-dev-202215114149":"2022-02-05T11:42:30.977Z","0.0.0-pr-202215114422":"2022-02-05T11:44:59.508Z","0.0.0-dev-202215114442":"2022-02-05T11:45:23.238Z","0.0.0-pr-202215114917":"2022-02-05T11:50:03.369Z","0.0.0-pr-20221512346":"2022-02-05T12:04:24.052Z","0.0.0-pr-20221512130":"2022-02-05T12:13:36.265Z","0.0.0-pr-202215121320":"2022-02-05T12:13:55.354Z","0.0.0-dev-202215121353":"2022-02-05T12:14:25.872Z","0.0.0-dev-202215121428":"2022-02-05T12:15:00.145Z","0.0.0-dev-20221512173":"2022-02-05T12:17:37.824Z","0.0.0-dev-202215122415":"2022-02-05T12:24:56.588Z","0.0.0-pr-20221512359":"2022-02-05T12:35:44.740Z","0.0.0-pr-202215125733":"2022-02-05T12:58:12.001Z","0.0.0-pr-202215132532":"2022-02-05T13:26:08.423Z","0.0.0-dev-20221513279":"2022-02-05T13:27:52.606Z","1.7.4":"2022-02-05T13:36:24.335Z","0.0.0-pr-2022114224724":"2022-02-14T22:48:08.876Z","0.0.0-pr-202211594731":"2022-02-15T09:48:03.677Z","0.0.0-dev-2022117101328":"2022-02-17T10:13:57.167Z","1.7.5":"2022-02-17T10:18:41.444Z","0.0.0-pr-2022117102151":"2022-02-17T10:22:14.349Z","0.0.0-dev-2022117102223":"2022-02-17T10:22:52.178Z","0.0.0-dev-2022117103018":"2022-02-17T10:30:48.785Z","0.0.0-dev-2022117131714":"2022-02-17T13:17:45.150Z","0.0.0-pr-202211713187":"2022-02-17T13:18:43.642Z","0.0.0-dev-202211720414":"2022-02-17T20:04:47.546Z","0.0.0-dev-2022117201925":"2022-02-17T20:20:04.931Z","0.0.0-dev-2022117203714":"2022-02-17T20:37:52.505Z","0.0.0-dev-202212083710":"2022-02-20T08:37:49.514Z","0.0.0-pr-202212011232":"2022-02-20T11:03:12.645Z","0.0.0-dev-2022120113958":"2022-02-20T11:40:34.544Z","0.0.0-dev-2022120114012":"2022-02-20T11:40:43.275Z","0.0.0-dev-2022120114225":"2022-02-20T11:43:03.285Z","0.0.0-dev-202212012129":"2022-02-20T12:12:45.244Z","0.0.0-dev-2022120123118":"2022-02-20T12:32:02.116Z","1.7.6":"2022-02-20T12:41:04.738Z","0.0.0-dev-2022124213658":"2022-02-24T21:37:19.717Z","0.0.0-dev-2022128214753":"2022-02-28T21:48:22.019Z","0.0.0-dev-2022128215052":"2022-02-28T21:51:20.086Z","0.0.0-dev-202212821520":"2022-02-28T21:52:28.424Z","0.0.0-dev-202212822477":"2022-02-28T22:47:36.124Z","0.0.0-dev-2022128224832":"2022-02-28T22:49:00.551Z","1.7.7":"2022-02-28T23:07:14.336Z","0.0.0-dev-202221417325":"2022-03-14T17:04:12.920Z","0.0.0-dev-202221417436":"2022-03-14T17:05:07.207Z","0.0.0-dev-2022214171014":"2022-03-14T17:11:30.011Z","0.0.0-dev-2022214195434":"2022-03-14T19:55:04.917Z","0.0.0-dev-2022214195653":"2022-03-14T19:57:17.970Z","0.0.0-dev-202221419595":"2022-03-14T19:59:38.997Z","0.0.0-dev-2022215181125":"2022-03-15T18:11:55.328Z","0.0.0-dev-2022215182043":"2022-03-15T18:21:22.517Z","0.0.0-dev-2022215183938":"2022-03-15T18:40:22.001Z","0.0.0-dev-2022215184036":"2022-03-15T18:41:09.024Z","0.0.0-dev-2022225182931":"2022-03-25T18:29:59.321Z","1.7.8":"2022-03-27T11:35:21.688Z","0.0.0-dev-2022228155140":"2022-03-28T15:52:15.785Z","0.0.0-dev-20223215463":"2022-04-02T15:46:31.394Z","0.0.0-dev-2022349032":"2022-04-04T09:01:08.417Z","0.0.0-dev-2022349233":"2022-04-04T09:03:08.689Z","0.0.0-dev-2022349957":"2022-04-04T09:10:24.129Z","0.0.0-dev-20223491859":"2022-04-04T09:19:33.763Z","0.0.0-dev-20223655213":"2022-04-06T05:52:43.041Z","0.0.0-dev-202236131344":"2022-04-06T13:14:18.635Z","0.0.0-dev-202236132312":"2022-04-06T13:23:40.504Z","0.0.0-dev-20223614103":"2022-04-06T14:10:33.767Z","0.0.0-dev-202236141416":"2022-04-06T14:14:45.008Z","1.8.0":"2022-04-07T15:34:32.099Z","2.0.0-next.0":"2022-04-15T15:22:20.377Z","2.0.0-next.1":"2022-04-22T06:05:29.522Z","2.0.0-next.2":"2022-05-05T08:20:58.944Z","2.0.0-next.3":"2022-05-05T18:21:12.236Z","2.0.0-next.4":"2022-05-09T08:41:08.115Z","2.0.0":"2022-05-12T17:52:14.610Z","0.0.0-next-dev-202241614737":"2022-05-16T14:08:04.465Z","0.0.0-dev-202241614743":"2022-05-16T14:08:11.632Z","0.0.0-dev-2022416204849":"2022-05-16T20:49:15.663Z","0.0.0-dev-202241784047":"2022-05-17T08:41:17.418Z","0.0.0-dev-202241794553":"2022-05-17T09:46:17.621Z","0.0.0-dev-202241710143":"2022-05-17T10:02:09.825Z","0.0.0-dev-202241710959":"2022-05-17T10:10:27.622Z","0.0.0-dev-202241716586":"2022-05-17T16:58:31.983Z","0.0.0-dev-2022419101754":"2022-05-19T10:18:26.841Z","0.0.0-dev-2022419173934":"2022-05-19T17:40:07.409Z","0.0.0-dev-2022419174740":"2022-05-19T17:48:09.178Z","0.0.0-dev-20224205231":"2022-05-20T05:23:35.892Z","0.0.0-dev-2022421153722":"2022-05-21T15:37:54.357Z","0.0.0-dev-202242121518":"2022-05-21T21:05:50.179Z","0.0.0-dev-20224239149":"2022-05-23T09:02:22.262Z","0.0.0-dev-2022423113827":"2022-05-23T11:38:54.084Z","0.0.0-dev-2022423121532":"2022-05-23T12:16:07.713Z","0.0.0-dev-2022423121615":"2022-05-23T12:16:50.834Z","0.0.0-dev-20224248246":"2022-05-24T08:03:19.793Z","0.0.0-dev-20224248516":"2022-05-24T08:05:49.113Z","0.0.0-dev-202242481651":"2022-05-24T08:17:26.897Z","2.0.1":"2022-05-24T12:28:15.200Z","0.0.0-dev-202255105723":"2022-06-05T10:57:56.073Z","0.0.0-dev-20225517307":"2022-06-05T17:30:48.749Z","0.0.0-dev-202255185818":"2022-06-05T18:58:47.516Z","0.0.0-dev-2022551939":"2022-06-05T19:03:39.729Z","0.0.0-dev-202256151938":"2022-06-06T15:20:09.902Z","0.0.0-dev-202256153840":"2022-06-06T15:39:31.927Z","0.0.0-dev-20225619634":"2022-06-06T19:07:03.280Z","0.0.0-dev-202256192154":"2022-06-06T19:22:32.762Z","2.0.2":"2022-06-06T20:41:34.299Z","0.0.0-dev-202257113227":"2022-06-07T11:32:55.651Z","0.0.0-dev-202257113310":"2022-06-07T11:33:36.726Z","0.0.0-dev-2022587541":"2022-06-08T07:06:14.577Z","0.0.0-dev-2022511155212":"2022-06-11T15:52:45.176Z","0.0.0-dev-2022511155356":"2022-06-11T15:54:29.488Z","0.0.0-dev-2022511155428":"2022-06-11T15:55:06.193Z","0.0.0-dev-2022513181240":"2022-06-13T18:13:09.743Z","0.0.0-dev-2022515163532":"2022-06-15T16:36:02.827Z","0.0.0-dev-2022516122241":"2022-06-16T12:23:14.317Z","0.0.0-dev-2022516151633":"2022-06-16T15:17:04.175Z","0.0.0-dev-202251616831":"2022-06-16T16:09:08.785Z","0.0.0-dev-2022518113258":"2022-06-18T11:33:31.075Z","0.0.0-dev-2022520143145":"2022-06-20T14:32:14.998Z","0.0.0-dev-2022520163758":"2022-06-20T16:38:40.082Z","0.0.0-dev-2022520164715":"2022-06-20T16:47:46.731Z","0.0.0-dev-2022520164752":"2022-06-20T16:48:27.047Z","2.0.3":"2022-06-21T07:47:56.509Z","0.0.0-dev-20226414445":"2022-07-04T14:44:29.059Z","0.0.0-dev-202264144818":"2022-07-04T14:49:05.775Z","0.0.0-dev-2022659325":"2022-07-05T09:03:56.937Z","0.0.0-dev-2022659431":"2022-07-05T09:05:03.286Z","0.0.0-dev-2022669710":"2022-07-06T09:07:51.735Z","0.0.0-dev-202268163535":"2022-07-08T16:36:20.487Z","0.0.0-dev-202268165050":"2022-07-08T16:51:22.078Z","0.0.0-dev-2022610103716":"2022-07-10T10:37:51.267Z","0.0.0-dev-2022610103924":"2022-07-10T10:40:00.246Z","2.1.0":"2022-07-10T10:57:14.392Z","0.0.0-dev-2022612222012":"2022-07-12T22:20:50.709Z","0.0.0-dev-202261316456":"2022-07-13T16:45:40.357Z","0.0.0-dev-202261317818":"2022-07-13T17:08:54.092Z","2.1.1":"2022-07-13T18:44:09.292Z","0.0.0-dev-202262285853":"2022-07-22T08:59:23.308Z","0.0.0-dev-2022623104923":"2022-07-23T10:49:51.786Z","2.1.2":"2022-07-25T05:10:40.233Z","0.0.0-dev-20220804193103":"2022-08-04T19:32:57.930Z","0.0.0-dev-20220804193815":"2022-08-04T19:38:56.403Z","0.0.0-dev-20220804194739":"2022-08-04T19:48:49.258Z","0.0.0-dev-20220804200605":"2022-08-04T20:07:12.675Z","0.0.0-dev-20220805062318":"2022-08-05T06:24:25.121Z","2.1.3":"2022-08-05T10:13:07.809Z","0.0.0-dev-20220811084042":"2022-08-11T08:41:40.676Z","0.0.0-dev-20220811093515":"2022-08-11T09:36:06.847Z","0.0.0-dev-20220811160709":"2022-08-11T16:08:14.017Z","0.0.0-dev-20220812060931":"2022-08-12T06:10:29.468Z","0.0.0-dev-20220813051625":"2022-08-13T05:17:22.141Z","0.0.0-dev-20220813052715":"2022-08-13T05:28:18.452Z","0.0.0-dev-20220813053727":"2022-08-13T05:38:35.100Z","0.0.0-dev-20220813055957":"2022-08-13T06:00:56.957Z","0.0.0-dev-20220813063717":"2022-08-13T06:38:12.191Z","0.0.0-dev-20220813070741":"2022-08-13T07:08:37.430Z","0.0.0-dev-20220813083358":"2022-08-13T08:34:55.419Z","2.1.4":"2022-08-13T10:50:10.437Z","2.1.5":"2022-08-14T07:11:02.460Z","0.0.0-dev-20220819125800":"2022-08-19T12:59:00.380Z","0.0.0-dev-20220819132034":"2022-08-19T13:21:24.808Z","0.0.0-dev-20220819142048":"2022-08-19T14:21:36.797Z","0.0.0-dev-20220819143632":"2022-08-19T14:37:28.648Z","0.0.0-dev-20220819191103":"2022-08-19T19:11:59.486Z","0.0.0-dev-20220820120308":"2022-08-20T12:03:55.264Z","0.0.0-dev-20220820124231":"2022-08-20T12:43:49.400Z","0.0.0-dev-20220820152257":"2022-08-20T15:24:09.918Z","0.0.0-dev-20220820165925":"2022-08-20T17:00:28.100Z","0.0.0-dev-20220820172220":"2022-08-20T17:23:30.548Z","0.0.0-dev-20220820173639":"2022-08-20T17:37:43.905Z","0.0.0-dev-20220820185458":"2022-08-20T18:56:04.047Z","0.0.0-dev-20220820193723":"2022-08-20T19:38:29.326Z","0.0.0-dev-20220820195548":"2022-08-20T19:56:54.334Z","0.0.0-dev-20220822051456":"2022-08-22T05:16:05.761Z","0.0.0-dev-20220822054045":"2022-08-22T05:41:53.376Z","0.0.0-dev-20220822055339":"2022-08-22T05:55:02.888Z","0.0.0-dev-20220822103611":"2022-08-22T10:37:26.140Z","0.0.0-dev-20220822184448":"2022-08-22T18:46:07.502Z","0.0.0-dev-20220823150801":"2022-08-23T15:09:09.461Z","0.0.0-dev-20220823165602":"2022-08-23T16:57:08.615Z","0.0.0-dev-20220823192757":"2022-08-23T19:29:21.313Z","0.0.0-dev-20220823195046":"2022-08-23T19:52:21.876Z","0.0.0-dev-20220824074122":"2022-08-24T07:42:29.279Z","0.0.0-dev-20220824080240":"2022-08-24T08:03:46.977Z","0.0.0-dev-20220824082222":"2022-08-24T08:23:49.615Z","2.1.6":"2022-08-24T08:47:00.799Z","0.0.0-dev-20220908052147":"2022-09-08T05:22:16.497Z","0.0.0-dev-20220908054014":"2022-09-08T05:40:47.111Z","0.0.0-dev-20220908084954":"2022-09-08T08:50:33.575Z","0.0.0-dev-20220909073735":"2022-09-09T07:38:13.206Z","0.0.0-dev-20220909074555":"2022-09-09T07:46:33.407Z","0.0.0-dev-20220909120637":"2022-09-09T12:07:15.657Z","0.0.0-dev-20220909123132":"2022-09-09T12:32:13.092Z","0.0.0-dev-20220909123934":"2022-09-09T12:40:13.277Z","0.0.0-dev-20220912120959":"2022-09-12T12:10:58.998Z","0.0.0-dev-20220912132201":"2022-09-12T13:22:57.986Z","0.0.0-dev-20220912133211":"2022-09-12T13:33:12.669Z","0.0.0-dev-20220914090509":"2022-09-14T09:06:18.799Z","0.0.0-dev-20220914105014":"2022-09-14T10:51:10.740Z","0.0.0-dev-20220916140800":"2022-09-16T14:08:49.093Z","0.0.0-dev-20220916141616":"2022-09-16T14:17:08.395Z","0.0.0-dev-20220916144141":"2022-09-16T14:42:40.045Z","0.0.0-dev-20220916164745":"2022-09-16T16:48:44.270Z","0.0.0-dev-20220919061024":"2022-09-19T06:11:22.857Z","2.1.7":"2022-09-19T07:37:20.634Z","0.0.0-dev-20220920121057":"2022-09-20T12:11:58.414Z","0.0.0-dev-20220921093814":"2022-09-21T09:39:41.241Z","0.0.0-dev-20220922114557":"2022-09-22T11:46:57.989Z","0.0.0-dev-20220922115811":"2022-09-22T11:59:14.721Z","0.0.0-dev-20220926164115":"2022-09-26T16:42:39.235Z","0.0.0-dev-20220926165450":"2022-09-26T16:55:50.827Z","0.0.0-dev-20220929105632":"2022-09-29T10:57:37.001Z","0.0.0-dev-20220929132459":"2022-09-29T13:26:18.209Z","2.1.8":"2022-10-03T09:12:35.817Z","0.0.0-dev-20221017063840":"2022-10-17T06:39:21.967Z","2.1.9":"2022-10-17T07:22:29.881Z","0.0.0-dev-20221107161407":"2022-11-07T16:15:20.020Z","0.0.0-dev-20221107181117":"2022-11-07T18:12:20.917Z","0.0.0-dev-20221107182607":"2022-11-07T18:27:09.405Z","0.0.0-dev-20221108071844":"2022-11-08T07:19:48.958Z","0.0.0-dev-20221108073543":"2022-11-08T07:36:56.255Z","0.0.0-dev-20221108075029":"2022-11-08T07:51:39.572Z","0.0.0-dev-20221108083411":"2022-11-08T08:35:06.435Z","0.0.0-dev-20221108090938":"2022-11-08T09:10:49.846Z","0.0.0-dev-20221108093520":"2022-11-08T09:36:40.989Z","0.0.0-dev-20221108100218":"2022-11-08T10:03:41.343Z","0.0.0-dev-20221108124603":"2022-11-08T12:47:03.462Z","2.1.10":"2022-11-14T11:53:12.023Z","0.0.0-dev-20221115102409":"2022-11-15T10:25:02.923Z","0.0.0-dev-20221116102301":"2022-11-16T10:23:48.539Z","0.0.0-dev-20221116103758":"2022-11-16T10:38:48.947Z","0.0.0-dev-20221116105413":"2022-11-16T10:55:02.154Z","0.0.0-dev-20221117065458":"2022-11-17T06:55:47.223Z","0.0.0-dev-20221117150258":"2022-11-17T15:03:54.199Z","0.0.0-dev-20221122115819":"2022-11-22T11:59:00.682Z","0.0.0-dev-20221122135803":"2022-11-22T13:58:53.389Z","0.0.0-dev-20221123123308":"2022-11-23T12:34:03.932Z","0.0.0-dev-20221123130515":"2022-11-23T13:05:57.521Z","0.0.0-dev-20221124103928":"2022-11-24T10:40:11.836Z","0.0.0-dev-20221124105520":"2022-11-24T10:56:11.140Z","0.0.0-dev-20221128164126":"2022-11-28T16:42:16.132Z","0.0.0-dev-20221128182021":"2022-11-28T18:21:34.009Z","0.0.0-dev-20221128183433":"2022-11-28T18:35:19.516Z","0.0.0-dev-20221128185230":"2022-11-28T18:53:19.054Z","2.1.11":"2022-11-29T06:12:22.241Z","0.0.0-dev-20221221110721":"2022-12-21T11:08:11.378Z","0.0.0-dev-20221221133224":"2022-12-21T13:33:11.159Z","0.0.0-dev-20221221152939":"2022-12-21T15:30:20.036Z","0.0.0-dev-20221222051548":"2022-12-22T05:16:39.462Z","0.0.0-dev-20221223180742":"2022-12-23T18:08:43.364Z","2.1.12":"2022-12-26T13:14:00.239Z","0.0.0-dev-20230102093714":"2023-01-02T09:38:02.446Z","0.0.0-dev-20230102095417":"2023-01-02T09:54:59.502Z","0.0.0-dev-20230106083209":"2023-01-06T08:33:05.976Z","0.0.0-dev-20230111055325":"2023-01-11T05:54:15.422Z","2.1.13":"2023-01-11T07:31:37.930Z","0.0.0-dev-20230111211417":"2023-01-11T21:15:24.770Z","0.0.0-dev-20230112113621":"2023-01-12T11:37:38.935Z","0.0.0-dev-20230112141201":"2023-01-12T14:13:33.071Z","0.0.0-dev-20230112143332":"2023-01-12T14:34:46.319Z","0.0.0-dev-20230112145104":"2023-01-12T14:52:07.897Z","0.0.0-dev-20230112152756":"2023-01-12T15:29:11.705Z","0.0.0-dev-20230112154520":"2023-01-12T15:46:26.620Z","2.1.14":"2023-01-12T16:05:57.195Z","0.0.0-dev-20230116120206":"2023-01-16T12:03:01.786Z","0.0.0-dev-20230116122157":"2023-01-16T12:23:04.060Z","0.0.0-dev-20230116124502":"2023-01-16T12:45:56.881Z","2.1.15":"2023-01-16T15:07:02.816Z","0.0.0-dev-20230207153012":"2023-02-07T15:31:08.731Z","0.0.0-dev-20230208112929":"2023-02-08T11:30:17.198Z","0.0.0-dev-20230208114919":"2023-02-08T11:50:09.891Z","0.0.0-dev-20230213123249":"2023-02-13T12:33:31.696Z","0.0.0-dev-20230213124817":"2023-02-13T12:48:59.297Z","0.0.0-dev-20230213131136":"2023-02-13T13:12:20.211Z","2.1.16":"2023-02-13T14:16:29.860Z","0.0.0-dev-20230320183136":"2023-03-20T18:32:36.531Z","0.0.0-dev-20230320184810":"2023-03-20T18:49:04.901Z","2.1.17":"2023-03-23T10:17:15.088Z","0.0.0-dev-20230329123951":"2023-03-29T12:40:33.307Z","0.0.0-dev-20230329140150":"2023-03-29T14:02:35.468Z","0.0.0-dev-20230329141708":"2023-03-29T14:17:53.080Z","0.0.0-dev-20230329144927":"2023-03-29T14:50:12.421Z","0.0.0-dev-20230330123203":"2023-03-30T12:33:08.337Z","0.0.0-dev-20230330124619":"2023-03-30T12:47:00.409Z","0.0.0-dev-20230330130626":"2023-03-30T13:07:27.039Z","2.1.18":"2023-03-30T18:43:15.349Z","0.0.0-dev-20230424201223":"2023-04-24T20:13:15.900Z","0.0.0-dev-20230424202839":"2023-04-24T20:29:28.693Z","0.0.0-dev-20230424205150":"2023-04-24T20:52:51.173Z","0.0.0-dev-20230424210540":"2023-04-24T21:06:30.646Z","0.0.0-dev-20230424221053":"2023-04-24T22:12:03.342Z","0.0.0-dev-20230424222806":"2023-04-24T22:29:08.588Z","0.0.0-dev-20230424225650":"2023-04-24T22:57:43.087Z","2.1.19":"2023-04-25T11:13:32.249Z","0.0.0-dev-20230528181900":"2023-05-28T18:19:52.600Z","0.0.0-dev-20230528183722":"2023-05-28T18:38:34.376Z","0.0.0-dev-20230528185153":"2023-05-28T18:52:46.045Z","0.0.0-dev-20230528190715":"2023-05-28T19:08:08.502Z","0.0.0-dev-20230528194103":"2023-05-28T19:42:09.710Z","0.0.0-dev-20230528200306":"2023-05-28T20:03:59.426Z","0.0.0-dev-20230531082239":"2023-05-31T08:23:33.613Z","0.0.0-dev-20230531084037":"2023-05-31T08:41:46.766Z","0.0.0-dev-20230531085907":"2023-05-31T08:59:58.508Z","2.2.0":"2023-05-31T09:44:29.851Z","0.0.0-dev-20230718122336":"2023-07-18T12:25:14.954Z","0.0.0-dev-20230718124717":"2023-07-18T12:48:56.078Z","0.0.0-dev-20230718130742":"2023-07-18T13:09:02.746Z","0.0.0-dev-20230718132637":"2023-07-18T13:28:09.092Z","2.3.0":"2023-07-18T23:00:54.432Z","0.0.0-dev-20230822131635":"2023-08-22T13:17:59.358Z","0.0.0-dev-20230822134434":"2023-08-22T13:45:29.560Z","0.0.0-dev-20230830093747":"2023-08-30T09:38:49.646Z","0.0.0-dev-20230830120642":"2023-08-30T12:07:47.337Z","0.0.0-dev-20230830133821":"2023-08-30T13:39:18.391Z","0.0.0-dev-20230908144305":"2023-09-08T14:44:11.722Z","2.3.1":"2023-09-08T23:04:16.960Z"},"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":["layout","component","grid","stack","wrap","box","aspect ratio","ui","badge","react","primitives","chakra ui"],"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/layout"},"description":"Chakra UI layout components that give you massive speed","maintainers":[{"email":"joseshegs@gmail.com","name":"segunadebayo"},{"email":"npm@grizzly.codes","name":"schroetier"}],"readme":"# @chakra-ui/layout\n\nA set of layout primitives that make it super easy to manage page and\ncomponents.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/layout\n\n# or\n\nnpm i @chakra-ui/layout\n```\n\n## Import Components\n\n```jsx\nimport { Box, Flex, Stack, Grid, Wrap, AspectRatio } from \"@chakra-ui/layout\"\n```\n\n## Usage\n\nBox is just a `div` on steroids. It gives you the ability to pass style props\n\n```jsx\n<Box color=\"tomato\" _hover={{ bg: \"red.500\", color: \"white\" }}>\n  Welcome to Box\n</Box>\n```\n\nFlex is just a `Box` with `display: flex`\n\n```jsx\n<Flex>\n  <Box flex=\"1\">Box 1</Box>\n  <Box>Box 2</Box>\n</Flex>\n```\n\nStack is used to group elements and apply a spacing between them. It stacks its\nchildren vertically by default.\n\n```jsx\n<Stack spacing=\"20px\">\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Stack>\n```\n\nAspectRatio is used to constrain its child to specific aspect ratio. It is\nmostly used for embedding videos, images, and maps.\n\n```jsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"./some-ig-story\" alt=\"Instagram story\" />\n</AspectRatio>\n```\n\nWrap is used to manage the distribution of child elements that are liable to\nwrap. It is mostly used for button groups, tag group, badge group, and chips.\n\n```jsx\n<Wrap spacing={3}>\n  <Box>Box 1</Box>\n  <Box>Box 2</Box>\n</Wrap>\n```\n\nBadge is used to render a badge. It can come in different variants and color\nschemes as defined in the `theme.components.Badge`\n\n```jsx\n<Badge variant=\"solid\" colorScheme=\"green\">\n  Verified <FaCheck />\n</Badge>\n```\n\nCenter is used to vertically and horizontally center its child\n\n```jsx\n<Center bg=\"blue.500\" borderRadius=\"4px\" boxSize=\"40px\">\n  <FaPhoneIcon />\n</Center>\n```\n\nContainer is used to manage content areas on a website or blog. It centers\nitself using `margin-left: auto` and `margin-right: auto`. It also applies a\ndefault max-width of `60ch` (60 characters)\n\n```jsx\n<Container>\n  <BlogContent />\n</Container>\n```\n\nSpacer is a component that takes up the remaining space in a flex container. It\nis mostly useful to manage space and wrapping in flex containers\n\n```jsx\n<Flex>\n  <Box boxSize=\"40px\" />\n  <Spacer />\n  <Box boxSize=\"40px\" />\n</Flex>\n```\n","readmeFilename":"README.md"}