chore: release 4.19.1

apply "triage" label, too

.github/workflows/add_to_project.yml

@@ -0,0 +1,26 @@
+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"]
+            })

.github/workflows/publish.yml

@@ -1,43 +1,28 @@
 name: Publish to NPM
 on:
-  pull_request:
-    types: [closed]
-    branches:
-      - main
+  workflow_dispatch:
+    inputs:
+      major:
+        description: 'Major'
+        type: boolean
+        default: false
+      minor:
+        description: 'Minor'
+        type: boolean
+        default: false
 jobs:
-  determine_version:
-    name: Determine the next build version
-    if: github.event.pull_request.merged == true
+  publish_job:
     runs-on: ubuntu-latest
-    outputs:
-      version: ${{ steps.echo_version.outputs.version }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Install dependencies
-        run: npm install
-        working-directory: ./
-      - name: Git config
+      - 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 }}
-      - id: determine_version
-        name: Get Version
-        run: npm run release -- --ci --release-version | tail -n 1 > RELEASE_VERSION
-        working-directory: ./
-        env:
-          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-      - id: echo_version
-        run: echo "::set-output name=version::$(cat ./RELEASE_VERSION)"
-  
-  merge_job:
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-    needs: [determine_version]
-    steps:
-      - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
           node-version: '16.x'
@@ -50,30 +35,24 @@ jobs:
         run: npm run lint
       - name: Run Tests
         run: npm test
-      - name: Build main dist
-        run: npm run build
-      - name: Copy separated builds
-        run: ./scripts/build.sh
-      - name: Copy package jsons to separate react outputs
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: ./scripts/setup_all_packages.sh
-      - name: Bump Versions of react outputs
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          RELEASE_VERSION: ${{ needs.determine_version.outputs.version }}
-        run: ./scripts/bump_all_versions.sh
-      - name: Git config
-        run: |
-          git config --local user.email 'hello@rive.app'
-          git config --local user.name ${{ github.actor }}
-      - name: Authenticate with registry
-        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
-      - name: Release rive-react
+      - if: ${{ inputs.major == true }}
+        name: Major Release - Bump version number, update changelog, push and tag
+        run: npm run release:major
         env:
           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-        run: npm run release -- --ci
-      - name: Release @rive-app/react-* variants
+          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 }}
-        run: ./scripts/publish_all.sh
+          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 }}

.release-it.json

@@ -1,5 +1,7 @@
 {
   "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"
@@ -12,6 +14,12 @@
     "releaseName": "${version}"
   },
   "hooks": {
-    "after:bump": ["npx auto-changelog -p", "git add ./CHANGELOG.md"]
+    "after:version:bump": [
+      "npm run build",
+      "npm run setup-builds",
+      "npm run setup-packages",
+      "npx auto-changelog -p",
+      "npm run publish:all"
+    ]
   }
 }

.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'],
-}

.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>

.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);

CONTRIBUTING.md

@@ -21,7 +21,7 @@ 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.
+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`
 
 To run Storybook, run the following command in the terminal:
 
@@ -29,7 +29,11 @@ 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.
+To see changes made to the Rive React runtime reflected in your storyook, run the following command in a separate terminal window:
+
+```
+npm run dev
+```
 
 ### Testing
 

README.md

@@ -5,7 +5,7 @@
 
 # Rive React
 
-![Rive hero image](https://rive-app.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fff44ed5f-1eea-4154-81ef-84547e61c3fd%2Frive_notion.png?table=block&id=f198cab2-c0bc-4ce8-970c-42220379bcf3&spaceId=9c949665-9ad9-445f-b9c4-5ee204f8b60c&width=2000&userId=&cache=v2)
+![Rive hero image](https://cdn.rive.app/rive_logo_dark_bg.png)
 
 A React runtime library for [Rive](https://rive.app).
 
@@ -21,25 +21,33 @@ This library is a wrapper around the [JS/Wasm runtime](https://github.com/rive-a
 - 👨‍💻 [Contributing](#contributing)
 - :question: [Issues](#issues)
 
-## Rive Overview
+## Rive overview
 
 [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.
 
 :house_with_garden: [Homepage](https://rive.app/)
 
-:blue_book: [General help docs](https://help.rive.app/)
+:blue_book: [General help docs](https://rive.app/community/doc/)
 
-🛠 [Resources for building in Rive](https://rive.app/resources/)
+🛠 [Rive Forums](https://rive.app/community/forums/home)
 
-## Getting Started
+## Getting started
 
 Follow along with the link below for a quick start in getting Rive React integrated into your React apps.
 
-[Getting Started with Rive in React](https://help.rive.app/runtimes/overview/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)
 
-[API documentation](https://help.rive.app/runtimes/overview/react/parameters-and-return-values)
+For more information, see the Runtime sections of the Rive help documentation:
 
-## Supported Versions
+- [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)
+
+## Supported versions
 
 This library supports React versions `^16.8.0` through `^18.0.0`.
 
@@ -50,13 +58,17 @@ Check out our Storybook instance that shows how to use the library in small exam
 - [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://blog.rive.app/accessible-web-animations-aria-live-regions/)
+- [Accessibility concerns](https://rive.app/blog/accesible-web-animations-aria-live-regions)
 
-## Migration Guides
+### 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://help.rive.app/runtimes/overview/react/migrating-from-1.x.x-to-3.x.x)
+[Migration guides](https://rive.app/community/doc/migrating-from-v3-to-v4/dociIPXVHKFF)
 
 ## Contributing
 

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
- */

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

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

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
- */

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"}}]);

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
-   */

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
-   */

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

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

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
- */

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
- */

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

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

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)}))}}}]);

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>

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>

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]]]);

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"}}}

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()}([]);

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()}([]);

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.

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

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

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.
- */

examples/.gitignore

@@ -0,0 +1,25 @@
+# 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*
+
+*storybook.log

examples/.storybook/main.ts

@@ -0,0 +1,74 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    if (!config.resolve) config.resolve = {};
+    if (!config.resolve.alias) config.resolve.alias = {};
+
+    config.resolve.alias['react'] = path.resolve(
+      __dirname,
+      '../../node_modules/react'
+    );
+    config.resolve.alias['react-dom'] = path.resolve(
+      __dirname,
+      '../../node_modules/react-dom'
+    );
+
+    config.resolve.alias['@rive-app/react-canvas'] = path.resolve(
+      __dirname,
+      '../../'
+    );
+    config.resolve.alias['@rive-app/react-canvas-lite'] = path.resolve(
+      __dirname,
+      '../../'
+    );
+    config.resolve.alias['@rive-app/react-webgl'] = path.resolve(
+      __dirname,
+      '../../'
+    );
+    config.resolve.alias['@rive-app/react-webgl2'] = path.resolve(
+      __dirname,
+      '../../'
+    );
+
+    config.module?.rules?.push({
+      test: /\.(ts|tsx|js|jsx)$/,
+      include: [
+        path.resolve(__dirname, '../src'),
+        path.resolve(__dirname, '../../'),
+      ],
+      use: {
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: [
+            require.resolve('@babel/preset-env'),
+            require.resolve('@babel/preset-react'),
+            require.resolve('@babel/preset-typescript'),
+          ],
+        },
+      },
+    });
+
+    config.watchOptions = {
+      ignored: /node_modules/,
+      poll: 1000,
+      aggregateTimeout: 300,
+    };
+
+    return config;
+  },
+};
+
+export default config;

examples/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+
+import './stories.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

examples/.storybook/stories.css

@@ -0,0 +1,7 @@
+html, body {
+  height: 100%;
+}
+
+#storybook-root {
+  height: 100%;
+}

examples/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "examples",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/preset-create-react-app": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "eslint-plugin-storybook": "^0.12.0",
+    "storybook": "^8.6.12",
+    "webpack": "^5.99.6"
+  }
+}

examples/src/components/Events.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Events from './Events';
+
+const meta = {
+  title: 'Events',
+  component: Events,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+} satisfies Meta<typeof Events>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

examples/src/components/Events.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { useRive, EventType, RiveEventType } from '@rive-app/react-canvas';
+
+const Events = () => {
+  const { rive, RiveComponent } = useRive({
+    src: 'rating.riv',
+    stateMachines: 'State Machine 1',
+    autoplay: true,
+    automaticallyHandleEvents: true,
+  });
+
+  const onRiveEventReceived = (riveEvent: any) => {
+    console.log('Rive event received:', riveEvent);
+    const eventData = riveEvent.data;
+    const eventProperties = eventData.properties;
+    if (eventData.type === RiveEventType.General) {
+      console.log('Event name', eventData.name);
+      console.log('Rating', eventProperties.rating);
+      console.log('Message', eventProperties.message);
+    }
+  };
+
+  // Wait until the rive object is instantiated before adding the Rive
+  // event listener
+  useEffect(() => {
+    if (rive) {
+      rive.on(EventType.RiveEvent, onRiveEventReceived);
+    }
+  }, [rive]);
+
+  return <RiveComponent />;
+};
+
+export default Events;

examples/src/components/Http.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Http from './Http';
+
+const meta = {
+  title: 'Http',
+  component: Http,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+} satisfies Meta<typeof Http>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

examples/src/components/Http.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useRive } from '@rive-app/react-canvas';
+
+const Http = () => {
+  const { RiveComponent } = useRive({
+    src: 'https://cdn.rive.app/animations/vehicles.riv',
+    stateMachines: 'bumpy',
+    autoplay: true,
+  });
+
+  return <RiveComponent />;
+};
+
+export default Http;

examples/src/components/ResponsiveLayout.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ResponsiveLayout from './ResponsiveLayout';
+
+const meta = {
+  title: 'ResponsiveLayout',
+  component: ResponsiveLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+} satisfies Meta<typeof ResponsiveLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

examples/src/components/ResponsiveLayout.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Fit, useRive, Layout } from '@rive-app/react-canvas';
+
+const ResponsiveLayout = () => {
+  const { RiveComponent } = useRive({
+    src: 'layout_test.riv',
+    artboard: 'Artboard',
+    stateMachines: 'State Machine 1',
+    autoplay: true,
+    layout: new Layout({
+      fit: Fit.Layout,
+    }),
+  });
+
+  return <RiveComponent />;
+};
+
+export default ResponsiveLayout;

examples/src/components/Simple.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Simple from './Simple';
+
+const meta = {
+  title: 'Simple',
+  component: Simple,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+} satisfies Meta<typeof Simple>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

examples/src/components/Simple.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useRive } from '@rive-app/react-canvas';
+
+const Simple = () => {
+  const { RiveComponent } = useRive({
+    src: 'avatars.riv',
+    artboard: 'Avatar 3',
+    autoplay: true,
+  });
+
+  return <RiveComponent />;
+};
+
+export default Simple;

examples/stories/AnimationPlayback.stories.mdx

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

examples/stories/RiveOverview.stories.mdx

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

examples/stories/StateMachineDocs.stories.mdx

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

examples/stories/components/Button.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export const Button = ({onClick, children}) => {
-  return (
-    <button className="btn" onClick={onClick}>{children}</button>
-  );
-};

examples/stories/rive-overview.css

@@ -1,36 +0,0 @@
-.center {
-  display: flex;
-  align-content: center;
-  flex-direction: column;
-  flex-wrap: wrap;
-}
-
-.base-canvas-size {
-  height: 300px;
-  width: 300px;
-}
-
-.large-canvas-size {
-  height: 600px;
-  width: 600px;
-}
-
-.btn {
-  text-decoration: none;
-  border: none;
-  background: #0069ed;
-  border-radius: 2px;
-  height: 32px;
-  margin-top: 16px;
-  color: #ffffff;
-  cursor: pointer;
-}
-
-.btn-group .btn {
-  margin-left: 8px;
-}
-
-.rive-logo {
-  display: flex;
-  margin: 16px auto;
-}

examples/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "paths": {
+      "@rive-app/react-canvas": ["../"],
+      "@rive-app/react-webgl": ["../"],
+      "@rive-app/react-webgl2": ["../"],
+      "@rive-app/react-canvas-lite": ["../"]
+    },
+    "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"
+  ]
+}

npm/react-canvas-lite/README.md

@@ -0,0 +1,9 @@
+# @rive-app/react-canvas-lite
+
+Output for `rive-react` using the backing `@rive-app/canvas-lite` JS runtime.
+
+## Why Lite?
+
+The current `@rive-app/react-canvas` dependency supports all Rive features and contains the necessary backing dependencies to render those graphics. This `lite` version has the same API, but does not compile and build with certain dependencies in order to keep the package size as small as possible.
+
+At this time, this lite version of `@rive-app/react-canvas-lite` will not render Rive Text onto the canvas or play Rive Audio. Note however, that even if your Rive file may include Rive Text components, rendering the graphic should not cause any app errors, or cease to render. The same is true for playing audio.

npm/react-canvas-lite/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-canvas-lite",
+  "version": "4.19.1",
+  "description": "React wrapper around the @rive-app/canvas-lite library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/canvas-lite": "2.27.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
+  }
+}

npm/react-canvas/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-canvas",
+  "version": "4.19.1",
+  "description": "React wrapper around the @rive-app/canvas library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/canvas": "2.27.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
+  }
+}

npm/react-webgl/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-webgl",
+  "version": "4.19.1",
+  "description": "React wrapper around the @rive-app/webgl library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/webgl": "2.27.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
+  }
+}

npm/react-webgl2/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-webgl2",
+  "version": "4.19.1",
+  "description": "React wrapper around the @rive-app/webgl2 library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {
+    "@rive-app/webgl2": "2.27.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "3.0.23",
+  "version": "4.19.1",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -15,8 +15,14 @@
     "format": "prettier --write src",
     "types:check": "tsc --noEmit",
     "release": "release-it",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o docs-build"
+    "release:patch": "npm run release -- --ci",
+    "release:minor": "npm run release -- minor --ci",
+    "release:major": "npm run release -- major --ci",
+    "setup-builds": "./scripts/build.sh",
+    "setup-packages": "./scripts/setup_all_packages.sh",
+    "bump-versions": "./scripts/bump_all_versions.sh $npm_package_version",
+    "publish:all": "./scripts/publish_all.sh --access public",
+    "storybook": "yarn --cwd examples storybook"
   },
   "repository": {
     "type": "git",
@@ -29,28 +35,21 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "1.0.83",
-    "@rive-app/webgl": "1.0.79"
+    "@rive-app/canvas": "2.27.2",
+    "@rive-app/canvas-lite": "2.27.2",
+    "@rive-app/webgl": "2.27.2",
+    "@rive-app/webgl2": "2.27.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
-    "@storybook/addon-actions": "^6.5.3",
-    "@storybook/addon-essentials": "^6.5.3",
-    "@storybook/addon-interactions": "^6.5.3",
-    "@storybook/addon-links": "^6.5.3",
-    "@storybook/builder-webpack4": "^6.5.3",
-    "@storybook/manager-webpack4": "^6.5.3",
-    "@storybook/react": "^6.5.3",
-    "@storybook/testing-library": "^0.0.11",
     "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "^7.0.0",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^27.0.3",
     "@types/offscreencanvas": "^2019.6.4",
-    "@types/react": "^17.0.9",
+    "@types/react": "^18.0.0",
     "@types/testing-library__jest-dom": "^5.9.5",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
@@ -69,8 +68,8 @@
     "eslint-plugin-storybook": "^0.5.12",
     "jest": "^27.0.4",
     "prettier": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "release-it": "^14.10.0",
     "ts-jest": "^27.1.1",
     "typescript": "^4.5.4",

scripts/build.sh

@@ -5,6 +5,8 @@ set -e
 # Copy the build to each react-variant build for npm release
 cp -r ./dist ./npm/react-webgl
 cp -r ./dist ./npm/react-canvas
+cp -r ./dist ./npm/react-canvas-lite
+cp -r ./dist ./npm/react-webgl2
 
 echo "Replacing the canvas with webgl references in react-webgl"
 pushd ./npm/react-webgl/dist
@@ -16,3 +18,25 @@ else
   find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
 fi
 popd
+
+echo "Replacing the canvas with webgl2 references in react-webgl2"
+pushd ./npm/react-webgl2/dist
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+else
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+fi
+popd
+
+echo "Replacing the canvas with canvas-lite references in react-canvas-lite"
+pushd ./npm/react-canvas-lite/dist
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+else
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+fi
+popd

scripts/bump_all_versions.sh

@@ -1,11 +0,0 @@
-#!/bin/bash
-set -e
-
-# Bump the version number of every npm module in the npm folder.
-for dir in ./npm/*; do
-    pushd $dir > /dev/null
-    repo_name=`echo $dir | sed 's:.*/::' | sed 's/_/-/g'`
-    echo Bumping version of $repo_name
-    ../../scripts/bump_version.sh $repo_name $RELEASE_VERSION
-    popd > /dev/null
-done

scripts/bump_version.sh

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-# Bumps the version of a single npm module found in the current working
-# directory. Call bump_version.sh from the path with package.json in it.
-
-set -e
-SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
-# RELEASE_VERSION will come from an env variable passed in from the GH action workflow
-node $SCRIPT_DIR/nextVersion.js "$RELEASE_VERSION" `pwd`
-
-# Replace the dist package json with the newly trimmed one
-cp -f ./package.json ./dist/package.json

scripts/nextVersion.js

@@ -1,33 +0,0 @@
-const fs = require('fs');
-const path = process.argv[3];
-const package = require(path + '/package.json');
-const currentVersion = package.version;
-const nextVersion = process.argv[2].trim().replace(/\'/g, '"');
-
-if (!nextVersion || nextVersion === currentVersion) {
-  throw new Error('Next version is not defined or is a version that already exists');
-}
-
-// Returns -1 if first is less than second, 1 if first is greater than second, otherwise 0 if equal.
-function compareVersion(first, second) {
-  // Assumption: only numbers in our versions.
-  const firstParts = first.split('.').map((value) => parseInt(value));
-  const secondParts = second.split('.').map((value) => parseInt(value));
-
-  for (let i = 0; i < Math.max(firstParts.length, secondParts.length); i++) {
-    const first = i < firstParts.length ? firstParts[i] : 0;
-    const second = i < secondParts.length ? secondParts[i] : 0;
-    if (first < second) {
-        return -1;
-    }
-    if (second < first) {
-        return 1;
-    }
-  }
-  return 0;
-}
-
-if (compareVersion(currentVersion, nextVersion) <= 0) {
-  package.version = nextVersion;
-  fs.writeFileSync(path + '/package.json', JSON.stringify(package, null, 2));
-}

scripts/publish_all.sh

@@ -5,6 +5,6 @@ set -e
 for dir in ./npm/*; do
     pushd $dir > /dev/null
     echo Publishing `echo $dir | sed 's:.*/::'`
-    npm publish --access public
+    npm publish $@
     popd > /dev/null
 done

scripts/setup_all_packages.sh

@@ -3,14 +3,17 @@ set -e
 
 echo "Copying package.json to rive-react npm package folders"
 
-cp package.json npm/react-canvas
-cp package.json npm/react-webgl
-
 # Bump the version number of every npm module in the npm folder.
 for dir in ./npm/*; do
     echo $dir
     pushd $dir > /dev/null
     echo $dir
+    if [ -f "./package.json" ]; then
+        echo "Removing existing package.json..."
+        rm "./package.json"
+        echo "package.json deleted from $dir"
+    fi
+    cp ../../package.json ./
     repo_name=`echo $dir | sed 's:.*/::' | sed 's/_/-/g'`
     echo Setting package.json on npm packages
     echo $repo_name

scripts/trimPackageJson.js

@@ -1,7 +1,8 @@
 const fs = require('fs');
 const path = process.argv[2];
 const npmPackageSplit = process.argv[3].split('-');
-const renderer = npmPackageSplit[npmPackageSplit.length - 1];
+// extracts "webgl" or "canvas-lite" from the npm package name
+const renderer = npmPackageSplit.slice(1).join('-');
 const package = require(path + '/package.json');
 
 function trimNpmPackage() {

src/components/Rive.tsx

@@ -21,14 +21,34 @@ export interface RiveProps {
    */
   stateMachines?: string | string[];
   /**
-   * Specify a starting Layout object to set Fill and Alignment for the drawing surface. See docs at https://help.rive.app/runtimes/layout for more on layout configuration.
+   * Specify a starting Layout object to set Fill and Alignment for the drawing surface. See docs at https://rive.app/community/doc/layout/docBl81zd1GB for more on layout configuration.
    */
   layout?: Layout;
   /**
    * For `@rive-app/react-webgl`, sets this property to maintain a single WebGL context for multiple canvases. **We recommend to keep the default value** when rendering multiple Rive instances on a page.
    */
   useOffscreenRenderer?: boolean;
-};
+  /**
+   * Specify whether to disable Rive listeners on the canvas, thus preventing any event listeners to be attached to the canvas element
+   */
+  shouldDisableRiveListeners?: boolean;
+  /**
+   * Specify whether to resize the canvas to its container automatically
+   */
+  shouldResizeCanvasToContainer?: boolean;
+  /**
+   * Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
+   * functionality that can be invoked implicitly when detected.
+   *
+   * For example, if during the render loop an OpenUrlEvent is detected, the
+   * browser may try to open the specified URL in the payload.
+   *
+   * This flag is false by default to prevent any unwanted behaviors from taking place.
+   * This means any special Rive Event will have to be handled manually by subscribing to
+   * EventType.RiveEvent
+   */
+  automaticallyHandleEvents?: boolean;
+}
 
 const Rive = ({
   src,
@@ -37,6 +57,10 @@ const Rive = ({
   stateMachines,
   layout,
   useOffscreenRenderer = true,
+  shouldDisableRiveListeners = false,
+  shouldResizeCanvasToContainer = true,
+  automaticallyHandleEvents = false,
+  children,
   ...rest
 }: RiveProps & ComponentProps<'canvas'>) => {
   const params = {
@@ -46,14 +70,17 @@ const Rive = ({
     layout,
     stateMachines,
     autoplay: true,
+    shouldDisableRiveListeners,
+    automaticallyHandleEvents,
   };
 
   const options = {
     useOffscreenRenderer,
+    shouldResizeCanvasToContainer,
   };
 
   const { RiveComponent } = useRive(params, options);
-  return <RiveComponent {...rest} />;
+  return <RiveComponent {...rest}>{children}</RiveComponent>;
 };
 
 export default Rive;

src/hooks/elementObserver.ts

@@ -0,0 +1,38 @@
+class FakeIntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+const MyIntersectionObserver =
+  globalThis.IntersectionObserver || FakeIntersectionObserver;
+
+class ElementObserver {
+  private observer;
+
+  private elementsMap: Map<Element, Function> = new Map();
+
+  constructor() {
+    this.observer = new MyIntersectionObserver(this.onObserved);
+  }
+  public onObserved = (entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry) => {
+      const elementCallback = this.elementsMap.get(entry.target as Element);
+      if (elementCallback) {
+        elementCallback(entry);
+      }
+    });
+  };
+
+  public registerCallback(element: Element, callback: Function) {
+    this.observer.observe(element);
+    this.elementsMap.set(element, callback);
+  }
+
+  public removeCallback(element: Element) {
+    this.observer.unobserve(element);
+    this.elementsMap.delete(element);
+  }
+}
+
+export default ElementObserver;

src/hooks/useContainerSize.ts

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import { Dimensions } from '../types';
+
+// There are polyfills for this, but they add hundreds of lines of code
+class FakeResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function throttle(f: Function, delay: number) {
+  let timer = 0;
+  return function (this: Function, ...args: any) {
+    clearTimeout(timer);
+    timer = window.setTimeout(() => f.apply(this, args), delay);
+  };
+}
+
+const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
+const hasResizeObserver = globalThis.ResizeObserver !== undefined;
+
+const useResizeObserver = hasResizeObserver;
+const useWindowListener = !useResizeObserver;
+
+/**
+ * Hook to listen for a ref element's resize events being triggered. When resized,
+ * it sets state to an object of {width: number, height: number} indicating the contentRect
+ * size of the element at the new resize.
+ *
+ * @param containerRef - Ref element to listen for resize events on
+ * @returns - Size object with width and height attributes
+ */
+export default function useSize(
+  containerRef: React.MutableRefObject<HTMLElement | null>,
+  shouldResizeCanvasToContainer = true
+) {
+  const [size, setSize] = useState<Dimensions>({
+    width: 0,
+    height: 0,
+  });
+
+  // internet explorer does not support ResizeObservers.
+  useEffect(() => {
+    if (typeof window !== 'undefined' && shouldResizeCanvasToContainer) {
+      const handleResize = () => {
+        setSize({
+          width: window.innerWidth,
+          height: window.innerHeight,
+        });
+      };
+
+      if (useWindowListener) {
+        // only pay attention to window size changes when we do not have the resizeObserver (IE only)
+        handleResize();
+        window.addEventListener('resize', handleResize);
+      }
+
+      return () => window.removeEventListener('resize', handleResize);
+    }
+  }, []);
+  const observer = useRef(
+    new MyResizeObserver(
+      throttle((entries: any) => {
+        if (useResizeObserver) {
+          setSize({
+            width: entries[entries.length - 1].contentRect.width,
+            height: entries[entries.length - 1].contentRect.height,
+          });
+        }
+      }, 0)
+    )
+  );
+
+  useEffect(() => {
+    const currentObserver = observer.current;
+    if (!shouldResizeCanvasToContainer) {
+      currentObserver.disconnect();
+      return;
+    }
+    const containerEl = containerRef.current;
+    if (containerRef.current && useResizeObserver) {
+      currentObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      currentObserver.disconnect();
+      if (containerEl && useResizeObserver) {
+        currentObserver.unobserve(containerEl);
+      }
+    };
+  }, [containerRef, observer]);
+
+  return size;
+}

src/hooks/useDevicePixelRatio.ts

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+/**
+ * Listen for devicePixelRatio changes and set the new value accordingly. This could
+ * happen for reasons such as:
+ * - User moves window from retina screen display to a separate monitor
+ * - User controls zoom settings on the browser
+ *
+ * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
+ *
+ * @param customDevicePixelRatio - Number to force a dpr to abide by, rather than using the window's
+ *
+ * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
+ */
+export default function useDevicePixelRatio(customDevicePixelRatio?: number) {
+  const dpr = customDevicePixelRatio || getDevicePixelRatio();
+  const [currentDpr, setCurrentDpr] = useState(dpr);
+
+  useEffect(() => {
+    const canListen = typeof window !== 'undefined' && 'matchMedia' in window;
+    if (!canListen) {
+      return;
+    }
+
+    const updateDpr = () => {
+      const newDpr = customDevicePixelRatio || getDevicePixelRatio();
+      setCurrentDpr(newDpr);
+    };
+    const mediaMatcher = window.matchMedia(
+      `screen and (resolution: ${currentDpr}dppx)`
+    );
+    mediaMatcher.hasOwnProperty('addEventListener')
+      ? mediaMatcher.addEventListener('change', updateDpr)
+      : mediaMatcher.addListener(updateDpr);
+
+    return () => {
+      mediaMatcher.hasOwnProperty('removeEventListener')
+        ? mediaMatcher.removeEventListener('change', updateDpr)
+        : mediaMatcher.removeListener(updateDpr);
+    };
+  }, [currentDpr, customDevicePixelRatio]);
+
+  return currentDpr;
+}
+
+function getDevicePixelRatio(): number {
+  const hasDprProp =
+    typeof window !== 'undefined' &&
+    typeof window.devicePixelRatio === 'number';
+  const dpr = hasDprProp ? window.devicePixelRatio : 1;
+  return Math.min(Math.max(1, dpr), 3);
+}