{"_id":"@allforabit/styled-system","_rev":"10-d5dd1c0c41b0523dfd292904f1c7879a","name":"@allforabit/styled-system","dist-tags":{"latest":"2.2.13"},"versions":{"2.2.5":{"name":"@allforabit/styled-system","version":"2.2.5","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepare":"babel src -d dist","size":"bundlesize","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","test":"nyc ava","bench":"node bench","docs":"x0 dev app/App.js","pkg:clean":"node scripts/clean","pkg:test":"node scripts/test","pkg:prepare":"node scripts/run install"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"@compositor/x0":"^3.1.1","benchmark":"^2.1.4","is-ci":"^1.1.0","ava":"^0.25.0","babel-cli":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","bundlesize":"^0.16.0","codecov":"^2.2.0","nyc":"^11.0.3","react":"^16.2.0","react-test-renderer":"^16.2.0","remark":"^9.0.0","sinon":"^4.3.0"},"ava":{"require":["babel-register"],"babel":"inherit"},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bundlesize":[{"path":"dist/*.js"}],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"dependencies":{"prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.x || ^15.x || ^16.x"},"licenseText":"\n# The MIT License (MIT)\nCopyright (c) 2017-2018 Brent Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n","_id":"@allforabit/styled-system@2.2.5","dist":{"shasum":"1ec4fc5ec318f1cec1dd6250441d897cbe410142","tarball":"https://registry.npmjs.org/@allforabit/styled-system/-/styled-system-2.2.5.tgz","fileCount":7,"unpackedSize":43881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7D2bCRA9TVsSAnZWagAAz9wQAImft/fo/tus1qTXVH2m\nRRaq9ZjV3l92VVrE2K71aIEfNArzdaMg9ASeZodkwz5jJ3X+o+dm9r6cRGfK\nOgFhR9EH9cH8KUrSqL8YAp1SsN3vQPGlKUPDpfAtVqnyvpCbyHS3Cc2FqUfp\nmw+bG8btQ4qRSFmFIn+YDtJXJc9tPQ90F1i67G8l/7vqVMrjhSuwizi6E+oJ\nqYUQnei/X5jiHx3Y02vYshilM8oz9loOBvsQKY3kkxUGRJHmNtoBagRbzocy\n9MS2VSRcIKzVRwnrdup4iYyDdgL1U8fIexJxYEeYsWyWaBY8FgAFVkKW6G6l\nzH+C/PwLcUqB2dgeYPuw5LPksPghe79C6ZDUmgDqHCF5L+MkJjFuzEoW7fyS\ngfGOnajRr/tlBssluBh96gW8/KBvD92k3r8Z567VXVmFxxV9ZbFqREJ0QcC+\npAuqpAD61sP+uNx7cO5kuzwnycnA132q2tt66DHwdG+q+wJUg7cMbMF7o2yW\nyfkiVk2yzi3ZIrhgxS8T61JO1lPKsF1HnIq8bXohW+lMu+m4dTrU895zot6h\npS6bga5QZSNVlq0BGJ0CKmZFdLiO1e/u3MgUS7cGy4OR9GybkeguDmAtfi5q\nxj0PQUTgkn2oz07NhG/dLuYQBpuW2J6uNOG7a47tw23hA36y/ELEO+e/KLQ0\n626v\r\n=CnyG\r\n-----END PGP SIGNATURE-----\r\n","integrity":"sha512-HU8LgSK1u+oa2jUnGSi0hz1D7eGqrdgx08+dqPTmcML3eHvPKKbZ1kqFpqSXEm6k2ISA73K6C4WwM3NZ8u5RKQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTZ1Tc7sZT+pr4Hrs4oEpOldDUHCNpFJO+lWkvYANEuAiEA/L6I7Nt0RviuUOfo5Z6ANud4mLOAsnW2sTg4Urodivg="}]},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"_npmUser":{"name":"allforabit","email":"allforabit@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system_2.2.5_1525431705196_0.8559607223754184"},"_hasShrinkwrap":false},"2.2.7":{"name":"@allforabit/styled-system","version":"2.2.7","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepare":"babel src -d dist","size":"bundlesize","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","test":"nyc ava","bench":"node bench","docs":"x0 dev app/App.js","pkg:clean":"node scripts/clean","pkg:test":"node scripts/test","pkg:prepare":"node scripts/run install"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"@compositor/x0":"^3.1.1","ava":"^0.25.0","babel-cli":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.16.0","codecov":"^2.2.0","is-ci":"^1.1.0","nyc":"^11.0.3","react":"^16.2.0","react-test-renderer":"^16.2.0","remark":"^9.0.0","sinon":"^4.3.0"},"ava":{"require":["babel-register"],"babel":"inherit"},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bundlesize":[{"path":"dist/*.js"}],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"dependencies":{"prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.x || ^15.x || ^16.x"},"licenseText":"\n# The MIT License (MIT)\nCopyright (c) 2017-2018 Brent Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n","_id":"@allforabit/styled-system@2.2.7","dist":{"shasum":"9a5f6123d9ba2712858844e89716245c2c7c8178","tarball":"https://registry.npmjs.org/@allforabit/styled-system/-/styled-system-2.2.7.tgz","fileCount":7,"unpackedSize":43881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7Et4CRA9TVsSAnZWagAAmmYP/2Kx22pAQlH2Jgf1JWXr\nyXumrFBJxzPrRy7jJ34Kq0dvIx30ag2lvVTB2rMexYJHAoR0WGHlxLxSfYmx\n/usLueC57I+FtWFlKDd8x8jecxRQMSKQDxps+3+Bx6ChPiQvkOzF5saRDYJn\nQGj6+9usTDEz8vU6WpZSwccwY8ATuUnHbfQDmSFB7gexWpJwr7cLVk95lNoz\nX2b0p4kYCtgocS+3vp1QfWvEewOyv9Cwe0d2+PAGjN46jWXJMHhIdG8C6GYf\nXYWUUKMN6Raw4VwAj8+06OtOWQFCNbC5PPyc9+2kS7YBsG3+9L0zNW87OkAo\nRxyEu5QLNXzGPei3uT3ytC9YBx92ETvtVg/n8tuA0GwwDlTD7k2ni2wgkqW7\nVnYdXadoF0l+EHpaoEpfpF/XxwPoxwHdnX52Epyo/L3G9tgbrJYWirvDk+Tm\nX/Sc+YrmQrcKLXV2Q8KrPeKSti8eyifqPt/O5k7T0JGl1KAoT/mJO5s/ZXTs\nPWuOAgqQINKcsZs+IaVJ3UflFX/uvlx2CDN/9U3Z62i5wKXtYRqJTIIdn5ze\nNiZsyk3IV03kKUgD3tjp7TTt1pK/dN1RmLGOaf0uKhREx8eTUrtHyAzRhYQp\nSqpVacxy3HEN/p1m2HMEe2PObEwSB/g06zbqfrEo1RVzgV7lCEFXQ/dhKaM1\nK53T\r\n=wpZA\r\n-----END PGP SIGNATURE-----\r\n","integrity":"sha512-nWJF/U76Ini7XW/s0kw2AXFI8toLjMEX9bCf3eIEsGTvZ65qp/w7Mkn/7JsNKqvQn5lwOMfbnlpn/Qz88HqMdQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9j3zrAes9nQoeUSkQX9QWx7qSbd4m4LGcnyG+56gOVQIhAI5fHXLc69re01W4wvICxpet7JrlBGydT/w8yt1CX39z"}]},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"_npmUser":{"name":"allforabit","email":"allforabit@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system_2.2.7_1525435254492_0.1085157383020765"},"_hasShrinkwrap":false},"2.2.8":{"name":"@allforabit/styled-system","version":"2.2.8","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepare":"babel src -d dist","size":"bundlesize","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","test":"nyc ava","bench":"node bench","docs":"x0 dev app/App.js","pkg:clean":"node scripts/clean","pkg:test":"node scripts/test","pkg:prepare":"node scripts/run install"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"@compositor/x0":"^3.1.1","ava":"^0.25.0","babel-cli":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.16.0","codecov":"^2.2.0","is-ci":"^1.1.0","nyc":"^11.0.3","react":"^16.2.0","react-test-renderer":"^16.2.0","remark":"^9.0.0","sinon":"^4.3.0"},"ava":{"require":["babel-register"],"babel":"inherit"},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bundlesize":[{"path":"dist/*.js"}],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"dependencies":{"prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.x || ^15.x || ^16.x"},"gitHead":"c39cf8b1ad5a8d841b91b882df660c889875d0a1","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"homepage":"https://github.com/jxnblk/styled-system#readme","_id":"@allforabit/styled-system@2.2.8","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"allforabit","email":"allforabit@gmail.com"},"dist":{"integrity":"sha512-TPYmVPKgmp9jzLpGlUSed7SaNCdRfV2KkUonewjaEoN2KndWqSdaM9QAbOSlocjCEJumPyiY0kr/phI/fiS6rA==","shasum":"46ca1fa2d93491c3126fdddbf6ff39b4b2e27002","tarball":"https://registry.npmjs.org/@allforabit/styled-system/-/styled-system-2.2.8.tgz","fileCount":10,"unpackedSize":334843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7E5+CRA9TVsSAnZWagAA4hYQAJvgPNUWV4QqDpw0dX55\nhcqvr6wxNl+DJrzrCW4StYZv2PAHpdOIZ2TYRjSH0qvmma+XT/OZEeFVB4mi\nvpGiSW6zu5eAJDiAkbqswuddl3oAx4i7LxOPzi21hqxwMuPlgXv7fOQFKyEC\nxJupFG+q02YWy1/MUttcGEJYtI7b8p5INTzBU7bMttHTBHADLp2USoZ2vj6K\nh6BGpVUbvL0CUVY9d1YWbDGQPlUNwMa4dNfZ+vOtQzQrPG3iIyJnGmpy81fv\nYa4VAQlyIG85tJKomzByC1OgpvyFHIyR+srkZ8DsPd2iHHLrCla6FYTPkuzi\nhU70z4CyraJOWA6V6kTsGLWwnIRM1y3N4+bxjWvZf/bPV8farnDlSBnN1rbe\n7efvikJzFhOj9CGUvx4wGqvK35PqtwC0NHOC4Mmbr+R4Dh1zAFTsegwnal8W\n+2wuWRxsTQ8zRErfIEyBbvORNJsAavb0TRHhy8mG8HLHxePJIFS7SupoGLjN\nOZqabQLuYUFDWTfX6qRClId/2wV2e4vn1QC9jUtg1i3UwfnO5jFwAl2Csks5\nfAq7SZHY7nfrxGzxIHPW6TK8UgYp0s/aQ5l3CC0K8KnKYEdFazLihJjsWefl\n2tdTSs0Gonkhvn5qAtOSB5ej7DwCWOzbkKN4DjZXN3cAoJ996XKaoUXWT2U/\nCMdk\r\n=kuFf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkq5N3GCJdii8JkPWh2SCvABaQpESLjJggZiiOmwf99AiEAhrMfkXlOxXv3A8XZzVl4j/h5tn0XLwLNt0XfwUo7LbU="}]},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system_2.2.8_1525436028918_0.17716338890936778"},"_hasShrinkwrap":false},"2.2.9":{"name":"@allforabit/styled-system","version":"2.2.9","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepare":"babel src -d dist","size":"bundlesize","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","test":"nyc ava","bench":"node bench","docs":"x0 dev app/App.js","pkg:clean":"node scripts/clean","pkg:test":"node scripts/test","pkg:prepare":"node scripts/run install"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"@compositor/x0":"^3.1.1","ava":"^0.25.0","babel-cli":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.16.0","codecov":"^2.2.0","is-ci":"^1.1.0","nyc":"^11.0.3","react":"^16.2.0","react-test-renderer":"^16.2.0","remark":"^9.0.0","sinon":"^4.3.0"},"ava":{"require":["babel-register"],"babel":"inherit"},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bundlesize":[{"path":"dist/*.js"}],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"dependencies":{"prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.x || ^15.x || ^16.x"},"gitHead":"c39cf8b1ad5a8d841b91b882df660c889875d0a1","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"homepage":"https://github.com/jxnblk/styled-system#readme","_id":"@allforabit/styled-system@2.2.9","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"allforabit","email":"allforabit@gmail.com"},"dist":{"integrity":"sha512-HbU/iWBTLMgj4xfbxaCAXqsVItkG2y7G4D6y1jbIlhtmHu91joFhMa+lH5hLqgcEGSXkMdDIXL2tzUJi/aTRkQ==","shasum":"47ef806357c102556f47004819a487e7ab086c4a","tarball":"https://registry.npmjs.org/@allforabit/styled-system/-/styled-system-2.2.9.tgz","fileCount":10,"unpackedSize":335044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7FSfCRA9TVsSAnZWagAAfZQP/2WCHpHhMQivLV1AnAG1\nZfB3CoJw/5nIBU1zGg2DnTEN5VcQR6gOZl1O4tU0LZI+KMnTwvyYssRDND4i\nCn96mFJPSydn87IRIpukrq/p6SvJgZRGsU5i8ibsS0bi2xH/IG1zMN9BuGGZ\n20XUt85qeyHw8Qff44Bu6jjKTc+tsWPRNqzr/pELj1IsAkxb+cRGGkWq5Miw\nsu47twV4Qv72xOnYqQ5Err2O9WfMHd7qQyIa3W7uczOXvJydV/UevafklXdZ\nCEbakK6OT7xkXGAlLLwPyeqLGLzosKOG0AAHSzRcJ0oHYRCeG82Mw5mL+geF\nBuofGsqdUu6/hq4/lYMAe6lbvswbu14M/9lKsLZ4TJSAQH9heFwYbfFXQsr3\nGXgYwjjgXH3fv7xs+1hbq9DrtJyTcXFoFPvLP0f9oadpW46cEncYbhudqjxg\n6ohpUwpiVodMX5kGXJMxgYOUhWWgKYoeNxFLsj6qXZS4BXY+yKf1ondC13PF\nypm3hfOYiulCVUvsEuBFfkUqkSYSjViFptIf30n/IPClNDPFxv5cu73/vYgN\nWE8SksCBWvl+Jsry7UxpDdI6Fhg/TMGWSGKWhnT74iCK23VTSQcnGvkf/vC3\nIbz1sCNFJIlcOqBlIGlSc8N2tz7qiGTwXrYf8pm5ly8opDSYxUktTZRvH+uu\nPWJb\r\n=EJ5y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/h+GX6G0QpIJyWOguH9D6vlVSQpm30gkv9VackHVuPAiEAxQyAr7WW/yrC7Xjmv2S3GA6Ut/E170Lbohu7jk76erI="}]},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system_2.2.9_1525437594351_0.47348887366706816"},"_hasShrinkwrap":false},"2.2.10":{"name":"@allforabit/styled-system","version":"2.2.10","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepare":"babel src -d dist","size":"bundlesize","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","test":"nyc ava","bench":"node bench","docs":"x0 dev app/App.js","pkg:clean":"node scripts/clean","pkg:test":"node scripts/test","pkg:prepare":"node scripts/run install"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"@compositor/x0":"^3.1.1","ava":"^0.25.0","babel-cli":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.16.0","codecov":"^2.2.0","is-ci":"^1.1.0","nyc":"^11.0.3","react":"^16.2.0","react-test-renderer":"^16.2.0","remark":"^9.0.0","sinon":"^4.3.0"},"ava":{"require":["babel-register"],"babel":"inherit"},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bundlesize":[{"path":"dist/*.js"}],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"dependencies":{"prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.x || ^15.x || ^16.x"},"licenseText":"\n# The MIT License (MIT)\nCopyright (c) 2017-2018 Brent Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n","_id":"@allforabit/styled-system@2.2.10","dist":{"shasum":"45302870ba30e87c9b527b95f8d30fd1c3aa87d7","tarball":"https://registry.npmjs.org/@allforabit/styled-system/-/styled-system-2.2.10.tgz","fileCount":7,"unpackedSize":43882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbF/6SCRA9TVsSAnZWagAAS3oQAIZwRwdmq8466ZaQBHk/\nq3tQSx4587QlAR7Nl5r6+ihjfsIgPlu3K7XSeo5c335tTsdqeJEn7EIgyusQ\nH6CMy3otJbR119NeZwGxz6GOT0K8RC/Tfcu3nlUwY6+GlUw6YTz+ffLfGctL\nGBclDTC07gw8FQkT+cgbEfYI3Bo/Wi7wLH3y0aYiq1rL/ra9YkMMSpYbwdpK\nZaeGH/OvXsi1pRs346qLIv+n4se/Uzc3XpnfB50qsEteH5YuzPpGBFab+6u8\nzsdKfUlF3g+XQJ9/QgVw4GW7I1xUljQ6wpKRvs4Awt3YZHhbMNR6elQzzN0/\nqvOQHDFpidNM2QnwY2sR9roikC1cDfzXQxSmkWUTHPeL1lLJJAAJ5r0TfLx8\n2Aw9deVvYiLB9pMAASc5FHRxms9szYB+dJbasgtg52Kui5dgNfTZLebRomLR\ndsOYaPIszlvnFFVuNsKTO3EXmGZGBum4w4BkRZjtXPPd8E8grBj14SRjrfD8\n3b6/6p7WqxgFLZk6NOi481qt1uaSHNmn8mo5oVtEzt+AmqpPQgcTJ4BvIq97\nvOmIpX7KV0Up50DqarlhrVZPKGemCdaw1/pcfR3dkemgGG9710h5uS9sjEyH\nDe2pq93QhfBY8uZv7O71PYIOxMlnspCDg8bc4jbKAEaBjibocXyUGtWXmgsb\n9CSP\r\n=D+nK\r\n-----END PGP SIGNATURE-----\r\n","integrity":"sha512-pnPwhw5x2VKjE6O5H/SsN71oUoSGABm1TrPrMmTMDycnU4B5N1Etj+YitzHR2DCpcsMlZLAviIAZ/Uct14TUiQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZLE77OodIO0nLZ8evR+v5hhUHltVoCBG9ijxc9AmjMAiEA72Sui+41bc5nhsJNOTvg9LWFt08mjasEA/ytNTMnn0w="}]},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"_npmUser":{"name":"allforabit","email":"allforabit@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system_2.2.10_1528299153339_0.6541175797192946"},"_hasShrinkwrap":false},"2.2.11":{"name":"@allforabit/styled-system","version":"2.2.11","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepare":"babel src -d dist","size":"bundlesize","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","test":"nyc ava","bench":"node bench","docs":"x0 dev app/App.js","pkg:clean":"node scripts/clean","pkg:test":"node scripts/test","pkg:prepare":"node scripts/run install"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"@compositor/x0":"^3.1.1","ava":"^0.25.0","babel-cli":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.16.0","codecov":"^2.2.0","is-ci":"^1.1.0","nyc":"^11.0.3","react":"^16.2.0","react-test-renderer":"^16.2.0","remark":"^9.0.0","sinon":"^4.3.0"},"ava":{"require":["babel-register"],"babel":"inherit"},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bundlesize":[{"path":"dist/*.js"}],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"dependencies":{"prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.x || ^15.x || ^16.x"},"licenseText":"\n# The MIT License (MIT)\nCopyright (c) 2017-2018 Brent Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n","_id":"@allforabit/styled-system@2.2.11","dist":{"shasum":"4e36737b89611715a6d23ed8224bcb8f0387c81c","tarball":"https://registry.npmjs.org/@allforabit/styled-system/-/styled-system-2.2.11.tgz","fileCount":7,"unpackedSize":43882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGDFyCRA9TVsSAnZWagAA55QP/1yWonlcLgdnyIIP1TYV\nSxYIZweGCtk1HFVG0VYb5JAbvruzL8XLQAAQYKvPLpLfJljSPHI8wHey5q0R\nllwphB9QXivOr0K+3xwh7TS6pW8u7mw3pBP+fFrWa3jcaSltBXwFZ1fldCKb\n4wQeQ8DgjsIyArD/sSO6Ftv8ZC0xdO7IPYfH/O3USaQywu7EQQhj6BF3Nvxc\nCyFUHTPwws4lKn6uF1Eb7fsMC8m0tN3O2g8CeIUKptQxCHGxfjxe8MlBr2RQ\nMOJCGEMecUGDNdBVoQW5VwiRBmg55XDoPAVPrRiUVd3COVRs2lWBZIvleXS6\n5synguxVWjCXbUjwHSJiWj04hdkt2DGNyK9vSbu3+KJ8CeYXiRHe/+OcX0QH\nfYDpZJ+/9EtjigCnP+cGIxJRv7bi59H+u43MvpIummaT6lzZwp+6zdtsTimk\n5XnW2aSD9GLAus7R78XL7Aw3NeNystnGO+0A7Eedl0dvhElqchhC8+FnpUO9\nnu6q8aByLsQ2X9k/QTmApKJbvDEv0su6W4RIUEBuFcqvwT0QWTRZ0B1j908P\nDfTWuOAndTQ8Sp78oNy4ZEL+QMYBSWL23gj44coXELE1KgujSCTQB/n07CYC\n9dbcPvxWWwdynzPciRbZD8kfGnyjSVelXgYLqxIG0D0HUAZKmT4Lc9cS/Rqh\nCPBW\r\n=kygD\r\n-----END PGP SIGNATURE-----\r\n","integrity":"sha512-dysNQtKqbyNlkFwI9cVthckExKSXJNeeL4HDzNSVnupCK3oLruwofmkHSFZChNn7RHFsVv120j1uWswMKcdMLQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG430Ta6GnKYRTGgAwV9UudPzYm95jErv5E2eOCwj40QAiEA405aFniaS83AciUShGvNODWs6Q5JS1gr51rgiXM7hkc="}]},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"_npmUser":{"name":"allforabit","email":"allforabit@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system_2.2.11_1528312176913_0.7164241891223437"},"_hasShrinkwrap":false},"2.2.12":{"name":"@allforabit/styled-system","version":"2.2.12","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepare":"babel src -d dist","size":"bundlesize","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","test":"nyc ava","bench":"node bench","docs":"x0 dev app/App.js","pkg:clean":"node scripts/clean","pkg:test":"node scripts/test","pkg:prepare":"node scripts/run install"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"@compositor/x0":"^3.1.1","ava":"^0.25.0","babel-cli":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.16.0","codecov":"^2.2.0","is-ci":"^1.1.0","nyc":"^11.0.3","react":"^16.2.0","react-test-renderer":"^16.2.0","remark":"^9.0.0","sinon":"^4.3.0"},"ava":{"require":["babel-register"],"babel":"inherit"},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bundlesize":[{"path":"dist/*.js"}],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"dependencies":{"prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.x || ^15.x || ^16.x"},"gitHead":"c39cf8b1ad5a8d841b91b882df660c889875d0a1","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"homepage":"https://github.com/jxnblk/styled-system#readme","_id":"@allforabit/styled-system@2.2.12","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"allforabit","email":"allforabit@gmail.com"},"dist":{"integrity":"sha512-GO9nIyEOirXXFYvCQBspQea3SzgrEfKR/XxzKUDbMcVW+SXajQPTGSTVqLXNBDuSncM/p65XQORdeynYSQ4iZw==","shasum":"a3ee0ad3e6c045d2153884e2280bd57111edcfb9","tarball":"https://registry.npmjs.org/@allforabit/styled-system/-/styled-system-2.2.12.tgz","fileCount":10,"unpackedSize":335050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGDGmCRA9TVsSAnZWagAAcfwP/1py1xvq7JJqWSyca1Gj\nX2lCb/7R6O9Nl3VP3jjbWJbClsP4jOKOL0tLUIrRkw6WNyZrUSSOvQ3in8wx\nOlL+LWo7Krxe2B+xmNJWJyo7riWFSg0vnpJMCvdYCC+tuW4mXPNQxXjktq/1\n6MfBsIvIIHHc0GuPOSS0EUEI0tz5jZFzumyh6T+VyuB/7RmpazX1YDfmJn32\n7AzfNgAe7a74Gp2Yyp+pqH6Qge0wya3gLgd5B66T1YMlHZL8abBqVxLHUlyI\n4iJ5UBCbWipPlgfINcubBPHnDphxEwjC080tTSbCIVGYV8n1rci8pSprG037\nJLMMDPbn/aHUlsHFnQbTgqTPlnvB3q+fmT3YCwv6XZN/Ob6VNtGx7DGLFSmu\nCY/3GFuQlBf0z6c3GSooFklwt/jZfi2SUgZjjIEbpZIh3iq1aSTYcnSYaL+r\nmR09bqcYVl7LPwTzP1VTqmu7rJAo3OU0xbcR8FX5o/itDNzoehQ3DvR9z7+Q\nHdyKlXd8Uw4WMzE4T3HuGSMpkTshs2IqSkWQAl15wKLrAwGOg43YYfTY0SpS\nSOC2Ky64BBtXKIkq7f7K0upM1wXveFR0CZ10P6R9IFHIHCq5PHVfQXUPlXBi\naZEnhdGfRzBwPk2pvO72M63rOaz5blPUJLX35BCXnDDqfAVF7mbSMW9ELrry\nyinR\r\n=mWEG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmTziClW4Uvcqp3M4Raromnq3YL8DlQB3zd42YfiOSZAiAf38qPP4Immo6ufzWVsaOVy4uJ7EgE153uHYvVWyL6rA=="}]},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system_2.2.12_1528312229432_0.8448205664947521"},"_hasShrinkwrap":false},"2.2.13":{"name":"@allforabit/styled-system","version":"2.2.13","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","main":"dist/index.js","scripts":{"prepare":"babel src -d dist","size":"bundlesize","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","test":"nyc ava","bench":"node bench","docs":"x0 dev app/App.js","pkg:clean":"node scripts/clean","pkg:test":"node scripts/test","pkg:prepare":"node scripts/run install"},"keywords":["react","css-in-js","styled-components","glamorous"],"author":{"name":"Brent Jackson"},"license":"MIT","devDependencies":{"@compositor/x0":"^3.1.1","ava":"^0.25.0","babel-cli":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.24.1","benchmark":"^2.1.4","bundlesize":"^0.16.0","codecov":"^2.2.0","is-ci":"^1.1.0","nyc":"^11.0.3","react":"^16.2.0","react-test-renderer":"^16.2.0","remark":"^9.0.0","sinon":"^4.3.0"},"ava":{"require":["babel-register"],"babel":"inherit"},"nyc":{"ignore":["test.js","docs","bench","examples"]},"bundlesize":[{"path":"dist/*.js"}],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"dependencies":{"prop-types":"^15.6.0"},"peerDependencies":{"react":"^0.14.x || ^15.x || ^16.x"},"gitHead":"c39cf8b1ad5a8d841b91b882df660c889875d0a1","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"homepage":"https://github.com/jxnblk/styled-system#readme","_id":"@allforabit/styled-system@2.2.13","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"allforabit","email":"allforabit@gmail.com"},"dist":{"integrity":"sha512-ivL1+XGRcdtYdWhg+TxFNpbqslCLLnWIhvw8kPQ3wm/TnQSxJauWhLRhpKbk8ARvhrkLNHimiMKOtCfb2qxOAw==","shasum":"08fa488ef6162c363bc718092f0a376b133fadf5","tarball":"https://registry.npmjs.org/@allforabit/styled-system/-/styled-system-2.2.13.tgz","fileCount":10,"unpackedSize":335062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHjodCRA9TVsSAnZWagAAFO4P/3o/8uE2dTMxmiSeHpF4\n1aefLdZK1GGyEqnv6gHIs5SmFMAykoX5WbK6WVLyIhKcuqGa6rKOoR82PNHI\nxhV6bFHJ42xJ7mWjOjRQYKWIE4iEw4UNR+rhCcpXrqCGG7GPSzFkf78eQaTx\nvZVDcXrlZ3nZQD8cSI/RU3zxiWN0+RKE/5lTZBRhkUxNUu/klwFEpkeNHe62\nINaLppopXRXbRIfW70Hj8DWWBa5s8dLVT9CzET2/B/twwgYknYkHP6idhpLG\nU2RVS4oSr5O4Y66PiPg7MHn8y8bbpwWzM9uy+rmF40S5eDs8sg711oSrNNEC\npP6s9x9ZtvNWC/UaLt1cOBkVEyVQz2yBZnSGyJGzDw1Hc7rvtzny1EhuDDeE\njeiX3q9+JCd1S6eQ7Xj/4fSsDAe4GiZz7RmUqliV0fjLRJDTJMtBhAn873EC\n365BauT14v8RcXzMry9hfIb6OOPh7jsJwxygw3dVqVTgbxreZAvU+04KtjcL\nX4F+QjaT3acAnAK8pSHAKfE1YJwwozFmkLcRW41/87PgbvpWvwM2V2L21HFA\nlX9qK8RJpNnD8NzwIUGWMLnoqUczr0lTIgFe7To022hjwz2y5e0mV4kmyPuU\n3ooFvtW9ns/eG8tHelGUhSS7L84titp5drn3kx6vRFX0LCL+jQv5eMMnDLcB\nF+EU\r\n=66ZL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD19U6BZbvIXa7q7mj7pa0KVO3U/TU29229cUXwAH4A2wIgUCxY01e3TORsInZMG/1HpyCnhWmvfM3F0JDTKTeBruU="}]},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-system_2.2.13_1528707611485_0.6825335250785098"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-04T11:01:45.129Z","2.2.5":"2018-05-04T11:01:45.277Z","modified":"2022-06-12T14:33:52.841Z","2.2.7":"2018-05-04T12:00:54.629Z","2.2.8":"2018-05-04T12:13:49.045Z","2.2.9":"2018-05-04T12:39:54.428Z","2.2.10":"2018-06-06T15:32:33.432Z","2.2.11":"2018-06-06T19:09:36.992Z","2.2.12":"2018-06-06T19:10:29.530Z","2.2.13":"2018-06-11T09:00:11.582Z"},"maintainers":[{"name":"allforabit","email":"allforabit@gmail.com"}],"description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","keywords":["react","css-in-js","styled-components","glamorous"],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"author":{"name":"Brent Jackson"},"license":"MIT","readme":"# styled-system\n\nDesign system utilities for [styled-components][sc] and other css-in-js libraries\n\n[![Build Status][build-badge]][build]\n[![Coverage][coverage-badge]][coverage]\n\n[build-badge]: https://img.shields.io/travis/jxnblk/styled-system/master.svg?style=flat-square\n[build]: https://travis-ci.org/jxnblk/styled-system\n[coverage-badge]: https://img.shields.io/codecov/c/github/jxnblk/styled-system.svg?style=flat-square\n[coverage]: https://codecov.io/github/jxnblk/styled-system\n\n```sh\nnpm i styled-system\n```\n\n## Features\n\n- Add style props that hook into your own theme\n- Responsive prop values for quickly setting responsive font-size, margin, padding, width, and more\n- Influenced by constraint-based design system principles\n- Typographic scale\n- Spacing scale for margin and padding\n- Default 8px grid\n- Works with any color palette\n- Works with most css-in-js libraries, including [styled-components][sc], [glamorous][glamorous], [emotion][emotion], [fela][fela], and [cxs][cxs]\n- Used in [Rebass](http://jxnblk.com/rebass), [Grid Styled](http://jxnblk.com/grid-styled/), and the [Priceline Design System](https://github.com/pricelinelabs/design-system)\n\n> \"The future of css-in-js is going to look something like styled-system with its responsive values.\"
\n> – [Kye Hohenberger](https://mobile.twitter.com/tkh44/status/905474043729416192)\n\n> \"Fantastic set of tools that offer the ease and API of tachyons/functional CSS but, are way more customisable.\"\n> – [Varun Vachhar](https://mobile.twitter.com/winkerVSbecks/status/955619873463431168)\n\n> \"Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for.\"
\n> – [Nathan Young](https://mobile.twitter.com/nathanyoung/status/891353221880360960)\n\n### Table of Contents\n\n- [Usage](#usage)\n- [Getting Started](#getting-started)\n- [How it Works](#how-it-works)\n- [Responsive Styles](#responsive-styles)\n- [API](#api)\n- [system-components](#system-components)\n- [Default Theme](#default-theme)\n- [Troubleshooting](#troubleshooting)\n- [Related](#related)\n\n## Usage\n\n```jsx\n// Example uses styled-components, but styled-system works with most other css-in-js libraries as well\nimport styled from 'styled-components'\nimport { space, width, fontSize, color } from 'styled-system'\n\n// Add styled-system functions to your component\nconst Box = styled.div`\n ${space}\n ${width}\n ${fontSize}\n ${color}\n`\n```\n\nEach style function exposes its own set of props that style\nelements based on values defined in a theme.\n\n```jsx\n// width: 50%\n\n\n// font-size: 20px (theme.fontSizes[4])\n\n\n// margin: 16px (theme.space[2])\n\n\n// padding: 32px (theme.space[3])\n\n\n// color\n\n\n// color: #333 (theme.colors.gray[0])\n\n\n// background color\n\n```\n\n## Responsive Style Props\n\nSet responsive width, margin, padding, font-size, and other properties with a shorthand array syntax.\n[Read more](#responsive-styles)\n\n```jsx\n// responsive width\n\n\n// responsive font-size\n\n\n// responsive margin\n\n\n// responsive padding\n\n```\n\n## Getting Started\n\nAlthough it's not required, styled-system works best with a theme that's tailored to your own custom styles.\nCreate a `theme.js` file that exports an object and add a [ThemeProvider](https://www.styled-components.com/docs/advanced#theming)\nto the root of your application.\n\n```js\n// empty theme.js\nconst theme = {}\n\nexport default theme\n```\n\n```jsx\n// root App component\nimport React from 'react'\nimport { ThemeProvider } from 'styled-components'\nimport theme from './theme'\n\nconst App = props => (\n \n {/* ... */}\n \n)\n```\n\nMost utility functions in styled-system will attempt to find a value from your theme first,\nthen fallback to a hard-coded value if it hasn't been defined in your theme.\nFor example, defining a `colors` object can make using a common color palette across your app simpler.\n\n```js\n// theme.js\nconst colors = {\n text: '#024',\n blue: '#07c'\n}\n\nconst theme = {\n colors\n}\n\nexport default theme\n```\n\nWith a component that uses the `color` function from styled-system, the name of the color defined in your theme can be used as a prop.\n\n```jsx\n// picks up the value `#07c` from the theme\n\n```\n\nWhen a value is passed that's **not** in the theme, it will be passed as a raw value.\n\n```jsx\n// renders the CSS `tomato` color since it's not defined in theme\n\n```\n\nIt's recommended to add objects and array scales to your theme to ensure consistent, constraint-based values are used throughout your app.\nAll theme values are optional, so use your own discretion when creating a theme.\nSee the [Default Theme](#default-theme) section for a reference to the default fallback values.\n\n```js\n// theme.js\n\n// breakpoint values\n// any array length works with styled-system\nconst breakpoints = [\n '40em', '52em', '64em'\n]\n\nconst colors = {\n text: '#024',\n blue: '#07c',\n // nested objects work as well\n dark: {\n blue: '#058'\n },\n // arrays can be used for scales of colors\n gray: [\n '#333',\n '#666',\n '#999',\n '#ccc',\n '#eee',\n '#f6f6f6',\n ]\n}\n\n// space is used for margin and padding scales\n// it's recommended to use powers of two to ensure alignment\n// when used in nested elements\n// numbers are converted to px\nconst space = [\n 0, 4, 8, 16, 32, 64, 128, 256, 512\n]\n\n// typographic scale\nconst fontSizes = [\n 12, 14, 16, 20, 24, 32, 48, 64, 96, 128\n]\n\n// for any scale, either array or objects will work\nconst lineHeights = [\n 1, 1.125, 1.25, 1.5\n]\n\nconst fontWeights = {\n normal: 500,\n bold: 700\n}\n\nconst letterSpacings = {\n normal: 'normal',\n caps: '0.25em'\n}\n\n// border-radius\nconst radii = [\n 0, 2, 4, 8\n]\n\nconst borders = [\n 0, '1px solid', '2px solid'\n]\n\nconst shadows = [\n `0 1px 2px 0 ${colors.text}`,\n `0 1px 4px 0 ${colors.text}`\n]\n\nconst theme = {\n breakpoints,\n colors,\n space,\n fontSizes,\n lineHeights,\n fontWeights,\n letterSpacings,\n radii,\n borders,\n shadows,\n}\n\nexport default theme\n```\n\nNext, create a set of UI components that provide convenient style props to the values defined in the theme.\nIt's recommended to keep components simple and focused on doing one thing well.\nFor UI components, it's common to separate them according to different concerns, such as layout, typography, and other styles.\nHowever, there may be some general purpose style props that you'd like to apply consistently across your entire component set, such as margin, padding, and color.\n\n```js\nimport styled from 'styled-components'\nimport {\n space,\n color,\n width,\n fontSize,\n fontWeight,\n textAlign,\n lineHeight\n} from 'styled-system'\n\n// Example of a general purpose Box layout component\nexport const Box = styled.div`\n ${space}\n ${color}\n ${width}\n`\n\n// General purpose typographic component\nexport const Text = styled.div`\n ${space}\n ${color}\n ${fontSize}\n ${fontWeight}\n ${textAlign}\n ${lineHeight}\n`\n```\n\n## How it Works\n\nMost CSS-in-JS libraries accept functions as arguments to create dynamic styles based on props.\nFor example, the following sets color dynamically in styled-components based on the `color` prop:\n\n```js\nimport styled from 'styled-components'\n\nconst Box = styled.div`\n color: ${props => props.color};\n`\n```\n\nBeyond just passing a dynamic value, an entire style declaration can be returned in functions like this.\n\n```js\nimport styled from 'styled-components'\n\nconst getColor = props => `color: ${props.color};`\n\nconst Box = styled.div`\n ${getColor}\n`\n```\n\nStyle object can also be returned, which is a much simpler way to handle dynamic values in JavaScript.\n\n```js\nimport styled from 'styled-components'\n\n// works exactly the same as the previous function\nconst getColor = props => ({\n color: props.color\n})\n\nconst Box = styled.div`\n ${getColor}\n`\n```\n\nBy using style objects instead of embedded CSS strings, styled-system is compatible with other libraries,\nsuch as [glamorous][glamorous] and [emotion][emotion].\n\nThe core utilities in styled-system are built on this pattern and consist of functions that take `props` as an argument\nand return style objects,\nwhile making it simpler to use values from a theme and apply styles responsively across breakpoints.\n\nThese style functions can be written on a one-off basis, but styled-system is meant to help reduce boilerplate, ensure a consistent styling API, and speed the development of React-based design systems.\n\n\n## Responsive Styles\n\nOften when working on responsive layouts, it's useful to adjust styles across a singular dimension –\nsuch as font-size, margin, padding, and width.\nInstead of manually managing media queries and adding nested style objects throughout a code base,\nstyled-system offers a convenient shorthand syntax for adding responsive styles with a mobile-first approach.\nWhile this syntax can seem odd at first, it can become a powerful way to manage responsive typography and layouts.\n\nAll core props accept arrays as values for mobile-first responsive styles.\n\n```jsx\n\n\n// responsive font size\n\n\n// responsive margin\n\n\n// responsive padding\n\n```\n\n\n## API\n\n- [Core](#core)\n - [space](#space-responsive) (margins & paddings)\n - [width](#width-responsive)\n - [fontSize](#fontsize-responsive)\n - [color](#color-responsive) (and background-color)\n- [Typography](#typography)\n- [Layout](#layout)\n- [Flexbox](#flexbox)\n- [Borders](#borders)\n- [Position](#position)\n- [Misc](#misc)\n- [Pseudo-classes](#pseudo-classes)\n- [Complex styles](#complex-styles)\n- [Table of Style Props](#table-of-style-props)\n- [Utilities](#utilities)\n - [themeGet](#themeget)\n - [propTypes](#proptypes)\n- [Customize](#customize)\n - [style](#style)\n - [responsiveStyle](#responsivestyle)\n - [pseudoStyle](#pseudostyle)\n - [complexStyle](#complexstyle)\n\n## Core\n\n### space (responsive)\n\n```js\nimport { space } from 'styled-system'\n```\n\nThe space utility converts shorthand margin and padding props to margin and padding CSS declarations.\n\n- Numbers from 0-4 (or the length of `theme.space`) are converted to values on the [spacing scale](#spacing-scale).\n- Negative values can be used for negative margins.\n- Numbers greater than the length of the `theme.space` array are converted to raw pixel values.\n- String values are passed as raw CSS values.\n- And array values are converted into [responsive values](#responsive-styles).\n\nMargin and padding props follow a shorthand syntax for specifying direction.\n\n- `m`: margin\n- `mt`: margin-top\n- `mr`: margin-right\n- `mb`: margin-bottom\n- `ml`: margin-left\n- `mx`: margin-left and margin-right\n- `my`: margin-top and margin-bottom\n- `p`: padding\n- `pt`: padding-top\n- `pr`: padding-right\n- `pb`: padding-bottom\n- `pl`: padding-left\n- `px`: padding-left and padding-right\n- `py`: padding-top and padding-bottom\n\n```jsx\n// examples (margin prop)\n\n// sets margin value of `theme.space[2]`\n\n\n// sets margin value of `-1 * theme.space[2]`\n\n\n// sets a margin value of `16px` since it's greater than `theme.space.length`\n\n\n// sets margin `'auto'`\n\n\n// sets margin `8px` on all viewports and `16px` from the smallest breakpoint and up\n\n```\n\n### width (responsive)\n\n```js\nimport { width } from 'styled-system'\n```\n\nThe width utility parses a component's `width` prop and converts it into a CSS width declaration.\n\n- Numbers from 0-1 are converted to percentage widths.\n- Numbers greater than 1 are converted to pixel values.\n- String values are passed as raw CSS values.\n- And arrays are converted to [responsive width styles](#responsive-styles).\n\n```jsx\n// examples\n\n// width `50%`\n\n\n// width `256px`\n\n\n// width `'2em'`\n\n\n// width `100%` on all viewports and `50%` from the smallest breakpoint and up\n\n```\n\n### fontSize (responsive)\n\n```js\nimport { fontSize } from 'styled-system'\n```\n\nThe fontSize utility parses a component's `fontSize` prop and converts it into a CSS font-size declaration.\n\n- Numbers from 0-8 (or `theme.fontSizes.length`) are converted to values on the [font size scale](#font-size-scale).\n- Numbers greater than `theme.fontSizes.length` are converted to raw pixel values.\n- String values are passed as raw CSS values.\n- And array values are converted into [responsive values](#responsive-styles).\n\n```jsx\n// examples\n\n// font-size of `theme.fontSizes[3]`\n\n\n// font-size `32px`\n\n\n// font-size `'2em'`\n\n\n// font-size `10px` on all viewports and `12px` from the smallest breakpoint and up\n\n```\n\n### color (responsive)\n\n```js\nimport { color } from 'styled-system'\n```\n\nThe color utility parses a component's `color` and `bg` props and converts them into CSS declarations.\nBy default the raw value of the prop is returned.\nColor palettes can be configured with the [ThemeProvider](#configuration) to use keys as prop values, with support for dot notation.\nArray values are converted into [responsive values](#responsive-styles).\n\n```jsx\n// examples\n\n// picks the value defined in `theme.colors['blue']`\n\n\n// picks up a nested color value using dot notation\n// `theme.colors['gray'][0]`\n\n\n// raw CSS color value\n\n```\n\n---\n\n## Typography\n\n```jsx\n// fontFamily\n\n\n// textAlign (responsive)\n\n\n\n// lineHeight\n\n\n// fontWeight\n\n\n// letterSpacing\n\n```\n\n## Layout\n\n```jsx\n// display (responsive)\n\n\n\n// maxWidth (responsive)\n\n\n\n// minWidth (responsive)\n\n\n\n// height (responsive)\n\n\n\n// maxHeight (responsive)\n\n\n\n// minHeight (responsive)\n\n\n\n// size (responsive, width & height)\n\n\n\n// ratio (height: 0 & paddingBottom)\n\n```\n\n## Flexbox\n\n```jsx\n// alignItems (responsive)\n\n\n// alignContent (responsive)\n\n\n// justifyContent (responsive)\n\n\n// flexWrap (responsive)\n\n\n// flexBasis (responsive)\n\n\n// flexDirection (responsive)\n\n\n// flex (responsive)\n\n\n// justifySelf (responsive)\n\n\n// alignSelf (responsive)\n\n```\n\n## Borders\n\nThe `borders` utility combines `border`, `borderTop`, `borderRight`, `borderBottom` and `borderLeft`, all of which are responsive\n\n```jsx\n\n\n\n\n\n```\n```jsx\n// borderColor\n\n\n// borderRadius\n\n```\n\n## Position\n\n```jsx\n// position (responsive)\n\n\n// zIndex\n\n\n// top, right, bottom, left (responsive)\n\n```\n\n## Misc\n\n```jsx\n// boxShadow\n\n\n// backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat\n\n```\n\n## Pseudo-classes\n\nPseudo-class utility props accept style objects that can pick up certain values, such as color, from a theme.\n\n### hover\n\n```jsx\n\n```\n\n### focus\n\n```jsx\n\n```\n\n### active\n\n```jsx\n\n```\n\n### disabled\n\n```jsx\n\n```\n\n## Complex Styles\n\nThe complex style utilities allow you to define reusable style objects in your theme for things like text styles and color combinations.\n\n```js\n// example theme\nconst theme = {\n textStyles: {\n caps: {\n textTransform: 'uppercase',\n letterSpacing: '0.2em'\n }\n },\n colorStyles: {\n warning: {\n color: 'black',\n backgroundColor: 'orange'\n },\n error: {\n color: 'white',\n backgroundColor: 'red'\n },\n },\n buttons: {\n primary: {\n color: 'white',\n backgroundColor: 'blue',\n '&:hover': {\n backgroundColor: 'black',\n }\n }\n }\n}\n```\n\n```jsx\n// textStyle\n\n\n// colorStyle\n\n\n// buttonStyle\n