@rpg-engine/long-bow 0.2.86 → 0.2.88

package/dist/long-bow.esm.js

@@ -32718,9 +32718,13 @@ var uiColors = {
   brownGreen: '#346524'
 };
 
+var _excluded$2 = ["innerRef"];
 var Input = function Input(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return React.createElement("input", Object.assign({}, props));
+  var rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+  return React.createElement("input", Object.assign({}, rest, {
+    ref: props.innerRef
+  }));
 };
 
 var RPGUIContainerTypes;
@@ -32960,7 +32964,12 @@ var DraggableContainer = function DraggableContainer(_ref) {
     imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth,
     cancelDrag = _ref.cancelDrag,
     onPositionChange = _ref.onPositionChange,
-    onOutsideClick = _ref.onOutsideClick;
+    onOutsideClick = _ref.onOutsideClick,
+    _ref$initialPosition = _ref.initialPosition,
+    initialPosition = _ref$initialPosition === void 0 ? {
+      x: 0,
+      y: 0
+    } : _ref$initialPosition;
   var draggableRef = useRef(null);
   useOutsideClick(draggableRef, 'item-container');
   useEffect(function () {
@@ -32985,7 +32994,8 @@ var DraggableContainer = function DraggableContainer(_ref) {
           y: data.y
         });
       }
-    }
+    },
+    defaultPosition: initialPosition
   }, React.createElement(Container$6, {
     ref: draggableRef,
     width: width,
@@ -33458,22 +33468,44 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     slotSpriteMask = _ref.slotSpriteMask,
     _onMouseOver = _ref.onMouseOver,
     _onMouseOut = _ref.onMouseOut,
-    _onClick = _ref.onClick,
+    onClick = _ref.onClick,
     _onSelected = _ref.onSelected,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     _ref$isContextMenuDis = _ref.isContextMenuDisabled,
-    isContextMenuDisabled = _ref$isContextMenuDis === void 0 ? false : _ref$isContextMenuDis;
+    isContextMenuDisabled = _ref$isContextMenuDis === void 0 ? false : _ref$isContextMenuDis,
+    onDragEnd = _ref.onDragEnd,
+    onDragStart = _ref.onDragStart,
+    onPlaceDrop = _ref.onPlaceDrop,
+    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
+    openQuantitySelector = _ref.openQuantitySelector;
   var _useState = useState(false),
     isTooltipVisible = _useState[0],
     setTooltipVisible = _useState[1];
   var _useState2 = useState(false),
     isContextMenuVisible = _useState2[0],
     setIsContextMenuVisible = _useState2[1];
-  var _useState3 = useState([]),
-    contextActions = _useState3[0],
-    setContextActions = _useState3[1];
+  var _useState3 = useState(false),
+    isFocused = _useState3[0],
+    setIsFocused = _useState3[1];
+  var _useState4 = useState(false),
+    wasDragged = _useState4[0],
+    setWasDragged = _useState4[1];
+  var _useState5 = useState({
+      x: 0,
+      y: 0
+    }),
+    dragPosition = _useState5[0],
+    setDragPosition = _useState5[1];
+  var dragContainer = useRef(null);
+  var _useState6 = useState([]),
+    contextActions = _useState6[0],
+    setContextActions = _useState6[1];
   useEffect(function () {
+    setDragPosition({
+      x: 0,
+      y: 0
+    });
     if (item) {
       setContextActions(generateContextMenu(item, containerType));
     }
@@ -33565,30 +33597,105 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
         return renderItem(itemToRender);
     }
   };
+  var resetItem = function resetItem() {
+    setTooltipVisible(false);
+    setIsFocused(false);
+    setWasDragged(false);
+  };
+  var onSuccesfulDrag = function onSuccesfulDrag(quantity) {
+    resetItem();
+    if (quantity === -1) setDragPosition({
+      x: 0,
+      y: 0
+    });else if (item) {
+      onDragEnd(quantity);
+      resetItem();
+    }
+  };
   return React.createElement(Container$a, {
     className: "rpgui-icon empty-slot",
+    onMouseUp: function onMouseUp() {
+      var data = item ? item : null;
+      if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      var _document$elementFrom;
+      var _e$changedTouches$ = e.changedTouches[0],
+        clientX = _e$changedTouches$.clientX,
+        clientY = _e$changedTouches$.clientY;
+      var simulatedEvent = new MouseEvent('mouseup', {
+        clientX: clientX,
+        clientY: clientY,
+        bubbles: true
+      });
+      (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
+    }
+  }, React.createElement(Draggable, {
+    defaultClassName: item ? 'draggable' : 'empty-slot',
+    onStop: function onStop() {
+      if (!item) {
+        return;
+      }
+      if (wasDragged) {
+        setWasDragged(false);
+        var target = dragContainer.current;
+        if (!target || !wasDragged) return;
+        var style = window.getComputedStyle(target);
+        var matrix = new DOMMatrixReadOnly(style.transform);
+        var x = matrix.m41;
+        var y = matrix.m42;
+        setDragPosition({
+          x: x,
+          y: y
+        });
+        setTimeout(function () {
+          if (checkIfItemCanBeMoved()) {
+            if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccesfulDrag);else onSuccesfulDrag(item.stackQty);
+          } else {
+            resetItem();
+            setDragPosition({
+              x: 0,
+              y: 0
+            });
+          }
+        }, 100);
+      } else if (item) {
+        if (!isContextMenuDisabled) setIsContextMenuVisible(!isContextMenuVisible);
+        onClick(item.type, containerType, item);
+      }
+    },
+    onStart: function onStart() {
+      if (!item) {
+        return;
+      }
+      if (onDragStart) {
+        onDragStart(item, slotIndex, containerType);
+      }
+    },
+    onDrag: function onDrag() {
+      setWasDragged(true);
+      setIsFocused(true);
+    },
+    position: dragPosition,
+    cancel: ".empty-slot"
+  }, React.createElement(ItemContainer, {
+    ref: dragContainer,
+    isFocused: isFocused,
     onMouseOver: function onMouseOver(event) {
-      return _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+      _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
     },
     onMouseOut: function onMouseOut() {
       if (_onMouseOut) _onMouseOut();
     },
     onMouseEnter: function onMouseEnter() {
-      return setTooltipVisible(true);
+      setTooltipVisible(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setTooltipVisible(false);
-    },
-    onClick: function onClick() {
       setTooltipVisible(false);
-      if (item) {
-        if (!isContextMenuDisabled) {
-          setIsContextMenuVisible(!isContextMenuVisible);
-        }
-        _onClick(item.type, containerType, item);
-      }
     }
-  }, !isContextMenuDisabled && isContextMenuVisible && contextActions && React.createElement(RelativeListMenu, {
+  }, onRenderSlot(item))), isTooltipVisible && item && React.createElement(ItemTooltip, {
+    label: item.name
+  }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React.createElement(RelativeListMenu, {
     options: contextActions,
     onSelected: function onSelected(optionId) {
       setIsContextMenuVisible(false);
@@ -33599,21 +33706,25 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     onOutsideClick: function onOutsideClick() {
       setIsContextMenuVisible(false);
     }
-  }), isTooltipVisible && item && React.createElement(ItemTooltip, {
-    label: item.name
-  }), onRenderSlot(item));
+  }));
 });
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;}position:relative;"]);
+var ItemContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemSlot__ItemContainer",
+  componentId: "sc-l2j5ef-1"
+})(["width:100%;height:100%;position:relative;", ""], function (props) {
+  return props.isFocused && 'z-index: 100; pointer-events: none;';
+});
 var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__ItemQtyContainer",
-  componentId: "sc-l2j5ef-1"
-})(["position:relative;width:85%;height:16px;top:25px;left:2px;display:flex;justify-content:flex-end;"]);
+  componentId: "sc-l2j5ef-2"
+})(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
 var ItemQty = /*#__PURE__*/styled.span.withConfig({
   displayName: "ItemSlot__ItemQty",
-  componentId: "sc-l2j5ef-2"
+  componentId: "sc-l2j5ef-3"
 })(["&.regular{font-size:", ";}&.small{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall);
 
 var EquipmentSet = function EquipmentSet(_ref) {
@@ -33623,7 +33734,11 @@ var EquipmentSet = function EquipmentSet(_ref) {
     _onSelected = _ref.onSelected,
     onItemClick = _ref.onItemClick,
     atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON;
+    atlasJSON = _ref.atlasJSON,
+    onItemDragEnd = _ref.onItemDragEnd,
+    onItemDragStart = _ref.onItemDragStart,
+    onItemPlaceDrop = _ref.onItemPlaceDrop,
+    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved;
   var neck = equipmentSet.neck,
     leftHand = equipmentSet.leftHand,
     ring = equipmentSet.ring,
@@ -33659,6 +33774,22 @@ var EquipmentSet = function EquipmentSet(_ref) {
         onSelected: function onSelected(optionId) {
           if (_onSelected) _onSelected(optionId);
         },
+        onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
+          if (!item) {
+            return;
+          }
+          if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
+        },
+        onDragEnd: function onDragEnd(quantity) {
+          if (onItemDragEnd) onItemDragEnd(quantity);
+        },
+        checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+        onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
+          if (!item) {
+            return;
+          }
+          if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
+        },
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON
       });
@@ -33679,11 +33810,11 @@ var EquipmentSet = function EquipmentSet(_ref) {
 var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "EquipmentSet__EquipmentSetContainer",
   componentId: "sc-1wuddg2-0"
-})(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;"]);
+})(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;touch-action:none;"]);
 var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
   displayName: "EquipmentSet__EquipmentColumn",
   componentId: "sc-1wuddg2-1"
-})(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
 var IS_MOBILE_OR_TABLET = /*#__PURE__*/isMobile({
   tablet: true
@@ -34232,7 +34363,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
     title = _ref.title,
     onClose = _ref.onClose,
     _onPositionChange = _ref.onPositionChange,
-    onOutsideClick = _ref.onOutsideClick;
+    onOutsideClick = _ref.onOutsideClick,
+    initialPosition = _ref.initialPosition;
   return React.createElement(DraggableContainer, {
     title: title,
     type: RPGUIContainerTypes.Framed,
@@ -34253,11 +34385,168 @@ var SlotsContainer = function SlotsContainer(_ref) {
         });
       }
     },
-    onOutsideClick: onOutsideClick
+    onOutsideClick: onOutsideClick,
+    initialPosition: initialPosition
   }, children);
 };
 
-var ItemContainer = function ItemContainer(_ref) {
+var RangeSliderType;
+(function (RangeSliderType) {
+  RangeSliderType["Slider"] = "rpgui-slider";
+  RangeSliderType["GoldSlider"] = "rpgui-slider golden";
+})(RangeSliderType || (RangeSliderType = {}));
+var RangeSlider = function RangeSlider(_ref) {
+  var type = _ref.type,
+    valueMin = _ref.valueMin,
+    valueMax = _ref.valueMax,
+    width = _ref.width,
+    _onChange = _ref.onChange,
+    value = _ref.value;
+  var sliderId = v4();
+  var containerRef = useRef(null);
+  var _useState = useState(0),
+    left = _useState[0],
+    setLeft = _useState[1];
+  useEffect(function () {
+    var _containerRef$current;
+    var calculatedWidth = ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.clientWidth) || 0;
+    setLeft(Math.max((value - valueMin) / (valueMax - valueMin) * (calculatedWidth - 35) + 10));
+  }, [value, valueMin, valueMax]);
+  var typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
+  return React.createElement("div", {
+    style: {
+      width: width,
+      position: 'relative'
+    },
+    className: "rpgui-slider-container " + typeClass,
+    id: "rpgui-slider-" + sliderId,
+    ref: containerRef
+  }, React.createElement("div", {
+    style: {
+      pointerEvents: 'none'
+    }
+  }, React.createElement("div", {
+    className: "rpgui-slider-track " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-left-edge " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-right-edge " + typeClass
+  }), React.createElement("div", {
+    className: "rpgui-slider-thumb " + typeClass,
+    style: {
+      left: left
+    }
+  })), React.createElement(Input$1, {
+    type: "range",
+    style: {
+      width: width
+    },
+    min: valueMin,
+    max: valueMax,
+    onChange: function onChange(e) {
+      return _onChange(Number(e.target.value));
+    },
+    value: value,
+    className: "rpgui-cursor-point"
+  }));
+};
+var Input$1 = /*#__PURE__*/styled.input.withConfig({
+  displayName: "RangeSlider__Input",
+  componentId: "sc-v8mte9-0"
+})(["opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;margin-top:-5px;"]);
+
+var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
+  var quantity = _ref.quantity,
+    onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose;
+  var _useState = useState(quantity),
+    value = _useState[0],
+    setValue = _useState[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      var closeSelector = function closeSelector(e) {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      };
+      document.addEventListener('keydown', closeSelector);
+      return function () {
+        document.removeEventListener('keydown', closeSelector);
+      };
+    }
+    return function () {};
+  }, []);
+  return React.createElement(StyledContainer, {
+    type: RPGUIContainerTypes.Framed,
+    width: "25rem"
+  }, React.createElement(CloseButton$2, {
+    className: "container-close",
+    onClick: onClose,
+    onTouchStart: onClose
+  }, "X"), React.createElement("h2", null, "Select quantity to move"), React.createElement(StyledForm, {
+    style: {
+      width: '100%'
+    },
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      var numberValue = Number(value);
+      if (Number.isNaN(numberValue)) {
+        return;
+      }
+      onConfirm(Math.max(1, Math.min(quantity, numberValue)));
+    },
+    noValidate: true
+  }, React.createElement(StyledInput, {
+    innerRef: inputRef,
+    placeholder: "Enter quantity",
+    type: "number",
+    min: 1,
+    max: quantity,
+    value: value,
+    onChange: function onChange(e) {
+      if (Number(e.target.value) >= quantity) {
+        setValue(quantity);
+        return;
+      }
+      setValue(e.target.value);
+    },
+    onBlur: function onBlur(e) {
+      var newValue = Math.max(1, Math.min(quantity, Number(e.target.value)));
+      setValue(newValue);
+    }
+  }), React.createElement(RangeSlider, {
+    type: RangeSliderType.Slider,
+    valueMin: 1,
+    valueMax: quantity,
+    width: "100%",
+    onChange: setValue,
+    value: value
+  }), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    type: "submit"
+  }, "Confirm")));
+};
+var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
+  displayName: "ItemQuantitySelector__StyledContainer",
+  componentId: "sc-yfdtpn-0"
+})(["display:flex;flex-direction:column;align-items:center;"]);
+var StyledForm = /*#__PURE__*/styled.form.withConfig({
+  displayName: "ItemQuantitySelector__StyledForm",
+  componentId: "sc-yfdtpn-1"
+})(["display:flex;flex-direction:column;align-items:center;width:100%;"]);
+var StyledInput = /*#__PURE__*/styled(Input).withConfig({
+  displayName: "ItemQuantitySelector__StyledInput",
+  componentId: "sc-yfdtpn-2"
+})(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
+var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemQuantitySelector__CloseButton",
+  componentId: "sc-yfdtpn-3"
+})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
+
+var ItemContainer$1 = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
     onClose = _ref.onClose,
     _onMouseOver = _ref.onMouseOver,
@@ -34267,7 +34556,19 @@ var ItemContainer = function ItemContainer(_ref) {
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     _ref$disableContextMe = _ref.disableContextMenu,
-    disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe;
+    disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe,
+    onItemDragEnd = _ref.onItemDragEnd,
+    onItemDragStart = _ref.onItemDragStart,
+    onItemPlaceDrop = _ref.onItemPlaceDrop,
+    checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
+    initialPosition = _ref.initialPosition;
+  var _useState = useState({
+      isOpen: false,
+      maxQuantity: 1,
+      callback: function callback(_quantity) {}
+    }),
+    quantitySelect = _useState[0],
+    setQuantitySelect = _useState[1];
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
     for (var i = 0; i < itemContainer.slotQty; i++) {
@@ -34287,23 +34588,63 @@ var ItemContainer = function ItemContainer(_ref) {
         onSelected: function onSelected(optionId, item) {
           if (_onSelected) _onSelected(optionId, item);
         },
+        onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
+          if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
+        },
+        onDragEnd: function onDragEnd(quantity) {
+          if (onItemDragEnd) onItemDragEnd(quantity);
+        },
+        checkIfItemCanBeMoved: checkIfItemCanBeMoved,
+        openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
+          setQuantitySelect({
+            isOpen: true,
+            maxQuantity: maxQuantity,
+            callback: callback
+          });
+        },
+        onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
+          if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
+        },
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON
       }));
     }
     return slots;
   };
-  return React.createElement(SlotsContainer, {
+  return React.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
-    onClose: onClose
+    onClose: onClose,
+    initialPosition: initialPosition
   }, React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots()));
+  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+    quantity: quantitySelect.maxQuantity,
+    onConfirm: function onConfirm(quantity) {
+      quantitySelect.callback(quantity);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
+      });
+    },
+    onClose: function onClose() {
+      quantitySelect.callback(-1);
+      setQuantitySelect({
+        isOpen: false,
+        maxQuantity: 1,
+        callback: function callback() {}
+      });
+    }
+  })));
 };
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
 })(["max-width:280px;display:flex;justify-content:center;flex-wrap:wrap;"]);
+var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemContainer__QuantitySelectorContainer",
+  componentId: "sc-15y5p9l-1"
+})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
 var ListMenu = function ListMenu(_ref) {
   var options = _ref.options,
@@ -34321,8 +34662,7 @@ var ListMenu = function ListMenu(_ref) {
   }, options.map(function (params, index) {
     return React.createElement(ListElement$1, {
       key: (params == null ? void 0 : params.id) || index,
-      onClick: function onClick(e) {
-        e.stopPropagation();
+      onClick: function onClick() {
         onSelected(params == null ? void 0 : params.id);
       }
     }, (params == null ? void 0 : params.text) || 'No text');
@@ -34604,41 +34944,6 @@ var InputRadio = function InputRadio(_ref) {
   }));
 };
 
-var RangeSliderType;
-(function (RangeSliderType) {
-  RangeSliderType["Slider"] = "rpgui-slider";
-  RangeSliderType["GoldSlider"] = "rpgui-slider golden";
-})(RangeSliderType || (RangeSliderType = {}));
-var RangeSlider = function RangeSlider(_ref) {
-  var type = _ref.type,
-    valueMin = _ref.valueMin,
-    valueMax = _ref.valueMax,
-    width = _ref.width,
-    onChange = _ref.onChange;
-  var sliderId = v4();
-  var onHandleMouseUp = function onHandleMouseUp() {
-    var rpguiSlider = document.getElementById("rpgui-slider-" + sliderId);
-    var value = _RPGUI.get_value(rpguiSlider);
-    onChange(Number(value));
-  };
-  return React.createElement("div", {
-    onMouseUp: onHandleMouseUp
-  }, React.createElement(Input$1, {
-    className: type === RangeSliderType.Slider ? RangeSliderType.Slider : RangeSliderType.GoldSlider,
-    type: "range",
-    style: {
-      width: width
-    },
-    min: valueMin,
-    max: valueMax,
-    id: "rpgui-slider-" + sliderId
-  }));
-};
-var Input$1 = /*#__PURE__*/styled.input.withConfig({
-  displayName: "RangeSlider__Input",
-  componentId: "sc-v8mte9-0"
-})(["opacity:0;"]);
-
 var SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,
     _ref$bgColor = _ref.bgColor,
@@ -34808,7 +35113,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
   };
   return React.createElement(SkillsDraggableContainer, {
     title: "Skills"
-  }, onCloseButton && React.createElement(CloseButton$2, {
+  }, onCloseButton && React.createElement(CloseButton$3, {
     onClick: onCloseButton,
     onTouchStart: onCloseButton
   }, "X"), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "General"), React.createElement("hr", {
@@ -34838,7 +35143,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-1"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-2"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:0.7rem;"]);
@@ -34873,7 +35178,7 @@ var TimeWidget = function TimeWidget(_ref) {
   var onClose = _ref.onClose,
     TimeClock = _ref.TimeClock,
     periodOfDay = _ref.periodOfDay;
-  return React.createElement(Draggable, null, React.createElement(WidgetContainer, null, React.createElement(CloseButton$3, {
+  return React.createElement(Draggable, null, React.createElement(WidgetContainer, null, React.createElement(CloseButton$4, {
     onClick: onClose
   }, "X"), React.createElement(DayNightContainer, null, React.createElement(DayNightPeriod, {
     periodOfDay: periodOfDay
@@ -34887,7 +35192,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$3 = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$4 = /*#__PURE__*/styled.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -35200,5 +35505,5 @@ var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
 
-export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map