@helpdice/ui 1.3.1 → 1.3.3

package/dist/table/index.js

@@ -1141,7 +1141,7 @@ var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingL
 var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
   return "".concat(scale1x);
 };
-var defaultContext$3 = {
+var defaultContext$5 = {
   getScaleProps: function getScaleProps() {
     return undefined;
   },
@@ -1167,7 +1167,7 @@ var defaultContext$3 = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$3);
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$5);
 var useScale = function useScale() {
   return React.useContext(ScaleContext);
 };
@@ -1177,6 +1177,19 @@ var useScale = function useScale() {
 var getId = function getId() {
   return Math.random().toString(32).slice(2, 10);
 };
+var pickChild = function pickChild(children, targetChild) {
+  var target = [];
+  var withoutTargetChildren = React.Children.map(children, function (item) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return item;
+    if (item.type === targetChild) {
+      target.push(item);
+      return null;
+    }
+    return item;
+  });
+  var targetChildren = target.length >= 0 ? target : undefined;
+  return [withoutTargetChildren, targetChildren];
+};
 var pickChildByProps = function pickChildByProps(children, key, value) {
   var target = [];
   var isArray = Array.isArray(value);
@@ -1199,6 +1212,11 @@ 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);
 };
@@ -1252,7 +1270,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$e = ["children"];
+var _excluded$k = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -1262,7 +1280,7 @@ var withScale = function withScale(Render) {
   var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$k);
     var _useTheme = useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1345,7 +1363,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$d = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
+var _excluded$j = ["label", "labelRight", "type", "error", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1385,7 +1403,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === undefined ? false : _ref$disabled,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1527,7 +1545,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$c = ["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,
@@ -1547,7 +1565,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     placeholder = _ref.placeholder,
     _ref$resize = _ref.resize,
     resize = _ref$resize === undefined ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1647,11 +1665,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$b = ["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$b);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -18948,11 +18966,11 @@ var SelectIcon = /*#__PURE__*/React.memo(SelectIconComponent);
 
 /* "use client" */
 
-var defaultContext$2 = {
+var defaultContext$4 = {
   visible: false,
   disableAll: false
 };
-var SelectContext = /*#__PURE__*/React.createContext(defaultContext$2);
+var SelectContext = /*#__PURE__*/React.createContext(defaultContext$4);
 var useSelectContext = function useSelectContext() {
   return React.useContext(SelectContext);
 };
@@ -19017,7 +19035,7 @@ var useResize = function useResize(callback) {
   }, []);
 };
 
-var _excluded$a = ["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,
@@ -19032,7 +19050,7 @@ var CssTransition = function CssTransition(_ref) {
     clearTime = _ref$clearTime === undefined ? 60 : _ref$clearTime,
     _ref$name = _ref.name,
     name = _ref$name === undefined ? 'transition' : _ref$name,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     classes = _useState2[0],
@@ -19288,7 +19306,7 @@ var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef)
 });
 SelectDropdown.displayName = 'SelectDropdown';
 
-var _excluded$9 = ["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') {
@@ -19326,7 +19344,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19366,12 +19384,12 @@ var GridBasicItem = function GridBasicItem(_ref) {
 };
 GridBasicItem.displayName = 'GridBasicItem';
 
-var _excluded$8 = ["children", "className"];
+var _excluded$e = ["children", "className"];
 var GridComponent = function GridComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _styles$className = {
@@ -19391,7 +19409,7 @@ var GridComponent = function GridComponent(_ref) {
 GridComponent.displayName = 'Grid';
 var Grid = withScale(GridComponent);
 
-var _excluded$7 = ["gap", "wrap", "children", "className"];
+var _excluded$d = ["gap", "wrap", "children", "className"];
 var GridContainerComponent = function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === undefined ? 0 : _ref$gap,
@@ -19400,7 +19418,7 @@ var GridContainerComponent = function GridContainerComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -19556,7 +19574,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
 });
 SelectInput.displayName = 'GeistSelectInput';
 
-var _excluded$6 = ["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,
@@ -19585,7 +19603,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     getPopupContainer = _ref.getPopupContainer,
     _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
     onDropdownVisibleChange = _ref$onDropdownVisibl === undefined ? function () {} : _ref$onDropdownVisibl,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19757,7 +19775,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
 SelectComponent.displayName = 'Select';
 var Select = withScale(SelectComponent);
 
-var _excluded$5 = ["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,
@@ -19771,7 +19789,7 @@ var SelectOptionComponent = function SelectOptionComponent(_ref) {
     label = _ref$label === undefined ? false : _ref$label,
     _ref$preventAllEvents = _ref.preventAllEvents,
     preventAllEvents = _ref$preventAllEvents === undefined ? false : _ref$preventAllEvents,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19861,7 +19879,8 @@ var TableHead = function TableHead(props) {
     columns = _ref.columns,
     width = _ref.width,
     onFilters = _ref.onFilters,
-    showFilters = _ref.showFilters;
+    showFilters = _ref.showFilters,
+    stickyHeader = _ref.stickyHeader;
   var isScalableWidth = React.useMemo(function () {
     return columns.find(function (item) {
       return !!item.width;
@@ -19950,9 +19969,9 @@ var TableHead = function TableHead(props) {
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
     return /*#__PURE__*/React.createElement("th", {
       style: {
@@ -19964,23 +19983,23 @@ var TableHead = function TableHead(props) {
       },
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
       "data-column": column.label,
-      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
+      className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
     }, /*#__PURE__*/React.createElement("div", {
-      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
+      className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
     }, column.label, /*#__PURE__*/React.createElement("br", {
-      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }), /*#__PURE__*/React.createElement("span", {
       style: {
         textAlign: 'center'
       },
-      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }, column.text)));
   })), showFilters && /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "134865897",
-    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
-  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+    id: "3728881297",
+    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
 };
 TableHead.displayName = 'TableHead';
 
@@ -20019,11 +20038,11 @@ var TableCell = function TableCell(_ref) {
 
 /* "use client" */
 
-var defaultContext$1 = {
+var defaultContext$3 = {
   columns: [],
   updateColumn: function updateColumn() {}
 };
-var TableContext = /*#__PURE__*/React.createContext(defaultContext$1);
+var TableContext = /*#__PURE__*/React.createContext(defaultContext$3);
 var useTableContext = function useTableContext() {
   return React.useContext(TableContext);
 };
@@ -20261,108 +20280,6 @@ var TableColumn = function TableColumn(columnProps) {
 };
 TableColumn.displayName = 'TableColumn';
 
-var _excluded$4 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
-function TableComponent(tableProps) {
-  /* eslint-disable  @typescript-eslint/no-unused-vars */
-  var _ref = tableProps,
-    children = _ref.children,
-    customData = _ref.data,
-    _ref$initialData = _ref.initialData,
-    initialData = _ref$initialData === undefined ? [] : _ref$initialData,
-    _ref$hover = _ref.hover,
-    hover = _ref$hover === undefined ? true : _ref$hover,
-    _ref$emptyText = _ref.emptyText,
-    emptyText = _ref$emptyText === undefined ? '' : _ref$emptyText,
-    _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
-    onRow = _ref.onRow,
-    onCell = _ref.onCell;
-    _ref.onChange;
-    var onFilters = _ref.onFilters,
-    _ref$showFilters = _ref.showFilters,
-    showFilters = _ref$showFilters === undefined ? false : _ref$showFilters,
-    onSelected = _ref.onSelected,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    _ref$rowClassName = _ref.rowClassName,
-    rowClassName = _ref$rowClassName === undefined ? function () {
-      return '';
-    } : _ref$rowClassName,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var ref = React.useRef(null);
-  var _useRealShape = useRealShape(ref),
-    _useRealShape2 = _slicedToArray(_useRealShape, 2),
-    width = _useRealShape2[0].width,
-    updateShape = _useRealShape2[1];
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    columns = _useState2[0],
-    setColumns = _useState2[1];
-  var _useState3 = React.useState(initialData),
-    _useState4 = _slicedToArray(_useState3, 2),
-    data = _useState4[0],
-    setData = _useState4[1];
-  var updateColumn = function updateColumn(column) {
-    setColumns(function (last) {
-      var hasColumn = last.find(function (item) {
-        return item.prop === column.prop;
-      });
-      if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
-      return last.map(function (item) {
-        if (item.prop !== column.prop) return item;
-        return column;
-      });
-    });
-  };
-  var contextValue = React.useMemo(function () {
-    return {
-      columns: columns,
-      updateColumn: updateColumn
-    };
-  }, [columns]);
-  React.useEffect(function () {
-    if (typeof customData === 'undefined') return;
-    setData(customData);
-  }, [customData]);
-  useResize(function () {
-    return updateShape();
-  });
-  return /*#__PURE__*/React.createElement(TableContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement("table", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
-  }), /*#__PURE__*/React.createElement(TableHead, {
-    columns: columns,
-    onFilters: onFilters,
-    showFilters: showFilters,
-    width: width
-  }), /*#__PURE__*/React.createElement(TableBody, {
-    data: data,
-    hover: hover,
-    emptyText: emptyText,
-    onRow: onRow,
-    onCell: onCell,
-    rowClassName: rowClassName,
-    rowDraggable: rowDraggable,
-    readOnly: readOnly,
-    onSelected: onSelected
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2132340556",
-    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
-}
-TableComponent.displayName = 'Table';
-TableComponent.Column = TableColumn;
-var Table = withScale(TableComponent);
-Table.Column = 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) => {
@@ -22409,7 +22326,7 @@ const ChevronLeft = ({ color, strokeWidth, set }) => {
     }
 };
 ChevronLeft.displayName = "ChevronLeft";
-createIcon(ChevronLeft);
+var ChevronLeft$1 = createIcon(ChevronLeft);
 
 const ChevronCircleRight = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -22492,7 +22409,7 @@ const ChevronRight = ({ color, strokeWidth, set }) => {
     }
 };
 ChevronRight.displayName = "ChevronRight";
-createIcon(ChevronRight);
+var ChevronRight$1 = createIcon(ChevronRight);
 
 const ChevronCircleUp = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -30239,6 +30156,478 @@ const HelpCircle = ({ color, strokeWidth, set }) => {
 HelpCircle.displayName = "HelpCircle";
 createIcon(HelpCircle);
 
+var hexToRgb = function hexToRgb(color) {
+  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  var full = color.replace(fullReg, function (_, r, g, b) {
+    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+  });
+  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+  if (!values) {
+    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
+  }
+  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
+};
+var colorToRgbValues = function colorToRgbValues(color) {
+  if (color.charAt(0) === '#') return hexToRgb(color);
+  var safeColor = color.replace(/ /g, '');
+  var colorType = color.substr(0, 4);
+  var regArray = safeColor.match(/\((.+)\)/);
+  if (!colorType.startsWith('rgb') || !regArray) {
+    console.log(color);
+    throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
+  }
+  return regArray[1].split(',').map(function (str) {
+    return Number.parseFloat(str);
+  });
+};
+var addColorAlpha = function addColorAlpha(color, alpha) {
+  if (!/^#|rgb|RGB/.test(color)) return color;
+  var _colorToRgbValues = colorToRgbValues(color),
+    _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3),
+    r = _colorToRgbValues2[0],
+    g = _colorToRgbValues2[1],
+    b = _colorToRgbValues2[2];
+  var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
+};
+
+var _excluded$a = ["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$a);
+  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;}")));
+};
+PaginationItem.displayName = 'GeistPaginationItem';
+
+/* "use client" */
+
+tuple('prev', 'next', 'click');
+var defaultContext$2 = {};
+var PaginationContext = /*#__PURE__*/React.createContext(defaultContext$2);
+var usePaginationContext = function usePaginationContext() {
+  return React.useContext(PaginationContext);
+};
+
+var _excluded$9 = ["children"];
+var PaginationPrevious = function PaginationPrevious(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  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);
+};
+PaginationPrevious.displayName = 'GeistPaginationPrevious';
+
+var _excluded$8 = ["children"];
+var PaginationNext = function PaginationNext(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$8);
+  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 = 'GeistPaginationNext';
+
+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);
+    },
+    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 = 'GeistPaginationEllipsis';
+
+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 = 'GeistPaginationPages';
+
+var _excluded$7 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
+var PaginationComponent = function PaginationComponent(_ref) {
+  var customPage = _ref.page,
+    _ref$initialPage = _ref.initialPage,
+    initialPage = _ref$initialPage === undefined ? 1 : _ref$initialPage,
+    _ref$count = _ref.count,
+    count = _ref$count === undefined ? 1 : _ref$count,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === undefined ? 7 : _ref$limit,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  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 () {
+    return {
+      isFirst: page <= 1,
+      isLast: page >= count,
+      update: update
+    };
+  }, [page, count]);
+  React.useEffect(function () {
+    onChange && onChange(page);
+  }, [page]);
+  React.useEffect(function () {
+    if (customPage !== undefined) {
+      setPage(customPage);
+    }
+  }, [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;}")));
+};
+PaginationComponent.displayName = 'Pagination';
+var Pagination = withScale(PaginationComponent);
+
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+
+var _excluded$6 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+function TableComponent(tableProps) {
+  /* eslint-disable  @typescript-eslint/no-unused-vars */
+  var _ref = tableProps,
+    children = _ref.children,
+    customData = _ref.data,
+    _ref$initialData = _ref.initialData,
+    initialData = _ref$initialData === undefined ? [] : _ref$initialData,
+    _ref$hover = _ref.hover,
+    hover = _ref$hover === undefined ? true : _ref$hover,
+    _ref$emptyText = _ref.emptyText,
+    emptyText = _ref$emptyText === undefined ? '' : _ref$emptyText,
+    _ref$rowDraggable = _ref.rowDraggable,
+    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell;
+    _ref.onChange;
+    var onFilters = _ref.onFilters,
+    onPageChange = _ref.onPageChange,
+    _ref$showFilters = _ref.showFilters,
+    showFilters = _ref$showFilters === undefined ? false : _ref$showFilters,
+    _ref$stickyHeader = _ref.stickyHeader,
+    stickyHeader = _ref$stickyHeader === undefined ? false : _ref$stickyHeader,
+    onSelected = _ref.onSelected,
+    dataLength = _ref.dataLength,
+    viewLength = _ref.viewLength,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    _ref$rowClassName = _ref.rowClassName,
+    rowClassName = _ref$rowClassName === undefined ? function () {
+      return '';
+    } : _ref$rowClassName,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var ref = React.useRef(null);
+  var _useRealShape = useRealShape(ref),
+    _useRealShape2 = _slicedToArray(_useRealShape, 2),
+    width = _useRealShape2[0].width,
+    updateShape = _useRealShape2[1];
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    columns = _useState2[0],
+    setColumns = _useState2[1];
+  var _useState3 = React.useState(initialData),
+    _useState4 = _slicedToArray(_useState3, 2),
+    data = _useState4[0],
+    setData = _useState4[1];
+  var updateColumn = function updateColumn(column) {
+    setColumns(function (last) {
+      var hasColumn = last.find(function (item) {
+        return item.prop === column.prop;
+      });
+      if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
+      return last.map(function (item) {
+        if (item.prop !== column.prop) return item;
+        return column;
+      });
+    });
+  };
+  var contextValue = React.useMemo(function () {
+    return {
+      columns: columns,
+      updateColumn: updateColumn
+    };
+  }, [columns]);
+  React.useEffect(function () {
+    if (typeof customData === 'undefined') return;
+    setData(customData);
+  }, [customData]);
+  useResize(function () {
+    return updateShape();
+  });
+
+  // Function to calculate start and end index for a given page
+  var getDataRange = function getDataRange(pageNumber, itemsPerPage, dataLength) {
+    var startIndex = (pageNumber - 1) * itemsPerPage;
+    var endIndex = Math.min(startIndex + itemsPerPage - 1, dataLength - 1);
+    return {
+      startIndex: startIndex,
+      endIndex: endIndex
+    };
+  };
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("table", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React.createElement(TableHead, {
+    stickyHeader: stickyHeader,
+    columns: columns,
+    onFilters: onFilters,
+    showFilters: showFilters,
+    width: width
+  }), /*#__PURE__*/React.createElement(TableBody, {
+    data: data,
+    hover: hover,
+    emptyText: emptyText,
+    onRow: onRow,
+    onCell: onCell,
+    rowClassName: rowClassName,
+    rowDraggable: rowDraggable,
+    readOnly: readOnly,
+    onSelected: onSelected
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2132340556",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
+    className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement(Pagination, {
+    onChange: function onChange(pageNumber) {
+      // Get the range for the current page
+      var _getDataRange = getDataRange(pageNumber, viewLength, dataLength),
+        startIndex = _getDataRange.startIndex,
+        endIndex = _getDataRange.endIndex;
+      onPageChange(pageNumber, startIndex, endIndex);
+    },
+    limit: 5,
+    count: Number(dataLength / viewLength)
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null)))) : null));
+}
+TableComponent.displayName = 'Table';
+TableComponent.Column = TableColumn;
+var Table = withScale(TableComponent);
+Table.Column = TableColumn;
+
 var ButtonDrip = function ButtonDrip(_ref) {
   var _ref$x = _ref.x,
     x = _ref$x === undefined ? 0 : _ref$x,
@@ -30293,7 +30682,7 @@ var ButtonDrip = function ButtonDrip(_ref) {
 };
 ButtonDrip.displayName = 'ButtonDrip';
 
-var _excluded$3 = ["children", "type", "color", "className", "spaceRatio"];
+var _excluded$5 = ["children", "type", "color", "className", "spaceRatio"];
 var getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
     "default": palette.accents_6,
@@ -30313,7 +30702,7 @@ var LoadingComponent = function LoadingComponent(_ref) {
     className = _ref$className === undefined ? '' : _ref$className,
     _ref$spaceRatio = _ref.spaceRatio,
     spaceRatio = _ref$spaceRatio === undefined ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -30353,7 +30742,7 @@ var ButtonLoading = function ButtonLoading(_ref) {
 };
 ButtonLoading.displayName = 'GeistButtonLoading';
 
-var _excluded$2 = ["isRight", "isSingle", "children", "className"];
+var _excluded$4 = ["isRight", "isSingle", "children", "className"];
 var ButtonIcon = function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
     isRight = _ref$isRight === undefined ? false : _ref$isRight,
@@ -30361,7 +30750,7 @@ var ButtonIcon = function ButtonIcon(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var classes = useClasses('icon', {
     right: isRight,
     single: isSingle
@@ -30412,50 +30801,15 @@ var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
 
 /* "use client" */
 
-var defaultContext = {
+var defaultContext$1 = {
   isButtonGroup: false,
   disabled: false
 };
-var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext);
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$1);
 var useButtonGroupContext = function useButtonGroupContext() {
   return React.useContext(ButtonGroupContext);
 };
 
-var hexToRgb = function hexToRgb(color) {
-  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  var full = color.replace(fullReg, function (_, r, g, b) {
-    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
-  });
-  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
-  if (!values) {
-    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
-  }
-  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
-};
-var colorToRgbValues = function colorToRgbValues(color) {
-  if (color.charAt(0) === '#') return hexToRgb(color);
-  var safeColor = color.replace(/ /g, '');
-  var colorType = color.substr(0, 4);
-  var regArray = safeColor.match(/\((.+)\)/);
-  if (!colorType.startsWith('rgb') || !regArray) {
-    console.log(color);
-    throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
-  }
-  return regArray[1].split(',').map(function (str) {
-    return Number.parseFloat(str);
-  });
-};
-var addColorAlpha = function addColorAlpha(color, alpha) {
-  if (!/^#|rgb|RGB/.test(color)) return color;
-  var _colorToRgbValues = colorToRgbValues(color),
-    _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3),
-    r = _colorToRgbValues2[0],
-    g = _colorToRgbValues2[1],
-    b = _colorToRgbValues2[2];
-  var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
-  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
-};
-
 var getButtonGhostColors = function getButtonGhostColors(palette, type) {
   var colors = {
     secondary: {
@@ -30643,7 +30997,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+var _excluded$3 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
   var _useScale = useScale(),
@@ -30689,7 +31043,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     _filteredProps$classN = filteredProps.className,
     className = _filteredProps$classN === undefined ? '' : _filteredProps$classN;
     filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$1);
+    var props = _objectWithoutProperties(filteredProps, _excluded$3);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   var _useMemo = React.useMemo(function () {
@@ -31059,7 +31413,7 @@ var useClickAway = function useClickAway(ref, handler) {
   }, [ref]);
 };
 
-var _excluded = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
+var _excluded$2 = ["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,
@@ -31086,7 +31440,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     _ref$hideArrow = _ref.hideArrow,
     hideArrow = _ref$hideArrow === undefined ? false : _ref$hideArrow,
     customVisible = _ref.visible,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var timer = React.useRef();
   var ref = React.useRef(null);
   var _useState = React.useState(initialVisible),
@@ -31167,6 +31521,142 @@ var TooltipComponent = function TooltipComponent(_ref) {
 TooltipComponent.displayName = 'Tooltip';
 var Tooltip = withScale(TooltipComponent);
 
+/* "use client" */
+
+var defaultContext = {
+  disableItemsAutoClose: false,
+  onItemClick: function onItemClick() {}
+};
+var PopoverContext = /*#__PURE__*/React.createContext(defaultContext);
+var usePopoverContext = function usePopoverContext() {
+  return React.useContext(PopoverContext);
+};
+
+var _excluded$1 = ["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 === undefined ? 100 : _ref$enterDelay,
+    _ref$leaveDelay = _ref.leaveDelay,
+    leaveDelay = _ref$leaveDelay === undefined ? 150 : _ref$leaveDelay,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === undefined ? 12 : _ref$offset,
+    _ref$type = _ref.type,
+    type = _ref$type === undefined ? 'default' : _ref$type,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === undefined ? 'click' : _ref$trigger,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === undefined ? 'bottom' : _ref$placement,
+    _ref$initialVisible = _ref.initialVisible,
+    initialVisible = _ref$initialVisible === undefined ? false : _ref$initialVisible,
+    _ref$portalClassName = _ref.portalClassName,
+    portalClassName = _ref$portalClassName === undefined ? '' : _ref$portalClassName,
+    _ref$disableItemsAuto = _ref.disableItemsAutoClose,
+    disableItemsAutoClose = _ref$disableItemsAuto === undefined ? false : _ref$disableItemsAuto,
+    _ref$onVisibleChange = _ref.onVisibleChange,
+    onVisibleChange = _ref$onVisibleChange === undefined ? function () {} : _ref$onVisibleChange,
+    customVisible = _ref.visible,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  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);
+  };
+  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), ";}"))));
+};
+PopoverComponent.displayName = 'Popover';
+var Popover = withScale(PopoverComponent);
+
+var _excluded = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
+var PopoverItemComponent = function PopoverItemComponent(_ref) {
+  var children = _ref.children,
+    _ref$line = _ref.line,
+    line = _ref$line === undefined ? false : _ref$line,
+    _ref$showTitle = _ref.showTitle,
+    showTitle = _ref$showTitle === undefined ? false : _ref$showTitle,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    onClick = _ref.onClick,
+    _ref$disableAutoClose = _ref.disableAutoClose,
+    disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
+    props = _objectWithoutProperties(_ref, _excluded);
+  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
+  }, 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({
+    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 || "")
+  }), 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
+  }));
+};
+PopoverItemComponent.displayName = 'PopoverItem';
+var PopoverItem = withScale(PopoverItemComponent);
+
+/* "use client" */
+Popover.Item = PopoverItem;
+Popover.Option = PopoverItem;
+
 function DataTable(_ref) {
   var _ref$cols = _ref.cols,
     cols = _ref$cols === undefined ? [] : _ref$cols,
@@ -31202,6 +31692,9 @@ function DataTable(_ref) {
     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 === undefined ? false : _ref$disableMenu;
   var TABLE_ID = _.uniqueId('tbl');
@@ -31217,8 +31710,8 @@ function DataTable(_ref) {
   // };
   var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    hideColumn = _useState4[0];
-    _useState4[1];
+    hideColumn = _useState4[0],
+    setHideColumn = _useState4[1];
   // const handleMenuClose = () => {
   //     setAnchorEl(null);
   // };
@@ -31276,20 +31769,20 @@ function DataTable(_ref) {
   //     setSelected([]);
   // };
 
-  // const handleHideColumnClick = (event: React.MouseEvent<HTMLLIElement, MouseEvent>, id: any) => {
-  //     const selectedIndex = hideColumn.indexOf(id as never);
-  //     let newSelected: any[] | ((prevState: never[]) => never[]) = [];
-  //     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));
-  //     }
-  //     setHideColumn(newSelected as never[]);
-  // };
+  var handleHideColumnClick = function handleHideColumnClick(_event, id) {
+    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));
+    }
+    setHideColumn(newSelected);
+  };
 
   // Children change reset selected
   React.useEffect(function () {
@@ -31328,6 +31821,19 @@ function DataTable(_ref) {
   var COLUMNS = cols.filter(function (col) {
     return !hideColumn.includes(col.name);
   });
+  var content = function content() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      return /*#__PURE__*/React.createElement(Popover.Item, {
+        key: colunqid
+        // selected={!hideColumn.includes(option.name as never)}
+        ,
+        onClick: function onClick(e) {
+          return handleHideColumnClick(e, option.name);
+        }
+      }, /*#__PURE__*/React.createElement("span", null, option.name));
+    }));
+  };
   return /*#__PURE__*/React.createElement(GridContainer, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Grid.Container, {
@@ -31426,13 +31932,15 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    child: content
   }, /*#__PURE__*/React.createElement(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", {
+  })))) : null))), children ? /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '1rem'
     }
@@ -31457,11 +31965,21 @@ function DataTable(_ref) {
     onDrop: onDrop,
     id: TABLE_ID,
     style: _objectSpread2({
+      overflow: 'auto',
+      position: 'relative',
       height: 'calc(100vh - 8.5rem)',
       maxWidth: 'calc(100vw - 1rem)',
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
+    stickyHeader: true,
+    dataLength: dataLength,
+    viewLength: viewLength,
+    onPageChange: function onPageChange(page, start, end) {
+      if (_onPageChange) {
+        _onPageChange(page, start, end);
+      }
+    },
     onRow: onRowClick,
     rowDraggable: rowDraggable,
     showFilters: openFilter,