@helpdice/ui 2.6.0-beta.5 → 2.6.0-beta.7

package/dist/index.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@helpdice/icons');
 var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
+var Expandable$1 = require('components/expandable');
 var reactDom$1 = require('@floating-ui/react-dom');
 var pro = require('@helpdice/pro');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
@@ -1331,924 +1332,254 @@ var TextChild = function TextChild(_ref) {
 };
 TextChild.displayName = 'TextChild';
 
-var ButtonDrip = function ButtonDrip(_ref) {
-  var _ref$x = _ref.x,
-    x = _ref$x === void 0 ? 0 : _ref$x,
-    _ref$y = _ref.y,
-    y = _ref$y === void 0 ? 0 : _ref$y,
-    color = _ref.color,
-    onCompleted = _ref.onCompleted;
-  var dripRef = React.useRef(null);
-  /* istanbul ignore next */
-  var top = Number.isNaN(+y) ? 0 : y - 10;
-  /* istanbul ignore next */
-  var left = Number.isNaN(+x) ? 0 : x - 10;
-  React.useEffect(function () {
-    /* istanbul ignore next */
-    if (!dripRef.current) return;
-    dripRef.current.addEventListener('animationend', onCompleted);
-    return function () {
-      /* istanbul ignore next */
-      if (!dripRef.current) return;
-      dripRef.current.removeEventListener('animationend', onCompleted);
-    };
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    ref: dripRef,
-    className: "jsx-3424889537" + " " + "drip",
-    children: [/*#__PURE__*/jsxRuntime.jsx("svg", {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
-      style: {
-        top: top,
-        left: left
-      },
-      className: "jsx-3424889537",
-      children: /*#__PURE__*/jsxRuntime.jsx("g", {
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd",
-        className: "jsx-3424889537",
-        children: /*#__PURE__*/jsxRuntime.jsx("g", {
-          fill: color,
-          className: "jsx-3424889537",
-          children: /*#__PURE__*/jsxRuntime.jsx("rect", {
-            width: "100%",
-            height: "100%",
-            rx: "10",
-            className: "jsx-3424889537"
-          })
-        })
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "3424889537",
-      children: ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"
-    })]
+var _excluded$1m = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className", "display", "alignItems", "justify"];
+var _getModifierChild = function getModifierChild(tags, children) {
+  if (!tags.length) return children;
+  var nextTag = tags.slice(1, tags.length);
+  return /*#__PURE__*/jsxRuntime.jsx(TextChild, {
+    tag: tags[0],
+    children: _getModifierChild(nextTag, children)
   });
 };
-ButtonDrip.displayName = 'ButtonDrip';
-
-var _excluded$1m = ["children", "type", "color", "className", "spaceRatio"];
-var getIconBgColor = function getIconBgColor(type, palette, color) {
-  var colors = {
-    "default": palette.accents_6,
-    secondary: palette.secondary,
-    success: palette.success,
-    warning: palette.warning,
-    error: palette.error
-  };
-  return color ? color : colors[type];
-};
-var LoadingComponent = function LoadingComponent(_ref) {
-  var children = _ref.children,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    color = _ref.color,
+var TextComponent = function TextComponent(_ref) {
+  var _ref$h = _ref.h1,
+    h1 = _ref$h === void 0 ? false : _ref$h,
+    _ref$h2 = _ref.h2,
+    h2 = _ref$h2 === void 0 ? false : _ref$h2,
+    _ref$h3 = _ref.h3,
+    h3 = _ref$h3 === void 0 ? false : _ref$h3,
+    _ref$h4 = _ref.h4,
+    h4 = _ref$h4 === void 0 ? false : _ref$h4,
+    _ref$h5 = _ref.h5,
+    h5 = _ref$h5 === void 0 ? false : _ref$h5,
+    _ref$h6 = _ref.h6,
+    h6 = _ref$h6 === void 0 ? false : _ref$h6,
+    _ref$p = _ref.p,
+    p = _ref$p === void 0 ? false : _ref$p,
+    _ref$b = _ref.b,
+    b = _ref$b === void 0 ? false : _ref$b,
+    _ref$small = _ref.small,
+    small = _ref$small === void 0 ? false : _ref$small,
+    _ref$i = _ref.i,
+    i = _ref$i === void 0 ? false : _ref$i,
+    _ref$span = _ref.span,
+    span = _ref$span === void 0 ? false : _ref$span,
+    _ref$del = _ref.del,
+    del = _ref$del === void 0 ? false : _ref$del,
+    _ref$em = _ref.em,
+    em = _ref$em === void 0 ? false : _ref$em,
+    _ref$blockquote = _ref.blockquote,
+    blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$spaceRatio = _ref.spaceRatio,
-    spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    alignItems = _ref.alignItems,
+    justify = _ref.justify,
     props = _objectWithoutProperties(_ref, _excluded$1m);
-  var theme$1 = theme.useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = theme.useClasses('loading-container', className);
-  var bgColor = React.useMemo(function () {
-    return getIconBgColor(type, theme$1.palette, color);
-  }, [type, theme$1.palette, color]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || ""),
-    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading",
-      children: [children && /*#__PURE__*/jsxRuntime.jsx("label", {
-        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]),
-        children: children
-      }), /*#__PURE__*/jsxRuntime.jsx("i", {
-        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-      }), /*#__PURE__*/jsxRuntime.jsx("i", {
-        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-      }), /*#__PURE__*/jsxRuntime.jsx("i", {
-        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "2201634259",
-      dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio],
-      children: ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme$1.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")
-    })]
+  var elements = {
+    h1: h1,
+    h2: h2,
+    h3: h3,
+    h4: h4,
+    h5: h5,
+    h6: h6,
+    p: p,
+    blockquote: blockquote
+  };
+  var inlineElements = {
+    span: span,
+    small: small,
+    b: b,
+    em: em,
+    i: i,
+    del: del
+  };
+  var names = Object.keys(elements).filter(function (name) {
+    return elements[name];
+  });
+  var inlineNames = Object.keys(inlineElements).filter(function (name) {
+    return inlineElements[name];
+  });
+
+  /**
+   *  Render element "p" only if no element is found.
+   *  If there is only one modifier, just rendered one modifier element
+   *  e.g.
+   *    <Text /> => <p />
+   *    <Text em /> => <em />
+   *    <Text p em /> => <p><em>children</em></p>
+   *
+   */
+
+  var tag = React.useMemo(function () {
+    if (names[0]) return names[0];
+    if (inlineNames[0]) return inlineNames[0];
+    return 'p';
+  }, [names, inlineNames]);
+  var renderableChildElements = inlineNames.filter(function (name) {
+    return name !== tag;
+  });
+  var modifers = React.useMemo(function () {
+    if (!renderableChildElements.length) return children;
+    return _getModifierChild(renderableChildElements, children);
+  }, [renderableChildElements, children]);
+  return /*#__PURE__*/jsxRuntime.jsx(TextChild, _objectSpread2(_objectSpread2({
+    style: {
+      textAlign: props.align,
+      display: display,
+      alignItems: alignItems,
+      justifyContent: justify
+    },
+    className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
+    tag: tag
+  }, props), {}, {
+    children: modifers
   }));
 };
-LoadingComponent.displayName = 'Loading';
-var Loading = withScale(LoadingComponent);
+TextComponent.displayName = 'Text';
+var Text = withScale(TextComponent);
 
-var ButtonLoading = function ButtonLoading(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "jsx-212623367" + " " + "btn-loading",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Loading, {
-      color: color
+var InputError = function InputError(_ref) {
+  var text = _ref.text,
+    error = _ref.error;
+  return /*#__PURE__*/jsxRuntime.jsxs(Text, {
+    font: 0.8,
+    style: {
+      marginTop: 0.4,
+      marginRight: 0,
+      marginLeft: 0,
+      marginBottom: '0.4rem',
+      textAlign: 'left',
+      zIndex: 0
+    },
+    color: error ? "error" : 'default',
+    children: ["\xA0", text]
+  });
+};
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
+  var children = _ref2.children,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required;
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
+    children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
+      children: "*"
     }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "212623367",
-      children: ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"
+      id: "588038827",
+      dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
+      children: "label.__jsx-style-dynamic-selector{display:".concat(typeof children === "string" ? 'block' : 'flex', ";font-weight:normal;color:").concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector .mark-error.__jsx-style-dynamic-selector{color:").concat(theme$1.palette.errorDark, ";margin:0px 3px;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-size:").concat(SCALES.font(1.2), ";}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
     })]
   });
 };
-ButtonLoading.displayName = 'ButtonLoading';
+InputBlockLabelComponent.displayName = 'InputBlockLabel';
+var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
 
-var _excluded$1l = ["isRight", "isSingle", "children", "className"];
-var ButtonIcon = function ButtonIcon(_ref) {
-  var _ref$isRight = _ref.isRight,
-    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
-    isSingle = _ref.isSingle,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1l);
-  var classes = theme.useClasses('icon', {
-    right: isRight,
-    single: isSingle
-  }, className);
-  return /*#__PURE__*/jsxRuntime.jsxs("span", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || ""),
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "2467502931",
-      children: ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"
+var InputIconComponent = function InputIconComponent(_ref) {
+  var icon = _ref.icon,
+    _ref$clickable = _ref.clickable,
+    clickable = _ref$clickable === void 0 ? false : _ref$clickable,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    onClick: onClick,
+    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
+    children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "4247656379",
+      dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
+      children: ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
     })]
-  }));
+  });
 };
-ButtonIcon.displayName = 'ButtonIcon';
+InputIconComponent.displayName = 'InputIcon';
+var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
 
-var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
-  var icon = icons.icon,
-    iconRight = icons.iconRight;
-  var hasIcon = icon || iconRight;
-  var isRight = Boolean(iconRight);
-  var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
-  var classes = theme.useClasses('text', isRight ? 'right' : 'left');
-  if (!hasIcon) return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "text",
-    children: children
+var InputIconClear = function InputIconClear(_ref) {
+  var onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    visible = _ref.visible;
+  var theme$1 = theme.useTheme();
+  var classes = theme.useClasses('clear-icon', {
+    visible: visible
   });
-  if (React.Children.count(children) === 0) {
-    return /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
-      isRight: isRight,
-      isSingle: true,
-      children: hasIcon
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
-      isRight: isRight,
-      children: hasIcon
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || ""),
-      children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-        id: "3568181479",
-        dynamic: [paddingForAutoMode, paddingForAutoMode],
-        children: ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}")
+  var clickHandler = function clickHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M18 6L6 18",
+        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M6 6l12 12",
+        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
       })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1567030211",
+      dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
+      children: ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme$1.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
     })]
   });
 };
-var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
-  if (!config.isButtonGroup) return props;
-  return _objectSpread2(_objectSpread2({}, props), {}, {
-    auto: true,
-    shadow: false,
-    ghost: config.ghost || props.ghost,
-    type: config.type || props.type,
-    disabled: config.disabled || props.disabled
-  });
-};
-
-/* "use client" */
-
-var defaultContext$d = {
-  isButtonGroup: false,
-  disabled: false
-};
-var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$d);
-var useButtonGroupContext = function useButtonGroupContext() {
-  return React.useContext(ButtonGroupContext);
-};
-
-var hexToRgb = function hexToRgb(color) {
-  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  var full = color.replace(fullReg, function (_, r, g, b) {
-    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
-  });
-  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
-  if (!values) {
-    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
-  }
-  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
-};
-var colorToRgbValues = function colorToRgbValues(color) {
-  if (color.charAt(0) === '#') return hexToRgb(color);
-  var safeColor = color.replace(/ /g, '');
-  var colorType = color.substr(0, 4);
-  var regArray = safeColor.match(/\((.+)\)/);
-  if (!colorType.startsWith('rgb') || !regArray) {
-    console.log(color);
-    throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
-  }
-  return regArray[1].split(',').map(function (str) {
-    return Number.parseFloat(str);
-  });
-};
-var addColorAlpha = function addColorAlpha(color, alpha) {
-  if (!/^#|rgb|RGB/.test(color)) return color;
-  var _colorToRgbValues = colorToRgbValues(color),
-    _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3),
-    r = _colorToRgbValues2[0],
-    g = _colorToRgbValues2[1],
-    b = _colorToRgbValues2[2];
-  var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
-  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
-};
+var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
 
-var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
+var getColors$7 = function getColors(palette, status) {
   var colors = {
+    "default": {
+      color: palette.foreground,
+      borderColor: palette.border,
+      hoverBorder: palette.accents_5
+    },
     secondary: {
-      bg: palette.background,
-      border: palette.foreground,
       color: palette.foreground,
-      ripple: ''
+      borderColor: palette.secondary,
+      hoverBorder: palette.secondary
     },
     success: {
-      bg: palette.background,
-      border: palette.success,
-      color: palette.success,
-      ripple: ''
+      color: palette.foreground,
+      borderColor: palette.successLight,
+      hoverBorder: palette.success
     },
     warning: {
-      bg: palette.background,
-      border: palette.warning,
-      color: palette.warning,
-      ripple: ''
+      color: palette.foreground,
+      borderColor: palette.warningLight,
+      hoverBorder: palette.warning
     },
     error: {
-      bg: palette.background,
-      border: palette.error,
       color: palette.error,
-      ripple: ''
+      borderColor: palette.error,
+      hoverBorder: palette.errorDark
     }
   };
-  return colors[_color] || null;
+  if (!status) return colors["default"];
+  return colors[status];
 };
-var getButtonColors = function getButtonColors(palette, props) {
-  var color = props.color,
-    disabled = props.disabled,
-    ghost = props.ghost;
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.border,
-      color: palette.accents_5,
-      ripple: palette.accents_1
-    },
-    secondary: {
-      bg: palette.foreground,
-      border: palette.foreground,
-      color: palette.background,
-      ripple: palette.accents_1
-    },
-    success: {
-      bg: palette.success,
-      border: palette.success,
-      color: '#fff',
-      ripple: '#1f93ffff'
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.warning,
-      color: '#fff',
-      ripple: '#ffca29ff'
-    },
-    error: {
-      bg: palette.error,
-      border: palette.error,
-      color: '#fff',
-      ripple: '#ff5a55ff'
-    },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5,
-      ripple: palette.accents_1
-    }
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc',
-    ripple: ''
-  };
 
-  /**
-   * The '-light' type is the same color as the common type,
-   * only hover's color is different.
-   * e.g.
-   *   Color['success'] === Color['success-light']
-   *   Color['warning'] === Color['warning-light']
-   */
-  var withoutLightType = color === null || color === void 0 ? void 0 : color.replace('-light', '');
-  var defaultColor = colors["default"];
-  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
-  return colors[withoutLightType] || defaultColor;
-};
-var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _color) {
-  var colors = {
-    secondary: {
-      bg: palette.foreground,
-      border: palette.background,
-      color: palette.background
-    },
-    success: {
-      bg: palette.success,
-      border: palette.background,
-      color: 'white'
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.background,
-      color: 'white'
-    },
-    error: {
-      bg: palette.error,
-      border: palette.background,
-      color: 'white'
-    }
-  };
-  var withoutLightType = _color === null || _color === void 0 ? void 0 : _color.replace('-light', '');
-  return colors[withoutLightType] || null;
-};
-var getButtonHoverColors = function getButtonHoverColors(palette, props) {
-  var color = props.color,
-    disabled = props.disabled,
-    loading = props.loading,
-    shadow = props.shadow,
-    ghost = props.ghost;
-  var defaultColor = getButtonColors(palette, props);
-  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.foreground
-    },
-    secondary: {
-      bg: palette.background,
-      border: palette.foreground
-    },
-    success: {
-      bg: palette.background,
-      border: palette.success
-    },
-    warning: {
-      bg: palette.background,
-      border: palette.warning
-    },
-    error: {
-      bg: palette.background,
-      border: palette.error
-    },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5
-    },
-    'secondary-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'success-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'warning-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'error-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    })
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc'
-  };
-  if (loading) return _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-    color: 'transparent'
-  });
-  if (shadow) return defaultColor;
-  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, color) : colors[color]) || colors["default"];
-  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
-    color: hoverColor.color || hoverColor.border
-  });
-};
-var getButtonCursor = function getButtonCursor(disabled, loading) {
-  if (disabled) return {
-    cursor: 'not-allowed',
-    events: 'auto'
-  };
-  if (loading) return {
-    cursor: 'default',
-    events: 'none'
-  };
-  return {
-    cursor: 'pointer',
-    events: 'auto'
-  };
-};
-var getButtonDripColor = function getButtonDripColor(palette, props) {
-  var type = props.type;
-  var isLightHover = type ? type.endsWith('light') : false;
-  var hoverColors = getButtonHoverColors(palette, props);
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
-};
-
-var _excluded$1k = ["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();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var buttonRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  }); // Changed with !
-
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    dripShow = _useState2[0],
-    setDripShow = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dripX = _useState4[0],
-    setDripX = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    dripY = _useState6[0],
-    setDripY = _useState6[1];
-  var groupConfig = useButtonGroupContext();
-  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  var children = filteredProps.children,
-    _filteredProps$disabl = filteredProps.disabled,
-    disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl;
-    filteredProps.color;
-    var _filteredProps$loadin = filteredProps.loading,
-    loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
-    _filteredProps$shadow = filteredProps.shadow,
-    shadow = _filteredProps$shadow === void 0 ? false : _filteredProps$shadow,
-    _filteredProps$ghost = filteredProps.ghost,
-    ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
-    _filteredProps$effect = filteredProps.effect,
-    effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
-    _filteredProps$round = filteredProps.round,
-    round = _filteredProps$round === void 0 ? false : _filteredProps$round;
-    filteredProps.relative;
-    filteredProps.replace;
-    filteredProps.a;
-    var to = filteredProps.to,
-    onClick = filteredProps.onClick,
-    _filteredProps$auto = filteredProps.auto,
-    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
-    icon = filteredProps.icon,
-    _filteredProps$type = filteredProps.type,
-    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
-    iconRight = filteredProps.iconRight,
-    _filteredProps$classN = filteredProps.className,
-    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
-    filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$1k);
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-
-  var _useMemo = React.useMemo(function () {
-      return getButtonColors(theme$1.palette, filteredProps);
-    }, [theme$1.palette, filteredProps]),
-    bg = _useMemo.bg,
-    border = _useMemo.border,
-    color = _useMemo.color,
-    rippleColor = _useMemo.ripple;
-  var hover = React.useMemo(function () {
-    return getButtonHoverColors(theme$1.palette, filteredProps);
-  }, [theme$1.palette, filteredProps]);
-  var _useMemo2 = React.useMemo(function () {
-      return getButtonCursor(disabled, loading);
-    }, [disabled, loading]),
-    cursor = _useMemo2.cursor,
-    events = _useMemo2.events;
-  var dripColor = React.useMemo(function () {
-    return getButtonDripColor(theme$1.palette, filteredProps);
-  }, [theme$1.palette, filteredProps]);
-
-  /* istanbul ignore next */
-  var dripCompletedHandle = function dripCompletedHandle() {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-  var createRipple = function createRipple(event) {
-    var button = buttonRef.current;
-    if (!button) return;
-    var rect = button.getBoundingClientRect();
-    var size = Math.max(rect.width, rect.height);
-    var x = event.clientX - rect.left - size / 2;
-    var y = event.clientY - rect.top - size / 2;
-    var rippleCount = 1; // number of rings
-    var rippleDelay = 500; // ms between each ripple
-    var _loop = function _loop() {
-      var ripple = document.createElement('span');
-      Object.assign(ripple.style, {
-        position: 'absolute',
-        borderRadius: '50%',
-        backgroundColor: rippleColor,
-        width: "".concat(size, "px"),
-        height: "".concat(size, "px"),
-        left: "".concat(x, "px"),
-        top: "".concat(y, "px"),
-        pointerEvents: 'none',
-        transform: 'scale(0)',
-        opacity: '1',
-        transition: "transform 600ms ease-out ".concat(i * rippleDelay, "ms, opacity 600ms ease-out ").concat(i * rippleDelay, "ms"),
-        zIndex: 1
-      });
-      button.appendChild(ripple);
-
-      // Force reflow to start transition
-      window.getComputedStyle(ripple).opacity;
-      ripple.style.transform = 'scale(2.5)';
-      ripple.style.opacity = '0';
-      ripple.addEventListener('transitionend', function () {
-        ripple.remove();
-      });
-    };
-    for (var i = 0; i < rippleCount; i++) {
-      _loop();
-    }
-  };
-  var clickHandler = function clickHandler(event) {
-    if (disabled || loading) return;
-    var showDrip = !shadow && !ghost && effect;
-    /* istanbul ignore next */
-    if (showDrip && buttonRef.current) {
-      var rect = buttonRef.current.getBoundingClientRect();
-      setDripShow(true);
-      setDripX(event.clientX - rect.left);
-      setDripY(event.clientY - rect.top);
-    }
-    if (shadow) {
-      createRipple(event);
-    }
-    onClick && onClick(event);
-  };
-  var childrenWithIcon = React.useMemo(function () {
-    return getButtonChildrenWithIcon(auto, children, {
-      icon: icon,
-      iconRight: iconRight
-    });
-  }, [auto, children, icon, iconRight]);
-  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
-    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
-
-  // If shadow provided is string then value other default
-  var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [to ? /*#__PURE__*/jsxRuntime.jsxs("a", _objectSpread2(_objectSpread2({
-      href: to
-    }, props), {}, {
-      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', 'btn-link', className) || ""),
-      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
-        color: color
-      }), childrenWithIcon]
-    })) : /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread2(_objectSpread2({
-      ref: buttonRef,
-      type: type,
-      disabled: disabled,
-      onClick: clickHandler
-    }, props), {}, {
-      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || ""),
-      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
-        color: color
-      }), childrenWithIcon, dripShow && /*#__PURE__*/jsxRuntime.jsx(ButtonDrip, {
-        x: dripX,
-        y: dripY,
-        color: dripColor,
-        onCompleted: dripCompletedHandle
-      })]
-    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "612376042",
-      dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px'],
-      children: ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(shadow ? 'transparent' : border, ";cursor:").concat(cursor !== null && cursor !== void 0 ? cursor : 'pointer', ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn-link.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")
-    })]
-  });
-});
-ButtonComponent.displayName = 'Button';
-var Button = withScale(ButtonComponent);
-
-var CompactButton = function CompactButton(props) {
-  // const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
-    scale: 2 / 3,
-    px: 0.6
-  }, _objectSpread2({
-    auto: true
-  }, props)), {}, {
-    children: props.children
-  }));
-};
-var IconButton = /*#__PURE__*/React.memo(CompactButton);
-
-var SmallButton = function SmallButton(props) {
-  // const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6
-  }, props), {}, {
-    children: props.children
-  }));
-};
-var SmallButton$1 = /*#__PURE__*/React.memo(SmallButton);
-
-/* "use client" */
-
-Button.Icon = IconButton;
-Button.Small = SmallButton$1;
-
-var _excluded$1j = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className", "display", "alignItems", "justify"];
-var _getModifierChild = function getModifierChild(tags, children) {
-  if (!tags.length) return children;
-  var nextTag = tags.slice(1, tags.length);
-  return /*#__PURE__*/jsxRuntime.jsx(TextChild, {
-    tag: tags[0],
-    children: _getModifierChild(nextTag, children)
-  });
-};
-var TextComponent = function TextComponent(_ref) {
-  var _ref$h = _ref.h1,
-    h1 = _ref$h === void 0 ? false : _ref$h,
-    _ref$h2 = _ref.h2,
-    h2 = _ref$h2 === void 0 ? false : _ref$h2,
-    _ref$h3 = _ref.h3,
-    h3 = _ref$h3 === void 0 ? false : _ref$h3,
-    _ref$h4 = _ref.h4,
-    h4 = _ref$h4 === void 0 ? false : _ref$h4,
-    _ref$h5 = _ref.h5,
-    h5 = _ref$h5 === void 0 ? false : _ref$h5,
-    _ref$h6 = _ref.h6,
-    h6 = _ref$h6 === void 0 ? false : _ref$h6,
-    _ref$p = _ref.p,
-    p = _ref$p === void 0 ? false : _ref$p,
-    _ref$b = _ref.b,
-    b = _ref$b === void 0 ? false : _ref$b,
-    _ref$small = _ref.small,
-    small = _ref$small === void 0 ? false : _ref$small,
-    _ref$i = _ref.i,
-    i = _ref$i === void 0 ? false : _ref$i,
-    _ref$span = _ref.span,
-    span = _ref$span === void 0 ? false : _ref$span,
-    _ref$del = _ref.del,
-    del = _ref$del === void 0 ? false : _ref$del,
-    _ref$em = _ref.em,
-    em = _ref$em === void 0 ? false : _ref$em,
-    _ref$blockquote = _ref.blockquote,
-    blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
-    _ref$noWrap = _ref.noWrap,
-    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
-    _ref$collapse = _ref.collapse,
-    collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'block' : _ref$display,
-    alignItems = _ref.alignItems,
-    justify = _ref.justify,
-    props = _objectWithoutProperties(_ref, _excluded$1j);
-  var elements = {
-    h1: h1,
-    h2: h2,
-    h3: h3,
-    h4: h4,
-    h5: h5,
-    h6: h6,
-    p: p,
-    blockquote: blockquote
-  };
-  var inlineElements = {
-    span: span,
-    small: small,
-    b: b,
-    em: em,
-    i: i,
-    del: del
-  };
-  var names = Object.keys(elements).filter(function (name) {
-    return elements[name];
-  });
-  var inlineNames = Object.keys(inlineElements).filter(function (name) {
-    return inlineElements[name];
-  });
-
-  /**
-   *  Render element "p" only if no element is found.
-   *  If there is only one modifier, just rendered one modifier element
-   *  e.g.
-   *    <Text /> => <p />
-   *    <Text em /> => <em />
-   *    <Text p em /> => <p><em>children</em></p>
-   *
-   */
-
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
-  var tag = React.useMemo(function () {
-    if (names[0]) return names[0];
-    if (inlineNames[0]) return inlineNames[0];
-    return 'p';
-  }, [names, inlineNames]);
-  var renderableChildElements = inlineNames.filter(function (name) {
-    return name !== tag;
-  });
-  var modifers = React.useMemo(function () {
-    if (!renderableChildElements.length) return children;
-    return _getModifierChild(renderableChildElements, children);
-  }, [renderableChildElements, children]);
-  return /*#__PURE__*/jsxRuntime.jsx(TextChild, _objectSpread2(_objectSpread2({
-    style: {
-      textAlign: props.align,
-      display: display,
-      alignItems: alignItems,
-      justifyContent: justify
-    },
-    className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
-    tag: tag
-  }, props), {}, {
-    children: typeof children === 'string' && collapse > 50 ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [expand ? modifers : (modifers === null || modifers === void 0 ? void 0 : modifers.toString().substring(0, collapse)) + '...', /*#__PURE__*/jsxRuntime.jsx(Button, {
-        margin: 0,
-        onClick: function onClick() {
-          return setExpand(!expand);
-        },
-        style: {
-          textTransform: 'lowercase'
-        },
-        effect: false,
-        color: "abort",
-        scale: 2 / 3,
-        px: 0.2,
-        py: 0,
-        auto: true,
-        children: /*#__PURE__*/jsxRuntime.jsx("b", {
-          children: expand ? 'less' : 'more'
-        })
-      })]
-    }) : modifers
-  }));
-};
-TextComponent.displayName = 'Text';
-var Text = withScale(TextComponent);
-
-var InputError = function InputError(_ref) {
-  var text = _ref.text,
-    error = _ref.error;
-  return /*#__PURE__*/jsxRuntime.jsxs(Text, {
-    font: 0.8,
-    style: {
-      marginTop: 0.4,
-      marginRight: 0,
-      marginLeft: 0,
-      marginBottom: '0.4rem',
-      textAlign: 'left',
-      zIndex: 0
-    },
-    color: error ? "error" : 'default',
-    children: ["\xA0", text]
-  });
-};
-var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
-  var children = _ref2.children,
-    _ref2$required = _ref2.required,
-    required = _ref2$required === void 0 ? false : _ref2$required;
-  var theme$1 = theme.useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]),
-    children: [children, required && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error",
-      children: "*"
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "588038827",
-      dynamic: [typeof children === "string" ? 'block' : 'flex', theme$1.palette.accents_6, theme$1.palette.errorDark, SCALES.font(1.2)],
-      children: "label.__jsx-style-dynamic-selector{display:".concat(typeof children === "string" ? 'block' : 'flex', ";font-weight:normal;color:").concat(theme$1.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector .mark-error.__jsx-style-dynamic-selector{color:").concat(theme$1.palette.errorDark, ";margin:0px 3px;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-size:").concat(SCALES.font(1.2), ";}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")
-    })]
-  });
-};
-InputBlockLabelComponent.displayName = 'InputBlockLabel';
-var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
-
-var InputIconComponent = function InputIconComponent(_ref) {
-  var icon = _ref.icon,
-    _ref$clickable = _ref.clickable,
-    clickable = _ref$clickable === void 0 ? false : _ref$clickable,
-    onClick = _ref.onClick;
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    onClick: onClick,
-    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon",
-    children: [icon, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "4247656379",
-      dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none'],
-      children: ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
-    })]
-  });
-};
-InputIconComponent.displayName = 'InputIcon';
-var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
-
-var InputIconClear = function InputIconClear(_ref) {
-  var onClick = _ref.onClick,
-    disabled = _ref.disabled,
-    visible = _ref.visible;
-  var theme$1 = theme.useTheme();
-  var classes = theme.useClasses('clear-icon', {
-    visible: visible
-  });
-  var clickHandler = function clickHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    onClick && onClick(event);
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]) + " " + (classes || ""),
-    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none",
-      shapeRendering: "geometricPrecision",
-      className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]]),
-      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M18 6L6 18",
-        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-      }), /*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M6 6l12 12",
-        className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground]]])
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1567030211",
-      dynamic: [disabled ? 'not-allowed' : 'pointer', theme$1.palette.accents_3, disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground],
-      children: ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme$1.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme$1.palette.accents_3 : theme$1.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")
-    })]
-  });
-};
-var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
-
-var getColors$7 = function getColors(palette, status) {
-  var colors = {
-    "default": {
-      color: palette.foreground,
-      borderColor: palette.border,
-      hoverBorder: palette.accents_5
-    },
-    secondary: {
-      color: palette.foreground,
-      borderColor: palette.secondary,
-      hoverBorder: palette.secondary
-    },
-    success: {
-      color: palette.foreground,
-      borderColor: palette.successLight,
-      hoverBorder: palette.success
-    },
-    warning: {
-      color: palette.foreground,
-      borderColor: palette.warningLight,
-      hoverBorder: palette.warning
-    },
-    error: {
-      color: palette.error,
-      borderColor: palette.error,
-      hoverBorder: palette.errorDark
-    }
-  };
-  if (!status) return colors["default"];
-  return colors[status];
-};
-
-var _excluded$1i = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth", "required"];
-var simulateChangeEvent = function simulateChangeEvent(el, event) {
-  return _objectSpread2(_objectSpread2({}, event), {}, {
-    target: el,
-    currentTarget: el
-  });
+var _excluded$1l = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth", "required"];
+var simulateChangeEvent = function simulateChangeEvent(el, event) {
+  return _objectSpread2(_objectSpread2({}, event), {}, {
+    target: el,
+    currentTarget: el
+  });
 };
 var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var label = _ref.label,
@@ -2290,7 +1621,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     required = _ref.required,
-    props = _objectWithoutProperties(_ref, _excluded$1i);
+    props = _objectWithoutProperties(_ref, _excluded$1l);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -2450,7 +1781,7 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$1h = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
+var _excluded$1k = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -2474,7 +1805,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     required = _ref.required,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$1h);
+    props = _objectWithoutProperties(_ref, _excluded$1k);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -2598,11 +1929,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$1g = ["hideToggle", "children"];
+var _excluded$1j = ["hideToggle", "children"];
 var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1g);
+    props = _objectWithoutProperties(_ref, _excluded$1j);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -4210,7 +3541,7 @@ var repositionCursor = function repositionCursor(_ref) {
   };
 };
 
-var _excluded$1f = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
+var _excluded$1i = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
 var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$allowDecimals = _ref.allowDecimals,
     allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
@@ -4252,7 +3583,7 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$formatValueOnBlu = _ref.formatValueOnBlur,
     formatValueOnBlur = _ref$formatValueOnBlu === void 0 ? true : _ref$formatValueOnBlu,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1f);
+    props = _objectWithoutProperties(_ref, _excluded$1i);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var theme$1 = theme.useTheme();
@@ -4562,10 +3893,10 @@ Input.Currency = CurrencyInput;
 
 /* "use client" */
 
-var defaultContext$c = {
+var defaultContext$d = {
   visible: false
 };
-var AutoCompleteContext = /*#__PURE__*/React.createContext(defaultContext$c);
+var AutoCompleteContext = /*#__PURE__*/React.createContext(defaultContext$d);
 var useAutoCompleteContext = function useAutoCompleteContext() {
   return React.useContext(AutoCompleteContext);
 };
@@ -4678,7 +4009,59 @@ var AutoCompleteEmpty = function AutoCompleteEmpty(_ref) {
 };
 AutoCompleteEmpty.displayName = 'AutoCompleteEmpty';
 
-var _excluded$1e = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "color", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
+var _excluded$1h = ["children", "type", "color", "className", "spaceRatio"];
+var getIconBgColor = function getIconBgColor(type, palette, color) {
+  var colors = {
+    "default": palette.accents_6,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  return color ? color : colors[type];
+};
+var LoadingComponent = function LoadingComponent(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    color = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$spaceRatio = _ref.spaceRatio,
+    spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
+    props = _objectWithoutProperties(_ref, _excluded$1h);
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = theme.useClasses('loading-container', className);
+  var bgColor = React.useMemo(function () {
+    return getIconBgColor(type, theme$1.palette, color);
+  }, [type, theme$1.palette, color]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading",
+      children: [children && /*#__PURE__*/jsxRuntime.jsx("label", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]]),
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      }), /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio]]])
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2201634259",
+      dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme$1.palette.accents_5, bgColor, spaceRatio],
+      children: ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme$1.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")
+    })]
+  }));
+};
+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 childrenToOptionsNode = function childrenToOptionsNode(options) {
   return options.map(function (item, index) {
     var key = "auto-complete-item-".concat(index);
@@ -4727,7 +4110,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$1e);
+    props = _objectWithoutProperties(_ref, _excluded$1g);
   var resetTimer = React.useRef(0); // DEFAULT Value 0
   var _useScale = useScale(),
     SCALES = _useScale.SCALES,
@@ -4880,370 +4263,963 @@ AutoComplete.Option = AutoCompleteItemComponent;
 AutoComplete.Searching = AutoCompleteSearch;
 AutoComplete.Empty = AutoCompleteEmpty;
 
-var _excluded$1d = ["src", "errorSrc", "stacked", "text", "isSquare", "className", "children"];
+var _excluded$1f = ["src", "errorSrc", "stacked", "text", "isSquare", "className", "children"];
 var safeText = function safeText(text) {
   if (text.length <= 4) return text;
   return text.slice(0, 3);
 };
-var errorImgLight = "data:image/webp;base64,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";
-var errorImgDark = "data:image/webp;base64,UklGRggDAABXRUJQVlA4IPwCAAAQIQCdASoTAbcAPm02l0ikIyIhJX44AIANiWlu4E1KTt+5o+dNz5KQmunMAEWeLdn4fSlkZb8GexjRU/Ou84xRfScFqpt1u/JfQimZ639RtU7B2bKXSFGVnfq0bg1GzUCqaT6a2+VsoXbVBjLTqr7jY6R5jiaWPahSeFDpWKJYbXvcWjuqlJ0T7n1xVigXAsPFMpiRrpEsJcOUMSMn58RykEMNydMv7kFV2nEw1EMYS+N8othCiqn0DIXlNqEzN1PfKhB451H/5NH9LmmehOq8SSsQgDkUuPgBPRMHvMr4UcbkeF8/J3IqtrvbpxaNSDSO70Xn9ptfVuxDqvt3RXfcdc8qNkGTF6ljEaNyd57ToAAA/vlmpfvJUdX+gHYSAAv/2ax8aWf6hojTaLFUrpvZggugZ4stRlPWFwsNa+y2tuY/CRLJV/AVFJ2EWOonLtEM81iwHxgdKlJag39ZeUofXsvT5YVzmtqSww/m9RgEFcu4qtE0/EsyritDLQUbFYHMhrzGwsyuPVneeB7W+j4fRY30ZEy3bHBPJiCtgbC/upgO7mI8j3qnbY+K0b/xffatY7sIdVXb0zPhQHzsRw5OVc5a0fzVPpYJdSsPs8el3yLSzBFgXRPApkW/LJWxhVQiXJqFZ+WclqioLswepUNm/TpZ15O4KhXRzBHghsFctp+iLScSxp5YQ1Vkls1wL58PK/+4YNmshD0T4DY6zl306cJCYGt4IA4nNZ1BpTwWNEd//w/317synowZdTvPyWXrcXwadvui2tWSHDchOkZ/svXH/7jwIgZHngPkcMfQgPqUv+8ZFnPpT2SNG41gxntCp1aP2PzeNVnVA2lNhOe2BwyseNoBlUXXsoA1GfZ/PW+eb0sgrlro4GSOMj4M4EefnJGImmcamKiRZ1rx+eeB30MuoShhP6xOCgAAyzagBecwOkVfwVrmYPOkkMFLeVRm1TamamDugJyzpWgR7Q+PiVX20fvrmVXNdsnJ/DpmqwRtxjUGtPobFIQAAA==";
-var AvatarComponent = function AvatarComponent(_ref) {
-  var src = _ref.src;
-    _ref.errorSrc;
-    var _ref$stacked = _ref.stacked,
-    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
-    _ref$text = _ref.text,
-    text = _ref$text === void 0 ? '' : _ref$text,
-    _ref$isSquare = _ref.isSquare,
-    isSquare = _ref$isSquare === void 0 ? false : _ref$isSquare,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
+var errorImgLight = "data:image/webp;base64,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";
+var errorImgDark = "data:image/webp;base64,UklGRggDAABXRUJQVlA4IPwCAAAQIQCdASoTAbcAPm02l0ikIyIhJX44AIANiWlu4E1KTt+5o+dNz5KQmunMAEWeLdn4fSlkZb8GexjRU/Ou84xRfScFqpt1u/JfQimZ639RtU7B2bKXSFGVnfq0bg1GzUCqaT6a2+VsoXbVBjLTqr7jY6R5jiaWPahSeFDpWKJYbXvcWjuqlJ0T7n1xVigXAsPFMpiRrpEsJcOUMSMn58RykEMNydMv7kFV2nEw1EMYS+N8othCiqn0DIXlNqEzN1PfKhB451H/5NH9LmmehOq8SSsQgDkUuPgBPRMHvMr4UcbkeF8/J3IqtrvbpxaNSDSO70Xn9ptfVuxDqvt3RXfcdc8qNkGTF6ljEaNyd57ToAAA/vlmpfvJUdX+gHYSAAv/2ax8aWf6hojTaLFUrpvZggugZ4stRlPWFwsNa+y2tuY/CRLJV/AVFJ2EWOonLtEM81iwHxgdKlJag39ZeUofXsvT5YVzmtqSww/m9RgEFcu4qtE0/EsyritDLQUbFYHMhrzGwsyuPVneeB7W+j4fRY30ZEy3bHBPJiCtgbC/upgO7mI8j3qnbY+K0b/xffatY7sIdVXb0zPhQHzsRw5OVc5a0fzVPpYJdSsPs8el3yLSzBFgXRPApkW/LJWxhVQiXJqFZ+WclqioLswepUNm/TpZ15O4KhXRzBHghsFctp+iLScSxp5YQ1Vkls1wL58PK/+4YNmshD0T4DY6zl306cJCYGt4IA4nNZ1BpTwWNEd//w/317synowZdTvPyWXrcXwadvui2tWSHDchOkZ/svXH/7jwIgZHngPkcMfQgPqUv+8ZFnPpT2SNG41gxntCp1aP2PzeNVnVA2lNhOe2BwyseNoBlUXXsoA1GfZ/PW+eb0sgrlro4GSOMj4M4EefnJGImmcamKiRZ1rx+eeB30MuoShhP6xOCgAAyzagBecwOkVfwVrmYPOkkMFLeVRm1TamamDugJyzpWgR7Q+PiVX20fvrmVXNdsnJ/DpmqwRtxjUGtPobFIQAAA==";
+var AvatarComponent = function AvatarComponent(_ref) {
+  var src = _ref.src;
+    _ref.errorSrc;
+    var _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? '' : _ref$text,
+    _ref$isSquare = _ref.isSquare,
+    isSquare = _ref$isSquare === void 0 ? false : _ref$isSquare,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$1f);
+  var theme$1 = theme.useTheme();
+  var fallbackSrc = theme$1.type === 'dark' ? errorImgDark : errorImgLight;
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var showText = !src;
+  var radius = isSquare ? theme$1.layout.radius : '50%';
+  var marginLeft = stacked ? SCALES.ml(-0.625) : SCALES.ml(0);
+  var classes = theme.useClasses('avatar', className);
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    className: _JSXStyle.dynamic([["2295275975", [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || ""),
+    children: [!text || !showText ? /*#__PURE__*/jsxRuntime.jsx("img", _objectSpread2(_objectSpread2({
+      alt: "avatar",
+      src: src !== null && src !== void 0 ? src : fallbackSrc,
+      draggable: false
+    }, props), {}, {
+      onError: function onError(e) {
+        e.currentTarget.onerror = null; // prevent loop
+        e.currentTarget.src = fallbackSrc;
+      },
+      className: _JSXStyle.dynamic([["2295275975", [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
+    })) : null, showText && /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread2(_objectSpread2({}, props), {}, {
+      className: _JSXStyle.dynamic([["2295275975", [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text"),
+      children: text ? safeText(text) : children
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2295275975",
+      dynamic: [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)],
+      children: ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border:1px solid ".concat(theme$1.palette.accents_2, ";border-radius:").concat(radius, ";vertical-align:top;background-color:").concat(theme$1.palette.background, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")
+    })]
+  });
+};
+AvatarComponent.displayName = 'Avatar';
+var Avatar = withScale(AvatarComponent);
+
+var AvatarGroupComponent = function AvatarGroupComponent(_ref) {
+  var count = _ref.count,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children;
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: _JSXStyle.dynamic([["1135268764", [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme$1.palette.accents_7]]]) + " " + (theme.useClasses('avatar-group', className) || ""),
+    children: [children, count && /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: _JSXStyle.dynamic([["1135268764", [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme$1.palette.accents_7]]]) + " " + "count",
+      children: ["+", count]
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1135268764",
+      dynamic: [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme$1.palette.accents_7],
+      children: ".avatar-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:".concat(SCALES.width(1, 'max-content'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-").concat(SCALES.ml(0.625), ";}.count.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(0.875), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:5.5px;color:").concat(theme$1.palette.accents_7, ";}")
+    })]
+  });
+};
+AvatarGroupComponent.displayName = 'AvatarGroup';
+var AvatarGroup = withScale(AvatarGroupComponent);
+
+/* "use client" */
+
+Avatar.Group = AvatarGroup;
+
+var _excluded$1e = ["color", "className", "children", "dot"];
+var getBgColor = function getBgColor(type, palette) {
+  var colors = {
+    "default": palette.foreground,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    secondary: palette.secondary
+  };
+  return colors[type];
+};
+var BadgeComponent = function BadgeComponent(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    _ref$dot = _ref.dot,
+    dot = _ref$dot === void 0 ? false : _ref$dot,
+    props = _objectWithoutProperties(_ref, _excluded$1e);
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var bg = React.useMemo(function () {
+    return getBgColor(color, theme$1.palette);
+  }, [color, theme$1.palette]);
+  var _color = React.useMemo(function () {
+    if (!color || color === 'default') return theme$1.palette.background;
+    return 'white';
+  }, [color, theme$1.palette.background]);
+  var classes = theme.useClasses('badge', {
+    dot: dot
+  }, className);
+  return /*#__PURE__*/jsxRuntime.jsxs("span", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["120113192", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.5375), SCALES.pb(0.30), SCALES.pl(0.5375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [!dot && children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "120113192",
+      dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.5375), SCALES.pb(0.30), SCALES.pl(0.5375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)],
+      children: ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.5375), " ").concat(SCALES.pb(0.30), " ").concat(SCALES.pl(0.5375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")
+    })]
+  }));
+};
+BadgeComponent.displayName = 'Badge';
+var Badge = withScale(BadgeComponent);
+
+tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+var getTransform = function getTransform(placement) {
+  var styles = {
+    topLeft: {
+      top: '0',
+      left: '0',
+      value: 'translate(-50%, -50%)',
+      origin: '0% 0%'
+    },
+    topRight: {
+      top: '0',
+      right: '0',
+      value: 'translate(50%, -50%)',
+      origin: '100% 0%'
+    },
+    bottomLeft: {
+      left: '0',
+      bottom: '0',
+      value: 'translate(-50%, 50%)',
+      origin: '0% 100%'
+    },
+    bottomRight: {
+      right: '0',
+      bottom: '0',
+      value: 'translate(50%, 50%)',
+      origin: '100% 100%'
+    }
+  };
+  return styles[placement];
+};
+var BadgeAnchor = function BadgeAnchor(_ref) {
+  var children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'topRight' : _ref$placement;
+  var _pickChild = pickChild(children, Badge),
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutBadgeChildren = _pickChild2[0],
+    badgeChldren = _pickChild2[1];
+  var _useMemo = React.useMemo(function () {
+      return getTransform(placement);
+    }, [placement]),
+    top = _useMemo.top,
+    bottom = _useMemo.bottom,
+    left = _useMemo.left,
+    right = _useMemo.right,
+    value = _useMemo.value,
+    origin = _useMemo.origin;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]]) + " " + "anchor",
+    children: [withoutBadgeChildren, /*#__PURE__*/jsxRuntime.jsx("sup", {
+      className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]]),
+      children: badgeChldren
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1121745930",
+      dynamic: [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin],
+      children: ".anchor.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;}sup.__jsx-style-dynamic-selector{position:absolute;top:".concat(top || 'auto', ";left:").concat(left || 'auto', ";right:").concat(right || 'auto', ";bottom:").concat(bottom || 'auto', ";-webkit-transform:").concat(value, ";-ms-transform:").concat(value, ";transform:").concat(value, ";-webkit-transform-origin:").concat(origin, ";-ms-transform-origin:").concat(origin, ";transform-origin:").concat(origin, ";z-index:1;}")
+    })]
+  });
+};
+BadgeAnchor.displayName = 'BadgeAnchor';
+
+/* "use client" */
+
+Badge.Anchor = BadgeAnchor;
+
+var Separator = function Separator(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = theme.useClasses('separator', className);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: _JSXStyle.dynamic([["1571781185", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0.5), SCALES.mb(0), SCALES.ml(0.5)]]]) + " " + (classes || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "1571781185",
+      dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0.5), SCALES.mb(0), SCALES.ml(0.5)],
+      children: ".separator.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.5), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.5), ";}")
+    })]
+  });
+};
+Separator.displayName = 'BreadcrumbsSeparator';
+var BreadcrumbsSeparator = withScale(Separator);
+
+var hexToRgb = function hexToRgb(color) {
+  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  var full = color.replace(fullReg, function (_, r, g, b) {
+    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+  });
+  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+  if (!values) {
+    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
+  }
+  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
+};
+var colorToRgbValues = function colorToRgbValues(color) {
+  if (color.charAt(0) === '#') return hexToRgb(color);
+  var safeColor = color.replace(/ /g, '');
+  var colorType = color.substr(0, 4);
+  var regArray = safeColor.match(/\((.+)\)/);
+  if (!colorType.startsWith('rgb') || !regArray) {
+    console.log(color);
+    throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
+  }
+  return regArray[1].split(',').map(function (str) {
+    return Number.parseFloat(str);
+  });
+};
+var addColorAlpha = function addColorAlpha(color, alpha) {
+  if (!/^#|rgb|RGB/.test(color)) return color;
+  var _colorToRgbValues = colorToRgbValues(color),
+    _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3),
+    r = _colorToRgbValues2[0],
+    g = _colorToRgbValues2[1],
+    b = _colorToRgbValues2[2];
+  var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
+};
+
+var BreadcrumbsComponent = function BreadcrumbsComponent(_ref) {
+  var _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? '/' : _ref$separator,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1d);
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
   var theme$1 = theme.useTheme();
-  var fallbackSrc = theme$1.type === 'dark' ? errorImgDark : errorImgLight;
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  var showText = !src;
-  var radius = isSquare ? theme$1.layout.radius : '50%';
-  var marginLeft = stacked ? SCALES.ml(-0.625) : SCALES.ml(0);
-  var classes = theme.useClasses('avatar', className);
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: _JSXStyle.dynamic([["2295275975", [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || ""),
-    children: [!text || !showText ? /*#__PURE__*/jsxRuntime.jsx("img", _objectSpread2(_objectSpread2({
-      alt: "avatar",
-      src: src !== null && src !== void 0 ? src : fallbackSrc,
-      draggable: false
-    }, props), {}, {
-      onError: function onError(e) {
-        e.currentTarget.onerror = null; // prevent loop
-        e.currentTarget.src = fallbackSrc;
-      },
-      className: _JSXStyle.dynamic([["2295275975", [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
-    })) : null, showText && /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread2(_objectSpread2({}, props), {}, {
-      className: _JSXStyle.dynamic([["2295275975", [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text"),
-      children: text ? safeText(text) : children
-    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "2295275975",
-      dynamic: [theme$1.palette.accents_2, radius, theme$1.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)],
-      children: ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border:1px solid ".concat(theme$1.palette.accents_2, ";border-radius:").concat(radius, ";vertical-align:top;background-color:").concat(theme$1.palette.background, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")
+  var hoverColor = React.useMemo(function () {
+    return addColorAlpha(theme$1.palette.link, 0.85);
+  }, [theme$1.palette.link]);
+  var childrenArray = React.Children.toArray(children);
+  var withSeparatorChildren = childrenArray.map(function (item, index) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return item;
+    var last = childrenArray[index - 1];
+    var lastIsSeparator = /*#__PURE__*/React.isValidElement(last) && last.type === BreadcrumbsSeparator;
+    var currentIsSeparator = item.type === BreadcrumbsSeparator;
+    if (!lastIsSeparator && !currentIsSeparator && index > 0) {
+      return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(BreadcrumbsSeparator, {
+          children: separator
+        }), item]
+      }, index);
+    }
+    return item;
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("nav", {
+    className: _JSXStyle.dynamic([["524763277", [theme$1.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme$1.palette.accents_6]]]) + " " + (className || ""),
+    children: [withSeparatorChildren, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "524763277",
+      dynamic: [theme$1.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme$1.palette.accents_6],
+      children: "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme$1.palette.accents_4, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme$1.palette.accents_6, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")
     })]
   });
 };
-AvatarComponent.displayName = 'Avatar';
-var Avatar = withScale(AvatarComponent);
+BreadcrumbsComponent.displayName = 'Breadcrumbs';
+var Breadcrumbs = withScale(BreadcrumbsComponent);
 
-var AvatarGroupComponent = function AvatarGroupComponent(_ref) {
-  var count = _ref.count,
+var LinkIconComponent = function LinkIconComponent() {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    viewBox: "0 0 24 24",
+    width: "0.9375em",
+    height: "0.9375em",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: "jsx-3409194595" + " " + "icon",
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6",
+      className: "jsx-3409194595"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M15 3h6v6",
+      className: "jsx-3409194595"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M10 14L21 3",
+      className: "jsx-3409194595"
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3409194595",
+      children: ".icon.jsx-3409194595{margin:0 0 -1px 0.1875em;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:currentColor;}"
+    })]
+  });
+};
+LinkIconComponent.displayName = 'LinkIcon';
+var LinkIcon = /*#__PURE__*/React.memo(LinkIconComponent);
+
+var _excluded$1d = ["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,
+    _ref$showColor = _ref.showColor,
+    showColor = _ref$showColor === void 0 ? false : _ref$showColor,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? false : _ref$underline,
+    children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children;
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
+    icon = _ref.icon,
+    props = _objectWithoutProperties(_ref, _excluded$1d);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: _JSXStyle.dynamic([["1135268764", [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme$1.palette.accents_7]]]) + " " + (theme.useClasses('avatar-group', className) || ""),
-    children: [children, count && /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: _JSXStyle.dynamic([["1135268764", [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme$1.palette.accents_7]]]) + " " + "count",
-      children: ["+", count]
+  var linkColor = showColor || block ? theme$1.palette.link : 'inherit';
+  var hoverColor = showColor || block ? theme$1.palette.successLight : 'inherit';
+  var decoration = underline ? 'underline' : 'none';
+  var classes = theme.useClasses('link', {
+    block: block
+  }, className);
+  return /*#__PURE__*/jsxRuntime.jsxs("a", _objectSpread2(_objectSpread2({
+    href: href
+  }, props), {}, {
+    ref: ref,
+    className: _JSXStyle.dynamic([["1962988967", [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || ""),
+    children: [icon && icon, /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: _JSXStyle.dynamic([["1962988967", [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + "link-extra",
+      children: [children, arrow && /*#__PURE__*/jsxRuntime.jsx(LinkIcon, {})]
     }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1135268764",
-      dynamic: [SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.ml(0.625), SCALES.font(0.875), theme$1.palette.accents_7],
-      children: ".avatar-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:".concat(SCALES.width(1, 'max-content'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-").concat(SCALES.ml(0.625), ";}.count.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(0.875), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:5.5px;color:").concat(theme$1.palette.accents_7, ";}")
+      id: "1962988967",
+      dynamic: [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor],
+      children: ".link.__jsx-style-dynamic-selector,.link-extra.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:inherit;gap:5px;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme$1.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")
     })]
-  });
-};
-AvatarGroupComponent.displayName = 'AvatarGroup';
-var AvatarGroup = withScale(AvatarGroupComponent);
+  }));
+});
+LinkComponent.displayName = 'Link';
+var Link = withScale(LinkComponent);
+
+var _excluded$1c = ["href", "nextLink", "onClick", "children", "className"];
+var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var href = _ref.href,
+    _ref$nextLink = _ref.nextLink,
+    nextLink = _ref$nextLink === void 0 ? false : _ref$nextLink,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$1c);
+  var isLink = React.useMemo(function () {
+    return href !== undefined || nextLink;
+  }, [href, nextLink]);
+  var _pickChild = pickChild(children, BreadcrumbsSeparator),
+    _pickChild2 = _slicedToArray(_pickChild, 1),
+    withoutSepChildren = _pickChild2[0];
+  var classes = theme.useClasses('breadcrumbs-item', className);
+  var clickHandler = function clickHandler(event) {
+    onClick && onClick(event);
+  };
+  if (!isLink) {
+    return /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: classes,
+      onClick: clickHandler,
+      children: withoutSepChildren
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Link, _objectSpread2(_objectSpread2({
+    className: classes,
+    href: href,
+    onClick: clickHandler,
+    ref: ref
+  }, props), {}, {
+    children: withoutSepChildren
+  }));
+});
+BreadcrumbsItem.displayName = 'BreadcrumbsItem';
 
 /* "use client" */
 
-Avatar.Group = AvatarGroup;
+Breadcrumbs.Item = BreadcrumbsItem;
+Breadcrumbs.Separator = BreadcrumbsSeparator;
 
-var _excluded$1c = ["color", "className", "children", "dot"];
-var getBgColor = function getBgColor(type, palette) {
-  var colors = {
-    "default": palette.foreground,
-    success: palette.success,
-    warning: palette.warning,
-    error: palette.error,
-    secondary: palette.secondary
-  };
-  return colors[type];
+var ButtonDrip = function ButtonDrip(_ref) {
+  var _ref$x = _ref.x,
+    x = _ref$x === void 0 ? 0 : _ref$x,
+    _ref$y = _ref.y,
+    y = _ref$y === void 0 ? 0 : _ref$y,
+    color = _ref.color,
+    onCompleted = _ref.onCompleted;
+  var dripRef = React.useRef(null);
+  /* istanbul ignore next */
+  var top = Number.isNaN(+y) ? 0 : y - 10;
+  /* istanbul ignore next */
+  var left = Number.isNaN(+x) ? 0 : x - 10;
+  React.useEffect(function () {
+    /* istanbul ignore next */
+    if (!dripRef.current) return;
+    dripRef.current.addEventListener('animationend', onCompleted);
+    return function () {
+      /* istanbul ignore next */
+      if (!dripRef.current) return;
+      dripRef.current.removeEventListener('animationend', onCompleted);
+    };
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: dripRef,
+    className: "jsx-3424889537" + " " + "drip",
+    children: [/*#__PURE__*/jsxRuntime.jsx("svg", {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      style: {
+        top: top,
+        left: left
+      },
+      className: "jsx-3424889537",
+      children: /*#__PURE__*/jsxRuntime.jsx("g", {
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd",
+        className: "jsx-3424889537",
+        children: /*#__PURE__*/jsxRuntime.jsx("g", {
+          fill: color,
+          className: "jsx-3424889537",
+          children: /*#__PURE__*/jsxRuntime.jsx("rect", {
+            width: "100%",
+            height: "100%",
+            rx: "10",
+            className: "jsx-3424889537"
+          })
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "3424889537",
+      children: ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"
+    })]
+  });
 };
-var BadgeComponent = function BadgeComponent(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color,
+ButtonDrip.displayName = 'ButtonDrip';
+
+var ButtonLoading = function ButtonLoading(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "jsx-212623367" + " " + "btn-loading",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Loading, {
+      color: color
+    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "212623367",
+      children: ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"
+    })]
+  });
+};
+ButtonLoading.displayName = 'ButtonLoading';
+
+var _excluded$1b = ["isRight", "isSingle", "children", "className"];
+var ButtonIcon = function ButtonIcon(_ref) {
+  var _ref$isRight = _ref.isRight,
+    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
+    isSingle = _ref.isSingle,
+    children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    _ref$dot = _ref.dot,
-    dot = _ref$dot === void 0 ? false : _ref$dot,
-    props = _objectWithoutProperties(_ref, _excluded$1c);
-  var theme$1 = theme.useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var bg = React.useMemo(function () {
-    return getBgColor(color, theme$1.palette);
-  }, [color, theme$1.palette]);
-  var _color = React.useMemo(function () {
-    if (!color || color === 'default') return theme$1.palette.background;
-    return 'white';
-  }, [color, theme$1.palette.background]);
-  var classes = theme.useClasses('badge', {
-    dot: dot
+    props = _objectWithoutProperties(_ref, _excluded$1b);
+  var classes = theme.useClasses('icon', {
+    right: isRight,
+    single: isSingle
   }, className);
   return /*#__PURE__*/jsxRuntime.jsxs("span", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: _JSXStyle.dynamic([["120113192", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.5375), SCALES.pb(0.30), SCALES.pl(0.5375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || ""),
-    children: [!dot && children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "120113192",
-      dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.5375), SCALES.pb(0.30), SCALES.pl(0.5375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)],
-      children: ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.5375), " ").concat(SCALES.pb(0.30), " ").concat(SCALES.pl(0.5375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")
+    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "2467502931",
+      children: ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"
     })]
   }));
 };
-BadgeComponent.displayName = 'Badge';
-var Badge = withScale(BadgeComponent);
+ButtonIcon.displayName = 'ButtonIcon';
 
-tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
-var getTransform = function getTransform(placement) {
-  var styles = {
-    topLeft: {
-      top: '0',
-      left: '0',
-      value: 'translate(-50%, -50%)',
-      origin: '0% 0%'
+var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
+  var icon = icons.icon,
+    iconRight = icons.iconRight;
+  var hasIcon = icon || iconRight;
+  var isRight = Boolean(iconRight);
+  var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
+  var classes = theme.useClasses('text', isRight ? 'right' : 'left');
+  if (!hasIcon) return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "text",
+    children: children
+  });
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
+      isRight: isRight,
+      isSingle: true,
+      children: hasIcon
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ButtonIcon, {
+      isRight: isRight,
+      children: hasIcon
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || ""),
+      children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "3568181479",
+        dynamic: [paddingForAutoMode, paddingForAutoMode],
+        children: ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}")
+      })]
+    })]
+  });
+};
+var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
+  if (!config.isButtonGroup) return props;
+  return _objectSpread2(_objectSpread2({}, props), {}, {
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled
+  });
+};
+
+/* "use client" */
+
+var defaultContext$c = {
+  isButtonGroup: false,
+  disabled: false
+};
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$c);
+var useButtonGroupContext = function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
+};
+
+var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
+  var colors = {
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground,
+      color: palette.foreground,
+      ripple: ''
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success,
+      color: palette.success,
+      ripple: ''
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning,
+      color: palette.warning,
+      ripple: ''
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error,
+      color: palette.error,
+      ripple: ''
+    }
+  };
+  return colors[_color] || null;
+};
+var getButtonColors = function getButtonColors(palette, props) {
+  var color = props.color,
+    disabled = props.disabled,
+    ghost = props.ghost;
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.border,
+      color: palette.accents_5,
+      ripple: palette.accents_1
+    },
+    secondary: {
+      bg: palette.foreground,
+      border: palette.foreground,
+      color: palette.background,
+      ripple: palette.accents_1
+    },
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: '#fff',
+      ripple: '#1f93ffff'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: '#fff',
+      ripple: '#ffca29ff'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: '#fff',
+      ripple: '#ff5a55ff'
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5,
+      ripple: palette.accents_1
+    }
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc',
+    ripple: ''
+  };
+
+  /**
+   * The '-light' type is the same color as the common type,
+   * only hover's color is different.
+   * e.g.
+   *   Color['success'] === Color['success-light']
+   *   Color['warning'] === Color['warning-light']
+   */
+  var withoutLightType = color === null || color === void 0 ? void 0 : color.replace('-light', '');
+  var defaultColor = colors["default"];
+  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _color) {
+  var colors = {
+    secondary: {
+      bg: palette.foreground,
+      border: palette.background,
+      color: palette.background
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: 'white'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: 'white'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: 'white'
+    }
+  };
+  var withoutLightType = _color === null || _color === void 0 ? void 0 : _color.replace('-light', '');
+  return colors[withoutLightType] || null;
+};
+var getButtonHoverColors = function getButtonHoverColors(palette, props) {
+  var color = props.color,
+    disabled = props.disabled,
+    loading = props.loading,
+    shadow = props.shadow,
+    ghost = props.ghost;
+  var defaultColor = getButtonColors(palette, props);
+  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.foreground
     },
-    topRight: {
-      top: '0',
-      right: '0',
-      value: 'translate(50%, -50%)',
-      origin: '100% 0%'
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground
     },
-    bottomLeft: {
-      left: '0',
-      bottom: '0',
-      value: 'translate(-50%, 50%)',
-      origin: '0% 100%'
+    success: {
+      bg: palette.background,
+      border: palette.success
     },
-    bottomRight: {
-      right: '0',
-      bottom: '0',
-      value: 'translate(50%, 50%)',
-      origin: '100% 100%'
-    }
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    },
+    'secondary-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'success-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'warning-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'error-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    })
   };
-  return styles[placement];
-};
-var BadgeAnchor = function BadgeAnchor(_ref) {
-  var children = _ref.children,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'topRight' : _ref$placement;
-  var _pickChild = pickChild(children, Badge),
-    _pickChild2 = _slicedToArray(_pickChild, 2),
-    withoutBadgeChildren = _pickChild2[0],
-    badgeChldren = _pickChild2[1];
-  var _useMemo = React.useMemo(function () {
-      return getTransform(placement);
-    }, [placement]),
-    top = _useMemo.top,
-    bottom = _useMemo.bottom,
-    left = _useMemo.left,
-    right = _useMemo.right,
-    value = _useMemo.value,
-    origin = _useMemo.origin;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]]) + " " + "anchor",
-    children: [withoutBadgeChildren, /*#__PURE__*/jsxRuntime.jsx("sup", {
-      className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]]),
-      children: badgeChldren
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1121745930",
-      dynamic: [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin],
-      children: ".anchor.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;}sup.__jsx-style-dynamic-selector{position:absolute;top:".concat(top || 'auto', ";left:").concat(left || 'auto', ";right:").concat(right || 'auto', ";bottom:").concat(bottom || 'auto', ";-webkit-transform:").concat(value, ";-ms-transform:").concat(value, ";transform:").concat(value, ";-webkit-transform-origin:").concat(origin, ";-ms-transform-origin:").concat(origin, ";transform-origin:").concat(origin, ";z-index:1;}")
-    })]
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
+  if (loading) return _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+    color: 'transparent'
   });
-};
-BadgeAnchor.displayName = 'BadgeAnchor';
-
-/* "use client" */
-
-Badge.Anchor = BadgeAnchor;
-
-var Separator = function Separator(_ref) {
-  var children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className;
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = theme.useClasses('separator', className);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: _JSXStyle.dynamic([["1571781185", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0.5), SCALES.mb(0), SCALES.ml(0.5)]]]) + " " + (classes || ""),
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1571781185",
-      dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0.5), SCALES.mb(0), SCALES.ml(0.5)],
-      children: ".separator.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.5), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.5), ";}")
-    })]
+  if (shadow) return defaultColor;
+  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, color) : colors[color]) || colors["default"];
+  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
+    color: hoverColor.color || hoverColor.border
   });
 };
-Separator.displayName = 'BreadcrumbsSeparator';
-var BreadcrumbsSeparator = withScale(Separator);
-
-var BreadcrumbsComponent = function BreadcrumbsComponent(_ref) {
-  var _ref$separator = _ref.separator,
-    separator = _ref$separator === void 0 ? '/' : _ref$separator,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className;
-  var theme$1 = theme.useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var hoverColor = React.useMemo(function () {
-    return addColorAlpha(theme$1.palette.link, 0.85);
-  }, [theme$1.palette.link]);
-  var childrenArray = React.Children.toArray(children);
-  var withSeparatorChildren = childrenArray.map(function (item, index) {
-    if (! /*#__PURE__*/React.isValidElement(item)) return item;
-    var last = childrenArray[index - 1];
-    var lastIsSeparator = /*#__PURE__*/React.isValidElement(last) && last.type === BreadcrumbsSeparator;
-    var currentIsSeparator = item.type === BreadcrumbsSeparator;
-    if (!lastIsSeparator && !currentIsSeparator && index > 0) {
-      return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(BreadcrumbsSeparator, {
-          children: separator
-        }), item]
-      }, index);
-    }
-    return item;
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs("nav", {
-    className: _JSXStyle.dynamic([["524763277", [theme$1.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme$1.palette.accents_6]]]) + " " + (className || ""),
-    children: [withSeparatorChildren, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "524763277",
-      dynamic: [theme$1.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme$1.palette.accents_6],
-      children: "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme$1.palette.accents_4, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme$1.palette.accents_6, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")
-    })]
-  });
+var getButtonCursor = function getButtonCursor(disabled, loading) {
+  if (disabled) return {
+    cursor: 'not-allowed',
+    events: 'auto'
+  };
+  if (loading) return {
+    cursor: 'default',
+    events: 'none'
+  };
+  return {
+    cursor: 'pointer',
+    events: 'auto'
+  };
 };
-BreadcrumbsComponent.displayName = 'Breadcrumbs';
-var Breadcrumbs = withScale(BreadcrumbsComponent);
-
-var LinkIconComponent = function LinkIconComponent() {
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
-    viewBox: "0 0 24 24",
-    width: "0.9375em",
-    height: "0.9375em",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    className: "jsx-3409194595" + " " + "icon",
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6",
-      className: "jsx-3409194595"
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M15 3h6v6",
-      className: "jsx-3409194595"
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M10 14L21 3",
-      className: "jsx-3409194595"
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "3409194595",
-      children: ".icon.jsx-3409194595{margin:0 0 -1px 0.1875em;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:currentColor;}"
-    })]
-  });
+var getButtonDripColor = function getButtonDripColor(palette, props) {
+  var type = props.type;
+  var isLightHover = type ? type.endsWith('light') : false;
+  var hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
-LinkIconComponent.displayName = 'LinkIcon';
-var LinkIcon = /*#__PURE__*/React.memo(LinkIconComponent);
 
-var _excluded$1b = ["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,
-    _ref$showColor = _ref.showColor,
-    showColor = _ref$showColor === void 0 ? false : _ref$showColor,
-    _ref$underline = _ref.underline,
-    underline = _ref$underline === void 0 ? false : _ref$underline,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$block = _ref.block,
-    block = _ref$block === void 0 ? false : _ref$block,
-    _ref$arrow = _ref.arrow,
-    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
-    icon = _ref.icon,
-    props = _objectWithoutProperties(_ref, _excluded$1b);
+var _excluded$1a = ["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();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  var linkColor = showColor || block ? theme$1.palette.link : 'inherit';
-  var hoverColor = showColor || block ? theme$1.palette.successLight : 'inherit';
-  var decoration = underline ? 'underline' : 'none';
-  var classes = theme.useClasses('link', {
-    block: block
-  }, className);
-  return /*#__PURE__*/jsxRuntime.jsxs("a", _objectSpread2(_objectSpread2({
-    href: href
-  }, props), {}, {
-    ref: ref,
-    className: _JSXStyle.dynamic([["1962988967", [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + (props && props.className != null && props.className || classes || ""),
-    children: [icon && icon, /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: _JSXStyle.dynamic([["1962988967", [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor]]]) + " " + "link-extra",
-      children: [children, arrow && /*#__PURE__*/jsxRuntime.jsx(LinkIcon, {})]
-    }), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
-      id: "1962988967",
-      dynamic: [linkColor, block ? theme$1.layout.radius : 0, SCALES.font(1, 'inherit'), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.pt(0.125), SCALES.pr(0.25), SCALES.pb(0.125), SCALES.pl(0.25), SCALES.mt(0), SCALES.mr(-0.125), SCALES.mb(0), SCALES.ml(-0.125), decoration, block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', hoverColor],
-      children: ".link.__jsx-style-dynamic-selector,.link-extra.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:inherit;gap:5px;color:".concat(linkColor, ";-webkit-text-decoration:none;text-decoration:none;border-radius:").concat(block ? theme$1.layout.radius : 0, ";-webkit-transition:color 200ms ease 0ms;transition:color 200ms ease 0ms;font-size:").concat(SCALES.font(1, 'inherit'), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.block.__jsx-style-dynamic-selector{padding:").concat(SCALES.pt(0.125), " ").concat(SCALES.pr(0.25), " ").concat(SCALES.pb(0.125), " ").concat(SCALES.pl(0.25), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(-0.125), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(-0.125), ";}.link.__jsx-style-dynamic-selector:hover,.link.__jsx-style-dynamic-selector:active,.link.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:").concat(decoration, ";text-decoration:").concat(decoration, ";}.link.__jsx-style-dynamic-selector:hover{background-color:").concat(block ? addColorAlpha(theme$1.palette.link, 0.1) : 'unset', ";color:").concat(hoverColor, ";}")
-    })]
-  }));
-});
-LinkComponent.displayName = 'Link';
-var Link = withScale(LinkComponent);
+  var buttonRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  }); // Changed with !
 
-var _excluded$1a = ["href", "nextLink", "onClick", "children", "className"];
-var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var href = _ref.href,
-    _ref$nextLink = _ref.nextLink,
-    nextLink = _ref$nextLink === void 0 ? false : _ref$nextLink,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1a);
-  var isLink = React.useMemo(function () {
-    return href !== undefined || nextLink;
-  }, [href, nextLink]);
-  var _pickChild = pickChild(children, BreadcrumbsSeparator),
-    _pickChild2 = _slicedToArray(_pickChild, 1),
-    withoutSepChildren = _pickChild2[0];
-  var classes = theme.useClasses('breadcrumbs-item', className);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dripShow = _useState2[0],
+    setDripShow = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dripX = _useState4[0],
+    setDripX = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dripY = _useState6[0],
+    setDripY = _useState6[1];
+  var groupConfig = useButtonGroupContext();
+  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  var children = filteredProps.children,
+    _filteredProps$disabl = filteredProps.disabled,
+    disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl;
+    filteredProps.color;
+    var _filteredProps$loadin = filteredProps.loading,
+    loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
+    _filteredProps$shadow = filteredProps.shadow,
+    shadow = _filteredProps$shadow === void 0 ? false : _filteredProps$shadow,
+    _filteredProps$ghost = filteredProps.ghost,
+    ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
+    _filteredProps$effect = filteredProps.effect,
+    effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
+    _filteredProps$round = filteredProps.round,
+    round = _filteredProps$round === void 0 ? false : _filteredProps$round;
+    filteredProps.relative;
+    filteredProps.replace;
+    filteredProps.a;
+    var to = filteredProps.to,
+    onClick = filteredProps.onClick,
+    _filteredProps$auto = filteredProps.auto,
+    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
+    icon = filteredProps.icon,
+    _filteredProps$type = filteredProps.type,
+    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
+    iconRight = filteredProps.iconRight,
+    _filteredProps$classN = filteredProps.className,
+    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
+    filteredProps.crossOrigin;
+    var props = _objectWithoutProperties(filteredProps, _excluded$1a);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  var _useMemo = React.useMemo(function () {
+      return getButtonColors(theme$1.palette, filteredProps);
+    }, [theme$1.palette, filteredProps]),
+    bg = _useMemo.bg,
+    border = _useMemo.border,
+    color = _useMemo.color,
+    rippleColor = _useMemo.ripple;
+  var hover = React.useMemo(function () {
+    return getButtonHoverColors(theme$1.palette, filteredProps);
+  }, [theme$1.palette, filteredProps]);
+  var _useMemo2 = React.useMemo(function () {
+      return getButtonCursor(disabled, loading);
+    }, [disabled, loading]),
+    cursor = _useMemo2.cursor,
+    events = _useMemo2.events;
+  var dripColor = React.useMemo(function () {
+    return getButtonDripColor(theme$1.palette, filteredProps);
+  }, [theme$1.palette, filteredProps]);
+
+  /* istanbul ignore next */
+  var dripCompletedHandle = function dripCompletedHandle() {
+    setDripShow(false);
+    setDripX(0);
+    setDripY(0);
+  };
+  var createRipple = function createRipple(event) {
+    var button = buttonRef.current;
+    if (!button) return;
+    var rect = button.getBoundingClientRect();
+    var size = Math.max(rect.width, rect.height);
+    var x = event.clientX - rect.left - size / 2;
+    var y = event.clientY - rect.top - size / 2;
+    var rippleCount = 1; // number of rings
+    var rippleDelay = 500; // ms between each ripple
+    var _loop = function _loop() {
+      var ripple = document.createElement('span');
+      Object.assign(ripple.style, {
+        position: 'absolute',
+        borderRadius: '50%',
+        backgroundColor: rippleColor,
+        width: "".concat(size, "px"),
+        height: "".concat(size, "px"),
+        left: "".concat(x, "px"),
+        top: "".concat(y, "px"),
+        pointerEvents: 'none',
+        transform: 'scale(0)',
+        opacity: '1',
+        transition: "transform 600ms ease-out ".concat(i * rippleDelay, "ms, opacity 600ms ease-out ").concat(i * rippleDelay, "ms"),
+        zIndex: 1
+      });
+      button.appendChild(ripple);
+
+      // Force reflow to start transition
+      window.getComputedStyle(ripple).opacity;
+      ripple.style.transform = 'scale(2.5)';
+      ripple.style.opacity = '0';
+      ripple.addEventListener('transitionend', function () {
+        ripple.remove();
+      });
+    };
+    for (var i = 0; i < rippleCount; i++) {
+      _loop();
+    }
+  };
   var clickHandler = function clickHandler(event) {
+    if (disabled || loading) return;
+    var showDrip = !shadow && !ghost && effect;
+    /* istanbul ignore next */
+    if (showDrip && buttonRef.current) {
+      var rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
+    }
+    if (shadow) {
+      createRipple(event);
+    }
     onClick && onClick(event);
   };
-  if (!isLink) {
-    return /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: classes,
-      onClick: clickHandler,
-      children: withoutSepChildren
+  var childrenWithIcon = React.useMemo(function () {
+    return getButtonChildrenWithIcon(auto, children, {
+      icon: icon,
+      iconRight: iconRight
     });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(Link, _objectSpread2(_objectSpread2({
-    className: classes,
-    href: href,
-    onClick: clickHandler,
-    ref: ref
+  }, [auto, children, icon, iconRight]);
+  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
+    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+
+  // If shadow provided is string then value other default
+  var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme$1.shadows.level.z2 : 'none';
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [to ? /*#__PURE__*/jsxRuntime.jsxs("a", _objectSpread2(_objectSpread2({
+      href: to
+    }, props), {}, {
+      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', 'btn-link', className) || ""),
+      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
+        color: color
+      }), childrenWithIcon]
+    })) : /*#__PURE__*/jsxRuntime.jsxs("button", _objectSpread2(_objectSpread2({
+      ref: buttonRef,
+      type: type,
+      disabled: disabled,
+      onClick: clickHandler
+    }, props), {}, {
+      className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || theme.useClasses('btn', className) || ""),
+      children: [loading && /*#__PURE__*/jsxRuntime.jsx(ButtonLoading, {
+        color: color
+      }), childrenWithIcon, dripShow && /*#__PURE__*/jsxRuntime.jsx(ButtonDrip, {
+        x: dripX,
+        y: dripY,
+        color: dripColor,
+        onCompleted: dripCompletedHandle
+      })]
+    })), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "612376042",
+      dynamic: [SCALES.height(2.5), round ? '50%' : theme$1.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px'],
+      children: ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme$1.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(shadow ? 'transparent' : border, ";cursor:").concat(cursor !== null && cursor !== void 0 ? cursor : 'pointer', ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn-link.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")
+    })]
+  });
+});
+ButtonComponent.displayName = 'Button';
+var Button = withScale(ButtonComponent);
+
+var CompactButton = function CompactButton(props) {
+  // const theme = useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
+    scale: 2 / 3,
+    px: 0.6
+  }, _objectSpread2({
+    auto: true
+  }, props)), {}, {
+    children: props.children
+  }));
+};
+var IconButton = /*#__PURE__*/React.memo(CompactButton);
+
+var SmallButton = function SmallButton(props) {
+  // const theme = useTheme();
+  return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread2(_objectSpread2({
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6
   }, props), {}, {
-    children: withoutSepChildren
+    children: props.children
   }));
-});
-BreadcrumbsItem.displayName = 'BreadcrumbsItem';
+};
+var SmallButton$1 = /*#__PURE__*/React.memo(SmallButton);
 
 /* "use client" */
 
-Breadcrumbs.Item = BreadcrumbsItem;
-Breadcrumbs.Separator = BreadcrumbsSeparator;
+Button.Icon = IconButton;
+Button.Small = SmallButton$1;
 
 /* "use client" */
 
@@ -13428,10 +13404,6 @@ var Container = function Container(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$B);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -13452,34 +13424,9 @@ var Container = function Container(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
     className: classes
   }, props), {}, {
-    children: [collapse > 50 ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          maxHeight: expand ? '100%' : "".concat(collapse, "px"),
-          overflow: 'hidden',
-          display: 'inline',
-          transition: "max-height 0.3s ease"
-        },
-        children: children
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-        margin: 0,
-        onClick: function onClick() {
-          return setExpand(!expand);
-        },
-        style: {
-          textTransform: 'lowercase',
-          height: '25px'
-        },
-        effect: false,
-        color: "abort",
-        scale: 2 / 3,
-        px: 0.2,
-        py: 0,
-        auto: true,
-        children: /*#__PURE__*/jsxRuntime.jsx("b", {
-          children: expand ? 'less' : 'more'
-        })
-      })]
+    children: [collapse > 10 ? /*#__PURE__*/jsxRuntime.jsx(Expandable$1, {
+      collapsedHeight: collapse,
+      children: children
     }) : children, styles]
   }));
 };
@@ -42510,6 +42457,77 @@ function Clipboard(props) {
   }), _objectSpread2({}, props));
 }
 
+var Expandable = function Expandable(_ref) {
+  var children = _ref.children,
+    collapsedHeight = _ref.collapsedHeight;
+  var contentRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fullHeight = _useState4[0],
+    setFullHeight = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOverflowing = _useState6[0],
+    setIsOverflowing = _useState6[1];
+  React.useEffect(function () {
+    var el = contentRef.current;
+    if (!el) return;
+    var updateHeight = function updateHeight() {
+      var scrollHeight = el.scrollHeight;
+      setFullHeight(scrollHeight);
+      setIsOverflowing(scrollHeight > collapsedHeight);
+    };
+    updateHeight();
+    var observer = new ResizeObserver(updateHeight);
+    observer.observe(el);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [children, collapsedHeight]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        height: expanded ? fullHeight : collapsedHeight,
+        overflow: "hidden",
+        transition: "height 0.3s ease",
+        position: "relative"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: contentRef,
+        children: children
+      }), !expanded && isOverflowing && /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: 40,
+          background: "linear-gradient(to bottom, rgba(255,255,255,0), white)"
+        }
+      })]
+    }), isOverflowing && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      margin: 0,
+      padding: 0,
+      onClick: function onClick() {
+        return setExpanded(function (prev) {
+          return !prev;
+        });
+      },
+      effect: false,
+      color: "abort",
+      scale: 2 / 3,
+      auto: true,
+      children: /*#__PURE__*/jsxRuntime.jsx("b", {
+        children: expanded ? 'Show less' : 'Show more'
+      })
+    })]
+  });
+};
+
 exports.AutoComplete = AutoComplete;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
@@ -42533,6 +42551,7 @@ exports.Divider = Divider;
 exports.Dot = Dot;
 exports.Drawer = DrawerComponent;
 exports.ErrorMessage = ErrorMessage;
+exports.Expandable = Expandable;
 exports.Fieldset = Fieldset;
 exports.FormWrapper = FormWrapper;
 exports.FormikConsumer = FormikConsumer;