@helpdice/ui 1.3.1 → 1.3.2

package/dist/table/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
+var Popover = require('components/popover');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -1141,7 +1142,7 @@ var ScalePropKeys = ['width', 'height', 'padding', 'margin', 'w', 'h', 'paddingL
 var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
   return "".concat(scale1x);
 };
-var defaultContext$3 = {
+var defaultContext$4 = {
   getScaleProps: function getScaleProps() {
     return undefined;
   },
@@ -1167,7 +1168,7 @@ var defaultContext$3 = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$3);
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext$4);
 var useScale = function useScale() {
   return React.useContext(ScaleContext);
 };
@@ -1177,6 +1178,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);
@@ -1252,7 +1266,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$e = ["children"];
+var _excluded$i = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -1262,7 +1276,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$i);
     var _useTheme = useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1345,7 +1359,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$h = ["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 +1399,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$h);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1527,7 +1541,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$g = ["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 +1561,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$g);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1647,11 +1661,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$b = ["hideToggle", "children"];
+var _excluded$f = ["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$f);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -18948,11 +18962,11 @@ var SelectIcon = /*#__PURE__*/React.memo(SelectIconComponent);
 
 /* "use client" */
 
-var defaultContext$2 = {
+var defaultContext$3 = {
   visible: false,
   disableAll: false
 };
-var SelectContext = /*#__PURE__*/React.createContext(defaultContext$2);
+var SelectContext = /*#__PURE__*/React.createContext(defaultContext$3);
 var useSelectContext = function useSelectContext() {
   return React.useContext(SelectContext);
 };
@@ -19017,7 +19031,7 @@ var useResize = function useResize(callback) {
   }, []);
 };
 
-var _excluded$a = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+var _excluded$e = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
 var CssTransition = function CssTransition(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
@@ -19032,7 +19046,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$e);
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     classes = _useState2[0],
@@ -19288,7 +19302,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$d = ["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 +19340,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$d);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19366,12 +19380,12 @@ var GridBasicItem = function GridBasicItem(_ref) {
 };
 GridBasicItem.displayName = 'GridBasicItem';
 
-var _excluded$8 = ["children", "className"];
+var _excluded$c = ["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$c);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _styles$className = {
@@ -19391,7 +19405,7 @@ var GridComponent = function GridComponent(_ref) {
 GridComponent.displayName = 'Grid';
 var Grid = withScale(GridComponent);
 
-var _excluded$7 = ["gap", "wrap", "children", "className"];
+var _excluded$b = ["gap", "wrap", "children", "className"];
 var GridContainerComponent = function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === undefined ? 0 : _ref$gap,
@@ -19400,7 +19414,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$b);
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -19556,7 +19570,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$a = ["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 +19599,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$a);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19757,7 +19771,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$9 = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
 var SelectOptionComponent = function SelectOptionComponent(_ref) {
   var identValue = _ref.value,
     _ref$className = _ref.className,
@@ -19771,7 +19785,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$9);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -19861,7 +19875,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 +19965,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 +19979,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 +20034,11 @@ var TableCell = function TableCell(_ref) {
 
 /* "use client" */
 
-var defaultContext$1 = {
+var defaultContext$2 = {
   columns: [],
   updateColumn: function updateColumn() {}
 };
-var TableContext = /*#__PURE__*/React.createContext(defaultContext$1);
+var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
 var useTableContext = function useTableContext() {
   return React.useContext(TableContext);
 };
@@ -20261,108 +20276,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 +22322,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 +22405,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 +30152,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$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 /*#__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$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');
+    },
+    disabled: isFirst
+  }, props), children);
+};
+PaginationPrevious.displayName = 'GeistPaginationPrevious';
+
+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');
+    },
+    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$5 = ["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$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 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$4 = ["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$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();
+  });
+
+  // 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,
@@ -30421,41 +30806,6 @@ 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: {
@@ -31202,6 +31552,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 +31570,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 +31629,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 +31681,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 +31792,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 +31825,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,