@helpdice/ui 1.5.9 → 1.6.1

package/dist/table/index.js

@@ -2641,526 +2641,7 @@ var SelectOption = withScale(SelectOptionComponent);
 
 Select.Option = SelectOption;
 
-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__*/React.createElement("div", {
-    ref: dripRef,
-    className: "jsx-3424889537" + " " + "drip"
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    style: {
-      top: top,
-      left: left
-    },
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd",
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: color,
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "100%",
-    height: "100%",
-    rx: "10",
-    className: "jsx-3424889537"
-  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3424889537"
-  }, ".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;}}"));
-};
-ButtonDrip.displayName = 'ButtonDrip';
-
-var _excluded$c = ["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$c);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useClasses('loading-container', className);
-  var bgColor = React.useMemo(function () {
-    return getIconBgColor(type, theme.palette, color);
-  }, [type, theme.palette, color]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, 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.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
-  }, children && /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]])
-  }, children), /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]])
-  })), /*#__PURE__*/React.createElement(_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.palette.accents_5, bgColor, spaceRatio]
-  }, ".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.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 ButtonLoading = function ButtonLoading(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-212623367" + " " + "btn-loading"
-  }, /*#__PURE__*/React.createElement(Loading, {
-    color: color
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "212623367"
-  }, ".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 = 'GeistButtonLoading';
-
-var _excluded$b = ["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$b);
-  var classes = useClasses('icon', {
-    right: isRight,
-    single: isSingle
-  }, className);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2467502931"
-  }, ".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;}"));
-};
-ButtonIcon.displayName = 'ButtonIcon';
-
-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 = useClasses('text', isRight ? 'right' : 'left');
-  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
-    className: "text"
-  }, children);
-  if (React.Children.count(children) === 0) {
-    return /*#__PURE__*/React.createElement(ButtonIcon, {
-      isRight: isRight,
-      isSingle: true
-    }, hasIcon);
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
-    isRight: isRight
-  }, hasIcon), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3568181479",
-    dynamic: [paddingForAutoMode, paddingForAutoMode]
-  }, ".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$3 = {
-  isButtonGroup: false,
-  disabled: false
-};
-var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$3);
-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 getButtonGhostColors = function getButtonGhostColors(palette, type) {
-  var colors = {
-    secondary: {
-      bg: palette.background,
-      border: palette.foreground,
-      color: palette.foreground
-    },
-    success: {
-      bg: palette.background,
-      border: palette.success,
-      color: palette.success
-    },
-    warning: {
-      bg: palette.background,
-      border: palette.warning,
-      color: palette.warning
-    },
-    error: {
-      bg: palette.background,
-      border: palette.error,
-      color: palette.error
-    }
-  };
-  return colors[type] || null;
-};
-var getButtonColors = function getButtonColors(palette, props) {
-  var type = props.type,
-    disabled = props.disabled,
-    ghost = props.ghost;
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.border,
-      color: palette.accents_5
-    },
-    secondary: {
-      bg: palette.foreground,
-      border: palette.foreground,
-      color: palette.background
-    },
-    success: {
-      bg: palette.success,
-      border: palette.success,
-      color: '#fff'
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.warning,
-      color: '#fff'
-    },
-    error: {
-      bg: palette.error,
-      border: palette.error,
-      color: '#fff'
-    },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5
-    }
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc'
-  };
-
-  /**
-   * 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 = type === null || type === void 0 ? void 0 : type.replace('-light', '');
-  var defaultColor = colors["default"];
-  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
-  return colors[withoutLightType] || defaultColor;
-};
-var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
-  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 = type.replace('-light', '');
-  return colors[withoutLightType] || null;
-};
-var getButtonHoverColors = function getButtonHoverColors(palette, props) {
-  var type = props.type,
-    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, type) : colors[type]) || 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$a = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
-var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var buttonRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  });
-  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.type;
-    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,
-    onClick = filteredProps.onClick,
-    _filteredProps$auto = filteredProps.auto,
-    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
-    icon = filteredProps.icon,
-    _filteredProps$htmlTy = filteredProps.htmlType,
-    htmlType = _filteredProps$htmlTy === void 0 ? 'button' : _filteredProps$htmlTy,
-    iconRight = filteredProps.iconRight,
-    _filteredProps$classN = filteredProps.className,
-    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
-    filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$a);
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-
-  var _useMemo = React.useMemo(function () {
-      return getButtonColors(theme.palette, filteredProps);
-    }, [theme.palette, filteredProps]),
-    bg = _useMemo.bg,
-    border = _useMemo.border,
-    color = _useMemo.color;
-  var hover = React.useMemo(function () {
-    return getButtonHoverColors(theme.palette, filteredProps);
-  }, [theme.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.palette, filteredProps);
-  }, [theme.palette, filteredProps]);
-
-  /* istanbul ignore next */
-  var dripCompletedHandle = function dripCompletedHandle() {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-  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);
-    }
-    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);
-  return /*#__PURE__*/React.createElement("button", _extends({
-    ref: buttonRef,
-    type: htmlType,
-    disabled: disabled,
-    onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["1558010596", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : '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, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
-  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
-    color: color
-  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
-    x: dripX,
-    y: dripY,
-    color: dripColor,
-    onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1558010596",
-    dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : '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, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
-  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.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(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : '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(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.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;}")));
-});
-ButtonComponent.displayName = 'Button';
-var Button = withScale(ButtonComponent);
+// import Button from '../button'
 
 var makeColgroup = function makeColgroup(width, columns) {
   var unsetWidthCount = columns.filter(function (c) {
@@ -3195,21 +2676,31 @@ var TableHead = function TableHead(props) {
     if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
     return makeColgroup(width, columns);
   }, [isScalableWidth, width]);
-  var _React$useState = React.useState(),
+  var _React$useState = React.useState(columns.reduce(function (acc, col) {
+      if (col.filter) {
+        acc["".concat(col.filter)] = col.filter === 'date' ? null : '';
+      }
+      return acc;
+    }, {})),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     filters = _React$useState2[0],
     setFilters = _React$useState2[1];
+
+  // const applyFilters = () => {
+  //   if (onFilters) {
+  //     onFilters(filters);
+  //   }
+  // }
+
   var handleFilterChange = function handleFilterChange(name, value) {
     setFilters(function (prevFilters) {
       var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty({}, name, value));
+      if (onFilters) {
+        onFilters(filters);
+      }
       return updatedFilters;
     });
   };
-  var applyFilters = function applyFilters() {
-    if (onFilters) {
-      onFilters(filters);
-    }
-  };
   var generateFilterInputs = function generateFilterInputs() {
     return columns.map(function (col) {
       var _String, _filters$filterName;
@@ -3308,13 +2799,7 @@ var TableHead = function TableHead(props) {
     }, column.text)));
   })), showFilters && /*#__PURE__*/React.createElement("tr", {
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
-  }, generateFilterInputs(), /*#__PURE__*/React.createElement("th", {
-    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return applyFilters();
-    }
-  }, "Apply")))), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2156261549",
     dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
   }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__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;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
@@ -3359,11 +2844,11 @@ var TableCell = function TableCell(_ref) {
 
 /* "use client" */
 
-var defaultContext$2 = {
+var defaultContext$3 = {
   columns: [],
   updateColumn: function updateColumn() {}
 };
-var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
+var TableContext = /*#__PURE__*/React.createContext(defaultContext$3);
 var useTableContext = function useTableContext() {
   return React.useContext(TableContext);
 };
@@ -20881,7 +20366,7 @@ function Empty() {
   }));
 }
 
-var _excluded$9 = ["children", "tag", "className", "type"];
+var _excluded$c = ["children", "tag", "className", "type"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
     "default": 'inherit',
@@ -20899,7 +20384,7 @@ var TextChild = function TextChild(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'default' : _ref$type,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var Component = tag;
   var theme = useTheme();
   var _useScale = useScale(),
@@ -20945,7 +20430,7 @@ var TextChild = function TextChild(_ref) {
 };
 TextChild.displayName = 'TextChild';
 
-var _excluded$8 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "children", "className"];
+var _excluded$b = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "children", "className"];
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -20985,7 +20470,7 @@ var TextComponent = function TextComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var elements = {
     h1: h1,
     h2: h2,
@@ -30646,23 +30131,210 @@ const ZoomOut = ({ color, strokeWidth, set }) => {
         React__namespace.createElement("path", { d: "M7 10L13 10", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
     switch (set) {
         case "broken":
-            return React__namespace.createElement(Broken, null);
+            return React__namespace.createElement(Broken, null);
+        case "curved":
+            return React__namespace.createElement(Curved, null);
+        case "duotone":
+            return React__namespace.createElement(Duotone, null);
+        case "outline":
+            return React__namespace.createElement(Outline, null);
+        default:
+            return React__namespace.createElement(Outline, null);
+    }
+};
+ZoomOut.displayName = "ZoomOut";
+createIcon(ZoomOut);
+
+const Github = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("path", { d: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
+        case "curved":
+            return "";
+        case "duotone":
+            return "";
+        case "outline":
+            return React.createElement(Outline, null);
+        default:
+            return React.createElement(Outline, null);
+    }
+};
+Github.displayName = "Github";
+createIcon(Github);
+
+const CodeSandbox = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("path", { d: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M7.5 4.21l4.5 2.6 4.5-2.6", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M7.5 19.79V14.6L3 12", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M21 12l-4.5 2.6v5.19", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M3.27 6.96L12 12.01l8.73-5.05", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M12 22.08V12", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
+        case "curved":
+            return "";
+        case "duotone":
+            return "";
+        case "outline":
+            return React.createElement(Outline, null);
+        default:
+            return React.createElement(Outline, null);
+    }
+};
+CodeSandbox.displayName = "CodeSandbox";
+createIcon(CodeSandbox);
+
+const FileFunctionFill = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("path", { d: "M4.055 2.055A2.75 2.75 0 016 1.25h12A2.75 2.75 0 0120.75 4v16A2.75 2.75 0 0118 22.75H6A2.75 2.75 0 013.25 20V4c0-.73.29-1.429.805-1.945zM15.116 5.31c-1.237-.194-2.29.086-3.02.83-.709.722-.998 1.758-.998 2.844v1.502H9a.75.75 0 100 1.5h2.098v3.22c0 .78-.197 1.257-.48 1.543-.283.284-.773.501-1.618.501a.75.75 0 000 1.5c1.088 0 2.023-.281 2.681-.944.658-.662.918-1.582.918-2.6v-3.22h2.062a.75.75 0 000-1.5h-2.063V8.984c0-.851.229-1.447.567-1.792.315-.32.838-.538 1.719-.4a.75.75 0 00.232-1.482z", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
+        case "curved":
+            return "";
+        case "duotone":
+            return "";
+        case "outline":
+            return React.createElement(Outline, null);
+        default:
+            return React.createElement(Outline, null);
+    }
+};
+FileFunctionFill.displayName = "FileFunctionFill";
+createIcon(FileFunctionFill);
+
+const Lambda = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("path", { d: "M1.99799968,0.500003998 C1.78162411,0.500869509 1.63364907,0.642137248 1.63364907,0.814271399 C1.63364907,0.985218642 1.78032508,1.1285428 1.97131342,1.12856172 L2.19867872,1.13056263 C3.10118421,1.14702589 3.60939673,1.26556347 4.03249851,1.568379 C4.44848628,1.86630467 4.81555118,2.36599046 5.30914132,3.29234706 L5.53635444,3.7319218 L7.127422,7.27537654 L6.98962107,7.5004737 L0.544625394,18.0283431 C0.486884418,18.1227208 0.485083442,18.2383317 0.539767758,18.3342249 C0.596620657,18.4339208 0.706568325,18.4981484 0.828403729,18.4999606 C0.950391011,18.501775 1.0625816,18.4406875 1.12276173,18.342323 L7.45742934,7.99500773 L7.84867238,8.84715959 L10.8910664,15.4738335 L11.3866691,16.600051 L11.4963288,16.8355567 C11.6974732,17.2598124 11.8703886,17.5497167 12.0716373,17.7798218 C12.5006231,18.2692457 13.0516354,18.4715747 13.9517354,18.4967326 L14.1338876,18.5007429 L14.2140555,18.4965687 C14.3788402,18.4747246 14.5,18.3402281 14.5,18.1853946 C14.5,18.0144473 14.353324,17.8711232 14.159766,17.8710753 L13.9667577,17.8683457 C13.23949,17.8471739 12.8730841,17.7079192 12.5747116,17.3670263 L12.5148848,17.2937701 C12.3862775,17.1267414 12.2591138,16.9035538 12.1043882,16.5789995 C12.0565097,16.4787037 12.0069781,16.3709095 11.9496307,16.2425932 L11.5034339,15.2259235 L7.80746029,7.17411382 L6.14520282,3.47634226 L5.9868176,3.16569971 C5.41304784,2.06259444 4.97093878,1.45201729 4.43388865,1.06822222 C3.88266741,0.671861393 3.24308245,0.52047405 2.2259303,0.50220525 L1.99799968,0.500003998 Z", transform: "translate(5 3)", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
+        case "curved":
+            return "";
+        case "duotone":
+            return "";
+        case "outline":
+            return React.createElement(Outline, null);
+        default:
+            return React.createElement(Outline, null);
+    }
+};
+Lambda.displayName = "Lambda";
+createIcon(Lambda);
+
+const Layout = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M3 9h18", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M9 21V9", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
+        case "curved":
+            return "";
+        case "duotone":
+            return "";
+        case "outline":
+            return React.createElement(Outline, null);
+        default:
+            return React.createElement(Outline, null);
+    }
+};
+Layout.displayName = "Layout";
+createIcon(Layout);
+
+const Menu = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("path", { d: "M3 12h18", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M3 6h18", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M3 18h18", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
+        case "curved":
+            return "";
+        case "duotone":
+            return "";
+        case "outline":
+            return React.createElement(Outline, null);
+        default:
+            return React.createElement(Outline, null);
+    }
+};
+Menu.displayName = "Menu";
+createIcon(Menu);
+
+const Box = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("path", { d: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M3.27 6.96L12 12.01l8.73-5.05", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M12 22.08V12", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
+        case "curved":
+            return "";
+        case "duotone":
+            return "";
+        case "outline":
+            return React.createElement(Outline, null);
+        default:
+            return React.createElement(Outline, null);
+    }
+};
+Box.displayName = "Box";
+createIcon(Box);
+
+const Database = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("ellipse", { stroke: color, strokeWidth: strokeWidth, cx: "12", cy: "5", rx: "9", ry: "3" }),
+        React.createElement("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
+        case "curved":
+            return "";
+        case "duotone":
+            return "";
+        case "outline":
+            return React.createElement(Outline, null);
+        default:
+            return React.createElement(Outline, null);
+    }
+};
+Database.displayName = "Database";
+createIcon(Database);
+
+const RotateCcw = ({ color, strokeWidth, set }) => {
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("path", { d: "M1 4v6h6", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M3.51 15a9 9 0 102.13-9.36L1 10", stroke: color, strokeWidth: strokeWidth })));
+    switch (set) {
+        case "broken":
+            return "";
         case "curved":
-            return React__namespace.createElement(Curved, null);
+            return "";
         case "duotone":
-            return React__namespace.createElement(Duotone, null);
+            return "";
         case "outline":
-            return React__namespace.createElement(Outline, null);
+            return React.createElement(Outline, null);
         default:
-            return React__namespace.createElement(Outline, null);
+            return React.createElement(Outline, null);
     }
 };
-ZoomOut.displayName = "ZoomOut";
-createIcon(ZoomOut);
+RotateCcw.displayName = "RotateCcw";
+createIcon(RotateCcw);
 
-const Github = ({ color, strokeWidth, set }) => {
+const Type = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22", stroke: color, strokeWidth: strokeWidth })));
+        React.createElement("path", { d: "M4 7V4h16v3", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M9 20h6", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M12 4v16", stroke: color, strokeWidth: strokeWidth })));
     switch (set) {
         case "broken":
             return "";
@@ -30676,17 +30348,15 @@ const Github = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-Github.displayName = "Github";
-createIcon(Github);
+Type.displayName = "Type";
+createIcon(Type);
 
-const CodeSandbox = ({ color, strokeWidth, set }) => {
+const UserX = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M7.5 4.21l4.5 2.6 4.5-2.6", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M7.5 19.79V14.6L3 12", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M21 12l-4.5 2.6v5.19", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M3.27 6.96L12 12.01l8.73-5.05", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M12 22.08V12", stroke: color, strokeWidth: strokeWidth })));
+        React.createElement("path", { d: "M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("circle", { cx: "8.5", cy: "7", r: "4", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M18 8l5 5", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M23 8l-5 5", stroke: color, strokeWidth: strokeWidth })));
     switch (set) {
         case "broken":
             return "";
@@ -30700,12 +30370,12 @@ const CodeSandbox = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-CodeSandbox.displayName = "CodeSandbox";
-createIcon(CodeSandbox);
+UserX.displayName = "UserX";
+createIcon(UserX);
 
-const FileFunctionFill = ({ color, strokeWidth, set }) => {
+const Columns = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M4.055 2.055A2.75 2.75 0 016 1.25h12A2.75 2.75 0 0120.75 4v16A2.75 2.75 0 0118 22.75H6A2.75 2.75 0 013.25 20V4c0-.73.29-1.429.805-1.945zM15.116 5.31c-1.237-.194-2.29.086-3.02.83-.709.722-.998 1.758-.998 2.844v1.502H9a.75.75 0 100 1.5h2.098v3.22c0 .78-.197 1.257-.48 1.543-.283.284-.773.501-1.618.501a.75.75 0 000 1.5c1.088 0 2.023-.281 2.681-.944.658-.662.918-1.582.918-2.6v-3.22h2.062a.75.75 0 000-1.5h-2.063V8.984c0-.851.229-1.447.567-1.792.315-.32.838-.538 1.719-.4a.75.75 0 00.232-1.482z", stroke: color, strokeWidth: strokeWidth })));
+        React.createElement("path", { d: "M12 3h7a2 2 0 012 2v14a2 2 0 01-2 2h-7m0-18H5a2 2 0 00-2 2v14a2 2 0 002 2h7m0-18v18", stroke: color, strokeWidth: strokeWidth })));
     switch (set) {
         case "broken":
             return "";
@@ -30719,12 +30389,12 @@ const FileFunctionFill = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-FileFunctionFill.displayName = "FileFunctionFill";
-createIcon(FileFunctionFill);
+Columns.displayName = "Columns";
+var Columns$1 = createIcon(Columns);
 
-const Lambda = ({ color, strokeWidth, set }) => {
+const Folder = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M1.99799968,0.500003998 C1.78162411,0.500869509 1.63364907,0.642137248 1.63364907,0.814271399 C1.63364907,0.985218642 1.78032508,1.1285428 1.97131342,1.12856172 L2.19867872,1.13056263 C3.10118421,1.14702589 3.60939673,1.26556347 4.03249851,1.568379 C4.44848628,1.86630467 4.81555118,2.36599046 5.30914132,3.29234706 L5.53635444,3.7319218 L7.127422,7.27537654 L6.98962107,7.5004737 L0.544625394,18.0283431 C0.486884418,18.1227208 0.485083442,18.2383317 0.539767758,18.3342249 C0.596620657,18.4339208 0.706568325,18.4981484 0.828403729,18.4999606 C0.950391011,18.501775 1.0625816,18.4406875 1.12276173,18.342323 L7.45742934,7.99500773 L7.84867238,8.84715959 L10.8910664,15.4738335 L11.3866691,16.600051 L11.4963288,16.8355567 C11.6974732,17.2598124 11.8703886,17.5497167 12.0716373,17.7798218 C12.5006231,18.2692457 13.0516354,18.4715747 13.9517354,18.4967326 L14.1338876,18.5007429 L14.2140555,18.4965687 C14.3788402,18.4747246 14.5,18.3402281 14.5,18.1853946 C14.5,18.0144473 14.353324,17.8711232 14.159766,17.8710753 L13.9667577,17.8683457 C13.23949,17.8471739 12.8730841,17.7079192 12.5747116,17.3670263 L12.5148848,17.2937701 C12.3862775,17.1267414 12.2591138,16.9035538 12.1043882,16.5789995 C12.0565097,16.4787037 12.0069781,16.3709095 11.9496307,16.2425932 L11.5034339,15.2259235 L7.80746029,7.17411382 L6.14520282,3.47634226 L5.9868176,3.16569971 C5.41304784,2.06259444 4.97093878,1.45201729 4.43388865,1.06822222 C3.88266741,0.671861393 3.24308245,0.52047405 2.2259303,0.50220525 L1.99799968,0.500003998 Z", transform: "translate(5 3)", stroke: color, strokeWidth: strokeWidth })));
+        React.createElement("path", { d: "M2.707 7.454V5.62C2.707 4.725 3.469 4 4.409 4h4.843c.451 0 .884.17 1.204.474l.49.467c.126.12.296.186.473.186h8.399c.94 0 1.55.695 1.55 1.59v.737m-18.661 0h-.354a.344.344 0 00-.353.35l.508 11.587c.015.34.31.609.668.609h17.283c.358 0 .652-.269.667-.61L22 7.805a.344.344 0 00-.353-.35h-.278m-18.662 0h18.662", stroke: color, strokeWidth: strokeWidth })));
     switch (set) {
         case "broken":
             return "";
@@ -30738,14 +30408,13 @@ const Lambda = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-Lambda.displayName = "Lambda";
-createIcon(Lambda);
+Folder.displayName = "Folder";
+createIcon(Folder);
 
-const Layout = ({ color, strokeWidth, set }) => {
+const File = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
-        React.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M3 9h18", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M9 21V9", stroke: color, strokeWidth: strokeWidth })));
+        React.createElement("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M13 2v7h7", stroke: color, strokeWidth: strokeWidth })));
     switch (set) {
         case "broken":
             return "";
@@ -30759,14 +30428,14 @@ const Layout = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-Layout.displayName = "Layout";
-createIcon(Layout);
+File.displayName = "File";
+createIcon(File);
 
-const Menu = ({ color, strokeWidth, set }) => {
+const Printer = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M3 12h18", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M3 6h18", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M3 18h18", stroke: color, strokeWidth: strokeWidth })));
+        React.createElement("path", { d: "M6 9V2h12v7", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M6 14h12v8H6z", stroke: color, strokeWidth: strokeWidth })));
     switch (set) {
         case "broken":
             return "";
@@ -30780,14 +30449,13 @@ const Menu = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-Menu.displayName = "Menu";
-createIcon(Menu);
+Printer.displayName = "Printer";
+createIcon(Printer);
 
-const Box = ({ color, strokeWidth, set }) => {
+const Lock = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M3.27 6.96L12 12.01l8.73-5.05", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M12 22.08V12", stroke: color, strokeWidth: strokeWidth })));
+        React.createElement("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M7 11V7a5 5 0 0110 0v4", stroke: color, strokeWidth: strokeWidth })));
     switch (set) {
         case "broken":
             return "";
@@ -30801,14 +30469,14 @@ const Box = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-Box.displayName = "Box";
-createIcon(Box);
+Lock.displayName = "Lock";
+createIcon(Lock);
 
-const Database = ({ color, strokeWidth, set }) => {
+const HelpCircle = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
-        React.createElement("ellipse", { stroke: color, strokeWidth: strokeWidth, cx: "12", cy: "5", rx: "9", ry: "3" }),
-        React.createElement("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5", stroke: color, strokeWidth: strokeWidth })));
+        React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3", stroke: color, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: "M12 17h.01", stroke: color, strokeWidth: strokeWidth })));
     switch (set) {
         case "broken":
             return "";
@@ -30822,191 +30490,529 @@ const Database = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-Database.displayName = "Database";
-createIcon(Database);
+HelpCircle.displayName = "HelpCircle";
+createIcon(HelpCircle);
+
+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__*/React.createElement("div", {
+    ref: dripRef,
+    className: "jsx-3424889537" + " " + "drip"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    style: {
+      top: top,
+      left: left
+    },
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "10",
+    className: "jsx-3424889537"
+  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3424889537"
+  }, ".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;}}"));
+};
+ButtonDrip.displayName = 'ButtonDrip';
+
+var _excluded$a = ["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$a);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = useClasses('loading-container', className);
+  var bgColor = React.useMemo(function () {
+    return getIconBgColor(type, theme.palette, color);
+  }, [type, theme.palette, color]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, 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.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
+  }, children && /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]])
+  }, children), /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]])
+  }), /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]])
+  }), /*#__PURE__*/React.createElement("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.palette.accents_5, bgColor, spaceRatio]]])
+  })), /*#__PURE__*/React.createElement(_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.palette.accents_5, bgColor, spaceRatio]
+  }, ".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.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 ButtonLoading = function ButtonLoading(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-212623367" + " " + "btn-loading"
+  }, /*#__PURE__*/React.createElement(Loading, {
+    color: color
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "212623367"
+  }, ".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 = 'GeistButtonLoading';
+
+var _excluded$9 = ["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$9);
+  var classes = useClasses('icon', {
+    right: isRight,
+    single: isSingle
+  }, className);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2467502931"
+  }, ".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;}"));
+};
+ButtonIcon.displayName = 'ButtonIcon';
+
+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 = useClasses('text', isRight ? 'right' : 'left');
+  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, children);
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/React.createElement(ButtonIcon, {
+      isRight: isRight,
+      isSingle: true
+    }, hasIcon);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
+    isRight: isRight
+  }, hasIcon), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3568181479",
+    dynamic: [paddingForAutoMode, paddingForAutoMode]
+  }, ".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
+  });
+};
 
-const RotateCcw = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M1 4v6h6", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M3.51 15a9 9 0 102.13-9.36L1 10", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
-    }
+/* "use client" */
+
+var defaultContext$2 = {
+  isButtonGroup: false,
+  disabled: false
+};
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$2);
+var useButtonGroupContext = function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
 };
-RotateCcw.displayName = "RotateCcw";
-createIcon(RotateCcw);
 
-const Type = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M4 7V4h16v3", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M9 20h6", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M12 4v16", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
-    }
+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, ")");
 };
-Type.displayName = "Type";
-createIcon(Type);
 
-const UserX = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("circle", { cx: "8.5", cy: "7", r: "4", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M18 8l5 5", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M23 8l-5 5", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
+var getButtonGhostColors = function getButtonGhostColors(palette, type) {
+  var colors = {
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground,
+      color: palette.foreground
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success,
+      color: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning,
+      color: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error,
+      color: palette.error
     }
+  };
+  return colors[type] || null;
 };
-UserX.displayName = "UserX";
-createIcon(UserX);
+var getButtonColors = function getButtonColors(palette, props) {
+  var type = props.type,
+    disabled = props.disabled,
+    ghost = props.ghost;
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.border,
+      color: palette.accents_5
+    },
+    secondary: {
+      bg: palette.foreground,
+      border: palette.foreground,
+      color: palette.background
+    },
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: '#fff'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: '#fff'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: '#fff'
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    }
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
 
-const Columns = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M12 3h7a2 2 0 012 2v14a2 2 0 01-2 2h-7m0-18H5a2 2 0 00-2 2v14a2 2 0 002 2h7m0-18v18", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
+  /**
+   * 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 = type === null || type === void 0 ? void 0 : type.replace('-light', '');
+  var defaultColor = colors["default"];
+  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
+  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 = type.replace('-light', '');
+  return colors[withoutLightType] || null;
+};
+var getButtonHoverColors = function getButtonHoverColors(palette, props) {
+  var type = props.type,
+    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, type) : colors[type]) || colors["default"];
+  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
+    color: hoverColor.color || hoverColor.border
+  });
 };
-Columns.displayName = "Columns";
-var Columns$1 = createIcon(Columns);
-
-const Folder = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M2.707 7.454V5.62C2.707 4.725 3.469 4 4.409 4h4.843c.451 0 .884.17 1.204.474l.49.467c.126.12.296.186.473.186h8.399c.94 0 1.55.695 1.55 1.59v.737m-18.661 0h-.354a.344.344 0 00-.353.35l.508 11.587c.015.34.31.609.668.609h17.283c.358 0 .652-.269.667-.61L22 7.805a.344.344 0 00-.353-.35h-.278m-18.662 0h18.662", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
-    }
+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'
+  };
 };
-Folder.displayName = "Folder";
-createIcon(Folder);
-
-const File = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M13 2v7h7", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
-    }
+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);
 };
-File.displayName = "File";
-createIcon(File);
 
-const Printer = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { d: "M6 9V2h12v7", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M6 14h12v8H6z", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
-    }
-};
-Printer.displayName = "Printer";
-createIcon(Printer);
+var _excluded$8 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var buttonRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  });
+  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.type;
+    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,
+    onClick = filteredProps.onClick,
+    _filteredProps$auto = filteredProps.auto,
+    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
+    icon = filteredProps.icon,
+    _filteredProps$htmlTy = filteredProps.htmlType,
+    htmlType = _filteredProps$htmlTy === void 0 ? 'button' : _filteredProps$htmlTy,
+    iconRight = filteredProps.iconRight,
+    _filteredProps$classN = filteredProps.className,
+    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
+    filteredProps.crossOrigin;
+    var props = _objectWithoutProperties(filteredProps, _excluded$8);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
 
-const Lock = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M7 11V7a5 5 0 0110 0v4", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
-    }
-};
-Lock.displayName = "Lock";
-createIcon(Lock);
+  var _useMemo = React.useMemo(function () {
+      return getButtonColors(theme.palette, filteredProps);
+    }, [theme.palette, filteredProps]),
+    bg = _useMemo.bg,
+    border = _useMemo.border,
+    color = _useMemo.color;
+  var hover = React.useMemo(function () {
+    return getButtonHoverColors(theme.palette, filteredProps);
+  }, [theme.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.palette, filteredProps);
+  }, [theme.palette, filteredProps]);
 
-const HelpCircle = ({ color, strokeWidth, set }) => {
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3", stroke: color, strokeWidth: strokeWidth }),
-        React.createElement("path", { d: "M12 17h.01", stroke: color, strokeWidth: strokeWidth })));
-    switch (set) {
-        case "broken":
-            return "";
-        case "curved":
-            return "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
+  /* istanbul ignore next */
+  var dripCompletedHandle = function dripCompletedHandle() {
+    setDripShow(false);
+    setDripX(0);
+    setDripY(0);
+  };
+  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);
     }
-};
-HelpCircle.displayName = "HelpCircle";
-createIcon(HelpCircle);
+    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);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: buttonRef,
+    type: htmlType,
+    disabled: disabled,
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["1558010596", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : '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, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
+    x: dripX,
+    y: dripY,
+    color: dripColor,
+    onCompleted: dripCompletedHandle
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1558010596",
+    dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : '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, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
+  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.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(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : '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(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.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;}")));
+});
+ButtonComponent.displayName = 'Button';
+var Button = withScale(ButtonComponent);
 
 var getColors = function getColors(type, palette) {
   var colors = {