{"_id":"@primer-steps/primer-steps","_rev":"32-2494fa46e95184c58123ed61c3c21898","name":"@primer-steps/primer-steps","dist-tags":{"latest":"0.0.7","snapshot":"0.0.0-20230625164842"},"versions":{"0.0.2":{"version":"0.0.2","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"gitHead":"c6d223b67050519a0c62d4a47a7a5b992b22bc43","_id":"@primer-steps/primer-steps@0.0.2","_nodeVersion":"16.13.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-zFoCeIntBsSz/0/OxpQJYxGpK8p02Hgo9ih+8GgpsHjsLlzkvQkgW3b7wFGe6PacQXDMSwEcbusgfJDBNrhWHA==","shasum":"e0d52c5b8c543ff106a229ee052c58be76e67021","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.2.tgz","fileCount":27,"unpackedSize":77134,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYGRqjGobHmiRNfq3+LZShGrRwxNn8VCy2+40xoBEEIAIgD3XELHXSnCrC7GfUt4Q3MGL/be+vGu8PWGR+U+Ev07w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvPDgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUSg/9F/98wcyRZ7g0v1Vh2i0Flg9KbRDdzGvMi3fDutW+6MgktCXk\r\niYDAqFuQGvpsT1XZj2TqUpumnzbvM2GWNCgB5KWzbX5/mFMzWeiK5af+4jjI\r\nkQu088+le/HLIctjxC7yqv7onzk1VFBmgz/8ueUB0Ug/cjevfZGfufpqL6Ez\r\nXh+xFfoR9L9/u+w2V50CixqvnIGmzT8jLgmf+yj4bQXkWviNTipzNH5n/peI\r\nCVh6XCjH9YIa+Tu/iyCR2MT6XCUkedoC+o/OqQYQmJb049KrrhCGr+PR82Pt\r\nZsmfFl+CVHgDJrwStfKsC2vm2VbjpNPCevbn2d0FZ758067kweIuJCoJl2Df\r\nr71oZjWlXZEnS5H+ihZhOd0q7zzLMYwY8px/Wt0iTnqMlLvlTNwMvaWefSuX\r\ncdS2dlvtfoEtRurVZHLwU0yR8Bqa8CxUqxw+Z1NyxchNHlJ2mdqbHScslx98\r\nvMqXHt+QYom89SdzD4pDahk6U0xnsgWwytgV0qsR84XxaDfMojLUs2DfFHtk\r\nbiThcdv3Onfz6Gcb4T+xkc5nEaatJMDcVyr2VKvOTY+CZSlK9F4V7qH5q3eN\r\n/dEuFrHRRh3Yp3sxrdxNTjp8prTfv91EoB3XLXIxgVuECEicqACnKcC/eKJf\r\nX2TWadCdSZ0NACcYO6DOnbnaOHaVd8GrvAc=\r\n=pHw1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.2_1673326815939_0.1541586210656658"},"_hasShrinkwrap":false},"0.0.0-20230111023143":{"version":"0.0.0-20230111023143","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"8ad6fde36792c9f646b20093faf1d1660b54486f","_id":"@primer-steps/primer-steps@0.0.0-20230111023143","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-HKU/WCC86c9YhT5IbvmM1remRJ+vH6UlKgb7Gg4oo9m55bUsmUWZrj+nELi+1TN2nmqj6/2qRfwRo6VHVPw1SA==","shasum":"d01710996073bd98f5861f8e62a60e42f5437535","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111023143.tgz","fileCount":27,"unpackedSize":77198,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZQBXTFD4sBBVfCStogGN8sG7hWGhYk6zHOhZAG1QkEwIgWa5GYeiIVrHZ/AXMtA6/kF5NrJo8axHBXmoPTVKo8VU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvh+hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+8g/+JDwY0N2tfTLpuVe3d6bMbL3Q8zWlF2JRJu8Rv1ZKyIkBkuDX\r\nrRWLASxPsEZwsq3IJYjLLML3o4E59H1VGP7kT70ny3F+dr+0ot+5imh1KGO0\r\nnPkTZ2ok6jFw6fH7+4bgnsYe48ft+Kyy2QZ3OMEt608lgEYGWd3up/+C+Ecx\r\nYJaGwcegvHQuOlHKyEtpEZvBuagvCFd3N2UZzplLgiLygRJGB6h5Wl/OS66g\r\n9WL7ClKIpW80bjReeLclxonIhc/amvFjIn/A1MonCnKx+fePM52P/REu14Dc\r\nq5obPjlqypcsqc2JpMt9hIZAZJVlPlH52bS3ycEv5/3dok35uhZz/p/CDYFh\r\n2bT/rUP8jdpR8p0Egn6LX2L4i4OyO6l31YlaT0SDMdwLl+aKX6uM1TcLOwef\r\nLBI+SLJeVCZuFqHnDTO6f1h4SkS4m16P2QjXezF1sDHsBVKvlWtFR3s5C0Jz\r\nd/tp8oDkoJahinfYihj1ktelhc3XcBGBgAKPlboLqGPrnLpdclmRVqBfnGOU\r\nuH1q7e+gALtC4LhmMqNMaVvWMcG5tK/WrYce2att1EM1/BQczfW5gOWP+2qD\r\nDxA2NEPRx/52OHogjg2cQwl6uFfB0+rajlnNNILalc3xSJILvvMFgpEE+TC4\r\nEk2o0FableeLPZWV4K7TBjN02ceH4HIq5JE=\r\n=SvR9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111023143_1673404321454_0.6363803847773675"},"_hasShrinkwrap":false},"0.0.0-20230111023332":{"version":"0.0.0-20230111023332","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component for Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"ed3d43a3d80338e04676f0030322c376acdb8f55","_id":"@primer-steps/primer-steps@0.0.0-20230111023332","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-vU0wz63CFbpP75sHhN0Quz6TM0DUuu4oo2q9HLqBAiVfqRC/zKBs6BdCH0BQMY1+A0z75Z8bcP6+2lpqqA8+sw==","shasum":"5633f82f3cdb4958a189d846390d6ea8f4a71b19","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111023332.tgz","fileCount":27,"unpackedSize":77217,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtlJUvoQfK7e0jhP457g6GwV6hFjGCPsn7uJ6zMapDlQIgD/3VRB7PamSEGaCzTT8yqdUXeC0eujQzEUxeWTw2f8c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjviAPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgFxAAoKTTP4CFYKX82PeNLyCTRPsKCol4Wf/lKqbgp9gVTlBKxawA\r\nBPflrCWs/qk/auTHBGDCn+4+HqUYn/egW62VU1IEsG0/ilpzksak6B//K1z3\r\nqo5XL72CnS80mThRHInivLvgro6hix1RmOb6hpR9F67GwMDQz4SftHiaGsZp\r\nhA4LXjX4uaKM8GJoJwdmBLa5XqCHnv2eWuKXMQuaJCx4UPmv0B+Xx++XB0vy\r\n8oiPDl8bCoHQpi6j6aADbp5UUOxvC3XF7WOEb+/MBuLqNU9pH5TptBWhn5TX\r\nLJDu3XzO+o3DvUs6uI82ZGeh9lYyA3EJGW31P8EDFrPypT70F7oVSxO0f/gZ\r\n//ghO7C4Oupx6DcYmZL0uW9YEaqkpyrgVG7Fc7jKP9+J6WGRq3eV/ck6ie3e\r\nS++j2aGBolZl3NBjHZtaCwWCXC3yRjNvZ1GQNGrg0LNztYGtO/CvaOYPXhPN\r\nQOjGGp6qKjhkVWVUkJj1oab2Q7VzrpibZyLW6RCr5B+CNJrzIPHch5UUqkAp\r\nQPF5BOQgd0LbJz84uY04RVz67kg1MMqhGz27dlRaTUx+BOKJF8OsQxAhVl2y\r\nqZYY28MJ1Ykqj1KpTMqk3abl61XrPWf8wTkC8PWwdbL5clp95xeSzDJR6Cto\r\nz+zkF06AVkH3iii9aeo3slMSlYj9PW29oiQ=\r\n=Ig1O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111023332_1673404431482_0.2036530516442665"},"_hasShrinkwrap":false},"0.0.0-20230111023439":{"version":"0.0.0-20230111023439","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"e0a248015caa6c86d6b87076171dbf93ce60ce12","_id":"@primer-steps/primer-steps@0.0.0-20230111023439","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ccjdntQZQUzkTbk5gM0VzLVYBT2QJKgLacom6HPPZie4e4iCcTUNJM+0S9UYTWslW2Sbo703zBwGvUba5ZyttA==","shasum":"e3ff044ed6094ba47a87daf1c59c24998ba1e043","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111023439.tgz","fileCount":27,"unpackedSize":77231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAe5EtNsg8N5pLh9q4DfYkVggIwVsUp+kRdHdD5hChxFAiBeMUFxy5v+KmBUxxtYC/YrCfrdXiykowMg0wz1L1R+PA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjviBWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2iQ/9F4Likg01lpzjCBnhJfe7Qo1yb5lSjEC0kKRmePZNqYjC6RNC\r\nEM2/7yuy5LpGBaFsvCXqy7SdWFWWxbG98VA/iOQwqJ1HyPv5Mq4bhWJZj68y\r\nCzLhjoBSrM2n1wqgVl28fpowKNA/hbKbrvo0DaEB1Fyb6VmKoHmj1inMgbLL\r\nuFIsB92Kom6QKiUPWFHPPQmQ4lHf7zScTJB7l1/Ej7lTv2rqCApDYQ8p7CVw\r\n+koy8ZHPvyVqGlXPltg03aS56/NbLQDG6WxE4EOR4sUG9W2NmWUd02++GPxH\r\nQcgtBjJd8txEOoLr3xHzT+Uq33nNSJKIh5L00cuTs32QylXPmjiWhByYkMkB\r\ngMTNn1TzvsyHc4hNHKUZh1KWbEsemQsIh6QaNNJub/Phlrz7UVXn7/Ukmpdz\r\nyW9gM0Lk8QXS17z73YQYu4aKPaMRoKqzx+t7hZbUIxFKkKCBTb4OWxqkPCDL\r\nutdNjZuyNWbRdh7KLc0InY2uuafahCGiqNnxaDZ6xCvfJmsQ5oC+6XJf5pOu\r\nxlTZY3h08O54w4Uf2QwrWTn+ucCIoi//WygB7nRyQY4dEK3EGSL6Pv70wWJu\r\n0k1dcFlDwWdvrv/2yRl+GaWn9zXVXbC4KCPmavXuVfbijeKWMwoPF4lOwXHA\r\ndOIKyPUOsjKoB9pFNxz0juu67DRPRKgXO/c=\r\n=zO5Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111023439_1673404502732_0.9662281263779691"},"_hasShrinkwrap":false},"0.0.0-20230111023717":{"version":"0.0.0-20230111023717","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"62e2977d6b36b412ac50f13d65d53f72c01ac042","_id":"@primer-steps/primer-steps@0.0.0-20230111023717","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-yfvBuxq3EGmI88em3jHRcy7QRG3vGVSF5pRj4mP5huq6EHA8C6eEB908arPNhBhE9hfCjzy8wqHqX0Jzvo4sNw==","shasum":"b31e2f76a9bdcc4870e770bf7e0ca993b728e34e","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111023717.tgz","fileCount":27,"unpackedSize":77231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCky71vPrLrtiCpZvyBibUocXWdhsirrZMmsvZ6GrTvewIhAJ7heQ6r7l1ea25egnXIk2UqP73MdvG3k/Hr9krpLmd+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjviD0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB9RAAmSuNdhgw8J8e/Y7VMYct0daJaqjK+biujSFH9Y1NFnUp3UQd\r\nt8mzwaWU+mBCMqx/m9VvFWp1UVCxMgy1mtLFV/gQBe1IjcXCcYLYytTqIUoQ\r\nJtj40zepHRwG8dpCr5OQiC5eA9FOT5Eb42iRLqXcbiv1ggmTEOmMD1pJ9pRY\r\n3z98lFLrSalQgN+wkiZT4Hv0gVhYrhEbkv/gE7/VdctRID74TdaIilWKjwMr\r\nYpHbltHZD2NSwU9E9tTjkq5i+eHvaTcXH2Gz1+SWrHIKItC0FYL8wBLZw4kH\r\nDpM+bTJiV4NxkWtbTchGMewnZSBop5riOhkCda8HNGzPOtelgJH60l8U9JyP\r\nh01wbx0+953ovjZENxgW2MZ8tbEtdAWQ2B6Vlphx0ixadHTGG5KK8hBsJy0l\r\n01M2cfVljDlJO+kzJvsmVu+DAdXbsVam3sOAI8LWI6KrxdXLbvCBe4qmaibJ\r\nqZAYBGeDMD8qHmcsLIX075nOTYZDvCCUI1faTI7OftEu1PnuH1tJTpkRdzta\r\nxSOTH2gBLxWNtIIEtDuPouzWcPax5GFYF7pAags5h/HdGa7NvKtOqAWsU6cD\r\nZ2KZIGTSZKKXLMDyLAaLoRdWwAxB6G10hiO551IjhsxcuMVTsDsbLygipsY4\r\n9TM/RHlX8V6qvudP4404W7LiYHAUan/tHZA=\r\n=Pxux\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111023717_1673404660157_0.6246178944895129"},"_hasShrinkwrap":false},"0.0.0-20230111023943":{"version":"0.0.0-20230111023943","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"a76b8ce5bc9b46647f64c3835ad17d75989421f2","_id":"@primer-steps/primer-steps@0.0.0-20230111023943","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-+iSfzjBF63nvz+0f5J6y9aY2ea+PDzvJ2xDjvdr0G27s2JtV7tO44DqCKUcj15zbbH11nNhTUWOXw2XcFFdZJw==","shasum":"52b5cc3a97019b81a82b1fa4236f2e30e1e59df3","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111023943.tgz","fileCount":27,"unpackedSize":77231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICeKA2tdCdrywE2v/wtLZesTXZIj/JJH1kXOm/kASrSnAiEAzpwaNHY8FHUtpkx5QmEuJxFDyxTDjDGXamvQUtf5BWo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjviGJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbRg//cfiiLaYhCpaHW7n4bLDK+i9clkmdlo21eKZJhlgDMtwx3582\r\nr6u+l6rDrYiw57VOAoQ0gZo+BaVZWro+VM1kdyn7c3Q4+rnrdQmJlrmsYblY\r\niOTJXLwX5yGldYS1g7mI1zcTm1uUkJXQG9aUftsHsWe1aii0ZZ+11WVrsIi3\r\n9sJEGDcQU1wwxwbRb1p39vXSdh5lgZtQ0pAONfYELVG3pkwWncT1wtjOE7kL\r\nbf64sHqg6nNgxSrW6vGWr/iB0j8NLN//Wq7pD7qg05T/toTXgBeRVDnzhIG5\r\nbMdtLREE6XI75jdOhqpgCKyU0uHxLtDXmrZUM+6GFcyTJZg3XovtNvs2dniB\r\n5XETaI4zfx9bjUwQppOfiqn0kBLc+Mc+t8bqKJ4ppLa9/TMbPJCFKsW1YYlG\r\nqmD+77nkR91wXF+GFaHJbr/maofY2HtKxPCZAi+g7TcTz3eSFrGuTFkMb0Nn\r\nz5/+r9XNFwcQoA5sMsxAon9Bg0eUS+9S/sZl96it4PC8Dfa3bIRxt6xHi4Lj\r\npKLzshx6u0iaZo4FfIweOBHRBjrae9hsEpuWOPsAfGSuqPZ57WOS4g0orgsZ\r\nDoC1WHipBz994TIEe6KXaLCrm6YrhtGNcXr2iJd7+u7T29COehxnSNbe8wzi\r\n7k6A9HKvv3IwhuNY36+8dsKYAgQ36Mr0JWs=\r\n=PvV0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111023943_1673404809029_0.6475871296093973"},"_hasShrinkwrap":false},"0.0.0-20230111024012":{"version":"0.0.0-20230111024012","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"d7e2c5266e9bfb462f97a09cef1bc0ff7db15e58","_id":"@primer-steps/primer-steps@0.0.0-20230111024012","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-aOJBIu9qDFBrhoN4W4oH8IKQ+3rfZr1EsbZoyh6+9uae3ua30m16nUsetbCvl2HHvWaFteNlLvyluWfyB1Ovzw==","shasum":"4023fcccbb45c5e4d2be3ab21f34ebe31dbca0a5","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111024012.tgz","fileCount":27,"unpackedSize":77231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZVDPV9Rb42XRH43x+F0k9jd1tKqKzy6tnhJ6UUvMDBwIgDLVlZvgM7Yqk70aEfv+49PrM/0/9+P7bInictF5XQ1c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjviGfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplMA//b5RJnhpNSqvGlVKDJ6j6CEJb4ll8X96VIpA+rmOXhxr0QCWk\r\nBEw8SsY3YMB+K3Ry3huRP7rSMQ3ETRkFYoPGT/Xw1m4g2W/bk4NZ7Rtm4SqP\r\nXjvaRkh8j2wDsSOKb1cY+6bFF9Z7/tCK9SjWnAsnH5KdipqVw/Jvv4nHNBed\r\nl+50J9OVu4egxcqA+s36WcVOcALgxRNI9VD59zXzF0TEw25+fapKqtjSNcI6\r\nv/szYw3cvxvo7LZ6rhLbyoRkqkWUl46cK2ZCJpZX0SIPxPL8Pb1pItl3mTzJ\r\nvUhw3RnIVg8iotBPjST+ziEfSgxduamSkEJA4+dw8SZFp5jhxbmWSL08JYc2\r\ni0aqL8TlV8z7pm0WNxHqyhgkd52AXxG5MRUKeodoj2guoN6ypmit1LyeI35r\r\npzXImsDDo/dVrm2TDvrcL90lkQWXRf7/xLCklVdACog3+eZFLZ3ppSvKbsM1\r\nQaLUwTfvAu7cGfwNsLTX9xXoGakHhlsm8M/cWfEMIMMXcK7iGRZutVs62XVh\r\n7aX/YB/iiZB8LqmiMZv/SXgHayvTeB9fPi2YbLjgwvLCYwesHrfaQei7WNfB\r\nsFpUQVO6lpb5/mVP6jANlv0w4wkoGzJz7YMIh6nojIW68r+oSlNURZ6Aga6Y\r\nVtlyJOl04/4+Nsx65YDWipW2Oc/RsL8WkHc=\r\n=OndR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111024012_1673404831240_0.6480241368666559"},"_hasShrinkwrap":false},"0.0.0-20230111024603":{"version":"0.0.0-20230111024603","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"5a703f5e23523a76f0e62879926ed07786ccb82e","_id":"@primer-steps/primer-steps@0.0.0-20230111024603","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-xDSQLPnYZY3NUwP9NIEEFyB/r0e56iiV2tMiiOWEIDSLROa3BmONAy3KlC4TDLmmi6De7HEeYFEvUEMX76afXw==","shasum":"26f494550af6066edbc222cc47c7d40c509bea8d","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111024603.tgz","fileCount":27,"unpackedSize":77231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKmqWs6fiWBlukxW9VAAWYQ4npQ6663B/4WpJSo5A2iwIgb591G2jJEsDFg0tyHmy3UkCybbu1aU50QS7zqbKpwc4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjviL9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVTBAAgpHfNuSorouDUJhtB7Z8KLnHYj1otsWE+Wvd/+t6lwxzCN/n\r\nrmPXKo24KVu2H2KsvTGClv7z2yermE1Qreg8oS4t6yU5te1nURwy2Dilj0Ph\r\nBe2mTiHLY5nfk5iWQlQ4OI1D7zP/mRCQ0GMBUPPIIEmoTtOcTEgd0GqrxW/k\r\nAjI3NBMrELg1Lf1gtpFSAlNbZC6cDE121bNRjYA1oN4jQmHJMfDHbYlogWmk\r\nbwnTDQYubLbAhWDVhrtDMtI3TF5X4J4rIJamarCjSNXRl3Gcr1V+1fR675sQ\r\nXuh0TMAkRi1ezinhUvbs1KPhI1gSV/CEfD/F7q747syYJgqjRQMAWapheyCW\r\nnmdCyyhM+PsX7nFkIJqXZQATTzkJA768pbWWMiq7qY39yXhrMWEDqaFkDTN3\r\nVcMULE4IafSmCw/1OUuD5igBBMZ0GI/nT7nmrcVjILzax2pQHcHVMpILStKD\r\nHo+/GGeXdEmS+gbAltu1Y69uvrvDC+y3gxQrbVH/4QjtUfyPvu2yCQyv44mD\r\niC3RVPAHeaN3Du7m4CZZERXyzG+Zbe+ZKDhr2I1+J4hQlIpGKvQgPuIqY6zC\r\nDnfMCGKkWYSFsz+GIAHlMFZBRj6+KfZWR0iw3wPdGfjpK/zxjptgl5+rdzGA\r\nylTILAv8wIBxuB3SbcQssXbSCYVUUK1aUpw=\r\n=xIDU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111024603_1673405181579_0.980644789739459"},"_hasShrinkwrap":false},"0.0.0-20230111024846":{"version":"0.0.0-20230111024846","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"21088c68c946441bf82e7d453f6fe633cfa90054","_id":"@primer-steps/primer-steps@0.0.0-20230111024846","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-0GKGVRlrWehWp8VO0sOVS0gNzrxYlI3TGMSiyq/mIQ5rP8thWcgiGKQ1hf7LHC96jIdIjsHS0DA2MOAEz9WwVw==","shasum":"edc7ea62d36d7d97bb3f372705ad78251d2e7c23","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111024846.tgz","fileCount":27,"unpackedSize":77231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsPFK3uQXGXU2Y1fWNWtPJH9eltXVoWXj/gz9wxX9y6QIhAIXqVx7TQlb1FWSkdnGz5TSooxx+Yrhfts1Xhea794kn"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjviOlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowLQ//WnNi4NSnBpxV08DgQq5L6wKys4kE+Eyt9LznKRQXPULxEdOD\r\nEWeWfhkhUp3lqliz0Zo9DL6n3FlYFVAK4QC4xevmax5tZZlLOk6g3jsfnaPq\r\nAnKi63U0BlrwkXmom7QgOau3Kpev30yTqCqaingvqFr2aM+TYxH4kLTqhZ4C\r\ns7JQLzTC40/dKk5thI4NV/pVc1+PYTU8wpzbhOCD+0k4shstXa0e6R2YTkMB\r\n5SVrMrpj0PhxivfoOo9G8pLc1+JqjKMzI8yEuGAJpF6YmzKwd8l3MZkPHFaz\r\nq8RrCxFSnthvQsVegtzeXf41fABSPmUeLoMEZIdK1n3J8Mva31GuLxj1NWMi\r\nCOCEcIaFPOPw09aLacXYZNQikuQQXNWknxE3r1Vx9kmMGOGrDP9RvMUXqjwB\r\nsXgbU+mpeOO/OmjbV4yfpsc5YwG513Jl6zQliWOckityr/woGiWMFtuS7vv1\r\nNSeLZEE8Ml8fLSJut5uccE5iBuzXa6gVyrVf47AsUJdB5WdXp419VRrotJxU\r\nvfb5AirUXOVO0sbb6NvfbRn4vYvGXFe+p5FscRqmh00NFEDDoBRbMDXzjxkG\r\nr6pU7z6h0vzh5zAabHGVxeuP0kAc0Y0tVAxrYJ8IOsttq7rl9OowsHpQEDkW\r\nApNC4RFjI9bPmQle1Yh+LX6SOsO1+eSmpvo=\r\n=xqbm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111024846_1673405349249_0.6107926751084363"},"_hasShrinkwrap":false},"0.0.3":{"version":"0.0.3","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"4ca1e4de52a004418137dde4de4de3e625d4d681","_id":"@primer-steps/primer-steps@0.0.3","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-ALWZcE/0b2Mx0CBMBhvWeNwpWuFa5M2zLMeg3gv0zufoxIXB0Un5B1TW2HgWUI548md/Kq4V0riBbgtnw+lChw==","shasum":"3005abcd9f1f20e5dc7a95f2ff77ab4472b1c8d6","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.3.tgz","fileCount":27,"unpackedSize":77216,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqLIJJmJPletyFoZXNw+w9SnsDV9u6OSxwrzNMn0S42gIhAKyvgcUth7fqJOiMFk9SDc95MDDzkD0e1R8MwRWwALnG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjviTtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmossw/+JR4blLk9CjP4Ts4CalzomJybcV3orgE0grUmjmWkfVgzxTv/\r\ngrVxipWkiErAvWadN6GDSQCpz9HGsJT5ywIyACgKzU6eMl4OPdS9tBbg6NBk\r\nhlNXUi9C8PaRuwRp5Aj8Tlvu/2+nhGXPY+ym2R1SCyzIIAkil7iFSVvgkcJ8\r\noZmK1X9EJVBD2djH0VMHcFO1xk8Mn77iaH6Vv531b5BCvjGhavyUeFxd3238\r\ne+HTgt3IRKjBPQRUDC23UInfcg++67YjSXvL1r5yxLzNObMIDGvr5vUIODip\r\nJS2bzkj1cdQHw02i4/U8zMcjyon2dICDPesHCIK9TPN9HPAROz6NTQwDXeKl\r\nNp1v48rdCowKKR0/VWxQUORLLnEXMXBqWq5RLPFkN8HRBKW6atMGrDWw+8md\r\n11pg3+boOEzOED6KaTUz5ov93FXUdwksb0n0y+JLV2jE5i4fiCx+DnORVMIF\r\nuQPO5lSnhc1kU8NaTNVL9nggBwDxcC2nJEo7vDGqUh++83HTMBQnutJlrRxd\r\nlA5b+ooLLJhnzsts+YO4AzunELtBvq1i9exEqXAlpGxSSu3prI/p/1XnmoOn\r\nip14V3S+Mi8PwB9Pr5AFz9gO9/5MSrsY8a05li31vRVTSwJyIigNRTJFmsB8\r\n2Xf3GRfFL2NgfDUfFwumJRUBA7ctKNC/nKQ=\r\n=qhvh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.3_1673405677785_0.7282937947092378"},"_hasShrinkwrap":false},"0.0.0-20230111030203":{"version":"0.0.0-20230111030203","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"572d69bf041b0c327686fc16c35563cb240ae7ab","_id":"@primer-steps/primer-steps@0.0.0-20230111030203","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-stuf+TShKwqAFcocnxXCH8t43mzf43UgB+vnhYEcoyK5cb7yDQwUJxvYBJ6k4XYtARmp4SqSItek/hPuoXKPLg==","shasum":"64a507b31f3e16c49352afa62acf1bdfd9750562","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230111030203.tgz","fileCount":27,"unpackedSize":77231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJFp5NamPjbX9JYEq2TS1OCfDayYn8nH2V/k/dGlzOqQIgbJ5dJdq7vCQIyYg2XjDU7O2zIaqBu9MxqOFMk1m9Dy0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvibJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopEg/+M06PNKOTougymQApTRUBgHIlImUBvPvGqmjl5+k2b5MrU/PJ\r\nbU0jSLgEdva85edRuAAR8SIbr0km4ovzCqBXYoG5uaLrgveFbPOqCiDclo5X\r\nrttdbM2+OgBukVmhfwiJ1i6rGZaF1Ki2QNMf+57LQwtHMK9S1KmKn9MYZLL8\r\nBx7eunOVeHke0qCgpa7jSClShyA1CB1pwzYrUTZPkk4JYdS6ynhNfdr96RPT\r\nldBpvEka+JfweH/T6lVLbEbLb+isw8irXkAXLdSuzPwcM+g8sJHYTVb/p2N9\r\nx2CyLCGhlWuk65jIoNErfNCrbPorxLnGTWwcQrRPOYPUl/Qw95fBUWoLV302\r\n8xcRqg03KAQ60Z/pp9zvbBxkGW/9N0pXwC8gvZJ9aDvGrOxGgBC8J/z2IDKF\r\naulnoXOAw0yPfBNuZTSBDiPKMqekOF5W0EOZmC/wPyLg/mS2PWCgn6p/98jl\r\nVoPbNbcloxbRqCrvTEOpco5vDZi3HywI6wFm2u/cUwZWqcPApddX5iTNSf/v\r\npW411QaPCzexU76DKARFpDTVAXSB60frDYkkGxK/jJYefuRdBUJsJ151c295\r\n2kUxJCtEjAWSIKN6WpyOmddRdgDiozp4RfJw7UUcrdsay/bc5A+CU8kRqUAt\r\nvEVIptkIV0EYrBQ6kGUvApiP8RQfhfkd/O8=\r\n=FONR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230111030203_1673406152798_0.9539434204743875"},"_hasShrinkwrap":false},"0.0.0-20230423224932":{"version":"0.0.0-20230423224932","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"09c9199e074c8b26c9338413b2ef3e6882041498","_id":"@primer-steps/primer-steps@0.0.0-20230423224932","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-gW3pr2VlbdEP75zn/i3npdt2dkryoEcO+8r8JH9iCK2fZ4vOekoY4zF0PQ1BAq/MxwuJJ5QhV3FI4G5dt/qvBg==","shasum":"23ab8b42d8f0bbf7bb4c23421d0844d63488fd12","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230423224932.tgz","fileCount":27,"unpackedSize":77116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRwZM1uQgZUhgs8TrKGpSxrMZzCEE3Hgkaik3GLGVG3AiBvBEKLdITDE8SV6VAY3If8JgKJamPMwKi34356Pty9hg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRbYPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSlRAAiXpX1vrusIyjNGguCg+4MejMvDgqusna4ZpOvvC54o1Jso3p\r\nCkWDXwD5cQsjkItXeeSmnOeXI04AuFwCxlWfC6nqkypWLibV2CRpaV4lhJ/a\r\nHkvC6atkKemsXMVWCR4nA1HE/wiMG29NYYsa6QPI7F1TNk5EkAa8ZURmy7fu\r\n4fvr9m1agY2vFf6dKrLEpg7O0d7oBIP6wrfTE8e87R+5Vulp/iwoROc4uPHg\r\nup39h/C6Pjt/MAIrIXLiTUzyXkRKfSq6JbdEh0Gn9z2hlBL7CYWM9B8ZJlLL\r\nXlAwoI75eFlqNfgHe/AKEQ0dw4m5bPuQNvK9fCDmGtidiBO32IBYJLR9fOkl\r\njlzYmRrfSxD1SRTlH4mqXfAnNVLiu60M0pfmIzn0vCeFeojy+okc3njk1ffH\r\nspbYFj/98QHRjBX/a3DBdGNrmZFJq+pkW9LRX+xZyyai+inpjqIJxijXZX8Y\r\nW+u9A9Hh1DVVvyEAXeRFo7YiIPZaLAx/9DJ7ZMqr8wfVwKeqZsuiI04ZKaWl\r\n6Ws+clP530GWDWIY0aknVsvBRsEZVfp56X/kGmXes4wh/SHqc9bU0uDxKefv\r\nzUwVuAc3dmc6K4szDa9qQCh7+pya8XHWVw5AQYMCX7U6W1UPA9w9pKSeHPdl\r\nJTUOUgN553IN/4HM2hg0YTuMaRHYgUCP0uE=\r\n=5INN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230423224932_1682290191424_0.34866964493740915"},"_hasShrinkwrap":false},"0.0.0-20230424023724":{"version":"0.0.0-20230424023724","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"fd54c4ad3325da50da424f7359b7ff1afd912583","_id":"@primer-steps/primer-steps@0.0.0-20230424023724","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-wac63pBR51YBB9r1Qcy8EYAqMuE9wKQb82aReAICAqIDBGr9rwy2TQPXMaz49DxuEjsMU/XiQXYIyRS3EOGAMw==","shasum":"ac971e9cddff2dd89b3c266ba90db308851bcfc5","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230424023724.tgz","fileCount":31,"unpackedSize":78785,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWGyP9Nhfzk0Or32On+rl/G2Yz/IiB3grKLvSkYnf5xAiB8dCiGyMZKPG0+tE+A41Sp0VAe7/Lh7k7mMFTn2qyibg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRet3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroSQ/+KI9wYu/vocjz0CLyaOi8fVShI5QK02fU2gdvIENLYG+ey6m3\r\n4g0eMWz7j7AywtCtTiQxPOHn/LZGho28F6zKxUqx7wYzLovEGl4rqU0HN74y\r\nuvN9S+BZI/fOxSwIG9jEP76pEu2/0FP1+TfZCv1J9ECJO5L4spFEs2PhG/k8\r\nl5l3fC7lnJN10ReCZBN+0pQ6LbLhRfV9L3Fm6KbZD+P2zgs5BwJXsVzKPQ9g\r\nKFLif9TmcoUMueeknwaTq9rr2k/7/QL0dNBnRUgtCEs6OpThnsT/i/Vtpx11\r\nFLOZUCqoznQc+yIiOJn2/CP+VmkslgGMn5nKfnYhYQTp7lKL7IPqlp0YlhDG\r\nhIa0nAx97xctmenZp0AYtw3FUTMzS1QYnytma/wkZUL7ja7ExDYwmS5DTQcX\r\n57So2jBJgPNt6gDcDAT2fzazV9rZnWQoz1g6oA+RbG4mgmzsqIT2CSos8CS8\r\nj5JYlSfom6wWHEXS/DgY+MlwyofyjcaozDc6NLWjsxRW565WFjC+CGj/CS2q\r\nD3LWzCB98NkuWqTMN3CkSbgBnLUf9gMbBLsr8rsoFomMj5ppQ1srEZEi+sL+\r\ngd6klSxsLOXOkDlf+IUCr73kD4tmThLbk36c570omWwM86nlqNyeVVYaS9U7\r\n29/JvFAv+SbbTYvepjowH2oi3+Jf4nr2IKY=\r\n=6s0Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230424023724_1682303863452_0.3500787712753006"},"_hasShrinkwrap":false},"0.0.0-20230424023934":{"version":"0.0.0-20230424023934","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"3443fac364a5cb2a29c38593eab8803c271613fa","_id":"@primer-steps/primer-steps@0.0.0-20230424023934","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-lWYwUvZ0UnLdAwIN4RdBkrbZQUJazC+ctpRjuVYRUo9zybrv9ZHqW1k4gEU6JdHdy3R17gVQqHb/oRkijqHzyA==","shasum":"781cb3c92e5fb63b13a9ffc7f7b9bf82a9f33827","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230424023934.tgz","fileCount":31,"unpackedSize":78785,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJf0I4iwY7nsyeNhUpC87YP6PPENI0/yTKZw43qCqPaAiEA9HZHDHiw5EMpr6OY+mRu7hliVJE6uuWTRLQZXhStlBg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRev5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA1g/+MaWEJGwoubdfMxtyJmUHG3O4m6mEHQIDCbQ1lSiRnMcGPufi\r\nS8KXTXnSC67ZL911I4mTq11BFEenmr3CRU3C91pGVYcoTH/sC45XUQwRL0uQ\r\nq0grpOzQicPHhFSZ1e7uuSHyLmGvhUIvobDTtyjkBj5JGusUcHntHQEmZovP\r\n+SWedjoVRuS61wSIwH1EUwGKAtv3uptYUhGLrLaLXEaZP3pZpSPHRjQQMrIF\r\n9284VIHYr4w7E/r3yBjgUg3UeqJ204G1q2/4KEstBNGlJ6TqdPWO9oNGHzod\r\nwi0tk7coU+cDX2SYzpLFQdSm8/r1srfiViGOq/6HSsB3D3/1wOlgPQ0Uam3O\r\n+viY5Exj1gd0nqm2MEBQn5onMfYR26XgBfEt2LFdOK3nKUXRTfsof6B/f2gV\r\ni1TlTigAWB+zZ8dFCJWeJ0EyUacHWkkvGlMn/9vwvIDQ7Mn1jsRFFZf/Kmdt\r\nadMQVrri8x6aO0zbU3+dRJDmoBlAXFy5Do3JbQZrLULv9IftJVlMMz2VeO8Y\r\nFUBbs1HTYS+ipDK9ezbMdxdtjJIApXCg4/MeHLQeZXCwx1KSZJMMP5M4CcjJ\r\nEWndimRRlgv5/rNMD1lIW0cl864euSnXU5umv2cmEnYXSZO3phQLqFd7EFV+\r\nO0XMdqwnm3HrwNWgoMwpoUHC6l+n7J3rWSI=\r\n=ZMcP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230424023934_1682303993037_0.38772906963245757"},"_hasShrinkwrap":false},"0.0.0-20230424024458":{"version":"0.0.0-20230424024458","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"f5737de6a465e4e48325b58ddabea16a80c8ecb6","_id":"@primer-steps/primer-steps@0.0.0-20230424024458","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-1h0G7a0Dy5x+xXzhrTtASsegZLDPxlcVUUdlZDqHCnGZeF493ALuFq+wl1WwMPkE4x5QFyCGNcHwEnAqKScdZQ==","shasum":"0e74d8070e09872a5aa8f87121c1f1111d4d36ed","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230424024458.tgz","fileCount":31,"unpackedSize":80323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEEYwUKw8d2qQQWs5ELodJrnaXreKvcMM4aHUXccG/8AiAvHkVUPSXWFQX1czdu8OzBbusmWnCvtHsl7w+Mv21FCQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRe09ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgYg/5AMQP1MKScNtVLBYw8i6Fja8zyfTsAR8LlFX9BVVYGPg126Pl\r\nWpZaZB/71enFn89+mCLKsmG9da0xRvAPLmIqwSidewCsJlR/n1lMtSdTiZrn\r\nDmCPnoKL5p5k/XV0sVbcwnibS53HRi5AVO5b0fqYk+O9iUuCihJDZUZlglD9\r\nPJVfSs8cYefjo+BLGAI+hJ2wHBHvPO8PYZB9X3D9D4plHdA+3d5WjYMee9L4\r\npSluGVyjatPHeBVdwrqnztnK1CJE5Apiffze/X1kli/UlzdbCqb2TttnyglS\r\npuUY6bb9B8/AwnNaBAqI9F5ZE8u9Hlmy+Y/hkQtBAvhbOD7YG6acTrAjwvlB\r\nndqsQ2BDmZ7YNgyVbIn8KHJ+IFfrBEXKtcQlZYzOrZlDDhdcfTU4SxjDf3LH\r\nNl4fLBbcBCbfaO9SN0Bta7zPmu2Yhs21uPb6G/yv4XG6ogPHlmR0ooze8bU1\r\nEmGDklu/jgfH72Q+F3GUcBU6CQZRIFKIo0Ubot79I89017EoeUWXhl96twSk\r\ndttePfvO/ZPguPUYJOl3Pka3T9FZ2Zps430ae9QNMBETZiAjkTLPdWh/1Gj4\r\nopkxHGWYLRb/noouCnSDJcK2ny823dJNxeauKOax9mr3YX7EWOKg7X3fkvFo\r\nCegkeKO5zOrL3q11Bt6aJ+nCOa16Wxinw7c=\r\n=VBw6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230424024458_1682304316933_0.21753225656203856"},"_hasShrinkwrap":false},"0.0.0-20230424025503":{"version":"0.0.0-20230424025503","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"fe3e6264ba6b6b69549dafb8831bcf9875694b4b","_id":"@primer-steps/primer-steps@0.0.0-20230424025503","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-7hcCb5fkNKdel2mKUBZVNBBxrT3ofcbVNnXGTKqXFxryFGJ14DIRi+MHjztaVIGK7P8sjNHj3gIFDX0ztAbwFw==","shasum":"8c2fa2ede268eff2272a2dfbf88c2deec39eb227","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230424025503.tgz","fileCount":31,"unpackedSize":80323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5Ocm+CNcxM75XlM9xGca1crF1aFV+zAyY48tcCfU1kgIhALc4zhaGYaY5mLxv8Go/oau5dJfoa984Nw5OdGAn0KbF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRe+aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqdA/7BoVqcBYpV9OaLMSfWGYOXEs3IRxxzJl0Z+AxwfVC1pqy55oY\r\n4JcxfbLyzbqW70W9CuKoplwArDE70H1rxcnYQ0KN/LbO1z1QD5yntEdHZYKk\r\ncViSqNbUN2zF86bHS1pMQzvjhQdGIBqYM5Uuio0Z33YgOBE1+ILuTODy33Kw\r\nxSy9RTqADO4Upf99adC3/lwYc5XXj5T/TaS/mm9ar+Hdvo+gqYSY94Lscs44\r\nr2wdfVGjlhy8FIOL9VUfGPbR5zOWSGQBV3z7+WVvkwVZFNGqUMnBPcDQeSXc\r\nAiVUehEYjgozgtiDN/Ga5ZVWJ5XgX0G8XZ3jWVqA5YPqQdB+GZTwjWmAeqig\r\n6MHa63br/XIMYuEE86bwQ8wnfKgr7zCunw+Y0FbC5ZnJQQxAv03H7/Wx/VAx\r\nwSQWGrIG3S6xryG8hOClIN15D85QwlM76xgQo3Z55hdPq3AOMA38XlxtetcO\r\n15/T0/m/bynyd+5acYxdJdzfhZN5NC2A+tsMWWcqnZLDEOf9b52unN1p7BGF\r\n9o8cgTjlnExBKrkNsFRU/mio6BZZSAoHdFdns/GOM6xdFp9FxDPocCAanpJx\r\nt74r2zMyC9lXQqUeesKOT0R058q8e4RHBAsdNIc6liX2dzNhkFx4Eun3R1UC\r\nk/f6262/JnmnW13c78dl6B8JLOIq+FDZq0Q=\r\n=flf/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230424025503_1682304922511_0.6787789632736683"},"_hasShrinkwrap":false},"0.0.0-20230424030356":{"version":"0.0.0-20230424030356","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"0fb3180c20b9cb072ad0bb5b3142103abfec64ee","_id":"@primer-steps/primer-steps@0.0.0-20230424030356","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-y1IJBSBuVWSwlPtkKIN7drH82WO9crIoPfSo/JlGLHOHUWEyJNc3mNF7WbjvOD6i4IrTyc+wCrZvLcj4pSTSQg==","shasum":"8da4ee1eccbb0e886459d5337049e0750515e0ba","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230424030356.tgz","fileCount":31,"unpackedSize":80323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6Hy/oKF0qehD4mc5jrMuZlhchXTWIfu76Dbhjpl0UVAiEA0MDiKOzJCApOJlbXVGdEdE6g6TrVxynM4sfSZhKFM3c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRfGvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqScA/9FRgFg5hHkhjqiCf5MpU3K2YxyV6QRCVW3sHxIBl3NPEK7A5w\r\nbSU6I3VmOBZqS9Aeawrt224ZVWgIMZDyl3q7VnqcH5wu0opNNZY3Hl8F/svw\r\nnbRnaPwAm2XLn+Ip/MPPmm6creqXrp9BMLaMbYTAZ9x5ggc7k9jbX9+KQ0DA\r\neizw7L+8lgJwwYq2HzXxKkytDSUcywVmzdeDk36cOxwf8dAexDgmJYLpCsPP\r\nkxppObjsOI/eiZ7LL1x1hiVGkutPhYgRDXvPg5DhSUh0UYotRqzagJ1nNQ6/\r\nPYqmyVlnN3HpRSQD2lgvHfKGeHWRSp1hqYh35mlnNis89MK5nhteJiH3EsqW\r\nTdNDp0NGm6kcoBFhUFLPJZvAE5HILnIpd6asVs9ALKRdqrhmtCQsLx8bQXDb\r\ndTte118y3yBv8IEKS8cFm08ZP5oF29wwfnCIe5J+kySOv9EXvTrwMgMHgSim\r\n1XZmE5DvcEsZpfHZd/gkDJkEUjGEpTdkmxhrkItrOzfHKP9GwoRIV9pNFfZT\r\neWL5Xpq0sC4fkyLQMaV+6b2/i42sSC5NeTM+XTLHgwZdbv9ULvN1DVM+WyBx\r\nTTGyv2mdvE+gWMk0VQqM1DH6koQi9J43dxKagchgw1oyVkNitlzzC8ClwxQF\r\nx9cMfD9BsaoLSDOE0NbHD1bCQ7bOMGBxJN8=\r\n=iT61\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230424030356_1682305455564_0.8920969621398602"},"_hasShrinkwrap":false},"0.0.0-20230424030550":{"version":"0.0.0-20230424030550","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"7f39ede0e2798a8c3aebbb334141b11c1ed4ce1d","_id":"@primer-steps/primer-steps@0.0.0-20230424030550","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-vtxso3mPhpEEx+mISjUn0gMCt5epXBPImOaHDZttCRQFtc30n++5DZw2PYaDJCjvHJNSZ32Jesr9k9RE/+zlXA==","shasum":"ff02f9431c4563bd8c54d3aa0b8ccd0dcdfb7697","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230424030550.tgz","fileCount":31,"unpackedSize":80323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhY5LzNdnPUvufOarrKR5ByMNrtLT8lvcKRWUInlWr3wIgEF1kxB7ItRYA3X1wbIc7hWEeIg++8LoimQxzv7qQRUg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRfIgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBkQ//faVQIWOW9CHfVpmKb1GxGeRPu0m1rLJRmc/xj3M3oTbdlQ12\r\n99ssUPqYTdahKqryuX5DV2thy+hH7RgvnYTjNoJPgWkL9RC8fuIylxFJR72p\r\n6W8uRKb2mJ9wThSIgT87Nv8ViuhVzEOzz+15ChFymwQdio7V+kIpDH6lvFGo\r\nry7gR+Ai8j3g0EKYxk90XmthtEAgr4SlWjs7EcCEbiOd0Z38JUAYVMUaZXIF\r\nR7tL9n/oZ0H75NPdhR/+vTq6R5SQTX1dLP0OqyE/HPc4UPGlENA6LrN5oFpB\r\nCiL88FnvTi3+1LSCgavQgGepyBJXWx7qwX/WlWOol7RtCcaljCTIENAU0Hfr\r\nqGVCCOq6zYvLpbsHSxlBHHU4ZwUMO3JimFDPg63F75BERMYSgeya0jFS9Oev\r\nxm4wi4SyXH4UknZTcCxXPlwgt6Ze3LILxSRo5g6QKt9QgMt2y0ZoIDNnLOqO\r\n0hNxKVZ9+vcV3SjUBxd19CgkZP0lC9nhSVCy5BK8vB82jLI3ppQhnlfPF5/u\r\nKVwnu/KYQt/6Y1MTSbJbLN9inVLRkR43l35b6I/ZdTuYaN9r9fy79AtTDVmD\r\n8CM7SuZWwGtEm+LP30P2FdY9UABUTXeINz+Sct23Kv9DLG7mSFU/Ueat8M2j\r\no9R8G4XAlZjGiZd/j2Kk1sAy6jbgNmbVm6M=\r\n=pLMk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230424030550_1682305567863_0.5967405917102653"},"_hasShrinkwrap":false},"0.0.5":{"version":"0.0.5","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"58500c1d3cd9a8f7283431c6b471f9438e87b430","_id":"@primer-steps/primer-steps@0.0.5","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-IvDQOuod9nsR22BGADGjBZbuqaFpUUp1z6nZqk6p3wVauaa2Gz6KuqpW53z0MOL93E5AhvI9XAj6FXcWUOk1Xw==","shasum":"03ae0a1b42921bf09d781b2bed98cf95705f9472","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.5.tgz","fileCount":31,"unpackedSize":80308,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCD/zKFxwg//3a9caI4MHmCmU72MJkGn8qBS7wThMKRQIhAI78lTLwesxWgOZfWjaXUX6S2gGiIZN8yn4NA7zaxX9t"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRfRzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPGQ//aoDyNg5axuD6G5FivBJPf3Yn+dDls2VldShWKot7xvKXmzqI\r\n3if/sBrD6r6XiMqf9Zrw2VcImttUlE6VFJj6Y0m17Sr9JbWdAdTkwN/zIGzc\r\nVLdW96XyvaaEBbZMFDxtDpn4189Lr2T6slTenk26hDcEWzizhBa+Bho3J0NV\r\n8adnhEZ+nrIBkWw/QYOP5NQ4b/GxPe/gA/QeZm8u53vInDFI4AVSMf0/jY07\r\nlIAe2z0JkTyrtPnvGHzDMFMSj2mFLPDmJ/3MsQzUWqlcjai9nEsfxPzVOy4E\r\nwWNg9teq+3xnz/JxYAabK/JnCZpCFrkYnQpH1Sg7InNDzZquiUqW19nvTUmv\r\n3V1sLYMb7+ClkRQxSpzfAd0vIxBv1qpz9QSdX/FllDi30pCMpRl70Mv9iTGK\r\n3Ywre4yVxRg25PE3UnLjV3/sLweC3/jUy3D/VmV0FWV1RSMv6H0i5mSUM/pz\r\ng5L8PQGThlJwBtUiCujKe4tK7wYDwpA4eeTy2ZXXxlfMIym+N54lbNyfOU2v\r\nH3WfEneI5eKdxs1ooGN72L8l/L2wW87/sUL3aAkoTt1FV61OZZI+rlt1LXak\r\nEYJpCehdJ3VJDue6kAjVoltp4IupYH/TlAaZfFXGFwOJ5L3QRZTnMET9sgXY\r\nHLrJR2XwE7vXIMCsjzwjfQM7UHjrW6nwxsM=\r\n=CkR5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.5_1682306162872_0.006573986604886395"},"_hasShrinkwrap":false},"0.0.0-20230425001913":{"version":"0.0.0-20230425001913","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"dd9102a8723b84724451b8fec1d2b7ec8d7af64f","_id":"@primer-steps/primer-steps@0.0.0-20230425001913","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-kmHsiasST8NbB79FvQ5S8u10C2NFDb54wGxzIGjPoM2r9OjuJTWwMs4iV5W9OIX7ubvZyz+v/1rZrF64oYXBmg==","shasum":"7a7c9377f0ef1ade7156a9841a2c911acc2e0815","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230425001913.tgz","fileCount":31,"unpackedSize":80672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGcVIEcw3cten2rrSinoejC5A2sMmzpW5v403xvynt2AiEAz1fGEQJdJqxaBgHQDpOFI9wXy8+CrKVZYaYFLt+RXE8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRxyUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiFxAAjXzkvE+3fFkU0DtclKoBlcnZenNLhOO6fl1hv83PmnGviY9Q\r\nLHrI96SDWij+yi589qAz1DClYXwmZ02Cq6ruMLE1SrkZAOnZ1nycqIFjBPjF\r\n7RPLEH1Fp6uxJSbCtP+wXhR0U9VXxTCxmJk+ag2CFC2mPrlzjQjBkNRzhOhj\r\nnWKjd3pnEpnHIJfxngSOuWdKQhu/5e1WfOL0O066JYgYPukZnCRZQYszHF+V\r\nZAviJrytEGh5TJLAbxHayua9212mq24N6kTQY1ZCX43oEUHvigrgy9BNXXxm\r\nZqrMuPcMBuRQCBsoKBSx+9iXNiYvdej/2Ul+eblHt6KjM2nEfdcDSx/W9w9F\r\nG0yTWPyHExYVViiFPY4yIt8qL8O6xmOWAWxDCf1CO1/xRW2PvOpSGMH8fsEj\r\nIalI1vbLgz6itX6M3scTHRLqYsEpzEDxDM6bzIT7yyiEooG2KS3QHW33MvMA\r\ngzczGgW8BWPttnuvgLoX/IxT4oh7wDVhRA6GzABIxaqG8ysOYBBQUxIpuqAL\r\ngQxY9yt4jCnwZrIuDLamQB3w0HP/3xS6ACMfw9eBxs/qkSSCbNqfttT1Gb/F\r\nv4Bxnwxegxf7eIo2/UuBMbr6sWQTPHRzp2oDnBvs+OeYbUyATkr6TIuiBHGE\r\nZ6HjGVYt4BRLQWVXCdzcNAJR3eRK66MR2VA=\r\n=VWPC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230425001913_1682381972516_0.800641979921785"},"_hasShrinkwrap":false},"0.0.0-20230425001942":{"version":"0.0.0-20230425001942","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"08a1340a3f3b373ab8cc0e65240ccee63beadcc6","_id":"@primer-steps/primer-steps@0.0.0-20230425001942","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-Pkpin5hHJBjcn/TPAE1UK6RGeLPY6X4t9ItKeEtdrp7ruTjmaD7jycQUtUTBFczYLiByxoGD+5oDaaNwooO9lw==","shasum":"abdb590c981f888feccf0aac4c1609ee9a7435da","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230425001942.tgz","fileCount":31,"unpackedSize":80672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfKdK9+/aS5rfIDPi0beLC4a06QeH0DAuoh5a8oSg0ywIhAJKnk65ovDKLs5hWYwcO/omOgF9bsaE9n8hw4VxRTG0f"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRxyxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCYA/+I3uao+aJr4HJp3TpFFkVn/gmTd1LxajG4ho/L6SVP6ihQ4/x\r\n2BZ15sLxN58elHSzUqvlOMp2xzRZidDeNbH0cktHeoWlm+b+UFW9LjJ8U8W0\r\n9/M5C+d4AgtXIx+BPQdkSNAr6OyfLtXBfOeXn9gNulyCq4zgjAv/2c0wY4f2\r\n0zI+pWTvlEx6djwOunsvlLlfLVbb/D0Oc7+95r4lnxk6kmJv0TNOKyuv5wq5\r\n5+zZaTUrj5w3QAIH7W84qQqloRMxv1f12dbnQlbNEMveG/5O0jIDz5v3ofVG\r\nCWyoL3TgpTxcVwJ4PieUhmAEDOjxc2xF8xg9pWv7iD6GVVihcluRgn1luZjY\r\nyudS+rBQ4wXkmZlsnlspCwhROC8bdfI4hbmrL0S3rh6ZUX/vIqE/kpqZRWOu\r\nFalXtSkhx78mMIA86XB/fy4K8Zy+ng6QOSmhuVAui/vaqeZsZcI056WNPaE0\r\nxuFbvNvT2uq1AWxtRxcs4jrme4UsAijyr9mwFxOerhZCYnGIDFXfUiy9Xyat\r\nabdS0ChQHoPj/WCzt4V+8aBX52gGyuUcP+ji5MmJVXYFxMP6Zdw1uWmlLKvw\r\nj0HTysH/T6A7J8X8CGKz5IUFvfzF+XUbq4IRtWNJ83eXEA/gKhKHYNpmVhr2\r\nR9zOaR3Knvux8GfXJeIHA/IG00pniyGBptQ=\r\n=bFc5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230425001942_1682382000790_0.44443372064479725"},"_hasShrinkwrap":false},"0.0.0-20230425025844":{"version":"0.0.0-20230425025844","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"0a293d225cfcfd33b9b11b01404f34f9262a72b0","_id":"@primer-steps/primer-steps@0.0.0-20230425025844","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-PY6rwRQmLkAZPCx+K1nmFryvCktmZrf40ZAvs5v8iqeEnlEgE09e1Qeqs7a0CWiVPOcXFrVOaEly/YOJ941CVQ==","shasum":"91af1778d79371e2a34d3b6264508563138b7eda","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230425025844.tgz","fileCount":31,"unpackedSize":80672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPMRHdg2dtP/gDLuzMoo1spnAIUwzzBHIeSmHcAFnLBAiEA5MQnfK8UHEZeACTW7MoKX+TSfTmEhETKTuIWISiRSyQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkR0H3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd4g//Q78XQB5GrfmwWJqkFLJ6q9BaIviRcdx08O//NGA56rbTVQeu\r\n9CQypLGaDAR7oCsieIEZr2KZA0/cnEXQWNPCA4+i9KCvnXo7UbQckqLojyUz\r\nS+dx6qYqD9hB26MC0xNKIVpdSA5CfbcmZIQEwHKThwRYfaZO1QGn0qtPtaX+\r\nZcfnQlxsjKYDigFHVPNnw+i/wjHtss4+9vbyZckS9sAPrbEC75Rk7k0uqZcU\r\nXYP+0n29My9AgfEk6UaiA83eJ/YUGMK9O8SEiRB6qL6eMiVhjHszjkEw3RPW\r\nKbFO2n5MS621g0sNyEykm8zSGQAw322jX8ouraMNQ/XS+1PFjpk1iRXVzdVo\r\n9QrlJY7cn4EMDFR3yigm/8pCFeE9R4f0rulvkCCyxZv/WW59ZUAWbkBQIJaQ\r\nuHRqmkVoZaAfo7IPtMAsZnkhu3GxK7Y9sqv+tfVvyUWgYEDsaDvZ4hKQjY4F\r\nhC+nP0uvp/PGngUHy8ATU9xTxasXLi3AJy59+rnH1mXq/nV+WDJnF/EbY0gu\r\njSpOamZIl+ByEplfTq4E8gTMN3zj8kdDv6LJg1z5/kG2SCNLfDzEzRVb71zZ\r\nKMwMay/MX9Y7cRqYUW0VBg+OkAtbFTlp0vaN2F0h44uqSbA0wFRX8xZ84OD6\r\nDcOj1mfe2iNkp4onpfEzLdghDFhxf2Qqylo=\r\n=RxgP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230425025844_1682391543420_0.3843778309304584"},"_hasShrinkwrap":false},"0.0.6":{"version":"0.0.6","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"gitHead":"5dcbdb1d090c7bc4fd681028a43610f718e4ac0a","_id":"@primer-steps/primer-steps@0.0.6","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-cJXqqxIefL1C2OQBcQa2g7q4QCRlqROs5ZsZ2uBpaLDf60zZ82lCGnkRomNkmYQDC+wuJ7CqT4UuZVUfMWfOEA==","shasum":"a3051550e875a816365ac6742d78e4a29d94feff","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.6.tgz","fileCount":31,"unpackedSize":80657,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8qqewL/mqBShoa2IcxkpwcQ0vVcwQUcKPXIvnY+YgmwIhAIrAviyJCj+8dgG6FZRD/ON2AV4o/t6bqFU5G6OW/V43"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkR0JMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYRw//d8GCG+etSnRzIi/7CpDWLPSSJYwKCK0qUUTw2P62Yv7uLuDv\r\nYSKEStYgrZON8WKUYY8EsVybvwWzeXKy6C9eFjRjnH83Gmx2Ffi0GtoTF9tm\r\n5LXqWmYFU3LKmiypFu0nz0ynReF6M6Ieu7eUwI1t9+giZ2r4Ho7aOK0LuhIb\r\n0qLr8W/RcLL/4TPqE4J9Gkkl0+E++/afXfpu8wLpquQsgJSE+3474ISa1Vsb\r\no4DFeS5sYsaLcAYwa6gfiA3KzxBHmaIqc8tWErK9wSW+vKrxnw9aAJqCzw15\r\nTA28qDzZrgJPMyOtfwdEw720m7OQ2774SUspdp8CjsgcX+3ae0BA/d5RsQcM\r\nmaWK6jN3/mmnYMCmVujwWGo4TPXDEBzGp4YS6fRBVKvY0gqRLPsKk+Teo5Ce\r\ndj8zzWkAaHPuCUwT9/kT/7r2mHjjiL1q0JOMe57OkXjE4Bmj7Bmgu5Eta+Pk\r\nl0EGiutogLbyJM5qtXtbNtnvLi+06vP5ZP/XxGSSmsoBBJ1vQlUE0qagO7PO\r\nLJaxnj+XQvMXAPbJQTYXtZMlat/61SUghDyW0UalYZoGXBMdzDxLaRhIdpXu\r\neGPBjJnRk210j4YG+VLRYQ0TIVx8CdoXKj9DgogyE2pCGzKNzk00kNMozKnr\r\nlBc60y9wxITMn5C95MM+x4R8iq14aJnkFuM=\r\n=p7Ei\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.6_1682391628268_0.15660918177813765"},"_hasShrinkwrap":false},"0.0.0-20230525025114":{"version":"0.0.0-20230525025114","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"cc78d3e37e80503422b40cc138479b4c0e6d8717","_id":"@primer-steps/primer-steps@0.0.0-20230525025114","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-GELSCHh9biqUTnKG8U1gvuRXH9SVwa1uZ9GmNuRl3uFVVWFpRbHoB7e0i1lePQt5uBYr/n83Wz2pd/PBBklBbw==","shasum":"1a08fd450d3dcd9ac3656f175b5bdc17479486cb","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230525025114.tgz","fileCount":31,"unpackedSize":81076,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCDTTz1VhpxcwcsCD7Vt3c8HSP9icwV7vbs6yqNmWwoAiEApyjrHmWim9lTGmt1NrCesC/+CTzGooJHV0pTh54DpIU="}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230525025114_1684983098118_0.6755706856242834"},"_hasShrinkwrap":false},"0.0.0-20230525030241":{"version":"0.0.0-20230525030241","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"2b4c30ee2e35dfffeaa5630c4c073baeb89ce3dc","_id":"@primer-steps/primer-steps@0.0.0-20230525030241","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-bl4v4d2tk6XE8C4HRQM6U2CoV/qSKlVegbG/lK+4kCe58kSMfwSUO6ENCYqi+4k7APPIITjHAYV6QEu+dhHSZw==","shasum":"d30d3a09d25a59e1cb1b35589f1894debc0b28e0","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230525030241.tgz","fileCount":31,"unpackedSize":81076,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUlsrFDbkAs5DwqbpjbDcJ9nZfL60nGYCRjIdQXiXZmQIgOTJhgPOKgU0xetUW6KqaAXCLI8C8TNX4dyknIVSA3+8="}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230525030241_1684983784987_0.0523273640287254"},"_hasShrinkwrap":false},"0.0.0-20230525030649":{"version":"0.0.0-20230525030649","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"863f66d52be2980f6ffd4995221aafb20d0802af","_id":"@primer-steps/primer-steps@0.0.0-20230525030649","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-RxbW1ocTOMQqEm7ONCGAdvrdzZ1ElJcIb+RxwuYW8o/F9OppqcIpH6znwqOzQUoBPRuOZZS1GgUwlTcD8oM/0g==","shasum":"c42c33e65ea4a99347d11f70a1f8247e66ea6699","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230525030649.tgz","fileCount":31,"unpackedSize":81568,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArpo1ibmm+tNq2T81yHlJjoYY/3hSRLn86HqaKUwiDZAiEA4/UZZdhEKUKNM1cQrI1Td0FKllyXzCrBpfsXaZrLLeM="}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230525030649_1684984034379_0.5440501808383122"},"_hasShrinkwrap":false},"0.0.0-20230525031717":{"version":"0.0.0-20230525031717","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"3421f270a96f797305b2d8cd3b358fe787f6fa49","_id":"@primer-steps/primer-steps@0.0.0-20230525031717","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-6VAqI/WU2sAqh1wUaFzZ7emQyrHu1e9+SBKzmi3V60jR7TPptkkEfaXha3ntSusUHCbrabh++yYRmuqwCBgDvQ==","shasum":"8f65473567e58e54abde86b8f026dcbe24307f75","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230525031717.tgz","fileCount":31,"unpackedSize":81626,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnPYrUj/IOVQ9GSER7IGRXcUqfAzM4A0/BSevqe0RXsAiBSFcdeXEpiS5KVzmxnh1eD5IgKJg8r5drs1n42E+60Dw=="}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230525031717_1684984655182_0.946628267162517"},"_hasShrinkwrap":false},"0.0.0-20230525034424":{"version":"0.0.0-20230525034424","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"bb723b0c550e41cf3595b87e36e4fddc2bb03545","_id":"@primer-steps/primer-steps@0.0.0-20230525034424","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-o4wOa5+C40beqJa2zlYruTqCmI4cA7zmv39E8y7TOD+Xf0TdtJV5ods7wgUFSKO0E5Rgc4PTyBMCbyEtzDa2Pw==","shasum":"2b21528b60e13915a195333471b5094937a8508e","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230525034424.tgz","fileCount":31,"unpackedSize":80672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHa51ecb7VRX3LJM+B0+tpnH4XGxitf22df6kU+KISUQAiAalCmdYJs0S592HrRYsItIir5IOeo1/9QDSe2PovwhwA=="}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230525034424_1684986287374_0.07273946162381795"},"_hasShrinkwrap":false},"0.0.0-20230625160414":{"version":"0.0.0-20230625160414","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"07aa1284cd50aa869774cc138c46fd308e58dfff","_id":"@primer-steps/primer-steps@0.0.0-20230625160414","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-i9RErQbiqOev+/Jwx5u3LuFIwXh3jaW/vpFMTknU0qmok/Iu4gZv4Abf0UC8wQKszNc6NGoG4WIf+0oZgd6Ebg==","shasum":"39d5ef353d60b298d7add1ae1da72415135f7f7e","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230625160414.tgz","fileCount":31,"unpackedSize":80672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcelvFAotQJi/pE83wwvy4+w1DUCphudA5B0r2oryk9AiEAiDUixuoomdNbNmnMQ7YoJapgbymQ8kMbldbzkebLR20="}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230625160414_1687709074140_0.3360481099243757"},"_hasShrinkwrap":false},"0.0.0-20230625163115":{"version":"0.0.0-20230625163115","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"c488e9ce75c04bd335a83631c1333802546930de","_id":"@primer-steps/primer-steps@0.0.0-20230625163115","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-K72ARilzYUj53UL4VfkADLovWlKrkbGe7ICG0cby+Qrd7q9jpj0cUa3KcArQ/H1R3Dmcimuf+arA1knywtZ5Uw==","shasum":"8743813c1248f410a331013dcc12fb14080d7b29","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230625163115.tgz","fileCount":31,"unpackedSize":80672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQiJbnEMHu6jymstOxSQt4rUSW8v34gW2W1lFhU/oUOQIhANn2IWFIbOOAXLrnVf/d/aNpYGeOczy3p5w6idxk+gJ0"}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230625163115_1687710693288_0.3856448523622651"},"_hasShrinkwrap":false},"0.0.0-20230625164256":{"version":"0.0.0-20230625164256","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"9cf609091d73fbb20323c1c0a53c6064ee08da07","_id":"@primer-steps/primer-steps@0.0.0-20230625164256","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-Fhp4EN4M+MIq8mqggX0DtZ2fHgzJKS2NCXR92ePl9x6j2kI9oLXr/TEbCgf2hVdqwfO0jvg/KfsS/uCQu016eg==","shasum":"68da2e1db61617cf8fa4b120b9f101022ed81278","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230625164256.tgz","fileCount":31,"unpackedSize":80672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK/qTtE/ILgzQZ2jcwhzVbBM1sMtF8OqHvbsISa7OvdAIhANqmOg6CJp5MLIkGPu4qHD2PW4tOrbWQQSxC61ES3Bmn"}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230625164256_1687711395645_0.7590046442982665"},"_hasShrinkwrap":false},"0.0.0-20230625164842":{"version":"0.0.0-20230625164842","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md","gitHead":"2fd9c82e14ccd63fd46c4ceabb42384d83141c6e","_id":"@primer-steps/primer-steps@0.0.0-20230625164842","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-xI7/elJjRWGMHmE9Cxy6FwPCts73oD0f/vKICmkC+4ypPQ8RtjoBeDHlb4VTvVOqROgK5yxRNTtrjCTB3pflow==","shasum":"b0b7db99e73f7d5d9ba55c0b724f0139cc3c081d","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.0-20230625164842.tgz","fileCount":31,"unpackedSize":80672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4BSDRZ6M4jZFXgx7sIBlifA9fQ5oXS+hF70C6/ITnMAIgSGnHAPFhnZ92o9kAHMx/whTJ26wuoBOBXEIbmXC7DTk="}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.0-20230625164842_1687711740993_0.09959738706825227"},"_hasShrinkwrap":false},"0.0.7":{"version":"0.0.7","license":"MIT","name":"@primer-steps/primer-steps","author":{"name":"Matt Oliver"},"keywords":["steps","stepper","primer","navigation","multi"],"main":"./dist/primer-steps.umd.js","module":"./dist/primer-steps.es.js","types":"dist/index.d.ts","description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","exports":{".":{"import":"./dist/primer-steps.es.js","require":"./dist/primer-steps.umd.js"}},"scripts":{"build-storybook":"build-storybook","build":"tsc --noEmit && vite build","coverage":"vitest run --coverage","dev":"vite build --watch","prepare":"yarn build","prestorybook":"rimraf node_modules/.cache/storybook","preview":"vite preview","storybook":"start-storybook -p 6006","test":"vitest","release":"yarn build && changeset publish"},"peerDependencies":{"framer-motion":"^6","react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"homepage":"https://github.com/theemattoliver/primer-steps","devDependencies":{"@rollup/plugin-typescript":"^8.3.1","@storybook/addon-docs":"^6.5.15","@storybook/addon-essentials":"^6.2.9","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.2.9","@storybook/addons":"^6.2.9","@storybook/react":"^6.2.9","@testing-library/react":"^12.1.4","@types/lodash.mergewith":"^4.6.7","@types/react":"^17.0.33","@types/react-dom":"^17.0.10","@vitejs/plugin-react":"^1.0.7","feather-icons-react":"^0.6.2","framer-motion":"^6.2.1","husky":"^6.0.0","jsdom":"^19.0.0","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","storybook-addon-performance":"^0.16.0","tslib":"^2.3.1","typescript":"^4.5.4","vite":"^2.8.0","vitest":"^0.7.6"},"dependencies":{"@primer/octicons-react":"^17.10.0","@primer/react":"^35.16.0","classnames":"^2.3.2","color2k":"^2.0.0","lodash.mergewith":"^4.6.2","styled-components":"^5.3.6","@types/styled-components":"^5.1.26"},"publishConfig":{"access":"public"},"gitHead":"06498712753f81696fd9a7d8e4ca405d00f62ff6","_id":"@primer-steps/primer-steps@0.0.7","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-8NsWA6qGazk+CR3B60nYq9rf7ks/2Z6ZzEobEUhCqmfG35FILr9sojeGXFi0taaoFcb4DbTDby3JoCIaAoHAKA==","shasum":"f3debe91de086e9a4f8a42fef789d5b1ec2c5994","tarball":"https://registry.npmjs.org/@primer-steps/primer-steps/-/primer-steps-0.0.7.tgz","fileCount":31,"unpackedSize":80657,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQSZ5u2gYdHtaVoBvXP99Sk1DZaC2mbJK6PMlpL5NCFAiBahdfPoEfpGsNKijSmdzyu60eQeuZDmFUnIAamUI4evw=="}]},"_npmUser":{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"},"directories":{},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/primer-steps_0.0.7_1687720193222_0.31188483465477046"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-10T05:00:15.724Z","0.0.2":"2023-01-10T05:00:16.116Z","modified":"2023-06-25T19:09:53.555Z","0.0.0-20230111023143":"2023-01-11T02:32:01.612Z","0.0.0-20230111023332":"2023-01-11T02:33:51.620Z","0.0.0-20230111023439":"2023-01-11T02:35:02.916Z","0.0.0-20230111023717":"2023-01-11T02:37:40.300Z","0.0.0-20230111023943":"2023-01-11T02:40:09.175Z","0.0.0-20230111024012":"2023-01-11T02:40:31.458Z","0.0.0-20230111024603":"2023-01-11T02:46:21.745Z","0.0.0-20230111024846":"2023-01-11T02:49:09.427Z","0.0.3":"2023-01-11T02:54:37.931Z","0.0.0-20230111030203":"2023-01-11T03:02:33.003Z","0.0.0-20230423224932":"2023-04-23T22:49:51.664Z","0.0.0-20230424023724":"2023-04-24T02:37:43.636Z","0.0.0-20230424023934":"2023-04-24T02:39:53.274Z","0.0.0-20230424024458":"2023-04-24T02:45:17.103Z","0.0.0-20230424025503":"2023-04-24T02:55:22.699Z","0.0.0-20230424030356":"2023-04-24T03:04:15.761Z","0.0.0-20230424030550":"2023-04-24T03:06:08.076Z","0.0.5":"2023-04-24T03:16:03.042Z","0.0.0-20230425001913":"2023-04-25T00:19:32.715Z","0.0.0-20230425001942":"2023-04-25T00:20:00.978Z","0.0.0-20230425025844":"2023-04-25T02:59:03.614Z","0.0.6":"2023-04-25T03:00:28.425Z","0.0.0-20230525025114":"2023-05-25T02:51:38.307Z","0.0.0-20230525030241":"2023-05-25T03:03:05.172Z","0.0.0-20230525030649":"2023-05-25T03:07:14.553Z","0.0.0-20230525031717":"2023-05-25T03:17:35.347Z","0.0.0-20230525034424":"2023-05-25T03:44:47.548Z","0.0.0-20230625160414":"2023-06-25T16:04:34.398Z","0.0.0-20230625163115":"2023-06-25T16:31:33.513Z","0.0.0-20230625164256":"2023-06-25T16:43:15.815Z","0.0.0-20230625164842":"2023-06-25T16:49:01.201Z","0.0.7":"2023-06-25T19:09:53.433Z"},"maintainers":[{"name":"theemattoliver","email":"mattoliver.mattoliver@gmail.com"}],"description":"Steps component, implemented with Github Primer. Inspired by Jean Verster's Chakra UI Steps, without the Chakra UI.","homepage":"https://github.com/theemattoliver/primer-steps","keywords":["steps","stepper","primer","navigation","multi"],"author":{"name":"Matt Oliver"},"license":"MIT","readme":"<h1 style=\"font-weight: bold;\">\n  primer-steps\n</h1>\n\n<span>Steps component designed to work seamlessly with Github <a href=\"https://primer.style/\" target=\"_blank\">Primer React</a>.</span>\n\n<span>Inspired by Jean Verster's <a href=\"https://jeanverster.github.io/chakra-ui-steps-site/\" target=\"_blank\">Chakra UI Steps</a>. All Chakra dependencies, Chakra components, and Chakra-dependent logic removed.</span>\n<br />\n<br />\n\n<!-- [![MIT License](https://badgen.net/github/license/theemattoliver/primer-steps/primer-steps 'MIT License')](LICENSE.md)\n[![npm - primer-steps](https://img.shields.io/npm/v/primer-steps 'primer-steps npm')](https://www.npmjs.com/package/primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/min/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![bundle size - primer-steps](https://badgen.net/bundlephobia/minzip/primer-steps)](https://bundlephobia.com/result?p=primer-steps)\n[![Total Downloads - primer-steps](https://badgen.net/npm/dt/primer-steps?color=blue 'primer-steps npm downloads')](https://www.npmjs.com/package/primer-steps) -->\n\n<p align=\"center\">\n  <img src=\"https://media.giphy.com/media/ud039lZ0ITbpenJxXo/giphy.gif\" alt=\"animated gif of steps component\" />\n</p>\n\n## Features\n\n- Multiple orientations\n- Easily render step content\n- Custom icons\n- Size variants\n\n## Installation\n\nYarn:\n\n```bash\nyarn add primer-steps\n```\n\nNPM:\n\n```bash\nnpm i primer-steps\n```\n\n## Usage\n\nIn order to get started you will need to use the Primer React `ThemeProvider` component, like so:\n\n```jsx\nimport { ThemeProvider } from '@primer/react';\n\nexport const App = () => {\n  return (\n    <ThemeProvider>\n      <YourApp />\n    </ThemeProvider>\n  );\n};\n```\n\nThen you can start using Primer Steps.\n\n### Basic Example\n\n```jsx\nimport { Step, Steps, useSteps } from 'primer-steps';\nimport { Box } from '@primer/react';\nconst content = (\n  <Box py={4}>\n    <LoremIpsum p={1} />\n  </Box>\n);\n\nconst steps = [\n  { label: 'Step 1', content },\n  { label: 'Step 2', content },\n  { label: 'Step 3', content },\n];\n\nexport const StepsExample = () => {\n  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({\n    initialStep: 0,\n  });\n\n  return (\n    <Flex flexDir=\"column\" width=\"100%\">\n      <Steps activeStep={activeStep}>\n        {steps.map(({ label, content }) => (\n          <Step label={label} key={label}>\n            {content}\n          </Step>\n        ))}\n      </Steps>\n      {activeStep === steps.length ? (\n        <Flex p={4}>\n          <Button mx=\"auto\" size=\"sm\" onClick={reset}>\n            Reset\n          </Button>\n        </Flex>\n      ) : (\n        <Flex width=\"100%\" justify=\"flex-end\">\n          <Button\n            isDisabled={activeStep === 0}\n            mr={4}\n            onClick={prevStep}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Prev\n          </Button>\n          <Button size=\"sm\" onClick={nextStep}>\n            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n```\n\n## Props\n\n> Note: Both the `Step` and `Steps` component extend the Primer `Box` component so they accept all the default styling props.\n\n### `Steps`\n\n| Prop                   | Type                | Required | Description                                                                | Default    |\n| ---------------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- |\n| **`activeStep`**       | number              | yes      | Currently active step                                                      | 0          |\n| **`orientation`**      | string              | no       | Sets the orientation of the Steps component                                | horizontal |\n| **`responsive`**       | boolean             | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |\n| **`checkIcon`**        | React.ComponentType | no       | Allows you to provide a custom check icon                                  | undefined  |\n| **`onClickStep`**      | () => void          | no       | If defined, allows you to click on the step icons                          | undefined  |\n| **`labelOrientation`** | string              | no       | Switch between horizontal and vertical label orientation                   | undefined  |\n\n### `Step`\n\n| Prop                  | Type                | Required | Description                                                          | Default   |\n| --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- |\n| **`label`**           | string              | no       | Sets the title of the step                                           | ''        |\n| **`description`**     | string              | no       | Provides extra info about the step                                   | ''        |\n| **`icon`**            | React.ComponentType | no       | Custom icon to overwrite the default numerical indicator of the step | undefined |\n| **`isCompletedStep`** | boolean             | no       | Individually control each step state, defaults to active step        | undefined |\n","readmeFilename":"README.md"}