@helpdice/ui 1.6.9 → 1.7.0

package/dist/table/index.js

@@ -688,11 +688,12 @@ function requireIndex () {
 
 	// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
 	// https://github.com/reactwg/react-18/discussions/110
-	var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect;
+	var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
 	var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
 	function JSXStyle(props) {
 	    var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
-	    // If `registry` does not exist, we do nothing here.
+	    var insertionEffectCalled = React$1.useRef(false);
+	    // `registry` might not exist while server-side rendering
 	    if (!registry) {
 	        return null;
 	    }
@@ -701,6 +702,24 @@ function requireIndex () {
 	        return null;
 	    }
 	    useInsertionEffect(function() {
+	        // ReactDOM removes all DOM during hydration in certain cases
+	        if (!document.head) {
+	            return;
+	        }
+	        registry.add(props);
+	        insertionEffectCalled.current = true;
+	        return function() {
+	            insertionEffectCalled.current = false;
+	            registry.remove(props);
+	        };
+	    }, [
+	        props.id,
+	        String(props.dynamic)
+	    ]);
+	    React$1.useLayoutEffect(function() {
+	        if (!document.head || insertionEffectCalled.current) {
+	            return;
+	        }
 	        registry.add(props);
 	        return function() {
 	            registry.remove(props);
@@ -1141,7 +1160,7 @@ var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingL
 var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
   return "".concat(scale1x);
 };
-var defaultContext$5 = {
+var defaultContext$4 = {
   getScaleProps: function getScaleProps() {
     return undefined;
   },
@@ -1167,7 +1186,7 @@ var defaultContext$5 = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$5);
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$4);
 var useScale = function useScale() {
   return React.useContext(ScaleContext);
 };
@@ -1212,11 +1231,6 @@ var pickChildByProps = function pickChildByProps(children, key, value) {
   var targetChildren = target.length >= 0 ? target : undefined;
   return [withoutPropChildren, targetChildren];
 };
-var getReactNode = function getReactNode(node) {
-  if (!node) return null;
-  if (typeof node !== 'function') return node;
-  return node();
-};
 var isBrowser = function isBrowser() {
   return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
 };
@@ -1270,7 +1284,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$m = ["children"];
+var _excluded$k = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -1278,9 +1292,9 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
 };
 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 _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$k);
     var _useTheme = useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1338,14 +1352,14 @@ var withScale = function withScale(Render) {
         pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : pr) !== null && _ref5 !== void 0 ? _ref5 : px) !== null && _ref4 !== void 0 ? _ref4 : padding),
         pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : pb) !== null && _ref7 !== void 0 ? _ref7 : py) !== null && _ref6 !== void 0 ? _ref6 : padding),
         pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : pl) !== null && _ref9 !== void 0 ? _ref9 : px) !== null && _ref8 !== void 0 ? _ref8 : padding),
-        px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref13 !== void 0 ? _ref13 : paddingRight) !== null && _ref12 !== void 0 ? _ref12 : pl) !== null && _ref11 !== void 0 ? _ref11 : pr) !== null && _ref10 !== void 0 ? _ref10 : padding),
-        py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref17 !== void 0 ? _ref17 : paddingBottom) !== null && _ref16 !== void 0 ? _ref16 : pt) !== null && _ref15 !== void 0 ? _ref15 : pb) !== null && _ref14 !== void 0 ? _ref14 : padding),
-        mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref19 !== void 0 ? _ref19 : my) !== null && _ref18 !== void 0 ? _ref18 : margin),
-        mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref21 !== void 0 ? _ref21 : mx) !== null && _ref20 !== void 0 ? _ref20 : margin),
-        mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref23 !== void 0 ? _ref23 : my) !== null && _ref22 !== void 0 ? _ref22 : margin),
-        ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref25 !== void 0 ? _ref25 : mx) !== null && _ref24 !== void 0 ? _ref24 : margin),
-        mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref29 !== void 0 ? _ref29 : marginRight) !== null && _ref28 !== void 0 ? _ref28 : ml) !== null && _ref27 !== void 0 ? _ref27 : mr) !== null && _ref26 !== void 0 ? _ref26 : margin),
-        my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref33 !== void 0 ? _ref33 : marginBottom) !== null && _ref32 !== void 0 ? _ref32 : mt) !== null && _ref31 !== void 0 ? _ref31 : mb) !== null && _ref30 !== void 0 ? _ref30 : margin),
+        px: makeScaleHandler((_ref0 = (_ref1 = (_ref10 = (_ref11 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref11 !== void 0 ? _ref11 : paddingRight) !== null && _ref10 !== void 0 ? _ref10 : pl) !== null && _ref1 !== void 0 ? _ref1 : pr) !== null && _ref0 !== void 0 ? _ref0 : padding),
+        py: makeScaleHandler((_ref12 = (_ref13 = (_ref14 = (_ref15 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref15 !== void 0 ? _ref15 : paddingBottom) !== null && _ref14 !== void 0 ? _ref14 : pt) !== null && _ref13 !== void 0 ? _ref13 : pb) !== null && _ref12 !== void 0 ? _ref12 : padding),
+        mt: makeScaleHandler((_ref16 = (_ref17 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref17 !== void 0 ? _ref17 : my) !== null && _ref16 !== void 0 ? _ref16 : margin),
+        mr: makeScaleHandler((_ref18 = (_ref19 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref19 !== void 0 ? _ref19 : mx) !== null && _ref18 !== void 0 ? _ref18 : margin),
+        mb: makeScaleHandler((_ref20 = (_ref21 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref21 !== void 0 ? _ref21 : my) !== null && _ref20 !== void 0 ? _ref20 : margin),
+        ml: makeScaleHandler((_ref22 = (_ref23 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref23 !== void 0 ? _ref23 : mx) !== null && _ref22 !== void 0 ? _ref22 : margin),
+        mx: makeScaleHandler((_ref24 = (_ref25 = (_ref26 = (_ref27 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref27 !== void 0 ? _ref27 : marginRight) !== null && _ref26 !== void 0 ? _ref26 : ml) !== null && _ref25 !== void 0 ? _ref25 : mr) !== null && _ref24 !== void 0 ? _ref24 : margin),
+        my: makeScaleHandler((_ref28 = (_ref29 = (_ref30 = (_ref31 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref31 !== void 0 ? _ref31 : marginBottom) !== null && _ref30 !== void 0 ? _ref30 : mt) !== null && _ref29 !== void 0 ? _ref29 : mb) !== null && _ref28 !== void 0 ? _ref28 : margin),
         width: makeScaleHandler(width !== null && width !== void 0 ? width : w),
         height: makeScaleHandler(height !== null && height !== void 0 ? height : h),
         font: makeScaleHandler(font)
@@ -1363,7 +1377,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$l = ["label", "labelRight", "color", "error", "type", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
+var _excluded$j = ["label", "labelRight", "color", "error", "type", "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,
@@ -1403,14 +1417,15 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var inputRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
     return inputRef.current;
-  });
+  }); // Changed with !
+
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
     selfValue = _useState2[0],
@@ -1545,7 +1560,7 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$k = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+var _excluded$i = ["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,
@@ -1565,7 +1580,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     placeholder = _ref.placeholder,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1665,11 +1680,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$j = ["hideToggle", "children"];
+var _excluded$h = ["hideToggle", "children"];
 var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -1679,7 +1694,8 @@ var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     setVisible = _useState2[1];
   React.useImperativeHandle(ref, function () {
     return inputRef.current;
-  });
+  }); // Changed with !
+
   var iconClickHandler = function iconClickHandler() {
     setVisible(function (v) {
       return !v;
@@ -1754,11 +1770,11 @@ var SelectIcon = /*#__PURE__*/React.memo(SelectIconComponent);
 
 /* "use client" */
 
-var defaultContext$4 = {
+var defaultContext$3 = {
   visible: false,
   disableAll: false
 };
-var SelectContext = /*#__PURE__*/React.createContext(defaultContext$4);
+var SelectContext = /*#__PURE__*/React.createContext(defaultContext$3);
 var useSelectContext = function useSelectContext() {
   return React.useContext(SelectContext);
 };
@@ -1823,7 +1839,7 @@ var useResize = function useResize(callback) {
   }, []);
 };
 
-var _excluded$i = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+var _excluded$g = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
 var CssTransition = function CssTransition(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
@@ -1838,7 +1854,7 @@ var CssTransition = function CssTransition(_ref) {
     clearTime = _ref$clearTime === void 0 ? 60 : _ref$clearTime,
     _ref$name = _ref.name,
     name = _ref$name === void 0 ? 'transition' : _ref$name,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     classes = _useState2[0],
@@ -2094,7 +2110,7 @@ var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef)
 });
 SelectDropdown.displayName = 'SelectDropdown';
 
-var _excluded$h = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var _excluded$f = ["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') {
@@ -2132,7 +2148,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -2172,12 +2188,12 @@ var GridBasicItem = function GridBasicItem(_ref) {
 };
 GridBasicItem.displayName = 'GridBasicItem';
 
-var _excluded$g = ["children", "className"];
+var _excluded$e = ["children", "className"];
 var GridComponent = function GridComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _styles$className = {
@@ -2197,7 +2213,7 @@ var GridComponent = function GridComponent(_ref) {
 GridComponent.displayName = 'Grid';
 var Grid = withScale(GridComponent);
 
-var _excluded$f = ["gap", "wrap", "children", "className"];
+var _excluded$d = ["gap", "wrap", "children", "className"];
 var GridContainerComponent = function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 0 : _ref$gap,
@@ -2206,7 +2222,7 @@ var GridContainerComponent = function GridContainerComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -2362,7 +2378,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
 });
 SelectInput.displayName = 'SelectInput';
 
-var _excluded$e = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
+var _excluded$c = ["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,
@@ -2391,7 +2407,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     getPopupContainer = _ref.getPopupContainer,
     _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
     onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -2563,7 +2579,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
 SelectComponent.displayName = 'Select';
 var Select = withScale(SelectComponent);
 
-var _excluded$d = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
+var _excluded$b = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
 var SelectOptionComponent = function SelectOptionComponent(_ref) {
   var identValue = _ref.value,
     _ref$className = _ref.className,
@@ -2577,7 +2593,7 @@ var SelectOptionComponent = function SelectOptionComponent(_ref) {
     label = _ref$label === void 0 ? false : _ref$label,
     _ref$preventAllEvents = _ref.preventAllEvents,
     preventAllEvents = _ref$preventAllEvents === void 0 ? false : _ref$preventAllEvents,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -2842,11 +2858,11 @@ var TableCell = function TableCell(_ref) {
 
 /* "use client" */
 
-var defaultContext$3 = {
+var defaultContext$2 = {
   columns: [],
   updateColumn: function updateColumn() {}
 };
-var TableContext = /*#__PURE__*/React.createContext(defaultContext$3);
+var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
 var useTableContext = function useTableContext() {
   return React.useContext(TableContext);
 };
@@ -7159,7 +7175,7 @@ function requireLodash () {
 		        return symbolToString ? symbolToString.call(value) : '';
 		      }
 		      var result = (value + '');
-		      return (result == '0' && (1 / value) == -Infinity) ? '-0' : result;
+		      return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
 		    }
 
 		    /**
@@ -9682,7 +9698,7 @@ function requireLodash () {
 		        return value;
 		      }
 		      var result = (value + '');
-		      return (result == '0' && (1 / value) == -Infinity) ? '-0' : result;
+		      return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
 		    }
 
 		    /**
@@ -15024,7 +15040,7 @@ function requireLodash () {
 		     * // => false
 		     */
 		    function isSafeInteger(value) {
-		      return isInteger(value) && value >= -9007199254740991 && value <= MAX_SAFE_INTEGER;
+		      return isInteger(value) && value >= -MAX_SAFE_INTEGER && value <= MAX_SAFE_INTEGER;
 		    }
 
 		    /**
@@ -15291,7 +15307,7 @@ function requireLodash () {
 		        return value === 0 ? value : 0;
 		      }
 		      value = toNumber(value);
-		      if (value === INFINITY || value === -Infinity) {
+		      if (value === INFINITY || value === -INFINITY) {
 		        var sign = (value < 0 ? -1 : 1);
 		        return sign * MAX_INTEGER;
 		      }
@@ -15460,7 +15476,7 @@ function requireLodash () {
 		     */
 		    function toSafeInteger(value) {
 		      return value
-		        ? baseClamp(toInteger(value), -9007199254740991, MAX_SAFE_INTEGER)
+		        ? baseClamp(toInteger(value), -MAX_SAFE_INTEGER, MAX_SAFE_INTEGER)
 		        : (value === 0 ? value : 0);
 		    }
 
@@ -20364,7 +20380,7 @@ function Empty() {
   }));
 }
 
-var _excluded$c = ["children", "tag", "className", "color"];
+var _excluded$a = ["children", "tag", "className", "color"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
     "default": 'inherit',
@@ -20382,7 +20398,7 @@ var TextChild = function TextChild(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var Component = tag;
   var theme = useTheme();
   var _useScale = useScale(),
@@ -20420,15 +20436,15 @@ var TextChild = function TextChild(_ref) {
     return "".concat(scaleClassNames, " ").concat(className).trim();
   }, [mx, my, px, py, font, className]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    className: _JSXStyle.dynamic([["4133320328", [tag, _color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]]]) + " " + (props && props.className != null && props.className || classNames || "")
+    className: _JSXStyle.dynamic([["2277774325", [tag, _color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]]]) + " " + (props && props.className != null && props.className || classNames || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4133320328",
+    id: "2277774325",
     dynamic: [tag, _color, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1, 'inherit'), SCALES.ml(0, 'revert'), SCALES.mr(0, 'revert'), SCALES.mt(0, 'revert'), SCALES.mb(0, 'revert'), SCALES.pl(0, 'revert'), SCALES.pr(0, 'revert'), SCALES.pt(0, 'revert'), SCALES.pb(0, 'revert')]
-  }, "".concat(tag, ".__jsx-style-dynamic-selector{color:").concat(_color, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.font.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(1, 'inherit'), ";}.mx.__jsx-style-dynamic-selector{margin-left:").concat(SCALES.ml(0, 'revert'), ";margin-right:").concat(SCALES.mr(0, 'revert'), ";}.my.__jsx-style-dynamic-selector{margin-top:").concat(SCALES.mt(0, 'revert'), ";margin-bottom:").concat(SCALES.mb(0, 'revert'), ";}.px.__jsx-style-dynamic-selector{padding-left:").concat(SCALES.pl(0, 'revert'), ";padding-right:").concat(SCALES.pr(0, 'revert'), ";}.py.__jsx-style-dynamic-selector{padding-top:").concat(SCALES.pt(0, 'revert'), ";padding-bottom:").concat(SCALES.pb(0, 'revert'), ";}")));
+  }, "".concat(tag, ".__jsx-style-dynamic-selector{color:").concat(_color, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.font.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(1, 'inherit'), ";}.mx.__jsx-style-dynamic-selector{margin-left:").concat(SCALES.ml(0, 'revert'), ";margin-right:").concat(SCALES.mr(0, 'revert'), ";}.my.__jsx-style-dynamic-selector{margin-top:").concat(SCALES.mt(0, 'revert'), ";margin-bottom:").concat(SCALES.mb(0, 'revert'), ";}.px.__jsx-style-dynamic-selector{padding-left:").concat(SCALES.pl(0, 'revert'), ";padding-right:").concat(SCALES.pr(0, 'revert'), ";}.py.__jsx-style-dynamic-selector{padding-top:").concat(SCALES.pt(0, 'revert'), ";padding-bottom:").concat(SCALES.pb(0, 'revert'), ";}.no-wrap.__jsx-style-dynamic-selector{white-space:nowrap;}")));
 };
 TextChild.displayName = 'TextChild';
 
-var _excluded$b = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "children", "className"];
+var _excluded$9 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className"];
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -20465,10 +20481,12 @@ var TextComponent = function TextComponent(_ref) {
     em = _ref$em === void 0 ? false : _ref$em,
     _ref$blockquote = _ref.blockquote,
     blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var elements = {
     h1: h1,
     h2: h2,
@@ -20520,7 +20538,7 @@ var TextComponent = function TextComponent(_ref) {
     style: {
       textAlign: props.align
     },
-    className: className,
+    className: "".concat(className, " ").concat(noWrap ? 'no-wrap' : ''),
     tag: tag
   }, props), modifers);
 };
@@ -20615,218 +20633,463 @@ function Placeholder(_ref) {
   }, msg));
 }
 
-// import { IconContext } from "./context.js";
-const createIcon = (Component) => {
-    const IconWrapper = React.forwardRef(({ color = "#001A72", strokeWidth = "1.5", size = "24", set = "outline", style, ...props }, ref) => {
-        // const context = useContext(IconContext);
-        return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "none", viewBox: "0 0 24 24", style: style, ...props, ref: ref },
-            React.createElement("title", null, "Icon"),
-            React.createElement(Component, { color: color, strokeWidth: strokeWidth, set: set })));
-    });
-    const MemoIcon = React.memo(IconWrapper);
-    return MemoIcon;
-};
-
-const Air = ({ color, strokeWidth, set }) => {
-    const Broken = () => (React.createElement("g", null,
-        React.createElement("path", { id: "shape", d: "M8 12H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { id: "shape_2", d: "M5 9H10M16.5 4C17.8807 4 19 5.11929 19 6.5C19 7.88071 17.8807 9 16.5 9H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { id: "shape_3", d: "M4 15H7M17 19C18.1046 19 19 18.1046 19 17C19 15.8954 18.1046 15 17 15H11", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Curved = () => (React.createElement("g", null,
-        React.createElement("path", { id: "shape", d: "M8 12H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { id: "shape_2", d: "M5 9H16.5C17.8807 9 19 7.88071 19 6.5C19 5.11929 17.8807 4 16.5 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { id: "shape_3", d: "M4 15H17C18.1046 15 19 15.8954 19 17C19 18.1046 18.1046 19 17 19", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Duotone = () => (React.createElement("g", null,
-        React.createElement("path", { id: "shape", d: "M8 12H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { id: "shape_2", d: "M5 9H16.5C17.8807 9 19 7.88071 19 6.5C19 5.11929 17.8807 4 16.5 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { id: "shape_3", d: "M4 15H17C18.1046 15 19 15.8954 19 17C19 18.1046 18.1046 19 17 19", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Outline = () => (React.createElement("g", null,
-        React.createElement("path", { id: "shape", d: "M8 12H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { id: "shape_2", d: "M5 9H16.5C17.8807 9 19 7.88071 19 6.5C19 5.11929 17.8807 4 16.5 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React.createElement("path", { id: "shape_3", d: "M4 15H17C18.1046 15 19 15.8954 19 17C19 18.1046 18.1046 19 17 19", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    switch (set) {
-        case "broken":
-            return React.createElement(Broken, null);
-        case "curved":
-            return React.createElement(Curved, null);
-        case "duotone":
-            return React.createElement(Duotone, null);
-        case "outline":
-            return React.createElement(Outline, null);
-        default:
-            return React.createElement(Outline, null);
-    }
-};
-Air.displayName = "Air";
-createIcon(Air);
+// import { DataTable } from '@helpdice/pro';
 
-const Alarm = ({ color, strokeWidth, set }) => {
-    const Broken = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 9V13L14 15", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21C14.3894 21 16.5341 19.9525 18 18.2916", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M18 3L21 6", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M3 6L6 3", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Curved = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 9V13L14 15", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.4183 21 20 17.4183 20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M18 3L21 6", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M3 6L6 3", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Duotone = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { opacity: "0.15", d: "M20 13C20 17.4183 16.4183 21 12 21C7.58172 21 4 17.4183 4 13C4 8.58172 7.58172 5 12 5C16.4183 5 20 8.58172 20 13Z", fill: color }),
-        React__namespace.createElement("path", { d: "M12 9V13L14 15", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.4183 21 20 17.4183 20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M18 3L21 6", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M3 6L6 3", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Outline = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 9V13L14 15", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.4183 21 20 17.4183 20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M18 3L21 6", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M3 6L6 3", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    switch (set) {
-        case "broken":
-            return React__namespace.createElement(Broken, null);
-        case "curved":
-            return React__namespace.createElement(Curved, null);
-        case "duotone":
-            return React__namespace.createElement(Duotone, null);
-        case "outline":
-            return React__namespace.createElement(Outline, null);
-        default:
-            return React__namespace.createElement(Outline, null);
-    }
-};
-Alarm.displayName = "Alarm";
-createIcon(Alarm);
+var TableBody = function TableBody(_ref) {
+  var data = _ref.data,
+    emptyText = _ref.emptyText,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell,
+    rowClassName = _ref.rowClassName,
+    textPlaceholder = _ref.textPlaceholder,
+    _ref$rowDraggable = _ref.rowDraggable,
+    rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? 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)
+  // }
 
-const ArrowCircleDown = ({ color, strokeWidth, set }) => {
-    const Broken = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M10 15L8 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Curved = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Duotone = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { opacity: "0.15", d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", fill: color }),
-        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Outline = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    switch (set) {
-        case "broken":
-            return React__namespace.createElement(Broken, null);
-        case "curved":
-            return React__namespace.createElement(Curved, null);
-        case "duotone":
-            return React__namespace.createElement(Duotone, null);
-        case "outline":
-            return React__namespace.createElement(Outline, null);
-        default:
-            return React__namespace.createElement(Outline, null);
+  var handleClick = function handleClick(_event, id) {
+    if (readOnly) {
+      return true;
     }
-};
-ArrowCircleDown.displayName = "ArrowCircleDown";
-createIcon(ArrowCircleDown);
-
-const ArrowSmallDown = ({ color, strokeWidth, set }) => {
-    const Broken = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M10 15L8 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Curved = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Duotone = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Outline = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    switch (set) {
-        case "broken":
-            return React__namespace.createElement(Broken, null);
-        case "curved":
-            return React__namespace.createElement(Curved, null);
-        case "duotone":
-            return React__namespace.createElement(Duotone, null);
-        case "outline":
-            return React__namespace.createElement(Outline, null);
-        default:
-            return React__namespace.createElement(Outline, null);
+    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));
     }
-};
-ArrowSmallDown.displayName = "ArrowSmallDown";
-createIcon(ArrowSmallDown);
-
-const ArrowDown = ({ color, strokeWidth, set }) => {
-    const Broken = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 20L12 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M9 17L6 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 20L18 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Curved = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 20L12 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M6 14L12 20L18 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Duotone = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 20L12 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M6 14L12 20L18 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Outline = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 20L12 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M6 14L12 20L18 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    switch (set) {
-        case "broken":
-            return React__namespace.createElement(Broken, null);
-        case "curved":
-            return React__namespace.createElement(Curved, null);
-        case "duotone":
-            return React__namespace.createElement(Duotone, null);
-        case "outline":
-            return React__namespace.createElement(Outline, null);
-        default:
-            return React__namespace.createElement(Outline, null);
+    setSelected(newSelected);
+    if (newSelected.length > 0 && onSelected) {
+      onSelected(newSelected);
     }
-};
-ArrowDown.displayName = "ArrowDown";
-createIcon(ArrowDown);
+  };
 
-const ArrowCircleLeft = ({ color, strokeWidth, set }) => {
-    const Broken = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M7 12L17 12", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M9 10L11 8", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M7 12L11 16", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Curved = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M7 12L17 12", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M11 8L7 12L11 16", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Duotone = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { opacity: "0.15", d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", fill: color }),
-        React__namespace.createElement("path", { d: "M7 12L17 12", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M11 8L7 12L11 16", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
-    const Outline = () => (React__namespace.createElement("g", null,
-        React__namespace.createElement("path", { d: "M7 12L17 12", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M11 8L7 12L11 16", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+  // 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
+  // const SELECTED = useMemo(() => {
+  //   if (selected.length > 0 && onSelected) {
+  //     return onSelected(selected);
+  //   }
+  //   return <></>;
+  // }, [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 === void 0 ? void 0 : row.style) !== null && _row$style !== void 0 ? _row$style : {};
+    var onDragStart = row === null || row === void 0 ? void 0 : 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([["787902152", [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: "787902152",
+      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(2.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;}")));
+  }
+  if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
+    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+      colSpan: columns === null || columns === void 0 ? void 0 : columns.length
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Placeholder, {
+      empty: true,
+      textOnly: textPlaceholder,
+      msg: "No Entries Found"
+    })))));
+  }
+  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) {
+    // const 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));
+
+    // 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
+  };
+  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];
+};
+
+/* "use client" */
+
+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,
+    style = _ref.style,
+    color = _ref.color,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 'smaller' : _ref$fontSize,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _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,
+      color: color,
+      align: align,
+      fontSize: fontSize,
+      className: className,
+      style: style,
+      renderHandler: function renderHandler() {}
+    });
+  }, [children, noWrap, color, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
+  return null;
+};
+TableColumn.displayName = 'TableColumn';
+
+// import { IconContext } from "./context.js";
+const createIcon = (Component) => {
+    const IconWrapper = React.forwardRef(({ color = "#001A72", strokeWidth = "1.5", size = "24", set = "outline", style, ...props }, ref) => {
+        // const context = useContext(IconContext);
+        return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "none", viewBox: "0 0 24 24", style: style, ...props, ref: ref },
+            React.createElement("title", null, "Icon"),
+            React.createElement(Component, { color: color, strokeWidth: strokeWidth, set: set })));
+    });
+    const MemoIcon = React.memo(IconWrapper);
+    return MemoIcon;
+};
+
+const Air = ({ color, strokeWidth, set }) => {
+    const Broken = () => (React.createElement("g", null,
+        React.createElement("path", { id: "shape", d: "M8 12H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { id: "shape_2", d: "M5 9H10M16.5 4C17.8807 4 19 5.11929 19 6.5C19 7.88071 17.8807 9 16.5 9H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { id: "shape_3", d: "M4 15H7M17 19C18.1046 19 19 18.1046 19 17C19 15.8954 18.1046 15 17 15H11", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Curved = () => (React.createElement("g", null,
+        React.createElement("path", { id: "shape", d: "M8 12H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { id: "shape_2", d: "M5 9H16.5C17.8807 9 19 7.88071 19 6.5C19 5.11929 17.8807 4 16.5 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { id: "shape_3", d: "M4 15H17C18.1046 15 19 15.8954 19 17C19 18.1046 18.1046 19 17 19", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Duotone = () => (React.createElement("g", null,
+        React.createElement("path", { id: "shape", d: "M8 12H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { id: "shape_2", d: "M5 9H16.5C17.8807 9 19 7.88071 19 6.5C19 5.11929 17.8807 4 16.5 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { id: "shape_3", d: "M4 15H17C18.1046 15 19 15.8954 19 17C19 18.1046 18.1046 19 17 19", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Outline = () => (React.createElement("g", null,
+        React.createElement("path", { id: "shape", d: "M8 12H14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { id: "shape_2", d: "M5 9H16.5C17.8807 9 19 7.88071 19 6.5C19 5.11929 17.8807 4 16.5 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { id: "shape_3", d: "M4 15H17C18.1046 15 19 15.8954 19 17C19 18.1046 18.1046 19 17 19", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
     switch (set) {
         case "broken":
-            return React__namespace.createElement(Broken, null);
+            return React.createElement(Broken, null);
         case "curved":
-            return React__namespace.createElement(Curved, null);
+            return React.createElement(Curved, null);
         case "duotone":
-            return React__namespace.createElement(Duotone, null);
+            return React.createElement(Duotone, null);
         case "outline":
-            return React__namespace.createElement(Outline, null);
+            return React.createElement(Outline, null);
         default:
-            return React__namespace.createElement(Outline, null);
+            return React.createElement(Outline, null);
     }
 };
-ArrowCircleLeft.displayName = "ArrowCircleLeft";
-createIcon(ArrowCircleLeft);
+Air.displayName = "Air";
+createIcon(Air);
+
+const Alarm = ({ color, strokeWidth, set }) => {
+    const Broken = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 9V13L14 15", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21C14.3894 21 16.5341 19.9525 18 18.2916", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M18 3L21 6", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M3 6L6 3", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Curved = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 9V13L14 15", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.4183 21 20 17.4183 20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M18 3L21 6", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M3 6L6 3", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Duotone = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { opacity: "0.15", d: "M20 13C20 17.4183 16.4183 21 12 21C7.58172 21 4 17.4183 4 13C4 8.58172 7.58172 5 12 5C16.4183 5 20 8.58172 20 13Z", fill: color }),
+        React__namespace.createElement("path", { d: "M12 9V13L14 15", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.4183 21 20 17.4183 20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M18 3L21 6", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M3 6L6 3", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Outline = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 9V13L14 15", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.4183 21 20 17.4183 20 13C20 8.58172 16.4183 5 12 5C7.58172 5 4 8.58172 4 13C4 17.4183 7.58172 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M18 3L21 6", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M3 6L6 3", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    switch (set) {
+        case "broken":
+            return React__namespace.createElement(Broken, null);
+        case "curved":
+            return React__namespace.createElement(Curved, null);
+        case "duotone":
+            return React__namespace.createElement(Duotone, null);
+        case "outline":
+            return React__namespace.createElement(Outline, null);
+        default:
+            return React__namespace.createElement(Outline, null);
+    }
+};
+Alarm.displayName = "Alarm";
+createIcon(Alarm);
+
+const ArrowCircleDown = ({ color, strokeWidth, set }) => {
+    const Broken = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M10 15L8 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Curved = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Duotone = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { opacity: "0.15", d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", fill: color }),
+        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Outline = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    switch (set) {
+        case "broken":
+            return React__namespace.createElement(Broken, null);
+        case "curved":
+            return React__namespace.createElement(Curved, null);
+        case "duotone":
+            return React__namespace.createElement(Duotone, null);
+        case "outline":
+            return React__namespace.createElement(Outline, null);
+        default:
+            return React__namespace.createElement(Outline, null);
+    }
+};
+ArrowCircleDown.displayName = "ArrowCircleDown";
+createIcon(ArrowCircleDown);
+
+const ArrowSmallDown = ({ color, strokeWidth, set }) => {
+    const Broken = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M10 15L8 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Curved = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Duotone = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Outline = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 17L12 7", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M8 13L12 17L16 13", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    switch (set) {
+        case "broken":
+            return React__namespace.createElement(Broken, null);
+        case "curved":
+            return React__namespace.createElement(Curved, null);
+        case "duotone":
+            return React__namespace.createElement(Duotone, null);
+        case "outline":
+            return React__namespace.createElement(Outline, null);
+        default:
+            return React__namespace.createElement(Outline, null);
+    }
+};
+ArrowSmallDown.displayName = "ArrowSmallDown";
+createIcon(ArrowSmallDown);
+
+const ArrowDown = ({ color, strokeWidth, set }) => {
+    const Broken = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 20L12 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M9 17L6 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 20L18 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Curved = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 20L12 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M6 14L12 20L18 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Duotone = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 20L12 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M6 14L12 20L18 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Outline = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 20L12 4", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M6 14L12 20L18 14", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    switch (set) {
+        case "broken":
+            return React__namespace.createElement(Broken, null);
+        case "curved":
+            return React__namespace.createElement(Curved, null);
+        case "duotone":
+            return React__namespace.createElement(Duotone, null);
+        case "outline":
+            return React__namespace.createElement(Outline, null);
+        default:
+            return React__namespace.createElement(Outline, null);
+    }
+};
+ArrowDown.displayName = "ArrowDown";
+createIcon(ArrowDown);
+
+const ArrowCircleLeft = ({ color, strokeWidth, set }) => {
+    const Broken = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M7 12L17 12", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M9 10L11 8", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M7 12L11 16", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Curved = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M7 12L17 12", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M11 8L7 12L11 16", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Duotone = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { opacity: "0.15", d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", fill: color }),
+        React__namespace.createElement("path", { d: "M7 12L17 12", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M11 8L7 12L11 16", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    const Outline = () => (React__namespace.createElement("g", null,
+        React__namespace.createElement("path", { d: "M7 12L17 12", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M11 8L7 12L11 16", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+    switch (set) {
+        case "broken":
+            return React__namespace.createElement(Broken, null);
+        case "curved":
+            return React__namespace.createElement(Curved, null);
+        case "duotone":
+            return React__namespace.createElement(Duotone, null);
+        case "outline":
+            return React__namespace.createElement(Outline, null);
+        default:
+            return React__namespace.createElement(Outline, null);
+    }
+};
+ArrowCircleLeft.displayName = "ArrowCircleLeft";
+createIcon(ArrowCircleLeft);
 
 const ArrowSmallLeft = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -20887,7 +21150,7 @@ const ArrowLeft = ({ color, strokeWidth, set }) => {
     }
 };
 ArrowLeft.displayName = "ArrowLeft";
-var ArrowLeft$1 = createIcon(ArrowLeft);
+createIcon(ArrowLeft);
 
 const ArrowCircleRight = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -23301,7 +23564,7 @@ const Delete = ({ color, strokeWidth, set }) => {
     }
 };
 Delete.displayName = "Delete";
-var Delete$1 = createIcon(Delete);
+createIcon(Delete);
 
 const Dislike = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -23663,7 +23926,7 @@ const Edit1 = ({ color, strokeWidth, set }) => {
     }
 };
 Edit1.displayName = "Edit1";
-var Edit = createIcon(Edit1);
+createIcon(Edit1);
 
 const Edit2 = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -24126,7 +24389,7 @@ const Filters1 = ({ color, strokeWidth, set }) => {
     }
 };
 Filters1.displayName = "Filters1";
-var Filters = createIcon(Filters1);
+createIcon(Filters1);
 
 const Filters2 = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -27430,7 +27693,7 @@ const Refresh = ({ color, strokeWidth, set }) => {
     }
 };
 Refresh.displayName = "Refresh";
-var Refresh$1 = createIcon(Refresh);
+createIcon(Refresh);
 
 const ResizeCircleHorizontal = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -30388,7 +30651,7 @@ const Columns = ({ color, strokeWidth, set }) => {
     }
 };
 Columns.displayName = "Columns";
-var Columns$1 = createIcon(Columns);
+createIcon(Columns);
 
 const Folder = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
@@ -30491,211 +30754,29 @@ const HelpCircle = ({ color, strokeWidth, set }) => {
 HelpCircle.displayName = "HelpCircle";
 createIcon(HelpCircle);
 
-var ButtonDrip = function ButtonDrip(_ref) {
-  var _ref$x = _ref.x,
-    x = _ref$x === void 0 ? 0 : _ref$x,
-    _ref$y = _ref.y,
-    y = _ref$y === void 0 ? 0 : _ref$y,
-    color = _ref.color,
-    onCompleted = _ref.onCompleted;
-  var dripRef = React.useRef(null);
-  /* istanbul ignore next */
-  var top = Number.isNaN(+y) ? 0 : y - 10;
-  /* istanbul ignore next */
-  var left = Number.isNaN(+x) ? 0 : x - 10;
-  React.useEffect(function () {
-    /* istanbul ignore next */
-    if (!dripRef.current) return;
-    dripRef.current.addEventListener('animationend', onCompleted);
-    return function () {
-      /* istanbul ignore next */
-      if (!dripRef.current) return;
-      dripRef.current.removeEventListener('animationend', onCompleted);
-    };
+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);
   });
-  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;}}"));
+  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)];
 };
-ButtonDrip.displayName = 'ButtonDrip';
-
-var _excluded$a = ["children", "type", "color", "className", "spaceRatio"];
-var getIconBgColor = function getIconBgColor(type, palette, color) {
-  var colors = {
-    "default": palette.accents_6,
-    secondary: palette.secondary,
-    success: palette.success,
-    warning: palette.warning,
-    error: palette.error
-  };
-  return color ? color : colors[type];
-};
-var LoadingComponent = function LoadingComponent(_ref) {
-  var children = _ref.children,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    color = _ref.color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$spaceRatio = _ref.spaceRatio,
-    spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useClasses('loading-container', className);
-  var bgColor = React.useMemo(function () {
-    return getIconBgColor(type, theme.palette, color);
-  }, [type, theme.palette, color]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
-  }, children && /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
-  }, children), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2201634259",
-    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]
-  }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
-};
-LoadingComponent.displayName = 'Loading';
-var Loading = withScale(LoadingComponent);
-
-var ButtonLoading = function ButtonLoading(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-212623367" + " " + "btn-loading"
-  }, /*#__PURE__*/React.createElement(Loading, {
-    color: color
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "212623367"
-  }, ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"));
-};
-ButtonLoading.displayName = 'ButtonLoading';
-
-var _excluded$9 = ["isRight", "isSingle", "children", "className"];
-var ButtonIcon = function ButtonIcon(_ref) {
-  var _ref$isRight = _ref.isRight,
-    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
-    isSingle = _ref.isSingle,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$9);
-  var classes = useClasses('icon', {
-    right: isRight,
-    single: isSingle
-  }, className);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2467502931"
-  }, ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"));
-};
-ButtonIcon.displayName = 'ButtonIcon';
-
-var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
-  var icon = icons.icon,
-    iconRight = icons.iconRight;
-  var hasIcon = icon || iconRight;
-  var isRight = Boolean(iconRight);
-  var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
-  var classes = useClasses('text', isRight ? 'right' : 'left');
-  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
-    className: "text"
-  }, children);
-  if (React.Children.count(children) === 0) {
-    return /*#__PURE__*/React.createElement(ButtonIcon, {
-      isRight: isRight,
-      isSingle: true
-    }, hasIcon);
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
-    isRight: isRight
-  }, hasIcon), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3568181479",
-    dynamic: [paddingForAutoMode, paddingForAutoMode]
-  }, ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}"))));
-};
-var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
-  if (!config.isButtonGroup) return props;
-  return _objectSpread2(_objectSpread2({}, props), {}, {
-    auto: true,
-    shadow: false,
-    ghost: config.ghost || props.ghost,
-    type: config.type || props.type,
-    disabled: config.disabled || props.disabled
-  });
-};
-
-/* "use client" */
-
-var defaultContext$2 = {
-  isButtonGroup: false,
-  disabled: false
-};
-var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$2);
-var useButtonGroupContext = function useButtonGroupContext() {
-  return React.useContext(ButtonGroupContext);
-};
-
-var hexToRgb = function hexToRgb(color) {
-  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  var full = color.replace(fullReg, function (_, r, g, b) {
-    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
-  });
-  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
-  if (!values) {
-    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
-  }
-  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
-};
-var colorToRgbValues = function colorToRgbValues(color) {
-  if (color.charAt(0) === '#') return hexToRgb(color);
-  var safeColor = color.replace(/ /g, '');
-  var colorType = color.substr(0, 4);
-  var regArray = safeColor.match(/\((.+)\)/);
-  if (!colorType.startsWith('rgb') || !regArray) {
-    console.log(color);
-    throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
-  }
-  return regArray[1].split(',').map(function (str) {
-    return Number.parseFloat(str);
-  });
+var 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;
@@ -30708,1867 +30789,1208 @@ var addColorAlpha = function addColorAlpha(color, alpha) {
   return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
 };
 
-var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
-  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
-    }
+var _excluded$8 = ["active", "children", "disabled", "onClick"];
+var PaginationItem = function PaginationItem(_ref) {
+  var active = _ref.active,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded$8);
+  var theme = useTheme();
+  var _useMemo = React.useMemo(function () {
+      return [addColorAlpha(theme.palette.success, 0.1), addColorAlpha(theme.palette.success, 0.8)];
+    }, [theme.palette.success]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    hover = _useMemo2[0],
+    activeHover = _useMemo2[1];
+  var classes = useClasses({
+    active: active,
+    disabled: disabled
+  });
+  var clickHandler = function clickHandler(event) {
+    if (disabled) return;
+    onClick && onClick(event);
   };
-  return colors[_color] || null;
+  return /*#__PURE__*/React.createElement("li", {
+    className: _JSXStyle.dynamic([["1657796974", [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]]])
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["1657796974", [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1657796974",
+    dynamic: [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]
+  }, "li.__jsx-style-dynamic-selector{margin-right:0.428em;display:inline-block;}button.__jsx-style-dynamic-selector{border:none;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-align:center;vertical-align:middle;box-shadow:none;outline:none;height:var(--pagination-size);min-width:var(--pagination-size);font-size:inherit;cursor:pointer;color:".concat(theme.palette.success, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(theme.palette.background, ";-webkit-transition:all linear 200ms 0ms;transition:all linear 200ms 0ms;}button.__jsx-style-dynamic-selector:hover{background-color:").concat(hover, ";}.active.__jsx-style-dynamic-selector{font-weight:bold;background-color:").concat(theme.palette.success, ";color:").concat(theme.palette.background, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";}.active.__jsx-style-dynamic-selector:hover{background-color:").concat(activeHover, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}.disabled.__jsx-style-dynamic-selector:hover{background-color:").concat(theme.palette.accents_2, ";}button.__jsx-style-dynamic-selector svg{width:1.3em;height:1.3em;}")));
 };
-var getButtonColors = function getButtonColors(palette, props) {
-  var color = props.color,
-    disabled = props.disabled,
-    ghost = props.ghost;
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.border,
-      color: palette.accents_5
+PaginationItem.displayName = 'PaginationItem';
+
+/* "use client" */
+
+tuple('prev', 'next', 'click');
+var defaultContext$1 = {};
+var PaginationContext = /*#__PURE__*/React.createContext(defaultContext$1);
+var usePaginationContext = function usePaginationContext() {
+  return React.useContext(PaginationContext);
+};
+
+var _excluded$7 = ["children"];
+var PaginationPrevious = function PaginationPrevious(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  var _usePaginationContext = usePaginationContext(),
+    update = _usePaginationContext.update,
+    isFirst = _usePaginationContext.isFirst;
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('prev');
     },
-    secondary: {
-      bg: palette.foreground,
-      border: palette.foreground,
-      color: palette.background
+    disabled: isFirst
+  }, props), children);
+};
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+var _excluded$6 = ["children"];
+var PaginationNext = function PaginationNext(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  var _usePaginationContext = usePaginationContext(),
+    update = _usePaginationContext.update,
+    isLast = _usePaginationContext.isLast;
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('next');
     },
-    success: {
-      bg: palette.success,
-      border: palette.success,
-      color: '#fff'
+    disabled: isLast
+  }, props), children);
+};
+PaginationNext.displayName = 'PaginationNext';
+
+var PaginationEllipsis = function PaginationEllipsis(_ref) {
+  var isBefore = _ref.isBefore,
+    _onClick = _ref.onClick;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1];
+  return /*#__PURE__*/React.createElement(PaginationItem, {
+    onClick: function onClick(e) {
+      return _onClick && _onClick(e);
     },
-    warning: {
-      bg: palette.warning,
-      border: palette.warning,
-      color: '#fff'
+    onMouseEnter: function onMouseEnter() {
+      return setShowMore(true);
     },
-    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 = color === null || color === void 0 ? void 0 : color.replace('-light', '');
-  var defaultColor = colors["default"];
-  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
-  return colors[withoutLightType] || defaultColor;
-};
-var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _color) {
-  var colors = {
-    secondary: {
-      bg: palette.foreground,
-      border: palette.background,
-      color: palette.background
-    },
-    success: {
-      bg: palette.success,
-      border: palette.background,
-      color: 'white'
-    },
-    warning: {
-      bg: palette.warning,
-      border: palette.background,
-      color: 'white'
-    },
-    error: {
-      bg: palette.error,
-      border: palette.background,
-      color: 'white'
-    }
-  };
-  var withoutLightType = _color === null || _color === void 0 ? void 0 : _color.replace('-light', '');
-  return colors[withoutLightType] || null;
-};
-var getButtonHoverColors = function getButtonHoverColors(palette, props) {
-  var color = props.color,
-    disabled = props.disabled,
-    loading = props.loading,
-    shadow = props.shadow,
-    ghost = props.ghost;
-  var defaultColor = getButtonColors(palette, props);
-  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.foreground
-    },
-    secondary: {
-      bg: palette.background,
-      border: palette.foreground
-    },
-    success: {
-      bg: palette.background,
-      border: palette.success
-    },
-    warning: {
-      bg: palette.background,
-      border: palette.warning
-    },
-    error: {
-      bg: palette.background,
-      border: palette.error
-    },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5
-    },
-    'secondary-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'success-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'warning-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'error-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    })
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc'
-  };
-  if (loading) return _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-    color: 'transparent'
-  });
-  if (shadow) return defaultColor;
-  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, color) : colors[color]) || colors["default"];
-  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
-    color: hoverColor.color || hoverColor.border
-  });
-};
-var getButtonCursor = function getButtonCursor(disabled, loading) {
-  if (disabled) return {
-    cursor: 'not-allowed',
-    events: 'auto'
-  };
-  if (loading) return {
-    cursor: 'default',
-    events: 'none'
-  };
-  return {
-    cursor: 'pointer',
-    events: 'auto'
-  };
-};
-var getButtonDripColor = function getButtonDripColor(palette, props) {
-  var type = props.type;
-  var isLightHover = type ? type.endsWith('light') : false;
-  var hoverColors = getButtonHoverColors(palette, props);
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
-};
-
-var _excluded$8 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
-var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var buttonRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  });
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    dripShow = _useState2[0],
-    setDripShow = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dripX = _useState4[0],
-    setDripX = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    dripY = _useState6[0],
-    setDripY = _useState6[1];
-  var groupConfig = useButtonGroupContext();
-  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  var children = filteredProps.children,
-    _filteredProps$disabl = filteredProps.disabled,
-    disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl;
-    filteredProps.color;
-    var _filteredProps$loadin = filteredProps.loading,
-    loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
-    _filteredProps$shadow = filteredProps.shadow,
-    shadow = _filteredProps$shadow === void 0 ? false : _filteredProps$shadow,
-    _filteredProps$ghost = filteredProps.ghost,
-    ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
-    _filteredProps$effect = filteredProps.effect,
-    effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
-    _filteredProps$round = filteredProps.round,
-    round = _filteredProps$round === void 0 ? false : _filteredProps$round,
-    onClick = filteredProps.onClick,
-    _filteredProps$auto = filteredProps.auto,
-    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
-    icon = filteredProps.icon,
-    _filteredProps$type = filteredProps.type,
-    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
-    iconRight = filteredProps.iconRight,
-    _filteredProps$classN = filteredProps.className,
-    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
-    filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$8);
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-
-  var _useMemo = React.useMemo(function () {
-      return getButtonColors(theme.palette, filteredProps);
-    }, [theme.palette, filteredProps]),
-    bg = _useMemo.bg,
-    border = _useMemo.border,
-    color = _useMemo.color;
-  var hover = React.useMemo(function () {
-    return getButtonHoverColors(theme.palette, filteredProps);
-  }, [theme.palette, filteredProps]);
-  var _useMemo2 = React.useMemo(function () {
-      return getButtonCursor(disabled, loading);
-    }, [disabled, loading]),
-    cursor = _useMemo2.cursor,
-    events = _useMemo2.events;
-  var dripColor = React.useMemo(function () {
-    return getButtonDripColor(theme.palette, filteredProps);
-  }, [theme.palette, filteredProps]);
-
-  /* istanbul ignore next */
-  var dripCompletedHandle = function dripCompletedHandle() {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-  var clickHandler = function clickHandler(event) {
-    if (disabled || loading) return;
-    var showDrip = !shadow && !ghost && effect;
-    /* istanbul ignore next */
-    if (showDrip && buttonRef.current) {
-      var rect = buttonRef.current.getBoundingClientRect();
-      setDripShow(true);
-      setDripX(event.clientX - rect.left);
-      setDripY(event.clientY - rect.top);
-    }
-    onClick && onClick(event);
-  };
-  var childrenWithIcon = React.useMemo(function () {
-    return getButtonChildrenWithIcon(auto, children, {
-      icon: icon,
-      iconRight: iconRight
-    });
-  }, [auto, children, icon, iconRight]);
-  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
-    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
-  return /*#__PURE__*/React.createElement("button", _extends({
-    ref: buttonRef,
-    type: type,
-    disabled: disabled,
-    onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["1558010596", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
-  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
-    color: color
-  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
-    x: dripX,
-    y: dripY,
-    color: dripColor,
-    onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1558010596",
-    dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
-  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
-});
-ButtonComponent.displayName = 'Button';
-var Button = withScale(ButtonComponent);
-
-var getColors = function getColors(type, palette) {
-  var colors = {
-    "default": palette.background,
-    success: palette.success,
-    warning: palette.warning,
-    error: palette.error,
-    secondary: palette.secondary,
-    dark: palette.foreground,
-    lite: palette.background
-  };
-  var color = type === 'lite' || type === 'default' ? palette.foreground : palette.background;
-  return {
-    color: color,
-    bgColor: colors[type]
-  };
-};
-
-var defaultTooltipPosition = {
-  top: '-1000px',
-  left: '-1000px',
-  transform: 'none'
-};
-var getPosition = function getPosition(placement, rect, offset) {
-  var positions = {
-    top: {
-      top: "".concat(rect.top - offset, "px"),
-      left: "".concat(rect.left + rect.width / 2, "px"),
-      transform: 'translate(-50%, -100%)'
-    },
-    topStart: {
-      top: "".concat(rect.top - offset, "px"),
-      left: "".concat(rect.left, "px"),
-      transform: 'translate(0, -100%)'
-    },
-    topEnd: {
-      top: "".concat(rect.top - offset, "px"),
-      left: "".concat(rect.left + rect.width, "px"),
-      transform: 'translate(-100%, -100%)'
-    },
-    bottom: {
-      top: "".concat(rect.bottom + offset, "px"),
-      left: "".concat(rect.left + rect.width / 2, "px"),
-      transform: 'translate(-50%, 0)'
-    },
-    bottomStart: {
-      top: "".concat(rect.bottom + offset, "px"),
-      left: "".concat(rect.left, "px"),
-      transform: 'translate(0, 0)'
-    },
-    bottomEnd: {
-      top: "".concat(rect.bottom + offset, "px"),
-      left: "".concat(rect.left + rect.width, "px"),
-      transform: 'translate(-100%, 0)'
-    },
-    left: {
-      top: "".concat(rect.top + rect.height / 2, "px"),
-      left: "".concat(rect.left - offset, "px"),
-      transform: 'translate(-100%, -50%)'
-    },
-    leftStart: {
-      top: "".concat(rect.top, "px"),
-      left: "".concat(rect.left - offset, "px"),
-      transform: 'translate(-100%, 0)'
-    },
-    leftEnd: {
-      top: "".concat(rect.top + rect.height, "px"),
-      left: "".concat(rect.left - offset, "px"),
-      transform: 'translate(-100%, -100%)'
-    },
-    right: {
-      top: "".concat(rect.top + rect.height / 2, "px"),
-      left: "".concat(rect.right + offset, "px"),
-      transform: 'translate(0, -50%)'
-    },
-    rightStart: {
-      top: "".concat(rect.top, "px"),
-      left: "".concat(rect.right + offset, "px"),
-      transform: 'translate(0, 0)'
-    },
-    rightEnd: {
-      top: "".concat(rect.top + rect.height, "px"),
-      left: "".concat(rect.right + offset, "px"),
-      transform: 'translate(0, -100%)'
-    }
-  };
-  return positions[placement] || positions.top;
-};
-var getIconPosition = function getIconPosition(placement, offsetX, offsetY) {
-  var offsetAbsolute = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '3px';
-  var positions = {
-    top: {
-      top: 'auto',
-      right: 'auto',
-      left: '50%',
-      bottom: "".concat(offsetAbsolute),
-      transform: 'translate(-50%, 100%) rotate(-90deg)'
-    },
-    topStart: {
-      top: 'auto',
-      right: 'auto',
-      left: "".concat(offsetX),
-      bottom: "".concat(offsetAbsolute),
-      transform: 'translate(0, 100%) rotate(-90deg)'
-    },
-    topEnd: {
-      top: 'auto',
-      right: "".concat(offsetX),
-      left: 'auto',
-      bottom: "".concat(offsetAbsolute),
-      transform: 'translate(0, 100%) rotate(-90deg)'
-    },
-    bottom: {
-      top: "".concat(offsetAbsolute),
-      right: 'auto',
-      left: '50%',
-      bottom: 'auto',
-      transform: 'translate(-50%, -100%) rotate(90deg)'
-    },
-    bottomStart: {
-      top: "".concat(offsetAbsolute),
-      right: 'auto',
-      left: "".concat(offsetX),
-      bottom: 'auto',
-      transform: 'translate(0, -100%) rotate(90deg)'
-    },
-    bottomEnd: {
-      top: "".concat(offsetAbsolute),
-      right: "".concat(offsetX),
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(0, -100%) rotate(90deg)'
-    },
-    left: {
-      top: '50%',
-      right: '0',
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(100%, -50%) rotate(180deg)'
-    },
-    leftStart: {
-      top: "".concat(offsetY),
-      right: '0',
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(100%, -50%) rotate(180deg)'
-    },
-    leftEnd: {
-      top: 'auto',
-      right: '0',
-      left: 'auto',
-      bottom: "".concat(offsetY),
-      transform: 'translate(100%, 50%) rotate(180deg)'
-    },
-    right: {
-      top: '50%',
-      right: 'auto',
-      left: '0',
-      bottom: 'auto',
-      transform: 'translate(-100%, -50%) rotate(0deg)'
-    },
-    rightStart: {
-      top: "".concat(offsetY),
-      right: 'auto',
-      left: '0',
-      bottom: 'auto',
-      transform: 'translate(-100%, -50%) rotate(0deg)'
-    },
-    rightEnd: {
-      top: 'auto',
-      right: 'auto',
-      left: '0',
-      bottom: "".concat(offsetY),
-      transform: 'translate(-100%, 50%) rotate(0deg)'
+    onMouseLeave: function onMouseLeave() {
+      return setShowMore(false);
     }
-  };
-  return positions[placement] || positions.top;
-};
-
-var TooltipIcon = function TooltipIcon(_ref) {
-  var placement = _ref.placement,
-    shadow = _ref.shadow;
-  var theme = useTheme();
-  var _useMemo = React.useMemo(function () {
-      return getIconPosition(placement, 'var(--tooltip-icon-offset-x)', 'var(--tooltip-icon-offset-y)');
-    }, [placement]),
-    transform = _useMemo.transform,
-    top = _useMemo.top,
-    left = _useMemo.left,
-    right = _useMemo.right,
-    bottom = _useMemo.bottom;
-  var bgColorWithDark = React.useMemo(function () {
-    if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)';
-    return theme.palette.accents_2;
-  }, [theme.type, shadow]);
-  return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2440507693", [bgColorWithDark, left, top, right, bottom, transform]]])
-  }, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2440507693",
-    dynamic: [bgColorWithDark, left, top, right, bottom, transform]
-  }, "span.__jsx-style-dynamic-selector{width:0;height:0;border-style:solid;border-width:6px 7px 6px 0;border-color:transparent ".concat(bgColorWithDark, " transparent transparent;position:absolute;left:").concat(left, ";top:").concat(top, ";right:").concat(right, ";bottom:").concat(bottom, ";-webkit-transform:").concat(transform, ";-ms-transform:").concat(transform, ";transform:").concat(transform, ";}")));
-};
-
-var defaultRect = {
-  top: -1e3,
-  left: -1e3,
-  right: -1e3,
-  bottom: -1e3,
-  width: 0,
-  height: 0
-};
-var getRect = function getRect(ref) {
-  if (!ref || !ref.current) return defaultRect;
-  var rect = ref.current.getBoundingClientRect();
-  return _objectSpread2(_objectSpread2({}, rect), {}, {
-    width: rect.width || rect.right - rect.left,
-    height: rect.height || rect.bottom - rect.top,
-    top: rect.top + document.documentElement.scrollTop,
-    bottom: rect.bottom + document.documentElement.scrollTop,
-    left: rect.left + document.documentElement.scrollLeft,
-    right: rect.right + document.documentElement.scrollLeft
-  });
-};
-
-var TooltipContent = function TooltipContent(_ref) {
-  var children = _ref.children,
-    parent = _ref.parent,
-    visible = _ref.visible,
-    offset = _ref.offset,
-    iconOffset = _ref.iconOffset,
-    placement = _ref.placement,
-    type = _ref.type,
-    className = _ref.className,
-    hideArrow = _ref.hideArrow;
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var el = usePortal('tooltip');
-  var selfRef = React.useRef(null);
-  var _useState = React.useState(defaultTooltipPosition),
-    _useState2 = _slicedToArray(_useState, 2),
-    rect = _useState2[0],
-    setRect = _useState2[1];
-  var colors = React.useMemo(function () {
-    return getColors(type, theme.palette);
-  }, [type, theme.palette]);
-  var hasShadow = type === 'default';
-  var classes = useClasses('tooltip-content', className);
-  if (!parent) return null;
-  var updateRect = function updateRect() {
-    var position = getPosition(placement, getRect(parent), offset);
-    setRect(position);
-  };
-  useResize(updateRect);
-  useClickAnyWhere(function () {
-    return updateRect();
-  });
-  React.useEffect(function () {
-    updateRect();
-  }, [visible]);
-  var preventHandler = function preventHandler(event) {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-  };
-  if (!el) return null;
-  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(CssTransition, {
-    visible: visible
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: selfRef,
-    onClick: preventHandler,
-    className: _JSXStyle.dynamic([["2387841858", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2387841858", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + "inner"
-  }, !hideArrow && /*#__PURE__*/React.createElement(TooltipIcon, {
-    placement: placement,
-    shadow: hasShadow
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2387841858",
-    dynamic: [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]
-  }, ".tooltip-content.__jsx-style-dynamic-selector{--tooltip-icon-offset-x:".concat(iconOffset.x, ";--tooltip-icon-offset-y:").concat(iconOffset.y, ";--tooltip-content-bg:").concat(colors.bgColor, ";box-sizing:border-box;position:absolute;top:").concat(rect.top, ";left:").concat(rect.left, ";-webkit-transform:").concat(rect.transform, ";-ms-transform:").concat(rect.transform, ";transform:").concat(rect.transform, ";background-color:var(--tooltip-content-bg);color:").concat(colors.color, ";border-radius:").concat(theme.layout.radius, ";padding:0;z-index:1000;box-shadow:").concat(hasShadow ? theme.expressiveness.shadowMedium : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.inner.__jsx-style-dynamic-selector{box-sizing:border-box;position:relative;font-size:").concat(SCALES.font(1), ";padding:").concat(SCALES.pt(0.65), " ").concat(SCALES.pr(0.9), " ").concat(SCALES.pb(0.65), " ").concat(SCALES.pl(0.9), ";height:100%;}")))), el);
+  }, showMore ? /*#__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([["2928474255", [isBefore ? '180deg' : '0deg']]]) + " " + "more"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13 17l5-5-5-5",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 17l5-5-5-5",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  })) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "19",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "5",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2928474255",
+    dynamic: [isBefore ? '180deg' : '0deg']
+  }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
 };
+PaginationEllipsis.displayName = 'PaginationEllipsis';
 
-/* "use client" */
-
-var useClickAway = function useClickAway(ref, handler) {
-  var handlerRef = React.useRef(handler);
-  React.useEffect(function () {
-    handlerRef.current = handler;
-  }, [handler]);
-  React.useEffect(function () {
-    var callback = function callback(event) {
-      var el = ref.current;
-      if (!event || !el || el.contains(event.target)) return;
-      handlerRef.current(event);
-    };
-    document.addEventListener('click', callback);
-    return function () {
-      return document.removeEventListener('click', callback);
-    };
-  }, [ref]);
+var PaginationPages = function PaginationPages(_ref) {
+  var limit = _ref.limit,
+    count = _ref.count,
+    current = _ref.current,
+    setPage = _ref.setPage;
+  var showPages = React.useMemo(function () {
+    var oddLimit = limit % 2 === 0 ? limit - 1 : limit;
+    return oddLimit - 2;
+  }, [limit]);
+  var middleNumber = (showPages + 1) / 2;
+  var _useMemo = React.useMemo(function () {
+      var showEllipsis = count > limit;
+      return [showEllipsis && current > middleNumber + 1, showEllipsis && current < count - middleNumber];
+    }, [current, showPages, middleNumber, count, limit]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    showBeforeEllipsis = _useMemo2[0],
+    showAfterEllipsis = _useMemo2[1];
+  var pagesArray = React.useMemo(function () {
+    return _toConsumableArray(new Array(showPages));
+  }, [showPages]);
+  var renderItem = React.useCallback(function (value, active) {
+    return /*#__PURE__*/React.createElement(PaginationItem, {
+      key: "pagination-item-".concat(value),
+      active: value === active,
+      onClick: function onClick() {
+        return setPage(value);
+      }
+    }, value);
+  }, []);
+  var startPages = pagesArray.map(function (_, index) {
+    var value = index + 2;
+    return renderItem(value, current);
+  });
+  var middlePages = pagesArray.map(function (_, index) {
+    var middleIndexNumber = middleNumber - (index + 1);
+    var value = current - middleIndexNumber;
+    return /*#__PURE__*/React.createElement(PaginationItem, {
+      key: "pagination-middle-".concat(index),
+      active: index + 1 === middleNumber,
+      onClick: function onClick() {
+        return setPage(value);
+      }
+    }, value);
+  });
+  var endPages = pagesArray.map(function (_, index) {
+    var value = count - (showPages - index);
+    return renderItem(value, current);
+  });
+  if (count <= limit) {
+    /* eslint-disable react/jsx-no-useless-fragment */
+    return /*#__PURE__*/React.createElement(React.Fragment, null, _toConsumableArray(new Array(count)).map(function (_, index) {
+      var value = index + 1;
+      return /*#__PURE__*/React.createElement(PaginationItem, {
+        key: "pagination-item-".concat(value),
+        active: value === current,
+        onClick: function onClick() {
+          return setPage(value);
+        }
+      }, value);
+    }));
+    /* eslint-enable */
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderItem(1, current), showBeforeEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
+    key: "pagination-ellipsis-before",
+    isBefore: true,
+    onClick: function onClick() {
+      return setPage(function (last) {
+        return last - 5 >= 1 ? last - 5 : 1;
+      });
+    }
+  }), showBeforeEllipsis && showAfterEllipsis ? middlePages : showBeforeEllipsis ? endPages : startPages, showAfterEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
+    key: "pagination-ellipsis-after",
+    onClick: function onClick() {
+      return setPage(function (last) {
+        return last + 5 <= count ? last + 5 : count;
+      });
+    }
+  }), renderItem(count, current));
 };
+PaginationPages.displayName = 'PaginationPages';
 
-var _excluded$7 = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
-var TooltipComponent = function TooltipComponent(_ref) {
-  var children = _ref.children,
-    _ref$initialVisible = _ref.initialVisible,
-    initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
-    text = _ref.text,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 12 : _ref$offset,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
-    _ref$portalClassName = _ref.portalClassName,
-    portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
-    _ref$enterDelay = _ref.enterDelay,
-    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-    _ref$leaveDelay = _ref.leaveDelay,
-    leaveDelay = _ref$leaveDelay === void 0 ? 150 : _ref$leaveDelay,
-    _ref$trigger = _ref.trigger,
-    trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+var _excluded$5 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
+var PaginationComponent = function PaginationComponent(_ref) {
+  var customPage = _ref.page,
+    _ref$initialPage = _ref.initialPage,
+    initialPage = _ref$initialPage === void 0 ? 1 : _ref$initialPage,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 1 : _ref$count,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? 7 : _ref$limit,
+    children = _ref.children,
+    onChange = _ref.onChange,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$onVisibleChange = _ref.onVisibleChange,
-    onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
-    _ref$hideArrow = _ref.hideArrow,
-    hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
-    customVisible = _ref.visible,
-    props = _objectWithoutProperties(_ref, _excluded$7);
-  var timer = React.useRef();
-  var ref = React.useRef(null);
-  var _useState = React.useState(initialVisible),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var iconOffset = React.useMemo(function () {
-    if (!(ref !== null && ref !== void 0 && ref.current)) return {
-      x: '0.75em',
-      y: '0.75em'
-    };
-    var rect = getRect(ref);
-    return {
-      x: "".concat(rect.width ? rect.width / 2 : 0, "px"),
-      y: "".concat(rect.height ? rect.height / 2 : 0, "px")
-    };
-  }, [ref === null || ref === void 0 ? void 0 : ref.current]);
-  var contentProps = {
-    type: type,
-    visible: visible,
-    offset: offset,
-    placement: placement,
-    hideArrow: hideArrow,
-    iconOffset: iconOffset,
-    parent: ref,
-    className: portalClassName
-  };
-  var changeVisible = function changeVisible(nextState) {
-    var clear = function clear() {
-      clearTimeout(timer.current);
-      timer.current = undefined;
-    };
-    var handler = function handler(nextState) {
-      setVisible(nextState);
-      onVisibleChange(nextState);
-      clear();
-    };
-    clear();
-    if (nextState) {
-      timer.current = window.setTimeout(function () {
-        return handler(true);
-      }, enterDelay);
-      return;
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useCurrentState = useCurrentState(initialPage),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    page = _useCurrentState2[0],
+    setPage = _useCurrentState2[1],
+    pageRef = _useCurrentState2[2];
+  var _pickChild = pickChild(children, PaginationPrevious),
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    prevChildren = _pickChild2[1];
+  var _pickChild3 = pickChild(children, PaginationNext),
+    _pickChild4 = _slicedToArray(_pickChild3, 2),
+    nextChildren = _pickChild4[1];
+  var _useMemo = React.useMemo(function () {
+      var hasChildren = function hasChildren(c) {
+        return React.Children.count(c) > 0;
+      };
+      var prevDefault = /*#__PURE__*/React.createElement(PaginationPrevious, null, "prev");
+      var nextDefault = /*#__PURE__*/React.createElement(PaginationNext, null, "next");
+      return [hasChildren(prevChildren) ? prevChildren : prevDefault, hasChildren(nextChildren) ? nextChildren : nextDefault];
+    }, [prevChildren, nextChildren]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    prevItem = _useMemo2[0],
+    nextItem = _useMemo2[1];
+  var update = function update(type) {
+    if (type === 'prev' && pageRef.current > 1) {
+      setPage(function (last) {
+        return last - 1;
+      });
+    }
+    if (type === 'next' && pageRef.current < count) {
+      setPage(function (last) {
+        return last + 1;
+      });
     }
-    var leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay;
-    timer.current = window.setTimeout(function () {
-      return handler(false);
-    }, leaveDelayWithoutClick);
-  };
-  var mouseEventHandler = function mouseEventHandler(next) {
-    return trigger === 'hover' && changeVisible(next);
-  };
-  var clickEventHandler = function clickEventHandler() {
-    return trigger === 'click' && changeVisible(!visible);
   };
-  useClickAway(ref, function () {
-    return trigger === 'click' && changeVisible(false);
-  });
+  var values = React.useMemo(function () {
+    return {
+      isFirst: page <= 1,
+      isLast: page >= count,
+      update: update
+    };
+  }, [page, count]);
   React.useEffect(function () {
-    if (customVisible === undefined) return;
-    changeVisible(customVisible);
-  }, [customVisible]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    onClick: clickEventHandler,
-    onMouseEnter: function onMouseEnter() {
-      return mouseEventHandler(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return mouseEventHandler(false);
+    onChange && onChange(page);
+  }, [page]);
+  React.useEffect(function () {
+    if (customPage !== undefined) {
+      setPage(customPage);
     }
-  }, props, {
-    className: "jsx-418573366" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
-  }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "418573366"
-  }, ".tooltip.jsx-418573366{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
+  }, [customPage]);
+  return /*#__PURE__*/React.createElement(PaginationContext.Provider, {
+    value: values
+  }, /*#__PURE__*/React.createElement("nav", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3826701357", [SCALES.font(2), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), prevItem, /*#__PURE__*/React.createElement(PaginationPages, {
+    count: count,
+    current: page,
+    limit: limit,
+    setPage: setPage
+  }), nextItem), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3826701357",
+    dynamic: [SCALES.font(2), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "nav.__jsx-style-dynamic-selector{font-variant:tabular-nums;font-feature-settings:'tnum';--pagination-size:".concat(SCALES.font(2), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector button:last-of-type{margin-right:0;}")));
 };
-TooltipComponent.displayName = 'Tooltip';
-var Tooltip = withScale(TooltipComponent);
+PaginationComponent.displayName = 'Pagination';
+var Pagination = withScale(PaginationComponent);
 
-/* "use client" */
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
 
-var defaultContext$1 = {
-  disableItemsAutoClose: false,
-  onItemClick: function onItemClick() {}
-};
-var PopoverContext = /*#__PURE__*/React.createContext(defaultContext$1);
-var usePopoverContext = function usePopoverContext() {
-  return React.useContext(PopoverContext);
+var ButtonDrip = function ButtonDrip(_ref) {
+  var _ref$x = _ref.x,
+    x = _ref$x === void 0 ? 0 : _ref$x,
+    _ref$y = _ref.y,
+    y = _ref$y === void 0 ? 0 : _ref$y,
+    color = _ref.color,
+    onCompleted = _ref.onCompleted;
+  var dripRef = React.useRef(null);
+  /* istanbul ignore next */
+  var top = Number.isNaN(+y) ? 0 : y - 10;
+  /* istanbul ignore next */
+  var left = Number.isNaN(+x) ? 0 : x - 10;
+  React.useEffect(function () {
+    /* istanbul ignore next */
+    if (!dripRef.current) return;
+    dripRef.current.addEventListener('animationend', onCompleted);
+    return function () {
+      /* istanbul ignore next */
+      if (!dripRef.current) return;
+      dripRef.current.removeEventListener('animationend', onCompleted);
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dripRef,
+    className: "jsx-3424889537" + " " + "drip"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    style: {
+      top: top,
+      left: left
+    },
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "10",
+    className: "jsx-3424889537"
+  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3424889537"
+  }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
 };
+ButtonDrip.displayName = 'ButtonDrip';
 
-var _excluded$6 = ["child", "children", "enterDelay", "leaveDelay", "offset", "type", "trigger", "placement", "initialVisible", "portalClassName", "disableItemsAutoClose", "onVisibleChange", "visible"];
-var PopoverComponent = function PopoverComponent(_ref) {
-  var child = _ref.child,
-    children = _ref.children,
-    _ref$enterDelay = _ref.enterDelay,
-    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-    _ref$leaveDelay = _ref.leaveDelay,
-    leaveDelay = _ref$leaveDelay === void 0 ? 150 : _ref$leaveDelay,
-    _ref$offset = _ref.offset,
-    offset = _ref$offset === void 0 ? 12 : _ref$offset,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    _ref$trigger = _ref.trigger,
-    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-    _ref$initialVisible = _ref.initialVisible,
-    initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
-    _ref$portalClassName = _ref.portalClassName,
-    portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
-    _ref$disableItemsAuto = _ref.disableItemsAutoClose,
-    disableItemsAutoClose = _ref$disableItemsAuto === void 0 ? false : _ref$disableItemsAuto,
-    _ref$onVisibleChange = _ref.onVisibleChange,
-    onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
-    customVisible = _ref.visible,
-    props = _objectWithoutProperties(_ref, _excluded$6);
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useState = React.useState(initialVisible),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var textNode = React.useMemo(function () {
-    return getReactNode(child);
-  }, [child]);
-  var onChildClick = function onChildClick() {
-    onPopoverVisibleChange(false);
-  };
-  var value = React.useMemo(function () {
-    return {
-      onItemClick: onChildClick,
-      disableItemsAutoClose: disableItemsAutoClose
-    };
-  }, [disableItemsAutoClose]);
-  var classes = useClasses('popover', portalClassName);
-  var onPopoverVisibleChange = function onPopoverVisibleChange(next) {
-    setVisible(next);
-    onVisibleChange(next);
+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
   };
-  React.useEffect(function () {
-    if (customVisible === undefined) return;
-    onPopoverVisibleChange(customVisible);
-  }, [customVisible]);
-  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
-    value: value
-  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    type: type,
-    enterDelay: enterDelay,
-    leaveDelay: leaveDelay,
-    offset: offset,
-    text: textNode,
-    trigger: trigger,
-    placement: placement,
-    portalClassName: classes,
-    visible: visible,
-    onVisibleChange: onPopoverVisibleChange
-  }, props), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "622655983",
-    dynamic: [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)]
-  }, ".tooltip-content.popover > .inner{padding:".concat(SCALES.pt(0.9), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.9), " ").concat(SCALES.pl(0), ";}"))));
+  return color ? color : colors[type];
 };
-PopoverComponent.displayName = 'Popover';
-var Popover = withScale(PopoverComponent);
-
-var _excluded$5 = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
-var PopoverItemComponent = function PopoverItemComponent(_ref) {
+var LoadingComponent = function LoadingComponent(_ref) {
   var children = _ref.children,
-    _ref$line = _ref.line,
-    line = _ref$line === void 0 ? false : _ref$line,
-    _ref$showTitle = _ref.showTitle,
-    showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    color = _ref.color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    onClick = _ref.onClick,
-    _ref$selected = _ref.selected,
-    selected = _ref$selected === void 0 ? false : _ref$selected,
-    _ref$disableAutoClose = _ref.disableAutoClose,
-    disableAutoClose = _ref$disableAutoClose === void 0 ? false : _ref$disableAutoClose,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    _ref$spaceRatio = _ref.spaceRatio,
+    spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  var _usePopoverContext = usePopoverContext(),
-    disableItemsAutoClose = _usePopoverContext.disableItemsAutoClose,
-    onItemClick = _usePopoverContext.onItemClick;
-  var hasHandler = Boolean(onClick);
-  var dontCloseByClick = disableAutoClose || disableItemsAutoClose || showTitle || line;
-  var classes = useClasses('item', {
-    line: line,
-    showTitle: showTitle
+  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 = 'ButtonLoading';
+
+var _excluded$3 = ["isRight", "isSingle", "children", "className"];
+var ButtonIcon = function ButtonIcon(_ref) {
+  var _ref$isRight = _ref.isRight,
+    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
+    isSingle = _ref.isSingle,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  var classes = useClasses('icon', {
+    right: isRight,
+    single: isSingle
   }, className);
-  var clickHandler = function clickHandler(event) {
-    onClick && onClick(event);
-    if (dontCloseByClick) {
-      return event.stopPropagation();
-    }
-    onItemClick(event);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
-    style: {
-      backgroundColor: selected ? '#efefef' : ''
-    },
-    onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "190621384",
-    dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]
-  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;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;color:".concat(theme.palette.accents_5, ";-webkit-transition:color,background-color 150ms linear;transition:color,background-color 150ms linear;line-height:1.25em;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.75), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.75), ";cursor:").concat(hasHandler ? 'pointer' : 'default', ";}.item.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:").concat(theme.palette.border, ";height:").concat(SCALES.height(0.0625), ";margin:").concat(SCALES.mt(0.35), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.35), " ").concat(SCALES.ml(0), ";width:").concat(SCALES.width(1, '100%'), ";}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:").concat(SCALES.font(0.925), ";color:").concat(theme.palette.foreground, ";}"))), showTitle && /*#__PURE__*/React.createElement(PopoverItem, {
-    line: true,
-    showTitle: false
-  }));
+    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
+  });
 };
-PopoverItemComponent.displayName = 'PopoverItem';
-var PopoverItem = withScale(PopoverItemComponent);
 
 /* "use client" */
-Popover.Item = PopoverItem;
-Popover.Option = PopoverItem;
-
-// import Input from '../input';
-// import Select from '../select';
-
-function DataTable(_ref) {
-  var _ref$cols = _ref.cols,
-    cols = _ref$cols === void 0 ? [] : _ref$cols,
-    _ref$rows = _ref.rows,
-    rows = _ref$rows === void 0 ? [] : _ref$rows,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$heading = _ref.heading,
-    heading = _ref$heading === void 0 ? [] : _ref$heading,
-    _ref$filter = _ref.filter,
-    filter = _ref$filter === void 0 ? true : _ref$filter,
-    menu = _ref.menu,
-    _ref$sideMenu = _ref.sideMenu,
-    sideMenu = _ref$sideMenu === void 0 ? false : _ref$sideMenu,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    children = _ref.children,
-    _ref$onBack = _ref.onBack,
-    onBack = _ref$onBack === void 0 ? function () {
-      window.history.back();
-    } : _ref$onBack,
-    onRefresh = _ref.onRefresh,
-    _onFilters = _ref.onFilters,
-    onSelectedDelete = _ref.onSelectedDelete,
-    onSelectedEdit = _ref.onSelectedEdit,
-    onSelected = _ref.onSelected,
-    _ref$disableViewColum = _ref.disableViewColumn,
-    disableViewColumn = _ref$disableViewColum === void 0 ? false : _ref$disableViewColum,
-    _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
-    onDragOver = _ref.onDragOver,
-    onDragEnter = _ref.onDragEnter,
-    onDragLeave = _ref.onDragLeave,
-    onDrop = _ref.onDrop,
-    onRowClick = _ref.onRowClick,
-    dataLength = _ref.dataLength,
-    viewLength = _ref.viewLength,
-    _onPageChange = _ref.onPageChange,
-    _ref$disableMenu = _ref.disableMenu,
-    disableMenu = _ref$disableMenu === void 0 ? false : _ref$disableMenu,
-    _ref$cursorPagination = _ref.cursorPagination,
-    cursorPagination = _ref$cursorPagination === void 0 ? false : _ref$cursorPagination,
-    previousCursor = _ref.previousCursor,
-    nextCursor = _ref.nextCursor,
-    _ref$hasMore = _ref.hasMore,
-    hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
-    _ref$stickyHeader = _ref.stickyHeader,
-    stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
-    onNextPage = _ref.onNextPage,
-    onPreviousPage = _ref.onPreviousPage;
-  var TABLE_ID = _.uniqueId('tbl');
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    hideColumn = _useState2[0],
-    setHideColumn = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    openFilter = _useState4[0],
-    setOpenFilter = _useState4[1];
-  // const [anchorEl, setAnchorEl] = useState(null);
-  var _useState5 = React.useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selected = _useState6[0],
-    setSelected = _useState6[1];
-
-  // const [table_filters] = useDebounce(filters, 500);
-  var COLUMNS = cols.filter(function (col) {
-    var _String;
-    var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
-    return !hideColumn.includes(dataName);
-  });
 
-  // State for filter values
-  // const [filterValues, setFilterValues] = useState(
-  //     COLUMNS.reduce((acc, col) => {
-  //         acc[col.filter] = '';
-  //         return acc;
-  //     }, {})
-  // );
+var defaultContext = {
+  isButtonGroup: false,
+  disabled: false
+};
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext);
+var useButtonGroupContext = function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
+};
 
-  function handleShowFilter() {
-    return setOpenFilter(!openFilter);
-  }
-  React.useEffect(function () {
-    cols.forEach(function (col) {
-      if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[data-column=\"".concat(col.id, "\"]")).forEach(function (el) {
-          el.style.display = 'none !important';
-        });
-      } else {
-        document.querySelectorAll("[data-column=\"".concat(col.id, "\"]")).forEach(function (el) {
-          el.style.display = '';
-        });
-      }
-    });
-  }, [hideColumn, cols]);
-  function handleHideColumnClick(_event, _id) {
-    var _String2;
-    var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
-    var selectedIndex = hideColumn.indexOf(id);
-    var newSelected = [];
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(hideColumn, id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(hideColumn.slice(1));
-    } else if (selectedIndex === hideColumn.length - 1) {
-      newSelected = newSelected.concat(hideColumn.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
+var getButtonGhostColors = function getButtonGhostColors(palette, _color) {
+  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
     }
-    setHideColumn(newSelected);
-  }
-
-  // Children change reset selected
-  React.useEffect(function () {
-    setSelected([]);
-  }, [children]);
-
-  // const tableHeadStyle = {
-  //     position: 'sticky',
-  //     // backgroundColor: '#fafafb',
-  //     // boxShadow: '0 2px 2px -1px rgba(0, 0, 0, 0.4)',
-  //     top: 0,
-  //     zIndex: 9,
-  //     '& .MuiTableCell-root': {
-  //         fontSize: '14px !important',
-  //         py: 0.2
-  //     }
-  //     // ...borderStyle
-  // };
-
-  // const borderStyle = {
-  //     '& .MuiTableCell-root': {
-  //         py: 0.2,
-  //         px: 1
-  //         // borderLeft: '1px solid #ccc !important',
-  //         // borderRight: '1px solid #ccc !important'
-  //     },
-  //     '& td:first-of-type': {
-  //         borderLeft: 'none !important'
-  //     },
-  //     '& td:last-child': {
-  //         borderRight: 'none !important'
-  //     }
-  //     // '& tr': { borderBottom: '1px solid #ccc !important' }
-  // };
-
-  // const handleFilterChange = (name: string, value?: any) => {
-  //     setFilterValues({ ...filterValues, [name]: value });
-  // };
-
-  // const generateFilterInputs = () => {
-  //     return COLUMNS.map((col) => {
-  //         const { name: Header, filter: accessor, options } = col;
-  //         const filterName = String(col?.name)?.replace(' ', '_').toLowerCase();
-  //         // const unq_accessor = _.uniqueId(filterName);
-  //         // if (Header === 'actions') {
-  //         //   return (
-  //         //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
-  //         //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
-  //         //     </th>
-  //         //   )
-  //         // }
-  //         return (
-  //             <Popover.Item style={{ padding: '3px' }} data-column={Header}>
-  //                 {accessor === 'fixed' && (
-  //                     <Select
-  //                         // key={filterName}
-  //                         name={filterName}
-  //                         value={filterValues[filterName] ?? 'All'}
-  //                         onChange={(newValue) => handleFilterChange(filterName, newValue)}
-  //                     >
-  //                         <Select.Option value="All">All {Header}</Select.Option>
-  //                         {options ? options.map((option: any) => (
-  //                             <Select.Option value={option.value}>{option.name}</Select.Option>
-  //                         )) : null}
-  //                     </Select>
-  //                 )}
-  //                 {accessor === 'date' && (
-  //                     <Input
-  //                         // id={`filter-date-${filterName}`}
-  //                         // key={filterName}
-  //                         type="date"
-  //                         name={filterName}
-  //                         value={filterValues[filterName]}
-  //                         onChange={(e) => handleFilterChange(filterName, e.target.value)}
-  //                     />
-  //                 )}
-  //                 {accessor === 'search' && (
-  //                     <Input
-  //                         // id={`filter-search-${filterName}`}
-  //                         // key={filterName}
-  //                         type="text"
-  //                         autoComplete="off"
-  //                         // ref={filterRefs.current[filterName]} // Dynamically set ref}
-  //                         name={filterName}
-  //                         style={{ height: 30, minWidth: 160 }}
-  //                         value={filterValues[filterName]}
-  //                         onChange={(e) => handleFilterChange(filterName, e.target.value)}
-  //                         placeholder="Search..."
-  //                         fullWidth
-  //                     />
-  //                 )}
-  //             </Popover.Item>
-  //         );
-  //     });
-  // };
-
-  var content = function content() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, _index) {
-      // const colunqid = _.uniqueId(`${option.name}-${index}`);
-      var isSelected = !hideColumn.includes(option.id);
-      return /*#__PURE__*/React.createElement(Popover.Item, {
-        selected: isSelected
-        // key={colunqid}
-        ,
-        onClick: function onClick(e) {
-          return handleHideColumnClick(e, option.id);
-        }
-      }, /*#__PURE__*/React.createElement("span", null, option.name));
-    }));
   };
-
-  // const filterContent = () => (
-  //     <>
-  //         {generateFilterInputs()}
-  //         <Popover.Item>
-  //             <Button onClick={() => {
-  //                 if (onFilters) {
-  //                     onFilters(filterValues)
-  //                 }
-  //             }}>Apply</Button></Popover.Item></>
-  // )
-
-  var SELECTED = React.useMemo(function () {
-    if (onSelected) {
-      return onSelected(selected);
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  }, [selected]);
-  return /*#__PURE__*/React.createElement(GridContainer, {
-    className: "helpdice-ui-data-table-container",
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Grid.Container, {
-    style: {
-      marginBottom: '0.5rem',
-      marginTop: '0.5rem'
-    }
-  }, heading && /*#__PURE__*/React.createElement(Grid, {
-    sm: disableMenu ? 24 : 12,
-    xs: 24
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '1rem',
-      fontSize: 'larger'
-    }
-  }, children && /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(ArrowLeft$1, null),
-    onClick: onBack
-  }), heading)), !disableMenu && /*#__PURE__*/React.createElement(Grid, {
-    sm: 12,
-    xs: 24
-  }, /*#__PURE__*/React.createElement(GridContainer, {
-    width: "100%",
-    style: {
-      margin: 0,
-      gap: '0.6rem'
+  return colors[_color] || null;
+};
+var getButtonColors = function getButtonColors(palette, props) {
+  var color = props.color,
+    disabled = props.disabled,
+    ghost = props.ghost;
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.border,
+      color: palette.accents_5
     },
-    justify: "flex-end",
-    alignContent: "center"
-  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, (selected === null || selected === void 0 ? void 0 : selected.length) > 0 && SELECTED, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Edit Selected",
-    placement: "bottom",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return onSelectedEdit(selected[0]);
+    secondary: {
+      bg: palette.foreground,
+      border: palette.foreground,
+      color: palette.background
     },
-    iconRight: /*#__PURE__*/React.createElement(Edit, null),
-    auto: true,
-    type: "button",
-    scale: 2 / 3,
-    px: 0.6
-  })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Delete Selected",
-    placement: "bottom",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return onSelectedDelete(selected);
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: '#fff'
     },
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    type: "button",
-    iconRight: /*#__PURE__*/React.createElement(Delete$1, null)
-  })) : null, onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Refresh",
-    placement: "bottom",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    onClick: function onClick() {
-      return onRefresh();
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: '#fff'
     },
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(Refresh$1, null)
-  })) : null, _onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Columns",
-    placement: "bottomEnd",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    onClick: handleShowFilter,
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(Filters, null)
-  })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Columns",
-    placement: "bottomEnd",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    disableItemsAutoClose: true,
-    placement: "bottomEnd",
-    child: content
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    onClick: function onClick() {},
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(Columns$1, null)
-  })))) : null))), children ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '1rem'
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: '#fff'
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
     }
-  }, children) : /*#__PURE__*/React.createElement("div", {
-    style: {
-      gap: 5,
-      display: 'flex',
-      flexDirection: sideMenu ? 'row' : 'column'
+  };
+  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 = color === null || color === void 0 ? void 0 : color.replace('-light', '');
+  var defaultColor = colors["default"];
+  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _color) {
+  var colors = {
+    secondary: {
+      bg: palette.foreground,
+      border: palette.background,
+      color: palette.background
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: 'white'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: 'white'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: 'white'
     }
-  }, sideMenu ? /*#__PURE__*/React.createElement(GridContainer, {
-    direction: "column",
-    style: {
-      width: '15rem',
-      gap: 5,
-      padding: '0.5rem 0.7rem',
-      border: '1px solid #cfcfcf',
-      borderRadius: '5px'
-    }
-  }, sideMenu) : null, /*#__PURE__*/React.createElement("div", {
-    onDragOver: onDragOver,
-    onDragEnter: onDragEnter,
-    onDragLeave: onDragLeave,
-    onDrop: onDrop,
-    id: TABLE_ID,
-    className: "helpdice-ui-table-container",
-    style: _objectSpread2({
-      position: 'relative',
-      overflowY: 'auto',
-      maxWidth: 'calc(100vw - 1.5rem)',
-      width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
-    }, style)
-  }, /*#__PURE__*/React.createElement(Table, {
-    stickyHeader: stickyHeader,
-    readOnly: readOnly,
-    cursorPagination: cursorPagination,
-    previousCursor: previousCursor,
-    nextCursor: nextCursor,
-    hasMore: hasMore,
-    onNextPage: onNextPage,
-    onPreviousPage: onPreviousPage,
-    dataLength: dataLength,
-    viewLength: viewLength,
-    onPageChange: function onPageChange(page, start, end) {
-      if (_onPageChange) {
-        _onPageChange(page, start, end);
-      }
+  };
+  var withoutLightType = _color === null || _color === void 0 ? void 0 : _color.replace('-light', '');
+  return colors[withoutLightType] || null;
+};
+var getButtonHoverColors = function getButtonHoverColors(palette, props) {
+  var color = props.color,
+    disabled = props.disabled,
+    loading = props.loading,
+    shadow = props.shadow,
+    ghost = props.ghost;
+  var defaultColor = getButtonColors(palette, props);
+  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.foreground
     },
-    onFilters: function onFilters(filters) {
-      if (_onFilters) {
-        _onFilters(filters);
-      }
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground
     },
-    onRow: onRowClick,
-    rowDraggable: rowDraggable,
-    showFilters: openFilter,
-    onSelected: function onSelected(selected) {
-      return setSelected(selected);
+    success: {
+      bg: palette.background,
+      border: palette.success
     },
-    data: rows,
-    style: {
-      borderCollapse: 'collapse',
-      overflow: 'auto'
-    }
-  }, COLUMNS.map(function (column) {
-    return /*#__PURE__*/React.createElement(Table.Column, {
-      style: column === null || column === void 0 ? void 0 : column.style,
-      options: column === null || column === void 0 ? void 0 : column.options,
-      fontSize: column === null || column === void 0 ? void 0 : column.fontSize,
-      prop: column.id,
-      label: column.name,
-      filter: column === null || column === void 0 ? void 0 : column.filter,
-      noWrap: column === null || column === void 0 ? void 0 : column.noWrap,
-      align: column === null || column === void 0 ? void 0 : column.align
-    });
-  })))));
-}
-var DataTable$1 = /*#__PURE__*/React.memo(DataTable);
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    },
+    'secondary-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'success-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'warning-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'error-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    })
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
+  if (loading) return _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+    color: 'transparent'
+  });
+  if (shadow) return defaultColor;
+  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, color) : colors[color]) || colors["default"];
+  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
+    color: hoverColor.color || hoverColor.border
+  });
+};
+var getButtonCursor = function getButtonCursor(disabled, loading) {
+  if (disabled) return {
+    cursor: 'not-allowed',
+    events: 'auto'
+  };
+  if (loading) return {
+    cursor: 'default',
+    events: 'none'
+  };
+  return {
+    cursor: 'pointer',
+    events: 'auto'
+  };
+};
+var getButtonDripColor = function getButtonDripColor(palette, props) {
+  var type = props.type;
+  var isLightHover = type ? type.endsWith('light') : false;
+  var hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
+};
 
-var TableBody = function TableBody(_ref) {
-  var data = _ref.data,
-    emptyText = _ref.emptyText,
-    onRow = _ref.onRow,
-    onCell = _ref.onCell,
-    rowClassName = _ref.rowClassName,
-    textPlaceholder = _ref.textPlaceholder,
-    _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    onSelected = _ref.onSelected;
+var _excluded$2 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   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)
-  // }
-
-  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);
-    if (newSelected.length > 0 && onSelected) {
-      onSelected(newSelected);
-    }
-  };
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var buttonRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  }); // Changed with !
 
-  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
-  //   if (event.target.checked) {
-  //     const newSelecteds = data.map((n: any) => n._id);
-  //     setSelected(newSelecteds as never[]);
-  //     return;
-  //   }
-  //   setSelected([]);
-  // };
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dripShow = _useState2[0],
+    setDripShow = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dripX = _useState4[0],
+    setDripX = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dripY = _useState6[0],
+    setDripY = _useState6[1];
+  var groupConfig = useButtonGroupContext();
+  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  var children = filteredProps.children,
+    _filteredProps$disabl = filteredProps.disabled,
+    disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl;
+    filteredProps.color;
+    var _filteredProps$loadin = filteredProps.loading,
+    loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
+    _filteredProps$shadow = filteredProps.shadow,
+    shadow = _filteredProps$shadow === void 0 ? false : _filteredProps$shadow,
+    _filteredProps$ghost = filteredProps.ghost,
+    ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
+    _filteredProps$effect = filteredProps.effect,
+    effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
+    _filteredProps$round = filteredProps.round,
+    round = _filteredProps$round === void 0 ? false : _filteredProps$round,
+    onClick = filteredProps.onClick,
+    _filteredProps$auto = filteredProps.auto,
+    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
+    icon = filteredProps.icon,
+    _filteredProps$type = filteredProps.type,
+    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
+    iconRight = filteredProps.iconRight,
+    _filteredProps$classN = filteredProps.className,
+    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
+    filteredProps.crossOrigin;
+    var props = _objectWithoutProperties(filteredProps, _excluded$2);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
 
-  // Push Selected Rows
-  // const SELECTED = useMemo(() => {
-  //   if (selected.length > 0 && onSelected) {
-  //     return onSelected(selected);
-  //   }
-  //   return <></>;
-  // }, [selected]);
+  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]);
 
-  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 === void 0 ? void 0 : row.style) !== null && _row$style !== void 0 ? _row$style : {};
-    var onDragStart = row === null || row === void 0 ? void 0 : 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([["787902152", [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: "787902152",
-      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(2.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;}")));
-  }
-  if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
-    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      colSpan: columns === null || columns === void 0 ? void 0 : columns.length
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Placeholder, {
-      empty: true,
-      textOnly: textPlaceholder,
-      msg: "No Entries Found"
-    })))));
-  }
-  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 _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
-    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"));
+  /* 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);
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === void 0 ? void 0 : 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]]])
-    }, /*#__PURE__*/React.createElement(DataTable$1, {
-      readOnly: true,
-      stickyHeader: false,
-      style: _objectSpread2({
-        height: 'auto !important'
-      }, row === null || row === void 0 || (_row$table = row.table) === null || _row$table === void 0 ? void 0 : _row$table.style),
-      menu: (_row$table2 = row.table) === null || _row$table2 === void 0 ? void 0 : _row$table2.menu,
-      rows: (_row$table3 = row.table) === null || _row$table3 === void 0 ? void 0 : _row$table3.rows,
-      heading: (_row$table4 = row.table) === null || _row$table4 === void 0 ? void 0 : _row$table4.heading,
-      cols: (_row$table5 = row.table) === null || _row$table5 === void 0 ? void 0 : _row$table5.cols
-    }))));
-
-    // 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>
-    // )
+    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: type,
+    disabled: disabled,
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["1558010596", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
+    x: dripX,
+    y: dripY,
+    color: dripColor,
+    onCompleted: dripCompletedHandle
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "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';
+    id: "1558010596",
+    dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
+  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
+});
+ButtonComponent.displayName = 'Button';
+var Button = withScale(ButtonComponent);
 
-var 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;
+var getColors = function getColors(type, palette) {
+  var colors = {
+    "default": palette.background,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    secondary: palette.secondary,
+    dark: palette.foreground,
+    lite: palette.background
   };
+  var color = type === 'lite' || type === 'default' ? palette.foreground : palette.background;
   return {
-    width: getCSSStyleVal("".concat(width), rect.width),
-    height: getCSSStyleVal("".concat(height), rect.height)
+    color: color,
+    bgColor: colors[type]
   };
 };
-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
-    });
+
+var defaultTooltipPosition = {
+  top: '-1000px',
+  left: '-1000px',
+  transform: 'none'
+};
+var getPosition = function getPosition(placement, rect, offset) {
+  var positions = {
+    top: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left + rect.width / 2, "px"),
+      transform: 'translate(-50%, -100%)'
+    },
+    topStart: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left, "px"),
+      transform: 'translate(0, -100%)'
+    },
+    topEnd: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left + rect.width, "px"),
+      transform: 'translate(-100%, -100%)'
+    },
+    bottom: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left + rect.width / 2, "px"),
+      transform: 'translate(-50%, 0)'
+    },
+    bottomStart: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left, "px"),
+      transform: 'translate(0, 0)'
+    },
+    bottomEnd: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left + rect.width, "px"),
+      transform: 'translate(-100%, 0)'
+    },
+    left: {
+      top: "".concat(rect.top + rect.height / 2, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, -50%)'
+    },
+    leftStart: {
+      top: "".concat(rect.top, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, 0)'
+    },
+    leftEnd: {
+      top: "".concat(rect.top + rect.height, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, -100%)'
+    },
+    right: {
+      top: "".concat(rect.top + rect.height / 2, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, -50%)'
+    },
+    rightStart: {
+      top: "".concat(rect.top, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, 0)'
+    },
+    rightEnd: {
+      top: "".concat(rect.top + rect.height, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, -100%)'
+    }
   };
-  React.useEffect(function () {
-    return update();
-  }, [ref.current]);
-  return [state, update];
+  return positions[placement] || positions.top;
 };
-
-/* "use client" */
-
-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,
-    style = _ref.style,
-    color = _ref.color,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 'smaller' : _ref$fontSize,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _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,
-      color: color,
-      align: align,
-      fontSize: fontSize,
-      className: className,
-      style: style,
-      renderHandler: function renderHandler() {}
-    });
-  }, [children, noWrap, color, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
-  return null;
+var getIconPosition = function getIconPosition(placement, offsetX, offsetY) {
+  var offsetAbsolute = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '3px';
+  var positions = {
+    top: {
+      top: 'auto',
+      right: 'auto',
+      left: '50%',
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(-50%, 100%) rotate(-90deg)'
+    },
+    topStart: {
+      top: 'auto',
+      right: 'auto',
+      left: "".concat(offsetX),
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    topEnd: {
+      top: 'auto',
+      right: "".concat(offsetX),
+      left: 'auto',
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    bottom: {
+      top: "".concat(offsetAbsolute),
+      right: 'auto',
+      left: '50%',
+      bottom: 'auto',
+      transform: 'translate(-50%, -100%) rotate(90deg)'
+    },
+    bottomStart: {
+      top: "".concat(offsetAbsolute),
+      right: 'auto',
+      left: "".concat(offsetX),
+      bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    bottomEnd: {
+      top: "".concat(offsetAbsolute),
+      right: "".concat(offsetX),
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    left: {
+      top: '50%',
+      right: '0',
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
+    },
+    leftStart: {
+      top: "".concat(offsetY),
+      right: '0',
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
+    },
+    leftEnd: {
+      top: 'auto',
+      right: '0',
+      left: 'auto',
+      bottom: "".concat(offsetY),
+      transform: 'translate(100%, 50%) rotate(180deg)'
+    },
+    right: {
+      top: '50%',
+      right: 'auto',
+      left: '0',
+      bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
+    },
+    rightStart: {
+      top: "".concat(offsetY),
+      right: 'auto',
+      left: '0',
+      bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
+    },
+    rightEnd: {
+      top: 'auto',
+      right: 'auto',
+      left: '0',
+      bottom: "".concat(offsetY),
+      transform: 'translate(-100%, 50%) rotate(0deg)'
+    }
+  };
+  return positions[placement] || positions.top;
 };
-TableColumn.displayName = 'TableColumn';
 
-var _excluded$4 = ["active", "children", "disabled", "onClick"];
-var PaginationItem = function PaginationItem(_ref) {
-  var active = _ref.active,
-    children = _ref.children,
-    disabled = _ref.disabled,
-    onClick = _ref.onClick,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+var TooltipIcon = function TooltipIcon(_ref) {
+  var placement = _ref.placement,
+    shadow = _ref.shadow;
   var theme = useTheme();
   var _useMemo = React.useMemo(function () {
-      return [addColorAlpha(theme.palette.success, 0.1), addColorAlpha(theme.palette.success, 0.8)];
-    }, [theme.palette.success]),
-    _useMemo2 = _slicedToArray(_useMemo, 2),
-    hover = _useMemo2[0],
-    activeHover = _useMemo2[1];
-  var classes = useClasses({
-    active: active,
-    disabled: disabled
-  });
-  var clickHandler = function clickHandler(event) {
-    if (disabled) return;
-    onClick && onClick(event);
-  };
-  return /*#__PURE__*/React.createElement("li", {
-    className: _JSXStyle.dynamic([["1657796974", [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]]])
-  }, /*#__PURE__*/React.createElement("button", _extends({
-    onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["1657796974", [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1657796974",
-    dynamic: [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]
-  }, "li.__jsx-style-dynamic-selector{margin-right:0.428em;display:inline-block;}button.__jsx-style-dynamic-selector{border:none;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-align:center;vertical-align:middle;box-shadow:none;outline:none;height:var(--pagination-size);min-width:var(--pagination-size);font-size:inherit;cursor:pointer;color:".concat(theme.palette.success, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(theme.palette.background, ";-webkit-transition:all linear 200ms 0ms;transition:all linear 200ms 0ms;}button.__jsx-style-dynamic-selector:hover{background-color:").concat(hover, ";}.active.__jsx-style-dynamic-selector{font-weight:bold;background-color:").concat(theme.palette.success, ";color:").concat(theme.palette.background, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";}.active.__jsx-style-dynamic-selector:hover{background-color:").concat(activeHover, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}.disabled.__jsx-style-dynamic-selector:hover{background-color:").concat(theme.palette.accents_2, ";}button.__jsx-style-dynamic-selector svg{width:1.3em;height:1.3em;}")));
+      return getIconPosition(placement, 'var(--tooltip-icon-offset-x)', 'var(--tooltip-icon-offset-y)');
+    }, [placement]),
+    transform = _useMemo.transform,
+    top = _useMemo.top,
+    left = _useMemo.left,
+    right = _useMemo.right,
+    bottom = _useMemo.bottom;
+  var bgColorWithDark = React.useMemo(function () {
+    if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)';
+    return theme.palette.accents_2;
+  }, [theme.type, shadow]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2440507693", [bgColorWithDark, left, top, right, bottom, transform]]])
+  }, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2440507693",
+    dynamic: [bgColorWithDark, left, top, right, bottom, transform]
+  }, "span.__jsx-style-dynamic-selector{width:0;height:0;border-style:solid;border-width:6px 7px 6px 0;border-color:transparent ".concat(bgColorWithDark, " transparent transparent;position:absolute;left:").concat(left, ";top:").concat(top, ";right:").concat(right, ";bottom:").concat(bottom, ";-webkit-transform:").concat(transform, ";-ms-transform:").concat(transform, ";transform:").concat(transform, ";}")));
 };
-PaginationItem.displayName = 'PaginationItem';
-
-/* "use client" */
 
-tuple('prev', 'next', 'click');
-var defaultContext = {};
-var PaginationContext = /*#__PURE__*/React.createContext(defaultContext);
-var usePaginationContext = function usePaginationContext() {
-  return React.useContext(PaginationContext);
+var defaultRect = {
+  top: -1e3,
+  left: -1e3,
+  right: -1e3,
+  bottom: -1e3,
+  width: 0,
+  height: 0
 };
-
-var _excluded$3 = ["children"];
-var PaginationPrevious = function PaginationPrevious(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  var _usePaginationContext = usePaginationContext(),
-    update = _usePaginationContext.update,
-    isFirst = _usePaginationContext.isFirst;
-  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
-    onClick: function onClick() {
-      return update && update('prev');
-    },
-    disabled: isFirst
-  }, props), children);
+var getRect = function getRect(ref) {
+  if (!ref || !ref.current) return defaultRect;
+  var rect = ref.current.getBoundingClientRect();
+  return _objectSpread2(_objectSpread2({}, rect), {}, {
+    width: rect.width || rect.right - rect.left,
+    height: rect.height || rect.bottom - rect.top,
+    top: rect.top + document.documentElement.scrollTop,
+    bottom: rect.bottom + document.documentElement.scrollTop,
+    left: rect.left + document.documentElement.scrollLeft,
+    right: rect.right + document.documentElement.scrollLeft
+  });
 };
-PaginationPrevious.displayName = 'PaginationPrevious';
 
-var _excluded$2 = ["children"];
-var PaginationNext = function PaginationNext(_ref) {
+var TooltipContent = function TooltipContent(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  var _usePaginationContext = usePaginationContext(),
-    update = _usePaginationContext.update,
-    isLast = _usePaginationContext.isLast;
-  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
-    onClick: function onClick() {
-      return update && update('next');
-    },
-    disabled: isLast
-  }, props), children);
-};
-PaginationNext.displayName = 'PaginationNext';
-
-var PaginationEllipsis = function PaginationEllipsis(_ref) {
-  var isBefore = _ref.isBefore,
-    _onClick = _ref.onClick;
-  var _useState = React.useState(false),
+    parent = _ref.parent,
+    visible = _ref.visible,
+    offset = _ref.offset,
+    iconOffset = _ref.iconOffset,
+    placement = _ref.placement,
+    type = _ref.type,
+    className = _ref.className,
+    hideArrow = _ref.hideArrow;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var el = usePortal('tooltip');
+  var selfRef = React.useRef(null);
+  var _useState = React.useState(defaultTooltipPosition),
     _useState2 = _slicedToArray(_useState, 2),
-    showMore = _useState2[0],
-    setShowMore = _useState2[1];
-  return /*#__PURE__*/React.createElement(PaginationItem, {
-    onClick: function onClick(e) {
-      return _onClick && _onClick(e);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return setShowMore(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setShowMore(false);
-    }
-  }, showMore ? /*#__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([["2928474255", [isBefore ? '180deg' : '0deg']]]) + " " + "more"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M13 17l5-5-5-5",
-    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M6 17l5-5-5-5",
-    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
-  })) : /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "1",
-    fill: "currentColor",
-    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "19",
-    cy: "12",
-    r: "1",
-    fill: "currentColor",
-    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "5",
-    cy: "12",
-    r: "1",
-    fill: "currentColor",
-    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2928474255",
-    dynamic: [isBefore ? '180deg' : '0deg']
-  }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
-};
-PaginationEllipsis.displayName = 'PaginationEllipsis';
-
-var PaginationPages = function PaginationPages(_ref) {
-  var limit = _ref.limit,
-    count = _ref.count,
-    current = _ref.current,
-    setPage = _ref.setPage;
-  var showPages = React.useMemo(function () {
-    var oddLimit = limit % 2 === 0 ? limit - 1 : limit;
-    return oddLimit - 2;
-  }, [limit]);
-  var middleNumber = (showPages + 1) / 2;
-  var _useMemo = React.useMemo(function () {
-      var showEllipsis = count > limit;
-      return [showEllipsis && current > middleNumber + 1, showEllipsis && current < count - middleNumber];
-    }, [current, showPages, middleNumber, count, limit]),
-    _useMemo2 = _slicedToArray(_useMemo, 2),
-    showBeforeEllipsis = _useMemo2[0],
-    showAfterEllipsis = _useMemo2[1];
-  var pagesArray = React.useMemo(function () {
-    return _toConsumableArray(new Array(showPages));
-  }, [showPages]);
-  var renderItem = React.useCallback(function (value, active) {
-    return /*#__PURE__*/React.createElement(PaginationItem, {
-      key: "pagination-item-".concat(value),
-      active: value === active,
-      onClick: function onClick() {
-        return setPage(value);
-      }
-    }, value);
-  }, []);
-  var startPages = pagesArray.map(function (_, index) {
-    var value = index + 2;
-    return renderItem(value, current);
-  });
-  var middlePages = pagesArray.map(function (_, index) {
-    var middleIndexNumber = middleNumber - (index + 1);
-    var value = current - middleIndexNumber;
-    return /*#__PURE__*/React.createElement(PaginationItem, {
-      key: "pagination-middle-".concat(index),
-      active: index + 1 === middleNumber,
-      onClick: function onClick() {
-        return setPage(value);
-      }
-    }, value);
-  });
-  var endPages = pagesArray.map(function (_, index) {
-    var value = count - (showPages - index);
-    return renderItem(value, current);
+    rect = _useState2[0],
+    setRect = _useState2[1];
+  var colors = React.useMemo(function () {
+    return getColors(type, theme.palette);
+  }, [type, theme.palette]);
+  var hasShadow = type === 'default';
+  var classes = useClasses('tooltip-content', className);
+  if (!parent) return null;
+  var updateRect = function updateRect() {
+    var position = getPosition(placement, getRect(parent), offset);
+    setRect(position);
+  };
+  useResize(updateRect);
+  useClickAnyWhere(function () {
+    return updateRect();
   });
-  if (count <= limit) {
-    /* eslint-disable react/jsx-no-useless-fragment */
-    return /*#__PURE__*/React.createElement(React.Fragment, null, _toConsumableArray(new Array(count)).map(function (_, index) {
-      var value = index + 1;
-      return /*#__PURE__*/React.createElement(PaginationItem, {
-        key: "pagination-item-".concat(value),
-        active: value === current,
-        onClick: function onClick() {
-          return setPage(value);
-        }
-      }, value);
-    }));
-    /* eslint-enable */
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderItem(1, current), showBeforeEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
-    key: "pagination-ellipsis-before",
-    isBefore: true,
-    onClick: function onClick() {
-      return setPage(function (last) {
-        return last - 5 >= 1 ? last - 5 : 1;
-      });
-    }
-  }), showBeforeEllipsis && showAfterEllipsis ? middlePages : showBeforeEllipsis ? endPages : startPages, showAfterEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
-    key: "pagination-ellipsis-after",
-    onClick: function onClick() {
-      return setPage(function (last) {
-        return last + 5 <= count ? last + 5 : count;
-      });
-    }
-  }), renderItem(count, current));
+  React.useEffect(function () {
+    updateRect();
+  }, [visible]);
+  var preventHandler = function preventHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+  };
+  if (!el) return null;
+  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(CssTransition, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: selfRef,
+    onClick: preventHandler,
+    className: _JSXStyle.dynamic([["2387841858", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2387841858", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + "inner"
+  }, !hideArrow && /*#__PURE__*/React.createElement(TooltipIcon, {
+    placement: placement,
+    shadow: hasShadow
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2387841858",
+    dynamic: [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]
+  }, ".tooltip-content.__jsx-style-dynamic-selector{--tooltip-icon-offset-x:".concat(iconOffset.x, ";--tooltip-icon-offset-y:").concat(iconOffset.y, ";--tooltip-content-bg:").concat(colors.bgColor, ";box-sizing:border-box;position:absolute;top:").concat(rect.top, ";left:").concat(rect.left, ";-webkit-transform:").concat(rect.transform, ";-ms-transform:").concat(rect.transform, ";transform:").concat(rect.transform, ";background-color:var(--tooltip-content-bg);color:").concat(colors.color, ";border-radius:").concat(theme.layout.radius, ";padding:0;z-index:1000;box-shadow:").concat(hasShadow ? theme.expressiveness.shadowMedium : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.inner.__jsx-style-dynamic-selector{box-sizing:border-box;position:relative;font-size:").concat(SCALES.font(1), ";padding:").concat(SCALES.pt(0.65), " ").concat(SCALES.pr(0.9), " ").concat(SCALES.pb(0.65), " ").concat(SCALES.pl(0.9), ";height:100%;}")))), el);
 };
-PaginationPages.displayName = 'PaginationPages';
 
-var _excluded$1 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
-var PaginationComponent = function PaginationComponent(_ref) {
-  var customPage = _ref.page,
-    _ref$initialPage = _ref.initialPage,
-    initialPage = _ref$initialPage === void 0 ? 1 : _ref$initialPage,
-    _ref$count = _ref.count,
-    count = _ref$count === void 0 ? 1 : _ref$count,
-    _ref$limit = _ref.limit,
-    limit = _ref$limit === void 0 ? 7 : _ref$limit,
-    children = _ref.children,
-    onChange = _ref.onChange,
+/* "use client" */
+
+var useClickAway = function useClickAway(ref, handler) {
+  var handlerRef = React.useRef(handler);
+  React.useEffect(function () {
+    handlerRef.current = handler;
+  }, [handler]);
+  React.useEffect(function () {
+    var callback = function callback(event) {
+      var el = ref.current;
+      if (!event || !el || el.contains(event.target)) return;
+      handlerRef.current(event);
+    };
+    document.addEventListener('click', callback);
+    return function () {
+      return document.removeEventListener('click', callback);
+    };
+  }, [ref]);
+};
+
+var _excluded$1 = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
+var TooltipComponent = function TooltipComponent(_ref) {
+  var children = _ref.children,
+    _ref$initialVisible = _ref.initialVisible,
+    initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
+    text = _ref.text,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 12 : _ref$offset,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$portalClassName = _ref.portalClassName,
+    portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+    _ref$enterDelay = _ref.enterDelay,
+    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
+    _ref$leaveDelay = _ref.leaveDelay,
+    leaveDelay = _ref$leaveDelay === void 0 ? 150 : _ref$leaveDelay,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$onVisibleChange = _ref.onVisibleChange,
+    onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
+    _ref$hideArrow = _ref.hideArrow,
+    hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
+    customVisible = _ref.visible,
     props = _objectWithoutProperties(_ref, _excluded$1);
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useCurrentState = useCurrentState(initialPage),
-    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-    page = _useCurrentState2[0],
-    setPage = _useCurrentState2[1],
-    pageRef = _useCurrentState2[2];
-  var _pickChild = pickChild(children, PaginationPrevious),
-    _pickChild2 = _slicedToArray(_pickChild, 2),
-    prevChildren = _pickChild2[1];
-  var _pickChild3 = pickChild(children, PaginationNext),
-    _pickChild4 = _slicedToArray(_pickChild3, 2),
-    nextChildren = _pickChild4[1];
-  var _useMemo = React.useMemo(function () {
-      var hasChildren = function hasChildren(c) {
-        return React.Children.count(c) > 0;
-      };
-      var prevDefault = /*#__PURE__*/React.createElement(PaginationPrevious, null, "prev");
-      var nextDefault = /*#__PURE__*/React.createElement(PaginationNext, null, "next");
-      return [hasChildren(prevChildren) ? prevChildren : prevDefault, hasChildren(nextChildren) ? nextChildren : nextDefault];
-    }, [prevChildren, nextChildren]),
-    _useMemo2 = _slicedToArray(_useMemo, 2),
-    prevItem = _useMemo2[0],
-    nextItem = _useMemo2[1];
-  var update = function update(type) {
-    if (type === 'prev' && pageRef.current > 1) {
-      setPage(function (last) {
-        return last - 1;
-      });
-    }
-    if (type === 'next' && pageRef.current < count) {
-      setPage(function (last) {
-        return last + 1;
-      });
-    }
-  };
-  var values = React.useMemo(function () {
+  var timer = React.useRef();
+  var ref = React.useRef(null);
+  var _useState = React.useState(initialVisible),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var iconOffset = React.useMemo(function () {
+    if (!(ref !== null && ref !== void 0 && ref.current)) return {
+      x: '0.75em',
+      y: '0.75em'
+    };
+    var rect = getRect(ref);
     return {
-      isFirst: page <= 1,
-      isLast: page >= count,
-      update: update
+      x: "".concat(rect.width ? rect.width / 2 : 0, "px"),
+      y: "".concat(rect.height ? rect.height / 2 : 0, "px")
     };
-  }, [page, count]);
-  React.useEffect(function () {
-    onChange && onChange(page);
-  }, [page]);
+  }, [ref === null || ref === void 0 ? void 0 : ref.current]);
+  var contentProps = {
+    type: type,
+    visible: visible,
+    offset: offset,
+    placement: placement,
+    hideArrow: hideArrow,
+    iconOffset: iconOffset,
+    parent: ref,
+    className: portalClassName
+  };
+  var changeVisible = function changeVisible(nextState) {
+    var clear = function clear() {
+      clearTimeout(timer.current);
+      timer.current = undefined;
+    };
+    var handler = function handler(nextState) {
+      setVisible(nextState);
+      onVisibleChange(nextState);
+      clear();
+    };
+    clear();
+    if (nextState) {
+      timer.current = window.setTimeout(function () {
+        return handler(true);
+      }, enterDelay);
+      return;
+    }
+    var leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay;
+    timer.current = window.setTimeout(function () {
+      return handler(false);
+    }, leaveDelayWithoutClick);
+  };
+  var mouseEventHandler = function mouseEventHandler(next) {
+    return trigger === 'hover' && changeVisible(next);
+  };
+  var clickEventHandler = function clickEventHandler() {
+    return trigger === 'click' && changeVisible(!visible);
+  };
+  useClickAway(ref, function () {
+    return trigger === 'click' && changeVisible(false);
+  });
   React.useEffect(function () {
-    if (customPage !== undefined) {
-      setPage(customPage);
+    if (customVisible === undefined) return;
+    changeVisible(customVisible);
+  }, [customVisible]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    onClick: clickEventHandler,
+    onMouseEnter: function onMouseEnter() {
+      return mouseEventHandler(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return mouseEventHandler(false);
     }
-  }, [customPage]);
-  return /*#__PURE__*/React.createElement(PaginationContext.Provider, {
-    value: values
-  }, /*#__PURE__*/React.createElement("nav", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3826701357", [SCALES.font(2), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
-  }), prevItem, /*#__PURE__*/React.createElement(PaginationPages, {
-    count: count,
-    current: page,
-    limit: limit,
-    setPage: setPage
-  }), nextItem), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3826701357",
-    dynamic: [SCALES.font(2), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "nav.__jsx-style-dynamic-selector{font-variant:tabular-nums;font-feature-settings:'tnum';--pagination-size:".concat(SCALES.font(2), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector button:last-of-type{margin-right:0;}")));
+  }, props, {
+    className: "jsx-418573366" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
+  }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "418573366"
+  }, ".tooltip.jsx-418573366{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
 };
-PaginationComponent.displayName = 'Pagination';
-var Pagination = withScale(PaginationComponent);
-
-Pagination.Previous = PaginationPrevious;
-Pagination.Next = PaginationNext;
+TooltipComponent.displayName = 'Tooltip';
+var Tooltip = withScale(TooltipComponent);
 
 var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "textPlaceholder", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 function TableComponent(tableProps) {
@@ -32752,5 +32174,4 @@ TableComponent.Column = TableColumn;
 var Table = withScale(TableComponent);
 Table.Column = TableColumn;
 
-exports.DataTable = DataTable$1;
 exports.default = Table;