chore: release 3.0.15

Patch: Bump js runtime dependencies for nested artboard display patch
chore: release 3.0.14
2026-03-13 08:22:30 +08:00 · 2022-06-28 14:41:23 +00:00 · 2022-06-28 09:37:52 -05:00 · 2022-06-28 01:26:01 +00:00 · 2022-06-27 20:22:16 -05:00 · 2022-06-27 23:51:09 +00:00
136 changed files with 2151 additions and 20417 deletions
--- a/.eslintrc.js
+++ b/.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'
+    }
+  }
+};
--- a/.github/workflows/publish.yml
+++ b/.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
--- a/.github/workflows/storybook.yml
+++ b/.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
--- a/.github/workflows/tests.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ dist
 .idea
 .vscode
 examples/**/package-lock.json
+package-lock.json
--- a/.storybook/main.js
+++ b/.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'],
+}
--- a/.storybook/preview-head.html
+++ b/.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>
--- a/.storybook/preview.js
+++ b/.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);
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,9 +4,169 @@ 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).

-#### [v0.0.26](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.26)
+#### [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)

--- a/README.md
+++ b/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 = {
@@ -78,7 +101,7 @@ export default Example;

 #### 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.
@@ -106,13 +129,14 @@ export default Example;

 - `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';
@@ -144,6 +168,7 @@ See our [examples](examples) folder for working examples of [Boolean](examples/s
 - `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

@@ -151,4 +176,45 @@ A Rive.js `stateMachineInput` object.

 ## Examples

-The [examples](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.
--- a/docs/0.233bd6e2.iframe.bundle.js
+++ b/docs/0.233bd6e2.iframe.bundle.js
--- a/docs/0.233bd6e2.iframe.bundle.js.LICENSE.txt
+++ b/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
+ */
--- a/docs/0.233bd6e2.iframe.bundle.js.map
+++ b/docs/0.233bd6e2.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"0.233bd6e2.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
--- a/docs/0.f3c14cfa225a4c40c8ba.manager.bundle.js
+++ b/docs/0.f3c14cfa225a4c40c8ba.manager.bundle.js
--- a/docs/0.f3c14cfa225a4c40c8ba.manager.bundle.js.LICENSE.txt
+++ b/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
+ */
--- a/docs/1.44288d676d5217e7dfaf.manager.bundle.js
+++ b/docs/1.44288d676d5217e7dfaf.manager.bundle.js
--- a/docs/1.7e5fbb8d.iframe.bundle.js
+++ b/docs/1.7e5fbb8d.iframe.bundle.js
--- a/docs/2.89943a03.iframe.bundle.js
+++ b/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"}}]);
--- a/docs/5.c79123fa7941ae9f0387.manager.bundle.js
+++ b/docs/5.c79123fa7941ae9f0387.manager.bundle.js
--- a/docs/5.c79123fa7941ae9f0387.manager.bundle.js.LICENSE.txt
+++ b/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
+   */
--- a/docs/6.2d406554b9c913afb448.manager.bundle.js
+++ b/docs/6.2d406554b9c913afb448.manager.bundle.js
--- a/docs/6.e2fef599.iframe.bundle.js
+++ b/docs/6.e2fef599.iframe.bundle.js
--- a/docs/6.e2fef599.iframe.bundle.js.LICENSE.txt
+++ b/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
+   */
--- a/docs/6.e2fef599.iframe.bundle.js.map
+++ b/docs/6.e2fef599.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"6.e2fef599.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
--- a/docs/7.15129502.iframe.bundle.js
+++ b/docs/7.15129502.iframe.bundle.js
--- a/docs/7.480c60c60f21bf435941.manager.bundle.js
+++ b/docs/7.480c60c60f21bf435941.manager.bundle.js
--- a/docs/8.6c22300703a58b9d6b46.manager.bundle.js
+++ b/docs/8.6c22300703a58b9d6b46.manager.bundle.js
--- a/docs/8.6c22300703a58b9d6b46.manager.bundle.js.LICENSE.txt
+++ b/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
+ */
--- a/docs/8.b569e86b.iframe.bundle.js
+++ b/docs/8.b569e86b.iframe.bundle.js
--- a/docs/9.1e553722.iframe.bundle.js
+++ b/docs/9.1e553722.iframe.bundle.js
--- a/docs/9.1e553722.iframe.bundle.js.LICENSE.txt
+++ b/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
+ */
--- a/docs/9.1e553722.iframe.bundle.js.map
+++ b/docs/9.1e553722.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"9.1e553722.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
--- a/docs/9.5e61b7f1b71ff49bf163.manager.bundle.js
+++ b/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)}))}}}]);
--- a/docs/baseball.riv
+++ b/docs/baseball.riv
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/iframe.html
+++ b/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>
--- a/docs/index.html
+++ b/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>
--- a/examples/state-machine-boolean-input/public/like.riv
+++ b/examples/state-machine-boolean-input/public/like.riv
--- a/docs/main.19f2d967.iframe.bundle.js
+++ b/docs/main.19f2d967.iframe.bundle.js
--- a/docs/main.5ff01ce9b2f269a4e646.manager.bundle.js
+++ b/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]]]);
--- a/examples/state-machine-trigger-input/public/piggy-bank.riv
+++ b/examples/state-machine-trigger-input/public/piggy-bank.riv
--- a/examples/basic-typescript/public/poison-loader.riv
+++ b/examples/basic-typescript/public/poison-loader.riv
--- a/docs/project.json
+++ b/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"}}}
--- a/docs/rive_logo_black_2x.png
+++ b/docs/rive_logo_black_2x.png
--- a/docs/runtime~main.8ab76b1af44e6332b6fc.manager.bundle.js
+++ b/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()}([]);
--- a/docs/runtime~main.e7f32bf8.iframe.bundle.js
+++ b/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()}([]);
--- a/examples/state-machine-number-input/public/skills.riv
+++ b/examples/state-machine-number-input/public/skills.riv
--- a/docs/truck.riv
+++ b/docs/truck.riv
--- a/docs/vendors~main.16f7136c.iframe.bundle.js
+++ b/docs/vendors~main.16f7136c.iframe.bundle.js
--- a/docs/vendors~main.16f7136c.iframe.bundle.js.LICENSE.txt
+++ b/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.
--- a/docs/vendors~main.16f7136c.iframe.bundle.js.map
+++ b/docs/vendors~main.16f7136c.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"vendors~main.16f7136c.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
--- a/docs/vendors~main.59133444ce5b3a186e53.manager.bundle.js
+++ b/docs/vendors~main.59133444ce5b3a186e53.manager.bundle.js
--- a/docs/vendors~main.59133444ce5b3a186e53.manager.bundle.js.LICENSE.txt
+++ b/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.
+ */
--- a/examples/basic-typescript/.gitignore
+++ b/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*
--- a/examples/basic-typescript/README.md
+++ b/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
-```
--- a/examples/basic-typescript/package.json
+++ b/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": "latest",
-    "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"
-    ]
-  }
-}
--- a/examples/basic-typescript/public/index.html
+++ b/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>
--- a/examples/basic-typescript/src/App.tsx
+++ b/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;
--- a/examples/basic-typescript/src/index.tsx
+++ b/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')
-);
--- a/examples/basic-typescript/src/react-app-env.d.ts
+++ b/examples/basic-typescript/src/react-app-env.d.ts
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
--- a/examples/basic-typescript/tsconfig.json
+++ b/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"
-  ]
-}
--- a/examples/basic-with-hook/README.md
+++ b/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
-```
--- a/examples/basic-with-hook/package.json
+++ b/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": "latest",
-    "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"
-    ]
-  }
-}
--- a/examples/basic-with-hook/public/index.html
+++ b/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>
--- a/examples/basic-with-hook/src/App.js
+++ b/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;
--- a/examples/basic-with-hook/src/index.js
+++ b/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')
-);
--- a/examples/basic/README.md
+++ b/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
-```
--- a/examples/basic/package.json
+++ b/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": "file:../../node_modules/react",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "file:../..",
-    "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"
-    ]
-  }
-}
--- a/examples/basic/public/flower.riv
+++ b/examples/basic/public/flower.riv
--- a/examples/basic/public/index.html
+++ b/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>
--- a/examples/basic/public/poison-loader.riv
+++ b/examples/basic/public/poison-loader.riv
--- a/examples/basic/src/App.js
+++ b/examples/basic/src/App.js
@@ -1,14 +0,0 @@
-import SizeExample from './SizeExample';
-import FlowerExample from './FlowerExample';
-
-function App() {
-  return (
-    // The animation will fit to the parent element.
-    <>
-      <SizeExample />
-      <FlowerExample />
-    </>
-  );
-}
-
-export default App;
--- a/examples/basic/src/FlowerExample.js
+++ b/examples/basic/src/FlowerExample.js
@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRive } from 'rive-react';
-
-function FlowerExample() {
-  const { rive, canvas, RiveComponent } = useRive({
-    src: 'flower.riv',
-    artboard: 'Motion',
-    animations: 'Animation 1',
-    autoplay: true,
-  });
-
-  useEffect(() => {
-    console.log('change');
-    if (canvas) {
-      canvas.width = 200;
-      canvas.height = 200;
-    }
-  }, [canvas]);
-
-  function onLargerClick() {
-    if (rive && canvas) {
-      canvas.width = canvas.width + 50;
-      canvas.height = canvas.height + 50;
-      rive.resizeToCanvas();
-    }
-  }
-
-  function onSmallerClick() {
-    if (rive && canvas && canvas.width > 0) {
-      canvas.width = canvas.width - 50;
-      canvas.height = canvas.height - 50;
-      rive.resizeToCanvas();
-    }
-  }
-
-  return (
-    // The animation will fit to the parent element.
-    <>
-      <button onClick={onLargerClick}>Larger</button>
-      <button onClick={onSmallerClick}>Smaller</button>
-      <div>
-        <RiveComponent />
-      </div>
-    </>
-  );
-}
-
-export default FlowerExample;
--- a/examples/basic/src/SizeExample.js
+++ b/examples/basic/src/SizeExample.js
@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRive } from 'rive-react';
-
-function SizeExample() {
-  const { rive, canvas, RiveComponent } = useRive({
-    src: 'poison-loader.riv',
-    // artboard: 'Motion',
-    // animations: 'Animation 1',
-    autoplay: true,
-  });
-
-  useEffect(() => {
-    console.log('change');
-    if (canvas) {
-      canvas.width = 200;
-      canvas.height = 200;
-    }
-  }, [canvas]);
-
-  function onLargerClick() {
-    if (rive && canvas) {
-      canvas.width = canvas.width + 50;
-      canvas.height = canvas.height + 50;
-      rive.resizeToCanvas();
-    }
-  }
-
-  function onSmallerClick() {
-    if (rive && canvas && canvas.width > 0) {
-      canvas.width = canvas.width - 50;
-      canvas.height = canvas.height - 50;
-      rive.resizeToCanvas();
-    }
-  }
-
-  return (
-    // The animation will fit to the parent element.
-    <>
-      <button onClick={onLargerClick}>Larger</button>
-      <button onClick={onSmallerClick}>Smaller</button>
-      <div>
-        <RiveComponent />
-      </div>
-    </>
-  );
-}
-
-export default SizeExample;
--- a/examples/basic/src/index.js
+++ b/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')
-);
--- a/examples/play-on-hover/README.md
+++ b/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
-```
--- a/examples/play-on-hover/package.json
+++ b/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": "latest",
-    "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"
-    ]
-  }
-}
--- a/examples/play-on-hover/public/index.html
+++ b/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>
--- a/examples/play-on-hover/public/poison-loader.riv
+++ b/examples/play-on-hover/public/poison-loader.riv
--- a/examples/play-on-hover/src/App.js
+++ b/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;
--- a/examples/play-on-hover/src/index.js
+++ b/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')
-);
--- a/examples/play-pause-button/README.md
+++ b/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
-```
--- a/examples/play-pause-button/package.json
+++ b/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": "latest",
-    "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"
-    ]
-  }
-}
--- a/examples/play-pause-button/public/index.html
+++ b/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 - Play/Pause Button</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
--- a/examples/play-pause-button/public/poison-loader.riv
+++ b/examples/play-pause-button/public/poison-loader.riv
--- a/examples/play-pause-button/src/App.js
+++ b/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;
--- a/examples/play-pause-button/src/index.js
+++ b/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')
-);
--- a/examples/state-machine-boolean-input/README.md
+++ b/examples/state-machine-boolean-input/README.md
@@ -1,14 +0,0 @@
-# State Machine Boolean Input
-
-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
-```
--- a/examples/state-machine-boolean-input/package.json
+++ b/examples/state-machine-boolean-input/package.json
@@ -1,36 +0,0 @@
-{
-  "name": "state-machine-boolean-input",
-  "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": "latest",
-    "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"
-    ]
-  }
-}
--- a/examples/state-machine-boolean-input/public/index.html
+++ b/examples/state-machine-boolean-input/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 - State Machine Boolean Input</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
--- a/examples/state-machine-boolean-input/src/App.js
+++ b/examples/state-machine-boolean-input/src/App.js
@@ -1,58 +0,0 @@
-import { useRive, useStateMachineInput } from 'rive-react';
-
-function App() {
-  const STATE_MACHINE_NAME = 'State Machine 1';
-  const ON_HOVER_INPUT_NAME = 'Hover';
-  const ON_PRESSED_INPUT_NAME = 'Pressed';
-
-  const { RiveComponent, rive } = useRive({
-    src: 'like.riv',
-    stateMachines: STATE_MACHINE_NAME,
-    artboard: 'New Artboard',
-    autoplay: true,
-  });
-
-  // Both onHoverInput and onPressedInput are boolean inputs. To transition
-  // states we need to set the value property to true or false.
-  const onHoverInput = useStateMachineInput(
-    rive,
-    STATE_MACHINE_NAME,
-    ON_HOVER_INPUT_NAME
-  );
-  const onPressedInput = useStateMachineInput(
-    rive,
-    STATE_MACHINE_NAME,
-    ON_PRESSED_INPUT_NAME
-  );
-
-  function onMouseEnter() {
-    onHoverInput.value = true;
-  }
-
-  function onMouseLeave() {
-    onHoverInput.value = false;
-  }
-
-  function onMouseDown() {
-    onPressedInput.value = true;
-  }
-
-  function onMouseUp() {
-    onPressedInput.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;
--- a/examples/state-machine-boolean-input/src/index.js
+++ b/examples/state-machine-boolean-input/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')
-);
--- a/examples/state-machine-number-input/README.md
+++ b/examples/state-machine-number-input/README.md
@@ -1,14 +0,0 @@
-# State Machine Number Input
-
-This example shows how to interact with a state machine with number inputs. We trigger the transistions by changing the value of a number input.
-
-## 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
-```
--- a/examples/state-machine-number-input/package.json
+++ b/examples/state-machine-number-input/package.json
@@ -1,36 +0,0 @@
-{
-  "name": "state-machine-number-input",
-  "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": "latest",
-    "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"
-    ]
-  }
-}
--- a/examples/state-machine-number-input/public/index.html
+++ b/examples/state-machine-number-input/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 - State Machine Number Input</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
--- a/examples/state-machine-number-input/src/App.js
+++ b/examples/state-machine-number-input/src/App.js
@@ -1,34 +0,0 @@
-import { useRive, useStateMachineInput } from 'rive-react';
-
-function App() {
-  const STATE_MACHINE_NAME = 'State Machine ';
-  const INPUT_NAME = 'Level';
-
-  const { RiveComponent, rive } = 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 style={{ height: '500px', width: '500px' }}>
-      <RiveComponent />
-      <div>
-        Level:
-        <button onClick={() => (levelInput.value = 0)}>0</button>
-        <button onClick={() => (levelInput.value = 1)}>1</button>
-        <button onClick={() => (levelInput.value = 2)}>2</button>
-      </div>
-    </div>
-  );
-}
-
-export default App;
--- a/examples/state-machine-number-input/src/index.js
+++ b/examples/state-machine-number-input/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')
-);
--- a/examples/state-machine-trigger-input/README.md
+++ b/examples/state-machine-trigger-input/README.md
@@ -1,14 +0,0 @@
-# State Machine Trigger Input
-
-This example shows how to interact with a state machine with a trigger input. We call the `fire()` function on the state machine input to transition the state when the animation is clicked.
-
-## 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
-```
--- a/examples/state-machine-trigger-input/package.json
+++ b/examples/state-machine-trigger-input/package.json
@@ -1,36 +0,0 @@
-{
-  "name": "state-machine-trigger-input",
-  "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": "latest",
-    "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"
-    ]
-  }
-}
--- a/examples/state-machine-trigger-input/public/index.html
+++ b/examples/state-machine-trigger-input/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 - State Machine Trigger Input</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
zplata	8175c4a4d4	chore: release 3.0.15	2022-06-28 14:41:23 +00:00
Zach Plata	795ee53340	Patch: Bump js runtime dependencies for nested artboard display patch	2022-06-28 09:37:52 -05:00
zplata	04353db432	chore: release 3.0.14	2022-06-28 01:26:01 +00:00
Zach Plata	1f0e511f6e	Fix: Bump version because of race condition again	2022-06-27 20:22:16 -05:00
zplata	7aee5cfab4	Deploying to main from @ `3477afdef1` 🚀	2022-06-27 23:51:09 +00:00
Zach Plata	3477afdef1	Fix: Intake JS runtime patches for starting animation frames	2022-06-27 18:48:51 -05:00
zplata	8b43a82c5f	chore: release 3.0.12	2022-06-22 21:31:48 +00:00
Zach Plata	bd49e6a4ee	Fix: Bump cpp to get nested artboard opacity fix and fill rule patch	2022-06-22 16:27:46 -05:00
Chris Dalton	1dbb9cd38d	Bump @rive-app/canvas to take the fillRule bug fix https://github.com/rive-app/rive/issues/3816	2022-06-22 13:37:27 -06:00
zplata	aee7407f79	chore: release 3.0.11	2022-06-22 17:01:51 +00:00
Zach Plata	b48de9db84	Docs: Code snippets update to use new React package structure	2022-06-22 11:58:30 -05:00
avivian	6772f166b7	chore: release 3.0.10	2022-06-20 10:13:49 +00:00
Arthur Vivian	3a0a959383	Maint: fix package version number to allow release	2022-06-20 11:09:52 +01:00
Arthur Vivian	314d7c19cc	Maint: roll canvas and webgl dependencies to include updates for rounded corners	2022-06-20 10:54:41 +01:00
zplata	802648eda8	Deploying to main from @ `5ad5a957a6` 🚀	2022-06-09 18:00:14 +00:00
Zach Plata	5ad5a957a6	Maint: Update docs for storybook link	2022-06-09 12:57:34 -05:00
zplata	414d6f895a	chore: release 3.0.8	2022-06-09 16:00:03 +00:00
Zach Plata	38625a00c3	Maint: Add GH workflow for deploying storybook to Github Pages	2022-06-09 10:55:55 -05:00
zplata	bad688dfa3	chore: release 3.0.7	2022-06-08 14:51:07 +00:00
Zach Plata	ec230faa73	Feat: Move existing examples into Storybook and add documentation	2022-06-08 09:47:41 -05:00
zplata	90c6d1edb1	chore: release 3.0.6	2022-06-06 21:37:22 +00:00
Zach Plata	0480dc92c8	Maint: Roll canvas and webgl dependencies forward to support nested state machines	2022-06-06 16:35:08 -05:00
zplata	de24fa5641	chore: release 3.0.5	2022-05-26 19:54:00 +00:00
Zach Plata	1a49e89c33	Fix: A recent Bunchee patch version kind of breaks npm run build	2022-05-26 14:51:28 -05:00
Zach Plata	805afd5dff	Maint: Bump wasm for another listener patch	2022-05-26 11:24:56 -05:00
Zach Plata	84d9730767	Feat: Add stateMachines param to the default Rive component	2022-05-25 10:27:13 -05:00
zplata	9abee34d12	chore: release 3.0.4	2022-05-23 21:24:05 +00:00
Zach Plata	12801b10cc	Maint: Bump rive-wasm dependency for listener patches	2022-05-23 16:21:58 -05:00
zplata	da11387558	chore: release 3.0.3	2022-05-17 15:23:15 +00:00
Zach Plata	3902948a2e	Feat: Bump wasm and add examples to support touch feature	2022-05-17 10:20:56 -05:00
zplata	21a17ed40e	chore: release 3.0.2	2022-05-17 14:10:32 +00:00
Zach Plata	f0e70924ec	Maint: Bump wasm dependencies	2022-05-17 09:08:25 -05:00
zplata	f4eccbe2ce	chore: release 3.0.1	2022-04-26 19:25:32 +00:00
Zach Plata	83c81b49c5	Maint: Bump rive wasm to include fps counter API and take off major tag	2022-04-26 12:23:17 -07:00
avivian	5de40fad5b	chore: release 3.0.0	2022-04-26 15:05:29 +00:00
Arthur Vivian	aab811b975	Fix animation playing with autoplay false when animation name passed	2022-04-26 16:03:06 +01:00
zplata	965507ac34	chore: release 2.0.0	2022-04-22 22:04:35 +00:00
Zach Plata	74b791ffa4	Fix: Authenticate registry before doing npm release dryrun	2022-04-22 15:02:27 -07:00
Zach Plata	2853851d52	Fix: Do npm install instead	2022-04-22 14:54:53 -07:00
Zach Plata	4f37bbdb76	fix up test	2022-04-22 14:48:17 -07:00
Zach Plata	39f1990eac	Maint: Bump wasm dependencies and add major flags for the publish script	2022-04-22 14:48:17 -07:00
Zach Plata	bb7d3e4e6c	Feat: Setup workflow to npm publish 2 new rive-react packages	2022-04-22 14:48:17 -07:00
Zach Plata	7f2bd76eb3	Fix up test	2022-04-22 14:48:17 -07:00
Zach Plata	5c0b9cd613	Breaking: Spread non-style props onto canvas element instead of containing div	2022-04-22 14:48:17 -07:00
Zach Plata	92dd811948	fix version compare function	2022-04-22 14:48:17 -07:00
Zach Plata	4429be44f2	Change rive-react-* references to be the shortened namespace-named convention	2022-04-22 14:48:17 -07:00
Zach Plata	9398e0d74e	Update tests	2022-04-22 14:48:17 -07:00
Zach Plata	563dca3608	Move to using @rive-app/canvas as the backing renderer and update scripts accordingly.	2022-04-22 14:48:17 -07:00
Zach Plata	1da73aac05	Only run the publish job on PR merges to main	2022-04-22 14:48:17 -07:00
Zach Plata	5c4336b84f	Update: Adding build scripts to prepare for split of rive-react into 2 package derivatives for canvas and webgl	2022-04-22 14:48:17 -07:00
zplata	6e72ed5271	chore: release 1.0.7	2022-04-20 15:28:24 +00:00
Zach Plata	464fa97c20	Maint: Allow peer dep React to use v18.0+	2022-04-20 08:27:04 -07:00
zplata	ac01b7ec69	chore: release 1.0.6	2022-04-14 17:00:16 +00:00
Zach Plata	cd9baef250	Maint: Bump webgl dependency up to 1.0.39	2022-04-14 09:58:59 -07:00
zplata	3a2ed32856	chore: release 1.0.5	2022-04-11 17:04:44 +00:00
Zach Plata	d35f5b53c5	update readme	2022-04-11 10:03:36 -07:00
Zach Plata	73b57d0b81	Update readme	2022-04-11 10:03:36 -07:00
Zach Plata	0a18b522cc	Feat: Add extra param to useStateMachineInput to set an initial value on the input when its loaded	2022-04-11 10:03:36 -07:00
avivian	5e34e13563	chore: release 1.0.4	2022-04-06 15:58:19 +00:00
Arthur Vivian	c3f138014d	Add test for animations change on param update	2022-04-06 16:57:03 +01:00
Arthur Vivian	b13413ba8b	Update animations on param change	2022-04-06 16:57:03 +01:00
zplata	881e38fe6a	chore: release 1.0.3	2022-03-31 16:55:27 +00:00
Zach Plata	38c85624a7	Maint: Bump rive-cpp to help fix safari and performance issues	2022-03-31 09:54:16 -07:00
zplata	a9732e141e	chore: release 1.0.2	2022-03-28 16:42:52 +00:00
Zach Plata	59edf6f67e	Patch: Bump rive-cpp to fix DAG issue	2022-03-28 09:41:33 -07:00
zplata	4be496cc15	chore: release 1.0.1	2022-03-24 03:38:43 +00:00
Zach Plata	4c9de18b1c	Chore: Bump webgl and remove major flag from release-it command	2022-03-23 20:37:35 -07:00
zplata	c688b9f17a	chore: release 1.0.0	2022-03-23 20:13:43 +00:00
Zach Plata	fcfe3cf6cf	bump webgl	2022-03-23 13:12:26 -07:00
Zach Plata	8ce856270f	Put back the release steps in the publish workflow and add major flag temporarily	2022-03-23 13:12:26 -07:00
Zach Plata	1e1cabd057	Breaking: Switch from using the canvas renderer as default to the webgl renderer	2022-03-23 13:12:26 -07:00
avivian	0be3bc7e93	chore: release 0.0.31	2022-01-18 19:21:22 +00:00
Arthur Vivian	48af4b00ad	Update @rive-app/canvas to 1.0.18 to fix playback lag when animations are left idle	2022-01-18 19:19:30 +00:00
avivian	fe44977e47	chore: release 0.0.30	2022-01-10 13:18:41 +00:00
Arthur Vivian	24d9e871d6	Update rive/canvas to with fixes for image clipping	2022-01-10 13:17:13 +00:00
avivian	8b8d6bc44b	chore: release 0.0.29	2021-12-16 19:36:04 +00:00
Arthur Vivian	956b76d01c	Add offscreencanvas types	2021-12-16 19:34:58 +00:00
Arthur Vivian	2517efaebd	Bump rive-app/canvas to 1.0.8	2021-12-16 19:34:58 +00:00
avivian	019cadf5f2	chore: release 0.0.28	2021-12-16 15:16:59 +00:00
Arthur Vivian	e599b1a38c	Use @rive-app/canvas directly to fix path issues in downstream libs	2021-12-16 15:15:36 +00:00
avivian	78d3118dcc	chore: release 0.0.27	2021-12-16 14:31:01 +00:00
Arthur Vivian	536c8325f2	Fix lint error during build	2021-12-16 14:29:43 +00:00
Arthur Vivian	9e65654274	Update @types/jest	2021-12-16 12:59:11 +00:00
Arthur Vivian	75420d2f1d	Remove lock file	2021-12-16 12:59:11 +00:00
Arthur Vivian	e6b036ee17	Use @rive-app/canvas as underlying repo	2021-12-16 12:59:11 +00:00
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"0.233bd6e2.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}`
				`@@ -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"}}]);
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"6.e2fef599.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}`
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"9.1e553722.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}`
				`@@ -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]]]);`
				`@@ -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"}}}
				`@@ -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()}([]);
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"vendors~main.16f7136c.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}`