@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/ui/data-table.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import nt, { useState as u, useRef as V, useEffect as D, useCallback as j, useMemo as lt } from "react";
-import { useReactTable as st, getExpandedRowModel as ot, getPaginationRowModel as at, getFilteredRowModel as ct, getSortedRowModel as rt, getCoreRowModel as dt, flexRender as te } from "@tanstack/react-table";
+import nt, { useState as u, useRef as V, useEffect as D, useCallback as j, useMemo as st } from "react";
+import { useReactTable as lt, getExpandedRowModel as at, getPaginationRowModel as ot, getFilteredRowModel as rt, getSortedRowModel as ct, getCoreRowModel as dt, flexRender as te } from "@tanstack/react-table";
 import { useVirtualizer as it } from "@tanstack/react-virtual";
 import { IconArrowUp as ut, IconArrowDown as ft, IconArrowsSort as mt, IconSearch as gt, IconChevronLeft as pt, IconChevronRight as Ne, IconX as ht } from "@tabler/icons-react";
 import { Table as bt, TableHeader as xt, TableRow as z, TableHead as we, TableBody as A, TableCell as O } from "./table.js";
 import { Button as yt } from "./button.js";
 import { Checkbox as ke } from "./checkbox.js";
 import { Skeleton as Re } from "./skeleton.js";
-import { cn as a } from "./lib/utils.js";
+import { cn as o } from "./lib/utils.js";
 import { springs as ne } from "./lib/motion.js";
 import { DataTableToolbar as St } from "./data-table-toolbar.js";
-import { A as Ct, m as le } from "../_chunks/framer.js";
+import { A as Ct, m as se } from "../_chunks/framer.js";
 const Nt = {
   compact: "py-ds-02",
   standard: "py-ds-05",
@@ -41,9 +41,9 @@ function wt({
       onKeyDown: (i) => {
         i.key === "Enter" ? (i.preventDefault(), h()) : i.key === "Escape" && (i.preventDefault(), K());
       },
-      className: a(
+      className: o(
         "h-ds-xs-plus w-full rounded-ds-md",
-        "border border-accent-7 bg-surface-3",
+        "border border-accent-7 bg-surface-raised-hover",
         "px-ds-02 text-ds-sm",
         "text-surface-fg placeholder:text-surface-fg-subtle",
         "outline-none focus:border-accent-7"
@@ -66,31 +66,31 @@ function Rt({
   pageSizeOptions: ze,
   selectable: C = !1,
   onSelectionChange: G,
-  toolbar: se = !1,
+  toolbar: le = !1,
   density: De = "standard",
   columnPinning: N,
   editable: Ie = !1,
   onCellEdit: L,
   expandable: $ = !1,
-  renderExpanded: oe,
+  renderExpanded: ae,
   virtualRows: b = !1,
   virtualRowHeight: Ee = 48,
   maxHeight: Fe = 600,
   onSort: F,
-  emptyState: ae,
+  emptyState: oe,
   loading: Te = !1,
   selectedIds: Y,
-  selectableFilter: ce,
+  selectableFilter: re,
   getRowId: g,
-  pagination: s,
+  pagination: l,
   singleExpand: U = !1,
   stickyHeader: Me = !1,
   onRowClick: T,
   bulkActions: _
 }) {
-  const [Ve, re] = u([]), [je, $e] = u([]), [W, X] = u(""), [_e, q] = u({
-    pageIndex: s ? s.page - 1 : 0,
-    pageSize: (s == null ? void 0 : s.pageSize) ?? E ?? 10
+  const [Ve, ce] = u([]), [je, $e] = u([]), [W, X] = u(""), [_e, q] = u({
+    pageIndex: l ? l.page - 1 : 0,
+    pageSize: (l == null ? void 0 : l.pageSize) ?? E ?? 10
   }), [x, de] = u({}), [He, Ae] = u({}), [ie, Oe] = u({
     left: (N == null ? void 0 : N.left) ?? [],
     right: (N == null ? void 0 : N.right) ?? []
@@ -104,39 +104,39 @@ function Rt({
       }), de(e);
     }
   }, [Y]), D(() => {
-    s && q((e) => ({
+    l && q((e) => ({
       ...e,
-      pageIndex: s.page - 1,
-      pageSize: s.pageSize
+      pageIndex: l.page - 1,
+      pageSize: l.pageSize
     }));
-  }, [s == null ? void 0 : s.page, s == null ? void 0 : s.pageSize]);
+  }, [l == null ? void 0 : l.page, l == null ? void 0 : l.pageSize]);
   const Ge = j(
     (e) => {
-      re((t) => {
-        const l = typeof e == "function" ? e(t) : e;
-        return F && (l.length === 0 && t.length > 0 ? F(t[0].id, !1) : l.length > 0 && F(l[0].id, l[0].desc ? "desc" : "asc")), l;
+      ce((t) => {
+        const s = typeof e == "function" ? e(t) : e;
+        return F && (s.length === 0 && t.length > 0 ? F(t[0].id, !1) : s.length > 0 && F(s[0].id, s[0].desc ? "desc" : "asc")), s;
       });
     },
     [F]
   ), Le = j(
     (e) => {
       fe((t) => {
-        const l = typeof e == "function" ? e(t) : e;
-        if (!U || l === !0 || typeof l != "object") return l;
-        const o = typeof t == "object" ? Object.keys(t).filter((m) => t[m]) : [], R = Object.keys(l).filter((m) => l[m]).filter((m) => !o.includes(m));
-        return R.length > 0 ? { [R[R.length - 1]]: !0 } : l;
+        const s = typeof e == "function" ? e(t) : e;
+        if (!U || s === !0 || typeof s != "object") return s;
+        const a = typeof t == "object" ? Object.keys(t).filter((m) => t[m]) : [], R = Object.keys(s).filter((m) => s[m]).filter((m) => !a.includes(m));
+        return R.length > 0 ? { [R[R.length - 1]]: !0 } : s;
       });
     },
     [U]
-  ), Z = V(s == null ? void 0 : s.onPageChange);
+  ), Z = V(l == null ? void 0 : l.onPageChange);
   D(() => {
-    Z.current = s == null ? void 0 : s.onPageChange;
-  }, [s == null ? void 0 : s.onPageChange]);
+    Z.current = l == null ? void 0 : l.onPageChange;
+  }, [l == null ? void 0 : l.onPageChange]);
   const Ye = j(
     (e) => {
       q((t) => {
-        const l = typeof e == "function" ? e(t) : e;
-        return Z.current && l.pageIndex !== t.pageIndex && Z.current(l.pageIndex + 1), l;
+        const s = typeof e == "function" ? e(t) : e;
+        return Z.current && s.pageIndex !== t.pageIndex && Z.current(s.pageIndex + 1), s;
       });
     },
     []
@@ -172,12 +172,12 @@ function Rt({
         type: "button",
         onClick: () => e.toggleExpanded(),
         "aria-label": e.getIsExpanded() ? "Collapse row" : "Expand row",
-        className: "flex items-center justify-center p-ds-01 rounded-ds-sm hover:bg-surface-2 transition-colors",
+        className: "flex items-center justify-center p-ds-01 rounded-ds-sm hover:bg-surface-raised transition-colors",
         children: /* @__PURE__ */ n(
           Ne,
           {
             size: 16,
-            className: a(
+            className: o(
               "transition-transform duration-moderate-02",
               e.getIsExpanded() && "rotate-90"
             ),
@@ -193,12 +193,12 @@ function Rt({
     ...C ? [Ue] : [],
     ...$ ? [We] : [],
     ...B
-  ], M = !!s, v = i || M, y = {
+  ], M = !!l, v = i || M, y = {
     columnVisibility: He,
     columnPinning: ie
   };
   S && (y.sorting = Ve), (p || h) && (y.columnFilters = je, y.globalFilter = W), v && (y.pagination = _e), C && (y.rowSelection = x), $ && (y.expanded = Ke);
-  const ge = S && !!F, c = st({
+  const ge = S && !!F, r = lt({
     data: f,
     columns: k,
     state: y,
@@ -206,30 +206,30 @@ function Rt({
     onColumnPinningChange: Oe,
     getCoreRowModel: dt(),
     ...S && {
-      onSortingChange: ge ? Ge : re,
-      ...ge ? { manualSorting: !0 } : { getSortedRowModel: rt() }
+      onSortingChange: ge ? Ge : ce,
+      ...ge ? { manualSorting: !0 } : { getSortedRowModel: ct() }
     },
     ...(p || h) && {
       onColumnFiltersChange: $e,
       onGlobalFilterChange: X,
-      getFilteredRowModel: ct()
+      getFilteredRowModel: rt()
     },
     ...v && {
       onPaginationChange: M ? Ye : q,
       ...M ? {
         manualPagination: !0,
         pageCount: Math.ceil(
-          s.total / s.pageSize
+          l.total / l.pageSize
         )
-      } : { getPaginationRowModel: at() }
+      } : { getPaginationRowModel: ot() }
     },
     ...C && {
       onRowSelectionChange: de,
-      enableRowSelection: ce ? (e) => ce(e.original) : !0
+      enableRowSelection: re ? (e) => re(e.original) : !0
     },
     ...$ && {
       onExpandedChange: U ? Le : fe,
-      getExpandedRowModel: ot()
+      getExpandedRowModel: at()
     },
     ...g && {
       getRowId: (e) => g(e)
@@ -243,81 +243,81 @@ function Rt({
       return;
     }
     if (!P.current) return;
-    const e = Object.keys(x).filter((l) => x[l]), t = f.filter((l, o) => {
-      const r = g ? g(f[o]) : String(o);
-      return e.includes(r);
+    const e = Object.keys(x).filter((s) => x[s]), t = f.filter((s, a) => {
+      const c = g ? g(f[a]) : String(a);
+      return e.includes(c);
     });
     P.current(t);
   }, [x, f, g]);
   function pe(e) {
-    const { left: t = [], right: l = [] } = ie, o = t.indexOf(e), r = l.indexOf(e);
-    return o !== -1 ? {
-      className: "sticky bg-surface-1 z-raised",
+    const { left: t = [], right: s = [] } = ie, a = t.indexOf(e), c = s.indexOf(e);
+    return a !== -1 ? {
+      className: "sticky bg-surface-base z-raised",
       style: { left: 0 }
-    } : r !== -1 ? {
-      className: "sticky bg-surface-1 z-raised",
+    } : c !== -1 ? {
+      className: "sticky bg-surface-base z-raised",
       style: { right: 0 }
     } : { className: "", style: {} };
   }
   function Xe(e) {
     if (!Ie || e === "_select" || e === "_expand") return !1;
-    const t = c.getColumn(e);
+    const t = r.getColumn(e);
     if (!t) return !1;
-    const l = t.columnDef.meta;
-    return (l == null ? void 0 : l.enableEditing) !== !1;
+    const s = t.columnDef.meta;
+    return (s == null ? void 0 : s.enableEditing) !== !1;
   }
-  const he = Nt[ue], H = c.getRowModel().rows, be = it({
+  const he = Nt[ue], H = r.getRowModel().rows, be = it({
     count: b ? H.length : 0,
     getScrollElement: () => me.current,
     estimateSize: () => Ee,
     overscan: 10
-  }), qe = (s == null ? void 0 : s.pageSize) ?? E ?? 5, Je = k.length, Qe = j(
+  }), qe = (l == null ? void 0 : l.pageSize) ?? E ?? 5, Je = k.length, Qe = j(
     (e, t) => {
       !T || t.target.closest(kt) || T(e);
     },
     [T]
   );
   function xe(e, t) {
-    const l = e.getVisibleCells();
+    const s = e.getVisibleCells();
     return /* @__PURE__ */ n(
       z,
       {
         "data-state": e.getIsSelected() && "selected",
         style: t,
-        className: a(
+        className: o(
           b ? "absolute w-full flex" : void 0,
           T && "cursor-pointer"
         ),
-        onClick: T ? (o) => Qe(e.original, o) : void 0,
-        children: l.map((o) => {
-          const r = pe(o.column.id), R = (w == null ? void 0 : w.rowIndex) === e.index && (w == null ? void 0 : w.columnId) === o.column.id;
+        onClick: T ? (a) => Qe(e.original, a) : void 0,
+        children: s.map((a) => {
+          const c = pe(a.column.id), R = (w == null ? void 0 : w.rowIndex) === e.index && (w == null ? void 0 : w.columnId) === a.column.id;
           return /* @__PURE__ */ n(
             O,
             {
-              className: a(
+              className: o(
                 he,
-                r.className,
+                c.className,
                 b && "flex-1"
               ),
-              style: r.style,
+              style: c.style,
               onDoubleClick: () => {
-                Xe(o.column.id) && J({
+                Xe(a.column.id) && J({
                   rowIndex: e.index,
-                  columnId: o.column.id
+                  columnId: a.column.id
                 });
               },
               children: R ? /* @__PURE__ */ n(
                 wt,
                 {
-                  initialValue: String(o.getValue() ?? ""),
+                  initialValue: String(a.getValue() ?? ""),
                   onSave: (m) => {
-                    L == null || L(e.index, o.column.id, m), J(null);
+                    L == null || L(e.index, a.column.id, m), J(null);
                   },
                   onCancel: () => J(null)
                 }
-              ) : te(o.column.columnDef.cell, o.getContext())
+              ) : te(a.column.columnDef.cell, a.getContext())
             },
-            o.id
+            a.id
           );
         })
       },
@@ -325,7 +325,7 @@ function Rt({
     );
   }
   function Ze(e, t) {
-    return !$ || !e.getIsExpanded() || !oe ? null : /* @__PURE__ */ n(
+    return !$ || !e.getIsExpanded() || !ae ? null : /* @__PURE__ */ n(
       z,
       {
         style: t,
@@ -334,11 +334,11 @@ function Rt({
           O,
           {
             colSpan: k.length,
-            className: a(
-              "bg-surface-2 p-ds-05",
+            className: o(
+              "bg-surface-raised p-ds-05",
               b && "flex-1"
             ),
-            children: oe(e.original)
+            children: ae(e.original)
           }
         )
       },
@@ -347,18 +347,18 @@ function Rt({
   }
   function ve() {
     const e = ["w-3/4", "w-1/2", "w-2/3", "w-full"];
-    return /* @__PURE__ */ n(A, { children: Array.from({ length: qe }, (t, l) => /* @__PURE__ */ n(z, { children: Array.from({ length: Je }, (o, r) => {
+    return /* @__PURE__ */ n(A, { children: Array.from({ length: qe }, (t, s) => /* @__PURE__ */ n(z, { children: Array.from({ length: Je }, (a, c) => {
       var Se, Ce;
-      const m = (((Se = k[r]) == null ? void 0 : Se.id) ?? ((Ce = k[r]) == null ? void 0 : Ce.header)) === "_select";
+      const m = (((Se = k[c]) == null ? void 0 : Se.id) ?? ((Ce = k[c]) == null ? void 0 : Ce.header)) === "_select";
       return /* @__PURE__ */ n(
         O,
         {
           className: he,
-          children: m ? /* @__PURE__ */ n(Re, { variant: "text", className: "h-4 w-4", animation: "pulse" }) : /* @__PURE__ */ n(Re, { variant: "text", className: a("h-4", e[r % e.length]), animation: "pulse" })
+          children: m ? /* @__PURE__ */ n(Re, { variant: "text", className: "h-4 w-4", animation: "pulse" }) : /* @__PURE__ */ n(Re, { variant: "text", className: o("h-4", e[c % e.length]), animation: "pulse" })
         },
-        `skeleton-${l}-${r}`
+        `skeleton-${s}-${c}`
       );
-    }) }, `skeleton-${l}`)) });
+    }) }, `skeleton-${s}`)) });
   }
   function Pe() {
     if (Te)
@@ -368,11 +368,11 @@ function Rt({
         O,
         {
           colSpan: k.length,
-          className: a(
+          className: o(
             "h-24 text-center",
-            !ae && "text-surface-fg-subtle"
+            !oe && "text-surface-fg-subtle"
           ),
-          children: ae || I || "No results."
+          children: oe || I || "No results."
         }
       ) }) });
     if (b) {
@@ -384,15 +384,15 @@ function Rt({
             height: `${t}px`,
             position: "relative"
           },
-          children: e.map((l) => {
-            const o = H[l.index];
-            return xe(o, {
+          children: e.map((s) => {
+            const a = H[s.index];
+            return xe(a, {
               position: "absolute",
               top: 0,
               left: 0,
               width: "100%",
-              height: `${l.size}px`,
-              transform: `translateY(${l.start}px)`
+              height: `${s.size}px`,
+              transform: `translateY(${s.start}px)`
             });
           })
         }
@@ -403,37 +403,37 @@ function Rt({
       Ze(e)
     ] }, e.id)) });
   }
-  const ee = lt(() => {
+  const ee = st(() => {
     if (!_ || !C) return [];
     const e = Object.keys(x).filter((t) => x[t]);
-    return f.filter((t, l) => {
-      const o = g ? g(f[l]) : String(l);
-      return e.includes(o);
+    return f.filter((t, s) => {
+      const a = g ? g(f[s]) : String(s);
+      return e.includes(a);
     });
-  }, [_, C, x, f, g]), et = ee.length > 0, tt = M ? s.total : c.getFilteredRowModel().rows.length, ye = /* @__PURE__ */ d(bt, { children: [
+  }, [_, C, x, f, g]), et = ee.length > 0, tt = M ? l.total : r.getFilteredRowModel().rows.length, ye = /* @__PURE__ */ d(bt, { children: [
     /* @__PURE__ */ d(
       xt,
       {
-        className: a(
-          Me && "sticky top-0 z-10 bg-surface-1"
+        className: o(
+          Me && "sticky top-0 z-10 bg-surface-base"
         ),
         children: [
-          c.getHeaderGroups().map((e) => /* @__PURE__ */ n(z, { children: e.headers.map((t) => {
-            const l = S && t.column.getCanSort(), o = t.column.getIsSorted(), r = pe(t.column.id);
+          r.getHeaderGroups().map((e) => /* @__PURE__ */ n(z, { children: e.headers.map((t) => {
+            const s = S && t.column.getCanSort(), a = t.column.getIsSorted(), c = pe(t.column.id);
             return /* @__PURE__ */ n(
               we,
               {
-                className: r.className,
-                style: r.style,
-                children: t.isPlaceholder ? null : l ? /* @__PURE__ */ d(
+                className: c.className,
+                style: c.style,
+                children: t.isPlaceholder ? null : s ? /* @__PURE__ */ d(
                   "button",
                   {
                     type: "button",
-                    className: a(
+                    className: o(
                       "flex items-center gap-ds-01 font-medium",
                       "cursor-pointer select-none",
                       "-ml-ds-01 rounded-ds-sm px-ds-01 py-ds-01",
-                      "hover:bg-surface-2 transition-colors"
+                      "hover:bg-surface-raised transition-colors"
                     ),
                     onClick: t.column.getToggleSortingHandler(),
                     "aria-label": `Sort by ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
@@ -442,8 +442,8 @@ function Rt({
                         t.column.columnDef.header,
                         t.getContext()
                       ),
-                      /* @__PURE__ */ n(Ct, { mode: "wait", initial: !1, children: o === "asc" ? /* @__PURE__ */ n(
-                        le.span,
+                      /* @__PURE__ */ n(Ct, { mode: "wait", initial: !1, children: a === "asc" ? /* @__PURE__ */ n(
+                        se.span,
                         {
                           initial: { opacity: 0, rotate: 90 },
                           animate: { opacity: 1, rotate: 0 },
@@ -459,8 +459,8 @@ function Rt({
                           )
                         },
                         "asc"
-                      ) : o === "desc" ? /* @__PURE__ */ n(
-                        le.span,
+                      ) : a === "desc" ? /* @__PURE__ */ n(
+                        se.span,
                         {
                           initial: { opacity: 0, rotate: -90 },
                           animate: { opacity: 1, rotate: 0 },
@@ -477,7 +477,7 @@ function Rt({
                         },
                         "desc"
                       ) : /* @__PURE__ */ n(
-                        le.span,
+                        se.span,
                         {
                           initial: { opacity: 0 },
                           animate: { opacity: 1 },
@@ -504,17 +504,17 @@ function Rt({
               t.id
             );
           }) }, e.id)),
-          p && c.getHeaderGroups().map((e) => /* @__PURE__ */ n(z, { children: e.headers.map((t) => /* @__PURE__ */ n(we, { className: "py-ds-01", children: t.isPlaceholder || t.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ n(
+          p && r.getHeaderGroups().map((e) => /* @__PURE__ */ n(z, { children: e.headers.map((t) => /* @__PURE__ */ n(we, { className: "py-ds-01", children: t.isPlaceholder || t.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ n(
             "input",
             {
               type: "text",
               value: t.column.getFilterValue() ?? "",
-              onChange: (l) => t.column.setFilterValue(l.target.value),
+              onChange: (s) => t.column.setFilterValue(s.target.value),
               placeholder: `Filter ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : ""}...`,
               "aria-label": `Filter ${typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : t.column.id}`,
-              className: a(
+              className: o(
                 "h-ds-xs-plus w-full rounded-ds-md",
-                "border border-surface-border-strong bg-surface-3",
+                "border border-surface-border-strong bg-surface-raised-hover",
                 "px-ds-02 text-ds-sm",
                 "text-surface-fg placeholder:text-surface-fg-subtle",
                 "outline-none focus:border-accent-7"
@@ -526,11 +526,11 @@ function Rt({
     ),
     Pe()
   ] });
-  return /* @__PURE__ */ d("div", { className: a(K), children: [
-    se && /* @__PURE__ */ n(
+  return /* @__PURE__ */ d("div", { className: o(K), children: [
+    le && /* @__PURE__ */ n(
       St,
       {
-        table: c,
+        table: r,
         globalFilter: h,
         globalFilterValue: W,
         onGlobalFilterChange: X,
@@ -538,7 +538,7 @@ function Rt({
         onDensityChange: Be
       }
     ),
-    h && !se && /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-03 pb-ds-04 border-b border-surface-border mb-ds-04", children: [
+    h && !le && /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-03 pb-ds-04 border-b border-surface-border mb-ds-04", children: [
       /* @__PURE__ */ n(
         gt,
         {
@@ -555,7 +555,7 @@ function Rt({
           onChange: (e) => X(e.target.value),
           placeholder: "Search all columns...",
           "aria-label": "Search all columns",
-          className: a(
+          className: o(
             "flex-1 bg-transparent text-ds-md",
             "text-surface-fg placeholder:text-surface-fg-subtle",
             "outline-none"
@@ -580,14 +580,14 @@ function Rt({
         !M && /* @__PURE__ */ n(
           "select",
           {
-            value: c.getState().pagination.pageSize,
+            value: r.getState().pagination.pageSize,
             onChange: (e) => {
-              c.setPageSize(Number(e.target.value));
+              r.setPageSize(Number(e.target.value));
             },
             "aria-label": "Rows per page",
-            className: a(
+            className: o(
               "h-ds-sm rounded-ds-md",
-              "border border-surface-border-strong bg-surface-3",
+              "border border-surface-border-strong bg-surface-raised-hover",
               "px-ds-03 text-ds-sm",
               "text-surface-fg"
             ),
@@ -601,13 +601,13 @@ function Rt({
           "button",
           {
             type: "button",
-            disabled: !c.getCanPreviousPage(),
-            onClick: () => c.previousPage(),
+            disabled: !r.getCanPreviousPage(),
+            onClick: () => r.previousPage(),
             "aria-label": "Previous page",
-            className: a(
+            className: o(
               "h-ds-sm w-ds-sm flex items-center justify-center",
               "rounded-ds-md border border-surface-border-strong",
-              "enabled:hover:bg-surface-2",
+              "enabled:hover:bg-surface-raised",
               "disabled:opacity-action-disabled disabled:cursor-not-allowed",
               "transition-colors"
             ),
@@ -616,22 +616,22 @@ function Rt({
         ),
         /* @__PURE__ */ d("span", { className: "text-ds-sm text-surface-fg-muted", children: [
           "Page ",
-          c.getState().pagination.pageIndex + 1,
+          r.getState().pagination.pageIndex + 1,
           " of",
           " ",
-          c.getPageCount()
+          r.getPageCount()
         ] }),
         /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            disabled: !c.getCanNextPage(),
-            onClick: () => c.nextPage(),
+            disabled: !r.getCanNextPage(),
+            onClick: () => r.nextPage(),
             "aria-label": "Next page",
-            className: a(
+            className: o(
               "h-ds-sm w-ds-sm flex items-center justify-center",
               "rounded-ds-md border border-surface-border-strong",
-              "enabled:hover:bg-surface-2",
+              "enabled:hover:bg-surface-raised",
               "disabled:opacity-action-disabled disabled:cursor-not-allowed",
               "transition-colors"
             ),
@@ -643,10 +643,10 @@ function Rt({
     _ && C && et && /* @__PURE__ */ d(
       "div",
       {
-        className: a(
+        className: o(
           "fixed bottom-6 left-1/2 -translate-x-1/2 z-50",
           "flex items-center gap-ds-04 px-ds-05 py-ds-03",
-          "rounded-ds-lg border border-surface-border-strong bg-surface-1 shadow-lg",
+          "rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating",
           "animate-in slide-in-from-bottom-2"
         ),
         role: "toolbar",
@@ -672,11 +672,11 @@ function Rt({
             "button",
             {
               type: "button",
-              onClick: () => c.resetRowSelection(),
+              onClick: () => r.resetRowSelection(),
               "aria-label": "Clear selection",
-              className: a(
+              className: o(
                 "flex items-center justify-center p-ds-01",
-                "rounded-ds-sm hover:bg-surface-2 transition-colors",
+                "rounded-ds-sm hover:bg-surface-raised transition-colors",
                 "text-surface-fg-muted hover:text-surface-fg"
               ),
               children: /* @__PURE__ */ n(ht, { size: 16, "aria-hidden": "true" })