@rpg-engine/long-bow 0.8.7 → 0.8.8

package/dist/long-bow.cjs.development.js

@@ -21,6 +21,7 @@ var ReactDOM = require('react-dom');
 var ReactDOM__default = _interopDefault(ReactDOM);
 var lodash = require('lodash');
 var mobxReactLite = require('mobx-react-lite');
+var reactColorful = require('react-colorful');
 var ai = require('react-icons/ai');
 require('rpgui/rpgui.css');
 require('rpgui/rpgui.min.js');
@@ -653,7 +654,7 @@ var Container$1 = /*#__PURE__*/styled__default.div.withConfig({
 var ImgSprite = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpriteFromAtlas__ImgSprite",
   componentId: "sc-1lpani8-1"
-})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";"], function (props) {
+})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";", " opacity:", ";"], function (props) {
   return props.frame.w;
 }, function (props) {
   return props.frame.h;
@@ -670,10 +671,7 @@ var ImgSprite = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.centered ? '0' : '8px';
 }, function (props) {
-  var filters = [];
-  if (props.grayScale) filters.push('grayscale(100%)');
-  if (props.tintColor) filters.push("brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(" + (props.tintColor === '#FFD700' ? '40deg' : '210deg') + ") saturate(400%)");
-  return filters.length ? filters.join(' ') : 'none';
+  return props.tintColor && "\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: " + props.frame.w + "px;\n      height: " + props.frame.h + "px;\n      background-color: " + props.tintColor + ";\n      mask-image: url(" + props.atlasIMG + ");\n      mask-position: -" + props.frame.x + "px -" + props.frame.y + "px;\n      -webkit-mask-image: url(" + props.atlasIMG + ");\n      -webkit-mask-position: -" + props.frame.x + "px -" + props.frame.y + "px;\n      mix-blend-mode: color; \n      " + (props.grayScale ? 'filter: grayscale(100%);' : 'none') + "\n      }\n    ";
 }, function (props) {
   return props.opacity;
 });
@@ -25977,7 +25975,7 @@ var Ellipsis = function Ellipsis(_ref) {
 var Container$2 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Ellipsis__Container",
   componentId: "sc-ysrlju-0"
-})(["display:block;margin:0;.ellipsis-1-lines{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";font-size:", ";", "}.ellipsis-2-lines{display:block;display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}.ellipsis-3-lines{display:block;display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}"], function (props) {
+})(["display:block;margin:0;.ellipsis-1-lines{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";font-size:", ";", "}.ellipsis-2-lines,.ellipsis-3-lines,.ellipsis-4-lines,.ellipsis-5-lines{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:", ";font-size:", ";line-height:1.4;}.ellipsis-2-lines{-webkit-line-clamp:2;}.ellipsis-3-lines{-webkit-line-clamp:3;}.ellipsis-4-lines{-webkit-line-clamp:4;}.ellipsis-5-lines{-webkit-line-clamp:5;}"], function (props) {
   return props.maxWidth;
 }, function (props) {
   return props.fontSize;
@@ -25987,10 +25985,6 @@ var Container$2 = /*#__PURE__*/styled__default.span.withConfig({
   return props.maxWidth;
 }, function (props) {
   return props.fontSize;
-}, function (props) {
-  return props.maxWidth;
-}, function (props) {
-  return props.fontSize;
 });
 
 var PropertySelect = function PropertySelect(_ref) {
@@ -27811,6 +27805,14 @@ var generateContextMenu = function generateContextMenu(item, itemContainerType,
         text: 'Open'
       });
     }
+    if (itemContainerType === shared.ItemContainerType.Inventory) {
+      if (item.textureAtlas === 'items' && item.type === shared.ItemType.Container) {
+        contextActionMenu.push({
+          id: shared.ItemSocketEvents.ItemPropertyUpdate,
+          text: 'Set Color...'
+        });
+      }
+    }
   }
   return contextActionMenu;
 };
@@ -31362,6 +31364,64 @@ var ItemsContainer = /*#__PURE__*/styled__default.div.withConfig({
   return isFullScreen && '50%';
 });
 
+var ColorSelector = function ColorSelector(_ref) {
+  var selectedColor = _ref.selectedColor,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm,
+    _onChange = _ref.onChange;
+  var _useState = React.useState(selectedColor),
+    currentColor = _useState[0],
+    setCurrentColor = _useState[1];
+  React.useEffect(function () {
+    if (isOpen) setCurrentColor(selectedColor);
+  }, [isOpen, selectedColor]);
+  var handleConfirm = function handleConfirm() {
+    onConfirm(currentColor);
+    onClose();
+  };
+  if (!isOpen) return null;
+  return isOpen ? React__default.createElement(DraggableContainer, {
+    type: exports.RPGUIContainerTypes.Framed,
+    cancelDrag: ".react-colorful",
+    width: "20rem",
+    onCloseButton: onClose
+  }, React__default.createElement(Container$m, null, React__default.createElement(Header$1, null, "Select Color"), React__default.createElement(reactColorful.HexColorPicker, {
+    color: currentColor,
+    onChange: function onChange(color) {
+      setCurrentColor(color);
+      _onChange(color);
+    }
+  }), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    type: "button",
+    onClick: handleConfirm
+  }, "Confirm"))) : null;
+};
+var Container$m = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemPropertyColorSelector__Container",
+  componentId: "sc-me1r4z-0"
+})(["padding:2rem;text-align:center;background:inherit;"]);
+var Header$1 = /*#__PURE__*/styled__default.h2.withConfig({
+  displayName: "ItemPropertyColorSelector__Header",
+  componentId: "sc-me1r4z-1"
+})(["font-family:'Press Start 2P',cursive;color:white;font-size:1rem;margin-bottom:1rem;"]);
+
+var ItemPropertySimpleHandler = function ItemPropertySimpleHandler(_ref) {
+  var isOpen = _ref.isOpen,
+    selectedColor = _ref.selectedColor,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm,
+    onChange = _ref.onChange;
+  return React__default.createElement(ColorSelector, {
+    selectedColor: selectedColor,
+    isOpen: isOpen,
+    onClose: onClose,
+    onConfirm: onConfirm,
+    onChange: onChange
+  });
+};
+
 var ItemSelector = function ItemSelector(_ref) {
   var atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
@@ -31571,7 +31631,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$m, {
+  return React__default.createElement(Container$n, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -31588,7 +31648,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$m = /*#__PURE__*/styled__default.div.withConfig({
+var Container$n = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -31607,7 +31667,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$n, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$o, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -31621,7 +31681,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$n = /*#__PURE__*/styled__default.div.withConfig({
+var Container$o = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -31634,7 +31694,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$o, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$p, {
     onPointerDown: onClose
   }, React__default.createElement(DraggableContainer, {
     width: "auto",
@@ -31657,7 +31717,7 @@ var Background = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ConfirmModal__Background",
   componentId: "sc-11qkyu1-0"
 })(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$o = /*#__PURE__*/styled__default.div.withConfig({
+var Container$p = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ConfirmModal__Container",
   componentId: "sc-11qkyu1-1"
 })(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
@@ -32182,13 +32242,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React__default.createElement(Container$p, {
+  return React__default.createElement(Container$q, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$p = /*#__PURE__*/styled__default.div.withConfig({
+var Container$q = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -32840,7 +32900,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$q, {
+  return React__default.createElement(Container$r, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -32870,7 +32930,7 @@ var TextOverlay$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$q = /*#__PURE__*/styled__default.div.withConfig({
+var Container$r = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -33111,9 +33171,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React__default.createElement(Container$r, null, children);
+  return React__default.createElement(Container$s, null, children);
 };
-var Container$r = /*#__PURE__*/styled__default.div.withConfig({
+var Container$s = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -33269,7 +33329,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
   // Ensure the width is at least 1% if value is greater than 0
   var width = value > 0 ? Math.max(1, Math.min(100, value)) : 0;
-  return React__default.createElement(Container$s, {
+  return React__default.createElement(Container$t, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -33278,7 +33338,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$s = /*#__PURE__*/styled__default.div.withConfig({
+var Container$t = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -33611,7 +33671,7 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React__default.createElement(Container$t, null, React__default.createElement(HeaderImage, {
+  }, React__default.createElement(Container$u, null, React__default.createElement(HeaderImage, {
     src: img$9,
     alt: ""
   }), React__default.createElement(ButtonsContainer$1, null, React__default.createElement(MainButtons, null, React__default.createElement(SocialButton$1, {
@@ -33629,7 +33689,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React__default.createElement(fa.FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$t = /*#__PURE__*/styled__default.div.withConfig({
+var Container$u = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SocialModal__Container",
   componentId: "sc-tbjhp9-0"
 })(["width:100%;display:flex;flex-direction:column;gap:16px;background-color:#5c4132;position:relative;border-radius:8px;overflow:hidden;&:before,&:after{content:'';position:absolute;left:0;right:0;height:3px;}&:before{bottom:0;background:linear-gradient( to right,#5c4132 0%,#2b1810 2%,#2b1810 98%,#5c4132 100% );}"]);
@@ -33675,7 +33735,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$u, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$8, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$v, null, React__default.createElement(Header$2, null, React__default.createElement("div", null, React__default.createElement(Title$8, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -33701,7 +33761,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$2, null, description));
 };
-var Container$u = /*#__PURE__*/styled__default.div.withConfig({
+var Container$v = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
@@ -33717,7 +33777,7 @@ var Description$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$1 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -33755,7 +33815,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$v, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$w, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -33780,7 +33840,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$v = /*#__PURE__*/styled__default.div.withConfig({
+var Container$w = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -33821,13 +33881,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$w, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$x, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$w = /*#__PURE__*/styled__default.div.withConfig({
+var Container$x = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -33900,7 +33960,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$x, {
+  }, React__default.createElement(Container$y, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -33919,7 +33979,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$x = /*#__PURE__*/styled__default.button.withConfig({
+var Container$y = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -33998,7 +34058,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$y, null, React__default.createElement(Title$a, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$z, null, React__default.createElement(Title$a, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -34034,7 +34094,7 @@ var Title$a = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+var Container$z = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -34516,7 +34576,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$z, null, React__default.createElement(Title$b, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$A, null, React__default.createElement(Title$b, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -34544,7 +34604,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$z = /*#__PURE__*/styled__default.div.withConfig({
+var Container$A = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -34578,11 +34638,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$A, {
+  return React__default.createElement(Container$B, {
     maxLines: maxLines
   }, children);
 };
-var Container$A = /*#__PURE__*/styled__default.div.withConfig({
+var Container$B = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -34690,7 +34750,7 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React__default.createElement(Container$B, null, React__default.createElement(Stepper, {
+  return React__default.createElement(Container$C, null, React__default.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -34707,7 +34767,7 @@ var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$B = /*#__PURE__*/styled__default.div.withConfig({
+var Container$C = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
@@ -34753,6 +34813,7 @@ exports.Input = Input;
 exports.InputRadio = InputRadio;
 exports.InternalTabs = InternalTabs;
 exports.ItemContainer = ItemContainer$1;
+exports.ItemPropertySimpleHandler = ItemPropertySimpleHandler;
 exports.ItemQuantitySelectorModal = ItemQuantitySelectorModal;
 exports.ItemSelector = ItemSelector;
 exports.ItemSlot = ItemSlot;