@helpdice/ui 2.6.0-beta.9 → 2.6.1-beta.0

package/dist/index.js

@@ -6,7 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@helpdice/icons');
 var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
-var Button$1 = require('components/button');
 var reactDom$1 = require('@floating-ui/react-dom');
 var pro = require('@helpdice/pro');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
@@ -3885,11 +3884,243 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var CurrencyInput = withScale(InputCurrency);
 
+var _excluded$1h = ["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$1h);
+  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$1g = ["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$1g);
+  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$1f = ["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$1f);
+  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;
+  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({
+        target: {
+          value: {
+            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
+        })
+      })]
+    })]
+  });
+}
+
 /* "use client" */
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
 Input.Phone = PhoneInput$1;
 Input.Currency = CurrencyInput;
+Input.CurrencyRange = CurrencyRangeInput;
 
 /* "use client" */
 
@@ -4009,7 +4240,7 @@ var AutoCompleteEmpty = function AutoCompleteEmpty(_ref) {
 };
 AutoCompleteEmpty.displayName = 'AutoCompleteEmpty';
 
-var _excluded$1h = ["children", "type", "color", "className", "spaceRatio"];
+var _excluded$1e = ["children", "type", "color", "className", "spaceRatio"];
 var getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
     "default": palette.accents_6,
@@ -4029,7 +4260,7 @@ var LoadingComponent = function LoadingComponent(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$spaceRatio = _ref.spaceRatio,
     spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$1h);
+    props = _objectWithoutProperties(_ref, _excluded$1e);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -4061,7 +4292,7 @@ var LoadingComponent = function LoadingComponent(_ref) {
 LoadingComponent.displayName = 'Loading';
 var Loading = withScale(LoadingComponent);
 
-var _excluded$1g = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "color", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
+var _excluded$1d = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "color", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
 var childrenToOptionsNode = function childrenToOptionsNode(options) {
   return options.map(function (item, index) {
     var key = "auto-complete-item-".concat(index);
@@ -4110,7 +4341,7 @@ var AutoCompleteComponent = /*#__PURE__*/React.forwardRef(function (_ref, userRe
     _ref$disableFreeSolo = _ref.disableFreeSolo,
     disableFreeSolo = _ref$disableFreeSolo === void 0 ? false : _ref$disableFreeSolo,
     getPopupContainer = _ref.getPopupContainer,
-    props = _objectWithoutProperties(_ref, _excluded$1g);
+    props = _objectWithoutProperties(_ref, _excluded$1d);
   var resetTimer = React.useRef(0); // DEFAULT Value 0
   var _useScale = useScale(),
     SCALES = _useScale.SCALES,
@@ -4263,7 +4494,7 @@ AutoComplete.Option = AutoCompleteItemComponent;
 AutoComplete.Searching = AutoCompleteSearch;
 AutoComplete.Empty = AutoCompleteEmpty;
 
-var _excluded$1f = ["src", "errorSrc", "stacked", "text", "isSquare", "className", "children"];
+var _excluded$1c = ["src", "errorSrc", "stacked", "text", "isSquare", "className", "children"];
 var safeText = function safeText(text) {
   if (text.length <= 4) return text;
   return text.slice(0, 3);
@@ -4282,7 +4513,7 @@ var AvatarComponent = function AvatarComponent(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1f);
+    props = _objectWithoutProperties(_ref, _excluded$1c);
   var theme$1 = theme.useTheme();
   var fallbackSrc = theme$1.type === 'dark' ? errorImgDark : errorImgLight;
   var _useScale = useScale(),
@@ -4343,7 +4574,7 @@ var AvatarGroup = withScale(AvatarGroupComponent);
 
 Avatar.Group = AvatarGroup;
 
-var _excluded$1e = ["color", "className", "children", "dot"];
+var _excluded$1b = ["color", "className", "children", "dot"];
 var getBgColor = function getBgColor(type, palette) {
   var colors = {
     "default": palette.foreground,
@@ -4362,7 +4593,7 @@ var BadgeComponent = function BadgeComponent(_ref) {
     children = _ref.children,
     _ref$dot = _ref.dot,
     dot = _ref$dot === void 0 ? false : _ref$dot,
-    props = _objectWithoutProperties(_ref, _excluded$1e);
+    props = _objectWithoutProperties(_ref, _excluded$1b);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -4576,7 +4807,7 @@ var LinkIconComponent = function LinkIconComponent() {
 LinkIconComponent.displayName = 'LinkIcon';
 var LinkIcon = /*#__PURE__*/React.memo(LinkIconComponent);
 
-var _excluded$1d = ["href", "showColor", "underline", "children", "className", "block", "arrow", "icon"];
+var _excluded$1a = ["href", "showColor", "underline", "children", "className", "block", "arrow", "icon"];
 var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
     href = _ref$href === void 0 ? '' : _ref$href,
@@ -4592,7 +4823,7 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$arrow = _ref.arrow,
     arrow = _ref$arrow === void 0 ? false : _ref$arrow,
     icon = _ref.icon,
-    props = _objectWithoutProperties(_ref, _excluded$1d);
+    props = _objectWithoutProperties(_ref, _excluded$1a);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -4620,7 +4851,7 @@ var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 LinkComponent.displayName = 'Link';
 var Link = withScale(LinkComponent);
 
-var _excluded$1c = ["href", "nextLink", "onClick", "children", "className"];
+var _excluded$19 = ["href", "nextLink", "onClick", "children", "className"];
 var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var href = _ref.href,
     _ref$nextLink = _ref.nextLink,
@@ -4629,7 +4860,7 @@ var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1c);
+    props = _objectWithoutProperties(_ref, _excluded$19);
   var isLink = React.useMemo(function () {
     return href !== undefined || nextLink;
   }, [href, nextLink]);
@@ -4736,7 +4967,7 @@ var ButtonLoading = function ButtonLoading(_ref) {
 };
 ButtonLoading.displayName = 'ButtonLoading';
 
-var _excluded$1b = ["isRight", "isSingle", "children", "className"];
+var _excluded$18 = ["isRight", "isSingle", "children", "className"];
 var ButtonIcon = function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
     isRight = _ref$isRight === void 0 ? false : _ref$isRight,
@@ -4744,7 +4975,7 @@ var ButtonIcon = function ButtonIcon(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1b);
+    props = _objectWithoutProperties(_ref, _excluded$18);
   var classes = theme.useClasses('icon', {
     right: isRight,
     single: isSingle
@@ -5011,7 +5242,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1a = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "relative", "replace", "a", "to", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var _excluded$17 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "relative", "replace", "a", "to", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme$1 = theme.useTheme();
   // const navigate = useNavigate();
@@ -5065,7 +5296,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     _filteredProps$classN = filteredProps.className,
     className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
     filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$1a);
+    var props = _objectWithoutProperties(filteredProps, _excluded$17);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   var _useMemo = React.useMemo(function () {
@@ -5328,7 +5559,7 @@ var useButtonDropdown = function useButtonDropdown() {
   return React.useContext(ButtonDropdownContext);
 };
 
-var _excluded$19 = ["children", "onClick", "className", "main", "icon", "type"];
+var _excluded$16 = ["children", "onClick", "className", "main", "icon", "type"];
 var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
   var children = _ref.children,
     _ref$onClick = _ref.onClick,
@@ -5339,7 +5570,7 @@ var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
     main = _ref$main === void 0 ? false : _ref$main,
     icon = _ref.icon,
     selfType = _ref.type,
-    props = _objectWithoutProperties(_ref, _excluded$19);
+    props = _objectWithoutProperties(_ref, _excluded$16);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -5381,7 +5612,7 @@ var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
 };
 ButtonDropdownItem.displayName = 'ButtonDropdownItem';
 
-var _excluded$18 = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
+var _excluded$15 = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
 var stopPropagation$1 = function stopPropagation(event) {
   event.stopPropagation();
   event.nativeEvent.stopImmediatePropagation();
@@ -5399,7 +5630,7 @@ var ButtonDropdownComponent = function ButtonDropdownComponent(_ref) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     icon = _ref.icon,
-    props = _objectWithoutProperties(_ref, _excluded$18);
+    props = _objectWithoutProperties(_ref, _excluded$15);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var ref = React.useRef(null);
@@ -5481,7 +5712,7 @@ var ButtonDropdown = withScale(ButtonDropdownComponent);
 /* "use client" */
 ButtonDropdown.Item = ButtonDropdownItem;
 
-var _excluded$17 = ["disabled", "type", "ghost", "vertical", "children", "className"];
+var _excluded$14 = ["disabled", "type", "ghost", "vertical", "children", "className"];
 var getGroupBorderColors = function getGroupBorderColors(palette, props) {
   var _props$ghost = props.ghost,
     ghost = _props$ghost === void 0 ? false : _props$ghost,
@@ -5508,7 +5739,7 @@ var ButtonGroupComponent = function ButtonGroupComponent(groupProps) {
     vertical = groupProps.vertical,
     children = groupProps.children,
     className = groupProps.className,
-    props = _objectWithoutProperties(groupProps, _excluded$17);
+    props = _objectWithoutProperties(groupProps, _excluded$14);
   var initialValue = React.useMemo(function () {
     return {
       disabled: disabled,
@@ -5568,7 +5799,7 @@ var useProportions = function useProportions(value, max) {
   }, [value, max, maxFixed]);
 };
 
-var _excluded$16 = ["value", "limit", "color", "className"];
+var _excluded$13 = ["value", "limit", "color", "className"];
 var getColor$3 = function getColor(val, palette) {
   if (val < 33) return palette.cyan;
   if (val < 66) return palette.warning;
@@ -5582,7 +5813,7 @@ var CapacityComponent = function CapacityComponent(_ref) {
     userColor = _ref.color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$16);
+    props = _objectWithoutProperties(_ref, _excluded$13);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -5661,14 +5892,14 @@ var getStyles$1 = function getStyles(type, palette, isShadow) {
   });
 };
 
-var _excluded$15 = ["children", "className", "disableAutoMargin"];
+var _excluded$12 = ["children", "className", "disableAutoMargin"];
 var CardFooterComponent = function CardFooterComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$disableAutoMargi = _ref.disableAutoMargin,
     disableAutoMargin = _ref$disableAutoMargi === void 0 ? false : _ref$disableAutoMargi,
-    props = _objectWithoutProperties(_ref, _excluded$15);
+    props = _objectWithoutProperties(_ref, _excluded$12);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -5687,12 +5918,12 @@ var CardFooterComponent = function CardFooterComponent(_ref) {
 CardFooterComponent.displayName = 'CardFooter';
 var CardFooter = withScale(CardFooterComponent);
 
-var _excluded$14 = ["className", "children"];
+var _excluded$11 = ["className", "children"];
 var CardContentComponent = function CardContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$14);
+    props = _objectWithoutProperties(_ref, _excluded$11);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -5707,11 +5938,11 @@ var CardContentComponent = function CardContentComponent(_ref) {
 CardContentComponent.displayName = 'CardContent';
 var CardContent = withScale(CardContentComponent);
 
-var _excluded$13 = ["opacity"];
+var _excluded$10 = ["opacity"];
 var ImageSkeleton = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$opacity = _ref.opacity,
     opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
-    props = _objectWithoutProperties(_ref, _excluded$13);
+    props = _objectWithoutProperties(_ref, _excluded$10);
   var theme$1 = theme.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
     className: _JSXStyle.dynamic([["2946022605", [theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.palette.accents_2, theme$1.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton"),
@@ -5739,7 +5970,7 @@ var getHostFromUrl = function getHostFromUrl(url) {
   }
 };
 
-var _excluded$12 = ["src", "disableSkeleton", "className", "maxDelay"];
+var _excluded$$ = ["src", "disableSkeleton", "className", "maxDelay"];
 var ImageComponent = function ImageComponent(_ref) {
   var src = _ref.src,
     _ref$disableSkeleton = _ref.disableSkeleton,
@@ -5748,7 +5979,7 @@ var ImageComponent = function ImageComponent(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$maxDelay = _ref.maxDelay,
     maxDelay = _ref$maxDelay === void 0 ? 3000 : _ref$maxDelay,
-    props = _objectWithoutProperties(_ref, _excluded$12);
+    props = _objectWithoutProperties(_ref, _excluded$$);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES,
     getScaleProps = _useScale.getScaleProps;
@@ -5848,7 +6079,7 @@ var getBrowserColors = function getBrowserColors(invert, palette) {
   };
 };
 
-var _excluded$11 = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
+var _excluded$_ = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
 var getTitle = function getTitle(title, colors) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: _JSXStyle.dynamic([["524099755", [colors.titleColor]]]) + " " + "title",
@@ -5890,7 +6121,7 @@ var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     anchorProps = _ref$anchorProps === void 0 ? {} : _ref$anchorProps,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$11);
+    props = _objectWithoutProperties(_ref, _excluded$_);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -5930,7 +6161,7 @@ var ImageBrowser = withScale(ImageBrowserComponent);
 
 Image.Browser = ImageBrowser;
 
-var _excluded$10 = ["children", "hoverable", "className", "shadow", "type"];
+var _excluded$Z = ["children", "hoverable", "className", "shadow", "type"];
 var CardComponent = function CardComponent(_ref) {
   var children = _ref.children,
     _ref$hoverable = _ref.hoverable,
@@ -5941,7 +6172,7 @@ var CardComponent = function CardComponent(_ref) {
     shadow = _ref$shadow === void 0 ? false : _ref$shadow,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'default' : _ref$type,
-    props = _objectWithoutProperties(_ref, _excluded$10);
+    props = _objectWithoutProperties(_ref, _excluded$Z);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6085,7 +6316,7 @@ var getColors$6 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$$ = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value", "block"];
+var _excluded$Y = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value", "block"];
 var CheckboxComponent = function CheckboxComponent(_ref) {
   var checked = _ref.checked,
     _ref$initialChecked = _ref.initialChecked,
@@ -6102,7 +6333,7 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
     value = _ref$value === void 0 ? '' : _ref$value,
     _ref$block = _ref.block,
     block = _ref$block === void 0 ? false : _ref$block,
-    props = _objectWithoutProperties(_ref, _excluded$$);
+    props = _objectWithoutProperties(_ref, _excluded$Y);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6185,7 +6416,7 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
 CheckboxComponent.displayName = 'Checkbox';
 var Checkbox = withScale(CheckboxComponent);
 
-var _excluded$_ = ["disabled", "onChange", "value", "children", "className"];
+var _excluded$X = ["disabled", "onChange", "value", "children", "className"];
 var CheckboxGroupComponent = function CheckboxGroupComponent(_ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -6194,7 +6425,7 @@ var CheckboxGroupComponent = function CheckboxGroupComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$_);
+    props = _objectWithoutProperties(_ref, _excluded$X);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _useState = React.useState([]),
@@ -6244,7 +6475,7 @@ var CheckboxGroup = withScale(CheckboxGroupComponent);
 
 Checkbox.Group = CheckboxGroup;
 
-var _excluded$Z = ["children", "block", "className", "name", "classic"];
+var _excluded$W = ["children", "block", "className", "name", "classic"];
 var CodeComponent = function CodeComponent(_ref) {
   var children = _ref.children,
     _ref$block = _ref.block,
@@ -6255,7 +6486,7 @@ var CodeComponent = function CodeComponent(_ref) {
     name = _ref$name === void 0 ? '' : _ref$name,
     _ref$classic = _ref.classic,
     classic = _ref$classic === void 0 ? false : _ref$classic,
-    props = _objectWithoutProperties(_ref, _excluded$Z);
+    props = _objectWithoutProperties(_ref, _excluded$W);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var theme$1 = theme.useTheme();
@@ -6473,7 +6704,7 @@ var useCollapseContext = function useCollapseContext() {
   return React.useContext(CollapseContext);
 };
 
-var _excluded$Y = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
+var _excluded$V = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
 var CollapseComponent = function CollapseComponent(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -6485,7 +6716,7 @@ var CollapseComponent = function CollapseComponent(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     index = _ref.index,
-    props = _objectWithoutProperties(_ref, _excluded$Y);
+    props = _objectWithoutProperties(_ref, _excluded$V);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6549,14 +6780,14 @@ var CollapseComponent = function CollapseComponent(_ref) {
 CollapseComponent.displayName = 'Collapse';
 var Collapse = withScale(CollapseComponent);
 
-var _excluded$X = ["children", "accordion", "className"];
+var _excluded$U = ["children", "accordion", "className"];
 var CollapseGroupComponent = function CollapseGroupComponent(_ref) {
   var children = _ref.children,
     _ref$accordion = _ref.accordion,
     accordion = _ref$accordion === void 0 ? true : _ref$accordion,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$X);
+    props = _objectWithoutProperties(_ref, _excluded$U);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _useCurrentState = theme.useCurrentState([]),
@@ -6612,7 +6843,7 @@ var CollapseGroup = withScale(CollapseGroupComponent);
 
 Collapse.Group = CollapseGroup;
 
-var _excluded$W = ["title", "content", "className"];
+var _excluded$T = ["title", "content", "className"];
 var DescriptionComponent = function DescriptionComponent(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? 'Title' : _ref$title,
@@ -6620,7 +6851,7 @@ var DescriptionComponent = function DescriptionComponent(_ref) {
     content = _ref$content === void 0 ? '' : _ref$content,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$W);
+    props = _objectWithoutProperties(_ref, _excluded$T);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6643,7 +6874,7 @@ var DescriptionComponent = function DescriptionComponent(_ref) {
 DescriptionComponent.displayName = 'Description';
 var Description = withScale(DescriptionComponent);
 
-var _excluded$V = ["children", "caption", "shadow", "className"];
+var _excluded$S = ["children", "caption", "shadow", "className"];
 var DisplayComponent = function DisplayComponent(_ref) {
   var children = _ref.children,
     _ref$caption = _ref.caption,
@@ -6652,7 +6883,7 @@ var DisplayComponent = function DisplayComponent(_ref) {
     shadow = _ref$shadow === void 0 ? false : _ref$shadow,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$V);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6678,7 +6909,7 @@ var DisplayComponent = function DisplayComponent(_ref) {
 DisplayComponent.displayName = 'Display';
 var Display = withScale(DisplayComponent);
 
-var _excluded$U = ["type", "align", "children", "className"];
+var _excluded$R = ["type", "align", "children", "className"];
 var getColor$2 = function getColor(type, palette) {
   var colors = {
     "default": palette.border,
@@ -6699,7 +6930,7 @@ var DividerComponent = function DividerComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$U);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -6731,7 +6962,7 @@ var DividerComponent = function DividerComponent(_ref) {
 DividerComponent.displayName = 'Divider';
 var Divider = withScale(DividerComponent);
 
-var _excluded$T = ["type", "children", "className"];
+var _excluded$Q = ["type", "children", "className"];
 var getColor$1 = function getColor(type, theme) {
   var colors = {
     "default": theme.palette.accents_2,
@@ -6747,7 +6978,7 @@ var DotComponent = function DotComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$T);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7085,7 +7316,7 @@ var getDrawerTransform = function getDrawerTransform(placement) {
   return translates[placement];
 };
 
-var _excluded$S = ["className", "children", "visible", "placement"];
+var _excluded$P = ["className", "children", "visible", "placement"];
 var DrawerWrapper = function DrawerWrapper(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -7093,7 +7324,7 @@ var DrawerWrapper = function DrawerWrapper(_ref) {
     _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? false : _ref$visible,
     placement = _ref.placement,
-    props = _objectWithoutProperties(_ref, _excluded$S);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7156,7 +7387,7 @@ var DrawerWrapper = function DrawerWrapper(_ref) {
 };
 DrawerWrapper.displayName = 'DrawerWrapper';
 
-var _excluded$R = ["visible", "keyboard", "disableBackdropClick", "onClose", "onContentClick", "wrapClassName", "children", "placement"];
+var _excluded$O = ["visible", "keyboard", "disableBackdropClick", "onClose", "onContentClick", "wrapClassName", "children", "placement"];
 var DrawerComponent = function DrawerComponent(_ref) {
   var customVisible = _ref.visible,
     _ref$keyboard = _ref.keyboard,
@@ -7170,7 +7401,7 @@ var DrawerComponent = function DrawerComponent(_ref) {
     children = _ref.children,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'right' : _ref$placement,
-    props = _objectWithoutProperties(_ref, _excluded$R);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   var portal = usePortal('drawer');
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -7219,12 +7450,12 @@ var DrawerComponent = function DrawerComponent(_ref) {
 };
 DrawerComponent.displayName = 'Drawer';
 
-var _excluded$Q = ["className", "children"];
+var _excluded$N = ["className", "children"];
 var ModalTitleComponent = function ModalTitleComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7242,12 +7473,12 @@ var ModalTitleComponent = function ModalTitleComponent(_ref) {
 ModalTitleComponent.displayName = 'ModalTitle';
 var ModalTitle = withScale(ModalTitleComponent);
 
-var _excluded$P = ["className", "children"];
+var _excluded$M = ["className", "children"];
 var ModalSubtitleComponent = function ModalSubtitleComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$M);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7265,12 +7496,12 @@ var ModalSubtitleComponent = function ModalSubtitleComponent(_ref) {
 ModalSubtitleComponent.displayName = 'ModalSubtitle';
 var ModalSubtitle = withScale(ModalSubtitleComponent);
 
-var _excluded$O = ["className", "children"];
+var _excluded$L = ["className", "children"];
 var ModalContentComponent = function ModalContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -7292,12 +7523,12 @@ DrawerComponent.Title = ModalTitle;
 DrawerComponent.Subtitle = ModalSubtitle;
 DrawerComponent.Content = ModalContent;
 
-var _excluded$N = ["className", "children"];
+var _excluded$K = ["className", "children"];
 var FieldsetTitle = function FieldsetTitle(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   var classes = theme.useClasses('title', className);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -7311,12 +7542,12 @@ var FieldsetTitle = function FieldsetTitle(_ref) {
 };
 FieldsetTitle.displayName = 'FieldsetTitle';
 
-var _excluded$M = ["className", "children"];
+var _excluded$J = ["className", "children"];
 var FieldsetSubtitle = function FieldsetSubtitle(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
       className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || ""),
@@ -7329,12 +7560,12 @@ var FieldsetSubtitle = function FieldsetSubtitle(_ref) {
 };
 FieldsetSubtitle.displayName = 'FieldsetSubtitle';
 
-var _excluded$L = ["className", "children"];
+var _excluded$I = ["className", "children"];
 var FieldsetFooterComponent = function FieldsetFooterComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7350,12 +7581,12 @@ var FieldsetFooterComponent = function FieldsetFooterComponent(_ref) {
 FieldsetFooterComponent.displayName = 'FieldsetFooter';
 var FieldsetFooter = withScale(FieldsetFooterComponent);
 
-var _excluded$K = ["className", "children"];
+var _excluded$H = ["className", "children"];
 var FieldsetContentComponent = function FieldsetContentComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var classes = theme.useClasses('content', className);
@@ -7382,7 +7613,7 @@ var useFieldset = function useFieldset() {
   return React.useContext(FieldsetContext);
 };
 
-var _excluded$J = ["className", "title", "subtitle", "children", "value", "label"];
+var _excluded$G = ["className", "title", "subtitle", "children", "value", "label"];
 var FieldsetComponent = function FieldsetComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -7395,7 +7626,7 @@ var FieldsetComponent = function FieldsetComponent(_ref) {
     value = _ref$value === void 0 ? '' : _ref$value,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? '' : _ref$label,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -7459,14 +7690,14 @@ var FieldsetComponent = function FieldsetComponent(_ref) {
 FieldsetComponent.displayName = 'Fieldset';
 var Fieldset = withScale(FieldsetComponent);
 
-var _excluded$I = ["className", "children", "value", "onChange"];
+var _excluded$F = ["className", "children", "value", "onChange"];
 var FieldsetGroupComponent = function FieldsetGroupComponent(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     children = _ref.children,
     value = _ref.value,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -12175,7 +12406,7 @@ function setNestedObjectValues(object, value) {
 
 var __DEV__ = true;
 
-var _excluded$H = ["validateOnChange", "validateOnBlur", "validateOnMount", "isInitialValid", "enableReinitialize", "onSubmit"];
+var _excluded$E = ["validateOnChange", "validateOnBlur", "validateOnMount", "isInitialValid", "enableReinitialize", "onSubmit"];
 // State reducer
 function formikReducer(state, msg) {
   switch (msg.type) {
@@ -12259,7 +12490,7 @@ function useFormik(_ref) {
     _ref$enableReinitiali = _ref.enableReinitialize,
     enableReinitialize = _ref$enableReinitiali === void 0 ? false : _ref$enableReinitiali,
     onSubmit = _ref.onSubmit,
-    rest = _objectWithoutProperties(_ref, _excluded$H);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   var props = _objectSpread2({
     validateOnChange: validateOnChange,
     validateOnBlur: validateOnBlur,
@@ -13132,7 +13363,7 @@ function useEventCallback(fn) {
   }, []);
 }
 
-var _excluded$G = ["mapPropsToValues"],
+var _excluded$D = ["mapPropsToValues"],
   _excluded2 = ["children"];
 /**
  * A public higher-order component to access the imperative API
@@ -13149,7 +13380,7 @@ function withFormik(_ref) {
       }
       return val;
     } : _ref$mapPropsToValues,
-    config = _objectWithoutProperties(_ref, _excluded$G);
+    config = _objectWithoutProperties(_ref, _excluded$D);
   return function createFormik(Component) {
     var componentDisplayName = Component.displayName || Component.name || Component.constructor && Component.constructor.name || 'Component';
     /**
@@ -13209,7 +13440,7 @@ function withFormik(_ref) {
   };
 }
 
-var _excluded$F = ["component", "formik", "render", "children", "name"];
+var _excluded$C = ["component", "formik", "render", "children", "name"];
 var ErrorMessageImpl = /*#__PURE__*/function (_React$Component) {
   function ErrorMessageImpl() {
     _classCallCheck(this, ErrorMessageImpl);
@@ -13234,7 +13465,7 @@ var ErrorMessageImpl = /*#__PURE__*/function (_React$Component) {
         render = _this$props.render,
         children = _this$props.children,
         name = _this$props.name,
-        rest = _objectWithoutProperties(_this$props, _excluded$F);
+        rest = _objectWithoutProperties(_this$props, _excluded$C);
       var touch = getIn(formik.touched, name);
       var error = getIn(formik.errors, name);
       return !!touch && !!error ? render ? isFunction(render) ? render(error) : null : children ? isFunction(children) ? children(error) : null : component ? /*#__PURE__*/React__namespace.createElement(component, rest, error) : error : null;
@@ -13243,152 +13474,6 @@ var ErrorMessageImpl = /*#__PURE__*/function (_React$Component) {
 }(React__namespace.Component);
 var ErrorMessage = connect(ErrorMessageImpl);
 
-var _excluded$E = ["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$E);
-  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$D = ["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$D);
-  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$C = ["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$C);
-  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 Expandable = function Expandable(_ref) {
   var children = _ref.children,
     _ref$collapsedHeight = _ref.collapsedHeight,
@@ -13419,6 +13504,7 @@ var Expandable = function Expandable(_ref) {
 
   // Measure content height and detect overflow
   React.useEffect(function () {
+    var _contentRef$current$q, _contentRef$current;
     var el = contentRef.current;
     if (!el) return;
     var updateHeight = function updateHeight() {
@@ -13432,6 +13518,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 () {
@@ -13477,7 +13569,7 @@ var Expandable = function Expandable(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         style: fadeStyle
       })]
-    }), isOverflowing && /*#__PURE__*/jsxRuntime.jsx(Button$1, {
+    }), isOverflowing && /*#__PURE__*/jsxRuntime.jsx(Button, {
       "aria-expanded": expanded,
       onKeyDown: handleKey,
       margin: 0,