@tipp/ui 2.10.3 → 2.10.5

package/dist/molecules/expand-table/index.cjs

@@ -64,8 +64,8 @@ __export(expand_table_exports, {
 });
 module.exports = __toCommonJS(expand_table_exports);
 var import_react_table2 = require("@tanstack/react-table");
-var import_react6 = require("react");
-var import_themes5 = require("@radix-ui/themes");
+var import_react7 = require("react");
+var import_themes7 = require("@radix-ui/themes");
 
 // src/atoms/flex.tsx
 var import_themes = require("@radix-ui/themes");
@@ -662,6 +662,29 @@ var HeadsetIcon = React15.forwardRef(
 );
 HeadsetIcon.displayName = "HeadsetIcon";
 
+// src/icons/empty-box.tsx
+var React16 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var EmptyBoxIcon = React16.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor", width = 120, height = 120 } = _b, props = __objRest(_b, ["color", "width", "height"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "svg",
+      __spreadProps(__spreadValues({
+        fill: color,
+        height,
+        viewBox: "0 0 462.035 462.035",
+        width,
+        xmlns: "http://www.w3.org/2000/svg"
+      }, props), {
+        ref: forwardedRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M457.83,158.441c-0.021-0.028-0.033-0.058-0.057-0.087l-50.184-62.48c-0.564-0.701-1.201-1.305-1.879-1.845c-2.16-2.562-5.355-4.225-8.967-4.225H65.292c-3.615,0-6.804,1.661-8.965,4.225c-0.678,0.54-1.316,1.138-1.885,1.845l-50.178,62.48c-0.023,0.029-0.034,0.059-0.057,0.087C1.655,160.602,0,163.787,0,167.39v193.07c0,6.5,5.27,11.771,11.77,11.771h438.496c6.5,0,11.77-5.271,11.77-11.771V167.39C462.037,163.787,460.381,160.602,457.83,158.441z M408.516,134.615l16.873,21.005h-16.873V134.615z M384.975,113.345v42.274H296.84c-2.514,0-4.955,0.805-6.979,2.293l-58.837,43.299l-58.849-43.305c-2.023-1.482-4.466-2.287-6.978-2.287H77.061v-42.274H384.975z M53.523,155.62H36.65l16.873-21.005V155.62z M438.498,348.69H23.54V179.16h137.796l62.711,46.148c4.15,3.046,9.805,3.052,13.954-0.005l62.698-46.144h137.799V348.69L438.498,348.69z" })
+      })
+    );
+  }
+);
+EmptyBoxIcon.displayName = "EmptyBoxIcon";
+
 // src/atoms/icon-button.tsx
 var import_react = require("react");
 var import_clsx = require("clsx");
@@ -722,7 +745,7 @@ var resolveColor = (color) => {
 };
 
 // src/atoms/icon-button.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var IconButton = (0, import_react.forwardRef)(
   (props, ref) => {
     const _a = props, { size, style, variant, color } = _a, restProps = __objRest(_a, ["size", "style", "variant", "color"]);
@@ -742,7 +765,7 @@ var IconButton = (0, import_react.forwardRef)(
         transparent: variant === "transparent"
       });
     }, [props.className, colorClassName, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_themes2.IconButton,
       __spreadProps(__spreadValues({
         style,
@@ -798,7 +821,7 @@ var MONO_STYLE = {
 };
 
 // src/atoms/typo.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Typo = (0, import_react2.forwardRef)(
   (props, ref) => {
     const _a = props, {
@@ -842,7 +865,7 @@ var Typo = (0, import_react2.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_themes3.Text,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_clsx2.clsx)(colorClassName, className),
@@ -858,7 +881,7 @@ var Typo = (0, import_react2.forwardRef)(
 Typo.displayName = "Typo";
 
 // src/atoms/pagination.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Pagination(props) {
   const { onChange, count = 0, siblingCount = 2 } = props;
   const isControlled = props.page !== void 0;
@@ -927,7 +950,7 @@ function Pagination(props) {
   const { color: resolvedColor, className: colorClassName } = resolveColor(
     props.color
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     import_themes.Flex,
     {
       align: "center",
@@ -935,18 +958,18 @@ function Pagination(props) {
       className: colorClassName ? `tipp-pagination ${colorClassName}` : "tipp-pagination",
       "data-accent-color": resolvedColor,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           IconButton,
           __spreadProps(__spreadValues({
             disabled: !doublePrev,
             onClick: onClickDoublePrev
           }, moveButtonProps), {
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes.Flex, { gap: "1", children: visibleItems.map((item) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes.Flex, { gap: "1", children: visibleItems.map((item) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "button",
             {
               className: `page-button ${item === page ? "active" : ""}`,
@@ -954,19 +977,19 @@ function Pagination(props) {
                 goToPage(item);
               },
               type: "button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typo, { variant: "body", children: item })
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { variant: "body", children: item })
             },
             item
           );
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           IconButton,
           __spreadProps(__spreadValues({
             disabled: !doubleNext,
             onClick: onClickDoubleNext
           }, moveButtonProps), {
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
           })
         )
       ]
@@ -977,41 +1000,153 @@ function Pagination(props) {
 // src/atoms/spinner.tsx
 var import_themes4 = require("@radix-ui/themes");
 
+// src/atoms/heading.tsx
+var import_themes5 = require("@radix-ui/themes");
+var import_clsx3 = require("clsx");
+var import_react4 = require("react");
+var import_themes6 = require("@radix-ui/themes");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var mapVariant = (variant) => {
+  switch (variant) {
+    case "heading1":
+      return "7";
+    case "heading2":
+      return "6";
+    case "heading3":
+      return "5";
+    case "heading4":
+      return "4";
+    case "heading5":
+      return "3";
+    default:
+      return void 0;
+  }
+};
+function Heading2(props) {
+  const _a = props, {
+    size,
+    children,
+    variant,
+    color,
+    className,
+    mono,
+    clamp,
+    style
+  } = _a, rest = __objRest(_a, [
+    "size",
+    "children",
+    "variant",
+    "color",
+    "className",
+    "mono",
+    "clamp",
+    "style"
+  ]);
+  const { color: radixColor, className: colorClassName } = (0, import_react4.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const radixSize = (0, import_react4.useMemo)(() => {
+    return variant ? mapWithResponsive({
+      value: variant,
+      mapFn: mapVariant
+    }) : size;
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_themes5.Heading,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx3.clsx)(colorClassName, className),
+      color: radixColor,
+      size: radixSize,
+      style: __spreadValues(__spreadValues(__spreadValues({}, mono ? MONO_STYLE : null), clamp ? clampStyle(clamp) : null), style),
+      children
+    })
+  );
+}
+
+// src/molecules/empty-state.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ICON_SIZE = {
+  illustration: 120,
+  compact: 56
+};
+function EmptyState(_a) {
+  var _b = _a, {
+    size = "illustration",
+    heading,
+    body,
+    icon
+  } = _b, flexProps = __objRest(_b, [
+    "size",
+    "heading",
+    "body",
+    "icon"
+  ]);
+  const isCompact = size === "compact";
+  const iconSize = ICON_SIZE[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_themes.Flex,
+    __spreadProps(__spreadValues({
+      align: "center",
+      direction: "column",
+      gap: isCompact ? "2" : "3",
+      justify: "center",
+      py: isCompact ? "5" : "9",
+      width: "100%"
+    }, flexProps), {
+      children: [
+        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          EmptyBoxIcon,
+          {
+            color: "var(--gray-8)",
+            height: iconSize,
+            width: iconSize
+          }
+        ),
+        heading || body ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_themes.Flex, { align: "center", direction: "column", gap: "1", children: [
+          heading ? isCompact ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { color: "gray", variant: "subtitle", children: heading }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Heading2, { color: "gray", variant: "heading5", children: heading }) : null,
+          body ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { color: "gray", variant: isCompact ? "caption" : "body", children: body }) : null
+        ] }) : null
+      ]
+    })
+  );
+}
+
 // src/molecules/expand-table/row.tsx
 var import_react_table = require("@tanstack/react-table");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/atoms/collapse.tsx
-var import_react4 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Collapse(props) {
   const { children, closedHeight = "0" } = props;
-  const [open, setOpen] = (0, import_react4.useState)(() => {
+  const [open, setOpen] = (0, import_react5.useState)(() => {
     return props.open || props.defaultOpen || false;
   });
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (props.open === void 0) return;
     setOpen(props.open);
   }, [props.open]);
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const ref = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     if (!ref.current) return;
     ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
   }, [closedHeight, open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "tipp-collapse", ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tipp-collapse", ref, children });
 }
 
 // src/molecules/expand-table/row.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Row(props) {
   const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } = props;
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const onClickRow = (0, import_react5.useCallback)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const onClickRow = (0, import_react6.useCallback)(() => {
     var _a;
     (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
     setOpen((prev) => !prev);
   }, [props, row.original]);
-  const rowClassName = (0, import_react5.useMemo)(() => {
+  const rowClassName = (0, import_react6.useMemo)(() => {
     const baseCls = ["tr-wrapper"];
     if (ExpandComp) {
       baseCls.push("expandable");
@@ -1021,8 +1156,8 @@ function Row(props) {
     }
     return baseCls.join(" ");
   }, [ExpandComp, props.onRowClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: rowClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: rowClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "button",
       {
         className: "tr",
@@ -1035,7 +1170,7 @@ function Row(props) {
           var _a, _b, _c;
           const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
           const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "div",
             {
               className: "td",
@@ -1046,7 +1181,7 @@ function Row(props) {
               }, (getCellStyle == null ? void 0 : getCellStyle(row.original)) || {}),
               children: [
                 (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   cell.column.columnDef.meta.OpenBtn,
                   {
                     data: row.original,
@@ -1062,12 +1197,12 @@ function Row(props) {
       },
       `tr_${row.id}`
     ),
-    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ExpandComp, { row }) }) }) : null
+    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExpandComp, { row }) }) }) : null
   ] }, `tr-wrapper_${row.id}`);
 }
 
 // src/molecules/expand-table/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var sortButtonColorMapper = {
   card: {
     selected: "var(--iris-10)",
@@ -1104,18 +1239,18 @@ function ExpandTable(props) {
     slim = false
   } = props;
   const defaultAlign = "left";
-  const [pagination, setPagination] = (0, import_react6.useState)({
+  const [pagination, setPagination] = (0, import_react7.useState)({
     pageIndex: pageIndex || 0,
     pageSize: pageSize || 9999
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setPagination((prev) => {
       const next = pageIndex;
       if (prev.pageIndex === next) return prev;
       return __spreadProps(__spreadValues({}, prev), { pageIndex: next });
     });
   }, [pageIndex]);
-  const [sorting, setSorting] = (0, import_react6.useState)([]);
+  const [sorting, setSorting] = (0, import_react7.useState)([]);
   const { getRowModel, getHeaderGroups, setPageIndex } = (0, import_react_table2.useReactTable)({
     data: data || [],
     columns,
@@ -1127,9 +1262,12 @@ function ExpandTable(props) {
     },
     onSortingChange: setSorting,
     getPaginationRowModel: (0, import_react_table2.getPaginationRowModel)(),
-    onPaginationChange: setPagination
+    onPaginationChange: setPagination,
+    // data 참조가 바뀔 때(예: 목록 refetch) tanstack이 pageIndex를 0으로
+    // 자동 리셋하지 않도록 끈다. 행 수정 저장 후에도 보던 페이지를 유지하기 위함.
+    autoResetPageIndex: false
   });
-  const gridTemplateColumns = (0, import_react6.useMemo)(() => {
+  const gridTemplateColumns = (0, import_react7.useMemo)(() => {
     return columns.map((col) => {
       var _a;
       if ((_a = col.meta) == null ? void 0 : _a.autoSize) return `minmax(${col.size || 50}px, 1fr)`;
@@ -1137,7 +1275,7 @@ function ExpandTable(props) {
     }).join(" ");
   }, [columns]);
   const rowModels = getRowModel();
-  const onChangePagination = (0, import_react6.useCallback)(
+  const onChangePagination = (0, import_react7.useCallback)(
     (page) => {
       const idx = page - 1;
       setPageIndex(idx);
@@ -1145,10 +1283,10 @@ function ExpandTable(props) {
     },
     [setPageIndex, onPageChange]
   );
-  const helpCompRender = (0, import_react6.useCallback)(
+  const helpCompRender = (0, import_react7.useCallback)(
     (rowLength) => {
       if (isLoading) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_themes.Flex,
           {
             align: "center",
@@ -1156,24 +1294,24 @@ function ExpandTable(props) {
             justify: "center",
             p: "5",
             width: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes4.Spinner, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes4.Spinner, {})
           }
         );
       }
       if (rowLength === 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(EmptyState, { heading: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", size: "compact" }) }) }, "expand_placeholder");
       }
       return null;
     },
     [isLoading, placeholder]
   );
-  const pageCount = (0, import_react6.useMemo)(() => {
+  const pageCount = (0, import_react7.useMemo)(() => {
     if (!data) return 0;
     return Math.ceil(data.length / pageSize);
   }, [data, pageSize]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `expand-table-wrapper ${variant}${slim ? " slim" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `expand-table-wrapper ${variant}${slim ? " slim" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           className: "tr",
@@ -1184,36 +1322,36 @@ function ExpandTable(props) {
             const sortedState = header.column.getIsSorted();
             const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
             if (sortable) {
-              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "button",
                 {
                   onClick: header.column.getToggleSortingHandler(),
                   style: { cursor: "pointer" },
                   type: "button",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
                       header.column.columnDef.header,
                       header.getContext()
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                       import_themes.Flex,
                       {
                         direction: "column",
                         style: { marginLeft: "var(--space-2)" },
                         children: [
-                          sortedState === false && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          sortedState === false && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             TriangleArrowDownIcon,
                             {
                               color: sortButtonColorMapper[variant].unselected
                             }
                           ),
-                          sortedState === "asc" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          sortedState === "asc" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             TriangleArrowUpIcon,
                             {
                               color: sortButtonColorMapper[variant].selected
                             }
                           ),
-                          sortedState === "desc" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          sortedState === "desc" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             TriangleArrowDownIcon,
                             {
                               color: sortButtonColorMapper[variant].selected
@@ -1226,7 +1364,7 @@ function ExpandTable(props) {
                 }
               ) }, header.id);
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
               header.column.columnDef.header,
               header.getContext()
             ) }) }, header.id);
@@ -1234,8 +1372,8 @@ function ExpandTable(props) {
         },
         headerGroup.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes5.ScrollArea, { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes7.ScrollArea, { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Row,
           {
             ExpandComp,
@@ -1250,7 +1388,7 @@ function ExpandTable(props) {
         );
       }) })
     ] }),
-    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes.Flex, { justify: "end", pt: "4", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes.Flex, { justify: "end", pt: "4", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Pagination,
       {
         count: pageCount,