@player-ui/reference-assets-plugin-react 0.3.0-next.3 → 0.3.0-next.5

package/dist/index.cjs.js

@@ -6,10 +6,9 @@ var React = require('react');
 var assetProviderPluginReact = require('@player-ui/asset-provider-plugin-react');
 var react = require('@chakra-ui/react');
 var referenceAssetsPlugin = require('@player-ui/reference-assets-plugin');
-var reactAsset = require('@player-ui/react-asset');
+var react$1 = require('@player-ui/react');
 var beaconPluginReact = require('@player-ui/beacon-plugin-react');
 var makeClass = require('clsx');
-var reactUtils = require('@player-ui/react-utils');
 var icons = require('@chakra-ui/icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -223,10 +222,10 @@ const Input = (props) => {
     isInvalid: Boolean(validation)
   }, label && /* @__PURE__ */ React__default["default"].createElement(react.FormLabel, {
     htmlFor: id
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues$6({}, label))), /* @__PURE__ */ React__default["default"].createElement(react.Input, __spreadValues$6({
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$6({}, label))), /* @__PURE__ */ React__default["default"].createElement(react.Input, __spreadValues$6({
     id,
     size: "md"
-  }, inputProps)), validation && /* @__PURE__ */ React__default["default"].createElement(react.FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React__default["default"].createElement(react.FormHelperText, null, /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues$6({}, note))));
+  }, inputProps)), validation && /* @__PURE__ */ React__default["default"].createElement(react.FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React__default["default"].createElement(react.FormHelperText, null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$6({}, note))));
 };
 
 var __defProp$5 = Object.defineProperty;
@@ -255,7 +254,7 @@ const useText = (props) => {
   if (props.modifiers && (modifierContext == null ? void 0 : modifierContext.getClassForModifier)) {
     className = makeClass__default["default"](...props.modifiers.map(modifierContext.getClassForModifier));
   }
-  return __spreadProps(__spreadValues$5({}, reactUtils.useAssetProps(props)), {
+  return __spreadProps(__spreadValues$5({}, react$1.useAssetProps(props)), {
     className,
     children: props.value
   });
@@ -317,7 +316,7 @@ const Collection = (props) => {
   return /* @__PURE__ */ React__default["default"].createElement(react.Flex, {
     direction: "column",
     gap: "5"
-  }, props.label && /* @__PURE__ */ React__default["default"].createElement("h3", null, /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues$3({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues$3({
+  }, props.label && /* @__PURE__ */ React__default["default"].createElement("h3", null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$3({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$3({
     key: a.asset.id
   }, a))));
 };
@@ -351,7 +350,7 @@ const useAction = (props) => {
       beacon();
       props.run();
     },
-    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues$2({}, label == null ? void 0 : label.asset)) : null
+    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$2({}, label == null ? void 0 : label.asset)) : null
   };
 };
 
@@ -376,7 +375,7 @@ const Action = (props) => {
   const buttonProps = useAction(props);
   return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Button, __spreadValues$1({
     variant: referenceAssetsPlugin.isBackAction(props) ? "ghost" : "solid"
-  }, buttonProps), referenceAssetsPlugin.isBackAction(props) && /* @__PURE__ */ React__default["default"].createElement(icons.ChevronLeftIcon, null), label && /* @__PURE__ */ React__default["default"].createElement(react.Text, null, /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues$1({}, label)))));
+  }, buttonProps), referenceAssetsPlugin.isBackAction(props) && /* @__PURE__ */ React__default["default"].createElement(icons.ChevronLeftIcon, null), label && /* @__PURE__ */ React__default["default"].createElement(react.Text, null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({}, label)))));
 };
 
 var __defProp = Object.defineProperty;
@@ -414,20 +413,20 @@ const Info = (props) => {
   }, props.title && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
     size: "lg",
     as: "h1"
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues({}, props.title))), props.subTitle && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, props.title))), props.subTitle && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
     size: "md",
     as: "h3"
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues({}, props.subTitle))), /* @__PURE__ */ React__default["default"].createElement(react.Box, null, props.primaryInfo && /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues({}, props.primaryInfo))), /* @__PURE__ */ React__default["default"].createElement(react.Stack, {
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, props.subTitle))), /* @__PURE__ */ React__default["default"].createElement(react.Box, null, props.primaryInfo && /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, props.primaryInfo))), /* @__PURE__ */ React__default["default"].createElement(react.Stack, {
     gap: "4"
   }, segmentedActions && /* @__PURE__ */ React__default["default"].createElement(react.Divider, null), /* @__PURE__ */ React__default["default"].createElement(react.HStack, {
     justifyContent: "space-between"
   }, /* @__PURE__ */ React__default["default"].createElement(react.ButtonGroup, {
     spacing: "6"
-  }, (_a = segmentedActions == null ? void 0 : segmentedActions.prev) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues({
+  }, (_a = segmentedActions == null ? void 0 : segmentedActions.prev) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({
     key: a.asset.id
   }, a)))), /* @__PURE__ */ React__default["default"].createElement(react.ButtonGroup, {
     spacing: "6"
-  }, (_b = segmentedActions == null ? void 0 : segmentedActions.next) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React__default["default"].createElement(reactAsset.Asset, __spreadValues({
+  }, (_b = segmentedActions == null ? void 0 : segmentedActions.next) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({
     key: a.asset.id
   }, a))))))));
 };
@@ -443,15 +442,15 @@ class ReferenceAssetsPlugin {
   constructor() {
     this.name = "reference-assets-web-plugin";
   }
-  applyWeb(webplayer) {
-    webplayer.registerPlugin(new assetProviderPluginReact.AssetProviderPlugin([
+  applyReact(reactPlayer) {
+    reactPlayer.registerPlugin(new assetProviderPluginReact.AssetProviderPlugin([
       ["input", Input],
       ["text", Text],
       ["action", Action],
       ["info", Info],
       ["collection", Collection]
     ]));
-    webplayer.hooks.webComponent.tap(this.name, (Comp) => {
+    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
         return /* @__PURE__ */ React__default["default"].createElement(OptionalChakraThemeProvider, null, /* @__PURE__ */ React__default["default"].createElement(Comp, null));
       };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { WebPlayerPlugin, WebPlayer } from '@player-ui/react';
+import { ReactPlayerPlugin, ReactPlayer } from '@player-ui/react';
 import { Player } from '@player-ui/player';
 import { TransformedInput, TextAsset, LinkModifier, CollectionAsset, TransformedAction, InfoAsset } from '@player-ui/reference-assets-plugin';
 import React from 'react';
@@ -6,9 +6,9 @@ import React from 'react';
 /**
  * A plugin to register the base reference assets
  */
-declare class ReferenceAssetsPlugin implements WebPlayerPlugin {
+declare class ReferenceAssetsPlugin implements ReactPlayerPlugin {
     name: string;
-    applyWeb(webplayer: WebPlayer): void;
+    applyReact(reactPlayer: ReactPlayer): void;
     apply(player: Player): void;
 }
 

package/dist/index.esm.js

@@ -2,10 +2,9 @@ import React, { useContext } from 'react';
 import { AssetProviderPlugin } from '@player-ui/asset-provider-plugin-react';
 import { FormControl, FormLabel, Input as Input$1, FormErrorMessage, FormHelperText, Link, Flex, Button, Text as Text$1, Box, Stack, Heading, Divider, HStack, ButtonGroup, useTheme, ChakraProvider } from '@chakra-ui/react';
 import { isBackAction, ReferenceAssetsPlugin as ReferenceAssetsPlugin$1 } from '@player-ui/reference-assets-plugin';
-import { Asset } from '@player-ui/react-asset';
+import { ReactAsset, useAssetProps } from '@player-ui/react';
 import { useBeacon } from '@player-ui/beacon-plugin-react';
 import makeClass from 'clsx';
-import { useAssetProps } from '@player-ui/react-utils';
 import { ChevronLeftIcon } from '@chakra-ui/icons';
 
 var __defProp$7 = Object.defineProperty;
@@ -214,10 +213,10 @@ const Input = (props) => {
     isInvalid: Boolean(validation)
   }, label && /* @__PURE__ */ React.createElement(FormLabel, {
     htmlFor: id
-  }, /* @__PURE__ */ React.createElement(Asset, __spreadValues$6({}, label))), /* @__PURE__ */ React.createElement(Input$1, __spreadValues$6({
+  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$6({}, label))), /* @__PURE__ */ React.createElement(Input$1, __spreadValues$6({
     id,
     size: "md"
-  }, inputProps)), validation && /* @__PURE__ */ React.createElement(FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React.createElement(FormHelperText, null, /* @__PURE__ */ React.createElement(Asset, __spreadValues$6({}, note))));
+  }, inputProps)), validation && /* @__PURE__ */ React.createElement(FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React.createElement(FormHelperText, null, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$6({}, note))));
 };
 
 var __defProp$5 = Object.defineProperty;
@@ -308,7 +307,7 @@ const Collection = (props) => {
   return /* @__PURE__ */ React.createElement(Flex, {
     direction: "column",
     gap: "5"
-  }, props.label && /* @__PURE__ */ React.createElement("h3", null, /* @__PURE__ */ React.createElement(Asset, __spreadValues$3({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React.createElement(Asset, __spreadValues$3({
+  }, props.label && /* @__PURE__ */ React.createElement("h3", null, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$3({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$3({
     key: a.asset.id
   }, a))));
 };
@@ -342,7 +341,7 @@ const useAction = (props) => {
       beacon();
       props.run();
     },
-    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React.createElement(Asset, __spreadValues$2({}, label == null ? void 0 : label.asset)) : null
+    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$2({}, label == null ? void 0 : label.asset)) : null
   };
 };
 
@@ -367,7 +366,7 @@ const Action = (props) => {
   const buttonProps = useAction(props);
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, __spreadValues$1({
     variant: isBackAction(props) ? "ghost" : "solid"
-  }, buttonProps), isBackAction(props) && /* @__PURE__ */ React.createElement(ChevronLeftIcon, null), label && /* @__PURE__ */ React.createElement(Text$1, null, /* @__PURE__ */ React.createElement(Asset, __spreadValues$1({}, label)))));
+  }, buttonProps), isBackAction(props) && /* @__PURE__ */ React.createElement(ChevronLeftIcon, null), label && /* @__PURE__ */ React.createElement(Text$1, null, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$1({}, label)))));
 };
 
 var __defProp = Object.defineProperty;
@@ -405,20 +404,20 @@ const Info = (props) => {
   }, props.title && /* @__PURE__ */ React.createElement(Heading, {
     size: "lg",
     as: "h1"
-  }, /* @__PURE__ */ React.createElement(Asset, __spreadValues({}, props.title))), props.subTitle && /* @__PURE__ */ React.createElement(Heading, {
+  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues({}, props.title))), props.subTitle && /* @__PURE__ */ React.createElement(Heading, {
     size: "md",
     as: "h3"
-  }, /* @__PURE__ */ React.createElement(Asset, __spreadValues({}, props.subTitle))), /* @__PURE__ */ React.createElement(Box, null, props.primaryInfo && /* @__PURE__ */ React.createElement(Asset, __spreadValues({}, props.primaryInfo))), /* @__PURE__ */ React.createElement(Stack, {
+  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues({}, props.subTitle))), /* @__PURE__ */ React.createElement(Box, null, props.primaryInfo && /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues({}, props.primaryInfo))), /* @__PURE__ */ React.createElement(Stack, {
     gap: "4"
   }, segmentedActions && /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(HStack, {
     justifyContent: "space-between"
   }, /* @__PURE__ */ React.createElement(ButtonGroup, {
     spacing: "6"
-  }, (_a = segmentedActions == null ? void 0 : segmentedActions.prev) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React.createElement(Asset, __spreadValues({
+  }, (_a = segmentedActions == null ? void 0 : segmentedActions.prev) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues({
     key: a.asset.id
   }, a)))), /* @__PURE__ */ React.createElement(ButtonGroup, {
     spacing: "6"
-  }, (_b = segmentedActions == null ? void 0 : segmentedActions.next) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React.createElement(Asset, __spreadValues({
+  }, (_b = segmentedActions == null ? void 0 : segmentedActions.next) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues({
     key: a.asset.id
   }, a))))))));
 };
@@ -434,15 +433,15 @@ class ReferenceAssetsPlugin {
   constructor() {
     this.name = "reference-assets-web-plugin";
   }
-  applyWeb(webplayer) {
-    webplayer.registerPlugin(new AssetProviderPlugin([
+  applyReact(reactPlayer) {
+    reactPlayer.registerPlugin(new AssetProviderPlugin([
       ["input", Input],
       ["text", Text],
       ["action", Action],
       ["info", Info],
       ["collection", Collection]
     ]));
-    webplayer.hooks.webComponent.tap(this.name, (Comp) => {
+    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
         return /* @__PURE__ */ React.createElement(OptionalChakraThemeProvider, null, /* @__PURE__ */ React.createElement(Comp, null));
       };

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@player-ui/reference-assets-plugin-react",
-  "version": "0.3.0-next.3",
+  "version": "0.3.0-next.5",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "peerDependencies": {
     "@types/node": "^16.11.12",
-    "@player-ui/react": "0.3.0-next.3"
+    "@player-ui/react": "0.3.0-next.5"
   },
   "dependencies": {
-    "@player-ui/reference-assets-plugin": "0.3.0-next.3",
-    "@player-ui/partial-match-registry": "0.3.0-next.3",
-    "@player-ui/asset-provider-plugin-react": "0.3.0-next.3",
-    "@player-ui/beacon-plugin-react": "0.3.0-next.3",
+    "@player-ui/reference-assets-plugin": "0.3.0-next.5",
+    "@player-ui/partial-match-registry": "0.3.0-next.5",
+    "@player-ui/asset-provider-plugin-react": "0.3.0-next.5",
+    "@player-ui/beacon-plugin-react": "0.3.0-next.5",
     "clsx": "^1.1.1",
     "@chakra-ui/react": "^1.7.3",
     "@chakra-ui/icons": "^1.1.1",

package/src/assets/action/Action.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Asset } from '@player-ui/react-asset';
+import { ReactAsset } from '@player-ui/react';
 import { Button, Text } from '@chakra-ui/react';
 import { ChevronLeftIcon } from '@chakra-ui/icons';
 import type { TransformedAction } from '@player-ui/reference-assets-plugin';
@@ -22,7 +22,7 @@ export const Action = (props: TransformedAction) => {
         {isBackAction(props) && <ChevronLeftIcon />}
         {label && (
           <Text>
-            <Asset {...label} />
+            <ReactAsset {...label} />
           </Text>
         )}
       </Button>

package/src/assets/action/hooks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Asset } from '@player-ui/react-asset';
+import { ReactAsset } from '@player-ui/react';
 import { useBeacon } from '@player-ui/beacon-plugin-react';
 import type { TransformedAction } from '@player-ui/reference-assets-plugin';
 
@@ -18,6 +18,6 @@ export const useAction = (props: TransformedAction) => {
       beacon();
       props.run();
     },
-    children: label?.asset ? <Asset {...label?.asset} /> : null,
+    children: label?.asset ? <ReactAsset {...label?.asset} /> : null,
   } as const;
 };

package/src/assets/collection/Collection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Flex } from '@chakra-ui/react';
-import { Asset } from '@player-ui/react-asset';
+import { ReactAsset } from '@player-ui/react';
 import type { CollectionAsset } from '@player-ui/reference-assets-plugin';
 
 export const Collection = (props: CollectionAsset) => {
@@ -8,11 +8,11 @@ export const Collection = (props: CollectionAsset) => {
     <Flex direction="column" gap="5">
       {props.label && (
         <h3>
-          <Asset {...props.label} />
+          <ReactAsset {...props.label} />
         </h3>
       )}
       {props.values?.map((a) => (
-        <Asset key={a.asset.id} {...a} />
+        <ReactAsset key={a.asset.id} {...a} />
       ))}
     </Flex>
   );

package/src/assets/info/Info.tsx

@@ -4,7 +4,7 @@ import type {
   InfoAsset,
 } from '@player-ui/reference-assets-plugin';
 import { isBackAction } from '@player-ui/reference-assets-plugin';
-import { Asset } from '@player-ui/react-asset';
+import { ReactAsset } from '@player-ui/react';
 import {
   ButtonGroup,
   Box,
@@ -41,26 +41,26 @@ export const Info = (props: InfoAsset) => {
       <Stack gap="10">
         {props.title && (
           <Heading size="lg" as="h1">
-            <Asset {...props.title} />
+            <ReactAsset {...props.title} />
           </Heading>
         )}
         {props.subTitle && (
           <Heading size="md" as="h3">
-            <Asset {...props.subTitle} />
+            <ReactAsset {...props.subTitle} />
           </Heading>
         )}
-        <Box>{props.primaryInfo && <Asset {...props.primaryInfo} />}</Box>
+        <Box>{props.primaryInfo && <ReactAsset {...props.primaryInfo} />}</Box>
         <Stack gap="4">
           {segmentedActions && <Divider />}
           <HStack justifyContent="space-between">
             <ButtonGroup spacing="6">
               {segmentedActions?.prev?.map((a) => (
-                <Asset key={a.asset.id} {...a} />
+                <ReactAsset key={a.asset.id} {...a} />
               ))}
             </ButtonGroup>
             <ButtonGroup spacing="6">
               {segmentedActions?.next?.map((a) => (
-                <Asset key={a.asset.id} {...a} />
+                <ReactAsset key={a.asset.id} {...a} />
               ))}
             </ButtonGroup>
           </HStack>

package/src/assets/input/Input.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Asset } from '@player-ui/react-asset';
+import { ReactAsset } from '@player-ui/react';
 import type { TransformedInput } from '@player-ui/reference-assets-plugin';
 import {
   Input as ChakraInput,
@@ -19,14 +19,14 @@ export const Input = (props: TransformedInput) => {
     <FormControl isInvalid={Boolean(validation)}>
       {label && (
         <FormLabel htmlFor={id}>
-          <Asset {...label} />
+          <ReactAsset {...label} />
         </FormLabel>
       )}
       <ChakraInput id={id} size="md" {...inputProps} />
       {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}
       {note && (
         <FormHelperText>
-          <Asset {...note} />
+          <ReactAsset {...note} />
         </FormHelperText>
       )}
     </FormControl>

package/src/assets/text/hooks.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import makeClass from 'clsx';
-import { useAssetProps } from '@player-ui/react-utils';
+import { useAssetProps } from '@player-ui/react';
 import type { TextAsset } from '@player-ui/reference-assets-plugin';
 
 export interface TextModifierContextType {

package/src/intro.stories.mdx

@@ -19,22 +19,22 @@ Each of the Asset components follows the same basic pattern:
 To import and use these Assets in your App, simply import the `plugin` and attach it to Player:
 
 ```tsx
-import { useWebPlayer, WebPlayerPlugin } from '@player-ui/react';
+import { useReactPlayer, ReactPlayerPlugin } from '@player-ui/react';
 import ReferenceAssetsPlugin from '@player-ui/reference-assets/plugin-react';
 
-const plugins: Array<WebPlayerPlugin> = [new ReferenceAssetsPlugin()];
+const plugins: Array<ReactPlayerPlugin> = [new ReferenceAssetsPlugin()];
 
 export const App = () => {
   // Create Player with our plugins
-  const { webPlayer } = useWebPlayer({ plugins });
+  const { reactPlayer } = useReactPlayer({ plugins });
 
   // Start the flow.
 
   React.useEffect(() => {
-    webPlayer.start(/** Insert your player content */);
+    reactPlayer.start(/** Insert your player content */);
   }, []);
 
   // Render Player
-  return <webPlayer.Component />;
+  return <ReactPlayer.Component />;
 };
 ```

package/src/plugin.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WebPlayer, WebPlayerPlugin } from '@player-ui/react';
+import type { ReactPlayer, ReactPlayerPlugin } from '@player-ui/react';
 import type { Player } from '@player-ui/player';
 import { AssetProviderPlugin } from '@player-ui/asset-provider-plugin-react';
 import { ChakraProvider, useTheme } from '@chakra-ui/react';
@@ -22,11 +22,11 @@ const OptionalChakraThemeProvider = (
 /**
  * A plugin to register the base reference assets
  */
-export class ReferenceAssetsPlugin implements WebPlayerPlugin {
+export class ReferenceAssetsPlugin implements ReactPlayerPlugin {
   name = 'reference-assets-web-plugin';
 
-  applyWeb(webplayer: WebPlayer) {
-    webplayer.registerPlugin(
+  applyReact(reactPlayer: ReactPlayer) {
+    reactPlayer.registerPlugin(
       new AssetProviderPlugin([
         ['input', Input],
         ['text', Text],
@@ -36,7 +36,7 @@ export class ReferenceAssetsPlugin implements WebPlayerPlugin {
       ])
     );
 
-    webplayer.hooks.webComponent.tap(this.name, (Comp) => {
+    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
         return (
           <OptionalChakraThemeProvider>