@epilot/volt-ui-experimental-griffel 0.2.0 → 0.2.3

package/dist/components/skeleton/skeleton.js

@@ -1,15 +1,15 @@
 import { jsxs as c, jsx as n } from "react/jsx-runtime";
 import * as d from "react";
 import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { SLOT_ATTR as l } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as t } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as p } from "../../styles/make-styles.js";
-import { indigoA4 as f, pinkA4 as g, purpleA4 as k, gray3 as b, gray4 as y, radiusMd as l } from "../../tokens/index.js";
+import { radiusMd as u, indigoA4 as f, pinkA4 as g, purpleA4 as k, gray3 as b, gray4 as y } from "../../tokens/index.js";
 import { ensurePaletteTokens as N } from "../../tokens/install.js";
 const T = p({
   default: {
     backgroundColor: y,
-    ...i.borderRadius(l),
+    ...i.borderRadius(u),
     animationName: {
       "0%,100%": { opacity: 1 },
       "50%": { opacity: 0.5 }
@@ -20,7 +20,7 @@ const T = p({
   },
   ai: {
     backgroundColor: b,
-    ...i.borderRadius(l),
+    ...i.borderRadius(u),
     position: "relative",
     ...i.overflow("hidden")
   },
@@ -66,17 +66,17 @@ const T = p({
     animationIterationCount: "infinite"
   }
 }), D = d.forwardRef(
-  function({ variant: u = "default", className: o, children: e, ...r }, s) {
-    N();
+  function({ variant: o = "default", className: e, children: r, ...s }, m) {
+    o === "ai" && N();
     const a = T();
-    return u === "ai" ? /* @__PURE__ */ c(
+    return o === "ai" ? /* @__PURE__ */ c(
       "div",
       {
-        ref: s,
+        ref: m,
         "data-slot": "skeleton",
-        [m]: "skeleton",
-        className: t(a.ai, o),
-        ...r,
+        [l]: "skeleton",
+        className: t(a.ai, e),
+        ...s,
         children: [
           /* @__PURE__ */ n(
             "span",
@@ -99,18 +99,18 @@ const T = p({
               className: t(a.spot, a.spot3)
             }
           ),
-          e
+          r
         ]
       }
     ) : /* @__PURE__ */ n(
       "div",
       {
-        ref: s,
+        ref: m,
         "data-slot": "skeleton",
-        [m]: "skeleton",
-        className: t(a.default, o),
-        ...r,
-        children: e
+        [l]: "skeleton",
+        className: t(a.default, e),
+        ...s,
+        children: r
       }
     );
   }

package/dist/components/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\n\n/**\n * Skeleton — v1's loading placeholder ported to Griffel atoms.\n *\n * Two variants, `default` and `ai`. `default` is a gray block that pulses; `ai` is a gray field\n * that renders three decorative colour spots drifting behind the content. The spots are ported from\n * v1's global `skeleton-ai-spot-*` classes in `styles/utilities.css`, including their exact\n * gradients, durations (10s / 12s / 14s) and easing.\n *\n * The keyframes are the object form, so Griffel hashes each one from its content — a hand-authored\n * global `@keyframes` would collide across two co-resident copies of this package. The pulse is a\n * single three-stop animation; each spot carries its own.\n *\n * The spots are `purple-a4`, `pink-a4` and `indigo-a4`, none of which is a core token family\n * (accent / gray / error / warning / success / info ship in the core sheet; everything else lives\n * in the palette sheet, which is not loaded by default). `ai` therefore calls\n * `ensurePaletteTokens()` — CONVENTIONS rule 3. There is no `color` prop, so no inline custom\n * properties: the spot colours are constant and live inside the style objects.\n */\n\nexport type SkeletonVariant = \"default\" | \"ai\"\n\nconst useStyles = makeVoltStyles({\n  default: {\n    backgroundColor: tokens.gray4,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    animationName: {\n      \"0%,100%\": { opacity: 1 },\n      \"50%\": { opacity: 0.5 },\n    },\n    animationDuration: \"2s\",\n    animationTimingFunction: \"cubic-bezier(0.4,0,0.6,1)\",\n    animationIterationCount: \"infinite\",\n  },\n  ai: {\n    backgroundColor: tokens.gray3,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    position: \"relative\",\n    ...shorthands.overflow(\"hidden\"),\n  },\n  spot: {\n    position: \"absolute\",\n    inset: \"-50%\",\n    ...shorthands.borderRadius(\"50%\"),\n    opacity: 0.6,\n    filter: \"blur(18px)\",\n    pointerEvents: \"none\",\n  },\n  spot1: {\n    backgroundImage: `radial-gradient(circle, ${tokens.purpleA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(-20%, 0%) scale(1)\" },\n      \"33%\": { transform: \"translate(40%, -25%) scale(1.2)\" },\n      \"66%\": { transform: \"translate(-10%, 30%) scale(0.9)\" },\n    },\n    animationDuration: \"10s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n  spot2: {\n    backgroundImage: `radial-gradient(circle, ${tokens.pinkA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(20%, 0%) scale(1.1)\" },\n      \"33%\": { transform: \"translate(-35%, 25%) scale(0.9)\" },\n      \"66%\": { transform: \"translate(30%, -20%) scale(1.3)\" },\n    },\n    animationDuration: \"12s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n  spot3: {\n    backgroundImage: `radial-gradient(circle, ${tokens.indigoA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(0%, 20%) scale(1)\" },\n      \"33%\": { transform: \"translate(25%, -30%) scale(1.2)\" },\n      \"66%\": { transform: \"translate(-30%, 10%) scale(0.8)\" },\n    },\n    animationDuration: \"14s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n})\n\nexport type SkeletonProps = React.ComponentProps<\"div\"> & {\n  variant?: SkeletonVariant\n}\n\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  function Skeleton(\n    { variant = \"default\", className, children, ...props },\n    ref\n  ) {\n    // The decorative families live in the palette sheet, which is not installed by default\n    // (CONVENTIONS rule 3). It has to be present whenever this component renders at all.\n    ensurePaletteTokens()\n\n    const styles = useStyles()\n\n    if (variant === \"ai\") {\n      return (\n        <div\n          ref={ref}\n          data-slot=\"skeleton\"\n          {...{ [SLOT_ATTR]: \"skeleton\" }}\n          className={mergeClasses(styles.ai, className)}\n          {...props}\n        >\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot1)}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot2)}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot3)}\n          />\n          {children}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"skeleton\"\n        {...{ [SLOT_ATTR]: \"skeleton\" }}\n        className={mergeClasses(styles.default, className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","tokens.gray4","shorthands","tokens.radiusMd","tokens.gray3","tokens.purpleA4","tokens.pinkA4","tokens.indigoA4","Skeleton","React","variant","className","children","props","ref","ensurePaletteTokens","styles","jsxs","SLOT_ATTR","mergeClasses","jsx"],"mappings":"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"}
+{"version":3,"file":"skeleton.js","sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\n\n/**\n * Skeleton — v1's loading placeholder ported to Griffel atoms.\n *\n * Two variants, `default` and `ai`. `default` is a gray block that pulses; `ai` is a gray field\n * that renders three decorative colour spots drifting behind the content. The spots are ported from\n * v1's global `skeleton-ai-spot-*` classes in `styles/utilities.css`, including their exact\n * gradients, durations (10s / 12s / 14s) and easing.\n *\n * The keyframes are the object form, so Griffel hashes each one from its content — a hand-authored\n * global `@keyframes` would collide across two co-resident copies of this package. The pulse is a\n * single three-stop animation; each spot carries its own.\n *\n * The spots are `purple-a4`, `pink-a4` and `indigo-a4`, none of which is a core token family\n * (accent / gray / error / warning / success / info ship in the core sheet; everything else lives\n * in the palette sheet, which is not loaded by default). `ai` therefore calls\n * `ensurePaletteTokens()` — CONVENTIONS rule 3. There is no `color` prop, so no inline custom\n * properties: the spot colours are constant and live inside the style objects.\n */\n\nexport type SkeletonVariant = \"default\" | \"ai\"\n\nconst useStyles = makeVoltStyles({\n  default: {\n    backgroundColor: tokens.gray4,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    animationName: {\n      \"0%,100%\": { opacity: 1 },\n      \"50%\": { opacity: 0.5 },\n    },\n    animationDuration: \"2s\",\n    animationTimingFunction: \"cubic-bezier(0.4,0,0.6,1)\",\n    animationIterationCount: \"infinite\",\n  },\n  ai: {\n    backgroundColor: tokens.gray3,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    position: \"relative\",\n    ...shorthands.overflow(\"hidden\"),\n  },\n  spot: {\n    position: \"absolute\",\n    inset: \"-50%\",\n    ...shorthands.borderRadius(\"50%\"),\n    opacity: 0.6,\n    filter: \"blur(18px)\",\n    pointerEvents: \"none\",\n  },\n  spot1: {\n    backgroundImage: `radial-gradient(circle, ${tokens.purpleA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(-20%, 0%) scale(1)\" },\n      \"33%\": { transform: \"translate(40%, -25%) scale(1.2)\" },\n      \"66%\": { transform: \"translate(-10%, 30%) scale(0.9)\" },\n    },\n    animationDuration: \"10s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n  spot2: {\n    backgroundImage: `radial-gradient(circle, ${tokens.pinkA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(20%, 0%) scale(1.1)\" },\n      \"33%\": { transform: \"translate(-35%, 25%) scale(0.9)\" },\n      \"66%\": { transform: \"translate(30%, -20%) scale(1.3)\" },\n    },\n    animationDuration: \"12s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n  spot3: {\n    backgroundImage: `radial-gradient(circle, ${tokens.indigoA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(0%, 20%) scale(1)\" },\n      \"33%\": { transform: \"translate(25%, -30%) scale(1.2)\" },\n      \"66%\": { transform: \"translate(-30%, 10%) scale(0.8)\" },\n    },\n    animationDuration: \"14s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n})\n\nexport type SkeletonProps = React.ComponentProps<\"div\"> & {\n  variant?: SkeletonVariant\n}\n\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  function Skeleton(\n    { variant = \"default\", className, children, ...props },\n    ref\n  ) {\n    // The decorative families live in the palette sheet, which is not installed by default\n    // (CONVENTIONS rule 3). Only the `ai` variant paints them — purple-a4, pink-a4, indigo-a4 — and\n    // the variant is known here, so the default variant no longer installs 63 kB of CSS it never\n    // reads.\n    if (variant === \"ai\") ensurePaletteTokens()\n\n    const styles = useStyles()\n\n    if (variant === \"ai\") {\n      return (\n        <div\n          ref={ref}\n          data-slot=\"skeleton\"\n          {...{ [SLOT_ATTR]: \"skeleton\" }}\n          className={mergeClasses(styles.ai, className)}\n          {...props}\n        >\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot1)}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot2)}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot3)}\n          />\n          {children}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"skeleton\"\n        {...{ [SLOT_ATTR]: \"skeleton\" }}\n        className={mergeClasses(styles.default, className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","tokens.gray4","shorthands","tokens.radiusMd","tokens.gray3","tokens.purpleA4","tokens.pinkA4","tokens.indigoA4","Skeleton","React","variant","className","children","props","ref","ensurePaletteTokens","styles","jsxs","SLOT_ATTR","mergeClasses","jsx"],"mappings":"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"}

package/dist/components/table/table-pagination.js

@@ -3,14 +3,13 @@ import * as F from "react";
 import { Root as G, Trigger as X, Value as Q, Icon as U, Portal as Z, Content as q, Viewport as J, Group as K, Label as Y, Item as b, ItemIndicator as ee, ItemText as te } from "../../vendor/@radix-ui/react-select/dist/index.js";
 import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as oe } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as re } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as ne } from "../../styles/make-styles.js";
-import { grayA6 as ie, accentA3 as A, leadingSm as m, textSm as u, grayA11 as w, fontWeightSemibold as ae, leadingXs as ce, textXs as se, semBody as de, accent8 as ge, grayA4 as C, grayA3 as g, spacingElement1 as pe, spacingGroup1 as W, accent11 as x, trackingNormal as he, accentA8 as le, spacingElement2 as me, radiusMd as ue, radiusLg as R, spacingElement3 as ve } from "../../tokens/index.js";
-import { ensurePaletteTokens as fe } from "../../tokens/install.js";
-import { calculatePagination as ke, getPageNumbers as we, clampPage as Ce } from "../../lib/pagination.js";
-import { TooltipProvider as xe, Tooltip as ye, TooltipTrigger as Ie, TooltipContent as Pe } from "../tooltip/tooltip.js";
+import { mergeClasses as ne } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as re } from "../../styles/make-styles.js";
+import { radiusMd as ie, grayA6 as ae, radiusLg as A, spacingElement3 as ce, accentA3 as W, leadingSm as m, textSm as u, grayA11 as k, fontWeightSemibold as se, leadingXs as de, textXs as ge, semBody as pe, accent8 as he, grayA4 as C, grayA3 as g, spacingElement1 as le, spacingGroup1 as R, accent11 as x, trackingNormal as me, accentA8 as ue, spacingElement2 as ve } from "../../tokens/index.js";
+import { calculatePagination as fe, getPageNumbers as we, clampPage as ke } from "../../lib/pagination.js";
+import { TooltipProvider as Ce, Tooltip as xe, TooltipTrigger as ye, TooltipContent as Ie } from "../tooltip/tooltip.js";
 import { Button as d } from "../button/button.js";
-const Ne = (n) => /* @__PURE__ */ a(
+const Pe = (r) => /* @__PURE__ */ a(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -22,13 +21,13 @@ const Ne = (n) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...n,
+    ...r,
     children: [
       /* @__PURE__ */ t("path", { d: "M6 6v12" }),
       /* @__PURE__ */ t("path", { d: "m15 18-6-6 6-6" })
     ]
   }
-), Se = (n) => /* @__PURE__ */ t(
+), Ne = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40,10 +39,10 @@ const Ne = (n) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...n,
+    ...r,
     children: /* @__PURE__ */ t("path", { d: "m15 18-6-6 6-6" })
   }
-), Le = (n) => /* @__PURE__ */ t(
+), Se = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -55,10 +54,10 @@ const Ne = (n) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...n,
+    ...r,
     children: /* @__PURE__ */ t("path", { d: "m9 18 6-6-6-6" })
   }
-), Te = (n) => /* @__PURE__ */ a(
+), Le = (r) => /* @__PURE__ */ a(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -70,13 +69,13 @@ const Ne = (n) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...n,
+    ...r,
     children: [
       /* @__PURE__ */ t("path", { d: "m9 18 6-6-6-6" }),
       /* @__PURE__ */ t("path", { d: "M18 6v12" })
     ]
   }
-), Be = (n) => /* @__PURE__ */ t(
+), Be = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -88,10 +87,10 @@ const Ne = (n) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...n,
+    ...r,
     children: /* @__PURE__ */ t("path", { d: "m6 9 6 6 6-6" })
   }
-), je = (n) => /* @__PURE__ */ t(
+), Te = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -103,23 +102,23 @@ const Ne = (n) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...n,
+    ...r,
     children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5" })
   }
-), ze = [10, 25, 50, 100], Ae = ne({
+), je = [10, 25, 50, 100], ze = re({
   root: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: W,
-    ...i.paddingBlock(ve),
+    gap: R,
+    ...i.paddingBlock(ce),
     fontSize: u,
     lineHeight: m
   },
   left: {
     display: "flex",
     alignItems: "center",
-    gap: me
+    gap: ve
   },
   navButton: {
     backgroundColor: g,
@@ -129,7 +128,7 @@ const Ne = (n) => /* @__PURE__ */ a(
     },
     ":disabled": {
       backgroundColor: g,
-      color: le,
+      color: ue,
       pointerEvents: "none"
     }
   },
@@ -147,7 +146,7 @@ const Ne = (n) => /* @__PURE__ */ a(
     }
   },
   ellipsisButton: {
-    letterSpacing: he,
+    letterSpacing: me,
     backgroundColor: "transparent",
     color: x,
     ":hover": {
@@ -157,13 +156,13 @@ const Ne = (n) => /* @__PURE__ */ a(
   right: {
     display: "flex",
     alignItems: "center",
-    gap: W,
+    gap: R,
     paddingRight: "0.125rem"
   },
   range: {
     fontSize: u,
     lineHeight: m,
-    color: w,
+    color: k,
     fontVariantNumeric: "tabular-nums"
   },
   selectTrigger: {
@@ -173,8 +172,8 @@ const Ne = (n) => /* @__PURE__ */ a(
     minWidth: "4rem",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: pe,
-    ...i.borderRadius(R),
+    gap: le,
+    ...i.borderRadius(A),
     backgroundColor: g,
     ...i.paddingInline("0.75rem"),
     fontSize: u,
@@ -187,7 +186,7 @@ const Ne = (n) => /* @__PURE__ */ a(
     ":focus": {
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: ge,
+      outlineColor: he,
       outlineOffset: "2px"
     },
     ":disabled": {
@@ -198,15 +197,15 @@ const Ne = (n) => /* @__PURE__ */ a(
   selectIcon: {
     display: "flex",
     alignItems: "center",
-    color: w
+    color: k
   },
   selectContent: {
     position: "relative",
     zIndex: 50,
     ...i.overflow("hidden"),
-    ...i.borderRadius(R),
-    ...i.border("1px", "solid", ie),
-    backgroundColor: de,
+    ...i.borderRadius(A),
+    ...i.border("1px", "solid", ae),
+    backgroundColor: pe,
     boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
   },
   selectViewport: {
@@ -214,10 +213,10 @@ const Ne = (n) => /* @__PURE__ */ a(
   },
   selectLabel: {
     ...i.padding("0.375rem", "0.5rem"),
-    fontSize: se,
-    lineHeight: ce,
-    fontWeight: ae,
-    color: w
+    fontSize: ge,
+    lineHeight: de,
+    fontWeight: se,
+    color: k
   },
   selectItem: {
     position: "relative",
@@ -225,16 +224,16 @@ const Ne = (n) => /* @__PURE__ */ a(
     cursor: "pointer",
     userSelect: "none",
     alignItems: "center",
-    ...i.borderRadius(ue),
+    ...i.borderRadius(ie),
     ...i.padding("0.375rem", "0.5rem", "0.375rem", "2rem"),
     fontSize: u,
     lineHeight: m,
     outlineStyle: "none",
     ":focus": {
-      backgroundColor: A
+      backgroundColor: W
     },
     "&[data-state='checked']": {
-      backgroundColor: A
+      backgroundColor: W
     }
   },
   selectItemIndicator: {
@@ -246,13 +245,13 @@ const Ne = (n) => /* @__PURE__ */ a(
     alignItems: "center",
     justifyContent: "center"
   }
-}), Ge = F.forwardRef(function({
+}), _e = F.forwardRef(function({
   page: y,
   totalItems: p,
   pageSize: v,
   onPageChange: s,
   onPageSizeChange: E,
-  pageSizeOptions: V = ze,
+  pageSizeOptions: V = je,
   siblingCount: $ = 2,
   disabled: c = !1,
   labels: e,
@@ -260,16 +259,15 @@ const Ne = (n) => /* @__PURE__ */ a(
   ...O
 }, D) {
   var L;
-  fe();
-  const o = Ae(), { totalPages: f, start: I, end: P, isFirstPage: N, isLastPage: S } = ke({
+  const o = ze(), { totalPages: f, start: I, end: P, isFirstPage: N, isLastPage: S } = fe({
     page: y,
     pageSize: v,
     totalItems: p
-  }), h = Ce(y, f), M = we(h, f, $), _ = (r) => {
-    const l = parseInt(r, 10);
+  }), h = ke(y, f), M = we(h, f, $), _ = (n) => {
+    const l = parseInt(n, 10);
     isNaN(l) || E(l);
   };
-  return p === 0 ? null : /* @__PURE__ */ t(xe, { children: /* @__PURE__ */ a(
+  return p === 0 ? null : /* @__PURE__ */ t(Ce, { children: /* @__PURE__ */ a(
     "div",
     {
       ref: D,
@@ -278,7 +276,7 @@ const Ne = (n) => /* @__PURE__ */ a(
       "data-fs-element": "TablePagination",
       role: "navigation",
       "aria-label": e == null ? void 0 : e.navigation,
-      className: re(o.root, H),
+      className: ne(o.root, H),
       ...O,
       children: [
         /* @__PURE__ */ a("div", { className: o.left, children: [
@@ -292,7 +290,7 @@ const Ne = (n) => /* @__PURE__ */ a(
               onClick: () => s(1),
               "aria-label": e == null ? void 0 : e.firstPage,
               className: o.navButton,
-              children: /* @__PURE__ */ t(Ne, {})
+              children: /* @__PURE__ */ t(Pe, {})
             }
           ),
           /* @__PURE__ */ t(
@@ -305,44 +303,44 @@ const Ne = (n) => /* @__PURE__ */ a(
               onClick: () => s(h - 1),
               "aria-label": e == null ? void 0 : e.previousPage,
               className: o.navButton,
-              children: /* @__PURE__ */ t(Se, {})
+              children: /* @__PURE__ */ t(Ne, {})
             }
           ),
-          M.map((r, l) => {
-            var B, j, z;
-            const T = r.type === "ellipsis" ? `ellipsis-${l}-${r.targetPage}` : `page-${r.page}`;
-            if (r.type === "ellipsis")
-              return /* @__PURE__ */ a(ye, { children: [
-                /* @__PURE__ */ t(Ie, { asChild: !0, children: /* @__PURE__ */ t(
+          M.map((n, l) => {
+            var T, j, z;
+            const B = n.type === "ellipsis" ? `ellipsis-${l}-${n.targetPage}` : `page-${n.page}`;
+            if (n.type === "ellipsis")
+              return /* @__PURE__ */ a(xe, { children: [
+                /* @__PURE__ */ t(ye, { asChild: !0, children: /* @__PURE__ */ t(
                   d,
                   {
                     variant: "tertiary",
                     size: "icon-sm",
                     shape: "normal",
                     disabled: c,
-                    onClick: () => s(r.targetPage),
-                    "aria-label": (B = e == null ? void 0 : e.jumpToPage) == null ? void 0 : B.call(e, r.targetPage),
+                    onClick: () => s(n.targetPage),
+                    "aria-label": (T = e == null ? void 0 : e.jumpToPage) == null ? void 0 : T.call(e, n.targetPage),
                     className: o.ellipsisButton,
                     children: "..."
                   }
                 ) }),
-                /* @__PURE__ */ t(Pe, { children: (j = e == null ? void 0 : e.jumpToPage) == null ? void 0 : j.call(e, r.targetPage) })
-              ] }, T);
-            const k = r.page === h;
+                /* @__PURE__ */ t(Ie, { children: (j = e == null ? void 0 : e.jumpToPage) == null ? void 0 : j.call(e, n.targetPage) })
+              ] }, B);
+            const w = n.page === h;
             return /* @__PURE__ */ t(
               d,
               {
-                variant: k ? "secondary" : "tertiary",
+                variant: w ? "secondary" : "tertiary",
                 size: "icon-sm",
                 shape: "normal",
                 disabled: c,
-                onClick: () => s(r.page),
-                "aria-label": (z = e == null ? void 0 : e.goToPage) == null ? void 0 : z.call(e, r.page),
-                "aria-current": k ? "page" : void 0,
-                className: k ? o.pageButtonActive : o.pageButtonInactive,
-                children: r.page
+                onClick: () => s(n.page),
+                "aria-label": (z = e == null ? void 0 : e.goToPage) == null ? void 0 : z.call(e, n.page),
+                "aria-current": w ? "page" : void 0,
+                className: w ? o.pageButtonActive : o.pageButtonInactive,
+                children: n.page
               },
-              T
+              B
             );
           }),
           /* @__PURE__ */ t(
@@ -355,7 +353,7 @@ const Ne = (n) => /* @__PURE__ */ a(
               onClick: () => s(h + 1),
               "aria-label": e == null ? void 0 : e.nextPage,
               className: o.navButton,
-              children: /* @__PURE__ */ t(Le, {})
+              children: /* @__PURE__ */ t(Se, {})
             }
           ),
           /* @__PURE__ */ t(
@@ -368,7 +366,7 @@ const Ne = (n) => /* @__PURE__ */ a(
               onClick: () => s(f),
               "aria-label": e == null ? void 0 : e.lastPage,
               className: o.navButton,
-              children: /* @__PURE__ */ t(Te, {})
+              children: /* @__PURE__ */ t(Le, {})
             }
           )
         ] }),
@@ -408,17 +406,17 @@ const Ne = (n) => /* @__PURE__ */ a(
                     sideOffset: 4,
                     children: /* @__PURE__ */ t(J, { className: o.selectViewport, children: /* @__PURE__ */ a(K, { children: [
                       (e == null ? void 0 : e.resultsPerPage) && /* @__PURE__ */ t(Y, { className: o.selectLabel, children: e.resultsPerPage }),
-                      V.map((r) => /* @__PURE__ */ a(
+                      V.map((n) => /* @__PURE__ */ a(
                         b,
                         {
-                          value: String(r),
+                          value: String(n),
                           className: o.selectItem,
                           children: [
-                            /* @__PURE__ */ t("span", { className: o.selectItemIndicator, children: /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(je, { style: { width: 16, height: 16 } }) }) }),
-                            /* @__PURE__ */ t(te, { children: r })
+                            /* @__PURE__ */ t("span", { className: o.selectItemIndicator, children: /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(Te, { style: { width: 16, height: 16 } }) }) }),
+                            /* @__PURE__ */ t(te, { children: n })
                           ]
                         },
-                        r
+                        n
                       ))
                     ] }) })
                   }
@@ -432,6 +430,6 @@ const Ne = (n) => /* @__PURE__ */ a(
   ) });
 });
 export {
-  Ge as TablePagination
+  _e as TablePagination
 };
 //# sourceMappingURL=table-pagination.js.map