@helpdice/ui 1.2.9 → 1.3.0

package/dist/table/index.js

@@ -989,112 +989,47 @@ var useTheme = function useTheme() {
   return React.useContext(ThemeContext);
 };
 
-var makeColgroup = function makeColgroup(width, columns) {
-  var unsetWidthCount = columns.filter(function (c) {
-    return !c.width;
-  }).length;
-  var customWidthTotal = columns.reduce(function (pre, current) {
-    return current.width ? pre + current.width : pre;
-  }, 0);
-  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
-  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
-  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement("col", {
-      key: "colgroup-".concat(index),
-      width: column.width || averageWidth
-    });
-  }));
-};
-var TableHead = function TableHead(props) {
+var InputLabel = function InputLabel(_ref) {
+  var children = _ref.children,
+    isRight = _ref.isRight;
   var theme = useTheme();
-  var _ref = props,
-    columns = _ref.columns,
-    width = _ref.width;
-  var isScalableWidth = React.useMemo(function () {
-    return columns.find(function (item) {
-      return !!item.width;
-    });
-  }, [columns]);
-  var colgroup = React.useMemo(function () {
-    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
-    return makeColgroup(width, columns);
-  }, [isScalableWidth, width]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    className: _JSXStyle.dynamic([["134865897", [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("tr", {
-    className: _JSXStyle.dynamic([["134865897", [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]]])
-  }, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement("th", {
-      style: {
-        // textAlign: `${column?.align} !important`,
-        // paddingLeft: '0.3rem',
-        // paddingRight: '0.3rem',
-        // color: `${column?.color}`,
-        whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
-      },
-      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
-      "data-column": column.label,
-      className: _JSXStyle.dynamic([["134865897", [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]]]) + " " + (column.className || "")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _JSXStyle.dynamic([["134865897", [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-box"
-    }, column.label, /*#__PURE__*/React.createElement("br", {
-      className: _JSXStyle.dynamic([["134865897", [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("span", {
-      style: {
-        textAlign: 'center'
-      },
-      className: _JSXStyle.dynamic([["134865897", [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]]])
-    }, column.text)));
-  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "134865897",
-    dynamic: [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;font-size:inherit;}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;}")));
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3089782703", [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border]]]) + " " + ((isRight ? 'right' : '') || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3089782703",
+    dynamic: [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border]
+  }, "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:initial;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin:0;padding:0 ".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-top:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";font-size:inherit;line-height:1;}span.right.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";border-left:0;border-right:1px solid ").concat(theme.palette.border, ";}")));
 };
-TableHead.displayName = 'TableHead';
+var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
 
-var TableCell = function TableCell(_ref) {
-  var columns = _ref.columns,
-    row = _ref.row,
-    rowIndex = _ref.rowIndex,
-    emptyText = _ref.emptyText,
-    onCellClick = _ref.onCellClick;
-  /* eslint-disable react/jsx-no-useless-fragment */
-  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
-    var currentRowValue = row[column.prop];
-    var cellValue = currentRowValue || emptyText;
-    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
-    return /*#__PURE__*/React.createElement("td", {
-      style: _objectSpread2({
-        fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
-        textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
-        paddingLeft: '0.3rem',
-        paddingRight: '0.3rem',
-        color: "".concat(column === null || column === undefined ? undefined : column.color),
-        whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
-      }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
-      "data-column": column.label,
-      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
-      onClick: function onClick() {
-        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
-      },
-      className: column.className
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "cell"
-    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
-  }));
-  /* eslint-enable */
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
+  var children = _ref.children;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["1278828862", [theme.palette.accents_6]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1278828862",
+    dynamic: [theme.palette.accents_6]
+  }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
 };
+InputBlockLabelComponent.displayName = 'GeistInputBlockLabel';
+var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
 
-/* "use client" */
-
-var defaultContext$3 = {
-  columns: [],
-  updateColumn: function updateColumn() {}
-};
-var TableContext = /*#__PURE__*/React.createContext(defaultContext$3);
-var useTableContext = function useTableContext() {
-  return React.useContext(TableContext);
+var InputIconComponent = function InputIconComponent(_ref) {
+  var icon = _ref.icon,
+    _ref$clickable = _ref.clickable,
+    clickable = _ref$clickable === undefined ? false : _ref$clickable,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement("span", {
+    onClick: onClick,
+    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
+  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4247656379",
+    dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']
+  }, ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
 };
+InputIconComponent.displayName = 'GeistInputIcon';
+var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
 
 /* "use client" */
 
@@ -1129,31 +1064,663 @@ var useClasses = function useClasses() {
   return classes.trim();
 };
 
-var lodash$1 = {exports: {}};
+var InputIconClear = function InputIconClear(_ref) {
+  var onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    visible = _ref.visible;
+  var theme = useTheme();
+  var classes = useClasses('clear-icon', {
+    visible: visible
+  });
+  var clickHandler = function clickHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 6L6 18",
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 6l12 12",
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1567030211",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]
+  }, ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme.palette.accents_3 : theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+};
+var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
 
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-var lodash = lodash$1.exports;
+var getColors$2 = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      color: palette.foreground,
+      borderColor: palette.border,
+      hoverBorder: palette.accents_5
+    },
+    secondary: {
+      color: palette.foreground,
+      borderColor: palette.secondary,
+      hoverBorder: palette.secondary
+    },
+    success: {
+      color: palette.foreground,
+      borderColor: palette.successLight,
+      hoverBorder: palette.success
+    },
+    warning: {
+      color: palette.foreground,
+      borderColor: palette.warningLight,
+      hoverBorder: palette.warning
+    },
+    error: {
+      color: palette.error,
+      borderColor: palette.error,
+      hoverBorder: palette.errorDark
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};
 
-var hasRequiredLodash;
+/* "use client" */
 
-function requireLodash () {
-	if (hasRequiredLodash) return lodash$1.exports;
-	hasRequiredLodash = 1;
-	(function (module, exports) {
-(function() {
+var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'pl', 'pr', 'pt', 'pb', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'ml', 'mr', 'mt', 'mb', 'px', 'py', 'mx', 'my', 'font', 'unit', 'scale'];
+var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
+  return "".concat(scale1x);
+};
+var defaultContext$3 = {
+  getScaleProps: function getScaleProps() {
+    return undefined;
+  },
+  getAllScaleProps: function getAllScaleProps() {
+    return {};
+  },
+  SCALES: {
+    pl: defaultDynamicLayoutPipe,
+    pr: defaultDynamicLayoutPipe,
+    pb: defaultDynamicLayoutPipe,
+    pt: defaultDynamicLayoutPipe,
+    px: defaultDynamicLayoutPipe,
+    py: defaultDynamicLayoutPipe,
+    mb: defaultDynamicLayoutPipe,
+    ml: defaultDynamicLayoutPipe,
+    mr: defaultDynamicLayoutPipe,
+    mt: defaultDynamicLayoutPipe,
+    mx: defaultDynamicLayoutPipe,
+    my: defaultDynamicLayoutPipe,
+    width: defaultDynamicLayoutPipe,
+    height: defaultDynamicLayoutPipe,
+    font: defaultDynamicLayoutPipe
+  },
+  unit: '16px'
+};
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$3);
+var useScale = function useScale() {
+  return React.useContext(ScaleContext);
+};
 
-		  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
-		  var undefined$1;
+/* "use client" */
 
-		  /** Used as the semantic version number. */
-		  var VERSION = '4.17.21';
+var getId = function getId() {
+  return Math.random().toString(32).slice(2, 10);
+};
+var pickChildByProps = function pickChildByProps(children, key, value) {
+  var target = [];
+  var isArray = Array.isArray(value);
+  var withoutPropChildren = React.Children.map(children, function (item) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return null;
+    if (!item.props) return item;
+    if (isArray) {
+      if (value.includes(item.props[key])) {
+        target.push(item);
+        return null;
+      }
+      return item;
+    }
+    if (item.props[key] === value) {
+      target.push(item);
+      return null;
+    }
+    return item;
+  });
+  var targetChildren = target.length >= 0 ? target : undefined;
+  return [withoutPropChildren, targetChildren];
+};
+var isBrowser = function isBrowser() {
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+};
+var isCSSNumberValue = function isCSSNumberValue(value) {
+  return value !== undefined && !Number.isNaN(+value);
+};
+
+var generateGetScaleProps = function generateGetScaleProps(props) {
+  var getScaleProps = function getScaleProps(keyOrKeys) {
+    if (!Array.isArray(keyOrKeys)) return props[keyOrKeys];
+    var value = undefined;
+    var _iterator = _createForOfIteratorHelper(keyOrKeys),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var key = _step.value;
+        var currentValue = props[key];
+        if (typeof currentValue !== 'undefined') {
+          value = currentValue;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return value;
+  };
+  return getScaleProps;
+};
+var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
+  var getAllScaleProps = function getAllScaleProps() {
+    var scaleProps = {};
+    var _iterator2 = _createForOfIteratorHelper(ScalePropKeys),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var key = _step2.value;
+        var value = props[key];
+        if (typeof value !== 'undefined') {
+          scaleProps[key] = value;
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return scaleProps;
+  };
+  return getAllScaleProps;
+};
+
+var _excluded$e = ["children"];
+var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
+  if (scale === 1) return scale;
+  var diff = Math.abs((scale - 1) / 2);
+  return scale > 1 ? 1 + diff : 1 - diff;
+};
+var withScale = function withScale(Render) {
+  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
+    var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$e);
+    var _useTheme = useTheme(),
+      layout = _useTheme.layout;
+    var paddingLeft = props.paddingLeft,
+      pl = props.pl,
+      paddingRight = props.paddingRight,
+      pr = props.pr,
+      paddingTop = props.paddingTop,
+      pt = props.pt,
+      paddingBottom = props.paddingBottom,
+      pb = props.pb,
+      marginTop = props.marginTop,
+      mt = props.mt,
+      marginRight = props.marginRight,
+      mr = props.mr,
+      marginBottom = props.marginBottom,
+      mb = props.mb,
+      marginLeft = props.marginLeft,
+      ml = props.ml,
+      px = props.px,
+      py = props.py,
+      mx = props.mx,
+      my = props.my,
+      width = props.width,
+      height = props.height,
+      font = props.font,
+      w = props.w,
+      h = props.h,
+      margin = props.margin,
+      padding = props.padding,
+      _props$unit = props.unit,
+      unit = _props$unit === undefined ? layout.unit : _props$unit,
+      _props$scale = props.scale,
+      scale = _props$scale === undefined ? 1 : _props$scale;
+    var makeScaleHandler = function makeScaleHandler(attrValue) {
+      return function (scale1x, defaultValue) {
+        // 0 means disable scale and the default value is 0
+        if (scale1x === 0) {
+          scale1x = 1;
+          defaultValue = defaultValue || 0;
+        }
+        var factor = reduceScaleCoefficient(scale) * scale1x;
+        if (typeof attrValue === 'undefined') {
+          if (typeof defaultValue !== 'undefined') return "".concat(defaultValue);
+          return "calc(".concat(factor, " * ").concat(unit, ")");
+        }
+        if (!isCSSNumberValue(attrValue)) return "".concat(attrValue);
+        var customFactor = factor * Number(attrValue);
+        return "calc(".concat(customFactor, " * ").concat(unit, ")");
+      };
+    };
+    var value = {
+      unit: unit,
+      SCALES: {
+        pt: makeScaleHandler((_ref2 = (_ref3 = paddingTop !== null && paddingTop !== undefined ? paddingTop : pt) !== null && _ref3 !== undefined ? _ref3 : py) !== null && _ref2 !== undefined ? _ref2 : padding),
+        pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== undefined ? paddingRight : pr) !== null && _ref5 !== undefined ? _ref5 : px) !== null && _ref4 !== undefined ? _ref4 : padding),
+        pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== undefined ? paddingBottom : pb) !== null && _ref7 !== undefined ? _ref7 : py) !== null && _ref6 !== undefined ? _ref6 : padding),
+        pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== undefined ? paddingLeft : pl) !== null && _ref9 !== undefined ? _ref9 : px) !== null && _ref8 !== undefined ? _ref8 : padding),
+        px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== undefined ? px : paddingLeft) !== null && _ref13 !== undefined ? _ref13 : paddingRight) !== null && _ref12 !== undefined ? _ref12 : pl) !== null && _ref11 !== undefined ? _ref11 : pr) !== null && _ref10 !== undefined ? _ref10 : padding),
+        py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== undefined ? py : paddingTop) !== null && _ref17 !== undefined ? _ref17 : paddingBottom) !== null && _ref16 !== undefined ? _ref16 : pt) !== null && _ref15 !== undefined ? _ref15 : pb) !== null && _ref14 !== undefined ? _ref14 : padding),
+        mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== undefined ? marginTop : mt) !== null && _ref19 !== undefined ? _ref19 : my) !== null && _ref18 !== undefined ? _ref18 : margin),
+        mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== undefined ? marginRight : mr) !== null && _ref21 !== undefined ? _ref21 : mx) !== null && _ref20 !== undefined ? _ref20 : margin),
+        mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== undefined ? marginBottom : mb) !== null && _ref23 !== undefined ? _ref23 : my) !== null && _ref22 !== undefined ? _ref22 : margin),
+        ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== undefined ? marginLeft : ml) !== null && _ref25 !== undefined ? _ref25 : mx) !== null && _ref24 !== undefined ? _ref24 : margin),
+        mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== undefined ? mx : marginLeft) !== null && _ref29 !== undefined ? _ref29 : marginRight) !== null && _ref28 !== undefined ? _ref28 : ml) !== null && _ref27 !== undefined ? _ref27 : mr) !== null && _ref26 !== undefined ? _ref26 : margin),
+        my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== undefined ? my : marginTop) !== null && _ref33 !== undefined ? _ref33 : marginBottom) !== null && _ref32 !== undefined ? _ref32 : mt) !== null && _ref31 !== undefined ? _ref31 : mb) !== null && _ref30 !== undefined ? _ref30 : margin),
+        width: makeScaleHandler(width !== null && width !== undefined ? width : w),
+        height: makeScaleHandler(height !== null && height !== undefined ? height : h),
+        font: makeScaleHandler(font)
+      },
+      getScaleProps: generateGetScaleProps(props),
+      getAllScaleProps: generateGetAllScaleProps(props)
+    };
+    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
+      ref: ref
+    }), children));
+  });
+  ScaleFC.displayName = "Scale".concat(Render.displayName || 'Wrapper');
+  return ScaleFC;
+};
+
+var _excluded$d = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
+var simulateChangeEvent = function simulateChangeEvent(el, event) {
+  return _objectSpread2(_objectSpread2({}, event), {}, {
+    target: el,
+    currentTarget: el
+  });
+};
+var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+    labelRight = _ref.labelRight,
+    _ref$type = _ref.type,
+    type = _ref$type === undefined ? 'default' : _ref$type,
+    error = _ref.error,
+    _ref$htmlType = _ref.htmlType,
+    htmlType = _ref$htmlType === undefined ? 'text' : _ref$htmlType,
+    icon = _ref.icon,
+    iconRight = _ref.iconRight,
+    _ref$iconClickable = _ref.iconClickable,
+    iconClickable = _ref$iconClickable === undefined ? false : _ref$iconClickable,
+    onIconClick = _ref.onIconClick,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === undefined ? '' : _ref$initialValue,
+    onChange = _ref.onChange,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    value = _ref.value,
+    onClearClick = _ref.onClearClick,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === undefined ? false : _ref$clearable,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === undefined ? 'off' : _ref$autoComplete,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === undefined ? '' : _ref$placeholder,
+    children = _ref.children,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === undefined ? false : _ref$disabled,
+    props = _objectWithoutProperties(_ref, _excluded$d);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var inputRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+  var _useState = React.useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfValue = _useState2[0],
+    setSelfValue = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hover = _useState4[0],
+    setHover = _useState4[1];
+  var isControlledComponent = React.useMemo(function () {
+    return value !== undefined;
+  }, [value]);
+  var labelClasses = React.useMemo(function () {
+    return labelRight ? 'right-label' : label ? 'left-label' : '';
+  }, [label, labelRight]);
+  var iconClasses = React.useMemo(function () {
+    return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
+  }, [icon, iconRight]);
+  var _useMemo = React.useMemo(function () {
+      return getColors$2(theme.palette, type);
+    }, [theme.palette, type]),
+    color = _useMemo.color,
+    borderColor = _useMemo.borderColor,
+    hoverBorder = _useMemo.hoverBorder;
+  var changeHandler = function changeHandler(event) {
+    if (disabled || readOnly) return;
+    setSelfValue(event.target.value);
+    onChange && onChange(event);
+  };
+  var clearHandler = function clearHandler(event) {
+    setSelfValue('');
+    onClearClick && onClearClick(event);
+    /* istanbul ignore next */
+    if (!inputRef.current) return;
+    var changeEvent = simulateChangeEvent(inputRef.current, event);
+    changeEvent.target.value = '';
+    onChange && onChange(changeEvent);
+    inputRef.current.focus();
+  };
+  var focusHandler = function focusHandler(e) {
+    setHover(true);
+    onFocus && onFocus(e);
+  };
+  var blurHandler = function blurHandler(e) {
+    setHover(false);
+    onBlur && onBlur(e);
+  };
+  var iconClickHandler = function iconClickHandler(e) {
+    if (disabled) return;
+    onIconClick && onIconClick(e);
+  };
+  var iconProps = React.useMemo(function () {
+    return {
+      clickable: iconClickable,
+      onClick: iconClickHandler
+    };
+  }, [iconClickable, iconClickHandler]);
+  React.useEffect(function () {
+    if (isControlledComponent) {
+      setSelfValue(value);
+    }
+  });
+  var controlledValue = isControlledComponent ? {
+    value: selfValue
+  } : {
+    defaultValue: initialValue
+  };
+  var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
+  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
+  }, label && /*#__PURE__*/React.createElement(MemoInputLabel, null, label), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
+      hover: hover,
+      disabled: disabled
+    }, labelClasses) || "")
+  }, icon && /*#__PURE__*/React.createElement(InputIcon, _extends({
+    icon: icon
+  }, iconProps)), /*#__PURE__*/React.createElement("input", _extends({
+    type: htmlType,
+    ref: inputRef,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    onFocus: focusHandler,
+    onBlur: blurHandler,
+    onChange: changeHandler,
+    autoComplete: autoComplete
+  }, inputProps, {
+    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
+      disabled: disabled
+    }, iconClasses) || "")
+  })), clearable && /*#__PURE__*/React.createElement(MemoInputIconClear, {
+    visible: Boolean(inputRef.current && inputRef.current.value !== ''),
+    disabled: disabled || readOnly,
+    onClick: clearHandler
+  }), iconRight && /*#__PURE__*/React.createElement(InputIcon, _extends({
+    icon: iconRight
+  }, iconProps))), labelRight && /*#__PURE__*/React.createElement(MemoInputLabel, {
+    isRight: true
+  }, labelRight), /*#__PURE__*/React.createElement("br", {
+    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]])
+  })), error && /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginTop: 0.4,
+      marginRight: 0,
+      marginLeft: 0,
+      marginBottom: '0.4rem',
+      textAlign: 'left'
+    },
+    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "input-error"
+  }, error), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1424341926",
+    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
+  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}.input-error.__jsx-style-dynamic-selector{color:#aa4a44;}.input-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;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+});
+InputComponent.displayName = 'Input';
+var Input = withScale(InputComponent);
+
+var tuple = function tuple() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args;
+};
+tuple('default', 'secondary', 'success', 'warning', 'error', 'abort', 'secondary-light', 'success-light', 'warning-light', 'error-light');
+tuple('default', 'secondary', 'success', 'warning', 'error');
+tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite');
+tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite', 'alert', 'purple', 'violet', 'cyan');
+tuple('default', 'silent', 'prevent');
+tuple('hover', 'click');
+tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
+tuple('start', 'center', 'end', 'left', 'right');
+
+var _excluded$c = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
+var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === undefined ? 'default' : _ref$type,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === undefined ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === undefined ? '' : _ref$initialValue,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    placeholder = _ref.placeholder,
+    _ref$resize = _ref.resize,
+    resize = _ref$resize === undefined ? 'none' : _ref$resize,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var textareaRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return textareaRef.current;
+  });
+  var isControlledComponent = React.useMemo(function () {
+    return value !== undefined;
+  }, [value]);
+  var _useState = React.useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfValue = _useState2[0],
+    setSelfValue = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hover = _useState4[0],
+    setHover = _useState4[1];
+  var _useMemo = React.useMemo(function () {
+      return getColors$2(theme.palette, type);
+    }, [theme.palette, type]),
+    color = _useMemo.color,
+    borderColor = _useMemo.borderColor,
+    hoverBorder = _useMemo.hoverBorder;
+  var classes = useClasses('wrapper', {
+    hover: hover,
+    disabled: disabled
+  }, className);
+  var changeHandler = function changeHandler(event) {
+    if (disabled || readOnly) return;
+    setSelfValue(event.target.value);
+    onChange && onChange(event);
+  };
+  var focusHandler = function focusHandler(e) {
+    setHover(true);
+    onFocus && onFocus(e);
+  };
+  var blurHandler = function blurHandler(e) {
+    setHover(false);
+    onBlur && onBlur(e);
+  };
+  React.useEffect(function () {
+    if (isControlledComponent) {
+      setSelfValue(value);
+    }
+  });
+  var controlledValue = isControlledComponent ? {
+    value: selfValue
+  } : {
+    defaultValue: initialValue
+  };
+  var textareaProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["12276481", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("textarea", _extends({
+    ref: textareaRef,
+    disabled: disabled,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    onFocus: focusHandler,
+    onBlur: blurHandler,
+    onChange: changeHandler
+  }, textareaProps, {
+    className: _JSXStyle.dynamic([["12276481", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "12276481",
+    dynamic: [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]
+  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
+});
+TextareaComponent.displayName = 'Textarea';
+var Textarea = withScale(TextareaComponent);
+
+var PasswordIcon = function PasswordIcon(_ref) {
+  var visible = _ref.visible;
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    style: {
+      color: 'currentColor'
+    }
+  }, !visible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+    d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 1l22 22"
+  })));
+};
+var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
+
+var _excluded$b = ["hideToggle", "children"];
+var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var hideToggle = _ref.hideToggle,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$b);
+  var _useScale = useScale(),
+    getAllScaleProps = _useScale.getAllScaleProps;
+  var inputRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+  var iconClickHandler = function iconClickHandler() {
+    setVisible(function (v) {
+      return !v;
+    });
+    /* istanbul ignore next */
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  var inputProps = React.useMemo(function () {
+    return _objectSpread2(_objectSpread2({}, props), {}, {
+      ref: inputRef,
+      iconClickable: true,
+      onIconClick: iconClickHandler,
+      htmlType: visible ? 'text' : 'password'
+    });
+  }, [props, iconClickHandler, visible, inputRef]);
+  var icon = React.useMemo(function () {
+    if (hideToggle) return null;
+    return /*#__PURE__*/React.createElement(MemoPasswordIcon, {
+      visible: visible
+    });
+  }, [hideToggle, visible]);
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    iconRight: icon
+  }, getAllScaleProps(), inputProps), children);
+});
+InputPasswordComponent.displayName = 'InputPassword';
+var InputPassword = withScale(InputPasswordComponent);
+
+/* "use client" */
+Input.Textarea = Textarea;
+Input.Password = InputPassword;
+
+var lodash$1 = {exports: {}};
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+var lodash = lodash$1.exports;
+
+var hasRequiredLodash;
+
+function requireLodash () {
+	if (hasRequiredLodash) return lodash$1.exports;
+	hasRequiredLodash = 1;
+	(function (module, exports) {
+(function() {
+
+		  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
+		  var undefined$1;
+
+		  /** Used as the semantic version number. */
+		  var VERSION = '4.17.21';
 
 		  /** Used as the size to enable large array optimizations. */
 		  var LARGE_ARRAY_SIZE = 200;
@@ -18146,674 +18713,200 @@ function requireLodash () {
 
 		    // Add `LazyWrapper` methods for `_.head` and `_.last`.
 		    arrayEach(['head', 'last'], function(methodName, index) {
-		      var takeName = 'take' + (index ? 'Right' : '');
-
-		      LazyWrapper.prototype[methodName] = function() {
-		        return this[takeName](1).value()[0];
-		      };
-		    });
-
-		    // Add `LazyWrapper` methods for `_.initial` and `_.tail`.
-		    arrayEach(['initial', 'tail'], function(methodName, index) {
-		      var dropName = 'drop' + (index ? '' : 'Right');
-
-		      LazyWrapper.prototype[methodName] = function() {
-		        return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1);
-		      };
-		    });
-
-		    LazyWrapper.prototype.compact = function() {
-		      return this.filter(identity);
-		    };
-
-		    LazyWrapper.prototype.find = function(predicate) {
-		      return this.filter(predicate).head();
-		    };
-
-		    LazyWrapper.prototype.findLast = function(predicate) {
-		      return this.reverse().find(predicate);
-		    };
-
-		    LazyWrapper.prototype.invokeMap = baseRest(function(path, args) {
-		      if (typeof path == 'function') {
-		        return new LazyWrapper(this);
-		      }
-		      return this.map(function(value) {
-		        return baseInvoke(value, path, args);
-		      });
-		    });
-
-		    LazyWrapper.prototype.reject = function(predicate) {
-		      return this.filter(negate(getIteratee(predicate)));
-		    };
-
-		    LazyWrapper.prototype.slice = function(start, end) {
-		      start = toInteger(start);
-
-		      var result = this;
-		      if (result.__filtered__ && (start > 0 || end < 0)) {
-		        return new LazyWrapper(result);
-		      }
-		      if (start < 0) {
-		        result = result.takeRight(-start);
-		      } else if (start) {
-		        result = result.drop(start);
-		      }
-		      if (end !== undefined$1) {
-		        end = toInteger(end);
-		        result = end < 0 ? result.dropRight(-end) : result.take(end - start);
-		      }
-		      return result;
-		    };
-
-		    LazyWrapper.prototype.takeRightWhile = function(predicate) {
-		      return this.reverse().takeWhile(predicate).reverse();
-		    };
-
-		    LazyWrapper.prototype.toArray = function() {
-		      return this.take(MAX_ARRAY_LENGTH);
-		    };
-
-		    // Add `LazyWrapper` methods to `lodash.prototype`.
-		    baseForOwn(LazyWrapper.prototype, function(func, methodName) {
-		      var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName),
-		          isTaker = /^(?:head|last)$/.test(methodName),
-		          lodashFunc = lodash[isTaker ? ('take' + (methodName == 'last' ? 'Right' : '')) : methodName],
-		          retUnwrapped = isTaker || /^find/.test(methodName);
-
-		      if (!lodashFunc) {
-		        return;
-		      }
-		      lodash.prototype[methodName] = function() {
-		        var value = this.__wrapped__,
-		            args = isTaker ? [1] : arguments,
-		            isLazy = value instanceof LazyWrapper,
-		            iteratee = args[0],
-		            useLazy = isLazy || isArray(value);
-
-		        var interceptor = function(value) {
-		          var result = lodashFunc.apply(lodash, arrayPush([value], args));
-		          return (isTaker && chainAll) ? result[0] : result;
-		        };
-
-		        if (useLazy && checkIteratee && typeof iteratee == 'function' && iteratee.length != 1) {
-		          // Avoid lazy use if the iteratee has a "length" value other than `1`.
-		          isLazy = useLazy = false;
-		        }
-		        var chainAll = this.__chain__,
-		            isHybrid = !!this.__actions__.length,
-		            isUnwrapped = retUnwrapped && !chainAll,
-		            onlyLazy = isLazy && !isHybrid;
-
-		        if (!retUnwrapped && useLazy) {
-		          value = onlyLazy ? value : new LazyWrapper(this);
-		          var result = func.apply(value, args);
-		          result.__actions__.push({ 'func': thru, 'args': [interceptor], 'thisArg': undefined$1 });
-		          return new LodashWrapper(result, chainAll);
-		        }
-		        if (isUnwrapped && onlyLazy) {
-		          return func.apply(this, args);
-		        }
-		        result = this.thru(interceptor);
-		        return isUnwrapped ? (isTaker ? result.value()[0] : result.value()) : result;
-		      };
-		    });
-
-		    // Add `Array` methods to `lodash.prototype`.
-		    arrayEach(['pop', 'push', 'shift', 'sort', 'splice', 'unshift'], function(methodName) {
-		      var func = arrayProto[methodName],
-		          chainName = /^(?:push|sort|unshift)$/.test(methodName) ? 'tap' : 'thru',
-		          retUnwrapped = /^(?:pop|shift)$/.test(methodName);
-
-		      lodash.prototype[methodName] = function() {
-		        var args = arguments;
-		        if (retUnwrapped && !this.__chain__) {
-		          var value = this.value();
-		          return func.apply(isArray(value) ? value : [], args);
-		        }
-		        return this[chainName](function(value) {
-		          return func.apply(isArray(value) ? value : [], args);
-		        });
-		      };
-		    });
-
-		    // Map minified method names to their real names.
-		    baseForOwn(LazyWrapper.prototype, function(func, methodName) {
-		      var lodashFunc = lodash[methodName];
-		      if (lodashFunc) {
-		        var key = lodashFunc.name + '';
-		        if (!hasOwnProperty.call(realNames, key)) {
-		          realNames[key] = [];
-		        }
-		        realNames[key].push({ 'name': methodName, 'func': lodashFunc });
-		      }
-		    });
-
-		    realNames[createHybrid(undefined$1, WRAP_BIND_KEY_FLAG).name] = [{
-		      'name': 'wrapper',
-		      'func': undefined$1
-		    }];
-
-		    // Add methods to `LazyWrapper`.
-		    LazyWrapper.prototype.clone = lazyClone;
-		    LazyWrapper.prototype.reverse = lazyReverse;
-		    LazyWrapper.prototype.value = lazyValue;
-
-		    // Add chain sequence methods to the `lodash` wrapper.
-		    lodash.prototype.at = wrapperAt;
-		    lodash.prototype.chain = wrapperChain;
-		    lodash.prototype.commit = wrapperCommit;
-		    lodash.prototype.next = wrapperNext;
-		    lodash.prototype.plant = wrapperPlant;
-		    lodash.prototype.reverse = wrapperReverse;
-		    lodash.prototype.toJSON = lodash.prototype.valueOf = lodash.prototype.value = wrapperValue;
-
-		    // Add lazy aliases.
-		    lodash.prototype.first = lodash.prototype.head;
-
-		    if (symIterator) {
-		      lodash.prototype[symIterator] = wrapperToIterator;
-		    }
-		    return lodash;
-		  });
-
-		  /*--------------------------------------------------------------------------*/
-
-		  // Export lodash.
-		  var _ = runInContext();
+		      var takeName = 'take' + (index ? 'Right' : '');
 
-		  // Some AMD build optimizers, like r.js, check for condition patterns like:
-		  if (freeModule) {
-		    // Export for Node.js.
-		    (freeModule.exports = _)._ = _;
-		    // Export for CommonJS support.
-		    freeExports._ = _;
-		  }
-		  else {
-		    // Export to the global object.
-		    root._ = _;
-		  }
-		}.call(lodash)); 
-	} (lodash$1, lodash$1.exports));
-	return lodash$1.exports;
-}
+		      LazyWrapper.prototype[methodName] = function() {
+		        return this[takeName](1).value()[0];
+		      };
+		    });
 
-var lodashExports = requireLodash();
-var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
+		    // Add `LazyWrapper` methods for `_.initial` and `_.tail`.
+		    arrayEach(['initial', 'tail'], function(methodName, index) {
+		      var dropName = 'drop' + (index ? '' : 'Right');
 
-var TableBody = function TableBody(_ref) {
-  var data = _ref.data,
-    emptyText = _ref.emptyText,
-    onRow = _ref.onRow,
-    onCell = _ref.onCell,
-    rowClassName = _ref.rowClassName,
-    _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
-    onSelected = _ref.onSelected;
-  var theme = useTheme();
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useTableContext = useTableContext(),
-    columns = _useTableContext.columns;
-  // const rowClickHandler = (row: TableDataItem, index: number) => {
-  //   onRow && onRow(row, index)
-  // }
+		      LazyWrapper.prototype[methodName] = function() {
+		        return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1);
+		      };
+		    });
 
-  var handleClick = function handleClick(_event, id) {
-    if (readOnly) {
-      return true;
-    }
-    var selectedIndex = selected.indexOf(id);
-    var newSelected = [];
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selected.slice(1));
-    } else if (selectedIndex === selected.length - 1) {
-      newSelected = newSelected.concat(selected.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
-    }
-    setSelected(newSelected);
-  };
+		    LazyWrapper.prototype.compact = function() {
+		      return this.filter(identity);
+		    };
 
-  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
-  //   if (event.target.checked) {
-  //     const newSelecteds = data.map((n: any) => n._id);
-  //     setSelected(newSelecteds as never[]);
-  //     return;
-  //   }
-  //   setSelected([]);
-  // };
+		    LazyWrapper.prototype.find = function(predicate) {
+		      return this.filter(predicate).head();
+		    };
 
-  // Push Selected Rows
-  React.useEffect(function () {
-    if (selected.length > 0 && onSelected) {
-      onSelected(selected);
-    }
-  }, [selected]);
-  function renderRow(cols, row, index) {
-    var _row$style;
-    var urid = _.uniqueId();
-    var className = rowClassName(row, index);
-    var rw = _objectSpread2({}, row);
-    var rowStyle = (_row$style = row === null || row === undefined ? undefined : row.style) !== null && _row$style !== undefined ? _row$style : {};
-    var onDragStart = row === null || row === undefined ? undefined : row.onDragStart;
-    delete rw.table;
-    delete rw.style;
-    delete rw.onDragStart;
-    // console.log(row);
-    // const frow = Object.fromEntries(
-    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
-    // ) as unknown as TableDataItem
-    // console.log(frow);
-    var isRowSelected = selected.indexOf(row) !== -1;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
-      draggable: rowDraggable,
-      role: "checkbox",
-      onDragStart: onDragStart,
-      "aria-checked": selected.indexOf(row) !== -1,
-      tabIndex: -1,
-      key: urid,
-      style: _objectSpread2({
-        cursor: 'pointer',
-        backgroundColor: isRowSelected ? '#efefef' : ''
-      }, rowStyle),
-      onClick: function onClick(e) {
-        if (!rowDraggable) {
-          if (onRow) {
-            onRow(row, index);
-          } else {
-            handleClick(e, row);
-          }
-        }
-      },
-      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
-    }, /*#__PURE__*/React.createElement(TableCell, {
-      columns: cols,
-      row: rw,
-      rowIndex: index,
-      emptyText: emptyText,
-      onCellClick: onCell
-    })), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "2019708038",
-      dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
-  }
-  return /*#__PURE__*/React.createElement("tbody", {
-    className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-  }, data.map(function (row, index) {
-    var qid = _.uniqueId();
-    if (row === null || row === undefined) {
-      var uid = _.uniqueId();
-      return /*#__PURE__*/React.createElement("tr", {
-        key: uid,
-        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-      }, /*#__PURE__*/React.createElement("td", {
-        colSpan: columns.length,
-        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-      }, "\u2003"));
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
-      key: qid,
-      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    }, /*#__PURE__*/React.createElement("td", {
-      style: {
-        padding: '1rem'
-      },
-      colSpan: columns.length,
-      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    })));
+		    LazyWrapper.prototype.findLast = function(predicate) {
+		      return this.reverse().find(predicate);
+		    };
 
-    // return (
-    //   <tr
-    //     key={`tbody-row-${index}`}
-    //     className={useClasses({ hover }, className)}
-    //     onClick={() => rowClickHandler(row, index)}>
-    //     <TableCell<TableDataItem>
-    //       columns={columns}
-    //       row={row}
-    //       rowIndex={index}
-    //       emptyText={emptyText}
-    //       onCellClick={onCell}
-    //     />
-    //   </tr>
-    // )
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1422656197",
-    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
-};
-TableBody.displayName = 'TableBody';
+		    LazyWrapper.prototype.invokeMap = baseRest(function(path, args) {
+		      if (typeof path == 'function') {
+		        return new LazyWrapper(this);
+		      }
+		      return this.map(function(value) {
+		        return baseInvoke(value, path, args);
+		      });
+		    });
 
-var getRealShape = function getRealShape(el) {
-  var defaultShape = {
-    width: 0,
-    height: 0
-  };
-  if (!el || typeof window === 'undefined') return defaultShape;
-  var rect = el.getBoundingClientRect();
-  var _window$getComputedSt = window.getComputedStyle(el),
-    width = _window$getComputedSt.width,
-    height = _window$getComputedSt.height;
-  var getCSSStyleVal = function getCSSStyleVal(str, parentNum) {
-    if (!str) return 0;
-    var strVal = str.includes('px') ? +str.split('px')[0] : str.includes('%') ? +str.split('%')[0] * parentNum * 0.01 : str;
-    return Number.isNaN(+strVal) ? 0 : +strVal;
-  };
-  return {
-    width: getCSSStyleVal("".concat(width), rect.width),
-    height: getCSSStyleVal("".concat(height), rect.height)
-  };
-};
-var useRealShape = function useRealShape(ref) {
-  var _useState = React.useState({
-      width: 0,
-      height: 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  var update = function update() {
-    var _getRealShape = getRealShape(ref.current),
-      width = _getRealShape.width,
-      height = _getRealShape.height;
-    setState({
-      width: width,
-      height: height
-    });
-  };
-  React.useEffect(function () {
-    return update();
-  }, [ref.current]);
-  return [state, update];
-};
+		    LazyWrapper.prototype.reject = function(predicate) {
+		      return this.filter(negate(getIteratee(predicate)));
+		    };
 
-/* "use client" */
+		    LazyWrapper.prototype.slice = function(start, end) {
+		      start = toInteger(start);
 
-var useResize = function useResize(callback) {
-  var immediatelyInvoke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  React.useEffect(function () {
-    var fn = function fn() {
-      return callback();
-    };
-    if (immediatelyInvoke) {
-      fn();
-    }
-    window.addEventListener('resize', fn);
-    return function () {
-      return window.removeEventListener('resize', fn);
-    };
-  }, []);
-};
+		      var result = this;
+		      if (result.__filtered__ && (start > 0 || end < 0)) {
+		        return new LazyWrapper(result);
+		      }
+		      if (start < 0) {
+		        result = result.takeRight(-start);
+		      } else if (start) {
+		        result = result.drop(start);
+		      }
+		      if (end !== undefined$1) {
+		        end = toInteger(end);
+		        result = end < 0 ? result.dropRight(-end) : result.take(end - start);
+		      }
+		      return result;
+		    };
 
-/* "use client" */
+		    LazyWrapper.prototype.takeRightWhile = function(predicate) {
+		      return this.reverse().takeWhile(predicate).reverse();
+		    };
 
-var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'pl', 'pr', 'pt', 'pb', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'ml', 'mr', 'mt', 'mb', 'px', 'py', 'mx', 'my', 'font', 'unit', 'scale'];
-var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
-  return "".concat(scale1x);
-};
-var defaultContext$2 = {
-  getScaleProps: function getScaleProps() {
-    return undefined;
-  },
-  getAllScaleProps: function getAllScaleProps() {
-    return {};
-  },
-  SCALES: {
-    pl: defaultDynamicLayoutPipe,
-    pr: defaultDynamicLayoutPipe,
-    pb: defaultDynamicLayoutPipe,
-    pt: defaultDynamicLayoutPipe,
-    px: defaultDynamicLayoutPipe,
-    py: defaultDynamicLayoutPipe,
-    mb: defaultDynamicLayoutPipe,
-    ml: defaultDynamicLayoutPipe,
-    mr: defaultDynamicLayoutPipe,
-    mt: defaultDynamicLayoutPipe,
-    mx: defaultDynamicLayoutPipe,
-    my: defaultDynamicLayoutPipe,
-    width: defaultDynamicLayoutPipe,
-    height: defaultDynamicLayoutPipe,
-    font: defaultDynamicLayoutPipe
-  },
-  unit: '16px'
-};
-var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$2);
-var useScale = function useScale() {
-  return React.useContext(ScaleContext);
-};
+		    LazyWrapper.prototype.toArray = function() {
+		      return this.take(MAX_ARRAY_LENGTH);
+		    };
 
-/* "use client" */
+		    // Add `LazyWrapper` methods to `lodash.prototype`.
+		    baseForOwn(LazyWrapper.prototype, function(func, methodName) {
+		      var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName),
+		          isTaker = /^(?:head|last)$/.test(methodName),
+		          lodashFunc = lodash[isTaker ? ('take' + (methodName == 'last' ? 'Right' : '')) : methodName],
+		          retUnwrapped = isTaker || /^find/.test(methodName);
 
-var getId = function getId() {
-  return Math.random().toString(32).slice(2, 10);
-};
-var pickChildByProps = function pickChildByProps(children, key, value) {
-  var target = [];
-  var isArray = Array.isArray(value);
-  var withoutPropChildren = React.Children.map(children, function (item) {
-    if (! /*#__PURE__*/React.isValidElement(item)) return null;
-    if (!item.props) return item;
-    if (isArray) {
-      if (value.includes(item.props[key])) {
-        target.push(item);
-        return null;
-      }
-      return item;
-    }
-    if (item.props[key] === value) {
-      target.push(item);
-      return null;
-    }
-    return item;
-  });
-  var targetChildren = target.length >= 0 ? target : undefined;
-  return [withoutPropChildren, targetChildren];
-};
-var isBrowser = function isBrowser() {
-  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-};
-var isCSSNumberValue = function isCSSNumberValue(value) {
-  return value !== undefined && !Number.isNaN(+value);
-};
+		      if (!lodashFunc) {
+		        return;
+		      }
+		      lodash.prototype[methodName] = function() {
+		        var value = this.__wrapped__,
+		            args = isTaker ? [1] : arguments,
+		            isLazy = value instanceof LazyWrapper,
+		            iteratee = args[0],
+		            useLazy = isLazy || isArray(value);
 
-var generateGetScaleProps = function generateGetScaleProps(props) {
-  var getScaleProps = function getScaleProps(keyOrKeys) {
-    if (!Array.isArray(keyOrKeys)) return props[keyOrKeys];
-    var value = undefined;
-    var _iterator = _createForOfIteratorHelper(keyOrKeys),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var key = _step.value;
-        var currentValue = props[key];
-        if (typeof currentValue !== 'undefined') {
-          value = currentValue;
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    return value;
-  };
-  return getScaleProps;
-};
-var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
-  var getAllScaleProps = function getAllScaleProps() {
-    var scaleProps = {};
-    var _iterator2 = _createForOfIteratorHelper(ScalePropKeys),
-      _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var key = _step2.value;
-        var value = props[key];
-        if (typeof value !== 'undefined') {
-          scaleProps[key] = value;
-        }
-      }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
-    }
-    return scaleProps;
-  };
-  return getAllScaleProps;
-};
+		        var interceptor = function(value) {
+		          var result = lodashFunc.apply(lodash, arrayPush([value], args));
+		          return (isTaker && chainAll) ? result[0] : result;
+		        };
 
-var _excluded$e = ["children"];
-var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
-  if (scale === 1) return scale;
-  var diff = Math.abs((scale - 1) / 2);
-  return scale > 1 ? 1 + diff : 1 - diff;
-};
-var withScale = function withScale(Render) {
-  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
-    var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$e);
-    var _useTheme = useTheme(),
-      layout = _useTheme.layout;
-    var paddingLeft = props.paddingLeft,
-      pl = props.pl,
-      paddingRight = props.paddingRight,
-      pr = props.pr,
-      paddingTop = props.paddingTop,
-      pt = props.pt,
-      paddingBottom = props.paddingBottom,
-      pb = props.pb,
-      marginTop = props.marginTop,
-      mt = props.mt,
-      marginRight = props.marginRight,
-      mr = props.mr,
-      marginBottom = props.marginBottom,
-      mb = props.mb,
-      marginLeft = props.marginLeft,
-      ml = props.ml,
-      px = props.px,
-      py = props.py,
-      mx = props.mx,
-      my = props.my,
-      width = props.width,
-      height = props.height,
-      font = props.font,
-      w = props.w,
-      h = props.h,
-      margin = props.margin,
-      padding = props.padding,
-      _props$unit = props.unit,
-      unit = _props$unit === undefined ? layout.unit : _props$unit,
-      _props$scale = props.scale,
-      scale = _props$scale === undefined ? 1 : _props$scale;
-    var makeScaleHandler = function makeScaleHandler(attrValue) {
-      return function (scale1x, defaultValue) {
-        // 0 means disable scale and the default value is 0
-        if (scale1x === 0) {
-          scale1x = 1;
-          defaultValue = defaultValue || 0;
-        }
-        var factor = reduceScaleCoefficient(scale) * scale1x;
-        if (typeof attrValue === 'undefined') {
-          if (typeof defaultValue !== 'undefined') return "".concat(defaultValue);
-          return "calc(".concat(factor, " * ").concat(unit, ")");
-        }
-        if (!isCSSNumberValue(attrValue)) return "".concat(attrValue);
-        var customFactor = factor * Number(attrValue);
-        return "calc(".concat(customFactor, " * ").concat(unit, ")");
-      };
-    };
-    var value = {
-      unit: unit,
-      SCALES: {
-        pt: makeScaleHandler((_ref2 = (_ref3 = paddingTop !== null && paddingTop !== undefined ? paddingTop : pt) !== null && _ref3 !== undefined ? _ref3 : py) !== null && _ref2 !== undefined ? _ref2 : padding),
-        pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== undefined ? paddingRight : pr) !== null && _ref5 !== undefined ? _ref5 : px) !== null && _ref4 !== undefined ? _ref4 : padding),
-        pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== undefined ? paddingBottom : pb) !== null && _ref7 !== undefined ? _ref7 : py) !== null && _ref6 !== undefined ? _ref6 : padding),
-        pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== undefined ? paddingLeft : pl) !== null && _ref9 !== undefined ? _ref9 : px) !== null && _ref8 !== undefined ? _ref8 : padding),
-        px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== undefined ? px : paddingLeft) !== null && _ref13 !== undefined ? _ref13 : paddingRight) !== null && _ref12 !== undefined ? _ref12 : pl) !== null && _ref11 !== undefined ? _ref11 : pr) !== null && _ref10 !== undefined ? _ref10 : padding),
-        py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== undefined ? py : paddingTop) !== null && _ref17 !== undefined ? _ref17 : paddingBottom) !== null && _ref16 !== undefined ? _ref16 : pt) !== null && _ref15 !== undefined ? _ref15 : pb) !== null && _ref14 !== undefined ? _ref14 : padding),
-        mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== undefined ? marginTop : mt) !== null && _ref19 !== undefined ? _ref19 : my) !== null && _ref18 !== undefined ? _ref18 : margin),
-        mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== undefined ? marginRight : mr) !== null && _ref21 !== undefined ? _ref21 : mx) !== null && _ref20 !== undefined ? _ref20 : margin),
-        mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== undefined ? marginBottom : mb) !== null && _ref23 !== undefined ? _ref23 : my) !== null && _ref22 !== undefined ? _ref22 : margin),
-        ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== undefined ? marginLeft : ml) !== null && _ref25 !== undefined ? _ref25 : mx) !== null && _ref24 !== undefined ? _ref24 : margin),
-        mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== undefined ? mx : marginLeft) !== null && _ref29 !== undefined ? _ref29 : marginRight) !== null && _ref28 !== undefined ? _ref28 : ml) !== null && _ref27 !== undefined ? _ref27 : mr) !== null && _ref26 !== undefined ? _ref26 : margin),
-        my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== undefined ? my : marginTop) !== null && _ref33 !== undefined ? _ref33 : marginBottom) !== null && _ref32 !== undefined ? _ref32 : mt) !== null && _ref31 !== undefined ? _ref31 : mb) !== null && _ref30 !== undefined ? _ref30 : margin),
-        width: makeScaleHandler(width !== null && width !== undefined ? width : w),
-        height: makeScaleHandler(height !== null && height !== undefined ? height : h),
-        font: makeScaleHandler(font)
-      },
-      getScaleProps: generateGetScaleProps(props),
-      getAllScaleProps: generateGetAllScaleProps(props)
-    };
-    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
-      ref: ref
-    }), children));
-  });
-  ScaleFC.displayName = "Scale".concat(Render.displayName || 'Wrapper');
-  return ScaleFC;
-};
+		        if (useLazy && checkIteratee && typeof iteratee == 'function' && iteratee.length != 1) {
+		          // Avoid lazy use if the iteratee has a "length" value other than `1`.
+		          isLazy = useLazy = false;
+		        }
+		        var chainAll = this.__chain__,
+		            isHybrid = !!this.__actions__.length,
+		            isUnwrapped = retUnwrapped && !chainAll,
+		            onlyLazy = isLazy && !isHybrid;
+
+		        if (!retUnwrapped && useLazy) {
+		          value = onlyLazy ? value : new LazyWrapper(this);
+		          var result = func.apply(value, args);
+		          result.__actions__.push({ 'func': thru, 'args': [interceptor], 'thisArg': undefined$1 });
+		          return new LodashWrapper(result, chainAll);
+		        }
+		        if (isUnwrapped && onlyLazy) {
+		          return func.apply(this, args);
+		        }
+		        result = this.thru(interceptor);
+		        return isUnwrapped ? (isTaker ? result.value()[0] : result.value()) : result;
+		      };
+		    });
 
-var warningStack = {};
-var useWarning = function useWarning(message, component) {
-  var tag = component ? " [".concat(component, "]") : ' ';
-  var log = "[Helpdice UI]".concat(tag, ": ").concat(message);
-  if (typeof console === 'undefined') return;
-  if (warningStack[log]) return;
-  warningStack[log] = true;
-  if (process.env.NODE_ENV !== 'production') {
-    return console.error(log);
-  }
-  console.warn(log);
-};
+		    // Add `Array` methods to `lodash.prototype`.
+		    arrayEach(['pop', 'push', 'shift', 'sort', 'splice', 'unshift'], function(methodName) {
+		      var func = arrayProto[methodName],
+		          chainName = /^(?:push|sort|unshift)$/.test(methodName) ? 'tap' : 'thru',
+		          retUnwrapped = /^(?:pop|shift)$/.test(methodName);
 
-/* "use client" */
+		      lodash.prototype[methodName] = function() {
+		        var args = arguments;
+		        if (retUnwrapped && !this.__chain__) {
+		          var value = this.value();
+		          return func.apply(isArray(value) ? value : [], args);
+		        }
+		        return this[chainName](function(value) {
+		          return func.apply(isArray(value) ? value : [], args);
+		        });
+		      };
+		    });
 
-var TableColumn = function TableColumn(columnProps) {
-  var _ref = columnProps,
-    children = _ref.children,
-    prop = _ref.prop,
-    label = _ref.label,
-    width = _ref.width,
-    filter = _ref.filter,
-    options = _ref.options,
-    noWrap = _ref.noWrap,
-    align = _ref.align,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    renderHandler = _ref.render;
-  var _useTableContext = useTableContext(),
-    updateColumn = _useTableContext.updateColumn;
-  var safeProp = "".concat(prop.toString()).trim();
-  if (!safeProp) {
-    useWarning('The props "prop" is required.', 'Table.Column');
-  }
-  React.useEffect(function () {
-    updateColumn({
-      label: children || label,
-      filter: filter,
-      noWrap: noWrap,
-      options: options,
-      prop: safeProp,
-      width: width,
-      align: align,
-      fontSize: fontSize,
-      className: className,
-      renderHandler: function renderHandler() {}
-    });
-  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
-  return null;
-};
-TableColumn.displayName = 'TableColumn';
+		    // Map minified method names to their real names.
+		    baseForOwn(LazyWrapper.prototype, function(func, methodName) {
+		      var lodashFunc = lodash[methodName];
+		      if (lodashFunc) {
+		        var key = lodashFunc.name + '';
+		        if (!hasOwnProperty.call(realNames, key)) {
+		          realNames[key] = [];
+		        }
+		        realNames[key].push({ 'name': methodName, 'func': lodashFunc });
+		      }
+		    });
+
+		    realNames[createHybrid(undefined$1, WRAP_BIND_KEY_FLAG).name] = [{
+		      'name': 'wrapper',
+		      'func': undefined$1
+		    }];
+
+		    // Add methods to `LazyWrapper`.
+		    LazyWrapper.prototype.clone = lazyClone;
+		    LazyWrapper.prototype.reverse = lazyReverse;
+		    LazyWrapper.prototype.value = lazyValue;
+
+		    // Add chain sequence methods to the `lodash` wrapper.
+		    lodash.prototype.at = wrapperAt;
+		    lodash.prototype.chain = wrapperChain;
+		    lodash.prototype.commit = wrapperCommit;
+		    lodash.prototype.next = wrapperNext;
+		    lodash.prototype.plant = wrapperPlant;
+		    lodash.prototype.reverse = wrapperReverse;
+		    lodash.prototype.toJSON = lodash.prototype.valueOf = lodash.prototype.value = wrapperValue;
+
+		    // Add lazy aliases.
+		    lodash.prototype.first = lodash.prototype.head;
+
+		    if (symIterator) {
+		      lodash.prototype[symIterator] = wrapperToIterator;
+		    }
+		    return lodash;
+		  });
+
+		  /*--------------------------------------------------------------------------*/
+
+		  // Export lodash.
+		  var _ = runInContext();
+
+		  // Some AMD build optimizers, like r.js, check for condition patterns like:
+		  if (freeModule) {
+		    // Export for Node.js.
+		    (freeModule.exports = _)._ = _;
+		    // Export for CommonJS support.
+		    freeExports._ = _;
+		  }
+		  else {
+		    // Export to the global object.
+		    root._ = _;
+		  }
+		}.call(lodash)); 
+	} (lodash$1, lodash$1.exports));
+	return lodash$1.exports;
+}
+
+var lodashExports = requireLodash();
+var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
 var useCurrentState = function useCurrentState(initialState) {
   var _useState = React.useState(function () {
@@ -18855,11 +18948,11 @@ var SelectIcon = /*#__PURE__*/React.memo(SelectIconComponent);
 
 /* "use client" */
 
-var defaultContext$1 = {
+var defaultContext$2 = {
   visible: false,
   disableAll: false
 };
-var SelectContext = /*#__PURE__*/React.createContext(defaultContext$1);
+var SelectContext = /*#__PURE__*/React.createContext(defaultContext$2);
 var useSelectContext = function useSelectContext() {
   return React.useContext(SelectContext);
 };
@@ -18906,7 +18999,25 @@ var usePortal = function usePortal() {
   return elSnapshot;
 };
 
-var _excluded$d = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+/* "use client" */
+
+var useResize = function useResize(callback) {
+  var immediatelyInvoke = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  React.useEffect(function () {
+    var fn = function fn() {
+      return callback();
+    };
+    if (immediatelyInvoke) {
+      fn();
+    }
+    window.addEventListener('resize', fn);
+    return function () {
+      return window.removeEventListener('resize', fn);
+    };
+  }, []);
+};
+
+var _excluded$a = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
 var CssTransition = function CssTransition(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
@@ -18921,7 +19032,7 @@ var CssTransition = function CssTransition(_ref) {
     clearTime = _ref$clearTime === undefined ? 60 : _ref$clearTime,
     _ref$name = _ref.name,
     name = _ref$name === undefined ? 'transition' : _ref$name,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     classes = _useState2[0],
@@ -19004,6 +19115,19 @@ var useDOMObserver = function useDOMObserver(ref) {
   }, [ref]);
 };
 
+var warningStack = {};
+var useWarning = function useWarning(message, component) {
+  var tag = component ? " [".concat(component, "]") : ' ';
+  var log = "[Helpdice UI]".concat(tag, ": ").concat(message);
+  if (typeof console === 'undefined') return;
+  if (warningStack[log]) return;
+  warningStack[log] = true;
+  if (process.env.NODE_ENV !== 'production') {
+    return console.error(log);
+  }
+  console.warn(log);
+};
+
 var getElementOffset = function getElementOffset(el) {
   if (!el) return {
     top: 0,
@@ -19164,7 +19288,7 @@ var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef)
 });
 SelectDropdown.displayName = 'SelectDropdown';
 
-var _excluded$c = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var _excluded$9 = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
 var getItemLayout = function getItemLayout(val) {
   var display = val === 0 ? 'display: none;' : 'display: inherit;';
   if (typeof val === 'number') {
@@ -19202,7 +19326,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19242,12 +19366,12 @@ var GridBasicItem = function GridBasicItem(_ref) {
 };
 GridBasicItem.displayName = 'GridBasicItem';
 
-var _excluded$b = ["children", "className"];
+var _excluded$8 = ["children", "className"];
 var GridComponent = function GridComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _styles$className = {
@@ -19267,7 +19391,7 @@ var GridComponent = function GridComponent(_ref) {
 GridComponent.displayName = 'Grid';
 var Grid = withScale(GridComponent);
 
-var _excluded$a = ["gap", "wrap", "children", "className"];
+var _excluded$7 = ["gap", "wrap", "children", "className"];
 var GridContainerComponent = function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === undefined ? 0 : _ref$gap,
@@ -19276,7 +19400,7 @@ var GridContainerComponent = function GridContainerComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -19352,7 +19476,7 @@ var SelectMultipleValue = function SelectMultipleValue(_ref) {
 };
 SelectMultipleValue.displayName = 'GeistSelectMultipleValue';
 
-var getColors$2 = function getColors(palette, status) {
+var getColors$1 = function getColors(palette, status) {
   var colors = {
     "default": {
       border: palette.border,
@@ -19432,7 +19556,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
 });
 SelectInput.displayName = 'GeistSelectInput';
 
-var _excluded$9 = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
+var _excluded$6 = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
 var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   var children = _ref.children,
     label = _ref.label,
@@ -19461,7 +19585,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     getPopupContainer = _ref.getPopupContainer,
     _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
     onDropdownVisibleChange = _ref$onDropdownVisibl === undefined ? function () {} : _ref$onDropdownVisibl,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19490,7 +19614,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     return value.length === 0;
   }, [value]);
   var _useMemo = React.useMemo(function () {
-      return getColors$2(theme.palette, type);
+      return getColors$1(theme.palette, type);
     }, [theme.palette, type]),
     border = _useMemo.border,
     borderActive = _useMemo.borderActive,
@@ -19633,7 +19757,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
 SelectComponent.displayName = 'Select';
 var Select = withScale(SelectComponent);
 
-var _excluded$8 = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
+var _excluded$5 = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
 var SelectOptionComponent = function SelectOptionComponent(_ref) {
   var identValue = _ref.value,
     _ref$className = _ref.className,
@@ -19647,7 +19771,7 @@ var SelectOptionComponent = function SelectOptionComponent(_ref) {
     label = _ref$label === undefined ? false : _ref$label,
     _ref$preventAllEvents = _ref.preventAllEvents,
     preventAllEvents = _ref$preventAllEvents === undefined ? false : _ref$preventAllEvents,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19706,476 +19830,954 @@ var SelectOptionComponent = function SelectOptionComponent(_ref) {
     dynamic: [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.border, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.border, SCALES.font(0.875), SCALES.width(1, '100%')]
   }, ".option.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;background-color:".concat(bgColor, ";color:").concat(color, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;--select-font-size:").concat(SCALES.font(0.75), ";font-size:var(--select-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(2.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.667), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.option.__jsx-style-dynamic-selector:hover{background-color:").concat(hoverBgColor, ";color:").concat(theme.palette.accents_7, ";}.divider.__jsx-style-dynamic-selector{line-height:0;overflow:hidden;border-top:1px solid ").concat(theme.palette.border, ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.label.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_7, ";border-bottom:1px solid ").concat(theme.palette.border, ";text-transform:capitalize;cursor:default;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";font-weight:500;}")));
 };
-SelectOptionComponent.displayName = 'SelectOption';
-var SelectOption = withScale(SelectOptionComponent);
+SelectOptionComponent.displayName = 'SelectOption';
+var SelectOption = withScale(SelectOptionComponent);
+
+Select.Option = SelectOption;
+
+var ButtonDrip = function ButtonDrip(_ref) {
+  var _ref$x = _ref.x,
+    x = _ref$x === undefined ? 0 : _ref$x,
+    _ref$y = _ref.y,
+    y = _ref$y === undefined ? 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$4 = ["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 === undefined ? 'default' : _ref$type,
+    color = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    _ref$spaceRatio = _ref.spaceRatio,
+    spaceRatio = _ref$spaceRatio === undefined ? 1 : _ref$spaceRatio,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  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);
 
-Select.Option = SelectOption;
+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 InputLabel = function InputLabel(_ref) {
-  var children = _ref.children,
-    isRight = _ref.isRight;
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3089782703", [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border]]]) + " " + ((isRight ? 'right' : '') || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3089782703",
-    dynamic: [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border]
-  }, "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:initial;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin:0;padding:0 ".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-top:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";font-size:inherit;line-height:1;}span.right.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";border-left:0;border-right:1px solid ").concat(theme.palette.border, ";}")));
+var _excluded$3 = ["isRight", "isSingle", "children", "className"];
+var ButtonIcon = function ButtonIcon(_ref) {
+  var _ref$isRight = _ref.isRight,
+    isRight = _ref$isRight === undefined ? false : _ref$isRight,
+    isSingle = _ref.isSingle,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  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;}"));
 };
-var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
+ButtonIcon.displayName = 'ButtonIcon';
 
-var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children;
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["1278828862", [theme.palette.accents_6]]])
+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: "1278828862",
-    dynamic: [theme.palette.accents_6]
-  }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+    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
+  });
 };
-InputBlockLabelComponent.displayName = 'GeistInputBlockLabel';
-var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
 
-var InputIconComponent = function InputIconComponent(_ref) {
-  var icon = _ref.icon,
-    _ref$clickable = _ref.clickable,
-    clickable = _ref$clickable === undefined ? false : _ref$clickable,
-    onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement("span", {
-    onClick: onClick,
-    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
-  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4247656379",
-    dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']
-  }, ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+/* "use client" */
+
+var defaultContext$1 = {
+  isButtonGroup: false,
+  disabled: false
+};
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$1);
+var useButtonGroupContext = function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
 };
-InputIconComponent.displayName = 'GeistInputIcon';
-var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
 
-var InputIconClear = function InputIconClear(_ref) {
-  var onClick = _ref.onClick,
-    disabled = _ref.disabled,
-    visible = _ref.visible;
-  var theme = useTheme();
-  var classes = useClasses('clear-icon', {
-    visible: visible
+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 clickHandler = function clickHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    onClick && onClick(event);
+  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 === undefined ? undefined : 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'
+    }
   };
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M18 6L6 18",
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M6 6l12 12",
-    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1567030211",
-    dynamic: [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]
-  }, ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme.palette.accents_3 : theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+  var withoutLightType = type.replace('-light', '');
+  return colors[withoutLightType] || null;
 };
-var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
-
-var getColors$1 = function getColors(palette, status) {
+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": {
-      color: palette.foreground,
-      borderColor: palette.border,
-      hoverBorder: palette.accents_5
+      bg: palette.background,
+      border: palette.foreground
     },
     secondary: {
-      color: palette.foreground,
-      borderColor: palette.secondary,
-      hoverBorder: palette.secondary
+      bg: palette.background,
+      border: palette.foreground
     },
     success: {
-      color: palette.foreground,
-      borderColor: palette.successLight,
-      hoverBorder: palette.success
+      bg: palette.background,
+      border: palette.success
     },
     warning: {
-      color: palette.foreground,
-      borderColor: palette.warningLight,
-      hoverBorder: palette.warning
+      bg: palette.background,
+      border: palette.warning
     },
     error: {
-      color: palette.error,
-      borderColor: palette.error,
-      hoverBorder: palette.errorDark
-    }
+      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 (!status) return colors["default"];
-  return colors[status];
-};
-
-var _excluded$7 = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
-var simulateChangeEvent = function simulateChangeEvent(el, event) {
-  return _objectSpread2(_objectSpread2({}, event), {}, {
-    target: el,
-    currentTarget: el
+  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 InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var label = _ref.label,
-    labelRight = _ref.labelRight,
-    _ref$type = _ref.type,
-    type = _ref$type === undefined ? 'default' : _ref$type,
-    error = _ref.error,
-    _ref$htmlType = _ref.htmlType,
-    htmlType = _ref$htmlType === undefined ? 'text' : _ref$htmlType,
-    icon = _ref.icon,
-    iconRight = _ref.iconRight,
-    _ref$iconClickable = _ref.iconClickable,
-    iconClickable = _ref$iconClickable === undefined ? false : _ref$iconClickable,
-    onIconClick = _ref.onIconClick,
-    _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === undefined ? '' : _ref$initialValue,
-    onChange = _ref.onChange,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
-    value = _ref.value,
-    onClearClick = _ref.onClearClick,
-    _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === undefined ? false : _ref$clearable,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus,
-    _ref$autoComplete = _ref.autoComplete,
-    autoComplete = _ref$autoComplete === undefined ? 'off' : _ref$autoComplete,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === undefined ? '' : _ref$placeholder,
-    children = _ref.children,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === undefined ? false : _ref$disabled,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+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$2 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "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 inputRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
-    return inputRef.current;
+    return buttonRef.current;
   });
-  var _useState = React.useState(initialValue),
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    selfValue = _useState2[0],
-    setSelfValue = _useState2[1];
-  var _useState3 = React.useState(false),
+    dripShow = _useState2[0],
+    setDripShow = _useState2[1];
+  var _useState3 = React.useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    hover = _useState4[0],
-    setHover = _useState4[1];
-  var isControlledComponent = React.useMemo(function () {
-    return value !== undefined;
-  }, [value]);
-  var labelClasses = React.useMemo(function () {
-    return labelRight ? 'right-label' : label ? 'left-label' : '';
-  }, [label, labelRight]);
-  var iconClasses = React.useMemo(function () {
-    return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
-  }, [icon, iconRight]);
+    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 === undefined ? false : _filteredProps$disabl;
+    filteredProps.type;
+    var _filteredProps$loadin = filteredProps.loading,
+    loading = _filteredProps$loadin === undefined ? false : _filteredProps$loadin,
+    _filteredProps$shadow = filteredProps.shadow,
+    shadow = _filteredProps$shadow === undefined ? false : _filteredProps$shadow,
+    _filteredProps$ghost = filteredProps.ghost,
+    ghost = _filteredProps$ghost === undefined ? false : _filteredProps$ghost,
+    _filteredProps$effect = filteredProps.effect,
+    effect = _filteredProps$effect === undefined ? true : _filteredProps$effect,
+    onClick = filteredProps.onClick,
+    _filteredProps$auto = filteredProps.auto,
+    auto = _filteredProps$auto === undefined ? false : _filteredProps$auto,
+    icon = filteredProps.icon,
+    _filteredProps$htmlTy = filteredProps.htmlType,
+    htmlType = _filteredProps$htmlTy === undefined ? 'button' : _filteredProps$htmlTy,
+    iconRight = filteredProps.iconRight,
+    _filteredProps$classN = filteredProps.className,
+    className = _filteredProps$classN === undefined ? '' : _filteredProps$classN;
+    filteredProps.crossOrigin;
+    var props = _objectWithoutProperties(filteredProps, _excluded$2);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
   var _useMemo = React.useMemo(function () {
-      return getColors$1(theme.palette, type);
-    }, [theme.palette, type]),
-    color = _useMemo.color,
-    borderColor = _useMemo.borderColor,
-    hoverBorder = _useMemo.hoverBorder;
-  var changeHandler = function changeHandler(event) {
-    if (disabled || readOnly) return;
-    setSelfValue(event.target.value);
-    onChange && onChange(event);
+      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 clearHandler = function clearHandler(event) {
-    setSelfValue('');
-    onClearClick && onClearClick(event);
+  var clickHandler = function clickHandler(event) {
+    if (disabled || loading) return;
+    var showDrip = !shadow && !ghost && effect;
     /* istanbul ignore next */
-    if (!inputRef.current) return;
-    var changeEvent = simulateChangeEvent(inputRef.current, event);
-    changeEvent.target.value = '';
-    onChange && onChange(changeEvent);
-    inputRef.current.focus();
-  };
-  var focusHandler = function focusHandler(e) {
-    setHover(true);
-    onFocus && onFocus(e);
-  };
-  var blurHandler = function blurHandler(e) {
-    setHover(false);
-    onBlur && onBlur(e);
-  };
-  var iconClickHandler = function iconClickHandler(e) {
-    if (disabled) return;
-    onIconClick && onIconClick(e);
-  };
-  var iconProps = React.useMemo(function () {
-    return {
-      clickable: iconClickable,
-      onClick: iconClickHandler
-    };
-  }, [iconClickable, iconClickHandler]);
-  React.useEffect(function () {
-    if (isControlledComponent) {
-      setSelfValue(value);
+    if (showDrip && buttonRef.current) {
+      var rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
     }
-  });
-  var controlledValue = isControlledComponent ? {
-    value: selfValue
-  } : {
-    defaultValue: initialValue
+    onClick && onClick(event);
   };
-  var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
-  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
-  }, label && /*#__PURE__*/React.createElement(MemoInputLabel, null, label), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
-      hover: hover,
-      disabled: disabled
-    }, labelClasses) || "")
-  }, icon && /*#__PURE__*/React.createElement(InputIcon, _extends({
-    icon: icon
-  }, iconProps)), /*#__PURE__*/React.createElement("input", _extends({
+  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,
-    ref: inputRef,
-    placeholder: placeholder,
     disabled: disabled,
-    readOnly: readOnly,
-    onFocus: focusHandler,
-    onBlur: blurHandler,
-    onChange: changeHandler,
-    autoComplete: autoComplete
-  }, inputProps, {
-    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
-      disabled: disabled
-    }, iconClasses) || "")
-  })), clearable && /*#__PURE__*/React.createElement(MemoInputIconClear, {
-    visible: Boolean(inputRef.current && inputRef.current.value !== ''),
-    disabled: disabled || readOnly,
-    onClick: clearHandler
-  }), iconRight && /*#__PURE__*/React.createElement(InputIcon, _extends({
-    icon: iconRight
-  }, iconProps))), labelRight && /*#__PURE__*/React.createElement(MemoInputLabel, {
-    isRight: true
-  }, labelRight), /*#__PURE__*/React.createElement("br", {
-    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]])
-  })), error && /*#__PURE__*/React.createElement("p", {
-    style: {
-      marginTop: 0.4,
-      marginRight: 0,
-      marginLeft: 0,
-      marginBottom: '0.4rem',
-      textAlign: 'left'
-    },
-    className: _JSXStyle.dynamic([["1424341926", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "input-error"
-  }, error), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1424341926",
-    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
-  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}.input-error.__jsx-style-dynamic-selector{color:#aa4a44;}.input-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;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["22324076", [SCALES.height(2.5), 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: "22324076",
+    dynamic: [SCALES.height(2.5), 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(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;}")));
 });
-InputComponent.displayName = 'Input';
-var Input = withScale(InputComponent);
+ButtonComponent.displayName = 'Button';
+var Button = withScale(ButtonComponent);
+
+var makeColgroup = function makeColgroup(width, columns) {
+  var unsetWidthCount = columns.filter(function (c) {
+    return !c.width;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
+  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("col", {
+      key: "colgroup-".concat(index),
+      width: column.width || averageWidth
+    });
+  }));
+};
+var TableHead = function TableHead(props) {
+  var theme = useTheme();
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filters = _React$useState2[0],
+    setFilters = _React$useState2[1];
+  var _ref = props,
+    columns = _ref.columns,
+    width = _ref.width,
+    onFilters = _ref.onFilters,
+    showFilters = _ref.showFilters;
+  var isScalableWidth = React.useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = React.useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  var handleFilterChange = function handleFilterChange(name, value) {
+    setFilters(function (prevFilters) {
+      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty({}, name, value));
+      return updatedFilters;
+    });
+  };
+  var applyFilters = function applyFilters() {
+    if (onFilters) {
+      onFilters(filters);
+    }
+  };
+  var generateFilterInputs = function generateFilterInputs() {
+    return columns.map(function (col) {
+      var _String, _filters$filterName;
+      var Header = col.label,
+        accessor = col.filter,
+        options = col.options;
+      var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
+      var unq_accessor = _.uniqueId(filterName);
+      return /*#__PURE__*/React.createElement("th", {
+        style: {
+          margin: '3px'
+        },
+        "data-column": Header,
+        key: unq_accessor
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
+        key: unq_accessor,
+        name: filterName,
+        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
+        onChange: function onChange(newValue) {
+          return handleFilterChange(filterName, newValue);
+        }
+      }, /*#__PURE__*/React.createElement(Select.Option, {
+        value: "All"
+      }, "All ", Header), options ? options.map(function (option) {
+        return /*#__PURE__*/React.createElement(Select.Option, {
+          value: option.value
+        }, option.name);
+      }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
+        id: "filter-date-".concat(filterName),
+        htmlType: "date",
+        name: filterName,
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        }
+      }), accessor === 'search' && /*#__PURE__*/React.createElement(Input, {
+        id: "filter-search-".concat(filterName),
+        htmlType: "text",
+        autoComplete: "off"
+        // ref={filterRefs.current[filterName]} // Dynamically set ref}
+        ,
+        name: filterName,
+        style: {
+          height: 30,
+          minWidth: 160
+        },
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        },
+        placeholder: "Search...",
+        fullWidth: true
+      }));
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
+    className: _JSXStyle.dynamic([["134865897", [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("tr", {
+    className: _JSXStyle.dynamic([["134865897", [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]]])
+  }, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("th", {
+      style: {
+        // textAlign: `${column?.align} !important`,
+        // paddingLeft: '0.3rem',
+        // paddingRight: '0.3rem',
+        // color: `${column?.color}`,
+        whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
+      },
+      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
+      "data-column": column.label,
+      className: _JSXStyle.dynamic([["134865897", [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]]]) + " " + (column.className || "")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _JSXStyle.dynamic([["134865897", [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-box"
+    }, column.label, /*#__PURE__*/React.createElement("br", {
+      className: _JSXStyle.dynamic([["134865897", [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("span", {
+      style: {
+        textAlign: 'center'
+      },
+      className: _JSXStyle.dynamic([["134865897", [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]]])
+    }, column.text)));
+  }), /*#__PURE__*/React.createElement("th", {
+    className: _JSXStyle.dynamic([["134865897", [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]]])
+  })), showFilters && /*#__PURE__*/React.createElement("tr", {
+    className: _JSXStyle.dynamic([["134865897", [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([["134865897", [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: applyFilters,
+    auto: true,
+    px: 0.6,
+    scale: 2 / 3
+  }, "Apply")))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "134865897",
+    dynamic: [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;font-size:inherit;}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;}")));
+};
+TableHead.displayName = 'TableHead';
 
-var tuple = function tuple() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  return args;
+var TableCell = function TableCell(_ref) {
+  var columns = _ref.columns,
+    row = _ref.row,
+    rowIndex = _ref.rowIndex,
+    emptyText = _ref.emptyText,
+    onCellClick = _ref.onCellClick;
+  /* eslint-disable react/jsx-no-useless-fragment */
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var currentRowValue = row[column.prop];
+    var cellValue = currentRowValue || emptyText;
+    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    return /*#__PURE__*/React.createElement("td", {
+      style: _objectSpread2({
+        fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
+        textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
+        paddingLeft: '0.3rem',
+        paddingRight: '0.3rem',
+        color: "".concat(column === null || column === undefined ? undefined : column.color),
+        whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
+      }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
+      "data-column": column.label,
+      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
+      onClick: function onClick() {
+        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
+      },
+      className: column.className
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cell"
+    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
+  }));
+  /* eslint-enable */
 };
-tuple('default', 'secondary', 'success', 'warning', 'error', 'abort', 'secondary-light', 'success-light', 'warning-light', 'error-light');
-tuple('default', 'secondary', 'success', 'warning', 'error');
-tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite');
-tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite', 'alert', 'purple', 'violet', 'cyan');
-tuple('default', 'silent', 'prevent');
-tuple('hover', 'click');
-tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
-tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$6 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
-tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
-var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === undefined ? 'default' : _ref$type,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === undefined ? false : _ref$disabled,
+/* "use client" */
+
+var defaultContext = {
+  columns: [],
+  updateColumn: function updateColumn() {}
+};
+var TableContext = /*#__PURE__*/React.createContext(defaultContext);
+var useTableContext = function useTableContext() {
+  return React.useContext(TableContext);
+};
+
+var TableBody = function TableBody(_ref) {
+  var data = _ref.data,
+    emptyText = _ref.emptyText,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell,
+    rowClassName = _ref.rowClassName,
+    _ref$rowDraggable = _ref.rowDraggable,
+    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === undefined ? '' : _ref$initialValue,
-    onChange = _ref.onChange,
-    value = _ref.value,
-    placeholder = _ref.placeholder,
-    _ref$resize = _ref.resize,
-    resize = _ref$resize === undefined ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    onSelected = _ref.onSelected;
   var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var textareaRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
-    return textareaRef.current;
-  });
-  var isControlledComponent = React.useMemo(function () {
-    return value !== undefined;
-  }, [value]);
-  var _useState = React.useState(initialValue),
+  var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    selfValue = _useState2[0],
-    setSelfValue = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hover = _useState4[0],
-    setHover = _useState4[1];
-  var _useMemo = React.useMemo(function () {
-      return getColors$1(theme.palette, type);
-    }, [theme.palette, type]),
-    color = _useMemo.color,
-    borderColor = _useMemo.borderColor,
-    hoverBorder = _useMemo.hoverBorder;
-  var classes = useClasses('wrapper', {
-    hover: hover,
-    disabled: disabled
-  }, className);
-  var changeHandler = function changeHandler(event) {
-    if (disabled || readOnly) return;
-    setSelfValue(event.target.value);
-    onChange && onChange(event);
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var _useTableContext = useTableContext(),
+    columns = _useTableContext.columns;
+  // const rowClickHandler = (row: TableDataItem, index: number) => {
+  //   onRow && onRow(row, index)
+  // }
+
+  var handleClick = function handleClick(_event, id) {
+    if (readOnly) {
+      return true;
+    }
+    var selectedIndex = selected.indexOf(id);
+    var newSelected = [];
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+    }
+    setSelected(newSelected);
   };
-  var focusHandler = function focusHandler(e) {
-    setHover(true);
-    onFocus && onFocus(e);
+
+  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
+  //   if (event.target.checked) {
+  //     const newSelecteds = data.map((n: any) => n._id);
+  //     setSelected(newSelecteds as never[]);
+  //     return;
+  //   }
+  //   setSelected([]);
+  // };
+
+  // Push Selected Rows
+  React.useEffect(function () {
+    if (selected.length > 0 && onSelected) {
+      onSelected(selected);
+    }
+  }, [selected]);
+  function renderRow(cols, row, index) {
+    var _row$style;
+    var urid = _.uniqueId();
+    var className = rowClassName(row, index);
+    var rw = _objectSpread2({}, row);
+    var rowStyle = (_row$style = row === null || row === undefined ? undefined : row.style) !== null && _row$style !== undefined ? _row$style : {};
+    var onDragStart = row === null || row === undefined ? undefined : row.onDragStart;
+    delete rw.table;
+    delete rw.style;
+    delete rw.onDragStart;
+    // console.log(row);
+    // const frow = Object.fromEntries(
+    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
+    // ) as unknown as TableDataItem
+    // console.log(frow);
+    var isRowSelected = selected.indexOf(row) !== -1;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+      draggable: rowDraggable,
+      role: "checkbox",
+      onDragStart: onDragStart,
+      "aria-checked": selected.indexOf(row) !== -1,
+      tabIndex: -1,
+      key: urid,
+      style: _objectSpread2({
+        cursor: 'pointer',
+        backgroundColor: isRowSelected ? '#efefef' : ''
+      }, rowStyle),
+      onClick: function onClick(e) {
+        if (!rowDraggable) {
+          if (onRow) {
+            onRow(row, index);
+          } else {
+            handleClick(e, row);
+          }
+        }
+      },
+      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      columns: cols,
+      row: rw,
+      rowIndex: index,
+      emptyText: emptyText,
+      onCellClick: onCell
+    })), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "2019708038",
+      dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+  }
+  return /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+  }, data.map(function (row, index) {
+    var qid = _.uniqueId();
+    if (row === null || row === undefined) {
+      var uid = _.uniqueId();
+      return /*#__PURE__*/React.createElement("tr", {
+        key: uid,
+        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+      }, /*#__PURE__*/React.createElement("td", {
+        colSpan: columns.length,
+        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+      }, "\u2003"));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
+      key: qid,
+      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: '1rem'
+      },
+      colSpan: columns.length,
+      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+    })));
+
+    // return (
+    //   <tr
+    //     key={`tbody-row-${index}`}
+    //     className={useClasses({ hover }, className)}
+    //     onClick={() => rowClickHandler(row, index)}>
+    //     <TableCell<TableDataItem>
+    //       columns={columns}
+    //       row={row}
+    //       rowIndex={index}
+    //       emptyText={emptyText}
+    //       onCellClick={onCell}
+    //     />
+    //   </tr>
+    // )
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1422656197",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+};
+TableBody.displayName = 'TableBody';
+
+var getRealShape = function getRealShape(el) {
+  var defaultShape = {
+    width: 0,
+    height: 0
   };
-  var blurHandler = function blurHandler(e) {
-    setHover(false);
-    onBlur && onBlur(e);
+  if (!el || typeof window === 'undefined') return defaultShape;
+  var rect = el.getBoundingClientRect();
+  var _window$getComputedSt = window.getComputedStyle(el),
+    width = _window$getComputedSt.width,
+    height = _window$getComputedSt.height;
+  var getCSSStyleVal = function getCSSStyleVal(str, parentNum) {
+    if (!str) return 0;
+    var strVal = str.includes('px') ? +str.split('px')[0] : str.includes('%') ? +str.split('%')[0] * parentNum * 0.01 : str;
+    return Number.isNaN(+strVal) ? 0 : +strVal;
   };
-  React.useEffect(function () {
-    if (isControlledComponent) {
-      setSelfValue(value);
-    }
-  });
-  var controlledValue = isControlledComponent ? {
-    value: selfValue
-  } : {
-    defaultValue: initialValue
+  return {
+    width: getCSSStyleVal("".concat(width), rect.width),
+    height: getCSSStyleVal("".concat(height), rect.height)
   };
-  var textareaProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["12276481", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("textarea", _extends({
-    ref: textareaRef,
-    disabled: disabled,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    onFocus: focusHandler,
-    onBlur: blurHandler,
-    onChange: changeHandler
-  }, textareaProps, {
-    className: _JSXStyle.dynamic([["12276481", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "12276481",
-    dynamic: [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]
-  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
-});
-TextareaComponent.displayName = 'Textarea';
-var Textarea = withScale(TextareaComponent);
-
-var PasswordIcon = function PasswordIcon(_ref) {
-  var visible = _ref.visible;
-  return /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    style: {
-      color: 'currentColor'
-    }
-  }, !visible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-    d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M1 1l22 22"
-  })));
 };
-var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
-
-var _excluded$5 = ["hideToggle", "children"];
-var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var hideToggle = _ref.hideToggle,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$5);
-  var _useScale = useScale(),
-    getAllScaleProps = _useScale.getAllScaleProps;
-  var inputRef = React.useRef(null);
-  var _useState = React.useState(false),
+var useRealShape = function useRealShape(ref) {
+  var _useState = React.useState({
+      width: 0,
+      height: 0
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  React.useImperativeHandle(ref, function () {
-    return inputRef.current;
-  });
-  var iconClickHandler = function iconClickHandler() {
-    setVisible(function (v) {
-      return !v;
+    state = _useState2[0],
+    setState = _useState2[1];
+  var update = function update() {
+    var _getRealShape = getRealShape(ref.current),
+      width = _getRealShape.width,
+      height = _getRealShape.height;
+    setState({
+      width: width,
+      height: height
     });
-    /* istanbul ignore next */
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
   };
-  var inputProps = React.useMemo(function () {
-    return _objectSpread2(_objectSpread2({}, props), {}, {
-      ref: inputRef,
-      iconClickable: true,
-      onIconClick: iconClickHandler,
-      htmlType: visible ? 'text' : 'password'
-    });
-  }, [props, iconClickHandler, visible, inputRef]);
-  var icon = React.useMemo(function () {
-    if (hideToggle) return null;
-    return /*#__PURE__*/React.createElement(MemoPasswordIcon, {
-      visible: visible
-    });
-  }, [hideToggle, visible]);
-  return /*#__PURE__*/React.createElement(Input, _extends({
-    iconRight: icon
-  }, getAllScaleProps(), inputProps), children);
-});
-InputPasswordComponent.displayName = 'InputPassword';
-var InputPassword = withScale(InputPasswordComponent);
+  React.useEffect(function () {
+    return update();
+  }, [ref.current]);
+  return [state, update];
+};
 
 /* "use client" */
-Input.Textarea = Textarea;
-Input.Password = InputPassword;
 
-var _excluded$4 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
+var TableColumn = function TableColumn(columnProps) {
+  var _ref = columnProps,
+    children = _ref.children,
+    prop = _ref.prop,
+    label = _ref.label,
+    width = _ref.width,
+    filter = _ref.filter,
+    options = _ref.options,
+    noWrap = _ref.noWrap,
+    align = _ref.align,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    renderHandler = _ref.render;
+  var _useTableContext = useTableContext(),
+    updateColumn = _useTableContext.updateColumn;
+  var safeProp = "".concat(prop.toString()).trim();
+  if (!safeProp) {
+    useWarning('The props "prop" is required.', 'Table.Column');
+  }
+  React.useEffect(function () {
+    updateColumn({
+      label: children || label,
+      filter: filter,
+      noWrap: noWrap,
+      options: options,
+      prop: safeProp,
+      width: width,
+      align: align,
+      fontSize: fontSize,
+      className: className,
+      renderHandler: function renderHandler() {}
+    });
+  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
+  return null;
+};
+TableColumn.displayName = 'TableColumn';
+
+var _excluded$1 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -20204,7 +20806,7 @@ function TableComponent(tableProps) {
     rowClassName = _ref$rowClassName === undefined ? function () {
       return '';
     } : _ref$rowClassName,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   /* eslint-enable @typescript-eslint/no-unused-vars */
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -20238,87 +20840,15 @@ function TableComponent(tableProps) {
       columns: columns,
       updateColumn: updateColumn
     };
-  }, [columns]);
-  var _React$useState = React.useState({}),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    filters = _React$useState2[0],
-    setFilters = _React$useState2[1];
-  React.useEffect(function () {
-    if (typeof customData === 'undefined') return;
-    setData(customData);
-  }, [customData]);
-  useResize(function () {
-    return updateShape();
-  });
-  var handleFilterChange = function handleFilterChange(name, value) {
-    setFilters(function (prevFilters) {
-      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty({}, name, value));
-      // Call onFiltersChange to propagate filter changes to the parent
-      if (onFilters) {
-        onFilters(updatedFilters);
-      }
-      return updatedFilters;
-    });
-  };
-  var generateFilterInputs = function generateFilterInputs() {
-    return columns.map(function (col) {
-      var _String, _filters$filterName;
-      var Header = col.label,
-        accessor = col.filter,
-        options = col.options;
-      var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
-      var unq_accessor = _.uniqueId(filterName);
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          margin: '3px'
-        },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
-        key: unq_accessor,
-        name: filterName,
-        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
-        onChange: function onChange(newValue) {
-          return handleFilterChange(filterName, newValue);
-        }
-      }, /*#__PURE__*/React.createElement(Select.Option, {
-        value: "All"
-      }, "All ", Header), options ? options.map(function (option) {
-        return /*#__PURE__*/React.createElement(Select.Option, {
-          value: option.value
-        }, option.name);
-      }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
-        id: "filter-date-".concat(filterName),
-        htmlType: "date",
-        name: filterName,
-        value: filters[filterName],
-        onChange: function onChange(e) {
-          return handleFilterChange(filterName, e.target.value);
-        }
-      }), accessor === 'search' && /*#__PURE__*/React.createElement(Input, {
-        id: "filter-search-".concat(filterName),
-        htmlType: "text",
-        autoComplete: "off",
-        name: filterName,
-        style: {
-          height: 30,
-          minWidth: 160
-        },
-        value: filters[filterName],
-        onChange: function onChange(e) {
-          return handleFilterChange(filterName, e.target.value);
-        },
-        placeholder: "Search...",
-        fullWidth: true
-      }));
-    });
-  };
-  return /*#__PURE__*/React.createElement("div", null, showFilters && /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: 6
-    }
-  }, generateFilterInputs()), /*#__PURE__*/React.createElement(TableContext.Provider, {
+  }, [columns]);
+  React.useEffect(function () {
+    if (typeof customData === 'undefined') return;
+    setData(customData);
+  }, [customData]);
+  useResize(function () {
+    return updateShape();
+  });
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
@@ -20326,6 +20856,8 @@ function TableComponent(tableProps) {
     className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
     columns: columns,
+    onFilters: onFilters,
+    showFilters: showFilters,
     width: width
   }), /*#__PURE__*/React.createElement(TableBody, {
     data: data,
@@ -20340,7 +20872,7 @@ function TableComponent(tableProps) {
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2132340556",
     dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")))));
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
 }
 TableComponent.displayName = 'Table';
 TableComponent.Column = TableColumn;
@@ -29896,255 +30428,12 @@ 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 "";
-        case "duotone":
-            return "";
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
-    }
-};
-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);
-    }
-};
-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);
-    }
-};
-UserX.displayName = "UserX";
-createIcon(UserX);
-
-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);
-    }
-};
-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);
-    }
-};
-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 })));
+        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 "";
@@ -30158,14 +30447,12 @@ const File = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-File.displayName = "File";
-createIcon(File);
+CodeSandbox.displayName = "CodeSandbox";
+createIcon(CodeSandbox);
 
-const Printer = ({ color, strokeWidth, set }) => {
+const FileFunctionFill = ({ 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 })));
+        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 "";
@@ -30179,13 +30466,12 @@ const Printer = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-Printer.displayName = "Printer";
-createIcon(Printer);
+FileFunctionFill.displayName = "FileFunctionFill";
+createIcon(FileFunctionFill);
 
-const Lock = ({ color, strokeWidth, set }) => {
+const Lambda = ({ 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 })));
+        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 "";
@@ -30199,14 +30485,14 @@ const Lock = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-Lock.displayName = "Lock";
-createIcon(Lock);
+Lambda.displayName = "Lambda";
+createIcon(Lambda);
 
-const HelpCircle = ({ color, strokeWidth, set }) => {
+const Layout = ({ 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 })));
+        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 "";
@@ -30220,527 +30506,254 @@ const HelpCircle = ({ color, strokeWidth, set }) => {
             return React.createElement(Outline, null);
     }
 };
-HelpCircle.displayName = "HelpCircle";
-createIcon(HelpCircle);
-
-var ButtonDrip = function ButtonDrip(_ref) {
-  var _ref$x = _ref.x,
-    x = _ref$x === undefined ? 0 : _ref$x,
-    _ref$y = _ref.y,
-    y = _ref$y === undefined ? 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$3 = ["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 === undefined ? 'default' : _ref$type,
-    color = _ref.color,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    _ref$spaceRatio = _ref.spaceRatio,
-    spaceRatio = _ref$spaceRatio === undefined ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  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$2 = ["isRight", "isSingle", "children", "className"];
-var ButtonIcon = function ButtonIcon(_ref) {
-  var _ref$isRight = _ref.isRight,
-    isRight = _ref$isRight === undefined ? false : _ref$isRight,
-    isSingle = _ref.isSingle,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  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 = {
-  isButtonGroup: false,
-  disabled: false
-};
-var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext);
-var useButtonGroupContext = function useButtonGroupContext() {
-  return React.useContext(ButtonGroupContext);
-};
+Layout.displayName = "Layout";
+createIcon(Layout);
 
-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, ")");
+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);
 
-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
+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);
     }
-  };
-  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
+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);
     }
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc'
-  };
+};
+Database.displayName = "Database";
+createIcon(Database);
 
-  /**
-   * 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 === undefined ? undefined : type.replace('-light', '');
-  var defaultColor = colors["default"];
-  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
-  return colors[withoutLightType] || defaultColor;
+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);
+    }
 };
-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'
+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 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
-  });
+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 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'
-  };
+UserX.displayName = "UserX";
+createIcon(UserX);
+
+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);
+    }
 };
-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);
+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);
+    }
 };
+Folder.displayName = "Folder";
+createIcon(Folder);
 
-var _excluded$1 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "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 === undefined ? false : _filteredProps$disabl;
-    filteredProps.type;
-    var _filteredProps$loadin = filteredProps.loading,
-    loading = _filteredProps$loadin === undefined ? false : _filteredProps$loadin,
-    _filteredProps$shadow = filteredProps.shadow,
-    shadow = _filteredProps$shadow === undefined ? false : _filteredProps$shadow,
-    _filteredProps$ghost = filteredProps.ghost,
-    ghost = _filteredProps$ghost === undefined ? false : _filteredProps$ghost,
-    _filteredProps$effect = filteredProps.effect,
-    effect = _filteredProps$effect === undefined ? true : _filteredProps$effect,
-    onClick = filteredProps.onClick,
-    _filteredProps$auto = filteredProps.auto,
-    auto = _filteredProps$auto === undefined ? false : _filteredProps$auto,
-    icon = filteredProps.icon,
-    _filteredProps$htmlTy = filteredProps.htmlType,
-    htmlType = _filteredProps$htmlTy === undefined ? 'button' : _filteredProps$htmlTy,
-    iconRight = filteredProps.iconRight,
-    _filteredProps$classN = filteredProps.className,
-    className = _filteredProps$classN === undefined ? '' : _filteredProps$classN;
-    filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$1);
-  /* eslint-enable @typescript-eslint/no-unused-vars */
+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);
+    }
+};
+File.displayName = "File";
+createIcon(File);
 
-  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 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);
 
-  /* 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);
+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);
     }
-    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([["22324076", [SCALES.height(2.5), 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: "22324076",
-    dynamic: [SCALES.height(2.5), 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(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);
+};
+Lock.displayName = "Lock";
+createIcon(Lock);
+
+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);
+    }
+};
+HelpCircle.displayName = "HelpCircle";
+createIcon(HelpCircle);
 
 var getColors = function getColors(type, palette) {
   var colors = {