@rpg-engine/long-bow 0.2.46 → 0.2.48

package/dist/long-bow.esm.js

@@ -27344,21 +27344,23 @@ var Ellipsis = function Ellipsis(_ref) {
   var children = _ref.children,
     maxLines = _ref.maxLines,
     maxWidth = _ref.maxWidth,
-    fontSize = _ref.fontSize;
+    fontSize = _ref.fontSize,
+    center = _ref.center;
   return React.createElement(Container$1, {
     maxWidth: maxWidth,
-    fontSize: fontSize
-  }, React.createElement("p", {
+    fontSize: fontSize,
+    center: center
+  }, React.createElement("div", {
     className: "ellipsis-" + maxLines + "-lines"
   }, children));
 };
 var Container$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ellipsis__Container",
   componentId: "sc-ysrlju-0"
-})(["p{font-size:", ";}.ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", "px;}.ellipsis-2-lines{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;}.ellipsis-3-lines{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;}"], function (props) {
-  return props.fontSize || '1rem';
-}, function (props) {
+})([".ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";", "}.ellipsis-2-lines{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;}.ellipsis-3-lines{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;}"], function (props) {
   return props.maxWidth;
+}, function (props) {
+  return props.center && "margin: 0 auto;";
 }, function (props) {
   return props.maxWidth;
 }, function (props) {
@@ -27395,10 +27397,11 @@ var PropertySelect = function PropertySelect(_ref) {
     }
     return '';
   };
-  return React.createElement(Container$2, null, React.createElement(TextOverlay, null, React.createElement(Item, null, React.createElement(Ellipsis, {
+  return React.createElement(Container$2, null, React.createElement(TextOverlay, null, React.createElement("p", null, React.createElement(Item, null, React.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: 200
-  }, getCurrentSelectionName()))), React.createElement("div", {
+    maxWidth: "60%",
+    center: true
+  }, getCurrentSelectionName())))), React.createElement("div", {
     className: "rpgui-progress-track"
   }), React.createElement(SelectArrow, {
     direction: "left",
@@ -28046,17 +28049,19 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       setContextActions(generateContextMenu(item, containerType));
     }
   }, [item]);
-  var getLeftPositionValue = function getLeftPositionValue(quantity) {
-    if (quantity > 0 && quantity < 10) return '2.5rem';else if (quantity > 9 && quantity < 100) return '2.0rem';else if (quantity > 99) return '1rem';
-    return '2.5rem';
-  };
   var getStackInfo = function getStackInfo(itemId, stackQty) {
     // if (itemToRender?.isStackable && itemToRender?.stackQty) {
+    var isFractionalStackQty = stackQty % 1 !== 0;
+    var isLargerThan999 = stackQty > 999;
     if (stackQty > 1) {
-      return React.createElement(ItemQty, {
-        left: getLeftPositionValue(stackQty),
+      return React.createElement(ItemQtyContainer, {
         key: "qty-" + itemId
-      }, ' ', stackQty, ' ');
+      }, React.createElement(Ellipsis, {
+        maxLines: 1,
+        maxWidth: "48px"
+      }, React.createElement(ItemQty, {
+        className: isFractionalStackQty || isLargerThan999 ? 'small' : 'regular'
+      }, ' ', stackQty, ' ')));
     }
     return undefined;
   };
@@ -28163,12 +28168,14 @@ var Container$9 = /*#__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 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;"]);
 var ItemQty = /*#__PURE__*/styled.span.withConfig({
   displayName: "ItemSlot__ItemQty",
-  componentId: "sc-l2j5ef-1"
-})(["position:relative;top:1.5rem;left:", ";"], function (props) {
-  return props.left;
-});
+  componentId: "sc-l2j5ef-2"
+})(["&.regular{font-size:", ";}&.small{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall);
 
 var EquipmentSet = function EquipmentSet(_ref) {
   var equipmentSet = _ref.equipmentSet,
@@ -29430,10 +29437,10 @@ var TradingItemRow = function TradingItemRow(_ref) {
     atlasJSON: atlasJSON,
     spriteKey: traderItem.texturePath,
     imgScale: 2.5
-  }))), React.createElement(ItemNameContainer, null, React.createElement(NameValue, null, React.createElement(Ellipsis, {
+  }))), React.createElement(ItemNameContainer, null, React.createElement(NameValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: 250
-  }, capitalize(traderItem.name)), React.createElement("p", null, "$", traderItem.price))), React.createElement(QuantityContainer, null, React.createElement(SelectArrow, {
+    maxWidth: "250px"
+  }, capitalize(traderItem.name))), React.createElement("p", null, "$", traderItem.price))), React.createElement(QuantityContainer, null, React.createElement(SelectArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",