@helpdice/ui 1.3.4 → 1.3.6

package/dist/table/index.js

@@ -20599,247 +20599,6 @@ function Placeholder(_ref) {
   }, msg));
 }
 
-var TableBody = function TableBody(_ref) {
-  var data = _ref.data,
-    emptyText = _ref.emptyText,
-    onRow = _ref.onRow,
-    onCell = _ref.onCell,
-    rowClassName = _ref.rowClassName,
-    _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
-    onSelected = _ref.onSelected;
-  var theme = useTheme();
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useTableContext = useTableContext(),
-    columns = _useTableContext.columns;
-  // const rowClickHandler = (row: TableDataItem, index: number) => {
-  //   onRow && onRow(row, index)
-  // }
-
-  var handleClick = function handleClick(_event, id) {
-    if (readOnly) {
-      return true;
-    }
-    var selectedIndex = selected.indexOf(id);
-    var newSelected = [];
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selected.slice(1));
-    } else if (selectedIndex === selected.length - 1) {
-      newSelected = newSelected.concat(selected.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
-    }
-    setSelected(newSelected);
-  };
-
-  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
-  //   if (event.target.checked) {
-  //     const newSelecteds = data.map((n: any) => n._id);
-  //     setSelected(newSelecteds as never[]);
-  //     return;
-  //   }
-  //   setSelected([]);
-  // };
-
-  // Push Selected Rows
-  React.useEffect(function () {
-    if (selected.length > 0 && onSelected) {
-      onSelected(selected);
-    }
-  }, [selected]);
-  function renderRow(cols, row, index) {
-    var _row$style;
-    var urid = _.uniqueId();
-    var className = rowClassName(row, index);
-    var rw = _objectSpread2({}, row);
-    var rowStyle = (_row$style = row === null || row === undefined ? undefined : row.style) !== null && _row$style !== undefined ? _row$style : {};
-    var onDragStart = row === null || row === undefined ? undefined : row.onDragStart;
-    delete rw.table;
-    delete rw.style;
-    delete rw.onDragStart;
-    // console.log(row);
-    // const frow = Object.fromEntries(
-    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
-    // ) as unknown as TableDataItem
-    // console.log(frow);
-    var isRowSelected = selected.indexOf(row) !== -1;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
-      draggable: rowDraggable,
-      role: "checkbox",
-      onDragStart: onDragStart,
-      "aria-checked": selected.indexOf(row) !== -1,
-      tabIndex: -1,
-      key: urid,
-      style: _objectSpread2({
-        cursor: 'pointer',
-        backgroundColor: isRowSelected ? '#efefef' : ''
-      }, rowStyle),
-      onClick: function onClick(e) {
-        if (!rowDraggable) {
-          if (onRow) {
-            onRow(row, index);
-          } else {
-            handleClick(e, row);
-          }
-        }
-      },
-      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
-    }, /*#__PURE__*/React.createElement(TableCell, {
-      columns: cols,
-      row: rw,
-      rowIndex: index,
-      emptyText: emptyText,
-      onCellClick: onCell
-    })), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "2019708038",
-      dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
-  }
-  if ((data === null || data === undefined ? undefined : data.length) === 0) {
-    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      colSpan: columns === null || columns === undefined ? undefined : columns.length
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Placeholder, {
-      empty: true,
-      msg: "No Entries Found"
-    })))));
-  }
-  return /*#__PURE__*/React.createElement("tbody", {
-    className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-  }, data.map(function (row, index) {
-    var qid = _.uniqueId();
-    if (row === null || row === undefined) {
-      var uid = _.uniqueId();
-      return /*#__PURE__*/React.createElement("tr", {
-        key: uid,
-        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-      }, /*#__PURE__*/React.createElement("td", {
-        colSpan: columns.length,
-        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-      }, "\u2003"));
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
-      key: qid,
-      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    }, /*#__PURE__*/React.createElement("td", {
-      style: {
-        padding: '1rem'
-      },
-      colSpan: columns.length,
-      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    })));
-
-    // return (
-    //   <tr
-    //     key={`tbody-row-${index}`}
-    //     className={useClasses({ hover }, className)}
-    //     onClick={() => rowClickHandler(row, index)}>
-    //     <TableCell<TableDataItem>
-    //       columns={columns}
-    //       row={row}
-    //       rowIndex={index}
-    //       emptyText={emptyText}
-    //       onCellClick={onCell}
-    //     />
-    //   </tr>
-    // )
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1422656197",
-    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
-};
-TableBody.displayName = 'TableBody';
-
-var getRealShape = function getRealShape(el) {
-  var defaultShape = {
-    width: 0,
-    height: 0
-  };
-  if (!el || typeof window === 'undefined') return defaultShape;
-  var rect = el.getBoundingClientRect();
-  var _window$getComputedSt = window.getComputedStyle(el),
-    width = _window$getComputedSt.width,
-    height = _window$getComputedSt.height;
-  var getCSSStyleVal = function getCSSStyleVal(str, parentNum) {
-    if (!str) return 0;
-    var strVal = str.includes('px') ? +str.split('px')[0] : str.includes('%') ? +str.split('%')[0] * parentNum * 0.01 : str;
-    return Number.isNaN(+strVal) ? 0 : +strVal;
-  };
-  return {
-    width: getCSSStyleVal("".concat(width), rect.width),
-    height: getCSSStyleVal("".concat(height), rect.height)
-  };
-};
-var useRealShape = function useRealShape(ref) {
-  var _useState = React.useState({
-      width: 0,
-      height: 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  var update = function update() {
-    var _getRealShape = getRealShape(ref.current),
-      width = _getRealShape.width,
-      height = _getRealShape.height;
-    setState({
-      width: width,
-      height: height
-    });
-  };
-  React.useEffect(function () {
-    return update();
-  }, [ref.current]);
-  return [state, update];
-};
-
-/* "use client" */
-
-var TableColumn = function TableColumn(columnProps) {
-  var _ref = columnProps,
-    children = _ref.children,
-    prop = _ref.prop,
-    label = _ref.label,
-    width = _ref.width,
-    filter = _ref.filter,
-    options = _ref.options,
-    noWrap = _ref.noWrap,
-    align = _ref.align,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    renderHandler = _ref.render;
-  var _useTableContext = useTableContext(),
-    updateColumn = _useTableContext.updateColumn;
-  var safeProp = "".concat(prop.toString()).trim();
-  if (!safeProp) {
-    useWarning('The props "prop" is required.', 'Table.Column');
-  }
-  React.useEffect(function () {
-    updateColumn({
-      label: children || label,
-      filter: filter,
-      noWrap: noWrap,
-      options: options,
-      prop: safeProp,
-      width: width,
-      align: align,
-      fontSize: fontSize,
-      className: className,
-      renderHandler: function renderHandler() {}
-    });
-  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
-  return null;
-};
-TableColumn.displayName = 'TableColumn';
-
 // import { IconContext } from "./context.js";
 const createIcon = (Component) => {
     const IconWrapper = React.forwardRef(({ color = "#001A72", strokeWidth = "1.5", size = "24", set = "outline", style, ...props }, ref) => {
@@ -30716,22 +30475,204 @@ 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(/\((.+)\)/);
+var ButtonDrip = function ButtonDrip(_ref) {
+  var _ref$x = _ref.x,
+    x = _ref$x === undefined ? 0 : _ref$x,
+    _ref$y = _ref.y,
+    y = _ref$y === undefined ? 0 : _ref$y,
+    color = _ref.color,
+    onCompleted = _ref.onCompleted;
+  var dripRef = React.useRef(null);
+  /* istanbul ignore next */
+  var top = Number.isNaN(+y) ? 0 : y - 10;
+  /* istanbul ignore next */
+  var left = Number.isNaN(+x) ? 0 : x - 10;
+  React.useEffect(function () {
+    /* istanbul ignore next */
+    if (!dripRef.current) return;
+    dripRef.current.addEventListener('animationend', onCompleted);
+    return function () {
+      /* istanbul ignore next */
+      if (!dripRef.current) return;
+      dripRef.current.removeEventListener('animationend', onCompleted);
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dripRef,
+    className: "jsx-3424889537" + " " + "drip"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    style: {
+      top: top,
+      left: left
+    },
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "10",
+    className: "jsx-3424889537"
+  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3424889537"
+  }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
+};
+ButtonDrip.displayName = 'ButtonDrip';
+
+var _excluded$a = ["children", "type", "color", "className", "spaceRatio"];
+var getIconBgColor = function getIconBgColor(type, palette, color) {
+  var colors = {
+    "default": palette.accents_6,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  return color ? color : colors[type];
+};
+var LoadingComponent = function LoadingComponent(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === undefined ? 'default' : _ref$type,
+    color = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    _ref$spaceRatio = _ref.spaceRatio,
+    spaceRatio = _ref$spaceRatio === undefined ? 1 : _ref$spaceRatio,
+    props = _objectWithoutProperties(_ref, _excluded$a);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = useClasses('loading-container', className);
+  var bgColor = React.useMemo(function () {
+    return getIconBgColor(type, theme.palette, color);
+  }, [type, theme.palette, color]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
+  }, children && /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+  }, children), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+  }), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+  }), /*#__PURE__*/React.createElement("i", {
+    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2201634259",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]
+  }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
+};
+LoadingComponent.displayName = 'Loading';
+var Loading = withScale(LoadingComponent);
+
+var ButtonLoading = function ButtonLoading(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-212623367" + " " + "btn-loading"
+  }, /*#__PURE__*/React.createElement(Loading, {
+    color: color
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "212623367"
+  }, ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"));
+};
+ButtonLoading.displayName = 'GeistButtonLoading';
+
+var _excluded$9 = ["isRight", "isSingle", "children", "className"];
+var ButtonIcon = function ButtonIcon(_ref) {
+  var _ref$isRight = _ref.isRight,
+    isRight = _ref$isRight === undefined ? false : _ref$isRight,
+    isSingle = _ref.isSingle,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  var classes = useClasses('icon', {
+    right: isRight,
+    single: isSingle
+  }, className);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2467502931"
+  }, ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"));
+};
+ButtonIcon.displayName = 'ButtonIcon';
+
+var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
+  var icon = icons.icon,
+    iconRight = icons.iconRight;
+  var hasIcon = icon || iconRight;
+  var isRight = Boolean(iconRight);
+  var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
+  var classes = useClasses('text', isRight ? 'right' : 'left');
+  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, children);
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/React.createElement(ButtonIcon, {
+      isRight: isRight,
+      isSingle: true
+    }, hasIcon);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
+    isRight: isRight
+  }, hasIcon), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3568181479",
+    dynamic: [paddingForAutoMode, paddingForAutoMode]
+  }, ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}"))));
+};
+var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
+  if (!config.isButtonGroup) return props;
+  return _objectSpread2(_objectSpread2({}, props), {}, {
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled
+  });
+};
+
+/* "use client" */
+
+var defaultContext$2 = {
+  isButtonGroup: false,
+  disabled: false
+};
+var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$2);
+var useButtonGroupContext = function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
+};
+
+var hexToRgb = function hexToRgb(color) {
+  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  var full = color.replace(fullReg, function (_, r, g, b) {
+    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+  });
+  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+  if (!values) {
+    throw new Error("Helpdice UI: Unsupported ".concat(color, " color."));
+  }
+  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
+};
+var colorToRgbValues = function colorToRgbValues(color) {
+  if (color.charAt(0) === '#') return hexToRgb(color);
+  var safeColor = color.replace(/ /g, '');
+  var colorType = color.substr(0, 4);
+  var regArray = safeColor.match(/\((.+)\)/);
   if (!colorType.startsWith('rgb') || !regArray) {
     console.log(color);
     throw new Error("Helpdice UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
@@ -30751,1093 +30692,474 @@ var addColorAlpha = function addColorAlpha(color, 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);
+var getButtonGhostColors = function getButtonGhostColors(palette, type) {
+  var colors = {
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground,
+      color: palette.foreground
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success,
+      color: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning,
+      color: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error,
+      color: palette.error
+    }
   };
-  return /*#__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);
+  return colors[type] || null;
 };
-
-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');
+var getButtonColors = function getButtonColors(palette, props) {
+  var type = props.type,
+    disabled = props.disabled,
+    ghost = props.ghost;
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.border,
+      color: palette.accents_5
     },
-    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');
+    secondary: {
+      bg: palette.foreground,
+      border: palette.foreground,
+      color: palette.background
     },
-    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);
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: '#fff'
     },
-    onMouseEnter: function onMouseEnter() {
-      return setShowMore(true);
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: '#fff'
     },
-    onMouseLeave: function onMouseLeave() {
-      return setShowMore(false);
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: '#fff'
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
     }
-  }, 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';
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
 
-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;
-      });
+  /**
+   * The '-light' type is the same color as the common type,
+   * only hover's color is different.
+   * e.g.
+   *   Color['success'] === Color['success-light']
+   *   Color['warning'] === Color['warning-light']
+   */
+  var withoutLightType = type === null || type === undefined ? undefined : type.replace('-light', '');
+  var defaultColor = colors["default"];
+  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
+  var colors = {
+    secondary: {
+      bg: palette.foreground,
+      border: palette.background,
+      color: palette.background
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: 'white'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: 'white'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: 'white'
     }
-  }), renderItem(count, current));
+  };
+  var withoutLightType = type.replace('-light', '');
+  return colors[withoutLightType] || null;
 };
-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 getButtonHoverColors = function getButtonHoverColors(palette, props) {
+  var type = props.type,
+    disabled = props.disabled,
+    loading = props.loading,
+    shadow = props.shadow,
+    ghost = props.ghost;
+  var defaultColor = getButtonColors(palette, props);
+  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    secondary: {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    },
+    'secondary-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'success-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'warning-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    }),
+    'error-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+      bg: alphaBackground
+    })
   };
-  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;}")));
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
+  if (loading) return _objectSpread2(_objectSpread2({}, defaultColor), {}, {
+    color: 'transparent'
+  });
+  if (shadow) return defaultColor;
+  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors["default"];
+  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
+    color: hoverColor.color || hoverColor.border
+  });
+};
+var getButtonCursor = function getButtonCursor(disabled, loading) {
+  if (disabled) return {
+    cursor: 'not-allowed',
+    events: 'auto'
+  };
+  if (loading) return {
+    cursor: 'default',
+    events: 'none'
+  };
+  return {
+    cursor: 'pointer',
+    events: 'auto'
+  };
+};
+var getButtonDripColor = function getButtonDripColor(palette, props) {
+  var type = props.type;
+  var isLightHover = type ? type.endsWith('light') : false;
+  var hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
-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 _excluded$8 = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
+  var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  var ref = React.useRef(null);
-  var _useRealShape = useRealShape(ref),
-    _useRealShape2 = _slicedToArray(_useRealShape, 2),
-    width = _useRealShape2[0].width,
-    updateShape = _useRealShape2[1];
-  var _useState = React.useState([]),
+  var buttonRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  });
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    columns = _useState2[0],
-    setColumns = _useState2[1];
-  var _useState3 = React.useState(initialData),
+    dripShow = _useState2[0],
+    setDripShow = _useState2[1];
+  var _useState3 = React.useState(0),
     _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();
-  });
+    dripX = _useState4[0],
+    setDripX = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dripY = _useState6[0],
+    setDripY = _useState6[1];
+  var groupConfig = useButtonGroupContext();
+  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  var children = filteredProps.children,
+    _filteredProps$disabl = filteredProps.disabled,
+    disabled = _filteredProps$disabl === undefined ? false : _filteredProps$disabl;
+    filteredProps.type;
+    var _filteredProps$loadin = filteredProps.loading,
+    loading = _filteredProps$loadin === undefined ? false : _filteredProps$loadin,
+    _filteredProps$shadow = filteredProps.shadow,
+    shadow = _filteredProps$shadow === undefined ? false : _filteredProps$shadow,
+    _filteredProps$ghost = filteredProps.ghost,
+    ghost = _filteredProps$ghost === undefined ? false : _filteredProps$ghost,
+    _filteredProps$effect = filteredProps.effect,
+    effect = _filteredProps$effect === undefined ? true : _filteredProps$effect,
+    onClick = filteredProps.onClick,
+    _filteredProps$auto = filteredProps.auto,
+    auto = _filteredProps$auto === undefined ? false : _filteredProps$auto,
+    icon = filteredProps.icon,
+    _filteredProps$htmlTy = filteredProps.htmlType,
+    htmlType = _filteredProps$htmlTy === undefined ? 'button' : _filteredProps$htmlTy,
+    iconRight = filteredProps.iconRight,
+    _filteredProps$classN = filteredProps.className,
+    className = _filteredProps$classN === undefined ? '' : _filteredProps$classN;
+    filteredProps.crossOrigin;
+    var props = _objectWithoutProperties(filteredProps, _excluded$8);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
 
-  // 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 _useMemo = React.useMemo(function () {
+      return getButtonColors(theme.palette, filteredProps);
+    }, [theme.palette, filteredProps]),
+    bg = _useMemo.bg,
+    border = _useMemo.border,
+    color = _useMemo.color;
+  var hover = React.useMemo(function () {
+    return getButtonHoverColors(theme.palette, filteredProps);
+  }, [theme.palette, filteredProps]);
+  var _useMemo2 = React.useMemo(function () {
+      return getButtonCursor(disabled, loading);
+    }, [disabled, loading]),
+    cursor = _useMemo2.cursor,
+    events = _useMemo2.events;
+  var dripColor = React.useMemo(function () {
+    return getButtonDripColor(theme.palette, filteredProps);
+  }, [theme.palette, filteredProps]);
 
-var ButtonDrip = function ButtonDrip(_ref) {
-  var _ref$x = _ref.x,
-    x = _ref$x === undefined ? 0 : _ref$x,
-    _ref$y = _ref.y,
-    y = _ref$y === undefined ? 0 : _ref$y,
-    color = _ref.color,
-    onCompleted = _ref.onCompleted;
-  var dripRef = React.useRef(null);
-  /* istanbul ignore next */
-  var top = Number.isNaN(+y) ? 0 : y - 10;
   /* istanbul ignore next */
-  var left = Number.isNaN(+x) ? 0 : x - 10;
-  React.useEffect(function () {
+  var dripCompletedHandle = function dripCompletedHandle() {
+    setDripShow(false);
+    setDripX(0);
+    setDripY(0);
+  };
+  var clickHandler = function clickHandler(event) {
+    if (disabled || loading) return;
+    var showDrip = !shadow && !ghost && effect;
     /* istanbul ignore next */
-    if (!dripRef.current) return;
-    dripRef.current.addEventListener('animationend', onCompleted);
-    return function () {
-      /* istanbul ignore next */
-      if (!dripRef.current) return;
-      dripRef.current.removeEventListener('animationend', onCompleted);
-    };
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    ref: dripRef,
-    className: "jsx-3424889537" + " " + "drip"
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    style: {
-      top: top,
-      left: left
-    },
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd",
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: color,
-    className: "jsx-3424889537"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "100%",
-    height: "100%",
-    rx: "10",
-    className: "jsx-3424889537"
-  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3424889537"
-  }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
-};
-ButtonDrip.displayName = 'ButtonDrip';
+    if (showDrip && buttonRef.current) {
+      var rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
+    }
+    onClick && onClick(event);
+  };
+  var childrenWithIcon = React.useMemo(function () {
+    return getButtonChildrenWithIcon(auto, children, {
+      icon: icon,
+      iconRight: iconRight
+    });
+  }, [auto, children, icon, iconRight]);
+  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
+    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: buttonRef,
+    type: htmlType,
+    disabled: disabled,
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["22324076", [SCALES.height(2.5), theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
+    x: dripX,
+    y: dripY,
+    color: dripColor,
+    onCompleted: dripCompletedHandle
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "22324076",
+    dynamic: [SCALES.height(2.5), theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
+  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
+});
+ButtonComponent.displayName = 'Button';
+var Button = withScale(ButtonComponent);
 
-var _excluded$5 = ["children", "type", "color", "className", "spaceRatio"];
-var getIconBgColor = function getIconBgColor(type, palette, color) {
+var getColors = function getColors(type, palette) {
   var colors = {
-    "default": palette.accents_6,
-    secondary: palette.secondary,
+    "default": palette.background,
     success: palette.success,
     warning: palette.warning,
-    error: palette.error
+    error: palette.error,
+    secondary: palette.secondary,
+    dark: palette.foreground,
+    lite: palette.background
+  };
+  var color = type === 'lite' || type === 'default' ? palette.foreground : palette.background;
+  return {
+    color: color,
+    bgColor: colors[type]
   };
-  return color ? color : colors[type];
-};
-var LoadingComponent = function LoadingComponent(_ref) {
-  var children = _ref.children,
-    _ref$type = _ref.type,
-    type = _ref$type === undefined ? 'default' : _ref$type,
-    color = _ref.color,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    _ref$spaceRatio = _ref.spaceRatio,
-    spaceRatio = _ref$spaceRatio === undefined ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$5);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var classes = useClasses('loading-container', className);
-  var bgColor = React.useMemo(function () {
-    return getIconBgColor(type, theme.palette, color);
-  }, [type, theme.palette, color]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
-  }, children && /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
-  }, children), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
-  }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["2201634259", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2201634259",
-    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]
-  }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:").concat(theme.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
-};
-LoadingComponent.displayName = 'Loading';
-var Loading = withScale(LoadingComponent);
-
-var ButtonLoading = function ButtonLoading(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-212623367" + " " + "btn-loading"
-  }, /*#__PURE__*/React.createElement(Loading, {
-    color: color
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "212623367"
-  }, ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"));
 };
-ButtonLoading.displayName = 'GeistButtonLoading';
 
-var _excluded$4 = ["isRight", "isSingle", "children", "className"];
-var ButtonIcon = function ButtonIcon(_ref) {
-  var _ref$isRight = _ref.isRight,
-    isRight = _ref$isRight === undefined ? false : _ref$isRight,
-    isSingle = _ref.isSingle,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  var classes = useClasses('icon', {
-    right: isRight,
-    single: isSingle
-  }, className);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: "jsx-2467502931" + " " + (props && props.className != null && props.className || classes || "")
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2467502931"
-  }, ".icon.jsx-2467502931{position:absolute;left:var(--helpdice-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--helpdice-ui-button-color);z-index:1;}.right.jsx-2467502931{right:var(--helpdice-ui-button-icon-padding);left:auto;}.icon.jsx-2467502931 svg{background:transparent;height:calc(var(--helpdice-ui-button-height) / 2.35);width:calc(var(--helpdice-ui-button-height) / 2.35);}.single.jsx-2467502931{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"));
+var defaultTooltipPosition = {
+  top: '-1000px',
+  left: '-1000px',
+  transform: 'none'
 };
-ButtonIcon.displayName = 'ButtonIcon';
-
-var getButtonChildrenWithIcon = function getButtonChildrenWithIcon(auto, children, icons) {
-  var icon = icons.icon,
-    iconRight = icons.iconRight;
-  var hasIcon = icon || iconRight;
-  var isRight = Boolean(iconRight);
-  var paddingForAutoMode = auto ? "calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding) * .5)" : 0;
-  var classes = useClasses('text', isRight ? 'right' : 'left');
-  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
-    className: "text"
-  }, children);
-  if (React.Children.count(children) === 0) {
-    return /*#__PURE__*/React.createElement(ButtonIcon, {
-      isRight: isRight,
-      isSingle: true
-    }, hasIcon);
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
-    isRight: isRight
-  }, hasIcon), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3568181479",
-    dynamic: [paddingForAutoMode, paddingForAutoMode]
-  }, ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}"))));
-};
-var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
-  if (!config.isButtonGroup) return props;
-  return _objectSpread2(_objectSpread2({}, props), {}, {
-    auto: true,
-    shadow: false,
-    ghost: config.ghost || props.ghost,
-    type: config.type || props.type,
-    disabled: config.disabled || props.disabled
-  });
-};
-
-/* "use client" */
-
-var defaultContext$1 = {
-  isButtonGroup: false,
-  disabled: false
-};
-var ButtonGroupContext = /*#__PURE__*/React.createContext(defaultContext$1);
-var useButtonGroupContext = function useButtonGroupContext() {
-  return React.useContext(ButtonGroupContext);
-};
-
-var getButtonGhostColors = function getButtonGhostColors(palette, type) {
-  var colors = {
-    secondary: {
-      bg: palette.background,
-      border: palette.foreground,
-      color: palette.foreground
+var getPosition = function getPosition(placement, rect, offset) {
+  var positions = {
+    top: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left + rect.width / 2, "px"),
+      transform: 'translate(-50%, -100%)'
     },
-    success: {
-      bg: palette.background,
-      border: palette.success,
-      color: palette.success
+    topStart: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left, "px"),
+      transform: 'translate(0, -100%)'
     },
-    warning: {
-      bg: palette.background,
-      border: palette.warning,
-      color: palette.warning
+    topEnd: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left + rect.width, "px"),
+      transform: 'translate(-100%, -100%)'
     },
-    error: {
-      bg: palette.background,
-      border: palette.error,
-      color: palette.error
-    }
-  };
-  return colors[type] || null;
-};
-var getButtonColors = function getButtonColors(palette, props) {
-  var type = props.type,
-    disabled = props.disabled,
-    ghost = props.ghost;
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.border,
-      color: palette.accents_5
+    bottom: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left + rect.width / 2, "px"),
+      transform: 'translate(-50%, 0)'
     },
-    secondary: {
-      bg: palette.foreground,
-      border: palette.foreground,
-      color: palette.background
+    bottomStart: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left, "px"),
+      transform: 'translate(0, 0)'
     },
-    success: {
-      bg: palette.success,
-      border: palette.success,
-      color: '#fff'
+    bottomEnd: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left + rect.width, "px"),
+      transform: 'translate(-100%, 0)'
     },
-    warning: {
-      bg: palette.warning,
-      border: palette.warning,
-      color: '#fff'
+    left: {
+      top: "".concat(rect.top + rect.height / 2, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, -50%)'
     },
-    error: {
-      bg: palette.error,
-      border: palette.error,
-      color: '#fff'
+    leftStart: {
+      top: "".concat(rect.top, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, 0)'
     },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5
-    }
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc'
-  };
-
-  /**
-   * The '-light' type is the same color as the common type,
-   * only hover's color is different.
-   * e.g.
-   *   Color['success'] === Color['success-light']
-   *   Color['warning'] === Color['warning-light']
-   */
-  var withoutLightType = type === null || type === undefined ? undefined : type.replace('-light', '');
-  var defaultColor = colors["default"];
-  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
-  return colors[withoutLightType] || defaultColor;
-};
-var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
-  var colors = {
-    secondary: {
-      bg: palette.foreground,
-      border: palette.background,
-      color: palette.background
+    leftEnd: {
+      top: "".concat(rect.top + rect.height, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, -100%)'
     },
-    success: {
-      bg: palette.success,
-      border: palette.background,
-      color: 'white'
+    right: {
+      top: "".concat(rect.top + rect.height / 2, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, -50%)'
     },
-    warning: {
-      bg: palette.warning,
-      border: palette.background,
-      color: 'white'
+    rightStart: {
+      top: "".concat(rect.top, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, 0)'
     },
-    error: {
-      bg: palette.error,
-      border: palette.background,
-      color: 'white'
+    rightEnd: {
+      top: "".concat(rect.top + rect.height, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, -100%)'
     }
   };
-  var withoutLightType = type.replace('-light', '');
-  return colors[withoutLightType] || null;
+  return positions[placement] || positions.top;
 };
-var getButtonHoverColors = function getButtonHoverColors(palette, props) {
-  var type = props.type,
-    disabled = props.disabled,
-    loading = props.loading,
-    shadow = props.shadow,
-    ghost = props.ghost;
-  var defaultColor = getButtonColors(palette, props);
-  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
-  var colors = {
-    "default": {
-      bg: palette.background,
-      border: palette.foreground
+var getIconPosition = function getIconPosition(placement, offsetX, offsetY) {
+  var offsetAbsolute = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '3px';
+  var positions = {
+    top: {
+      top: 'auto',
+      right: 'auto',
+      left: '50%',
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(-50%, 100%) rotate(-90deg)'
     },
-    secondary: {
-      bg: palette.background,
-      border: palette.foreground
+    topStart: {
+      top: 'auto',
+      right: 'auto',
+      left: "".concat(offsetX),
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(0, 100%) rotate(-90deg)'
     },
-    success: {
-      bg: palette.background,
-      border: palette.success
+    topEnd: {
+      top: 'auto',
+      right: "".concat(offsetX),
+      left: 'auto',
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(0, 100%) rotate(-90deg)'
     },
-    warning: {
-      bg: palette.background,
-      border: palette.warning
+    bottom: {
+      top: "".concat(offsetAbsolute),
+      right: 'auto',
+      left: '50%',
+      bottom: 'auto',
+      transform: 'translate(-50%, -100%) rotate(90deg)'
     },
-    error: {
-      bg: palette.background,
-      border: palette.error
+    bottomStart: {
+      top: "".concat(offsetAbsolute),
+      right: 'auto',
+      left: "".concat(offsetX),
+      bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
     },
-    abort: {
-      bg: 'transparent',
-      border: 'transparent',
-      color: palette.accents_5
-    },
-    'secondary-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'success-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'warning-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    }),
-    'error-light': _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-      bg: alphaBackground
-    })
-  };
-  if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc'
-  };
-  if (loading) return _objectSpread2(_objectSpread2({}, defaultColor), {}, {
-    color: 'transparent'
-  });
-  if (shadow) return defaultColor;
-  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors["default"];
-  return _objectSpread2(_objectSpread2({}, hoverColor), {}, {
-    color: hoverColor.color || hoverColor.border
-  });
-};
-var getButtonCursor = function getButtonCursor(disabled, loading) {
-  if (disabled) return {
-    cursor: 'not-allowed',
-    events: 'auto'
-  };
-  if (loading) return {
-    cursor: 'default',
-    events: 'none'
-  };
-  return {
-    cursor: 'pointer',
-    events: 'auto'
-  };
-};
-var getButtonDripColor = function getButtonDripColor(palette, props) {
-  var type = props.type;
-  var isLightHover = type ? type.endsWith('light') : false;
-  var hoverColors = getButtonHoverColors(palette, props);
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
-};
-
-var _excluded$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(),
-    SCALES = _useScale.SCALES;
-  var buttonRef = React.useRef(null);
-  React.useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  });
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    dripShow = _useState2[0],
-    setDripShow = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dripX = _useState4[0],
-    setDripX = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    dripY = _useState6[0],
-    setDripY = _useState6[1];
-  var groupConfig = useButtonGroupContext();
-  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  var children = filteredProps.children,
-    _filteredProps$disabl = filteredProps.disabled,
-    disabled = _filteredProps$disabl === undefined ? false : _filteredProps$disabl;
-    filteredProps.type;
-    var _filteredProps$loadin = filteredProps.loading,
-    loading = _filteredProps$loadin === undefined ? false : _filteredProps$loadin,
-    _filteredProps$shadow = filteredProps.shadow,
-    shadow = _filteredProps$shadow === undefined ? false : _filteredProps$shadow,
-    _filteredProps$ghost = filteredProps.ghost,
-    ghost = _filteredProps$ghost === undefined ? false : _filteredProps$ghost,
-    _filteredProps$effect = filteredProps.effect,
-    effect = _filteredProps$effect === undefined ? true : _filteredProps$effect,
-    onClick = filteredProps.onClick,
-    _filteredProps$auto = filteredProps.auto,
-    auto = _filteredProps$auto === undefined ? false : _filteredProps$auto,
-    icon = filteredProps.icon,
-    _filteredProps$htmlTy = filteredProps.htmlType,
-    htmlType = _filteredProps$htmlTy === undefined ? 'button' : _filteredProps$htmlTy,
-    iconRight = filteredProps.iconRight,
-    _filteredProps$classN = filteredProps.className,
-    className = _filteredProps$classN === undefined ? '' : _filteredProps$classN;
-    filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$3);
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-
-  var _useMemo = React.useMemo(function () {
-      return getButtonColors(theme.palette, filteredProps);
-    }, [theme.palette, filteredProps]),
-    bg = _useMemo.bg,
-    border = _useMemo.border,
-    color = _useMemo.color;
-  var hover = React.useMemo(function () {
-    return getButtonHoverColors(theme.palette, filteredProps);
-  }, [theme.palette, filteredProps]);
-  var _useMemo2 = React.useMemo(function () {
-      return getButtonCursor(disabled, loading);
-    }, [disabled, loading]),
-    cursor = _useMemo2.cursor,
-    events = _useMemo2.events;
-  var dripColor = React.useMemo(function () {
-    return getButtonDripColor(theme.palette, filteredProps);
-  }, [theme.palette, filteredProps]);
-
-  /* istanbul ignore next */
-  var dripCompletedHandle = function dripCompletedHandle() {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-  var clickHandler = function clickHandler(event) {
-    if (disabled || loading) return;
-    var showDrip = !shadow && !ghost && effect;
-    /* istanbul ignore next */
-    if (showDrip && buttonRef.current) {
-      var rect = buttonRef.current.getBoundingClientRect();
-      setDripShow(true);
-      setDripX(event.clientX - rect.left);
-      setDripY(event.clientY - rect.top);
-    }
-    onClick && onClick(event);
-  };
-  var childrenWithIcon = React.useMemo(function () {
-    return getButtonChildrenWithIcon(auto, children, {
-      icon: icon,
-      iconRight: iconRight
-    });
-  }, [auto, children, icon, iconRight]);
-  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
-    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
-  return /*#__PURE__*/React.createElement("button", _extends({
-    ref: buttonRef,
-    type: htmlType,
-    disabled: disabled,
-    onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["22324076", [SCALES.height(2.5), theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
-  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
-    color: color
-  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
-    x: dripX,
-    y: dripY,
-    color: dripColor,
-    onCompleted: dripCompletedHandle
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "22324076",
-    dynamic: [SCALES.height(2.5), theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
-  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
-});
-ButtonComponent.displayName = 'Button';
-var Button = withScale(ButtonComponent);
-
-var getColors = function getColors(type, palette) {
-  var colors = {
-    "default": palette.background,
-    success: palette.success,
-    warning: palette.warning,
-    error: palette.error,
-    secondary: palette.secondary,
-    dark: palette.foreground,
-    lite: palette.background
-  };
-  var color = type === 'lite' || type === 'default' ? palette.foreground : palette.background;
-  return {
-    color: color,
-    bgColor: colors[type]
-  };
-};
-
-var defaultTooltipPosition = {
-  top: '-1000px',
-  left: '-1000px',
-  transform: 'none'
-};
-var getPosition = function getPosition(placement, rect, offset) {
-  var positions = {
-    top: {
-      top: "".concat(rect.top - offset, "px"),
-      left: "".concat(rect.left + rect.width / 2, "px"),
-      transform: 'translate(-50%, -100%)'
-    },
-    topStart: {
-      top: "".concat(rect.top - offset, "px"),
-      left: "".concat(rect.left, "px"),
-      transform: 'translate(0, -100%)'
-    },
-    topEnd: {
-      top: "".concat(rect.top - offset, "px"),
-      left: "".concat(rect.left + rect.width, "px"),
-      transform: 'translate(-100%, -100%)'
-    },
-    bottom: {
-      top: "".concat(rect.bottom + offset, "px"),
-      left: "".concat(rect.left + rect.width / 2, "px"),
-      transform: 'translate(-50%, 0)'
-    },
-    bottomStart: {
-      top: "".concat(rect.bottom + offset, "px"),
-      left: "".concat(rect.left, "px"),
-      transform: 'translate(0, 0)'
-    },
-    bottomEnd: {
-      top: "".concat(rect.bottom + offset, "px"),
-      left: "".concat(rect.left + rect.width, "px"),
-      transform: 'translate(-100%, 0)'
+    bottomEnd: {
+      top: "".concat(offsetAbsolute),
+      right: "".concat(offsetX),
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
     },
     left: {
-      top: "".concat(rect.top + rect.height / 2, "px"),
-      left: "".concat(rect.left - offset, "px"),
-      transform: 'translate(-100%, -50%)'
+      top: '50%',
+      right: '0',
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
     },
     leftStart: {
-      top: "".concat(rect.top, "px"),
-      left: "".concat(rect.left - offset, "px"),
-      transform: 'translate(-100%, 0)'
+      top: "".concat(offsetY),
+      right: '0',
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
     },
     leftEnd: {
-      top: "".concat(rect.top + rect.height, "px"),
-      left: "".concat(rect.left - offset, "px"),
-      transform: 'translate(-100%, -100%)'
+      top: 'auto',
+      right: '0',
+      left: 'auto',
+      bottom: "".concat(offsetY),
+      transform: 'translate(100%, 50%) rotate(180deg)'
     },
     right: {
-      top: "".concat(rect.top + rect.height / 2, "px"),
-      left: "".concat(rect.right + offset, "px"),
-      transform: 'translate(0, -50%)'
+      top: '50%',
+      right: 'auto',
+      left: '0',
+      bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
     },
     rightStart: {
-      top: "".concat(rect.top, "px"),
-      left: "".concat(rect.right + offset, "px"),
-      transform: 'translate(0, 0)'
-    },
-    rightEnd: {
-      top: "".concat(rect.top + rect.height, "px"),
-      left: "".concat(rect.right + offset, "px"),
-      transform: 'translate(0, -100%)'
-    }
-  };
-  return positions[placement] || positions.top;
-};
-var getIconPosition = function getIconPosition(placement, offsetX, offsetY) {
-  var offsetAbsolute = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '3px';
-  var positions = {
-    top: {
-      top: 'auto',
-      right: 'auto',
-      left: '50%',
-      bottom: "".concat(offsetAbsolute),
-      transform: 'translate(-50%, 100%) rotate(-90deg)'
-    },
-    topStart: {
-      top: 'auto',
-      right: 'auto',
-      left: "".concat(offsetX),
-      bottom: "".concat(offsetAbsolute),
-      transform: 'translate(0, 100%) rotate(-90deg)'
-    },
-    topEnd: {
-      top: 'auto',
-      right: "".concat(offsetX),
-      left: 'auto',
-      bottom: "".concat(offsetAbsolute),
-      transform: 'translate(0, 100%) rotate(-90deg)'
-    },
-    bottom: {
-      top: "".concat(offsetAbsolute),
-      right: 'auto',
-      left: '50%',
-      bottom: 'auto',
-      transform: 'translate(-50%, -100%) rotate(90deg)'
-    },
-    bottomStart: {
-      top: "".concat(offsetAbsolute),
-      right: 'auto',
-      left: "".concat(offsetX),
-      bottom: 'auto',
-      transform: 'translate(0, -100%) rotate(90deg)'
-    },
-    bottomEnd: {
-      top: "".concat(offsetAbsolute),
-      right: "".concat(offsetX),
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(0, -100%) rotate(90deg)'
-    },
-    left: {
-      top: '50%',
-      right: '0',
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(100%, -50%) rotate(180deg)'
-    },
-    leftStart: {
-      top: "".concat(offsetY),
-      right: '0',
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(100%, -50%) rotate(180deg)'
-    },
-    leftEnd: {
-      top: 'auto',
-      right: '0',
-      left: 'auto',
-      bottom: "".concat(offsetY),
-      transform: 'translate(100%, 50%) rotate(180deg)'
-    },
-    right: {
-      top: '50%',
-      right: 'auto',
-      left: '0',
-      bottom: 'auto',
-      transform: 'translate(-100%, -50%) rotate(0deg)'
-    },
-    rightStart: {
-      top: "".concat(offsetY),
-      right: 'auto',
-      left: '0',
-      bottom: 'auto',
-      transform: 'translate(-100%, -50%) rotate(0deg)'
+      top: "".concat(offsetY),
+      right: 'auto',
+      left: '0',
+      bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
     },
     rightEnd: {
       top: 'auto',
@@ -31973,7 +31295,7 @@ var useClickAway = function useClickAway(ref, handler) {
   }, [ref]);
 };
 
-var _excluded$2 = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
+var _excluded$7 = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
 var TooltipComponent = function TooltipComponent(_ref) {
   var children = _ref.children,
     _ref$initialVisible = _ref.initialVisible,
@@ -32000,7 +31322,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     _ref$hideArrow = _ref.hideArrow,
     hideArrow = _ref$hideArrow === undefined ? false : _ref$hideArrow,
     customVisible = _ref.visible,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var timer = React.useRef();
   var ref = React.useRef(null);
   var _useState = React.useState(initialVisible),
@@ -32083,16 +31405,16 @@ var Tooltip = withScale(TooltipComponent);
 
 /* "use client" */
 
-var defaultContext = {
+var defaultContext$1 = {
   disableItemsAutoClose: false,
   onItemClick: function onItemClick() {}
 };
-var PopoverContext = /*#__PURE__*/React.createContext(defaultContext);
+var PopoverContext = /*#__PURE__*/React.createContext(defaultContext$1);
 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 _excluded$6 = ["child", "children", "enterDelay", "leaveDelay", "offset", "type", "trigger", "placement", "initialVisible", "portalClassName", "disableItemsAutoClose", "onVisibleChange", "visible"];
 var PopoverComponent = function PopoverComponent(_ref) {
   var child = _ref.child,
     children = _ref.children,
@@ -32117,7 +31439,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
     _ref$onVisibleChange = _ref.onVisibleChange,
     onVisibleChange = _ref$onVisibleChange === undefined ? function () {} : _ref$onVisibleChange,
     customVisible = _ref.visible,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _useState = React.useState(initialVisible),
@@ -32166,7 +31488,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
 PopoverComponent.displayName = 'Popover';
 var Popover = withScale(PopoverComponent);
 
-var _excluded = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
+var _excluded$5 = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
 var PopoverItemComponent = function PopoverItemComponent(_ref) {
   var children = _ref.children,
     _ref$line = _ref.line,
@@ -32178,7 +31500,7 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     onClick = _ref.onClick,
     _ref$disableAutoClose = _ref.disableAutoClose,
     disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -32301,34 +31623,6 @@ function DataTable(_ref) {
       }
     });
   }, [hideColumn, cols, rows]);
-
-  // const handleClick = (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>, id: any) => {
-  //     if (readOnly) {
-  //         return true;
-  //     }
-  //     const selectedIndex = selected.indexOf(id as never);
-  //     let newSelected: never[] | ((prevState: never[]) => never[]) = [];
-  //     if (selectedIndex === -1) {
-  //         newSelected = newSelected.concat(selected, id);
-  //     } else if (selectedIndex === 0) {
-  //         newSelected = newSelected.concat(selected.slice(1));
-  //     } else if (selectedIndex === selected.length - 1) {
-  //         newSelected = newSelected.concat(selected.slice(0, -1));
-  //     } else if (selectedIndex > 0) {
-  //         newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
-  //     }
-  //     setSelected(newSelected);
-  // };
-
-  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
-  //     if (event.target.checked) {
-  //         const newSelecteds = rows.map((n: { _id: any }) => n._id);
-  //         setSelected(newSelecteds as never[]);
-  //         return;
-  //     }
-  //     setSelected([]);
-  // };
-
   var handleHideColumnClick = function handleHideColumnClick(_event, id) {
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
@@ -32427,7 +31721,7 @@ function DataTable(_ref) {
     },
     justify: "flex-end",
     alignContent: "center"
-  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
+  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Edit Selected",
     placement: "bottom",
     font: 0.8,
@@ -32442,7 +31736,7 @@ function DataTable(_ref) {
     auto: true,
     scale: 2 / 3,
     px: 0.6
-  })) : null, onSelectedDelete ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Delete Selected",
     placement: "bottom",
     font: 0.8,
@@ -32457,7 +31751,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Delete$1, null)
-  })) : null), onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Refresh",
     placement: "bottom",
     font: 0.8,
@@ -32566,7 +31860,700 @@ function DataTable(_ref) {
     });
   })))));
 }
-var dataTable = /*#__PURE__*/React.memo(DataTable);
+var DataTable$1 = /*#__PURE__*/React.memo(DataTable);
+
+var TableBody = function TableBody(_ref) {
+  var data = _ref.data,
+    emptyText = _ref.emptyText,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell,
+    rowClassName = _ref.rowClassName,
+    _ref$rowDraggable = _ref.rowDraggable,
+    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    onSelected = _ref.onSelected;
+  var theme = useTheme();
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var _useTableContext = useTableContext(),
+    columns = _useTableContext.columns;
+  // const rowClickHandler = (row: TableDataItem, index: number) => {
+  //   onRow && onRow(row, index)
+  // }
+
+  var handleClick = function handleClick(_event, id) {
+    if (readOnly) {
+      return true;
+    }
+    var selectedIndex = selected.indexOf(id);
+    var newSelected = [];
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+    }
+    setSelected(newSelected);
+    if (newSelected.length > 0 && onSelected) {
+      onSelected(newSelected);
+    }
+  };
+
+  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
+  //   if (event.target.checked) {
+  //     const newSelecteds = data.map((n: any) => n._id);
+  //     setSelected(newSelecteds as never[]);
+  //     return;
+  //   }
+  //   setSelected([]);
+  // };
+
+  // Push Selected Rows
+  // useEffect(() => {
+  //   if (selected.length > 0 && onSelected) {
+  //     onSelected(selected);
+  //   }
+  // }, [selected]);
+
+  function renderRow(cols, row, index) {
+    var _row$style;
+    var urid = _.uniqueId();
+    var className = rowClassName(row, index);
+    var rw = _objectSpread2({}, row);
+    var rowStyle = (_row$style = row === null || row === undefined ? undefined : row.style) !== null && _row$style !== undefined ? _row$style : {};
+    var onDragStart = row === null || row === undefined ? undefined : row.onDragStart;
+    delete rw.table;
+    delete rw.style;
+    delete rw.onDragStart;
+    // console.log(row);
+    // const frow = Object.fromEntries(
+    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
+    // ) as unknown as TableDataItem
+    // console.log(frow);
+    var isRowSelected = selected.indexOf(row) !== -1;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+      draggable: rowDraggable,
+      role: "checkbox",
+      onDragStart: onDragStart,
+      "aria-checked": selected.indexOf(row) !== -1,
+      tabIndex: -1,
+      key: urid,
+      style: _objectSpread2({
+        cursor: 'pointer',
+        backgroundColor: isRowSelected ? '#efefef' : ''
+      }, rowStyle),
+      onClick: function onClick(e) {
+        if (!rowDraggable) {
+          if (onRow) {
+            onRow(row, index);
+          } else {
+            handleClick(e, row);
+          }
+        }
+      },
+      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      columns: cols,
+      row: rw,
+      rowIndex: index,
+      emptyText: emptyText,
+      onCellClick: onCell
+    })), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "2019708038",
+      dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+  }
+  if ((data === null || data === undefined ? undefined : data.length) === 0) {
+    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+      colSpan: columns === null || columns === undefined ? undefined : columns.length
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Placeholder, {
+      empty: true,
+      msg: "No Entries Found"
+    })))));
+  }
+  return /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+  }, data.map(function (row, index) {
+    var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
+    var qid = _.uniqueId();
+    if (row === null || row === undefined) {
+      var uid = _.uniqueId();
+      return /*#__PURE__*/React.createElement("tr", {
+        key: uid,
+        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+      }, /*#__PURE__*/React.createElement("td", {
+        colSpan: columns.length,
+        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+      }, "\u2003"));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
+      key: qid,
+      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: '1rem'
+      },
+      colSpan: columns.length,
+      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+    }, /*#__PURE__*/React.createElement(DataTable$1, {
+      readOnly: true,
+      stickyHeader: false,
+      style: _objectSpread2({
+        height: 'auto !important'
+      }, row === null || row === undefined || (_row$table = row.table) === null || _row$table === undefined ? undefined : _row$table.style),
+      menu: (_row$table2 = row.table) === null || _row$table2 === undefined ? undefined : _row$table2.menu,
+      rows: (_row$table3 = row.table) === null || _row$table3 === undefined ? undefined : _row$table3.rows,
+      heading: (_row$table4 = row.table) === null || _row$table4 === undefined ? undefined : _row$table4.heading,
+      cols: (_row$table5 = row.table) === null || _row$table5 === undefined ? undefined : _row$table5.cols
+    }))));
+
+    // return (
+    //   <tr
+    //     key={`tbody-row-${index}`}
+    //     className={useClasses({ hover }, className)}
+    //     onClick={() => rowClickHandler(row, index)}>
+    //     <TableCell<TableDataItem>
+    //       columns={columns}
+    //       row={row}
+    //       rowIndex={index}
+    //       emptyText={emptyText}
+    //       onCellClick={onCell}
+    //     />
+    //   </tr>
+    // )
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1422656197",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+};
+TableBody.displayName = 'TableBody';
+
+var getRealShape = function getRealShape(el) {
+  var defaultShape = {
+    width: 0,
+    height: 0
+  };
+  if (!el || typeof window === 'undefined') return defaultShape;
+  var rect = el.getBoundingClientRect();
+  var _window$getComputedSt = window.getComputedStyle(el),
+    width = _window$getComputedSt.width,
+    height = _window$getComputedSt.height;
+  var getCSSStyleVal = function getCSSStyleVal(str, parentNum) {
+    if (!str) return 0;
+    var strVal = str.includes('px') ? +str.split('px')[0] : str.includes('%') ? +str.split('%')[0] * parentNum * 0.01 : str;
+    return Number.isNaN(+strVal) ? 0 : +strVal;
+  };
+  return {
+    width: getCSSStyleVal("".concat(width), rect.width),
+    height: getCSSStyleVal("".concat(height), rect.height)
+  };
+};
+var useRealShape = function useRealShape(ref) {
+  var _useState = React.useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var update = function update() {
+    var _getRealShape = getRealShape(ref.current),
+      width = _getRealShape.width,
+      height = _getRealShape.height;
+    setState({
+      width: width,
+      height: height
+    });
+  };
+  React.useEffect(function () {
+    return update();
+  }, [ref.current]);
+  return [state, update];
+};
+
+/* "use client" */
+
+var TableColumn = function TableColumn(columnProps) {
+  var _ref = columnProps,
+    children = _ref.children,
+    prop = _ref.prop,
+    label = _ref.label,
+    width = _ref.width,
+    filter = _ref.filter,
+    options = _ref.options,
+    noWrap = _ref.noWrap,
+    align = _ref.align,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    renderHandler = _ref.render;
+  var _useTableContext = useTableContext(),
+    updateColumn = _useTableContext.updateColumn;
+  var safeProp = "".concat(prop.toString()).trim();
+  if (!safeProp) {
+    useWarning('The props "prop" is required.', 'Table.Column');
+  }
+  React.useEffect(function () {
+    updateColumn({
+      label: children || label,
+      filter: filter,
+      noWrap: noWrap,
+      options: options,
+      prop: safeProp,
+      width: width,
+      align: align,
+      fontSize: fontSize,
+      className: className,
+      renderHandler: function renderHandler() {}
+    });
+  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
+  return null;
+};
+TableColumn.displayName = 'TableColumn';
+
+var _excluded$4 = ["active", "children", "disabled", "onClick"];
+var PaginationItem = function PaginationItem(_ref) {
+  var active = _ref.active,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  var 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 = {};
+var PaginationContext = /*#__PURE__*/React.createContext(defaultContext);
+var usePaginationContext = function usePaginationContext() {
+  return React.useContext(PaginationContext);
+};
+
+var _excluded$3 = ["children"];
+var PaginationPrevious = function PaginationPrevious(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  var _usePaginationContext = usePaginationContext(),
+    update = _usePaginationContext.update,
+    isFirst = _usePaginationContext.isFirst;
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('prev');
+    },
+    disabled: isFirst
+  }, props), children);
+};
+PaginationPrevious.displayName = 'GeistPaginationPrevious';
+
+var _excluded$2 = ["children"];
+var PaginationNext = function PaginationNext(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  var _usePaginationContext = usePaginationContext(),
+    update = _usePaginationContext.update,
+    isLast = _usePaginationContext.isLast;
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('next');
+    },
+    disabled: isLast
+  }, props), children);
+};
+PaginationNext.displayName = '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$1 = ["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$1);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useCurrentState = useCurrentState(initialPage),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    page = _useCurrentState2[0],
+    setPage = _useCurrentState2[1],
+    pageRef = _useCurrentState2[2];
+  var _pickChild = pickChild(children, PaginationPrevious),
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    prevChildren = _pickChild2[1];
+  var _pickChild3 = pickChild(children, PaginationNext),
+    _pickChild4 = _slicedToArray(_pickChild3, 2),
+    nextChildren = _pickChild4[1];
+  var _useMemo = React.useMemo(function () {
+      var hasChildren = function hasChildren(c) {
+        return React.Children.count(c) > 0;
+      };
+      var prevDefault = /*#__PURE__*/React.createElement(PaginationPrevious, null, "prev");
+      var nextDefault = /*#__PURE__*/React.createElement(PaginationNext, null, "next");
+      return [hasChildren(prevChildren) ? prevChildren : prevDefault, hasChildren(nextChildren) ? nextChildren : nextDefault];
+    }, [prevChildren, nextChildren]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    prevItem = _useMemo2[0],
+    nextItem = _useMemo2[1];
+  var update = function update(type) {
+    if (type === 'prev' && pageRef.current > 1) {
+      setPage(function (last) {
+        return last - 1;
+      });
+    }
+    if (type === 'next' && pageRef.current < count) {
+      setPage(function (last) {
+        return last + 1;
+      });
+    }
+  };
+  var values = React.useMemo(function () {
+    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 = ["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);
+  /* 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;
 
-exports.DataTable = dataTable;
+exports.DataTable = DataTable$1;
 exports.default = Table;