{"_id":"@rebass/components","_rev":"2-43a9c1f9a8edf15680602cf635087def","name":"@rebass/components","dist-tags":{"latest":"4.0.0-1"},"versions":{"4.0.0-0":{"name":"@rebass/components","version":"4.0.0-0","description":"Create consistent styled-system based React UI components","main":"dist/index.js","scripts":{"prepare":"babel src -d dist && npm run emotion","emotion":"NODE_ENV=emotion babel src -d dist/emotion","cover":"jest --coverage","start":"mdx-go docs","test":"jest"},"keywords":["react","components","styled-system","styled-components","emotion","design-system","theme","css-in-js"],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"author":{"name":"Brent Jackson"},"license":"MIT","dependencies":{"styled-system":"^3.0.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-plugin-transform-rename-import":"^2.3.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","emotion":"^9.2.3","jest":"^23.3.0","jest-styled-components":"^6.0.1","mdx-go":"^1.0.10","react":"^16.4.1","react-dom":"^16.4.1","react-emotion":"^9.2.3","react-test-renderer":"^16.4.1","styled-components":"^3.3.2"},"jest":{"testMatch":["**/test.js"],"coverageReporters":["html"]},"gitHead":"6bcd098cf5c7b504b193aa3a1ce908745673e33f","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"homepage":"https://github.com/jxnblk/styled-system#readme","_id":"@rebass/components@4.0.0-0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"dist":{"integrity":"sha512-nUZ9bkyM9YQfunZpf0ogbx6Vkhj2onPUY0eKkIU3jaWoj8bBMSGnUEsg0XSJjyDMjRj5oUX5BJCy9rn/kUBqMg==","shasum":"bc67c9ed512c0523a235e7cb559c66cb4aa756f6","tarball":"https://registry.npmjs.org/@rebass/components/-/components-4.0.0-0.tgz","fileCount":6,"unpackedSize":12632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiy1ECRA9TVsSAnZWagAAaR8QAI3qlLwc5siSXcH385/C\nXdf43zqqG9evCfPgGhfue9hN/CuI0KxUwjyqsLsOLG3KJ+IMOxGTiQpJTrdB\nayWcWCMkKpjvzPY3YpsByjOAB38EUf5H93oP5vyCjFZc0s7ZG6MubFE0D9XZ\nQB/bYEKL0FGbp/0FJ2leN9sl2DlkQcN8VmV2dR5naOt8i1sLijtWYREoFgu0\n5/tjMj/lHRC7B8B/ncRw0wODV2Kby+YI9DxM0h0yacZi1F5QYcII9KIMg8Lz\nNrIQ/g2gYtUYidhSDqPD89I0hQhQAJTcIX9hVxqIjUuiTeewS1yxyjdY6a18\n5+f1kqwFYaeO2stis98kcHkGKjxSEjcMr4NjXvo5Xv6WlTId207KGKXvhIGw\nbnOqxfgenU6IPJREd/KUV6aWhTm/myp2www3weTfM5bDuUcjTOLRAiWjHBV/\nurrr4/DeQAGgMdrf88WgYw5KBpD2COT6pVTiv2k4WGMiTCTix57Zeau0hXoE\n7u+JSu+cNX+cx79FUENUtepWNRAjWRIk4Ntkp2kPRRRwx+KCX/rB1myYiSLz\nX7blupzQaNL59JRYywZE9RBYLskRVnrGh4wAFhd7QAcbPgstq3/DVhhowyow\nXl6W5RPrT3+darzbQ12Hh63ClAqDtf6darqr8p7aceripMPoyoHB6+VDDAIY\nUkzw\r\n=WE6R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGULx3p6i6Isx6ZsP1M5+CrqwyIu8f4gKKH1a16RLGc+AiALH8IkKqhJ+AUHHsCitPNH2OT1fBJkPWDVraZOHWQ5ng=="}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/components_4.0.0-0_1535847747669_0.9616769477107832"},"_hasShrinkwrap":false},"4.0.0-1":{"name":"@rebass/components","version":"4.0.0-1","description":"Create consistent styled-system based React UI components","main":"dist/index.js","scripts":{"prepare":"babel src -d dist && npm run emotion","emotion":"NODE_ENV=emotion babel src -d dist/emotion","cover":"jest --coverage","start":"mdx-go docs","test":"jest"},"keywords":["react","components","styled-system","styled-components","emotion","design-system","theme","css-in-js"],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"author":{"name":"Brent Jackson"},"license":"MIT","dependencies":{"styled-system":"^3.0.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-plugin-transform-rename-import":"^2.3.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","emotion":"^9.2.3","got":"^9.2.0","jest":"^23.3.0","jest-styled-components":"^6.0.1","mdx-go":"^1.0.10","react":"^16.4.1","react-dom":"^16.4.1","react-emotion":"^9.2.3","react-test-renderer":"^16.4.1","shelljs":"^0.8.2","styled-components":"^3.3.2"},"jest":{"testMatch":["**/test.js"],"coverageReporters":["html"]},"gitHead":"59fab7fd34dea2687cb83133817477f0c575d7f7","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"homepage":"https://github.com/jxnblk/styled-system#readme","_id":"@rebass/components@4.0.0-1","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"dist":{"integrity":"sha512-A8Gm8zb+8wY26tAuZmZiRSeOqCBCqIiBrmON5f2kOHWVfj7AOFr4m1giyAkY7geHoSK5SUeTHCNuIVTjPrHZAw==","shasum":"00f08f99a3e9db565b685ab23283852fe5f7573f","tarball":"https://registry.npmjs.org/@rebass/components/-/components-4.0.0-1.tgz","fileCount":7,"unpackedSize":13785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjFqTCRA9TVsSAnZWagAAflQP/3Y1IbKU1VrUDfEkKM2B\nIMuzhrQskPX3mMMm8XtutZCynKMneazO5/LP3lQ3WBWIy87WkoH7ffBq8Kh1\nWlqBlLPz92cUlYdtvKWoIdjpvK3TZ9UfxbBSeKiZOo0A36AcXWsCSe20+Pez\nU3bItS1G/9koV92SEVmVlyRiiKnTl48TUOn0ESI97WkWA8jr5PxrlIHkJmFF\nLg4yzfrnEVj06/xSN5g6xIomqr3LWWbhPf+bi+6Jb+z02AZ2PFF27FHzPYeO\nycUUb+03Y04WJu+NIjwcUkOp58U0YOnynWfqSyNfkA0eIZAboDcB9QdKmSgo\nPXM/pfeRwrcZmJv3c8pP5J02WCWlN7LGG60jPiQbN7atg9bbeNYnIm7uddp2\nqCKd4GxrxmSS1mmvdyA4q+VaQCDbY6ehRRdRv0VqpEB5uqHzYi7ZaeaixC31\neWdy1GpdI+H9wxEJDkA9g10qQtWJMBDeEIW/DK5xJ0DrxX5tOkznJ1mckRBv\nK/WWH2HD8bCbtbA6YDCJdcwr7sYYHO6QPVtMJIUckQwS5Tc9HhVe+2XaJLvB\nS99xFtcXuQOMAp6UgFMSK2iXQ3h1Yw4BYL2498PhRVpXKcg7FQdkWKrb/luL\nzZBhuNcU8iXoD5m3mWBH79elW3zYy4Jj2euRVND6megOD8Er7XpBwxQtMkOn\nxsk6\r\n=hXJe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNjD1A821P886hEmG2bjHDcqKEIXTe5Ql7Zo2HEAmrUwIhAMoZ4AmSV1YBJastSen0tbepPTitMTkGv17Cuz6ZEckt"}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/components_4.0.0-1_1535924882145_0.3898881542308579"},"_hasShrinkwrap":false}},"time":{"created":"2018-09-02T00:22:27.579Z","4.0.0-0":"2018-09-02T00:22:27.811Z","modified":"2022-04-06T18:45:30.828Z","4.0.0-1":"2018-09-02T21:48:02.325Z"},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"description":"Create consistent styled-system based React UI components","homepage":"https://github.com/jxnblk/styled-system#readme","keywords":["react","components","styled-system","styled-components","emotion","design-system","theme","css-in-js"],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"author":{"name":"Brent Jackson"},"bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"license":"MIT","readme":"\n# @rebass/components\n\nCreate consistent styled-system based React UI components\n(formerly system-components)\n\nBuilt with [styled-system][sys],\nwith support for [styled-components][sc] & [emotion][emotion]\n\n[![Build Status][build-badge]][build]\n\n[build-badge]: https://img.shields.io/travis/rebassjs/components/master.svg?style=flat-square\n[build]: https://travis-ci.org/rebassjs/components\n\n```js\nimport system from '@rebass/components'\n\n// creates a Box with default props tied to your theme\nconst Box = system({\n  p: 2,\n  bg: 'blue'\n}, 'space', 'color')\n```\n\nOr, to use with [emotion][emotion]:\n\n```js\nimport system from '@rebass/components/emotion'\n```\n\n## Usage\n\nTo create a styled-component with default props that hook into [styled-system][sys] props, pass a plain object as the first argument to the `system` function and pass the names of the styled-system functions as arguments after.\n\n```js\nconst Card = system({\n  px: 2,\n  py: 3,\n  border: '1px solid',\n  borderColor: 'lightGray',\n  borderRadius: 2\n}, 'space', 'borders', 'borderColor', 'borderRadius')\n```\n\n@rebass/components automatically adds prop type definitions and removes style props from the underlying HTML element.\n\nSee the [styled-system docs][sys] for a complete list of the available style functions.\n\n### Add style props without defaultProps\n\n@rebass/components can also be created with [styled-system][sys] props without defining `defaultProps`.\n\n```js\nconst Box = system(\n  'space',\n  'width',\n  'color'\n)\n```\n\nThis allows for style props to be passed to the component instance:\n\n```jsx\n<Box\n  width={1/2}\n  px={3}\n  py={4}\n  bg='blue'\n/>\n```\n\n### Using custom functions\n\nCustom style functions can be passed as an argument.\n\n```js\nconst Box = system(\n  props => ({\n    height: props.height\n  })\n)\n```\n\n### Changing the underlying HTML element\n\n@rebass/components default to using a `<div>` as the HTML element.\nTo change the HTML element use the `is` prop.\n\n```js\nconst Heading = system({\n  is: 'h2',\n  m: 0,\n  fontSize: 6\n})\n```\n\nSince `is` is a prop, it can also be passed to the element when used.\nThis is useful for one-off changes to ensure semantic markup.\n\n```js\n<Heading is='h1'>\n  Hello\n</Heading>\n```\n\n### Extending components\n\nTo extend another component, use the `extend` prop in your component definition.\n\n```js\nconst Text = system({\n  fontSize: 2,\n}, 'fontSize')\n\nconst Bold = system({\n  extend: Text,\n  fontWeight: 'bold'\n}, 'fontWeight')\n```\n\n### CSS prop\n\nTo add one-off custom CSS to any @rebass/component, use the `css` prop.\n\n```js\n<Heading css='opacity:0.75;'>\n  Hello\n</Heading>\n```\n\nThe `css` prop can also accept object literal syntax.\n\n```jsx\n<Heading\n  css={{\n    opacity: 3/4\n  }}>\n  Hello\n</Heading>\n```\n\n---\n\n[MIT License](License.md)\n\n[sys]: https://github.com/jxnblk/styled-system\n[sc]: https://github.com/styled-components/styled-components\n[emotion]: https://github.com/emotion-js/emotion\n","readmeFilename":"README.md"}