@player-ui/reference-assets-plugin-react 0.4.0-next.9 → 0.4.1-next.0

package/dist/index.cjs.js

@@ -16,19 +16,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var makeClass__default = /*#__PURE__*/_interopDefaultLegacy(makeClass);
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
@@ -45,7 +45,7 @@ const defaultKeyStrings = [
   "Escape"
 ];
 const getConfig = (userConfig = {}) => {
-  return __spreadValues$7({
+  return __spreadValues$8({
     liveFormat: true,
     suppressBeacons: false,
     quickFormatDelay: 200,
@@ -199,19 +199,19 @@ const useInputAsset = (props, config) => {
   };
 };
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
@@ -222,27 +222,27 @@ const Input = (props) => {
     isInvalid: Boolean(validation)
   }, label && /* @__PURE__ */ React__default["default"].createElement(react.FormLabel, {
     htmlFor: id
-  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$6({}, label))), /* @__PURE__ */ React__default["default"].createElement(react.Input, __spreadValues$6({
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$7({}, label))), /* @__PURE__ */ React__default["default"].createElement(react.Input, __spreadValues$7({
     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(react$1.ReactAsset, __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$7({}, note))));
 };
 
-var __defProp$5 = Object.defineProperty;
+var __defProp$6 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
@@ -254,25 +254,25 @@ 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({}, react$1.useAssetProps(props)), {
+  return __spreadProps(__spreadValues$6({}, react$1.useAssetProps(props)), {
     className,
     children: props.value
   });
 };
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
@@ -292,7 +292,33 @@ const Text = (props) => {
       href: linkModifier.metaData.ref
     }, value);
   }
-  return /* @__PURE__ */ React__default["default"].createElement("span", __spreadValues$4({}, spanProps), value);
+  return /* @__PURE__ */ React__default["default"].createElement("span", __spreadValues$5({}, spanProps), value);
+};
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+const Collection = (props) => {
+  var _a;
+  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(react$1.ReactAsset, __spreadValues$4({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$4({
+    key: a.asset.id
+  }, a))));
 };
 
 var __defProp$3 = Object.defineProperty;
@@ -311,14 +337,21 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-const Collection = (props) => {
-  var _a;
-  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(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))));
+const useAction = (props) => {
+  const { label } = props;
+  const beacon = beaconPluginReact.useBeacon({
+    asset: props,
+    action: "clicked",
+    element: "button"
+  });
+  return {
+    id: props.id,
+    onClick: () => {
+      beacon();
+      props.run();
+    },
+    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$3({}, label == null ? void 0 : label.asset)) : null
+  };
 };
 
 var __defProp$2 = Object.defineProperty;
@@ -337,21 +370,13 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-const useAction = (props) => {
+const Action = (props) => {
+  var _a;
   const { label } = props;
-  const beacon = beaconPluginReact.useBeacon({
-    asset: props,
-    action: "clicked",
-    element: "button"
-  });
-  return {
-    id: props.id,
-    onClick: () => {
-      beacon();
-      props.run();
-    },
-    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$2({}, label == null ? void 0 : label.asset)) : null
-  };
+  const buttonProps = useAction(props);
+  return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Button, __spreadValues$2({
+    variant: referenceAssetsPlugin.isBackAction(props) ? "ghost" : "solid"
+  }, buttonProps), ((_a = props == null ? void 0 : props.metaData) == null ? void 0 : _a.role) === "back" && /* @__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$2({}, label)))));
 };
 
 var __defProp$1 = Object.defineProperty;
@@ -370,42 +395,8 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-const Action = (props) => {
-  const { label } = 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(react$1.ReactAsset, __spreadValues$1({}, label)))));
-};
-
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 const Info = (props) => {
-  var _a, _b;
-  const segmentedActions = React__default["default"].useMemo(() => {
-    var _a2, _b2;
-    if (!((_a2 = props.actions) == null ? void 0 : _a2.length)) {
-      return;
-    }
-    return (_b2 = props.actions) == null ? void 0 : _b2.reduce((memo, next) => {
-      memo[referenceAssetsPlugin.isBackAction(next.asset) ? "prev" : "next"].push(next);
-      return memo;
-    }, { prev: [], next: [] });
-  }, [props.actions]);
+  var _a, _b, _c, _d;
   return /* @__PURE__ */ React__default["default"].createElement(react.Box, {
     minW: { base: void 0, md: "md" }
   }, /* @__PURE__ */ React__default["default"].createElement(react.Stack, {
@@ -413,24 +404,55 @@ const Info = (props) => {
   }, props.title && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
     size: "lg",
     as: "h1"
-  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, props.title))), props.subTitle && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({}, props.title))), props.subTitle && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
     size: "md",
     as: "h3"
-  }, /* @__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, {
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({}, props.subTitle))), /* @__PURE__ */ React__default["default"].createElement(react.Box, null, props.primaryInfo && /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({}, 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, {
+  }, (props == null ? void 0 : props.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(react$1.ReactAsset, __spreadValues({
+  }, (_b = (_a = props == null ? void 0 : props.segmentedActions) == null ? void 0 : _a.prev) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({
     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(react$1.ReactAsset, __spreadValues({
+  }, (_d = (_c = props == null ? void 0 : props.segmentedActions) == null ? void 0 : _c.next) == null ? void 0 : _d.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({
     key: a.asset.id
   }, a))))))));
 };
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const Image = (props) => {
+  const { metaData, caption, altText } = props;
+  console.log(props);
+  return /* @__PURE__ */ React__default["default"].createElement("figure", {
+    className: "figure"
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "figure-img img-fluid",
+    src: metaData.ref,
+    alt: altText
+  }), caption && /* @__PURE__ */ React__default["default"].createElement("figcaption", {
+    className: "figure-caption",
+    style: { marginTop: 15 }
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, caption))));
+};
+
 const OptionalChakraThemeProvider = (props) => {
   const theme = react.useTheme();
   if (theme) {
@@ -448,7 +470,8 @@ class ReferenceAssetsPlugin {
       ["text", Text],
       ["action", Action],
       ["info", Info],
-      ["collection", Collection]
+      ["collection", Collection],
+      ["image", Image]
     ]));
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
@@ -463,6 +486,7 @@ class ReferenceAssetsPlugin {
 
 exports.Action = Action;
 exports.Collection = Collection;
+exports.Image = Image;
 exports.Info = Info;
 exports.Input = Input;
 exports.ReferenceAssetsPlugin = ReferenceAssetsPlugin;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactPlayerPlugin, ReactPlayer } from '@player-ui/react';
 import { ExtendedPlayerPlugin, Player } from '@player-ui/player';
-import { InputAsset, TextAsset, ActionAsset, InfoAsset, CollectionAsset, TransformedInput, LinkModifier, TransformedAction } from '@player-ui/reference-assets-plugin';
+import { InputAsset, TextAsset, ActionAsset, CollectionAsset, InfoAsset, TransformedInput, LinkModifier, TransformedAction, InfoAssetTransform, TransformedImage } from '@player-ui/reference-assets-plugin';
 import React from 'react';
 
 /**
@@ -10,8 +10,9 @@ declare class ReferenceAssetsPlugin implements ReactPlayerPlugin, ExtendedPlayer
     InputAsset,
     TextAsset,
     ActionAsset,
-    InfoAsset,
     CollectionAsset
+], [
+    InfoAsset
 ]> {
     name: string;
     applyReact(reactPlayer: ReactPlayer): void;
@@ -86,6 +87,8 @@ declare const useAction: (props: TransformedAction) => {
 };
 
 /** The info view type is used to show information to the user */
-declare const Info: (props: InfoAsset) => JSX.Element;
+declare const Info: (props: InfoAssetTransform) => JSX.Element;
 
-export { Action, Collection, Info, Input, InputHookConfig, ReferenceAssetsPlugin, Text, TextModifierContext, TextModifierContextType, getConfig, getLinkModifier, useAction, useInputAsset, useInputBeacon, useText };
+declare const Image: (props: TransformedImage) => JSX.Element;
+
+export { Action, Collection, Image, Info, Input, InputHookConfig, ReferenceAssetsPlugin, Text, TextModifierContext, TextModifierContextType, getConfig, getLinkModifier, useAction, useInputAsset, useInputBeacon, useText };

package/dist/index.esm.js

@@ -7,19 +7,19 @@ import { useBeacon } from '@player-ui/beacon-plugin-react';
 import makeClass from 'clsx';
 import { ChevronLeftIcon } from '@chakra-ui/icons';
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
@@ -36,7 +36,7 @@ const defaultKeyStrings = [
   "Escape"
 ];
 const getConfig = (userConfig = {}) => {
-  return __spreadValues$7({
+  return __spreadValues$8({
     liveFormat: true,
     suppressBeacons: false,
     quickFormatDelay: 200,
@@ -190,19 +190,19 @@ const useInputAsset = (props, config) => {
   };
 };
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
@@ -213,27 +213,27 @@ const Input = (props) => {
     isInvalid: Boolean(validation)
   }, label && /* @__PURE__ */ React.createElement(FormLabel, {
     htmlFor: id
-  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$6({}, label))), /* @__PURE__ */ React.createElement(Input$1, __spreadValues$6({
+  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$7({}, label))), /* @__PURE__ */ React.createElement(Input$1, __spreadValues$7({
     id,
     size: "md"
-  }, inputProps)), validation && /* @__PURE__ */ React.createElement(FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React.createElement(FormHelperText, null, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$6({}, note))));
+  }, inputProps)), validation && /* @__PURE__ */ React.createElement(FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React.createElement(FormHelperText, null, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$7({}, note))));
 };
 
-var __defProp$5 = Object.defineProperty;
+var __defProp$6 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
@@ -245,25 +245,25 @@ const useText = (props) => {
   if (props.modifiers && (modifierContext == null ? void 0 : modifierContext.getClassForModifier)) {
     className = makeClass(...props.modifiers.map(modifierContext.getClassForModifier));
   }
-  return __spreadProps(__spreadValues$5({}, useAssetProps(props)), {
+  return __spreadProps(__spreadValues$6({}, useAssetProps(props)), {
     className,
     children: props.value
   });
 };
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
@@ -283,7 +283,33 @@ const Text = (props) => {
       href: linkModifier.metaData.ref
     }, value);
   }
-  return /* @__PURE__ */ React.createElement("span", __spreadValues$4({}, spanProps), value);
+  return /* @__PURE__ */ React.createElement("span", __spreadValues$5({}, spanProps), value);
+};
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+const Collection = (props) => {
+  var _a;
+  return /* @__PURE__ */ React.createElement(Flex, {
+    direction: "column",
+    gap: "5"
+  }, props.label && /* @__PURE__ */ React.createElement("h3", null, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$4({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$4({
+    key: a.asset.id
+  }, a))));
 };
 
 var __defProp$3 = Object.defineProperty;
@@ -302,14 +328,21 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-const Collection = (props) => {
-  var _a;
-  return /* @__PURE__ */ React.createElement(Flex, {
-    direction: "column",
-    gap: "5"
-  }, 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))));
+const useAction = (props) => {
+  const { label } = props;
+  const beacon = useBeacon({
+    asset: props,
+    action: "clicked",
+    element: "button"
+  });
+  return {
+    id: props.id,
+    onClick: () => {
+      beacon();
+      props.run();
+    },
+    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$3({}, label == null ? void 0 : label.asset)) : null
+  };
 };
 
 var __defProp$2 = Object.defineProperty;
@@ -328,21 +361,13 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-const useAction = (props) => {
+const Action = (props) => {
+  var _a;
   const { label } = props;
-  const beacon = useBeacon({
-    asset: props,
-    action: "clicked",
-    element: "button"
-  });
-  return {
-    id: props.id,
-    onClick: () => {
-      beacon();
-      props.run();
-    },
-    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$2({}, label == null ? void 0 : label.asset)) : null
-  };
+  const buttonProps = useAction(props);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, __spreadValues$2({
+    variant: isBackAction(props) ? "ghost" : "solid"
+  }, buttonProps), ((_a = props == null ? void 0 : props.metaData) == null ? void 0 : _a.role) === "back" && /* @__PURE__ */ React.createElement(ChevronLeftIcon, null), label && /* @__PURE__ */ React.createElement(Text$1, null, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$2({}, label)))));
 };
 
 var __defProp$1 = Object.defineProperty;
@@ -361,42 +386,8 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-const Action = (props) => {
-  const { label } = 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(ReactAsset, __spreadValues$1({}, label)))));
-};
-
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 const Info = (props) => {
-  var _a, _b;
-  const segmentedActions = React.useMemo(() => {
-    var _a2, _b2;
-    if (!((_a2 = props.actions) == null ? void 0 : _a2.length)) {
-      return;
-    }
-    return (_b2 = props.actions) == null ? void 0 : _b2.reduce((memo, next) => {
-      memo[isBackAction(next.asset) ? "prev" : "next"].push(next);
-      return memo;
-    }, { prev: [], next: [] });
-  }, [props.actions]);
+  var _a, _b, _c, _d;
   return /* @__PURE__ */ React.createElement(Box, {
     minW: { base: void 0, md: "md" }
   }, /* @__PURE__ */ React.createElement(Stack, {
@@ -404,24 +395,55 @@ const Info = (props) => {
   }, props.title && /* @__PURE__ */ React.createElement(Heading, {
     size: "lg",
     as: "h1"
-  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues({}, props.title))), props.subTitle && /* @__PURE__ */ React.createElement(Heading, {
+  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$1({}, props.title))), props.subTitle && /* @__PURE__ */ React.createElement(Heading, {
     size: "md",
     as: "h3"
-  }, /* @__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, {
+  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$1({}, props.subTitle))), /* @__PURE__ */ React.createElement(Box, null, props.primaryInfo && /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$1({}, props.primaryInfo))), /* @__PURE__ */ React.createElement(Stack, {
     gap: "4"
-  }, segmentedActions && /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(HStack, {
+  }, (props == null ? void 0 : props.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(ReactAsset, __spreadValues({
+  }, (_b = (_a = props == null ? void 0 : props.segmentedActions) == null ? void 0 : _a.prev) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$1({
     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(ReactAsset, __spreadValues({
+  }, (_d = (_c = props == null ? void 0 : props.segmentedActions) == null ? void 0 : _c.next) == null ? void 0 : _d.map((a) => /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues$1({
     key: a.asset.id
   }, a))))))));
 };
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const Image = (props) => {
+  const { metaData, caption, altText } = props;
+  console.log(props);
+  return /* @__PURE__ */ React.createElement("figure", {
+    className: "figure"
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: "figure-img img-fluid",
+    src: metaData.ref,
+    alt: altText
+  }), caption && /* @__PURE__ */ React.createElement("figcaption", {
+    className: "figure-caption",
+    style: { marginTop: 15 }
+  }, /* @__PURE__ */ React.createElement(ReactAsset, __spreadValues({}, caption))));
+};
+
 const OptionalChakraThemeProvider = (props) => {
   const theme = useTheme();
   if (theme) {
@@ -439,7 +461,8 @@ class ReferenceAssetsPlugin {
       ["text", Text],
       ["action", Action],
       ["info", Info],
-      ["collection", Collection]
+      ["collection", Collection],
+      ["image", Image]
     ]));
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
@@ -452,5 +475,5 @@ class ReferenceAssetsPlugin {
   }
 }
 
-export { Action, Collection, Info, Input, ReferenceAssetsPlugin, Text, TextModifierContext, getConfig, getLinkModifier, useAction, useInputAsset, useInputBeacon, useText };
+export { Action, Collection, Image, Info, Input, ReferenceAssetsPlugin, Text, TextModifierContext, getConfig, getLinkModifier, useAction, useInputAsset, useInputBeacon, useText };
 //# sourceMappingURL=index.esm.js.map

package/dist/xlr/ActionAsset.json

@@ -1,5 +1,5 @@
 {
-    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
     "name": "ActionAsset",
     "type": "object",
     "properties": {
@@ -51,7 +51,7 @@
                     "beacon": {
                         "required": false,
                         "node": {
-                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/beacon-plugin/dist/index.d.ts",
+                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/beacon-plugin/dist/index.d.ts",
                             "name": "BeaconDataType",
                             "type": "or",
                             "or": [
@@ -81,6 +81,14 @@
                             "title": "ActionAsset.metaData.skipValidation",
                             "description": "Force transition to the next view without checking for validation"
                         }
+                    },
+                    "role": {
+                        "required": false,
+                        "node": {
+                            "type": "string",
+                            "title": "ActionAsset.metaData.role",
+                            "description": "string value to decide for the left anchor sign"
+                        }
                     }
                 },
                 "additionalProperties": false,

package/dist/xlr/CollectionAsset.json

@@ -1,5 +1,5 @@
 {
-    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
     "name": "CollectionAsset",
     "type": "object",
     "properties": {

package/dist/xlr/InfoAsset.json

@@ -1,5 +1,5 @@
 {
-    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
     "name": "InfoAsset",
     "type": "object",
     "properties": {

package/dist/xlr/InputAsset.json

@@ -1,5 +1,5 @@
 {
-    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
     "name": "InputAsset",
     "type": "object",
     "properties": {
@@ -50,7 +50,7 @@
                     "beacon": {
                         "required": false,
                         "node": {
-                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/beacon-plugin/dist/index.d.ts",
+                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/beacon-plugin/dist/index.d.ts",
                             "name": "BeaconDataType",
                             "type": "or",
                             "or": [

package/dist/xlr/TextAsset.json

@@ -1,5 +1,5 @@
 {
-    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
     "name": "TextAsset",
     "type": "object",
     "properties": {
@@ -16,12 +16,12 @@
             "node": {
                 "type": "array",
                 "elementType": {
-                    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+                    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
                     "name": "TextModifier",
                     "type": "or",
                     "or": [
                         {
-                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
                             "name": "BasicTextModifier",
                             "type": "object",
                             "properties": {
@@ -48,7 +48,7 @@
                             "title": "BasicTextModifier"
                         },
                         {
-                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2442/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
                             "name": "LinkModifier",
                             "type": "object",
                             "properties": {

package/dist/xlr/manifest.js

@@ -1,12 +1,16 @@
 const InputAsset = require('./InputAsset.json')
 const TextAsset = require('./TextAsset.json')
 const ActionAsset = require('./ActionAsset.json')
-const InfoAsset = require('./InfoAsset.json')
 const CollectionAsset = require('./CollectionAsset.json')
+const InfoAsset = require('./InfoAsset.json')
 
-module.exports = {
-  "pluginName": "reference-assets-web-plugin",
-  "capabilities": {
-    "Assets":[InputAsset,TextAsset,ActionAsset,InfoAsset,CollectionAsset],
-  }
-}
+    module.exports = {
+      "pluginName": "reference-assets-web-plugin",
+      "capabilities": {
+        "Assets":[InputAsset,TextAsset,ActionAsset,CollectionAsset],
+		"Views":[InfoAsset],
+      },
+      "customPrimitives": [
+        'Expression','Asset','Binding','AssetWrapper','Schema.DataType','ExpressionHandler'
+      ]
+    }

package/dist/xlr/manifest.json

@@ -5,8 +5,18 @@
             "InputAsset",
             "TextAsset",
             "ActionAsset",
-            "InfoAsset",
             "CollectionAsset"
+        ],
+        "Views": [
+            "InfoAsset"
         ]
-    }
+    },
+    "customPrimitives": [
+        "Expression",
+        "Asset",
+        "Binding",
+        "AssetWrapper",
+        "Schema.DataType",
+        "ExpressionHandler"
+    ]
 }

package/package.json

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

package/src/assets/action/Action.tsx

@@ -19,7 +19,7 @@ export const Action = (props: TransformedAction) => {
         variant={isBackAction(props) ? 'ghost' : 'solid'}
         {...buttonProps}
       >
-        {isBackAction(props) && <ChevronLeftIcon />}
+        {props?.metaData?.role === 'back' && <ChevronLeftIcon />}
         {label && (
           <Text>
             <ReactAsset {...label} />

package/src/assets/image/Image.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactAsset } from '@player-ui/react';
+import type { TransformedImage } from '@player-ui/reference-assets-plugin';
+
+export const Image = (props: TransformedImage) => {
+  const { metaData, caption, altText } = props;
+  console.log(props);
+  return (
+    <figure className="figure">
+      <img className="figure-img img-fluid" src={metaData.ref} alt={altText} />
+      {caption && (
+        <figcaption className="figure-caption" style={{ marginTop: 15 }}>
+          <ReactAsset {...caption} />
+        </figcaption>
+      )}
+    </figure>
+  );
+};

package/src/assets/image/index.tsx

@@ -0,0 +1 @@
+export * from './Image';

package/src/assets/index.tsx

@@ -3,3 +3,4 @@ export * from './text';
 export * from './collection';
 export * from './action';
 export * from './info';
+export * from './image';

package/src/assets/info/Info.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import type {
-  ActionAsset,
-  InfoAsset,
-} from '@player-ui/reference-assets-plugin';
-import { isBackAction } from '@player-ui/reference-assets-plugin';
+import type { InfoAssetTransform } from '@player-ui/reference-assets-plugin';
 import { ReactAsset } from '@player-ui/react';
 import {
   ButtonGroup,
@@ -13,29 +9,9 @@ import {
   Stack,
   HStack,
 } from '@chakra-ui/react';
-import type { AssetWrapper } from '@player-ui/react';
 
 /** The info view type is used to show information to the user */
-export const Info = (props: InfoAsset) => {
-  const segmentedActions = React.useMemo(() => {
-    if (!props.actions?.length) {
-      return;
-    }
-
-    return props.actions?.reduce(
-      (memo, next) => {
-        memo[isBackAction(next.asset as ActionAsset) ? 'prev' : 'next'].push(
-          next as AssetWrapper<ActionAsset>
-        );
-        return memo;
-      },
-      { prev: [], next: [] } as {
-        prev: Array<AssetWrapper<ActionAsset>>;
-        next: Array<AssetWrapper<ActionAsset>>;
-      }
-    );
-  }, [props.actions]);
-
+export const Info = (props: InfoAssetTransform) => {
   return (
     <Box minW={{ base: undefined, md: 'md' }}>
       <Stack gap="10">
@@ -51,15 +27,15 @@ export const Info = (props: InfoAsset) => {
         )}
         <Box>{props.primaryInfo && <ReactAsset {...props.primaryInfo} />}</Box>
         <Stack gap="4">
-          {segmentedActions && <Divider />}
+          {props?.segmentedActions && <Divider />}
           <HStack justifyContent="space-between">
             <ButtonGroup spacing="6">
-              {segmentedActions?.prev?.map((a) => (
+              {props?.segmentedActions?.prev?.map((a) => (
                 <ReactAsset key={a.asset.id} {...a} />
               ))}
             </ButtonGroup>
             <ButtonGroup spacing="6">
-              {segmentedActions?.next?.map((a) => (
+              {props?.segmentedActions?.next?.map((a) => (
                 <ReactAsset key={a.asset.id} {...a} />
               ))}
             </ButtonGroup>

package/src/plugin.tsx

@@ -11,7 +11,7 @@ import type {
   InfoAsset,
 } from '@player-ui/reference-assets-plugin';
 import { ReferenceAssetsPlugin as ReferenceAssetsCorePlugin } from '@player-ui/reference-assets-plugin';
-import { Input, Text, Collection, Action, Info } from './assets';
+import { Input, Text, Collection, Action, Info, Image } from './assets';
 
 /**
  *
@@ -36,7 +36,8 @@ export class ReferenceAssetsPlugin
   implements
     ReactPlayerPlugin,
     ExtendedPlayerPlugin<
-      [InputAsset, TextAsset, ActionAsset, InfoAsset, CollectionAsset]
+      [InputAsset, TextAsset, ActionAsset, CollectionAsset],
+      [InfoAsset]
     >
 {
   name = 'reference-assets-web-plugin';
@@ -49,6 +50,7 @@ export class ReferenceAssetsPlugin
         ['action', Action],
         ['info', Info],
         ['collection', Collection],
+        ['image', Image],
       ])
     );