chore: release 3.0.15

https://github.com/rive-app/rive/issues/3816

.eslintrc.js

@@ -1,22 +1,29 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true,
+    es2021: true
   },
-  extends: ['plugin:react/recommended', 'prettier'],
+  extends: ['plugin:react/recommended', 'prettier', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
-      jsx: true,
+      jsx: true
     },
     ecmaVersion: 12,
-    sourceType: 'module',
+    sourceType: 'module'
   },
   plugins: ['@typescript-eslint', 'prettier'],
   rules: {
     '@typescript-eslint/no-unused-vars': 'error',
-    'prefer-const': ['warn', { destructuring: 'all' }],
+    'prefer-const': ['warn', {
+      destructuring: 'all'
+    }],
     'no-var': 'error',
-    eqeqeq: ['error', 'smart'],
+    eqeqeq: ['error', 'smart']
   },
-};
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+};

.github/workflows/publish.yml

@@ -5,31 +5,75 @@ on:
     branches:
       - main
 jobs:
-  merge_job:
+  determine_version:
+    name: Determine the next build version
+    if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.echo_version.outputs.version }}
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '12.x'
-          registry-url: 'https://registry.npmjs.org'
-      - name: Install Modules
-        run: npm ci
-      - name: Run type check
-        run: npm run types:check
-      - name: Run Linter
-        run: npm run lint
-      - name: Run Tests
-        run: npm test
-      - name: Build
-        run: npm run build
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./
       - name: Git config
         run: |
           git config --local user.email 'hello@rive.app'
           git config --local user.name ${{ github.actor }}
       - name: Authenticate with registry
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
-      - name: Release
+      - id: determine_version
+        name: Get Version
+        run: npm run release -- --ci --release-version | tail -n 1 > RELEASE_VERSION
+        working-directory: ./
         env:
           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-        run: npm run release
+      - id: echo_version
+        run: echo "::set-output name=version::$(cat ./RELEASE_VERSION)"
+  
+  merge_job:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    needs: [determine_version]
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install Modules
+        run: npm install
+      - name: Run type check
+        run: npm run types:check
+      - name: Run Linter
+        run: npm run lint
+      - name: Run Tests
+        run: npm test
+      - name: Build main dist
+        run: npm run build
+      - name: Copy separated builds
+        run: ./scripts/build.sh
+      - name: Copy package jsons to separate react outputs
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: ./scripts/setup_all_packages.sh
+      - name: Bump Versions of react outputs
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          RELEASE_VERSION: ${{ needs.determine_version.outputs.version }}
+        run: ./scripts/bump_all_versions.sh
+      - name: Git config
+        run: |
+          git config --local user.email 'hello@rive.app'
+          git config --local user.name ${{ github.actor }}
+      - name: Authenticate with registry
+        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
+      - name: Release rive-react
+        env:
+          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
+        run: npm run release -- --ci
+      - name: Release @rive-app/react-* variants
+        env:
+          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
+        run: ./scripts/publish_all.sh

.github/workflows/storybook.yml

@@ -0,0 +1,28 @@
+name: Deploy Storybook
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - main
+    paths: ['src', 'examples/stories/**'] # Trigger the action only when files change in the folders defined here
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+      - name: Install and Build 🔧
+        run: | # Install npm packages and build the Storybook files
+          npm install
+          npm run build-storybook
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@3.6.2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: main # The branch the action should deploy to.
+          FOLDER: docs-build # The folder that the build-storybook script generates files.
+          CLEAN: true # Automatically remove deleted files from the deploy branch
+          TARGET_FOLDER: docs # The folder that we serve our Storybook files from

.github/workflows/tests.yml

@@ -7,7 +7,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Install Modules
-        run: npm ci
+        run: npm install
       - name: Run type check
         run: npm run types:check
       - name: Run Linter

.gitignore

@@ -5,3 +5,4 @@ dist
 .idea
 .vscode
 examples/**/package-lock.json
+package-lock.json

.release-it.json

@@ -12,6 +12,6 @@
     "releaseName": "${version}"
   },
   "hooks": {
-    "after:bump": "npx auto-changelog -p"
+    "after:bump": ["npx auto-changelog -p", "git add ./CHANGELOG.md"]
   }
 }

.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+  "stories": [
+    "../examples/stories/*.stories.mdx",
+    "../examples/stories/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  staticDirs: ['../examples/stories/assets'],
+}

.storybook/preview-head.html

@@ -0,0 +1,17 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap"
+/>
+<link
+  rel="stylesheet"
+  data-href="https://fonts.googleapis.com/css2?family=Roboto+Mono&amp;display=swap"
+/>
+
+<style>
+  body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,39 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Overview', 'Playback Controls', 'State Machines'],
+    },
+  },
+  viewMode: 'docs',
+};
+
+// The below function helps to default to the docs page, which contains all the documentation and examples
+function clickDocsButtonOnFirstLoad() {
+  window.removeEventListener("load", clickDocsButtonOnFirstLoad);
+
+  try {
+    const docsButtonSelector = window.parent.document.evaluate(
+      "//button[contains(., 'Docs')]",
+      window.parent.document,
+      null,
+      XPathResult.ANY_TYPE,
+      null
+    );
+
+    const button = docsButtonSelector.iterateNext();
+
+    button.click();
+  } catch (error) {
+    // Do nothing if it wasn't able to click on Docs button.
+  }
+}
+
+window.addEventListener("load", clickDocsButtonOnFirstLoad);

CHANGELOG.md

@@ -4,9 +4,234 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v3.0.15](https://github.com/rive-app/rive-react/compare/v3.0.1...v3.0.15)
+
+- Patch: Bump js runtime dependencies for nested artboard display patch [`795ee53`](https://github.com/rive-app/rive-react/commit/795ee533405ec98457db074d11730849e1be5c88)
+
+#### [v3.0.1](https://github.com/rive-app/rive-react/compare/v3.0.0...v3.0.1)
+
+> 26 April 2022
+
+- Maint: Bump rive wasm to include fps counter API and take off major tag [`83c81b4`](https://github.com/rive-app/rive-react/commit/83c81b49c5a53c5ec9092b83607a78b6e4a69768)
+- chore: release 3.0.1 [`f4eccbe`](https://github.com/rive-app/rive-react/commit/f4eccbe2ce8795f55a6bed7d8b17c2ac59c94c30)
+
+### [v3.0.0](https://github.com/rive-app/rive-react/compare/v2.0.0...v3.0.0)
+
+> 26 April 2022
+
+- Fix animation playing with autoplay false when animation name passed [`aab811b`](https://github.com/rive-app/rive-react/commit/aab811b975d8832c2be14779675392a17b1db5ff)
+- chore: release 3.0.0 [`5de40fa`](https://github.com/rive-app/rive-react/commit/5de40fad5b716be7dcec59c15422e9d41a4962b1)
+
+### [v2.0.0](https://github.com/rive-app/rive-react/compare/v1.0.7...v2.0.0)
+
+> 22 April 2022
+
+- Breaking: Spread non-style props onto canvas element instead of containing div [`5c0b9cd`](https://github.com/rive-app/rive-react/commit/5c0b9cd613873ee565b4ec40d71042c3850a502c)
+- Update: Adding build scripts to prepare for split of rive-react into 2 package derivatives for canvas and webgl [`5c4336b`](https://github.com/rive-app/rive-react/commit/5c4336b84fe55afea1ec9d5e42f530cf29d6d176)
+- Change rive-react-* references to be the shortened namespace-named convention [`4429be4`](https://github.com/rive-app/rive-react/commit/4429be44f2af2b91d9d5e26a65b70e59d9647979)
+
+#### [v1.0.7](https://github.com/rive-app/rive-react/compare/v1.0.6...v1.0.7)
+
+> 20 April 2022
+
+- chore: release 1.0.7 [`6e72ed5`](https://github.com/rive-app/rive-react/commit/6e72ed5271976e886a576f5a6c0d7162eedc81d8)
+- Maint: Allow peer dep React to use v18.0+ [`464fa97`](https://github.com/rive-app/rive-react/commit/464fa97c207e780d31866ecad0437dc16aefd1f2)
+
+#### [v1.0.6](https://github.com/rive-app/rive-react/compare/v1.0.5...v1.0.6)
+
+> 14 April 2022
+
+- chore: release 1.0.6 [`ac01b7e`](https://github.com/rive-app/rive-react/commit/ac01b7ec691c435371f9553df88144c75af18ed4)
+- Maint: Bump webgl dependency up to 1.0.39 [`cd9baef`](https://github.com/rive-app/rive-react/commit/cd9baef25003b491d40d5649ba1d3b5f88bce870)
+
+#### [v1.0.5](https://github.com/rive-app/rive-react/compare/v1.0.4...v1.0.5)
+
+> 11 April 2022
+
+- Feat: Add extra param to useStateMachineInput to set an initial value on the input when its loaded [`0a18b52`](https://github.com/rive-app/rive-react/commit/0a18b522cc8efdffb0b681a7b1234d7829fee808)
+- chore: release 1.0.5 [`3a2ed32`](https://github.com/rive-app/rive-react/commit/3a2ed32856ad4de09da4a875f3b0c2967c8a8e5e)
+- update readme [`d35f5b5`](https://github.com/rive-app/rive-react/commit/d35f5b53c5c7cb2794c8891e8f30d8ba8aa403cf)
+
+#### [v1.0.4](https://github.com/rive-app/rive-react/compare/v1.0.3...v1.0.4)
+
+> 6 April 2022
+
+- Add test for animations change on param update [`c3f1380`](https://github.com/rive-app/rive-react/commit/c3f138014d233258206bde2497baed711276e3dc)
+- chore: release 1.0.4 [`5e34e13`](https://github.com/rive-app/rive-react/commit/5e34e1356379a21c051c48f214dbce0e14a41c8b)
+- Update animations on param change [`b13413b`](https://github.com/rive-app/rive-react/commit/b13413ba8bd99d1e89cb927d194bc2179e8e9dcf)
+
+#### [v1.0.3](https://github.com/rive-app/rive-react/compare/v1.0.2...v1.0.3)
+
+> 31 March 2022
+
+- chore: release 1.0.3 [`881e38f`](https://github.com/rive-app/rive-react/commit/881e38fe6a357503d23cc6449c1e41908ba796b0)
+- Maint: Bump rive-cpp to help fix safari and performance issues [`38c8562`](https://github.com/rive-app/rive-react/commit/38c85624a72782dd4f05a482b9c57137fe289e4c)
+
+#### [v1.0.2](https://github.com/rive-app/rive-react/compare/v1.0.1...v1.0.2)
+
+> 28 March 2022
+
+- chore: release 1.0.2 [`a9732e1`](https://github.com/rive-app/rive-react/commit/a9732e141ec519bfc07b11a1b5b48c3d36182f4b)
+- Patch: Bump rive-cpp to fix DAG issue [`59edf6f`](https://github.com/rive-app/rive-react/commit/59edf6f67ea7d26067009786bb84014a61fe6f24)
+
+#### [v1.0.1](https://github.com/rive-app/rive-react/compare/v1.0.0...v1.0.1)
+
+> 24 March 2022
+
+- chore: release 1.0.1 [`4be496c`](https://github.com/rive-app/rive-react/commit/4be496cc15ff7c205903f3a3ef1f44cb7ed710d4)
+- Chore: Bump webgl and remove major flag from release-it command [`4c9de18`](https://github.com/rive-app/rive-react/commit/4c9de18b1cbf19ede7d5400a1b3f67d59f882cee)
+
+### [v1.0.0](https://github.com/rive-app/rive-react/compare/v0.0.31...v1.0.0)
+
+> 23 March 2022
+
+- Breaking: Switch from using the canvas renderer as default to the webgl renderer [`1e1cabd`](https://github.com/rive-app/rive-react/commit/1e1cabd05707fa135e1706c0821c0272b3d94bbc)
+- chore: release 1.0.0 [`c688b9f`](https://github.com/rive-app/rive-react/commit/c688b9f17a4e287b4120a0739125123ce0e880e4)
+- Put back the release steps in the publish workflow and add major flag temporarily [`8ce8562`](https://github.com/rive-app/rive-react/commit/8ce856270f9403c165b2a4c2f0b8c6558ed929a2)
+
+#### [v0.0.31](https://github.com/rive-app/rive-react/compare/v0.0.30...v0.0.31)
+
+> 18 January 2022
+
+- chore: release 0.0.31 [`0be3bc7`](https://github.com/rive-app/rive-react/commit/0be3bc7e930ce6b39dae82e808dd81a0720a5ebb)
+- Update @rive-app/canvas to 1.0.18 to fix playback lag when animations are left idle [`48af4b0`](https://github.com/rive-app/rive-react/commit/48af4b00ad7654acde0fc5e97c9cd0f768371843)
+
+#### [v0.0.30](https://github.com/rive-app/rive-react/compare/v0.0.29...v0.0.30)
+
+> 10 January 2022
+
+- chore: release 0.0.30 [`fe44977`](https://github.com/rive-app/rive-react/commit/fe44977e47e13276051a665559e1f68f42f47d3a)
+- Update rive/canvas to with fixes for image clipping [`24d9e87`](https://github.com/rive-app/rive-react/commit/24d9e871d6580df1b985e61793babd1067640b5b)
+
+#### [v0.0.29](https://github.com/rive-app/rive-react/compare/v0.0.28...v0.0.29)
+
+> 16 December 2021
+
+- chore: release 0.0.29 [`8b8d6bc`](https://github.com/rive-app/rive-react/commit/8b8d6bc44bfcecd6f126dcaa9c6c4cb7fda9b6ac)
+- Bump rive-app/canvas to 1.0.8 [`2517efa`](https://github.com/rive-app/rive-react/commit/2517efaebd4ccc6270be52c2947acc9190f858cc)
+- Add offscreencanvas types [`956b76d`](https://github.com/rive-app/rive-react/commit/956b76d01c59a04eb83f3b0b2ca722798af80fb2)
+
+#### [v0.0.28](https://github.com/rive-app/rive-react/compare/v0.0.27...v0.0.28)
+
+> 16 December 2021
+
+- Use @rive-app/canvas directly to fix path issues in downstream libs [`e599b1a`](https://github.com/rive-app/rive-react/commit/e599b1a38cc0f6606d7505551a046b28a3533422)
+- chore: release 0.0.28 [`019cadf`](https://github.com/rive-app/rive-react/commit/019cadf5f22d87a0449ff1aecfdc242a26e64a46)
+
+#### [v0.0.27](https://github.com/rive-app/rive-react/compare/v0.0.26...v0.0.27)
+
+> 16 December 2021
+
+- Use @rive-app/canvas as underlying repo [`e6b036e`](https://github.com/rive-app/rive-react/commit/e6b036ee17db316f189773a801f6ade514f44d4d)
+- Update basic example to listen to changes in parent directory [`bfbb8a5`](https://github.com/rive-app/rive-react/commit/bfbb8a59ee3284d9512f0006ad518afdc1a801ea)
+- chore: release 0.0.27 [`78d3118`](https://github.com/rive-app/rive-react/commit/78d3118dcc648dc8755ec23cb79ef2724a9b4d05)
+
+#### [v0.0.26](https://github.com/rive-app/rive-react/compare/v0.0.25...v0.0.26)
+
+> 16 November 2021
+
+- bump rive-js to0.7.33 [`c4dc027`](https://github.com/rive-app/rive-react/commit/c4dc027522502f6aaa0f85392a5e90396c8b719d)
+- chore: release 0.0.26 [`5a19354`](https://github.com/rive-app/rive-react/commit/5a19354ab3fcf128b52973bb1882690f98b0ebe2)
+
+#### [v0.0.25](https://github.com/rive-app/rive-react/compare/v0.0.24...v0.0.25)
+
+> 12 November 2021
+
+- Update rive-js to 0.7.32 to fixed nested artboard speed [`1a59794`](https://github.com/rive-app/rive-react/commit/1a597943cb629be520052f2a86733998f44d6885)
+- chore: release 0.0.25 [`e54a0d4`](https://github.com/rive-app/rive-react/commit/e54a0d42d3910c39a944a144a856a33cae87f3ed)
+
+#### [v0.0.24](https://github.com/rive-app/rive-react/compare/v0.0.23...v0.0.24)
+
+> 12 November 2021
+
+- Update package.json to version 2 [`a4777ec`](https://github.com/rive-app/rive-react/commit/a4777ec7e33ded6a3581c88f2e708f45f7ea1828)
+- chore: release 0.0.24 [`026d097`](https://github.com/rive-app/rive-react/commit/026d0976582eaeb68daf09977fef5d16917c09d8)
+
+#### [v0.0.23](https://github.com/rive-app/rive-react/compare/v0.0.22...v0.0.23)
+
+> 8 November 2021
+
+- chore: release 0.0.23 [`416334e`](https://github.com/rive-app/rive-react/commit/416334ef44b7a9bdaa8c6ff8dac937cfda59d77d)
+- Add verticalAlign = top to canvas to prevent canvas growth on resize [`f309481`](https://github.com/rive-app/rive-react/commit/f309481a43307b1e2b7f77cd418498cacd8022d2)
+
+#### [v0.0.22](https://github.com/rive-app/rive-react/compare/v0.0.21...v0.0.22)
+
+> 15 October 2021
+
+- chore: release 0.0.22 [`06500e6`](https://github.com/rive-app/rive-react/commit/06500e6dcf38165ac8b5f7bf60e0503666947819)
+- Bump rive-js version to 0.7.31 [`33e34a4`](https://github.com/rive-app/rive-react/commit/33e34a46e1e394d67d6981307534fb5512df9dcf)
+
+#### [v0.0.21](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.21)
+
+> 10 September 2021
+
+- Update examples to use latest rive-react [`5d08228`](https://github.com/rive-app/rive-react/commit/5d0822836cbc7c5645d7580173c3cdda772b616d)
+- chore: release 0.0.21 [`c8f57f5`](https://github.com/rive-app/rive-react/commit/c8f57f58960987d238ca48646b354c460bfeee59)
+
+#### [v0.0.20](https://github.com/rive-app/rive-react/compare/v0.0.19...v0.0.20)
+
+> 7 September 2021
+
+- chore: release 0.0.20 [`1c3cc69`](https://github.com/rive-app/rive-react/commit/1c3cc69f401b91810105b16ccce1dd7612da037a)
+- rive-0.7.30: Fix ghosting where aspect ratio of canvas is different to that of artboard [`44056eb`](https://github.com/rive-app/rive-react/commit/44056eb5654e90de6ba10ed4892a4e2a5ebf6716)
+
+#### [v0.0.19](https://github.com/rive-app/rive-react/compare/v0.0.18...v0.0.19)
+
+> 7 September 2021
+
+- chore: release 0.0.19 [`a9c3233`](https://github.com/rive-app/rive-react/commit/a9c3233452d9f6465c761cda0763d314ba712267)
+- Update rive-js to 0.7.29 [`ce2c706`](https://github.com/rive-app/rive-react/commit/ce2c7065f567e43cfcca4c8f98e98aaf6e92f4c3)
+
+#### [v0.0.18](https://github.com/rive-app/rive-react/compare/v0.0.17...v0.0.18)
+
+> 12 August 2021
+
+- chore: release 0.0.18 [`203faf9`](https://github.com/rive-app/rive-react/commit/203faf9ce22ee307af815ebdc2790f6bacbe0016)
+- Update rive-js version to 0.7.25 [`fd0efb1`](https://github.com/rive-app/rive-react/commit/fd0efb1b815ae833e3b50b643b00464542f6f800)
+
+#### [v0.0.17](https://github.com/rive-app/rive-react/compare/v0.0.16...v0.0.17)
+
+> 12 August 2021
+
+- chore: release 0.0.17 [`11b6f2e`](https://github.com/rive-app/rive-react/commit/11b6f2e8792781ad38dce745f080b69a94c35c3a)
+- Update rive-js version to 0.7.24 [`8a1adf1`](https://github.com/rive-app/rive-react/commit/8a1adf147d25f4616ef048a84986314e9397ad43)
+
+#### [v0.0.16](https://github.com/rive-app/rive-react/compare/v0.0.15...v0.0.16)
+
+> 11 August 2021
+
+- chore: release 0.0.16 [`80ffb5e`](https://github.com/rive-app/rive-react/commit/80ffb5ee2d3b3dd22d1c229e1f4e772e7fe763b3)
+- Update rive-js version to 0.7.23 [`cf1baa6`](https://github.com/rive-app/rive-react/commit/cf1baa6661f643996e37b26a5a9a6dd9a9950e06)
+
+#### [v0.0.15](https://github.com/rive-app/rive-react/compare/v0.0.14...v0.0.15)
+
+> 30 July 2021
+
+- chore: release 0.0.15 [`f0b1aeb`](https://github.com/rive-app/rive-react/commit/f0b1aeb7d850103b61310c9251a827f835fadf58)
+- update rive-js with support for distance and transform constraints [`8612e0b`](https://github.com/rive-app/rive-react/commit/8612e0b15f6c93d4e5c276c95e7f36543466e4d6)
+
+#### [v0.0.14](https://github.com/rive-app/rive-react/compare/v0.0.11...v0.0.14)
+
+> 21 July 2021
+
+- Bump rive-js to 0.7.19 with support for IK constraints [`6c80c53`](https://github.com/rive-app/rive-react/commit/6c80c5311e99ee47e9f4fc3c5f35ab908ddfa326)
+- chore: release 0.0.14 [`d7f7eab`](https://github.com/rive-app/rive-react/commit/d7f7eab65577732fa1e9f792bc14f10d89c0ccaf)
+- chore: bump to 0.0.13 [`29bd502`](https://github.com/rive-app/rive-react/commit/29bd502208efa6928ffb47f06b5e548f071a8ade)
+
+#### [v0.0.11](https://github.com/rive-app/rive-react/compare/v0.0.10...v0.0.11)
+
+> 14 July 2021
+
+- Update README with camelCase params [`#26`](https://github.com/rive-app/rive-react/pull/26)
+- Update README with camel case params [`14b7746`](https://github.com/rive-app/rive-react/commit/14b774676b41fa3082cb6554ee2062aa7d773da9)
+- chore: release 0.0.11 [`9db4ee5`](https://github.com/rive-app/rive-react/commit/9db4ee52bf919add026c4c5487a5ca399cc0b823)
+
 #### [v0.0.10](https://github.com/rive-app/rive-react/compare/v0.0.9...v0.0.10)
 
+> 28 June 2021
+
 - Include types in npm publish [`#23`](https://github.com/rive-app/rive-react/pull/23)
+- chore: release 0.0.10 [`0b14c4c`](https://github.com/rive-app/rive-react/commit/0b14c4cd4cc49f6b7b1567b23752688092ca73b4)
 
 #### [v0.0.9](https://github.com/rive-app/rive-react/compare/v0.0.8...v0.0.9)
 

README.md

@@ -16,20 +16,32 @@ Detailed runtime documentation can be found in [Rive's help center](https://help
 
 ## Installation
 
+There are two main variants of the React runtime:
+
+1. **Recommended** Using [Canvas2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+
 ```
-npm i --save rive-react
+npm i --save @rive-app/react-canvas
 ```
 
+2. Using [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)
+
+```
+npm i --save @rive-app/react-webgl
+```
+
+Read more in our [web runtime docs](https://github.com/rive-app/rive-wasm/blob/master/WEB_RUNTIMES.md) around the differences. For most cases and smallest bundle size, we recommend using the `react-canvas` package.
+
 _Note: This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._
 
 ## Usage
 
 ### Component
 
-Rive React provides a basic component as it's default import for displaying simple animations.
+Rive React provides a basic component as it's default import for displaying simple animations. Note that any animations or state machines instantiated through this component will autoplay.
 
 ```js
-import Rive from 'rive-react';
+import Rive from '@rive-app/react-canvas';
 
 function Example() {
   return <Rive src="loader.riv" />;
@@ -43,15 +55,26 @@ export default Example;
 - `src`: File path or URL to the .riv file to display.
 - `artboard`: _(optional)_ Name to display.
 - `animations`: _(optional)_ Name or list of names of animtions to play.
+- `stateMachines`: _(optional)_ Name of state machine to play.
 - `layout`: _(optional)_ Layout object to define how animations are displayed on the canvas. See [Rive.js](https://github.com/rive-app/rive-wasm#layout) for more details.
-- _All attributes and eventHandlers that can be passed to a `div` element can also be passed to the `Rive` component and used in the same manner._
+- _All attributes and eventHandlers that can be passed to a `canvas` element can also be passed to the `Rive` component and used in the same manner._
+
+#### Styles and Classes
+
+When rendering out a Rive component, in the DOM, it will show as a `<div>` element that contains the `<canvas>` element that powers the Rive animations. The purpose of the `<div>` element is to help control the sizing of the component. By default, the container has the following styles set on the `style` attribute:
+```css
+width: 100%;
+height: 100%;
+```
+
+If you decide to pass in a `className` to the Rive component, you will override these attributes, and you will need to either set these style attributes in your CSS associated with that `className`, or set your own sizing preferences. 
 
 ### useRive Hook
 
 For more advanced usage, the `useRive` hook is provided. The hook will return a component and a [Rive.js](https://github.com/rive-app/rive-wasm) `Rive` object which gives you control of the current rive file.
 
 ```js
-import { useRive } from 'rive-react';
+import { useRive } from '@rive-app/react-canvas';
 
 function Example() {
   const params = {
@@ -73,12 +96,12 @@ export default Example;
 
 #### Parameters
 
-- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .rive file.
+- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .riv file.
 - `opts`: Rive React specific options.
 
 #### Return Values
 
-- `RiveComponent`: A Component that can be used to display your .riv file. This component accepts the same attributes and event handlers as a `div` element.
+- `RiveComponent`: A Component that can be used to display your .riv file. This component accepts the same attributes and event handlers as a `canvas` element.
 - `rive`: A Rive.js `Rive` object. This will return as null until the .riv file has fully loaded.
 - `canvas`: HTMLCanvasElement object, on which the .riv file is rendering.
 - `setCanvasRef`: A callback ref that can be passed to your own canvas element, if you wish to have control over the rendering of the Canvas element.
@@ -94,46 +117,58 @@ export default Example;
 - `stateMachines?`: _(optional)_ Name of list of names of state machines to load.
 - `layout?`: _(optional)_ Layout object to define how animations are displayed on the canvas. See [Rive.js](https://github.com/rive-app/rive-wasm#layout) for more details.
 - `autoplay?`: _(optional)_ If `true`, the animation will automatically start playing when loaded. Defaults to false.
-- `onload?`: _(optional)_ Callback that get's fired when the .rive file loads .
-- `onloaderror?`: _(optional)_ Callback that get's fired when an error occurs loading the .riv file.
-- `onplay?`: _(optional)_ Callback that get's fired when the animation starts playing.
-- `onpause?`: _(optional)_ Callback that get's fired when the animation pauses.
-- `onstop?`: _(optional)_ Callback that get's fired when the animation stops playing.
-- `onloop?`: _(optional)_ Callback that get's fired when the animation completes a loop.
-- `onstatechange?`: _(optional)_ Callback that get's fired when a state change occurs.
+- `onLoad?`: _(optional)_ Callback that get's fired when the .rive file loads .
+- `onLoadError?`: _(optional)_ Callback that get's fired when an error occurs loading the .riv file.
+- `onPlay?`: _(optional)_ Callback that get's fired when the animation starts playing.
+- `onPause?`: _(optional)_ Callback that get's fired when the animation pauses.
+- `onStop?`: _(optional)_ Callback that get's fired when the animation stops playing.
+- `onLoop?`: _(optional)_ Callback that get's fired when the animation completes a loop.
+- `onStateChange?`: _(optional)_ Callback that get's fired when a state change occurs.
 
 #### opts
 
 - `useDevicePixelRatio`: _(optional)_ If `true`, the hook will scale the resolution of the animation based the [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). Defaults to `true`. NOTE: Requires the `setContainerRef` ref callback to be passed to a element wrapping a canvas element. If you use the `RiveComponent`, then this will happen automatically.
 - `fitCanvasToArtboardHeight`: _(optional)_ If `true`, then the canvas will resize based on the height of the artboard. Defaults to `false`.
+- `useOffscreenRenderer`: _(optional)_ If `true`, the Rive instance will share (or create if one does not exist) an offscreen `WebGL` context. This allows you to display multiple Rive animations on one screen to work around some browser limitations regarding multiple concurrent WebGL contexts. If `false`, each Rive instance will have its own dedicated `WebGL` context, and you may need to be cautious of the browser limitations just mentioned. Defaults to `true`.
 
 ### useStateMachineInput Hook
 
 The `useStateMachineInput` hook is provided to make it easier to interact with state machine inputs on a rive file.
 
 ```js
-import { useRive, useStateMachineInput } from 'rive-react';
+import { useRive, useStateMachineInput } from '@rive-app/react-canvas';
 
 function Example() {
+  const STATE_MACHINE_NAME = 'button';
+  const INPUT_NAME = 'onClick';
+
   const { RiveComponent, rive } = useRive({
     src: 'button.riv',
-    stateMachines: 'button',
+    stateMachines: STATE_MACHINE_NAME,
     autoplay: true,
   });
 
-  const onClickInput = useStateMachineInput(rive, 'button', 'onClick');
+  const onClickInput = useStateMachineInput(
+    rive,
+    STATE_MACHINE_NAME,
+    INPUT_NAME
+  );
 
-  return <RiveComponent onClick={() => onClickInput && onClickInput.fire())} />;
+  // This example is using a state machine with a trigger input.
+  return <RiveComponent onClick={() => onClickInput.fire()} />;
 }
 
 export default Example;
 ```
 
+See our [examples](examples) folder for working examples of [Boolean](examples/state-machine-boolean-input) and [Number](examples/state-machine-number-input) inputs.
+
 #### Parameters
 
 - `rive`: A `Rive` object. This is returned by the `useRive` hook.
 - `stateMachineName`: Name of the state machine.
 - `inputName`: Name of the state machine input.
+- `initialValue`: Initial value to set on a state machine input when it's loaded in, for number or boolean inputs. **Note** that this may trigger any transitional animations between the initial state and any next states that depend on the input this `initialValue` is being set to. If this is problematic or conflicting for your case, we recommend setting the true initial value of the input on your state machine in the Rive editor. 
 
 #### Return Value
 
@@ -141,4 +176,45 @@ A Rive.js `stateMachineInput` object.
 
 ## Examples
 
-The `examples` shows a number of different ways to use Rive React. See the instructions for each example to run locally.
+This project uses [Storybook](https://storybook.js.org/) to build examples and API documentation. Check it out at:
+https://rive-app.github.io/rive-react. To run locally, simply run `npm run storybook`.
+
+## Migration notes
+
+### Migrating from version 0.0.x to 1.x.x
+
+Starting in v 1.0.0, we've migrated from wrapping around the `@rive-app/canvas` runtime (which uses the `CanvasRendereringContext2D` renderer) to the `@rive-app/webgl` runtime (which uses the WebGL renderer). The high-level API doesn't require any change to upgrade, but there are some notes to consider about the backing renderer.
+
+The backing `WebGL` runtime allows for best performance across all devices, as well as support for some features that are not supported in the `canvas` renderer runtime. To allow the `react` runtime to support some of the newer features in Rive, we needed to switch the `rive-react` backing runtime to `@rive-app/webgl`. 
+
+One note about this switch is that some browsers may limit the number of concurrent WebGL contexts. For example, Chrome may only support up to 16 contexts concurrently. We pass a property called `useOffscreenRenderer` set to true to the backing runtime when instantiating Rive by default, which helps to manage the lifecycle of the `canvas` with a single offscreen `WebGL` context, even if there are many Rive animations on the screen (i.e 16+). If you need a single `WebGL` context per Rive animation/instance, pass in the `useOffscreenRenderer` property set to `false` in the `useRive` options, or as a prop in the default export component from this runtime. See below for an example:
+
+```js
+const {rive, RiveComponent} = useRive({
+  src: 'foo.riv',
+}, {
+  // Default (you don't need to set this)
+  useOffscreenRenderer: true,
+  // To override and use one context per Rive instance, uncomment and use the line below
+  // useOffscreenRenderer: false,
+});
+
+// or you can override the flag in JSX via props
+return (
+  <Rive src="foo.riv" useOffscreenRenderer={false} />
+);
+```
+
+### Migrating from version 1.x.x to 2.x.x
+
+#### Package split
+
+In most cases, you may be able to migrate safely. We are mainly enabling the React runtime to work with both backing renderers `@rive-app/webgl` and `@rive-app/canvas`, such that you can use either `@rive-app/react-canvas` or `@rive-app/react-webgl` as the dependency in your React applications. Another change that is mostly internal is that by default, `rive-react` will now use `@rive-app/canvas` (as opposed to `@rive-app/webgl`) to wrap around, as it currently yields the fastest performance across devices. Therefore, **we recommend installing `@rive-app/react-canvas` in your applicaions**. However, if you need a WebGL backing renderer, you may want to use `@rive-app/react-webgl`.
+
+#### Classes, styles, and component props
+Starting in v2.0, we introduce one breaking change where any non-style props set on the `RiveComponent` (i.e `aria-*`, `role`, etc.) will be set on the inner `<canvas>` element. Previously, all extra props would be set onto the containing `<div>` element. Both the `className` and `style` props will continue to be set on the `<div>` element that wraps the canvas, as this dictates the sizing of the Rive component.
+
+
+### Migrating to 3.0
+
+There are no breaking changes here. If you have migrated to v2.x.x, you can safely migrate to 3.0.

docs/0.233bd6e2.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */

docs/0.233bd6e2.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"0.233bd6e2.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}

docs/0.f3c14cfa225a4c40c8ba.manager.bundle.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */

docs/2.89943a03.iframe.bundle.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{"./node_modules/@storybook/preview-web/dist/esm/renderDocs.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"renderDocs",(function(){return renderDocs})),__webpack_require__.d(__webpack_exports__,"unmountDocs",(function(){return unmountDocs}));__webpack_require__("./node_modules/regenerator-runtime/runtime.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.promise.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),react_dom=__webpack_require__("./node_modules/react-dom/index.js"),react_dom_default=__webpack_require__.n(react_dom),wrapper={fontSize:"14px",letterSpacing:"0.2px",margin:"10px 0"},main={margin:"auto",padding:30,borderRadius:10,background:"rgba(0,0,0,0.03)"},heading={textAlign:"center"},NoDocs_NoDocs=function NoDocs(){return react_default.a.createElement("div",{style:wrapper,className:"sb-nodocs sb-wrapper"},react_default.a.createElement("div",{style:main},react_default.a.createElement("h1",{style:heading},"No Docs"),react_default.a.createElement("p",null,"Sorry, but there are no docs for the selected story. To add them, set the story's ",react_default.a.createElement("code",null,"docs")," parameter. If you think this is an error:"),react_default.a.createElement("ul",null,react_default.a.createElement("li",null,"Please check the story definition."),react_default.a.createElement("li",null,"Please check the Storybook config."),react_default.a.createElement("li",null,"Try reloading the page.")),react_default.a.createElement("p",null,"If the problem persists, check the browser console, or the terminal you've run Storybook from.")))};function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}function renderDocs(story,docsContext,element,callback){return function renderDocsAsync(_x,_x2,_x3){return _renderDocsAsync.apply(this,arguments)}(story,docsContext,element).then(callback)}function _renderDocsAsync(){return(_renderDocsAsync=_asyncToGenerator(regeneratorRuntime.mark((function _callee(story,docsContext,element){var _docs$getContainer,_docs$getPage,docs,DocsContainer,Page,docsElement;return regeneratorRuntime.wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(!(null!=(docs=story.parameters.docs)&&docs.getPage||null!=docs&&docs.page)||(null!=docs&&docs.getContainer||null!=docs&&docs.container)){_context.next=3;break}throw new Error("No `docs.container` set, did you run `addon-docs/preset`?");case 3:if(_context.t1=docs.container,_context.t1){_context.next=8;break}return _context.next=7,null===(_docs$getContainer=docs.getContainer)||void 0===_docs$getContainer?void 0:_docs$getContainer.call(docs);case 7:_context.t1=_context.sent;case 8:if(_context.t0=_context.t1,_context.t0){_context.next=11;break}_context.t0=function(_ref){var children=_ref.children;return react_default.a.createElement(react_default.a.Fragment,null,children)};case 11:if(DocsContainer=_context.t0,_context.t3=docs.page,_context.t3){_context.next=17;break}return _context.next=16,null===(_docs$getPage=docs.getPage)||void 0===_docs$getPage?void 0:_docs$getPage.call(docs);case 16:_context.t3=_context.sent;case 17:if(_context.t2=_context.t3,_context.t2){_context.next=20;break}_context.t2=NoDocs_NoDocs;case 20:return Page=_context.t2,docsElement=react_default.a.createElement(DocsContainer,{key:story.componentId,context:docsContext},react_default.a.createElement(Page,null)),_context.next=24,new Promise((function(resolve){react_dom_default.a.render(docsElement,element,resolve)}));case 24:case"end":return _context.stop()}}),_callee)})))).apply(this,arguments)}function unmountDocs(element){react_dom_default.a.unmountComponentAtNode(element)}NoDocs_NoDocs.displayName="NoDocs"}}]);

docs/5.c79123fa7941ae9f0387.manager.bundle.js.LICENSE.txt

@@ -0,0 +1,31 @@
+/**
+    	 * @license
+    	 * Copyright Google Inc. All Rights Reserved.
+    	 *
+    	 * Use of this source code is governed by an MIT-style license that can be
+    	 * found in the LICENSE file at https://angular.io/license
+    	 */
+
+/**
+      	   * @license
+      	   * Copyright Google Inc. All Rights Reserved.
+      	   *
+      	   * Use of this source code is governed by an MIT-style license that can be
+      	   * found in the LICENSE file at https://angular.io/license
+      	   */
+
+/**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+
+/**
+   * @license
+   * Copyright Google Inc. All Rights Reserved.
+   *
+   * Use of this source code is governed by an MIT-style license that can be
+   * found in the LICENSE file at https://angular.io/license
+   */

docs/6.e2fef599.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,31 @@
+/**
+    	 * @license
+    	 * Copyright Google Inc. All Rights Reserved.
+    	 *
+    	 * Use of this source code is governed by an MIT-style license that can be
+    	 * found in the LICENSE file at https://angular.io/license
+    	 */
+
+/**
+      	   * @license
+      	   * Copyright Google Inc. All Rights Reserved.
+      	   *
+      	   * Use of this source code is governed by an MIT-style license that can be
+      	   * found in the LICENSE file at https://angular.io/license
+      	   */
+
+/**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+
+/**
+   * @license
+   * Copyright Google Inc. All Rights Reserved.
+   *
+   * Use of this source code is governed by an MIT-style license that can be
+   * found in the LICENSE file at https://angular.io/license
+   */

docs/6.e2fef599.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"6.e2fef599.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}

docs/8.6c22300703a58b9d6b46.manager.bundle.js.LICENSE.txt

@@ -0,0 +1,12 @@
+/*!
+ * OverlayScrollbars
+ * https://github.com/KingSora/OverlayScrollbars
+ *
+ * Version: 1.13.0
+ *
+ * Copyright KingSora | Rene Haas.
+ * https://github.com/KingSora
+ *
+ * Released under the MIT license.
+ * Date: 02.08.2020
+ */

docs/9.1e553722.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,12 @@
+/*!
+ * OverlayScrollbars
+ * https://github.com/KingSora/OverlayScrollbars
+ *
+ * Version: 1.13.0
+ *
+ * Copyright KingSora | Rene Haas.
+ * https://github.com/KingSora
+ *
+ * Released under the MIT license.
+ * Date: 02.08.2020
+ */

docs/9.1e553722.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"9.1e553722.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}

docs/9.5e61b7f1b71ff49bf163.manager.bundle.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{931:function(module,exports){module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]);

docs/iframe.html

@@ -0,0 +1,367 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>/* While we aren't showing the main block yet, but still preparing, we want everything the user
+     has rendered, which may or may not be in #root, to be display none */
+  .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
+    display: none;
+  }
+
+  .sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
+    display: none;
+  }
+
+  /* Hide our own blocks when we aren't supposed to be showing them */
+  :not(.sb-show-preparing-story) > .sb-preparing-story,
+  :not(.sb-show-preparing-docs) > .sb-preparing-docs,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
+
+  .sb-show-main.sb-main-centered {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  .sb-show-main.sb-main-centered #root {
+    box-sizing: border-box;
+    margin: auto;
+    padding: 1rem;
+    max-height: 100%; /* Hack for centering correctly in IE11 */
+  }
+
+  /* Vertical centering fix for IE11 */
+  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .sb-show-main.sb-main-centered:after {
+      content: '';
+      min-height: inherit;
+      font-size: 0;
+    }
+  }
+
+  .sb-show-main.sb-main-fullscreen {
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  .sb-show-main.sb-main-padded {
+    margin: 0;
+    padding: 1rem;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
+      BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: auto;
+  }
+
+  .sb-heading {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+    padding-right: 25px;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    border: 20px solid rgb(187, 49, 49);
+    background: #222;
+    color: #fff;
+    z-index: 999999;
+  }
+
+  .sb-errordisplay_code {
+    padding: 10px;
+    background: #000;
+    color: #eee;
+    font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
+      'Lucida Console', Consolas, Monaco, monospace;
+  }
+
+  .sb-errordisplay pre {
+    white-space: pre-wrap;
+  }
+
+  @-webkit-keyframes sb-rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes sb-rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes sb-glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes sb-glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  /* We display the preparing loaders *over* the rendering story */
+  .sb-preparing-story,
+  .sb-preparing-docs {
+    background-color: white;
+    /* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
+    on top, but this isn't possible as it would require making CSS changes that could affect user code */
+    z-index: 2147483647;
+  }
+
+  .sb-loader {
+    -webkit-animation: sb-rotate360 0.7s linear infinite;
+    animation: sb-rotate360 0.7s linear infinite;
+    border-color: rgba(97, 97, 97, 0.29);
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: #646464;
+    border-width: 2px;
+    display: inline-block;
+    height: 32px;
+    left: 50%;
+    margin-left: -16px;
+    margin-top: -16px;
+    mix-blend-mode: difference;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    transition: all 200ms ease-out;
+    vertical-align: top;
+    width: 32px;
+    z-index: 4;
+  }
+
+  .sb-previewBlock {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+    margin: 25px auto 40px;
+    max-width: 600px;
+  }
+
+  .sb-previewBlock_header {
+    align-items: center;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
+    display: flex;
+    gap: 14px;
+    height: 40px;
+    padding: 0 12px;
+  }
+
+  .sb-previewBlock_icon {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    height: 14px;
+    width: 14px;
+  }
+  .sb-previewBlock_icon:last-child {
+    margin-left: auto;
+  }
+
+  .sb-previewBlock_body {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    height: 182px;
+    position: relative;
+  }
+
+  .sb-argstableBlock {
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 13px;
+    line-height: 20px;
+    margin: 25px auto 40px;
+    max-width: 600px;
+    text-align: left;
+    width: 100%;
+  }
+  .sb-argstableBlock th:first-of-type,
+  .sb-argstableBlock td:first-of-type {
+    padding-left: 20px;
+  }
+  .sb-argstableBlock th:nth-of-type(2),
+  .sb-argstableBlock td:nth-of-type(2) {
+    width: 35%;
+  }
+  .sb-argstableBlock th:nth-of-type(3),
+  .sb-argstableBlock td:nth-of-type(3) {
+    width: 15%;
+  }
+  .sb-argstableBlock th:laste-of-type,
+  .sb-argstableBlock td:laste-of-type {
+    width: 25%;
+    padding-right: 20px;
+  }
+  .sb-argstableBlock th span,
+  .sb-argstableBlock td span {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+  }
+  .sb-argstableBlock th {
+    padding: 10px 15px;
+  }
+
+  .sb-argstableBlock-body {
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
+  }
+  .sb-argstableBlock-body tr {
+    background: transparent;
+    overflow: hidden;
+  }
+  .sb-argstableBlock-body tr:not(:first-child) {
+    border-top: 1px solid #e6e6e6;
+  }
+  .sb-argstableBlock-body tr:first-child td:first-child {
+    border-top-left-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:first-child td:last-child {
+    border-top-right-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:last-child td:first-child {
+    border-bottom-left-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:last-child td:last-child {
+    border-bottom-right-radius: 4px;
+  }
+  .sb-argstableBlock-body td {
+    background: #fff;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    vertical-align: top;
+  }
+  .sb-argstableBlock-body td:not(:first-of-type) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .sb-argstableBlock-body button {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+    display: inline;
+    font-size: 12px;
+    line-height: 1;
+    padding: 10px 16px;
+  }
+
+  .sb-argstableBlock-summary {
+    margin-top: 4px;
+  }
+
+  .sb-argstableBlock-code {
+    margin-right: 4px;
+    margin-bottom: 4px;
+    padding: 2px 5px;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }
+
+  window.onerror = function onerror(message, source, line, column, err) {
+    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
+    // eslint-disable-next-line no-var, vars-on-top
+    var xhr = new window.XMLHttpRequest();
+    xhr.open('POST', '/runtime-error');
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(
+      JSON.stringify({
+        /* eslint-disable object-shorthand */
+        message: message,
+        source: source,
+        line: line,
+        column: column,
+        error: err && { message: err.message, name: err.name, stack: err.stack },
+        origin: 'preview',
+        /* eslint-enable object-shorthand */
+      })
+    );
+  };</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap"><link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto+Mono&amp;display=swap"><style>body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+  }</style><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
+          
+      
+          
+            window['LOGLEVEL'] = "info";
+          
+      
+          
+            window['FRAMEWORK_OPTIONS'] = {};
+          
+      
+          
+      
+          
+            window['FEATURES'] = {"postcss":true,"emotionAlias":false,"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernInlineRender":false,"breakingChangesV7":false,"interactionsDebugger":false,"babelModeV7":false,"argTypeTargetsV7":false,"previewMdx2":false};
+          
+      
+          
+      
+          
+            window['STORIES'] = [{"titlePrefix":"","directory":"./examples/stories","files":"*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:examples\\/stories\\/(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./examples/stories","files":"*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:examples\\/stories\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.e7f32bf8.iframe.bundle.js"></script><script src="vendors~main.16f7136c.iframe.bundle.js"></script><script src="main.19f2d967.iframe.bundle.js"></script></body></html>

docs/index.html

@@ -0,0 +1,59 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"/><style>html, body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }
+
+  window.onerror = function onerror(message, source, line, column, err) {
+    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
+    // eslint-disable-next-line no-var, vars-on-top
+    var xhr = new window.XMLHttpRequest();
+    xhr.open('POST', '/runtime-error');
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(
+      JSON.stringify({
+        /* eslint-disable object-shorthand */
+        message: message,
+        source: source,
+        line: line,
+        column: column,
+        error: err && { message: err.message, name: err.name, stack: err.stack },
+        origin: 'manager',
+        /* eslint-enable object-shorthand */
+      })
+    );
+  };</script><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
+          
+      
+          
+            window['LOGLEVEL'] = "info";
+          
+      
+          
+            window['FEATURES'] = {"postcss":true,"emotionAlias":false,"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernInlineRender":false,"breakingChangesV7":false,"interactionsDebugger":false,"babelModeV7":false,"argTypeTargetsV7":false,"previewMdx2":false};
+          
+      
+          
+      
+          
+      
+          
+            window['DOCS_MODE'] = false;</script><script src="runtime~main.8ab76b1af44e6332b6fc.manager.bundle.js"></script><script src="vendors~main.59133444ce5b3a186e53.manager.bundle.js"></script><script src="main.5ff01ce9b2f269a4e646.manager.bundle.js"></script></body></html>

docs/main.5ff01ce9b2f269a4e646.manager.bundle.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{455:function(module,exports,__webpack_require__){__webpack_require__(456),__webpack_require__(822),__webpack_require__(826),__webpack_require__(827),__webpack_require__(823),__webpack_require__(820),__webpack_require__(819),__webpack_require__(821),__webpack_require__(818),__webpack_require__(824),__webpack_require__(825),module.exports=__webpack_require__(817)},502:function(module,exports){}},[[455,3,4]]]);

docs/project.json

@@ -0,0 +1 @@
+{"generatedAt":1656373830741,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"npm","version":"8.11.0"},"storybookVersion":"6.5.9","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.9"},"@storybook/builder-webpack4":{"version":"6.5.9"},"@storybook/manager-webpack4":{"version":"6.5.9"},"@storybook/react":{"version":"6.5.9"},"@storybook/testing-library":{"version":"0.0.11"},"eslint-plugin-storybook":{"version":"0.5.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.9"},"@storybook/addon-essentials":{"version":"6.5.9"},"@storybook/addon-interactions":{"version":"6.5.9"}}}

docs/runtime~main.8ab76b1af44e6332b6fc.manager.bundle.js

@@ -0,0 +1 @@
+!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={3:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({}[chunkId]||chunkId)+"."+{0:"f3c14cfa225a4c40c8ba",1:"44288d676d5217e7dfaf",5:"c79123fa7941ae9f0387",6:"2d406554b9c913afb448",7:"480c60c60f21bf435941",8:"6c22300703a58b9d6b46",9:"5e61b7f1b71ff49bf163"}[chunkId]+".manager.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);

docs/runtime~main.e7f32bf8.iframe.bundle.js

@@ -0,0 +1 @@
+!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={4:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({}[chunkId]||chunkId)+"."+{0:"233bd6e2",1:"7e5fbb8d",2:"89943a03",6:"e2fef599",7:"15129502",8:"b569e86b",9:"1e553722"}[chunkId]+".iframe.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);

docs/vendors~main.16f7136c.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,106 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <feross@feross.org> <http://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * https://github.com/es-shims/es5-shim
+ * @license es5-shim Copyright 2009-2020 by contributors, MIT License
+ * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
+ */
+
+/*!
+ * https://github.com/paulmillr/es6-shim
+ * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
+ *   and contributors,  MIT License
+ * es6-shim: v0.35.4
+ * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
+ * Details and documentation:
+ * https://github.com/paulmillr/es6-shim/
+ */
+
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+/*!
+ * isobject <https://github.com/jonschlinkert/isobject>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+//! stable.js 0.1.8, https://github.com/Two-Screen/stable
+
+//! © 2018 Angry Bytes and contributors. MIT licensed.

docs/vendors~main.16f7136c.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendors~main.16f7136c.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}

docs/vendors~main.59133444ce5b3a186e53.manager.bundle.js.LICENSE.txt

@@ -0,0 +1,104 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+ * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io)
+ * 
+ * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
+ * All Rights Reserved. Apache Software License 2.0
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+/*!
+ * https://github.com/es-shims/es5-shim
+ * @license es5-shim Copyright 2009-2020 by contributors, MIT License
+ * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
+ */
+
+/*!
+ * https://github.com/paulmillr/es6-shim
+ * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
+ *   and contributors,  MIT License
+ * es6-shim: v0.35.4
+ * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
+ * Details and documentation:
+ * https://github.com/paulmillr/es6-shim/
+ */
+
+/*!
+ * isobject <https://github.com/jonschlinkert/isobject>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/*! store2 - v2.13.1 - 2021-12-20
+* Copyright (c) 2021 Nathan Bubna; Licensed (MIT OR GPL-3.0) */
+
+/**
+ * React Router DOM v6.0.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.0.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

examples/basic-typescript/.gitignore

@@ -1,23 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

examples/basic-typescript/README.md

@@ -1,14 +0,0 @@
-# Basic Typescript
-
-This is an example app that uses the useRive hook with typescript.
-
-## To Run
-
-This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
-
-To install and run:
-
-```
-npm install
-npm start
-```

examples/basic-typescript/package.json

@@ -1,44 +0,0 @@
-{
-  "name": "basic-typescript",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.23",
-    "@types/node": "^12.20.14",
-    "@types/react": "^17.0.9",
-    "@types/react-dom": "^17.0.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
-    "typescript": "^4.3.2",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/basic-typescript/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <title>React App - Basic Typescript</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

examples/basic-typescript/src/App.tsx

@@ -1,19 +0,0 @@
-import { useRive, UseRiveParameters } from "rive-react";
-
-function App() {
-  const params: UseRiveParameters = {
-    src: "poison-loader.riv",
-    autoplay: true,
-  };
-
-  const { RiveComponent } = useRive(params);
-
-  return (
-    // The animation will fit to the parent element.
-    <div style={{ height: "500px", width: "500px" }}>
-      <RiveComponent />
-    </div>
-  );
-}
-
-export default App;

examples/basic-typescript/src/index.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);

examples/basic-typescript/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

examples/basic-typescript/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
-}

examples/basic-with-hook/README.md

@@ -1,14 +0,0 @@
-# Basic with hook
-
-This is a very basic example of using the useRive to autoplay a simple looping animation.
-
-## To Run
-
-This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
-
-To install and run:
-
-```
-npm install
-npm start
-```

examples/basic-with-hook/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "basic-with-hook",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/basic-with-hook/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <title>Rive React - Basic with Hook</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

examples/basic-with-hook/src/App.js

@@ -1,19 +0,0 @@
-import { useRive } from "rive-react";
-
-function App() {
-  const params = {
-    src: "poison-loader.riv",
-    autoplay: true,
-  };
-
-  const { RiveComponent } = useRive(params);
-
-  return (
-    // The animation will fit to the parent element.
-    <div style={{ height: "500px", width: "500px" }}>
-      <RiveComponent />
-    </div>
-  );
-}
-
-export default App;

examples/basic-with-hook/src/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);

examples/basic/README.md

@@ -1,14 +0,0 @@
-# Basic
-
-This is a very basic example of using the Rive component to autoplay a simple looping animation.
-
-## To Run
-
-This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
-
-To install and run:
-
-```
-npm install
-npm start
-```

examples/basic/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "basic-example",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/basic/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <title>Rive React - Basic</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

examples/basic/src/App.js

@@ -1,12 +0,0 @@
-import Rive from "rive-react";
-
-function App() {
-  return (
-    // The animation will fit to the parent element.
-    <div style={{ height: "500px", width: "500px" }}>
-      <Rive src="poison-loader.riv" autoplay />
-    </div>
-  );
-}
-
-export default App;

examples/basic/src/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);

examples/play-on-hover/README.md

@@ -1,14 +0,0 @@
-# Play on hover
-
-This provides an example of how to play/pause a Rive animation when the mouse is hovered over it.
-
-## To Run
-
-This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
-
-To install and run:
-
-```
-npm install
-npm start
-```

examples/play-on-hover/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "play-on-hover",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/play-on-hover/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <title>Rive React - Play on hover</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

examples/play-on-hover/src/App.js

@@ -1,32 +0,0 @@
-import { useRive } from "rive-react";
-
-function App() {
-  const params = {
-    src: "poison-loader.riv",
-    autoplay: false,
-  };
-
-  const { RiveComponent, rive } = useRive(params);
-
-  function onMouseEnter() {
-    // `rive` will return as null until the file as fully loaded, so we include this
-    // guard to prevent any unwanted errors.
-    if (rive) {
-      rive.play();
-    }
-  }
-
-  function onMouseLeave() {
-    if (rive) {
-      rive.pause();
-    }
-  }
-
-  return (
-    <div style={{ height: "600px", width: "600px" }}>
-      <RiveComponent onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
-    </div>
-  );
-}
-
-export default App;

examples/play-on-hover/src/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);

examples/play-pause-button/README.md

@@ -1,14 +0,0 @@
-# Play/Pause Buttons
-
-This example shows how we can play/pause the Rive animation on a button click and update the text of the button based on events happening in the runtime.
-
-## To Run
-
-This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
-
-To install and run:
-
-```
-npm install
-npm start
-```

examples/play-pause-button/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "play-pause-button",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/play-pause-button/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <title>Rive React - Basic with Hook</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

examples/play-pause-button/src/App.js

@@ -1,50 +0,0 @@
-import { useEffect, useState } from "react";
-import { useRive } from "rive-react";
-
-function App() {
-  const [buttonText, setButtonText] = useState("Pause");
-  const { RiveComponent, rive } = useRive({
-    src: "poison-loader.riv",
-    autoplay: true,
-  });
-
-  useEffect(() => {
-    if (rive) {
-      // "play" event is fired when the animation starts to play, so we update
-      // button text on this event.
-      rive.on("play", () => {
-        setButtonText("Pause");
-      });
-
-      // As above, the "pause" event is fired when the animation pauses.
-      rive.on("pause", () => {
-        setButtonText("Play");
-      });
-    }
-    // We listen for changes to the rive object. The rive object will be null
-    // until the rive file has loaded.
-  }, [rive]);
-
-  function onButtonClick() {
-    // `rive` will return as null until the file as fully loaded, so we include this
-    // guard to prevent any unwanted errors.
-    if (rive) {
-      if (rive.isPlaying) {
-        rive.pause();
-      } else {
-        rive.play();
-      }
-    }
-  }
-
-  return (
-    // The animation will fit to the parent element, so we set a large height
-    // and width for this example.
-    <div style={{ height: "500px", width: "500px" }}>
-      <RiveComponent />
-      <button onClick={onButtonClick}>{buttonText}</button>
-    </div>
-  );
-}
-
-export default App;

examples/play-pause-button/src/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);

examples/state-machine-button/README.md

@@ -1,14 +0,0 @@
-# State Machine Button
-
-This example shows how to interact with a state machine, using various onMouse\* callbacks to trigger transations.
-
-## To Run
-
-This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
-
-To install and run:
-
-```
-npm install
-npm start
-```

examples/state-machine-button/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "state-machine-button",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/state-machine-button/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <title>Rive React - Basic with Hook</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

examples/state-machine-button/src/App.js

@@ -1,54 +0,0 @@
-import { useRive, useStateMachineInput } from "rive-react";
-
-function App() {
-  const { RiveComponent, rive } = useRive({
-    src: "like.riv",
-    stateMachines: "State Machine 1",
-    artboard: "New Artboard",
-    autoplay: true,
-  });
-
-  const hoverInput = useStateMachineInput(rive, "State Machine 1", "Hover");
-  const pressedInput = useStateMachineInput(rive, "State Machine 1", "Pressed");
-
-  function onMouseEnter() {
-    // state machine inputs will be null until the rive file has loaded, so we
-    // put these guards in place to avoid any errors.
-    if (hoverInput) {
-      hoverInput.value = true;
-    }
-  }
-
-  function onMouseLeave() {
-    if (hoverInput) {
-      hoverInput.value = false;
-    }
-  }
-
-  function onMouseDown() {
-    if (pressedInput) {
-      pressedInput.value = true;
-    }
-  }
-
-  function onMouseUp() {
-    if (pressedInput) {
-      pressedInput.value = false;
-    }
-  }
-
-  return (
-    // The animation will fit to the parent element, so we set a large height
-    // and width for this example.
-    <div style={{ height: "500px", width: "500px" }}>
-      <RiveComponent
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onMouseDown={onMouseDown}
-        onMouseUp={onMouseUp}
-      />
-    </div>
-  );
-}
-
-export default App;

examples/state-machine-button/src/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);

examples/stories/AnimationPlayback.stories.mdx

@@ -0,0 +1,137 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+
+import {useRive, useStateMachineInput} from '../../src';
+import {Button} from './components/Button';
+import './rive-overview.css';
+
+<Meta title="React Runtime/Playback Controls" />
+
+# Animation Playback
+
+When rendering Rives, you may want to control animation playback for certain scenarios. Animation playback allows you to programatically pause, stop, play, reset, and scrub animations as needed. You may find this useful for coordinating certain user interaction or other programatic cases to Rive animations.
+
+**Note:** Just like the Rive web runtime, you invoke playback methods on a `rive` instance. Because of this, you will need to use the `useRive` method to render Rives to your React applications, as it returns a `rive` instance for you to invoke controls on.
+
+## User event-driven playback
+
+You can control Rive animation playback with user interaction directly on the canvas, or even outside the canvas, as you'll see below.
+
+### Play/pause with hover
+
+The example below shows how to start with a Rive instance that does not autoplay initially, but plays whenever the cursor is hovered over the canvas, and returns to a paused state when the mouse leaves the canvas.
+
+<Canvas withSource="open">
+  <Story name="Play/pause with hover">
+    {() => {
+      const { rive, RiveComponent } = useRive({
+        src: 'poison-loader.riv',
+        autoplay: false,
+      });
+      function onMouseEnter() {
+        // rive will return as null until the file as fully loaded, so we include this
+        // guard to prevent any unwanted errors.
+        if (rive) {
+          rive.play();
+        }
+      }
+      function onMouseLeave() {
+        if (rive) {
+          rive.pause();
+        }
+      }
+      return (
+        <div className="center">
+          <RiveComponent
+            className="base-canvas-size"
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          />
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+<Canvas withSource="open">
+  <Story name="Play/pause with intersection observer">
+    {() => {
+      const ref = useRef(null);
+      const { rive, RiveComponent } = useRive({
+        src: 'baseball.riv',
+        autoplay: false,
+        animations: "Hover"
+      });
+      useEffect(() => {
+        const observer = new IntersectionObserver(
+          ([things]) => {
+            if (rive) {
+              if (things.isIntersecting) {
+                rive.play("Hover");
+              } else {
+                rive.pause("Hover");
+              }
+            }
+          },
+          {
+            rootMargin: '0px',
+            threshold: 0.1,
+          }
+        )
+        if (ref && ref.current) {
+          observer.observe(ref.current)
+        }
+      }, [rive]);
+      return (
+        <div ref={ref} className="center">
+          <RiveComponent className="base-canvas-size" />
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Play/pause with external elements
+
+This example shows how you can control Rive elements via user interaction outside of the canvas, such as other buttons. Here, the play/pause button will toggle whether or not to play or pause the Rive animation.
+
+<Canvas withSource="open">
+  <Story name="Play/pause with external elements">
+    {() => {
+      const [isPlaying, setIsPlaying] = useState(true);
+      const { rive, RiveComponent } = useRive({
+        src: 'truck.riv',
+        stateMachines: "drive",
+        artboard: 'Truck',
+        autoplay: true,
+      });
+      const togglePlaying = () => {
+        if (isPlaying) {
+          rive.pause();
+          setIsPlaying(false);
+        } else {
+          rive.play();
+          setIsPlaying(true);
+        }
+      };
+      return ((
+        <>
+          <div className="center">
+            <RiveComponent className="base-canvas-size" />
+            <Button onClick={togglePlaying}>{isPlaying ? 'Pause' : 'Play'}</Button>
+          </div>
+        </>
+      ));
+    }}
+  </Story>
+</Canvas>
+
+## Additional ways to control playback
+
+While user interaction is a common way to control animation playback for Rives, there are other ways to achieve the same means as well.
+
+### API-driven playback
+
+Another common way to control animation playback is through API responses. Imagine an API that you poll for loading progress of a task. Based on that progress response, you may play or stop a given animation. As long as you hold a reference to the `rive` instance returned from the `useRive` hook, you can invoke control methods on that instance in places such as callbacks from API responses. 
+

examples/stories/RiveOverview.stories.mdx

@@ -0,0 +1,112 @@
+<!-- RiveTestHook.stories.mdx -->
+
+import { useState } from 'react';
+
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+
+import RiveComponent, {useRive, useStateMachineInput} from '../../src';
+import {Button} from './components/Button';
+import './rive-overview.css';
+
+<Meta title="React Runtime/Overview" />
+
+# Rive React Runtime
+
+This is an examples/docs page for the official React runtime for Rive. Check out the various pages for how to use this SDK to incorporate Rive into your React-based web applications.
+
+Want to follow along with these examples? Check out the `examples/` folder in the [rive-react](https://github.com/rive-app/rive-react) project to find all these examples and `.riv` assets you can inspect in the Rive editor by dragging and dropping them into your Rive editor file browser.
+
+## What is Rive?
+
+<img className="rive-logo" src="rive_logo_black_2x.png" alt="Rive logo" />
+
+[Rive](https://rive.app/) is a real-time interactive design and animation tool. Use our collaborative editor to create motion graphics that respond to different states and user inputs. Then load your animations into apps, games, and websites with our lightweight open-source runtimes.
+
+## How to use Rive at runtime
+
+There's multiple ways to render Rive using the React runtime. See the associated code snippets that follow each example.
+
+### Rive component
+
+```tsx
+import RiveComponent from '@rive-app/react-canvas';
+```
+The React runtime exports a default React component you can insert as JSX. Under the hood, it renders a `<canvas>` element that runs the animation, and a wrapping `<div>` element that handles sizing of the canvas based on the parent that wraps the component.
+
+**When to use this**: Use this for simple rendering cases where you don't need to control playback or setup state machine inputs to advance state machines. It will simply autoplay the first animation it finds in the `.riv`, the animation name you provide it, or the state machine name if you provide one.
+
+**Note:** Style-specific props set onto the component will pass down to the wrapping `<div>` element, while most other props will be set onto the `<canvas>` element itself.
+
+<Canvas withSource="open">
+  <Story name="Rive Component">
+    {() => (
+      <div className="center">
+        <RiveComponent src="poison-loader.riv" className="base-canvas-size" />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+#### Props
+
+In addition to the props laid out below, the component accepts other props that can be set on the `<canvas>` element.
+
+<ArgsTable of={RiveComponent} />
+
+### useRive Hook
+
+```tsx
+import {useRive} from '@rive-app/react-canvas';
+```
+
+The runtime also exports a named `useRive` hook that allows for more control at Rive instantiation, since it passes back a `rive` object you can use to manipulate state machines, control playback, and more.
+
+**When to use this:** When you need to control your Rive animation in any aspect, such as controlling playback, using state machine inputs to advance state machines, add adding callbacks on certain Rive-specific events such as `onStateChange`, `onPause`, etc.
+<Canvas withSource="open">
+  <Story name="useRive Hook">
+    {() => {
+      const [isPlaying, setIsPlaying] = useState(true);
+      const [animationText, setAnimationText] = useState('');
+      const { rive, RiveComponent: RiveComponentPlayback } = useRive({
+        src: 'truck.riv',
+        stateMachines: "drive",
+        artboard: 'Truck',
+        autoplay: true,
+        onPause: () => {
+          setAnimationText('Animation paused!');
+        },
+        onPlay: () => {
+          setAnimationText('Animation is playing..');
+        },
+      });
+      const togglePlaying = () => {
+        if (isPlaying) {
+          rive.pause();
+          setIsPlaying(false);
+        } else {
+          rive.play();
+          setIsPlaying(true);
+        }
+      };
+      return ((
+        <>
+          <div className="center">
+            <RiveComponentPlayback className="base-canvas-size" />
+            <p>{animationText}</p>
+            <Button onClick={togglePlaying}>{isPlaying ? 'Pause' : 'Play'}</Button>
+          </div>
+        </>
+      ));
+    }}
+  </Story>
+</Canvas>
+
+#### useRive parameters
+
+```tsx
+useRive(params: UseRiveParameters, opts?: UseRiveOptions);
+```
+
+The parameters available to set on `useRive` can be found [here](https://github.com/rive-app/rive-wasm/blob/master/js/src/rive.ts#L843). These pass down to the web runtime `rive` instance created.
+
+Additionally, there are other options to set on `useRive` that can be found [here](https://github.com/rive-app/rive-react/blob/main/src/types.ts#L6).

examples/stories/StateMachineDocs.stories.mdx

@@ -0,0 +1,157 @@
+<!-- RiveTestHook.stories.mdx -->
+
+import { useState } from 'react';
+
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+
+import RiveComponent, {useRive, useStateMachineInput} from '../../src';
+import {Button} from './components/Button';
+import './rive-overview.css';
+
+<Meta title="React Runtime/State Machines" />
+
+# State Machine Usage
+
+Not familiar with Rive State Machines? Check out our [help docs](https://help.rive.app/editor/state-machine) on what these are first!
+
+The `useStateMachineInput` hook is a helper that makes grabbing references to state machine inputs easier to setup. This hook should be used along with the `useRive` hook, as you need to pass in the `rive` instance returned from `useRive`. See each of the examples below to see usage of the hook creating instance of three types of inputs:
+- Booleans
+- Numbers
+- Triggers
+
+## Boolean inputs
+
+Once you grab a reference to the state machine input, you can get/set the value of the input via the `.value` property.
+
+**Note:** The input instance value itself is not a stateful React variable, therefore, any logic in the component dependent on an input value changing will not trigger a re-render like a React stateful variable change would. You can achieve this effect by keeping reference to the state machine input value inside a React state variable. See the example below for this pattern.
+
+<Canvas withSource="open">
+  <Story name="Boolean input">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine 1';
+      const ON_HOVER_INPUT_NAME = 'Hover';
+      const ON_PRESSED_INPUT_NAME = 'Pressed';
+      const { rive, RiveComponent: RiveComponentTouch } = useRive({
+        src: 'like.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        artboard: 'New Artboard',
+        autoplay: true,
+      });
+      const [isHovered, setIsHovered] = useState(false);
+      // Both onHoverInput and onPressedInput are boolean inputs. To transition
+      // states we need to set the value property to true or false.
+      const onPressedInput = useStateMachineInput(
+        rive,
+        STATE_MACHINE_NAME,
+        ON_PRESSED_INPUT_NAME
+      );
+      const onHoverInput = useStateMachineInput(
+        rive,
+        STATE_MACHINE_NAME,
+        ON_HOVER_INPUT_NAME
+      );
+      function onMouseDown() {
+        onPressedInput.value = true;
+      }
+      function onMouseUp() {
+        onPressedInput.value = false;
+      }
+      function onMouseEnter() {
+        onHoverInput.value = true;
+        setIsHovered(true);
+      }
+      function onMouseLeave() {
+        onHoverInput.value = false;
+        setIsHovered(false);
+      }
+      return (
+        <>
+          <div className="center">
+            <RiveComponentTouch
+              className="base-canvas-size"
+              onMouseEnter={onMouseEnter}
+              onMouseLeave={onMouseLeave}
+              onMouseDown={onMouseDown}
+              onMouseUp={onMouseUp}
+            />
+            <p>Hover and click on the canvas</p>
+            <p>Is cursor hovering? {isHovered ? 'Yes' : 'No'}</p>
+          </div>
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Number inputs
+
+Once you grab a reference to the state machine input, you can get/set the value of the input via the `.value` property.
+
+<Canvas withSource="open">
+  <Story name="Number input">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine ';
+      const INPUT_NAME = 'Level';
+      const { rive, RiveComponent: RiveComponentTouch } = useRive({
+        src: 'skills.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        artboard: 'New Artboard',
+        autoplay: true,
+      });
+      // levelInput is a number state machine input. To transition the state machine,
+      // we need to set the value to a number. For this state machine input, we need
+      // to set to 0, 1 or 2 for a state transition to occur.
+      const levelInput = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME);
+      return (
+        // The animation will fit to the parent element, so we set a large height
+        // and width for this example.
+        <div className="center">
+          <RiveComponentTouch className="large-canvas-size" />
+          <div className="btn-group">
+            Choose a level:
+            <Button onClick={() => (levelInput.value = 0)}>0</Button>
+            <Button onClick={() => (levelInput.value = 1)}>1</Button>
+            <Button onClick={() => (levelInput.value = 2)}>2</Button>
+          </div>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Trigger inputs
+
+Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigger input.
+
+<Canvas withSource="open">
+  <Story name="Trigger input">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine 1';
+      const INPUT_NAME = 'Pressed';
+      const { rive, RiveComponent: RiveComponentTouch } = useRive({
+        src: 'piggy-bank.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        artboard: 'New Artboard',
+        autoplay: true,
+      });
+      // pressedInput in a trigger state machine input. To transition the state
+      // we need to call the `fire()` method on the input.
+      const pressedInput = useStateMachineInput(
+        rive,
+        STATE_MACHINE_NAME,
+        INPUT_NAME
+      );
+      // The animation will fit to the parent element, so we set a large height
+      // and width for this example.
+      return (
+        <div className="center">
+          <RiveComponentTouch
+            className="base-canvas-size"
+            onClick={() => pressedInput.fire()}
+          />
+          <p>Click on the canvas</p>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>