Add example of webgl issues

2026-03-13 08:22:30 +08:00 · 2021-12-15 17:41:28 +00:00
154 changed files with 20741 additions and 4546 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,11 +3,7 @@ module.exports = {
    browser: true,
    es2021: true,
  },
-  extends: [
-    'plugin:react/recommended',
-    'prettier',
-    'plugin:storybook/recommended',
-  ],
+  extends: ['plugin:react/recommended', 'prettier'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
@@ -16,23 +12,11 @@ module.exports = {
    ecmaVersion: 12,
    sourceType: 'module',
  },
-  plugins: ['@typescript-eslint', 'prettier', 'react-hooks'],
+  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'],
-    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
-    'react-hooks/exhaustive-deps': 'off', // Checks effect dependencies
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
  },
 };
--- a/.github/workflows/add_to_project.yml
+++ b/.github/workflows/add_to_project.yml
@@ -1,26 +0,0 @@
-name: Adds all new issues to project board
-
-on:
-  issues:
-    types:
-      - opened
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.5.0
-        with:
-          project-url: https://github.com/orgs/rive-app/projects/12/views/1
-          github-token: ${{ secrets.ADD_TO_PROJECT_ACTION }}
-          
-      - uses: actions/github-script@v6
-        with:
-          script: |
-            github.rest.issues.addLabels({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              labels: ["triage"]
-            })
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -1,58 +1,35 @@
 name: Publish to NPM
 on:
-  workflow_dispatch:
-    inputs:
-      major:
-        description: 'Major'
-        type: boolean
-        default: false
-      minor:
-        description: 'Minor'
-        type: boolean
-        default: false
+  pull_request:
+    types: [closed]
+    branches:
+      - main
 jobs:
-  publish_job:
+  merge_job:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - name: Setup 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 }}
      - uses: actions/setup-node@v2
        with:
-          node-version: '16.x'
+          node-version: '12.x'
          registry-url: 'https://registry.npmjs.org'
      - name: Install Modules
-        run: npm install
+        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
-      - if: ${{ inputs.major == true }}
-        name: Major Release - Bump version number, update changelog, push and tag
-        run: npm run release:major
+      - name: Build
+        run: npm run build
+      - 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
        env:
          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-          PAT_GITHUB: ${{ secrets.PAT_GITHUB }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - if: ${{inputs.major == false && inputs.minor == true}}
-        name: Minor release - Bump version number, update changelog, push and tag
-        run: npm run release:minor
-        env:
-          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-          PAT_GITHUB: ${{ secrets.PAT_GITHUB }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - if: ${{inputs.major == false && inputs.minor == false}}
-        name: Patch release - Bump version number, update changelog, push and tag
-        run: npm run release:patch
-        env:
-          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-          PAT_GITHUB: ${{ secrets.PAT_GITHUB }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npm run release
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -1,30 +0,0 @@
-name: Deploy Storybook
-on:
-  # Testing to see if this job is causing the race condition
-  workflow_dispatch:
-  # 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 install
+        run: npm ci
      - name: Run type check
        run: npm run types:check
      - name: Run Linter
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,3 @@ dist
 .idea
 .vscode
 examples/**/package-lock.json
-package-lock.json
--- a/.release-it.json
+++ b/.release-it.json
@@ -1,7 +1,5 @@
 {
  "git": {
-    "addUntrackedFiles": true,
-    "requireCleanWorkingDir": false,
    "commitMessage": "chore: release ${version}",
    "tagName": "v${version}",
    "changelog": "npx auto-changelog --stdout --commit-limit false --unreleased --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs"
@@ -14,12 +12,6 @@
    "releaseName": "${version}"
  },
  "hooks": {
-    "after:version:bump": [
-      "npm run build",
-      "npm run setup-builds",
-      "npm run setup-packages",
-      "npx auto-changelog -p",
-      "npm run publish:all"
-    ]
+    "after:bump": ["npx auto-changelog -p", "git add ./CHANGELOG.md"]
  }
 }
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,13 +0,0 @@
-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
@@ -1,17 +0,0 @@
-<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
@@ -1,39 +0,0 @@
-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
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,74 +0,0 @@
-# Contributing
-
-We love contributions! If you want to run the project locally to test out changes, run the examples, or just see how things work under the hood, read on below.
-
-## Local development
-
-This runtime consumes specific tied-down versions of the [JS/WASM runtime](https://github.com/rive-app/rive-wasm) to have better control over changes that occur in that downstream runtime.
-
-### Installation
-
-1. Clone the project down
-2. Run `npm i` in the shell/terminal at the base of the project to install the dependencies needed for the project
-
-### Local dev server
-
-To start the local dev server to reflect any changes made to the core `src/` files, run the following in a terminal tab:
-
-```
-npm run dev
-```
-
-### Running the example storybook locally
-
-We use Storybook to deploy our examples out onto a public-facing page for folks to view and see code examples for. It also serves as the place we'll include any example suites. These story files are stored in `examples/**.stories.mdx`. `.mdx` is an extension Storybook supports to support both `jsx` (React files) and `md` (markdown) in one file.
-
-To run Storybook, run the following command in the terminal:
-
-```
-npm run storybook
-```
-
-Any changes made in any files should reflect automatically, including the `.mdx` example files, and `src/` files.
-
-### Testing
-
-We also have a suite of unit tests against the high-level component and various hooks exported in the `test/` folder. When adding new components, changing the API, or underlying functionality, make sure to add a test here!
-
-To run the test suite:
-
-```
-npm test
-```
-
-## Making changes
-
-When you're ready to make changes, push up to a feature branch off of the `main` branch. Create a pull request to this repository in Github. When creating commit messages, please be as descriptive as possible to the changes being made.
-
-For example, if the change is simply a bug fix or patch change:
-
-```
-git commit -m "Fix: Fixing a return type from useRive"
-```
-
-Or if it's simply a docs change:
-
-```
-git commit -m "Docs: Adding a new link for another example page"
-```
-
-For minor/major version releases, also ensure you preface commit messages with:
-
-```
-git commit -m "Major: Restructuring the useRive API with new parameters"
-```
-
-These messages help make the changelog clear as to what changes are made for future devs to see.
-
-When pull requests are merged, the runtime will automatically deploy the next release version. By default, patch versions are published. If you want to set the next version as a minor/major version to be released, you have to manually update the `package.json` file at the root of the project to the verison you want it to.
-
-You can find the deploy scripts in `.github/`
-
-## Bumping the underlying JS/WASM runtime
-
-Many times, fixes to the runtime and feature adds come from the underlying JS/WASM runtime. In these cases, just bump the `@rive-app/canvas` and `@rive-app/webgl` versions to the verison you need to incorporate the fix/feature. Run `npm i` and test out the change locally against the Storybook examples and run the test suite to make sure nothing breaks, and then submit a PR with just the `package.json` change if that's all that's needed.
--- a/README.md
+++ b/README.md
@@ -1,79 +1,154 @@
 ![Build Status](https://github.com/rive-app/rive-react/actions/workflows/tests.yml/badge.svg)
-[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://rive-app.github.io/rive-react)
 ![Discord badge](https://img.shields.io/discord/532365473602600965)
 ![Twitter handle](https://img.shields.io/twitter/follow/rive_app.svg?style=social&label=Follow)

 # Rive React

-![Rive hero image](https://cdn.rive.app/rive_logo_dark_bg.png)
+React Runtime for [Rive](https://rive.app).

-A React runtime library for [Rive](https://rive.app).
+A wrapper around [Rive.js](https://github.com/rive-app/rive-wasm), providing full control over the js runtime while making it super simple to use in React applications.

-This library is a wrapper around the [JS/Wasm runtime](https://github.com/rive-app/rive-wasm), giving full control over the js runtime while providing components and hooks for React applications.
+Detailed runtime documentation can be found in [Rive's help center](https://help.rive.app/runtimes).

-## Table of contents
+## Create and ship interactive animations to any platform

- :star: [Rive Overview](#rive-overview)
- 🚀 [Getting Started & API docs](#getting-started)
- :mag: [Supported Versions](#supported-versions)
- :books: [Examples](#examples)
- :runner: [Migration Guides](#migration-guides)
- 👨‍💻 [Contributing](#contributing)
- :question: [Issues](#issues)
+[Rive](https://rive.app) is a real-time interactive design and animation tool. Use our collaborative editor to create motion graphics that respond to different states and user inputs. Then load your animations into apps, games, and websites with our lightweight open-source runtimes.

-## Rive overview
+## Installation

-[Rive](https://rive.app) is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.
+```
+npm i --save rive-react
+```

-:house_with_garden: [Homepage](https://rive.app/)
+_Note: This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._

-:blue_book: [General help docs](https://rive.app/community/doc/)
+## Usage

-🛠 [Rive Forums](https://rive.app/community/forums/home)
+### Component

-## Getting started
+Rive React provides a basic component as it's default import for displaying simple animations.

-Follow along with the link below for a quick start in getting Rive React integrated into your React apps.
+```js
+import Rive from 'rive-react';

- [Getting Started with Rive in React](https://rive.app/community/doc/react/docRfaSQ0eaE)
- [API documentation](https://rive.app/community/doc/parameters-and-return-values/docJlDMNulDh)
+function Example() {
+  return <Rive src="loader.riv" />;
+}

-For more information, see the Runtime sections of the Rive help documentation:
+export default Example;
+```

- [Animation Playback](https://rive.app/community/doc/animation-playback/docDKKxsr7ko)
- [Layout](https://rive.app/community/doc/layout/docBl81zd1GB)
- [State Machines](https://rive.app/community/doc/state-machines/docxeznG7iiK)
- [Rive Text](https://rive.app/community/doc/text/docn2E6y1lXo)
- [Rive Events](https://rive.app/community/doc/rive-events/docbOnaeffgr)
- [Loading Assets](https://rive.app/community/doc/loading-assets/doct4wVHGPgC)
+#### Props

-## Supported versions
+- `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.
+- `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._

-This library supports React versions `^16.8.0` through `^18.0.0`.
+### 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';
+
+function Example() {
+  const params = {
+    src: 'loader.riv',
+    autoplay: false,
+  };
+  const { RiveComponent, rive } = useRive(params);
+
+  return (
+    <RiveComponent
+      onMouseEnter={() => rive && rive.play()}
+      onMouseLeave={() => rive && rive.pause()}
+    />
+  );
+}
+
+export default Example;
+```
+
+#### Parameters
+
+- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .riv file.
+- `opts`: Rive React specific options.
+
+#### Return Values
+
+- `RiveComponent`: A Component that can be used to display your .riv file. This component accepts the same attributes and event handlers as a `div` element.
+- `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.
+- `setContainerRef`: A callback ref that can be passed to a container element that wraps the canvas element, if you which to have control over the rendering of the container element.
+  _For the vast majority of use cases, you can just the returned `RiveComponent` and don't need to worry about `setCanvasRef` and `setContainerRef`._
+
+#### riveParams
+
+- `src?`: _(optional)_ File path or URL to the .riv file to use. One of `src` or `buffer` must be provided.
+- `buffer?`: _(optional)_ ArrayBuffer containing the raw bytes from a .riv file. One of `src` or `buffer` must be provided.
+- `artboard?`: _(optional)_ Name of the artboard to use.
+- `animations?`: _(optional)_ Name or list of names of animations to play.
+- `stateMachines?`: _(optional)_ Name of list of names of state machines to load.
+- `layout?`: _(optional)_ Layout object to define how animations are displayed on the canvas. See [Rive.js](https://github.com/rive-app/rive-wasm#layout) for more details.
+- `autoplay?`: _(optional)_ If `true`, the animation will automatically start playing when loaded. Defaults to false.
+- `onLoad?`: _(optional)_ Callback that get's fired when the .rive file loads .
+- `onLoadError?`: _(optional)_ Callback that get's fired when an error occurs loading the .riv file.
+- `onPlay?`: _(optional)_ Callback that get's fired when the animation starts playing.
+- `onPause?`: _(optional)_ Callback that get's fired when the animation pauses.
+- `onStop?`: _(optional)_ Callback that get's fired when the animation stops playing.
+- `onLoop?`: _(optional)_ Callback that get's fired when the animation completes a loop.
+- `onStateChange?`: _(optional)_ Callback that get's fired when a state change occurs.
+
+#### opts
+
+- `useDevicePixelRatio`: _(optional)_ If `true`, the hook will scale the resolution of the animation based the [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). Defaults to `true`. NOTE: Requires the `setContainerRef` ref callback to be passed to a element wrapping a canvas element. If you use the `RiveComponent`, then this will happen automatically.
+- `fitCanvasToArtboardHeight`: _(optional)_ If `true`, then the canvas will resize based on the height of the artboard. Defaults to `false`.
+
+### 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';
+
+function Example() {
+  const STATE_MACHINE_NAME = 'button';
+  const INPUT_NAME = 'onClick';
+
+  const { RiveComponent, rive } = useRive({
+    src: 'button.riv',
+    stateMachines: STATE_MACHINE_NAME,
+    autoplay: true,
+  });
+
+  const onClickInput = useStateMachineInput(
+    rive,
+    STATE_MACHINE_NAME,
+    INPUT_NAME
+  );
+
+  // This example is using a state machine with a trigger input.
+  return <RiveComponent onClick={() => onClickInput.fire()} />;
+}
+
+export default Example;
+```
+
+See our [examples](examples) folder for working examples of [Boolean](examples/state-machine-boolean-input) and [Number](examples/state-machine-number-input) inputs.
+
+#### Parameters
+
+- `rive`: A `Rive` object. This is returned by the `useRive` hook.
+- `stateMachineName`: Name of the state machine.
+- `inputName`: Name of the state machine input.
+
+#### Return Value
+
+A Rive.js `stateMachineInput` object.

 ## Examples

-Check out our Storybook instance that shows how to use the library in small examples, along with code snippets! This includes examples using the basic component, as well as the convenient hooks exported to take advantage of state machines.
-
- [Example page](https://rive-app.github.io/rive-react)
- [Login screen w/ input tracking](https://rive-app.github.io/rive-use-cases/?path=/story/example-loginformcomponent--primary)
- [Mouse tracking](https://codesandbox.io/s/rive-mouse-track-test-t0y965?file=/src/App.js)
- [Accessibility concerns](https://rive.app/blog/accesible-web-animations-aria-live-regions)
-
-### Awesome Rive
-
-For even more examples and resources on using Rive at runtime or in other tools, checkout the [awesome-rive](https://github.com/rive-app/awesome-rive) repo.
-
-## Migration guides
-
-Using an older version of the runtime and need to learn how to upgrade to the latest version? Check out the migration guides below in our help center that help guide you through version bumps; breaking changes and all!
-
-[Migration guides](https://rive.app/community/doc/migrating-from-v3-to-v4/dociIPXVHKFF)
-
-## Contributing
-
-We love contributions! Check out our [contributing docs](./CONTRIBUTING.md) to get more details into how to run this project, the examples, and more all locally.
-
-## Issues
-
-Have an issue with using the runtime, or want to suggest a feature/API to help make your development life better? Log an issue in our [issues](https://github.com/rive-app/rive-react/issues) tab! You can also browse older issues and discussion threads there to see solutions that may have worked for common problems.
+The [examples](examples) shows a number of different ways to use Rive React. See the instructions for each example to run locally.
--- 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
@@ -1,8 +0,0 @@
-/**
- * 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
@@ -1 +0,0 @@
-{"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
@@ -1,8 +0,0 @@
-/**
- * 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
@@ -1 +0,0 @@
-(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
@@ -1,31 +0,0 @@
-/**
-    	 * @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
@@ -1,31 +0,0 @@
-/**
-    	 * @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
@@ -1 +0,0 @@
-{"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
@@ -1,12 +0,0 @@
-/*!
- * 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
@@ -1,12 +0,0 @@
-/*!
- * 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
@@ -1 +0,0 @@
-{"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
@@ -1 +0,0 @@
-(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
@@ -1,367 +0,0 @@
-<!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
@@ -1,59 +0,0 @@
-<!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/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
@@ -1 +0,0 @@
-(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/docs/project.json
+++ b/docs/project.json
@@ -1 +0,0 @@
-{"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
@@ -1 +0,0 @@
-!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
@@ -1 +0,0 @@
-!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/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
@@ -1,106 +0,0 @@
-/*
-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
@@ -1 +0,0 @@
-{"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
@@ -1,104 +0,0 @@
-/*
-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
@@ -0,0 +1,23 @@
+# 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
@@ -0,0 +1,14 @@
+# 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
@@ -0,0 +1,44 @@
+{
+  "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
@@ -0,0 +1,17 @@
+<!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/public/poison-loader.riv
+++ b/examples/basic-typescript/public/poison-loader.riv
--- a/examples/basic-typescript/src/App.tsx
+++ b/examples/basic-typescript/src/App.tsx
@@ -0,0 +1,19 @@
+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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/examples/basic-typescript/tsconfig.json
+++ b/examples/basic-typescript/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "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
@@ -0,0 +1,14 @@
+# 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
@@ -0,0 +1,36 @@
+{
+  "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
@@ -0,0 +1,17 @@
+<!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/public/poison-loader.riv
+++ b/examples/basic-with-hook/public/poison-loader.riv
--- a/examples/basic-with-hook/src/App.js
+++ b/examples/basic-with-hook/src/App.js
@@ -0,0 +1,19 @@
+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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1,14 @@
+# 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
@@ -0,0 +1,36 @@
+{
+  "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
@@ -0,0 +1,17 @@
+<!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
@@ -0,0 +1,14 @@
+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
@@ -0,0 +1,48 @@
+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
@@ -0,0 +1,48 @@
+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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1,14 @@
+# 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
@@ -0,0 +1,36 @@
+{
+  "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
@@ -0,0 +1,17 @@
+<!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
@@ -0,0 +1,32 @@
+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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1,14 @@
+# 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
@@ -0,0 +1,36 @@
+{
+  "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
@@ -0,0 +1,17 @@
+<!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
@@ -0,0 +1,50 @@
+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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1,14 @@
+# 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
@@ -0,0 +1,36 @@
+{
+  "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
@@ -0,0 +1,17 @@
+<!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/public/like.riv
+++ b/examples/state-machine-boolean-input/public/like.riv
--- a/examples/state-machine-boolean-input/src/App.js
+++ b/examples/state-machine-boolean-input/src/App.js
@@ -0,0 +1,58 @@
+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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1,14 @@
+# 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
@@ -0,0 +1,36 @@
+{
+  "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
@@ -0,0 +1,17 @@
+<!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/public/skills.riv
+++ b/examples/state-machine-number-input/public/skills.riv
--- a/examples/state-machine-number-input/src/App.js
+++ b/examples/state-machine-number-input/src/App.js
@@ -0,0 +1,34 @@
+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
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"0.233bd6e2.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}`
				`@@ -1 +0,0 @@`
				(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"}}]);
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"6.e2fef599.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}`
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"9.1e553722.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}`
				`@@ -1 +0,0 @@`
				`(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]]]);`
				`@@ -1 +0,0 @@`
				{"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"}}}
				`@@ -1 +0,0 @@`
				!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()}([]);
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"vendors~main.16f7136c.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}`