{"_id":"emotion-mdx","_rev":"7-5175338a21738465c7752186d0c3b2eb","name":"emotion-mdx","dist-tags":{"latest":"1.0.0-6","next":"1.0.0-3"},"versions":{"1.0.0-0":{"name":"emotion-mdx","version":"1.0.0-0","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.9","@mdx-js/tag":"^1.0.0-alpha.6","emotion-theming":"^10.0.9","gx":"^2.0.0-18","jest":"^24.5.0","jest-emotion":"^10.0.9","lodash.pick":"^4.4.0","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.5","styled-system":"^4.0.6"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.7","@mdx-js/tag":"^1.0.0-alpha.6","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"97baceefd688f27d52b85a168f61f91d1270075e","_id":"emotion-mdx@1.0.0-0","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-03RqINHYdW20QfW/74F/7EyArQkp+qIL0psSG1MUKxR7O/q2No5bOPJwVTPQnezEOQJvdzR8HfjdzGhRpKbrmA==","shasum":"631eeecefd0cf64e200fd684263ecfa9cf9e605d","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-0.tgz","fileCount":4,"unpackedSize":12754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclZ+xCRA9TVsSAnZWagAABhoP/2bXYq6ucIrAWZVPHMjv\nEidVTguufJ9Dcn/zymLMbr+0SJMujq31BoyaMlKq+tM11Sk18NRgLu+MvGJi\nQXGPXShywN/VmCn4Nl+QNbp5S9u+GCMJ3LQ9hcO/MnPx+haLaRuLbjFfH9AW\nYLsS3o7gtqY5syCv/0QM4u34e51l2POioHgd6rO2rokqPXaaIe9am9qow03c\n/VhIwSEL9jvdragAYGr+6m75YbE67b7gX50GYeiYZAhsbW9fLWxkVTXwIpQ1\nLo6poNXwH8ijrrabiNFcGgO5pwUft68tF1hCOFfa2CItE/6PRBMKJWQQ9Fyf\n7rLC0ouDmWH3uO2eGfJj9ltsk2Z18/rQYurzoF0AnlGgw1APgdmcxByzHJqe\nEzjdT/YJNKv4vq2jUt/DZYrAhHg9uKylM2rr3PRMVxuXvjQNeXC3pxWrrnkb\nnu7XFyEbz6AR38yku4SNasSOtJR6pGhhEtlFCJQLLgHUIg7aP+8maMmFosz8\nCX0LQn0r5bipZNR6ZqCP3XEj1Wvlo5LEyesK+7Z+y3Ie1Otd4osisXju8bbp\nS5iQ/jdWEYopI+OCZZnVTmMJ+1qLSChUxwt0X4tZcYUF+Xcf7AgoaZFiDuH5\np1TOBtdOBBWiU4hWbgI9g3VedoW/54aNY48X+J4NReZzyWIfcS9AHjsE3d7D\nB3/C\r\n=mIv8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv9ihJfaNPIWHvYzTucx5erZbbz8r5sKCFLTPSFPt8nAIgVJLpfBAVxNq9hhC1bzxEAeCkFF38y3K/G+l2zYFYurw="}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-0_1553309617140_0.10411730871346192"},"_hasShrinkwrap":false},"1.0.0-1":{"name":"emotion-mdx","version":"1.0.0-1","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.9","@mdx-js/tag":"^1.0.0-alpha.6","@styled-system/css":"^1.0.0-0","emotion-theming":"^10.0.9","gx":"^2.0.0-18","jest":"^24.5.0","jest-emotion":"^10.0.9","lodash.pick":"^4.4.0","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.5","styled-system":"^4.0.6"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.7","@mdx-js/tag":"^1.0.0-alpha.6","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"9a0463f98562aa94e204f220526ddd9d33200818","_id":"emotion-mdx@1.0.0-1","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Etlbei11QhQ+cYIY7DxVJamzWjLztfRp5VmvcnteaGL09eBrhr8MPjul/t6PTpaMbxrFwIf7RpK2Rw3yqpj7aw==","shasum":"ed6d47c2b01c647984aac37aa0b95b68153f50ca","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-1.tgz","fileCount":4,"unpackedSize":14155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcm6sJCRA9TVsSAnZWagAAw44P/RGweQwHjKiEfWjRk5DN\nnF49sl6EbS6b3ocpE6ZZtOcshr7vklxch0+E43vtSUWyEntfc9JM4b7Ujp69\nh34Mxj3UivkK9qW/bcpHRvMjBadT3THy68YvWPn4WD1UoRZEQ3Fr71EP0mTA\nqokGV+Cio33JPtXsbjAMPxCXXOScIT0uRBCJGtF1AUdUu8tEUQ9OkMi2jI7H\ntqckqCJlcRVZDTPSWpv5WQZ1QBrxfMzbwDAelmt03LEFqJcsYxgQ6hFvT98X\nJ9wGJQFDrF/0kz5npxeKOqhx/9BSPLjFYdWIgdWybpvYJidiSbBVMuvY2BZm\nW91yAnCGC4Q4jkem9lfE+vIwquM6Crc0owKgWPKVLK48ZWMORtsIJAoBhW2m\nzVkAQ7B/1H0I6hWEzm3x79CqWIyOVeKsjtDIMAcqiy5bycYV9XWZNFdnYlWX\nr4kZV20wS19V0Ncx04XxgiirG1K64uCY+EREK9vHYX+OC9xYx/FTQim4mfEL\nPywQOukPW4IVE4FcvlZbpWJL02aPy5+r0D7z0Wp4DsZVsncg8uw2OskIp+78\nhYzIg2B8DaZOTpCdHVFV7I3CIfCVzStD0jW/GbGVTFNHfElBsIiK56w9Gh/q\npOALG9f1B47Yenvj/l1N190P0AczHoeu6Nqiv41UkOmsUgWoPjgg4tNNCHs3\nDasf\r\n=wZwU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDusBC13PPbUpQcucYaXComPoOqJ1AbWF3a749oZqXBagIgQfTL5L3OlfNee2pZ9JXzF/cqVY+spmbM13lTTtO/a3Y="}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-1_1553705736476_0.6691011822729376"},"_hasShrinkwrap":false},"1.0.0-2":{"name":"emotion-mdx","version":"1.0.0-2","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.9","@mdx-js/tag":"^1.0.0-alpha.6","@styled-system/css":"^1.0.0-0","emotion-theming":"^10.0.9","gx":"^2.0.0-18","jest":"^24.5.0","jest-emotion":"^10.0.9","lodash.pick":"^4.4.0","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.5","styled-system":"^4.0.6"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.7","@mdx-js/tag":"^1.0.0-alpha.6","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"readme":"\n# emotion-mdx\n\nA fine blend of [Emotion][], theming, [MDX][], and React components\n\n**WIP/Experimental**\n\n```sh\nnpm i emotion-mdx\n```\n\nYou'll also need the following:\n\n```sh\nnpm i @emotion/core @emotion/styled emotion-theming @mdx-js/mdx @mdx-js/tag\n```\n\nEmotion MDX is a context provider meant to be a complete replacement for both the `MDXProvider` and `ThemeProvider`.\nIt creates styled MDX components that have access to the Emotion theme object and can be nested to created contextual styles.\n\n```jsx\n// basic example\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\nimport theme from './theme'\nimport components from './components'\nimport Hello from './hello.mdx'\n\nexport default props =>\n  <ComponentProvider\n    theme={theme}\n    components={components}>\n    <Hello />\n  </ComponentProvider>\n```\n\n## Styles\n\nThe `theme.styles` object adds styles to child MDX elements, using `@emotion/styled`.\n\n```jsx\n<ComponentProvider\n  theme={{\n    styles: {\n      h1: {\n        fontSize: 48,\n        color: 'tomato',\n      },\n    }\n  }}\n/>\n```\n\nEach style can pick up values from the `theme` object by passing a function.\n\n```jsx\n<ComponentProvider\n  theme={{\n    colors: {\n      primary: 'tomato',\n    },\n    styles: {\n      h1: props => ({\n        color: props.theme.colors.primary,\n      })\n    }\n  }}\n/>\n```\n\n## Transforming Styles\n\nA `transform` function can be provided to transform the style object based on props.\nThis can be used with libraries like [Styled System][] to quickly add theme-derived styles.\n\n```jsx\nconst customTransform = style => props => {\n  const color = props.theme.colors[style.color] || style.color\n  const transformed = {\n    ...style,\n    color,\n  }\n  return transformed\n}\n\nexport default props =>\n  <ComponentProvider\n    transform={customTransform}\n    theme={{\n      colors: {\n        primary: 'tomato',\n      },\n      styles: {\n        h1: {\n          color: 'primary'\n        }\n      }\n    }}\n  />\n```\n\n\n## Nesting Providers\n\nThe `ComponentProvider` can be nested to make contextual changes to the `theme`, `components`, or `theme.styles`.\n\n## Props\n\n- `components` (object) React components to render MDX elements\n- `theme` (object) Emotion theming object\n- `theme.styles` (object) Nested style objects for each component, with access to the Emotion `theme` context\n- `transform` (function) Optional function to transform styles\n\n## useComponents\n\nThe `useComponents` hook will return an object of styled components that can be used outside of an MDX document.\n\n```jsx\nimport React from 'react'\nimport { useComponents } from 'emotion-mdx'\n\nexport default props => {\n  const Styled = useComponents()\n  return (\n    <>\n      <Styled.h1>Hello</Styled.h1>\n      <Styled.p>I'm themed</Styled.p>\n    </>\n  )\n}\n```\n\nThe `useComponents` hook accepts a `styles` object argument to make optional contextual overrides.\n\n```jsx\n// with component-level overrides\nimport React from 'react'\nimport { useComponents } from 'emotion-mdx'\n\nexport default props => {\n  const Styled = useComponents({\n    // override the h1 component's defaults\n    h1: props => ({\n      fontSize: props.theme.fontSizes[4],\n      color: 'tomato'\n    })\n  })\n  return (\n    <>\n      <Styled.h1>Hello</Styled.h1>\n      <Styled.p>I'm themed</Styled.p>\n    </>\n  )\n}\n```\n\n## Styled Components\n\nThe `Styled` component can be imported directly and works similarly to the `useComponents` hook.\n\n```jsx\nimport React from 'react'\nimport { Styled } from 'emotion-mdx'\n\nexport default props =>\n  <Styled.div>\n    <Styled.h1>Hello</Styled.h1>\n  </Styled.div>\n```\n\n## Theming\n\nEmotion MDX can be used to create isolated \"theme\" layout components for MDX documents.\nThese component can encapsulate typography styles that will only apply to MDX elements.\n\n```jsx\n// example MDX theme\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\n\nconst components = {\n  // MDX-specific component\n  wrapper: {\n    fontFamily: 'Roboto, system-ui, sans-serif',\n    lineHeight: 1.5,\n  },\n  h1: {\n    fontSize: 48,\n    fontWeight: 900,\n    lineHeight: 1.25,\n  },\n  h2: {\n    fontSize: 32,\n    lineHeight: 1.25,\n  }\n}\n\nexport default props =>\n  <ComponentProvider\n    {...props}\n    components={components}\n  />\n```\n\n```mdx\n// example mdx file\nimport Theme from './theme'\nexport default Theme\n\n# Hello\n\n## We're styled!\n```\n\nMIT License\n\n[mdx]: https://mdxjs.com\n[emotion]: https://emotion.sh\n[styled system]: https://styled-system.com\n\n","readmeFilename":"README.md","gitHead":"78cbcb7404f50828eee2317b479f1f54c446024d","_id":"emotion-mdx@1.0.0-2","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-J50mdF1Bwok6ZDNEQyiTddzU88f1UldFSASPE8izRoXFQMmh/OI+z8hNnHNdzOTd+WAnKjygOjHgqWSk2gHG/g==","shasum":"004ee0e5e0a9959626a209294344cd0aa410beec","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-2.tgz","fileCount":4,"unpackedSize":14189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnRDYCRA9TVsSAnZWagAAPYQP/2wVTAoEIw8ils9DFblw\nFXPOiKaRx3Ilzz3K9lZFwKZZdmef5xwLmIP4NN+6FMi4iyjsWvXK/0aMmLAY\nwQgFrsjDjAp4esEMiLvt14oQBuwieVJzgBCRhJzTSuPn/Xv14KrN5P9J5e3f\nIjkYAFsZqyvV75pfJFsOqGeei/4pGGp5gTJN4XAKUivo3/6grjp2mSylocKs\nYF1P9znzpDNKJJ4d419Y1X8BUCnsyQDSK1oaQtAZYBNb04gykAR1sZ5OFSk1\nawrTBZtBQxgP7jBiyMkFxQrbptnpSrQk9DmoZb4zMij4LkbiBx4AgMmqcHM6\nsl0/O5FaEyfl+pWdp5exdfeOXu6tbZVSGh1r+/WTcbOXaJhVKIm0ywPA5yKB\n0CX3UJSaeBZWJU/1LzWkVL723sKO/mNue0EJg00injJ3TtJhlJoEQBvpGnmJ\nPV/DTWsB07Sad15S2B2Gp5pah9PXvnd2eYT8Bsi3rd8ZA7HQDOdy+T12v/A5\nSh+6cuAm4FKrbY2340qg2g8+k7dtjpIuN47CN1WsbVGE2QmVK5/NVbpPLJKr\nva1Uq6HXUbPz3cjfElQ6WwiW3EyYu3efNlMHE4YhJg5LTEHkcbqPTKiBBpL0\nq+W0jILWrzfeV7zXl/tMfuAXxJ88MUuuu2Mlr6T1rXpmeVKS2HiO33EkD8c5\nVOeA\r\n=2w0z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+2ju/171Sv3TTPiP0056xad2zPGFqKSB2Fd1rfUxs0AIhAKpV6OU2vd1n8HE5vTEkkmYPCXeAt21jTiJ4kOfujYOm"}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-2_1553797335749_0.01842511844872652"},"_hasShrinkwrap":false},"1.0.0-3":{"name":"emotion-mdx","version":"1.0.0-3","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.10","@emotion/styled":"^10.0.10","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","@styled-system/css":"^1.0.0","emotion-theming":"^10.0.10","gx":"^2.0.0-22","jest":"^24.5.0","jest-emotion":"^10.0.10","lodash.pick":"^4.4.0","react":"^16.8.6","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","styled-system":"^4.1.0"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"readme":"\n# emotion-mdx\n\nA fine blend of [Emotion][], theming, [MDX][], and React components\n\n**WIP/Experimental**\n\n```sh\nnpm i emotion-mdx\n```\n\nYou'll also need the following:\n\n```sh\nnpm i @emotion/core @emotion/styled emotion-theming @mdx-js/mdx @mdx-js/tag\n```\n\nEmotion MDX is a context provider meant to be a complete replacement for both the `MDXProvider` and `ThemeProvider`.\nIt creates styled MDX components that have access to the Emotion theme object and can be nested to created contextual styles.\n\n```jsx\n// basic example\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\nimport theme from './theme'\nimport components from './components'\nimport Hello from './hello.mdx'\n\nexport default props =>\n  <ComponentProvider\n    theme={theme}\n    components={components}>\n    <Hello />\n  </ComponentProvider>\n```\n\n## Styles\n\nThe `theme.styles` object adds styles to child MDX elements, using `@emotion/styled`.\n\n```jsx\n<ComponentProvider\n  theme={{\n    styles: {\n      h1: {\n        fontSize: 48,\n        color: 'tomato',\n      },\n    }\n  }}\n/>\n```\n\nEach style can pick up values from the `theme` object by passing a function.\n\n```jsx\n<ComponentProvider\n  theme={{\n    colors: {\n      primary: 'tomato',\n    },\n    styles: {\n      h1: props => ({\n        color: props.theme.colors.primary,\n      })\n    }\n  }}\n/>\n```\n\n## Transforming Styles\n\nA `transform` function can be provided to transform the style object based on props.\nThis can be used with libraries like [Styled System][] to quickly add theme-derived styles.\n\n```jsx\nconst customTransform = style => props => {\n  const color = props.theme.colors[style.color] || style.color\n  const transformed = {\n    ...style,\n    color,\n  }\n  return transformed\n}\n\nexport default props =>\n  <ComponentProvider\n    transform={customTransform}\n    theme={{\n      colors: {\n        primary: 'tomato',\n      },\n      styles: {\n        h1: {\n          color: 'primary'\n        }\n      }\n    }}\n  />\n```\n\n\n## Nesting Providers\n\nThe `ComponentProvider` can be nested to make contextual changes to the `theme`, `components`, or `theme.styles`.\n\n## Props\n\n- `components` (object) React components to render MDX elements\n- `theme` (object) Emotion theming object\n- `theme.styles` (object) Nested style objects for each component, with access to the Emotion `theme` context\n- `transform` (function) Optional function to transform styles\n\n## useComponents\n\nThe `useComponents` hook will return an object of styled components that can be used outside of an MDX document.\n\n```jsx\nimport React from 'react'\nimport { useComponents } from 'emotion-mdx'\n\nexport default props => {\n  const Styled = useComponents()\n  return (\n    <>\n      <Styled.h1>Hello</Styled.h1>\n      <Styled.p>I'm themed</Styled.p>\n    </>\n  )\n}\n```\n\nThe `useComponents` hook accepts a `styles` object argument to make optional contextual overrides.\n\n```jsx\n// with component-level overrides\nimport React from 'react'\nimport { useComponents } from 'emotion-mdx'\n\nexport default props => {\n  const Styled = useComponents({\n    // override the h1 component's defaults\n    h1: props => ({\n      fontSize: props.theme.fontSizes[4],\n      color: 'tomato'\n    })\n  })\n  return (\n    <>\n      <Styled.h1>Hello</Styled.h1>\n      <Styled.p>I'm themed</Styled.p>\n    </>\n  )\n}\n```\n\n## Styled Components\n\nThe `Styled` component can be imported directly and works similarly to the `useComponents` hook.\n\n```jsx\nimport React from 'react'\nimport { Styled } from 'emotion-mdx'\n\nexport default props =>\n  <Styled.div>\n    <Styled.h1>Hello</Styled.h1>\n  </Styled.div>\n```\n\n## Theming\n\nEmotion MDX can be used to create isolated \"theme\" layout components for MDX documents.\nThese component can encapsulate typography styles that will only apply to MDX elements.\n\n```jsx\n// example MDX theme\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\n\nconst components = {\n  // MDX-specific component\n  wrapper: {\n    fontFamily: 'Roboto, system-ui, sans-serif',\n    lineHeight: 1.5,\n  },\n  h1: {\n    fontSize: 48,\n    fontWeight: 900,\n    lineHeight: 1.25,\n  },\n  h2: {\n    fontSize: 32,\n    lineHeight: 1.25,\n  }\n}\n\nexport default props =>\n  <ComponentProvider\n    {...props}\n    components={components}\n  />\n```\n\n```mdx\n// example mdx file\nimport Theme from './theme'\nexport default Theme\n\n# Hello\n\n## We're styled!\n```\n\nMIT License\n\n[mdx]: https://mdxjs.com\n[emotion]: https://emotion.sh\n[styled system]: https://styled-system.com\n\n","readmeFilename":"README.md","gitHead":"034287073cd648758f9c6aa21af90a0f7943ceb5","_id":"emotion-mdx@1.0.0-3","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-/Lep9DZotOEwfeo0AN98VZuVExiPAtUN+7d/znD4R8AJehs/WjUMsdrxJiNXLHFKz/Brf289LA0CSOZF0a5K+Q==","shasum":"829c5e302d6496234af7bce4a74bac1d989c0264","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-3.tgz","fileCount":4,"unpackedSize":14262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcn3bFCRA9TVsSAnZWagAAdJ8P+wWlGh21frhZpuJFyHxu\n+NgypJX8NkUQebPpTNbWLKnX0fmXhqfvwsmxzGpw7aR3m2vdqzFSPLeJKDAS\na7HrexTJrfBTf0aBGE8g/nffQwfSipCW/8vtreFCo2xkL3Q4HLghp3oss2Vb\n0SjDKTXTIG7C43fbLv9r73AbBQitARkiN4F1m2oE6gTDQ9BW/gr4GiS8GksN\nwYJ5XnzJoriCuTalqVzD/M2lCQiOb3bIV9mrwiRIitnd5J+SSw8CjOw/8hf+\ns4sG3ybq4pAKn+8Y4caK1WCGcthMtijSUJ98PzzPEzPrwxkjgb1abKvewa0T\nD6cs73Gb7YkSOkwD9/Os4o00XzGAqm2DJa8S/rWf7XBWr7v0T0AJWUlMIpjj\nbyUh3CwL4bispU54zZ2j5s6JCBJWkKLZ8tXpX7M3e3r0tkLWicZb4YjJvAs5\nnYDugJHGQAMveFX4EtuYEnHPGQ97xydWuaHLi//DnHeBVjq5U/NYq6W3A4wX\nxlGEaVNQpU8lA4PFCOOHra7ts7KBymvS+gyw5AomoXEnXYbpDN+dt1WSlAer\n156Iz8wPEn/+AUhE9xs6qEzbBFSdzHt9YKfosLV2DXSMuTkw+304OzGxaWhk\nxHzy5B328JJUth7mcorvYCrXPswge35yAlvaLJXW0KDbgsZrr4Nb3J2TxGLA\nsVnm\r\n=tHcl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmaT9dUSD64fshApQf2NP3khIBay9dWCyGRFxaY2zyvAiBMtIKPdQvvpvRwocObYbTgjtPXXLmluUZtQViqAlv36g=="}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-3_1553954500682_0.8547279934105538"},"_hasShrinkwrap":false},"1.0.0-4":{"name":"emotion-mdx","version":"1.0.0-4","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.10","@emotion/styled":"^10.0.10","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","@styled-system/css":"^1.0.0","emotion-theming":"^10.0.10","gx":"^2.0.0-22","jest":"^24.5.0","jest-emotion":"^10.0.10","lodash.pick":"^4.4.0","react":"^16.8.6","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","styled-system":"^4.1.0"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"2aae92deccf9cf57b038731abbf38635080f8f77","_id":"emotion-mdx@1.0.0-4","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-qj7dZEH9HIGGQTMinMIopIrUaCJaXv2r4KCONLAkeREeRVJ3nP0Yo75tMKwGiiILF88ob0E/iehUm0RjbgMkfw==","shasum":"3a7d5cb3eccc5151f3b699495add965cad774761","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-4.tgz","fileCount":4,"unpackedSize":14262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcn86HCRA9TVsSAnZWagAAz58P/2qULU1pr5Fs/qWPYEpY\nczrfeec9UeVQQB/eqctPj4vsB/ea9fQFvwoMsh/P2ltIxFrYNwncWDFrM/WO\nUZkWqbw8hfTRfib+LA/frdyEEvt2kN6e3HvzaEh/M925qKCrvSO6AQPh2k1n\nU5w6pjnZn/KBNXD8ULOmD+qZqz4uznDfD+p+vvxGXHdwkMB76w/72RPhylqi\n+RlGsx5glgVdH5iHcx1+aCY+ofaZ/72eKMcSdQIiZfQivH3FF1Mig2FipBHl\nodt8KOThxm+hR4+nUYdEQktsRoZ9pyCLUZtBN+BDOsQEjxe8mNLan6+gN3Ec\ndzCDPD0ERnitojJluSs7pU5PNh1e3Ap/dXkT4aj9w9aFe3GOqfa7NsDpJQSb\nhr88oKCYRzJDZ1jeLgbM0Gmo9wu9KGx0okh5uM1tg9G/08j6dCUebGN5ofpD\n1Cr3KA6BoPd+khHCFWwT6Yns3MR7eC2RmIfwWnJKrDJSwfo2E0myCf691y4s\nfcqS00ibknoikCANmGEPjZk/8Hlgq939swxxvLR0wCvHqxc/BrvZ4OBJppmN\nU2RPEZOMUI+/XqXYEvKjhZlGoyWnWoZHcgSLbtWJS6/xM+uYciICb/vpWDFb\n8w9nogWlPMvG3KD8ElSQWdtsoy1Olk8lv7/lnq98gusabFe3YKENcg7KKriJ\nRgwl\r\n=9pQX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaq8DRJahKOTqoegZMamA/UmpLXYfboVLPg2MM5ITIQgIhAN+sWRpy7Xh93WUA2oUZTVa0k9jUaHAWka3yU4qhitZY"}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-4_1553976966400_0.25754570060079063"},"_hasShrinkwrap":false},"1.0.0-5":{"name":"emotion-mdx","version":"1.0.0-5","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.10","@emotion/styled":"^10.0.10","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","@styled-system/css":"^1.0.0","emotion-theming":"^10.0.10","gx":"^2.0.0-22","jest":"^24.5.0","jest-emotion":"^10.0.10","lodash.pick":"^4.4.0","react":"^16.8.6","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","styled-system":"^4.1.0"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","emotion-theming":"^10.0.9"},"dependencies":{"lodash.get":"^4.4.2","lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"ec97629bd140cf0e99875fdaf204cdfa41ac2ab6","_id":"emotion-mdx@1.0.0-5","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-u7JrHDQA8MiumXytJ9X9u2/LJyzwarGTTqQTOaUKnDsQIlWNt9i7nXW+8EjXtqecUTumtnTi9pUWuNLhf/f2Ow==","shasum":"6a49057392f10c2eb5a0740de8c38bc0f3c6a10b","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-5.tgz","fileCount":4,"unpackedSize":12874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcon51CRA9TVsSAnZWagAAdYAP/10GvH0xHaaHSsZ81XkO\nKnUkoIndR0maQBTHuUlTYkMyvXKyNfKvL8yZzk+wxviXnYPtsIfJGrAKB+3T\ntNSnBDW/B9zUxb8bQdBiWQMlAyhJ3ZBqlcL6XjPBEiomJ0EY8r2eOAWAUJOX\nw/muQa+TQg1YUC3G9A/QQv00ikQp9kvKsbk6eSE+ysfgNEOvE5twazhN2lP9\nHYJPeJufeFI9q7sTx9olsz/k0AbTd8gcwjD86KXgeLjl+82Awhmp+qj8nmlP\ngDQIC3CxuVHgv40b7aIU0tpHnVyYlyFlWXeZpkRG9RTnG5MRNdzimdDYvLa6\nAuAEgURgrBE4wWQgGze8idJVlYtUUq0RfNjckYk9aLOe4PpE5mi945fa5UGc\nKj08fGZoVq7hxi9ELcNokvEvGixX1ceBWFMYW9oZAbVnMwWeI5moVuBK0aln\ngA6p0Sd5EQgMfGhcqE2fhrh8DkJYeTlXkVDsg7NNuDoxU8ubpO1gmPmLClkH\nSEX9LnO9StZu8bIZfHoQaWAQauC2DFOb1U8L90NpcfvPVCaHqE2fp9I/09K6\nYdnrbp37zGN2VAZYU97yTADk6BPepW8sZUEEE8qEGP6jjOXqmLz9/tnsrk9e\nrtIUOSDSPhl3CUC/yHZGNbaflTh29iknfFlKo6bdyQbm49HJi63AlKBMC0p6\nxwJb\r\n=D7qN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHwDMECyxoHS7hEezjPuP4AjSxz/rEtC8aS/n/+IAXlwIga3taP06aHfVL3xCCQT5Xj9khJqV853kkB1poGLrfbtg="}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-5_1554153076439_0.062173798961239646"},"_hasShrinkwrap":false},"1.0.0-6":{"name":"emotion-mdx","version":"1.0.0-6","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.10","@emotion/styled":"^10.0.10","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","@styled-system/css":"^1.0.0","emotion-theming":"^10.0.10","gx":"^2.0.0-22","jest":"^24.5.0","jest-emotion":"^10.0.10","lodash.pick":"^4.4.0","react":"^16.8.6","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","styled-system":"^4.1.0"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","emotion-theming":"^10.0.9"},"dependencies":{"lodash.get":"^4.4.2","lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"1d7984eb33a56d12592b4b9f79093b7f0b7b0e33","_id":"emotion-mdx@1.0.0-6","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-oI7M/7FnHvf/iC4QPlDrJZabKSwLMpKWg68UM8EpOQ2gboReW24RoNjTnPwR0WBYkNicicT1J9uB3PWsB4m+2Q==","shasum":"0178ced4b9be8972ec233f720ec51af6ef390462","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-6.tgz","fileCount":4,"unpackedSize":13029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcooEgCRA9TVsSAnZWagAAHVYP/3aYtH0omN14cJZyT8m4\nfAZq4QJfE0EI13HzEQK8tP5U+o9lHL/Vcds1jbD2VI9rBgg0qjRjpA1RVsKG\n7/rVIEjlrI7t3PkkKDJ6Zat0PaShOQtcl5zHxWiJTe5o7O9qHULg/PdAcs6c\nEpsq6bphlNqbcZlgcff1Yb6PEtSyTyarmr7NaXL14/ioHA8Q9rj5F07qpdMO\nmLcfhJN6SesKOyDPv0Sy4uux32CVvu8mUsv3zOPQuRNqgHj1xHPnwWPVUvBv\nW4Y72ySOhEdal2LPGfzQ1MjyIDgiU8pLSNoNzJMnIrwGPz6ylHhcsgTH/Zad\nj06TzAxqX58lMEs4ARbPNHGyE+acIq3DCSeI6aXXdEiUVldBQM9n4U9HNGvw\nshG/MZ/Y4Z/redBi3m8eglnR8eUna/8/TYHTBOeOhlHUWORRMI1ziEJ5xDS7\nkUynN+/SAiWO1b7LLzMb+Aq8cBnwLN4E93hkJgGQYKYtn6nB0U/MYej2phLH\nlcfKfXAJz4GQM0HGqyXMonbqN64rZzzU8DmjMsb3IYSHQuFhqJIjXolbcTwa\nYSBBAtZa8ZP6uy/ffvnI5o4ICW3iQXJwBJFVrjqHOCM4jjAzY3/Aum3it2x+\n8FtfralglY/Yh4O7eCagNmpdjWuDdW4RZMVlSWXB2NF2v/LCczErfAIf19x9\nJ/OE\r\n=tbIL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB94BcOirV5p2HLHU+kprpirUaNY4GZ6UqBnTp1hFFrqAiEAjTkK9warqb4WHAokINJMp/3BcYPyoyJJLfxmgNCmyLk="}]},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-6_1554153760255_0.604325482555395"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-23T02:53:37.140Z","1.0.0-0":"2019-03-23T02:53:37.317Z","modified":"2022-05-01T07:05:30.740Z","1.0.0-1":"2019-03-27T16:55:36.577Z","1.0.0-2":"2019-03-28T18:22:15.899Z","1.0.0-3":"2019-03-30T14:01:41.215Z","1.0.0-4":"2019-03-30T20:16:06.533Z","1.0.0-5":"2019-04-01T21:11:16.607Z","1.0.0-6":"2019-04-01T21:22:40.360Z"},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"description":"A fine blend of Emotion, theming, MDX, and React components","keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","readme":"\n# emotion-mdx\n\nA fine blend of [Emotion][], theming, [MDX][], and React components\n\n**WIP/Experimental**\n\n```sh\nnpm i emotion-mdx\n```\n\nYou'll also need the following:\n\n```sh\nnpm i @emotion/core emotion-theming @mdx-js/mdx@next @mdx-js/react@next\n```\n\nEmotion MDX is a context provider meant to be a complete replacement for both the `MDXProvider` and `ThemeProvider`.\nIt creates styled MDX components that have access to the Emotion theme object and can be nested to created contextual styles.\n\n```jsx\n// basic example\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\nimport theme from './theme'\nimport components from './components'\nimport Hello from './hello.mdx'\n\nexport default props =>\n  <ComponentProvider\n    theme={theme}\n    components={components}>\n    <Hello />\n  </ComponentProvider>\n```\n\n## Styles\n\nThe `theme.styles` object adds styles to child MDX elements.\n\n```jsx\n<ComponentProvider\n  theme={{\n    styles: {\n      h1: {\n        fontSize: 48,\n        color: 'tomato',\n      },\n    }\n  }}\n/>\n```\n\n## Transforming Styles\n\nA `transform` function can be provided to transform the style object based on the theme.\nThis can be used with libraries like [Styled System][] to quickly add theme-derived styles.\n\n```jsx\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\nimport css from '@styled-system/css'\n\nexport default props =>\n  <ComponentProvider\n    transform={css}\n    theme={{\n      colors: {\n        primary: 'tomato',\n      },\n      styles: {\n        h1: {\n          color: 'primary'\n        }\n      }\n    }}\n  />\n```\n\nThe `transform` function should accept `styles` as an argument and return a function that accepts `theme` as an argument.\n\n```js\ntransform(styles)(theme)\n```\n\n## Nesting Providers\n\nThe `ComponentProvider` can be nested to make contextual changes to the `theme`, `components`, or `theme.styles`.\n\n## Props\n\n- `components` (object) React components to render MDX elements\n- `theme` (object) Emotion theming object\n- `theme.styles` (object) Nested style objects for each component, with access to the Emotion `theme` context\n- `transform` (function) Optional function to transform styles\n\n## useComponents\n\nThe `useComponents` hook will return an object of styled components that can be used outside of an MDX document.\n\n```jsx\nimport React from 'react'\nimport { useComponents } from 'emotion-mdx'\n\nexport default props => {\n  const Styled = useComponents()\n  return (\n    <>\n      <Styled.h1>Hello</Styled.h1>\n      <Styled.p>I'm themed</Styled.p>\n    </>\n  )\n}\n```\n\n## Styled Components\n\nThe `Styled` component can be imported directly and works similarly to the `useComponents` hook.\n\n```jsx\nimport React from 'react'\nimport { Styled } from 'emotion-mdx'\n\nexport default props =>\n  <Styled.div>\n    <Styled.h1>Hello</Styled.h1>\n  </Styled.div>\n```\n\n## Theming\n\nEmotion MDX can be used to create isolated \"theme\" layout components for MDX documents.\nThese component can encapsulate typography styles that will only apply to MDX elements.\n\n```jsx\n// example MDX theme\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\n\nconst theme = {\n  styles: {\n    wrapper: {\n      fontFamily: 'Roboto, system-ui, sans-serif',\n      lineHeight: 1.5,\n    },\n    h1: {\n      fontSize: 48,\n      fontWeight: 900,\n      lineHeight: 1.25,\n    },\n    h2: {\n      fontSize: 32,\n      lineHeight: 1.25,\n    }\n  }\n}\n\nexport default props =>\n  <ComponentProvider\n    {...props}\n    theme={theme}\n  />\n```\n\n```mdx\n// example mdx file\nimport Theme from './theme'\nexport default Theme\n\n# Hello\n\n## We're styled!\n```\n\nMIT License\n\n[mdx]: https://mdxjs.com\n[emotion]: https://emotion.sh\n[styled system]: https://styled-system.com\n\n","readmeFilename":"README.md"}