[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\n    [\"@babel/env\", {\n      \"modules\": false\n    }],\n    \"@babel/react\"\n  ],\n  \"plugins\": [\n    \"@babel/plugin-proposal-class-properties\",\n    \"@babel/plugin-external-helpers\",\n    \"@babel/plugin-proposal-function-bind\"\n  ]\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": ".github/dependabot.yml",
    "content": "version: 2\nupdates:\n- package-ecosystem: npm\n  directory: \"/packages/lib\"\n  schedule:\n    interval: weekly\n    time: \"10:00\"\n  open-pull-requests-limit: 10\n  labels:\n  - dependencies\n"
  },
  {
    "path": ".github/workflows/ghpages.yml",
    "content": "name: Build and GH Pages Deploy\n\non:\n  release:\n    types: [created]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v1\n      - name: Use Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v1\n        with:\n          node-version: 16\n\n      # Cache dependencies\n      - name: Cache Dependencies\n        uses: actions/cache@v2\n        id: cache\n        with:\n          path: |\n            **/node_modules\n          key: yarn-${{ hashFiles('**/package.json', 'yarn.lock') }}\n\n      # Install project dependencies\n      - name: Install Dependencies\n        if: steps.cache.outputs.cache-hit != 'true'\n        run: yarn\n\n      - name: Build Shepherd\n        run: yarn build\n\n      # Build the example site\n      - name: Build Site\n        run: |\n          yarn\n          yarn build\n        working-directory: ./packages/example\n\n      - name: GitHub Pages\n        if: success()\n        uses: JamesIves/github-pages-deploy-action@v4\n        with:\n          branch: gh-pages\n          folder: packages/example/out\n"
  },
  {
    "path": ".github/workflows/publish.yml",
    "content": "name: Publish to NPM\n\non:\n  push:\n    tags:\n      - v*\n\njobs:\n  publish:\n    name: Build and Publissh\n    runs-on: ubuntu-latest\n\n    env:\n      NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}\n\n    steps:\n      # Checkout the repo\n      - name: Checkout\n        uses: actions/checkout@v2\n\n      # Setup Node.js build environment\n      - name: Setup Node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 16\n\n      # Cache dependencies\n      - name: Cache Dependencies\n        uses: actions/cache@v2\n        id: cache\n        with:\n          path: |\n            **/node_modules\n          key: yarn-${{ hashFiles('**/package.json', 'yarn.lock') }}\n\n      # Install project dependencies\n      - name: Install Dependencies\n        if: steps.cache.outputs.cache-hit != 'true'\n        run: yarn\n\n      - name: Build\n        run: yarn build\n\n      - name: Generate .npmrc\n        run: echo \"//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}\" > .npmrc\n\n      - name: Release version\n        run: yarn release --ci --npm.skipChecks\n        env:\n          GITHUB_AUTH: ${{ secrets.GITHUB_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/test.yml",
    "content": "name: Test\n\non:\n  push:\n    branches:\n      - master\n  pull_request:\n    branches:\n      - master\n\njobs:\n  test:\n    name: test\n    runs-on: ubuntu-latest\n\n    steps:\n      # Checkout the repo\n      - name: Checkout\n        uses: actions/checkout@v1\n\n      # Setup Node.js build environment\n      - name: Setup Node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 16\n\n      # Cache dependencies\n      - name: Cache Dependencies\n        uses: actions/cache@v2\n        id: cache\n        with:\n          path: |\n            **/node_modules\n          key: yarn-${{ hashFiles('**/package.json', 'yarn.lock') }}\n\n      # Install project dependencies\n      - name: Install Dependencies\n        if: steps.cache.outputs.cache-hit != 'true'\n        run: yarn\n\n      # Run linter\n      - name: Lint\n        run: yarn lint\n\n      # Run tests\n      - name: Run Tests\n        run: yarn test\n"
  },
  {
    "path": ".gitignore",
    "content": "\n# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n\n# builds\nbuild\ndist\nout\n.next\n.rpt2_cache\n\n# misc\n.DS_Store\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": ".nvmrc",
    "content": "16.13.1\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "\n## v4.1.0 (2022-07-07)\n\n## v4.0.1 (2022-07-06)\n\n#### :bug: Bug Fix\n* `lib`\n  * [#637](https://github.com/shipshapecode/react-shepherd/pull/637) Add children field for React 18 ([@andersaamodt](https://github.com/andersaamodt))\n\n#### Committers: 2\n- Anders ([@andersaamodt](https://github.com/andersaamodt))\n- Chuck Carpenter ([@chuckcarpenter](https://github.com/chuckcarpenter))\n\n## v4.0.0 (2022-06-24)\n\n## v3.3.7 (2022-06-24)\n\n## v3.3.6 (2021-11-02)\n\n## v3.3.4 (2021-10-29)\n\n"
  },
  {
    "path": "README.md",
    "content": "**This repository is no longer being maintained and all further development is at the main [shepherd](https://github.com/shepherd-pro/shepherd/tree/main/packages/react) repo.**\n\n\n\n\n\n# react-shepherd\n\n<div>\n  <a href=\"https://shipshape.io\">\n    <img align=\"left\" src=\"http://i.imgur.com/DWHQjA5.png\" alt=\"Ship Shape\" width=\"50\" height=\"50\"/>\n  </a>\n\n**[react-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project](https://shipshape.io/)**.\n\n</div>\n\n[![NPM](https://img.shields.io/npm/v/react-shepherd.svg)](https://www.npmjs.com/package/react-shepherd)\n[![Test Status](https://github.com/shipshapecode/react-shepherd/workflows/Test/badge.svg)](https://github.com/shipshapecode/react-shepherd/actions?query=workflow%3ATest)\n[![Maintainability](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/maintainability)](https://codeclimate.com/github/shipshapecode/react-shepherd/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/test_coverage)](https://codeclimate.com/github/shipshapecode/react-shepherd/test_coverage)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nThis is a React wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site tour, library.\nIt's mainly a wrapper around the Shepherd library that exposes the tour object and methods to the context object\nthat can be passed into props for dynamic interactivity.\n\n## Install\n\n```bash\nnpm install --save react-shepherd\n```\n\n## Usage\n\n### Via Provider/Context\n\n```jsx\nimport React, { Component, useContext } from \"react\";\nimport { ShepherdTour, ShepherdTourContext } from \"react-shepherd\";\nimport newSteps from \"./steps\";\n\nconst tourOptions = {\n  defaultStepOptions: {\n    cancelIcon: {\n      enabled: true,\n    },\n  },\n  useModalOverlay: true,\n};\n\nfunction Button() {\n  const tour = useContext(ShepherdTourContext);\n\n  return (\n    <button className=\"button dark\" onClick={tour.start}>\n      Start Tour\n    </button>\n  );\n}\n\nexport default function App() {\n  return (\n    <div>\n      <ShepherdTour steps={newSteps} tourOptions={tourOptions}>\n        <Button />\n      </ShepherdTour>\n    </div>\n  );\n}\n```\n\n### Via Hook\n\n```jsx\nimport React, { Component } from \"react\";\nimport { useShepherdTour } from \"react-shepherd\";\nimport newSteps from \"./steps\";\n\nconst tourOptions = {\n  defaultStepOptions: {\n    cancelIcon: {\n      enabled: true,\n    },\n  },\n  useModalOverlay: true,\n};\n\nexport default function App() {\n  const tour = useShepherdTour({ tourOptions, steps: newSteps });\n\n  return (\n    <button class=\"button dark\" onClick={tour.start}>\n      Start Tour\n    </button>\n  );\n}\n```\n\n## Configuration\n\nThe following configuration options for a tour can be set on the ShepherdTour to control the way that Shepherd is used. This is simply a POJO passed to Shepherd to use the options noted in the Shepherd Tour [options](https://shepherdjs.dev/docs/Tour.html).\n**The only required option is `steps`, which is an array passed to the props.**\n\n### tourOptions\n\n`PropTypes.object`\nUsed to set the options that will be applied to each step by default. You can pass in any of the options that you can with Shepherd.\n\n### steps\n\n`PropTypes.array`\nYou must pass an array of steps to `steps`, something like this:\n\n```js\nconst steps = [\n  {\n    id: 'intro',\n    attachTo: { element: '.first-element', on: 'bottom' },\n    beforeShowPromise: function () {\n      return new Promise(function (resolve) {\n        setTimeout(function () {\n          window.scrollTo(0, 0);\n          resolve();\n        }, 500);\n      });\n    },\n    buttons: [\n      {\n        classes: 'shepherd-button-secondary',\n        text: 'Exit',\n        type: 'cancel'\n      },\n      {\n        classes: 'shepherd-button-primary',\n        text: 'Back',\n        type: 'back'\n      },\n      {\n        classes: 'shepherd-button-primary',\n        text: 'Next',\n        type: 'next'\n      }\n    ],\n    classes: 'custom-class-name-1 custom-class-name-2',\n    highlightClass: 'highlight',\n    scrollTo: false,\n    cancelIcon: {\n      enabled: true,\n    },\n    title: 'Welcome to React-Shepherd!',\n    text: ['React-Shepherd is a JavaScript library for guiding users through your React app.'],\n    when: {\n      show: () => {\n        console.log('show step');\n      },\n      hide: () => {\n        console.log('hide step');\n      }\n    }\n  },\n  // ...\n];\n```\n\n## Steps\n\nThe options are the same as Shepherd [options](https://shepherdjs.dev/docs/Step.html).\n\n## License\n\nMIT\n"
  },
  {
    "path": "RELEASE.md",
    "content": "# Release\n\nReleases are mostly automated using\n[release-it](https://github.com/release-it/release-it/) and\n[lerna-changelog](https://github.com/lerna/lerna-changelog/).\n\n\n## Preparation\n\nSince the majority of the actual release process is automated, the primary\nremaining task prior to releasing is confirming that all pull requests that\nhave been merged since the last release have been labeled with the appropriate\n`lerna-changelog` labels and the titles have been updated to ensure they\nrepresent something that would make sense to our users. Some great information\non why this is important can be found at\n[keepachangelog.com](https://keepachangelog.com/en/1.0.0/), but the overall\nguiding principle here is that changelogs are for humans, not machines.\n\nWhen reviewing merged PR's the labels to be used are:\n\n* breaking - Used when the PR is considered a breaking change.\n* enhancement - Used when the PR adds a new feature or enhancement.\n* bug - Used when the PR fixes a bug included in a previous release.\n* documentation - Used when the PR adds or updates documentation.\n* internal - Used for internal changes that still require a mention in the\n  changelog/release notes.\n\n\n## Release\n\nOnce the prep work is completed, the actual release is straight forward:\n\n* First, ensure that you have installed your projects dependencies:\n\n```\nyarn install\n```\n\n* Second, ensure that you have obtained a\n  [GitHub personal access token][generate-token] with the `repo` scope (no\n  other permissions are needed). Make sure the token is available as the\n  `GITHUB_AUTH` environment variable.\n\n  For instance:\n\n  ```bash\n  export GITHUB_AUTH=abc123def456\n  ```\n\n[generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable\n\n* And last (but not least 😁) do your release.\n\n```\nnpx release-it\n```\n\n[release-it](https://github.com/release-it/release-it/) manages the actual\nrelease process. It will prompt you to to choose the version number after which\nyou will have the chance to hand tweak the changelog to be used (for the\n`CHANGELOG.md` and GitHub release), then `release-it` continues on to tagging,\npushing the tag and commits, etc.\n"
  },
  {
    "path": "netlify.toml",
    "content": "[build]\n  command = \"yarn build && cd packages/example && yarn build\"\n  publish = \"packages/example/dist\"\n\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/shipshapecode/react-shepherd.git\"\n  },\n  \"private\": true,\n  \"workspaces\": [\n    \"packages/**/*\"\n  ],\n  \"devDependencies\": {\n    \"npm-run-all\": \"^4.1.5\",\n    \"release-it-yarn-workspaces\": \"^2.0.1\"\n  },\n  \"scripts\": {\n    \"build\": \"yarn workspace react-shepherd build\",\n    \"release\": \"yarn workspace react-shepherd release\",\n    \"start:lib\": \"yarn workspace react-shepherd start\",\n    \"start:site\": \"yarn workspace react-shepherd-example dev\",\n    \"start\": \"run-p start:*\",\n    \"lint\": \"yarn workspace react-shepherd lint\",\n    \"test\": \"yarn workspace react-shepherd test\"\n  },\n  \"release-it\": {\n    \"plugins\": {\n      \"release-it-yarn-workspaces\": {\n        \"workspaces\": [\n          \"packages/lib\"\n        ]\n      },\n      \"release-it-lerna-changelog\": {\n        \"infile\": \"CHANGELOG.md\",\n        \"launchEditor\": true\n      }\n    },\n    \"git\": {\n      \"tagName\": \"v${version}\"\n    },\n    \"github\": {\n      \"release\": true,\n      \"tokenRef\": \"GITHUB_AUTH\"\n    },\n    \"npm\": false\n  }\n}\n"
  },
  {
    "path": "packages/example/.eslintrc.json",
    "content": "{\n  \"extends\": \"next\"\n}\n"
  },
  {
    "path": "packages/example/README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "packages/example/astro.config.mjs",
    "content": "import { defineConfig } from 'astro/config';\nimport react from \"@astrojs/react\";\n\n// https://astro.build/config\nexport default defineConfig({\n  site: \"https://shipshape-react-shepherd.netlify.app/\",\n  integrations: [react()],\n});\n"
  },
  {
    "path": "packages/example/jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \"./src\",\n    \"paths\": {\n      \"@components/*\": [\"components/*\"],\n      \"@css/*\": [\"css/*\"]\n    }\n  }\n}\n"
  },
  {
    "path": "packages/example/package.json",
    "content": "{\n  \"name\": \"react-shepherd-example\",\n  \"homepage\": \"https://shipshapecode.github.io/react-shepherd\",\n  \"version\": \"0.0.0\",\n  \"license\": \"MIT\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@astrojs/prism\": \"^2.1.2\",\n    \"@astrojs/react\": \"^2.2.1\",\n    \"astro\": \"^2.10.7\",\n    \"react\": \"latest\",\n    \"react-dom\": \"latest\",\n    \"react-syntax-highlighter\": \"^15.5.0\"\n  },\n  \"scripts\": {\n    \"dev\": \"astro dev\",\n    \"start\": \"astro dev\",\n    \"build\": \"astro build\",\n    \"preview\": \"astro preview\",\n    \"astro\": \"astro\"\n  }\n}\n"
  },
  {
    "path": "packages/example/src/components/home.astro",
    "content": "---\nimport { Prism } from '@astrojs/prism';\nimport Tour from './tour';\n\nconst installString = 'yarn add react-shepherd';\nconst componentSetupString = `\nimport React, { Component } from 'react'\nimport { useShepherdTour } from 'react-shepherd'\nimport newSteps from './steps'\n\nconst tourOptions = {\n  defaultStepOptions: {\n    cancelIcon: {\n      enabled: true\n    }\n  },\n  useModalOverlay: true\n};\n`;\nconst usageString = `\n${componentSetupString}\n\nfunction Button() {\n  const tour = useContext(ShepherdTourContext);\n\n  return (\n    <button className=\"button dark\" onClick={tour.start}>\n      Start Tour\n    </button>\n  );\n}\n\nclass App extends Component {\n  render() {\n    return (\n      <div>\n        <ShepherdTour steps={newSteps} tourOptions={tourOptions}>\n          <Button />\n        </ShepherdTour>\n      </div>\n    );\n}\n`;\nconst usageHoookString = `\n${componentSetupString}\n\nexport default function App() {\n  const tour = useShepherdTour({ tourOptions, steps: newSteps });\n\n  return (\n    <button class=\"button dark\" onClick={tour.start}>\n      Start Tour\n    </button>\n  );\n}\n`;\n\n---\n\n<div>\n  <div>\n    <div>\n      <Tour client:only=\"react\" />\n      <div>\n        <h5>Installation</h5>\n        <Prism lang=\"js\" code={installString} />\n      </div>\n      <div>\n        <h5>Usage via Provider/Context</h5>\n        <Prism lang=\"js\" code={usageString} />\n      </div>\n      <div>\n        <h5>Usage via Hooks</h5>\n        <Prism lang=\"js\" code={usageHoookString} />\n      </div>\n    </div>\n  </div>\n</div>\n"
  },
  {
    "path": "packages/example/src/components/tour.jsx",
    "content": "import { useShepherdTour } from '../../../lib/dist/Shepherd.es';\nimport newSteps from '../steps';\nimport 'shepherd.js/dist/css/shepherd.css';\n\nconst tourOptions = {\n  defaultStepOptions: {\n    cancelIcon: {\n      enabled: true\n    }\n  },\n  useModalOverlay: true\n};\n\nexport default function Tour() {\n  const tour = useShepherdTour({ tourOptions, steps: newSteps });\n\n  return (\n    <button class=\"button dark\" onClick={tour.start}>\n      Start Tour\n    </button>\n  );\n}\n"
  },
  {
    "path": "packages/example/src/css/duotone.css",
    "content": "/*\nName:   Duotone Light\nAuthor: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)\n\nConversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css)\nGenerated with Base16 Builder (https://github.com/base16-builder/base16-builder)\n*/\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tfont-family: Consolas, Menlo, Monaco, \"Andale Mono WT\", \"Andale Mono\", \"Lucida Console\", \"Lucida Sans Typewriter\", \"DejaVu Sans Mono\", \"Bitstream Vera Sans Mono\", \"Liberation Mono\", \"Nimbus Mono L\", \"Courier New\", Courier, monospace;\n\tfont-size: 14px;\n\tline-height: 1.375;\n\tdirection: ltr;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n\tbackground: #faf8f5;\n\tcolor: #728fcb;\n}\n\npre > code[class*=\"language-\"] {\n\tfont-size: 1em;\n}\n\npre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection,\ncode[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {\n\ttext-shadow: none;\n\tbackground: #faf8f5;\n}\n\npre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection,\ncode[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {\n\ttext-shadow: none;\n\tbackground: #faf8f5;\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em;\n\tborder-radius: .3em;\n}\n\n.token.comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\tcolor: #b6ad9a;\n}\n\n.token.punctuation {\n\tcolor: #b6ad9a;\n}\n\n.token.namespace {\n\topacity: .7;\n}\n\n.token.tag,\n.token.operator,\n.token.number {\n\tcolor: #063289;\n}\n\n.token.property,\n.token.function {\n\tcolor: #b29762;\n}\n\n.token.tag-id,\n.token.selector,\n.token.atrule-id {\n\tcolor: #2d2006;\n}\n\ncode.language-javascript,\n.token.attr-name {\n\tcolor: #896724;\n}\n\ncode.language-css,\ncode.language-scss,\n.token.boolean,\n.token.string,\n.token.entity,\n.token.url,\n.language-css .token.string,\n.language-scss .token.string,\n.style .token.string,\n.token.attr-value,\n.token.keyword,\n.token.control,\n.token.directive,\n.token.unit,\n.token.statement,\n.token.regex,\n.token.atrule {\n\tcolor: #728fcb;\n}\n\n.token.placeholder,\n.token.variable {\n\tcolor: #93abdc;\n}\n\n.token.deleted {\n\ttext-decoration: line-through;\n}\n\n.token.inserted {\n\tborder-bottom: 1px dotted #2d2006;\n\ttext-decoration: none;\n}\n\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.important,\n.token.bold {\n\tfont-weight: bold;\n}\n\n.token.important {\n\tcolor: #896724;\n}\n\n.token.entity {\n\tcursor: help;\n}\n\npre > code.highlight {\n\toutline: .4em solid #896724;\n\toutline-offset: .4em;\n}\n\n/* overrides color-values for the Line Numbers plugin\n * http://prismjs.com/plugins/line-numbers/\n */\n.line-numbers.line-numbers .line-numbers-rows {\n\tborder-right-color: #ece8de;\n}\n\n.line-numbers .line-numbers-rows > span:before {\n\tcolor: #cdc4b1;\n}\n\n/* overrides color-values for the Line Highlight plugin\n * http://prismjs.com/plugins/line-highlight/\n */\n.line-highlight.line-highlight {\n\tbackground: rgba(45, 32, 6, 0.2);\n\tbackground: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));\n\tbackground: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));\n}\n"
  },
  {
    "path": "packages/example/src/css/index.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}\n"
  },
  {
    "path": "packages/example/src/css/welcome.css",
    "content": "html, body {\n  height: 100%;\n\n}\n\nbody {\n  background-color: #61dbfb;\n  background-image: linear-gradient(-45deg, #61dbfb, #1a8598);\n  font-family: \"proxima-nova\", \"Helvetica Neue\", sans-serif;\n  margin: 0;\n}\n\n.button {\n  border: 2px solid #ffffff;\n  color: #ffffff;\n  cursor: pointer;\n  display: inline-block;\n  font-size: 0.8em;\n  font-weight: 500;\n  letter-spacing: 3px;\n  line-height: 1.3em;\n  padding: 1em 1.25em;\n  text-decoration: none;\n  text-transform: uppercase;\n  width: 140px;\n}\n\n.button.dark {\n  background: #ffffff;\n  color: #212047;\n}\n\nbutton.button {\n  background: transparent;\n  width: auto;\n}\n\n@media (max-width: 568px) {\n  .button {\n    display: block;\n    margin: 1em auto 0;\n  }\n}\n\n.hero-scroll {\n  height: 100%;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  width: 100%;\n}\n\n.hero-outer {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: table;\n  height: 100%;\n  padding: 20px 0;\n  width: 100%;\n}\n\n.hero-outer .hero-inner {\n  margin: 0 auto 1em;\n  text-align: center;\n  width: 840px;\n}\n\n@media (max-width: 600px) {\n  .hero-outer .hero-inner {\n    width: 340px;\n  }\n}\n\n@media (max-width: 360px) {\n  .hero-outer .hero-inner {\n    width: 200px;\n  }\n}\n\n.hero-outer .hero-inner h1, .hero-outer .hero-inner h2, .hero-outer .hero-inner h3, .hero-outer .hero-inner p {\n  color: #ffffff;\n  font-weight: normal;\n  line-height: 1;\n  margin: 0 0 20px;\n}\n\n.hero-outer .hero-inner h3 {\n  font-size: 1.3em;\n  padding-top: 13px;\n}\n\n.hero-outer .hero-inner h1 {\n  padding-top: 10px;\n}\n\n.hero-outer .hero-followup {\n  padding-top: 20px;\n}\n\npre {\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  background-color: rgba(255, 255, 255, 0.15);\n  border-color: #d8d8d8;\n  line-height: 1.4em;\n  text-align: left;\n}\n\n/* stylelint-disable selector-max-id */\n\n#shepherdModalOverlayContainer {\n  -ms-filter: \"progid:dximagetransform.microsoft.gradient.alpha(Opacity=50)\";\n  filter: alpha(opacity=50);\n  height: 100%;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  top: 0;\n  -webkit-transition: all 0.3s ease-out;\n  transition: all 0.3s ease-out;\n  width: 100%;\n  z-index: 9997;\n}\n\n.shepherd-modal.shepherd-enabled {\n  position: relative;\n  z-index: 9998;\n}\n\n/**\n * Block clicks except for those that would occur\n * on Shepherd elements or on the target element.\n*/\n\n.shepherd-active.shepherd-modal-is-visible :not(.shepherd-target) {\n  pointer-events: none;\n}\n\n.shepherd-active.shepherd-modal-is-visible .shepherd-target, .shepherd-active.shepherd-modal-is-visible .shepherd-cancel-link, .shepherd-active.shepherd-modal-is-visible .shepherd-button {\n  pointer-events: auto;\n}\n\n/* stylelint-enable */\n\n/**\n * Styles to support usage of Tippy.js tooltips (https://atomiks.github.io/tippyjs)\n */\n\n/**\n * Tippy tooltips have the following base structure:\n *\n * <div class=\"tippy-popper\" x-placement=\"top\">\n *   <div class=\"tippy-tooltip\">\n *     <div class=\"tippy-content\">\n *       [[ Content Here ]]\n *     </div>\n *   </div>\n * </div>\n */\n\n.tippy-popper {\n  z-index: 9999;\n}\n\n.tippy-popper .tippy-arrow {\n  border: 16px solid transparent;\n  content: '';\n  display: block;\n  height: 0;\n  pointer-events: none;\n  position: absolute;\n  width: 0;\n}\n\n.tippy-popper[x-placement^='top'] {\n  margin-bottom: 16px;\n}\n\n.tippy-popper[x-placement^='top'] .tippy-arrow {\n  border-bottom: 0;\n  border-top-color: #ffffff;\n  left: calc(50% - 16px);\n}\n\n.tippy-popper[x-placement^='bottom'] {\n  margin-top: 16px;\n}\n\n.tippy-popper[x-placement^='bottom'] .tippy-arrow {\n  border-bottom-color: #eeeeee;\n  border-top: 0;\n  left: calc(50% - 16px);\n}\n\n.tippy-popper[x-placement^='left'] {\n  margin-right: 16px;\n}\n\n.tippy-popper[x-placement^='left'] .tippy-arrow {\n  border-left-color: #ffffff;\n  border-right: 0;\n  margin-top: -16px;\n  top: calc(50% - 16px);\n}\n\n.tippy-popper[x-placement^='right'] {\n  margin-left: 16px;\n}\n\n.tippy-popper[x-placement^='right'] .tippy-arrow {\n  border-left: 0;\n  border-right-color: #ffffff;\n  top: calc(50% - 16px);\n}\n\n.tippy-popper .tippy-tooltip {\n  background-color: rgba(0, 0, 0, 0);\n  max-height: 100%;\n  max-width: 100%;\n  padding: 0;\n  width: 420px;\n}\n\n.shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\n.shepherd-element {\n  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));\n  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));\n}\n\n.shepherd-element.shepherd-has-title .shepherd-content header {\n  background: #eeeeee;\n  padding: 1em;\n}\n\n.shepherd-element .shepherd-content {\n  background: #ffffff;\n  font-size: inherit;\n  padding: 0;\n}\n\n.shepherd-element .shepherd-content header {\n  *zoom: 1;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n  -ms-flex-pack: center;\n  justify-content: flex-end;\n  line-height: 2em;\n  padding: 0.75em 0.75em 0;\n}\n\n.shepherd-element .shepherd-content header:after {\n  clear: both;\n  content: '';\n  display: table;\n}\n\n.shepherd-element .shepherd-content header .shepherd-title, .shepherd-element .shepherd-content header .shepherd-cancel-link {\n  font-weight: normal;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  vertical-align: middle;\n}\n\n.shepherd-element .shepherd-content header .shepherd-title {\n  color: rgba(0, 0, 0, 0.75);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-flex: 1;\n  -ms-flex: 1 0 auto;\n  flex: 1 0 auto;\n  font-size: 1.1em;\n}\n\n.shepherd-element .shepherd-content header .shepherd-cancel-link {\n  color: rgba(179, 179, 179, 0.75);\n  font-size: 2em;\n  margin-left: auto;\n  text-decoration: none;\n  -webkit-transition: color 0.5s ease;\n  transition: color 0.5s ease;\n}\n\n.shepherd-element .shepherd-content header .shepherd-cancel-link:before {\n  content: '\\00d7';\n}\n\n.shepherd-element .shepherd-content header .shepherd-cancel-link:hover {\n  color: rgba(0, 0, 0, 0.75);\n}\n\n.shepherd-element .shepherd-content .shepherd-text {\n  color: rgba(0, 0, 0, 0.75);\n  line-height: 1.3em;\n  padding: 0.75em;\n}\n\n.shepherd-element .shepherd-content .shepherd-text a, .shepherd-element .shepherd-content .shepherd-text a:visited, .shepherd-element .shepherd-content .shepherd-text a:active {\n  border-bottom: 1px dotted;\n  border-bottom-color: rgba(0, 0, 0, 0.75);\n  color: rgba(0, 0, 0, 0.75);\n  text-decoration: none;\n}\n\n.shepherd-element .shepherd-content .shepherd-text a:hover, .shepherd-element .shepherd-content .shepherd-text a:visited:hover, .shepherd-element .shepherd-content .shepherd-text a:active:hover {\n  border-bottom-style: solid;\n}\n\n.shepherd-element .shepherd-content .shepherd-text p {\n  margin-top: 0;\n}\n\n.shepherd-element .shepherd-content .shepherd-text p:last-child {\n  margin-bottom: 0;\n}\n\n.shepherd-element .shepherd-content footer {\n  border-bottom-left-radius: 5px;\n  border-bottom-right-radius: 5px;\n  padding: 0 0.75em 0.75em;\n}\n\n.shepherd-element .shepherd-content footer .shepherd-buttons {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  text-align: right;\n}\n\n.shepherd-element .shepherd-content footer .shepherd-buttons li {\n  display: inline;\n  margin: 0 0.5em 0 0;\n}\n\n.shepherd-element .shepherd-content footer .shepherd-buttons li:last-child {\n  margin-right: 0;\n}\n\n.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button {\n  display: inline-block;\n  *display: inline;\n  vertical-align: middle;\n  *vertical-align: auto;\n  *zoom: 1;\n  background: #557ca8;\n  border: 0;\n  border-radius: 3px;\n  color: rgba(255, 255, 255, 0.75);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 0.8em;\n  letter-spacing: 0.1em;\n  line-height: 1em;\n  padding: 0.75em 2em;\n  text-transform: uppercase;\n  -webkit-transition: all 0.5s ease;\n  transition: all 0.5s ease;\n}\n\n.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button:hover {\n  background: #0a1632;\n}\n\n.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {\n  background: #e5e5e5;\n  color: rgba(0, 0, 0, 0.75);\n}\n\n.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary:hover {\n  background: #cbcbcb;\n  color: rgba(0, 0, 0, 0.75);\n}\n\n@media only screen and (min-width: 40.0625em) {\n  h1, h2, h3, h4, h5, h6 {\n    line-height: 1.4;\n  }\n  h1 {\n    font-size: 2.75rem;\n  }\n  h2 {\n    font-size: 2.3125rem;\n  }\n  h3 {\n    font-size: 1.6875rem;\n  }\n  h4 {\n    font-size: 1.4375rem;\n  }\n  h5 {\n    font-size: 1.125rem;\n  }\n  h6 {\n    font-size: 1rem;\n  }\n}\n"
  },
  {
    "path": "packages/example/src/env.d.ts",
    "content": "/// <reference types=\"astro/client\" />"
  },
  {
    "path": "packages/example/src/pages/index.astro",
    "content": "---\nimport Home from '@components/home.astro';\n\nimport '@css/index.css';\nimport '@css/welcome.css';\nimport '@css/duotone.css';\n---\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<head>\n        <meta charset=\"utf-8\" />\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n        <title>React Shepherd — Guide your users through a tour of your app.</title>\n        <meta name=\"description\" content=\"Guide your users through a tour of your app.\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\" />\n\n        <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/shepherd/docs/assets/favicons/apple-touch-icon.png\" />\n        <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/shepherd/docs/assets/favicons/favicon-32x32.png\" />\n        <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/shepherd/docs/assets/favicons/favicon-16x16.png\" />\n        <link rel=\"mask-icon\" href=\"/shepherd/docs/assets/favicons/safari-pinned-tab.svg\" color=\"#426170\" />\n        <link rel=\"shortcut icon\" href=\"/shepherd/docs/assets/favicons/favicon.ico\" />\n        <meta name=\"msapplication-config\" content=\"/shepherd/docs/assets/favicons/browserconfig.xml\" />\n        <meta name=\"theme-color\" content=\"#ffffff\" />\n      </head>\n\t</head>\n\t<body>\n    <main>\n      <div class=\"hero-scroll\">\n    <div class=\"hero-outer\">\n      <div class=\"hero-inner\">\n        <div class=\"hero-welcome\">\n          <h1>\n            <img src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K\" alt=\"\" height=\"40\" />\n            React Shepherd\n          </h1>\n\n          <h2>Guide your users through a tour of your app.</h2>\n        </div>\n        <Home />\n\n        <div class=\"hero-followup\">\n          <p>\n            <a class=\"button star\" href=\"https://github.com/shipshapecode/react-shepherd\">★ on Github</a> &nbsp;&nbsp;\n            <a class=\"button\" href=\"https://shipshapecode.github.io/react-shepherd/\">View Docs</a> &nbsp;&nbsp;\n          </p>\n        </div>\n        <div>\n          <img width=\"140\" height=\"140\" src=\"/sheep.svg\" />\n        </div>\n      </div>\n    </div>\n  </div>\n    </main>\n\n\t</body>\n</html>\n"
  },
  {
    "path": "packages/example/src/steps.js",
    "content": "export default [\n  {\n    id: 'welcome',\n    text: [\n      `\n      <p>\n      Shepherd is a JavaScript library for guiding users through your app.\n      It uses <a href=\"https://popper.js.org/\">Popper.js</a>,\n      another open source library, to render dialogs for each tour \"step\".\n      </p>\n\n      <p>\n      Among many things, Popper makes sure your steps never end up off screen or\n      cropped by an overflow. (Try resizing your browser to see what we mean.)\n      </p>\n      `\n    ],\n    attachTo: { element: '.hero-welcome', on: 'bottom' },\n    classes: 'shepherd shepherd-welcome',\n    buttons: [\n      {\n        type: 'cancel',\n        classes: 'shepherd-button-secondary',\n        text: 'Exit'\n      },\n      {\n        type: 'next',\n        text: 'Next'\n      }\n    ]\n  },\n  {\n    id: 'installation',\n    title: 'Installation',\n    text:\n      'Installation is simple, if you are using npm or yarn, just install like any other package.',\n    attachTo: { element: '.install-element', on: 'bottom' },\n    buttons: [\n      {\n        type: 'back',\n        classes: 'shepherd-button-secondary',\n        text: 'Back'\n      },\n      {\n        type: 'next',\n        text: 'Next'\n      }\n    ]\n  },\n  {\n    id: 'usage',\n    title: 'Usage',\n    text: [\n      'To use the tour service, simply inject it into your application and use it like this example.'\n    ],\n    attachTo: { element: '.usage-element', on: 'bottom' },\n    buttons: [\n      {\n        type: 'back',\n        classes: 'shepherd-button-secondary',\n        text: 'Back'\n      },\n      {\n        type: 'next',\n        text: 'Next'\n      }\n    ]\n  },\n  {\n    id: 'centered-example',\n    title: 'Centered Shepherd Element',\n    text: `But attachment is totally optional!\\n \\\n    Without a target, a tour step will create an element that's centered within the view. \\\n    Check out the <a href=\"https://shepherdjs.dev/docs/\">documentation</a> to learn more.`,\n    buttons: [\n      {\n        type: 'back',\n        classes: 'shepherd-button-secondary',\n        text: 'Back'\n      },\n      {\n        type: 'next',\n        text: 'Next'\n      }\n    ]\n  },\n  {\n    id: 'followup',\n    title: 'Learn more',\n    text: 'Star Shepherd on Github so you remember it for your next project',\n    attachTo: { element: '.hero-followup', on: 'top' },\n    scrollTo: true,\n    buttons: [\n      {\n        type: 'back',\n        classes: 'shepherd-button-secondary',\n        text: 'Back'\n      },\n      {\n        type: 'next',\n        text: 'Done'\n      }\n    ]\n  }\n];\n"
  },
  {
    "path": "packages/lib/.eslintrc.js",
    "content": "module.exports = {\n  env: {\n    browser: true,\n    es2021: true,\n    jest: true,\n  },\n  extends: [\n    'plugin:react/recommended',\n    'airbnb',\n  ],\n  parser: '@typescript-eslint/parser',\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true,\n    },\n    ecmaVersion: 'latest',\n    sourceType: 'module',\n  },\n  plugins: [\n    'react',\n    '@typescript-eslint',\n  ],\n  rules: {\n    'no-param-reassign': ['error', { 'props': false }],\n    'react/function-component-definition': [2, { 'namedComponents': 'arrow-function' }],\n    'react/jsx-filename-extension': [1, { 'extensions': ['.tsx', '.ts'] }],\n  },\n  settings: {\n    'import/resolver': {\n      typescript: {},\n    },\n  }\n};\n"
  },
  {
    "path": "packages/lib/CHANGELOG.md",
    "content": "\n## v4.3.0 (2024-01-21)\n\n## v4.0.1 (2022-07-06)\n\n#### :bug: Bug Fix\n* `lib`\n  * [#637](https://github.com/shipshapecode/react-shepherd/pull/637) Add children field for React 18 ([@andersaamodt](https://github.com/andersaamodt))\n\n#### Committers: 2\n- Anders ([@andersaamodt](https://github.com/andersaamodt))\n- Chuck Carpenter ([@chuckcarpenter](https://github.com/chuckcarpenter))\n\n\n## v3.3.1 (2020-11-13)\n\n#### :rocket: Enhancement\n* [#439](https://github.com/shipshapecode/react-shepherd/pull/439) ✨ Shepmaster expose more types ([@chuckcarpenter](https://github.com/chuckcarpenter))\n* [#391](https://github.com/shipshapecode/react-shepherd/pull/391) Manage secondary property on Step button ([@linsolas](https://github.com/linsolas))\n\n#### :bug: Bug Fix\n* [#528](https://github.com/shipshapecode/react-shepherd/pull/528) 🐛 Remove check for current action assignment ([@chuckcarpenter](https://github.com/chuckcarpenter))\n\n#### Committers: 4\n- Chuck Carpenter ([@chuckcarpenter](https://github.com/chuckcarpenter))\n- Hakeem Almidan ([@Hakeemmidan](https://github.com/Hakeemmidan))\n- Romain Linsolas ([@linsolas](https://github.com/linsolas))\n- [@cyremur](https://github.com/cyremur)\n\n\n## v2.0.0 (2019-08-29)\n\n#### :bug: Bug Fix\n* [#36](https://github.com/shipshapecode/react-shepherd/pull/36) Make custom button actions work, if specified ([@jmfirth](https://github.com/jmfirth))\n* [#38](https://github.com/shipshapecode/react-shepherd/pull/38) Fix adding steps ([@jmfirth](https://github.com/jmfirth))\n\n#### Committers: 1\n- Justin Firth ([@jmfirth](https://github.com/jmfirth))\n\n"
  },
  {
    "path": "packages/lib/README.md",
    "content": "# react-shepherd\n\n<div>\n  <a href=\"https://shipshape.io\">\n    <img align=\"left\" src=\"http://i.imgur.com/DWHQjA5.png\" alt=\"Ship Shape\" width=\"50\" height=\"50\"/>\n  </a>\n\n**[react-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project](https://shipshape.io/)**.\n\n</div>\n\n[![NPM](https://img.shields.io/npm/v/react-shepherd.svg)](https://www.npmjs.com/package/react-shepherd)\n[![Test Status](https://github.com/shipshapecode/react-shepherd/workflows/Test/badge.svg)](https://github.com/shipshapecode/react-shepherd/actions?query=workflow%3ATest)\n[![Maintainability](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/maintainability)](https://codeclimate.com/github/shipshapecode/react-shepherd/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/d5273e1d465352a6df4e/test_coverage)](https://codeclimate.com/github/shipshapecode/react-shepherd/test_coverage)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nThis is a React wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site tour, library.\nIt's mainly a wrapper around the Shepherd library that exposes the tour object and methods to the context object\nthat can be passed into props for dynamic interactivity.\n\n## Install\n\n```bash\nnpm install --save react-shepherd\n```\n\n## Usage\n\n### Via Provider/Context\n\n```jsx\nimport React, { Component, useContext } from \"react\";\nimport { ShepherdTour, ShepherdTourContext } from \"react-shepherd\";\nimport newSteps from \"./steps\";\n\nconst tourOptions = {\n  defaultStepOptions: {\n    cancelIcon: {\n      enabled: true,\n    },\n  },\n  useModalOverlay: true,\n};\n\nfunction Button() {\n  const tour = useContext(ShepherdTourContext);\n\n  return (\n    <button className=\"button dark\" onClick={tour.start}>\n      Start Tour\n    </button>\n  );\n}\n\nexport default function App() {\n  return (\n    <div>\n      <ShepherdTour steps={newSteps} tourOptions={tourOptions}>\n        <Button />\n      </ShepherdTour>\n    </div>\n  );\n}\n```\n\n### Via Hook\n\n```jsx\nimport React, { Component } from \"react\";\nimport { useShepherdTour } from \"react-shepherd\";\nimport newSteps from \"./steps\";\n\nconst tourOptions = {\n  defaultStepOptions: {\n    cancelIcon: {\n      enabled: true,\n    },\n  },\n  useModalOverlay: true,\n};\n\nexport default function App() {\n  const tour = useShepherdTour({ tourOptions, steps: newSteps });\n\n  return (\n    <button class=\"button dark\" onClick={tour.start}>\n      Start Tour\n    </button>\n  );\n}\n```\n\n## Configuration\n\nThe following configuration options for a tour can be set on the ShepherdTour to control the way that Shepherd is used. This is simply a POJO passed to Shepherd to use the options noted in the Shepherd Tour [options](https://shepherdjs.dev/docs/Tour.html).\n**The only required option is `steps`, which is an array passed to the props.**\n\n### tourOptions\n\n`PropTypes.object`\nUsed to set the options that will be applied to each step by default. You can pass in any of the options that you can with Shepherd.\n\n### steps\n\n`PropTypes.array`\nYou must pass an array of steps to `steps`, something like this:\n\n```js\nconst steps = [\n  {\n    id: 'intro',\n    attachTo: { element: '.first-element', on: 'bottom' },\n    beforeShowPromise: function () {\n      return new Promise(function (resolve) {\n        setTimeout(function () {\n          window.scrollTo(0, 0);\n          resolve();\n        }, 500);\n      });\n    },\n    buttons: [\n      {\n        classes: 'shepherd-button-secondary',\n        text: 'Exit',\n        type: 'cancel'\n      },\n      {\n        classes: 'shepherd-button-primary',\n        text: 'Back',\n        type: 'back'\n      },\n      {\n        classes: 'shepherd-button-primary',\n        text: 'Next',\n        type: 'next'\n      }\n    ],\n    classes: 'custom-class-name-1 custom-class-name-2',\n    highlightClass: 'highlight',\n    scrollTo: false,\n    cancelIcon: {\n      enabled: true,\n    },\n    title: 'Welcome to React-Shepherd!',\n    text: ['React-Shepherd is a JavaScript library for guiding users through your React app.'],\n    when: {\n      show: () => {\n        console.log('show step');\n      },\n      hide: () => {\n        console.log('hide step');\n      }\n    }\n  },\n  // ...\n];\n```\n\n## Steps\n\nThe options are the same as Shepherd [options](https://shepherdjs.dev/docs/Step.html).\n\n## License\n\nMIT\n"
  },
  {
    "path": "packages/lib/jest.config.js",
    "content": "/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */\nmodule.exports = {\n  preset: 'ts-jest',\n  rootDir: 'src',\n  testEnvironment: 'jsdom',\n};\n"
  },
  {
    "path": "packages/lib/package.json",
    "content": "{\n  \"name\": \"react-shepherd\",\n  \"version\": \"4.3.0\",\n  \"description\": \"A React wrapper for the site tour library Shepherd\",\n  \"homepage\": \"https://react-shepherd.vercel.app/\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/shipshapecode/react-shepherd.git\"\n  },\n  \"license\": \"MIT\",\n  \"main\": \"dist/Shepherd.js\",\n  \"module\": \"dist/Shepherd.es.js\",\n  \"jsnext:main\": \"dist/Shepherd.es.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"prebuild\": \"tsc --project ./tsconfig-declarations.json\",\n    \"build\": \"rollup -c\",\n    \"predeploy\": \"cd example && yarn && yarn build\",\n    \"prepare\": \"install-peers\",\n    \"problems\": \"tsc --noEmit\",\n    \"release\": \"release-it\",\n    \"start\": \"rollup -c -w\",\n    \"test\": \"cross-env CI=1 jest\",\n    \"test:watch\": \"jest --watch\",\n    \"lint\": \"eslint src --ext js,jsx,ts,tsx --max-warnings 0\",\n    \"lint:ci\": \"TIMING=all yarn lint --format junit --output-file reports/junit/junit.xml\",\n    \"lint:fix\": \"yarn lint --fix\"\n  },\n  \"dependencies\": {\n    \"resize-observer-polyfill\": \"^1.5.1\",\n    \"shepherd.js\": \"^11.0.1\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.5.4\",\n    \"@babel/plugin-external-helpers\": \"^7.2.0\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.5.0\",\n    \"@babel/plugin-proposal-decorators\": \"^7.4.4\",\n    \"@babel/plugin-proposal-do-expressions\": \"^7.5.0\",\n    \"@babel/plugin-proposal-export-default-from\": \"^7.5.2\",\n    \"@babel/plugin-proposal-export-namespace-from\": \"^7.5.2\",\n    \"@babel/plugin-proposal-function-bind\": \"^7.2.0\",\n    \"@babel/plugin-proposal-function-sent\": \"^7.5.0\",\n    \"@babel/plugin-proposal-json-strings\": \"^7.2.0\",\n    \"@babel/plugin-proposal-logical-assignment-operators\": \"^7.2.0\",\n    \"@babel/plugin-proposal-nullish-coalescing-operator\": \"^7.4.4\",\n    \"@babel/plugin-proposal-numeric-separator\": \"^7.2.0\",\n    \"@babel/plugin-proposal-optional-chaining\": \"^7.2.0\",\n    \"@babel/plugin-proposal-pipeline-operator\": \"^7.5.0\",\n    \"@babel/plugin-proposal-throw-expressions\": \"^7.2.0\",\n    \"@babel/plugin-syntax-dynamic-import\": \"^7.2.0\",\n    \"@babel/plugin-syntax-import-meta\": \"^7.2.0\",\n    \"@babel/preset-env\": \"^7.5.4\",\n    \"@babel/preset-react\": \"^7.0.0\",\n    \"@svgr/rollup\": \"^8.1.0\",\n    \"@testing-library/react\": \"^14.0.0\",\n    \"@types/jest\": \"^29.0.0\",\n    \"@types/node\": \"^18.0.3\",\n    \"@types/react\": \"^18.0.15\",\n    \"@types/react-dom\": \"^18.0.6\",\n    \"@typescript-eslint/eslint-plugin\": \"^6.19.0\",\n    \"@typescript-eslint/parser\": \"^5.30.5\",\n    \"cross-env\": \"^7.0.0\",\n    \"eslint\": \"^7.32.0 || ^8.2.0\",\n    \"eslint-config-airbnb\": \"^19.0.4\",\n    \"eslint-import-resolver-typescript\": \"^3.2.5\",\n    \"eslint-plugin-import\": \"^2.25.3\",\n    \"eslint-plugin-jsx-a11y\": \"^6.5.1\",\n    \"eslint-plugin-react\": \"^7.28.0\",\n    \"eslint-plugin-react-hooks\": \"^4.3.0\",\n    \"install-peers-cli\": \"^2.2.0\",\n    \"jest\": \"^28.1.2\",\n    \"jest-environment-jsdom\": \"^29.0.1\",\n    \"release-it\": \"^14.0.2\",\n    \"release-it-lerna-changelog\": \"^5.0.0\",\n    \"rollup\": \"^2.6.1\",\n    \"rollup-plugin-babel\": \"^4.3.3\",\n    \"rollup-plugin-commonjs\": \"^10.0.1\",\n    \"rollup-plugin-node-resolve\": \"^5.2.0\",\n    \"rollup-plugin-peer-deps-external\": \"^2.2.0\",\n    \"rollup-plugin-postcss\": \"^4.0.2\",\n    \"rollup-plugin-typescript\": \"^1.0.1\",\n    \"rollup-plugin-url\": \"^3.0.0\",\n    \"ts-jest\": \"^28.0.5\",\n    \"tslib\": \"^2.0.1\",\n    \"typescript\": \"^4.7.4\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^17.0.2 || 18.x\",\n    \"react-dom\": \"^17.0.2 || 18.x\"\n  },\n  \"engines\": {\n    \"node\": \">=16\",\n    \"npm\": \">=7\"\n  },\n  \"publishConfig\": {\n    \"registry\": \"https://registry.npmjs.org\"\n  }\n}\n"
  },
  {
    "path": "packages/lib/rollup.config.js",
    "content": "import babel from 'rollup-plugin-babel';\nimport commonjs from 'rollup-plugin-commonjs';\nimport external from 'rollup-plugin-peer-deps-external';\nimport postcss from 'rollup-plugin-postcss';\nimport resolve from 'rollup-plugin-node-resolve';\nimport typescript from 'rollup-plugin-typescript';\nimport url from 'rollup-plugin-url';\nimport svgr from '@svgr/rollup';\n\nimport pkg from './package.json';\n\nexport default {\n  input: 'src/index.tsx',\n  output: [\n    {\n      file: pkg.main,\n      format: 'cjs',\n      sourcemap: true\n    },\n    {\n      file: pkg.module,\n      format: 'es',\n      sourcemap: true\n    }\n  ],\n  plugins: [\n    typescript(),\n    external(),\n    postcss({\n      modules: true\n    }),\n    url(),\n    svgr(),\n    babel({\n      exclude: 'node_modules/**'\n    }),\n    resolve(),\n    commonjs()\n  ]\n};\n"
  },
  {
    "path": "packages/lib/src/__tests__/shepherd.test.tsx",
    "content": "import React, { useContext } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { render, fireEvent } from '@testing-library/react';\nimport { ShepherdTour, ShepherdTourContext } from '..';\n\nwindow.ResizeObserver = ResizeObserver;\n\nconst steps = [\n  {\n    id: 'welcome',\n    text: [\n      `\n      Shepherd is a JavaScript library for guiding users through your app.\n      It uses <a href=\"https://atomiks.github.io/tippyjs//\">Tippy.js</a>,\n      another open source library, to render dialogs for each tour \"step\".\n    `,\n      `\n      Among many things, Tippy makes sure your steps never end up off screen or cropped by an overflow.\n      Try resizing your browser to see what we mean.\n    `,\n    ],\n    classes: 'shepherd shepherd-welcome',\n    buttons: [\n      {\n        type: 'cancel',\n        classes: 'shepherd-button-secondary',\n        text: 'Exit',\n      },\n      {\n        type: 'next',\n        text: 'Next',\n      },\n    ],\n  },\n];\nconst tourOptions = {\n  defaultStepOptions: {\n    cancelIcon: {\n      enabled: true,\n    },\n  },\n  useModalOverlay: true,\n};\n\ndescribe('<ShepherdTour />', () => {\n  it('exists', () => {\n    expect(ShepherdTour).toBeTruthy();\n  });\n\n  it('renders the component and starts tour', async () => {\n    const Button = () => {\n      const tour = useContext(ShepherdTourContext);\n\n      return (\n        <button className=\"button dark\" type=\"button\" onClick={tour?.start}>\n          Start Tour\n        </button>\n      );\n    };\n    const TestApp = () => (\n      <ShepherdTour steps={steps} tourOptions={tourOptions}>\n        <Button />\n      </ShepherdTour>\n    );\n\n    const container = render(<TestApp />);\n    await fireEvent.click(container.getByText(/Start Tour/));\n\n    const cancelBtn = await container.findByText('Exit');\n    const nextBtn = await container.findByText('Next');\n\n    expect(cancelBtn).toBeTruthy();\n    expect(nextBtn).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "packages/lib/src/index.tsx",
    "content": "import React, { FC, useMemo } from 'react';\nimport Shepherd from 'shepherd.js';\nimport Step from 'shepherd.js/src/types/step';\nimport Tour from 'shepherd.js/src/types/tour';\n\ntype StepType = 'back' | 'cancel' | 'next';\nexport interface ShepherdButtonWithType extends Step.StepOptionsButton {\n  type?: StepType;\n}\n\nexport interface ShepherdOptionsWithType extends Step.StepOptions {\n  buttons?: ReadonlyArray<Step.StepOptionsButton | ShepherdButtonWithType>;\n}\n\ninterface ShepherdProps {\n  steps: Array<ShepherdOptionsWithType>;\n  tourOptions: Tour.TourOptions;\n  children: React.ReactNode;\n}\n\nconst ShepherdTourContext = React.createContext<Tour | null>(null);\nconst ShepherdTourContextConsumer = ShepherdTourContext.Consumer;\n\n/**\n * Take a set of steps and formats to use actions on the buttons in the current context\n * @param {Array} steps\n * @param {Array} tour\n * @private\n */\nconst addSteps = (steps: Array<Step.StepOptions>, tour: Tour) => {\n  // Return nothing if there are no steps\n  if (!steps.length) {\n    return [];\n  }\n\n  const parsedStepsforAction = steps.map((step: Step.StepOptions): Step.StepOptions => {\n    const { buttons } = step;\n\n    if (buttons) {\n      step.buttons = buttons.map((button: ShepherdButtonWithType) => {\n        const {\n          action, classes, disabled, label, secondary, text, type,\n        } = button;\n        return {\n          action: type ? tour[type] : action,\n          classes,\n          disabled,\n          label,\n          secondary,\n          text,\n          type,\n        };\n      });\n    }\n\n    return step;\n  });\n\n  return parsedStepsforAction.forEach((step: any) => tour.addStep(step));\n};\n\n// for instances where Context can't be used or doesn't make sense\nexport const useShepherdTour = ({ tourOptions, steps }: Pick<ShepherdProps, 'steps' | 'tourOptions'>) => {\n  const tourObject = useMemo(() => {\n    const tourInstance = new Shepherd.Tour(tourOptions);\n\n    addSteps(steps, tourInstance);\n\n    return tourInstance;\n  }, [tourOptions, steps]);\n\n  return tourObject;\n};\n\nexport const ShepherdTour: FC<ShepherdProps> = ({ children, tourOptions, steps }) => {\n  const tourObject = useMemo(() => {\n    const tourInstance = new Shepherd.Tour(tourOptions);\n\n    addSteps(steps, tourInstance);\n\n    return tourInstance;\n  }, [tourOptions, steps]);\n\n  return (\n    <ShepherdTourContext.Provider value={tourObject}>\n      {children}\n    </ShepherdTourContext.Provider>\n  );\n};\n\nexport type { default as Step } from 'shepherd.js/src/types/step';\nexport type { default as Tour } from 'shepherd.js/src/types/tour';\nexport { ShepherdTourContextConsumer as TourMethods, ShepherdTourContext };\n"
  },
  {
    "path": "packages/lib/src/styles.css",
    "content": "/* add css styles here (optional) */\n\n.test {\n  display: inline-block;\n  margin: 2em auto;\n  border: 2px solid #000;\n  font-size: 2em;\n}\n"
  },
  {
    "path": "packages/lib/tsconfig-declarations.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"isolatedModules\": false,\n    \"noEmit\": false,\n    \"declaration\": true,\n    \"emitDeclarationOnly\": true\n  }\n}\n"
  },
  {
    "path": "packages/lib/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist\",\n    \"jsx\": \"react\",\n    \"allowJs\": true,\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true\n  },\n  \"include\": [\n    \"./src/**/*\"\n  ]\n}\n"
  }
]