@helpdice/ui 2.6.0 → 2.6.1-beta.1

package/dist/table/index.js

@@ -3583,11 +3583,244 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var CurrencyInput = withScale(InputCurrency);
 
+var _excluded$c = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var getItemLayout = function getItemLayout(val) {
+  var display = val === 0 ? 'display: none;' : 'display: inherit;';
+  if (typeof val === 'number') {
+    var width = 100 / 24 * val;
+    var ratio = width > 100 ? '100%' : width < 0 ? '0' : "".concat(width, "%");
+    return {
+      grow: 0,
+      display: display,
+      width: ratio,
+      basis: ratio
+    };
+  }
+  return {
+    grow: 1,
+    display: display,
+    width: '100%',
+    basis: '0'
+  };
+};
+var GridBasicItem = function GridBasicItem(_ref) {
+  var _ref$xs = _ref.xs,
+    xs = _ref$xs === void 0 ? false : _ref$xs,
+    _ref$sm = _ref.sm,
+    sm = _ref$sm === void 0 ? false : _ref$sm,
+    _ref$md = _ref.md,
+    md = _ref$md === void 0 ? false : _ref$md,
+    _ref$lg = _ref.lg,
+    lg = _ref$lg === void 0 ? false : _ref$lg,
+    _ref$xl = _ref.xl,
+    xl = _ref$xl === void 0 ? false : _ref$xl,
+    justify = _ref.justify,
+    direction = _ref.direction,
+    alignItems = _ref.alignItems,
+    alignContent = _ref.alignContent,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = React.useMemo(function () {
+    var aligns = {
+      justify: justify,
+      direction: direction,
+      alignItems: alignItems,
+      alignContent: alignContent,
+      xs: xs,
+      sm: sm,
+      md: md,
+      lg: lg,
+      xl: xl
+    };
+    var classString = Object.keys(aligns).reduce(function (pre, name) {
+      if (aligns[name] !== undefined && aligns[name] !== false) return "".concat(pre, " ").concat(name);
+      return pre;
+    }, '');
+    return classString.trim();
+  }, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl]);
+  var layout = React.useMemo(function () {
+    return {
+      xs: getItemLayout(xs),
+      sm: getItemLayout(sm),
+      md: getItemLayout(md),
+      lg: getItemLayout(lg),
+      xl: getItemLayout(xl)
+    };
+  }, [xs, sm, md, lg, xl]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["568430467", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || theme.useClasses('item', classes, className) || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "568430467",
+      dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display],
+      children: ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme$1.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")
+    })]
+  }));
+};
+GridBasicItem.displayName = 'GridBasicItem';
+
+var _excluded$b = ["children", "className"];
+var GridComponent = function GridComponent(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$b);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _styles$className = {
+      styles: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "1271839607",
+        dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')],
+        children: "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pr(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pb(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pl(0, 'var(--grid-gap-unit)'), ";}")
+      }),
+      className: _JSXStyle.dynamic([["1271839607", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')]]])
+    },
+    resolveClassName = _styles$className.className,
+    styles = _styles$className.styles;
+  var classes = theme.useClasses(resolveClassName, className);
+  return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
+    className: classes
+  }, props), {}, {
+    children: [children, styles]
+  }));
+};
+GridComponent.displayName = 'Grid';
+var Grid = withScale(GridComponent);
+
+var _excluded$a = ["gap", "wrap", "children", "className"];
+var GridContainerComponent = function GridContainerComponent(_ref) {
+  var _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 0 : _ref$gap,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$a);
+  var _useScale = useScale(),
+    unit = _useScale.unit,
+    SCALES = _useScale.SCALES;
+  var gapUnit = React.useMemo(function () {
+    return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
+  }, [gap, unit]);
+  var _styles$className = {
+      styles: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "3631618093",
+        dynamic: [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')],
+        children: "div.__jsx-style-dynamic-selector{--grid-gap-unit:".concat(gapUnit, ";--grid-container-margin:calc(-1 * var(--grid-gap-unit));--grid-container-width:calc(100% + var(--grid-gap-unit) * 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;width:").concat(SCALES.width(1, 'var(--grid-container-width)'), ";margin:").concat(SCALES.mt(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mr(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mb(0, 'var(--grid-container-margin)'), " ").concat(SCALES.ml(0, 'var(--grid-container-margin)'), ";}")
+      }),
+      className: _JSXStyle.dynamic([["3631618093", [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')]]])
+    },
+    resolveClassName = _styles$className.className,
+    styles = _styles$className.styles;
+  var classes = theme.useClasses(resolveClassName, className);
+  return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
+    className: classes
+  }, props), {}, {
+    children: [children, styles]
+  }));
+};
+GridContainerComponent.displayName = 'GridContainer';
+var GridContainer = withScale(GridContainerComponent);
+
+Grid.Container = GridContainer;
+
+function parseCurrency(value) {
+  var _trimmed$match;
+  var trimmed = value.trim();
+
+  // Extract currency symbol
+  var currencySymbol = ((_trimmed$match = trimmed.match(/[^\d.,\s]/)) === null || _trimmed$match === void 0 ? void 0 : _trimmed$match[0]) || "";
+
+  // Remove everything except digits, comma, dot
+  var numericPart = trimmed.replace(/[^\d.,]/g, "");
+
+  // Convert comma to dot if needed
+  var normalized = numericPart.replace(",", ".");
+  return {
+    amount: Number(normalized),
+    currency: currencySymbol
+  };
+}
+function CurrencyRangeInput(_ref) {
+  var prefix = _ref.prefix,
+    allowDecimals = _ref.allowDecimals,
+    onChange = _ref.onChange,
+    intlConfig = _ref.intlConfig,
+    children = _ref.children,
+    error = _ref.error,
+    helperText = _ref.helperText;
+  var _React$useState = React.useState({
+      min: '0',
+      max: '0',
+      currency: ''
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  React.useEffect(function () {
+    var min = parseCurrency(value.min);
+    var max = parseCurrency(value.max);
+    if (max.amount > min.amount) {
+      if (onChange) onChange({
+        min: min.amount,
+        max: max.amount,
+        currency: min.currency
+      });
+    }
+  }, [value]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "with-label",
+    children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsxs(Grid.Container, {
+      gap: 2,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Grid, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
+          onChange: function onChange(e) {
+            return setValue(function (prev) {
+              return _objectSpread2(_objectSpread2({}, prev), {}, {
+                min: e.target.value
+              });
+            });
+          },
+          intlConfig: intlConfig,
+          prefix: prefix,
+          placeholder: "Min",
+          allowDecimals: allowDecimals
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
+          onChange: function onChange(e) {
+            return setValue(function (prev) {
+              return _objectSpread2(_objectSpread2({}, prev), {}, {
+                max: e.target.value
+              });
+            });
+          },
+          intlConfig: intlConfig,
+          prefix: prefix,
+          placeholder: "Max",
+          allowDecimals: allowDecimals
+        })
+      })]
+    }), helperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
+      error: error,
+      text: helperText
+    })]
+  });
+}
+
 /* "use client" */
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
 Input.Phone = PhoneInput$1;
 Input.Currency = CurrencyInput;
+Input.CurrencyRange = CurrencyRangeInput;
 
 var lodash$1 = {exports: {}};
 
@@ -20869,152 +21102,6 @@ var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef)
 });
 SelectDropdown.displayName = 'SelectDropdown';
 
-var _excluded$c = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
-var getItemLayout = function getItemLayout(val) {
-  var display = val === 0 ? 'display: none;' : 'display: inherit;';
-  if (typeof val === 'number') {
-    var width = 100 / 24 * val;
-    var ratio = width > 100 ? '100%' : width < 0 ? '0' : "".concat(width, "%");
-    return {
-      grow: 0,
-      display: display,
-      width: ratio,
-      basis: ratio
-    };
-  }
-  return {
-    grow: 1,
-    display: display,
-    width: '100%',
-    basis: '0'
-  };
-};
-var GridBasicItem = function GridBasicItem(_ref) {
-  var _ref$xs = _ref.xs,
-    xs = _ref$xs === void 0 ? false : _ref$xs,
-    _ref$sm = _ref.sm,
-    sm = _ref$sm === void 0 ? false : _ref$sm,
-    _ref$md = _ref.md,
-    md = _ref$md === void 0 ? false : _ref$md,
-    _ref$lg = _ref.lg,
-    lg = _ref$lg === void 0 ? false : _ref$lg,
-    _ref$xl = _ref.xl,
-    xl = _ref$xl === void 0 ? false : _ref$xl,
-    justify = _ref.justify,
-    direction = _ref.direction,
-    alignItems = _ref.alignItems,
-    alignContent = _ref.alignContent,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$c);
-  var theme$1 = theme.useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = React.useMemo(function () {
-    var aligns = {
-      justify: justify,
-      direction: direction,
-      alignItems: alignItems,
-      alignContent: alignContent,
-      xs: xs,
-      sm: sm,
-      md: md,
-      lg: lg,
-      xl: xl
-    };
-    var classString = Object.keys(aligns).reduce(function (pre, name) {
-      if (aligns[name] !== undefined && aligns[name] !== false) return "".concat(pre, " ").concat(name);
-      return pre;
-    }, '');
-    return classString.trim();
-  }, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl]);
-  var layout = React.useMemo(function () {
-    return {
-      xs: getItemLayout(xs),
-      sm: getItemLayout(sm),
-      md: getItemLayout(md),
-      lg: getItemLayout(lg),
-      xl: getItemLayout(xl)
-    };
-  }, [xs, sm, md, lg, xl]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: _JSXStyle.dynamic([["568430467", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || theme.useClasses('item', classes, className) || ""),
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "568430467",
-      dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display],
-      children: ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme$1.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")
-    })]
-  }));
-};
-GridBasicItem.displayName = 'GridBasicItem';
-
-var _excluded$b = ["children", "className"];
-var GridComponent = function GridComponent(_ref) {
-  var children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$b);
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _styles$className = {
-      styles: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-        id: "1271839607",
-        dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')],
-        children: "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pr(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pb(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pl(0, 'var(--grid-gap-unit)'), ";}")
-      }),
-      className: _JSXStyle.dynamic([["1271839607", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')]]])
-    },
-    resolveClassName = _styles$className.className,
-    styles = _styles$className.styles;
-  var classes = theme.useClasses(resolveClassName, className);
-  return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
-    className: classes
-  }, props), {}, {
-    children: [children, styles]
-  }));
-};
-GridComponent.displayName = 'Grid';
-var Grid = withScale(GridComponent);
-
-var _excluded$a = ["gap", "wrap", "children", "className"];
-var GridContainerComponent = function GridContainerComponent(_ref) {
-  var _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? 0 : _ref$gap,
-    _ref$wrap = _ref.wrap,
-    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  var _useScale = useScale(),
-    unit = _useScale.unit,
-    SCALES = _useScale.SCALES;
-  var gapUnit = React.useMemo(function () {
-    return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
-  }, [gap, unit]);
-  var _styles$className = {
-      styles: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-        id: "3631618093",
-        dynamic: [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')],
-        children: "div.__jsx-style-dynamic-selector{--grid-gap-unit:".concat(gapUnit, ";--grid-container-margin:calc(-1 * var(--grid-gap-unit));--grid-container-width:calc(100% + var(--grid-gap-unit) * 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;width:").concat(SCALES.width(1, 'var(--grid-container-width)'), ";margin:").concat(SCALES.mt(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mr(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mb(0, 'var(--grid-container-margin)'), " ").concat(SCALES.ml(0, 'var(--grid-container-margin)'), ";}")
-      }),
-      className: _JSXStyle.dynamic([["3631618093", [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')]]])
-    },
-    resolveClassName = _styles$className.className,
-    styles = _styles$className.styles;
-  var classes = theme.useClasses(resolveClassName, className);
-  return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
-    className: classes
-  }, props), {}, {
-    children: [children, styles]
-  }));
-};
-GridContainerComponent.displayName = 'GridContainer';
-var GridContainer = withScale(GridContainerComponent);
-
-Grid.Container = GridContainer;
-
 var SelectIconClear = function SelectIconClear(_ref) {
   var onClick = _ref.onClick;
   var theme$1 = theme.useTheme();

package/esm/expandable/expand.js

@@ -31,6 +31,7 @@ var Expandable = function Expandable(_ref) {
 
   // Measure content height and detect overflow
   useEffect(function () {
+    var _contentRef$current$q, _contentRef$current;
     var el = contentRef.current;
     if (!el) return;
     var updateHeight = function updateHeight() {
@@ -44,6 +45,12 @@ var Expandable = function Expandable(_ref) {
       setFadeColor(parentBg || "#fff");
     };
     updateHeight();
+    var images = (_contentRef$current$q = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelectorAll("img")) !== null && _contentRef$current$q !== void 0 ? _contentRef$current$q : [];
+    if (images) {
+      images.forEach(function (img) {
+        return img.addEventListener("load", updateHeight);
+      });
+    }
     var observer = new ResizeObserver(updateHeight);
     observer.observe(el);
     return function () {

package/esm/input/index.d.ts

@@ -3,11 +3,13 @@ import Textarea from '../textarea';
 import InputPassword from './password';
 import PhoneInput from './input-phone';
 import CurrencyInput from './input-currency';
+import CurrencyRangeInput from './input-currency-range';
 export type InputComponentType = typeof Input & {
     Textarea: typeof Textarea;
     Password: typeof InputPassword;
     Phone: typeof PhoneInput;
     Currency: typeof CurrencyInput;
+    CurrencyRange: typeof CurrencyRangeInput;
 };
 export { getColors } from './styles';
 export type { InputProps } from './input-field';

package/esm/input/index.js

@@ -4,10 +4,12 @@ import Textarea from '../textarea';
 import InputPassword from './password';
 import PhoneInput from './input-phone';
 import CurrencyInput from './input-currency';
+import CurrencyRangeInput from './input-currency-range';
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
 Input.Phone = PhoneInput;
 Input.Currency = CurrencyInput;
+Input.CurrencyRange = CurrencyRangeInput;
 export { getColors } from './styles';
 export { default as InputLabel, InputError } from "./input-block-label";
 export default Input;

package/esm/input/input-currency-range.d.ts

@@ -0,0 +1,10 @@
+import { CurrencyInputProps } from "./input-currency-props";
+import React from "react";
+type Override<T, U> = Omit<T, keyof U> & U;
+type CurrencyRangeProps = Override<CurrencyInputProps, {
+    onChange: (val: any) => void;
+    error?: boolean;
+    helperText?: string;
+}>;
+declare function CurrencyRangeInput({ prefix, allowDecimals, onChange, intlConfig, children, error, helperText }: CurrencyRangeProps): React.JSX.Element;
+export default CurrencyRangeInput;

package/esm/input/input-currency-range.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import Grid from "../grid";
+import Input from ".";
+import React, { useEffect } from "react";
+import InputBlockLabel, { InputError } from "./input-block-label";
+function parseCurrency(value) {
+  var _trimmed$match;
+  var trimmed = value.trim();
+
+  // Extract currency symbol
+  var currencySymbol = ((_trimmed$match = trimmed.match(/[^\d.,\s]/)) === null || _trimmed$match === void 0 ? void 0 : _trimmed$match[0]) || "";
+
+  // Remove everything except digits, comma, dot
+  var numericPart = trimmed.replace(/[^\d.,]/g, "");
+
+  // Convert comma to dot if needed
+  var normalized = numericPart.replace(",", ".");
+  return {
+    amount: Number(normalized),
+    currency: currencySymbol
+  };
+}
+function CurrencyRangeInput(_ref) {
+  var prefix = _ref.prefix,
+    allowDecimals = _ref.allowDecimals,
+    onChange = _ref.onChange,
+    intlConfig = _ref.intlConfig,
+    children = _ref.children,
+    error = _ref.error,
+    helperText = _ref.helperText;
+  var _React$useState = React.useState({
+      min: '0',
+      max: '0',
+      currency: ''
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  useEffect(function () {
+    var min = parseCurrency(value.min);
+    var max = parseCurrency(value.max);
+    if (max.amount > min.amount) {
+      if (onChange) onChange({
+        min: min.amount,
+        max: max.amount,
+        currency: min.currency
+      });
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "with-label"
+  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input.Currency, {
+    onChange: function onChange(e) {
+      return setValue(function (prev) {
+        return _extends({}, prev, {
+          min: e.target.value
+        });
+      });
+    },
+    intlConfig: intlConfig,
+    prefix: prefix,
+    placeholder: "Min",
+    allowDecimals: allowDecimals
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input.Currency, {
+    onChange: function onChange(e) {
+      return setValue(function (prev) {
+        return _extends({}, prev, {
+          max: e.target.value
+        });
+      });
+    },
+    intlConfig: intlConfig,
+    prefix: prefix,
+    placeholder: "Max",
+    allowDecimals: allowDecimals
+  }))), helperText && /*#__PURE__*/React.createElement(InputError, {
+    error: error,
+    text: helperText
+  }));
+}
+export default CurrencyRangeInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.6.0",
+  "version": "2.6.1-beta.1",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",