@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/ui/menubar.js

@@ -3,7 +3,7 @@ import { jsx as r, jsxs as l } from "react/jsx-runtime";
 import * as o from "react";
 import { aW as p, aX as f, aY as b, aZ as y, a_ as g, a$ as N, b0 as x, b1 as h, b2 as v, b3 as M, b4 as w, b5 as R, b6 as j, b7 as G, b8 as P, b9 as T } from "../_chunks/primitives.js";
 import { IconChevronRight as z, IconCheck as A, IconCircle as L } from "@tabler/icons-react";
-import { cn as n } from "./lib/utils.js";
+import { cn as d } from "./lib/utils.js";
 import { tweens as C, springs as S } from "./lib/motion.js";
 import { A as U, m as I } from "../_chunks/framer.js";
 const k = o.createContext(!1), W = (e) => /* @__PURE__ */ r(P, { ...e });
@@ -14,11 +14,11 @@ const re = j, te = g, X = ({
   onOpenChange: s,
   ...t
 }) => {
-  const [d, i] = o.useState(a), c = e !== void 0, u = c ? e : d, _ = o.useCallback(
+  const [n, c] = o.useState(a), i = e !== void 0, u = i ? e : n, _ = o.useCallback(
     (m) => {
-      c || i(m), s == null || s(m);
+      i || c(m), s == null || s(m);
     },
-    [c, s]
+    [i, s]
   );
   return /* @__PURE__ */ r(k.Provider, { value: u, children: /* @__PURE__ */ r(T, { open: u, onOpenChange: _, ...t }) });
 };
@@ -27,8 +27,8 @@ const oe = G, Y = o.forwardRef(({ className: e, ...a }, s) => /* @__PURE__ */ r(
   p,
   {
     ref: s,
-    className: n(
-      "flex h-ds-sm-plus items-center space-x-ds-02 rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-02 shadow-01",
+    className: d(
+      "flex h-ds-sm-plus items-center space-x-ds-02 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-raised",
       e
     ),
     ...a
@@ -39,20 +39,20 @@ const Z = o.forwardRef(({ className: e, ...a }, s) => /* @__PURE__ */ r(
   f,
   {
     ref: s,
-    className: n(
-      "flex cursor-default select-none items-center rounded-ds-sm px-ds-04 py-ds-02 text-ds-md font-medium outline-none transition-colors hover:bg-surface-3 focus-visible:bg-surface-3 data-[state=open]:bg-surface-3",
+    className: d(
+      "flex cursor-default select-none items-center rounded-ds-sm px-ds-04 py-ds-02 text-ds-md font-medium outline-none transition-colors hover:bg-surface-raised-hover focus-visible:bg-surface-raised-hover data-[state=open]:bg-surface-raised-hover",
       e
     ),
     ...a
   }
 ));
 Z.displayName = f.displayName;
-const $ = o.forwardRef(({ className: e, inset: a, children: s, ...t }, d) => /* @__PURE__ */ l(
+const $ = o.forwardRef(({ className: e, inset: a, children: s, ...t }, n) => /* @__PURE__ */ l(
   b,
   {
-    ref: d,
-    className: n(
-      "flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none focus:bg-surface-2 data-[state=open]:bg-surface-2 [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0",
+    ref: n,
+    className: d(
+      "flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0",
       a && "pl-ds-07",
       e
     ),
@@ -65,8 +65,8 @@ const $ = o.forwardRef(({ className: e, inset: a, children: s, ...t }, d) => /*
 ));
 $.displayName = b.displayName;
 const q = o.forwardRef(({ className: e, children: a, ...s }, t) => {
-  const d = o.useContext(k);
-  return /* @__PURE__ */ r(U, { children: d && /* @__PURE__ */ r(
+  const n = o.useContext(k);
+  return /* @__PURE__ */ r(U, { children: n && /* @__PURE__ */ r(
     y,
     {
       ref: t,
@@ -80,8 +80,8 @@ const q = o.forwardRef(({ className: e, children: a, ...s }, t) => {
           animate: { opacity: 1, scale: 1 },
           exit: { opacity: 0, scale: 0.95 },
           transition: { ...S.snappy, opacity: C.fade },
-          className: n(
-            "z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-02 text-surface-fg shadow-03",
+          className: d(
+            "z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating",
             e
           ),
           children: a
@@ -92,15 +92,15 @@ const q = o.forwardRef(({ className: e, children: a, ...s }, t) => {
 });
 q.displayName = y.displayName;
 const B = o.forwardRef(
-  ({ className: e, align: a = "start", alignOffset: s = -4, sideOffset: t = 8, children: d, ...i }, c) => /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
+  ({ className: e, align: a = "start", alignOffset: s = -4, sideOffset: t = 8, children: n, ...c }, i) => /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
     N,
     {
-      ref: c,
+      ref: i,
       align: a,
       alignOffset: s,
       sideOffset: t,
       asChild: !0,
-      ...i,
+      ...c,
       children: /* @__PURE__ */ r(
         I.div,
         {
@@ -108,11 +108,11 @@ const B = o.forwardRef(
           animate: { opacity: 1, scale: 1 },
           exit: { opacity: 0, scale: 0.95 },
           transition: { ...S.snappy, opacity: C.fade },
-          className: n(
-            "z-popover min-w-[12rem] rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-02 text-surface-fg shadow-03",
+          className: d(
+            "z-popover min-w-[12rem] rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating",
             e
           ),
-          children: d
+          children: n
         }
       )
     }
@@ -123,8 +123,8 @@ const D = o.forwardRef(({ className: e, inset: a, ...s }, t) => /* @__PURE__ */
   x,
   {
     ref: t,
-    className: n(
-      "relative flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none transition-colors focus:bg-surface-2 focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+    className: d(
+      "relative flex cursor-default select-none items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-none transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
       a && "pl-ds-07",
       e
     ),
@@ -132,12 +132,12 @@ const D = o.forwardRef(({ className: e, inset: a, ...s }, t) => /* @__PURE__ */
   }
 ));
 D.displayName = x.displayName;
-const E = o.forwardRef(({ className: e, children: a, checked: s, ...t }, d) => /* @__PURE__ */ l(
+const E = o.forwardRef(({ className: e, children: a, checked: s, ...t }, n) => /* @__PURE__ */ l(
   h,
   {
-    ref: d,
-    className: n(
-      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none transition-colors focus:bg-surface-2 focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
+    ref: n,
+    className: d(
+      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
       e
     ),
     checked: s,
@@ -153,8 +153,8 @@ const F = o.forwardRef(({ className: e, children: a, ...s }, t) => /* @__PURE__
   M,
   {
     ref: t,
-    className: n(
-      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none transition-colors focus:bg-surface-2 focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
+    className: d(
+      "relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-none transition-colors focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
       e
     ),
     ...s,
@@ -169,7 +169,7 @@ const H = o.forwardRef(({ className: e, inset: a, ...s }, t) => /* @__PURE__ */
   w,
   {
     ref: t,
-    className: n(
+    className: d(
       "px-ds-03 py-ds-02b text-ds-md font-semibold",
       a && "pl-ds-07",
       e
@@ -182,7 +182,7 @@ const J = o.forwardRef(({ className: e, ...a }, s) => /* @__PURE__ */ r(
   R,
   {
     ref: s,
-    className: n("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
+    className: d("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
     ...a
   }
 ));
@@ -193,7 +193,7 @@ const K = ({
 }) => /* @__PURE__ */ r(
   "span",
   {
-    className: n(
+    className: d(
       "ml-auto text-ds-sm text-surface-fg-subtle",
       e
     ),

package/dist/ui/navigation-menu.js

@@ -1,50 +1,50 @@
 "use client";
 import { jsxs as v, jsx as c } from "react/jsx-runtime";
 import * as a from "react";
-import { ba as N, bb as h, bc as w, bd as x, be as R, bf as M, bg as O, bh as V } from "../_chunks/primitives.js";
+import { ba as h, bb as N, bc as w, bd as x, be as R, bf as M, bg as O, bh as V } from "../_chunks/primitives.js";
 import { IconChevronDown as E } from "@tabler/icons-react";
-import { cn as u } from "./lib/utils.js";
+import { cn as d } from "./lib/utils.js";
 import { tweens as y, springs as j } from "./lib/motion.js";
 import { m as g } from "../_chunks/framer.js";
-const L = a.forwardRef(({ className: r, children: n, ...t }, o) => /* @__PURE__ */ v(
-  N,
+const L = a.forwardRef(({ className: n, children: o, ...t }, r) => /* @__PURE__ */ v(
+  h,
   {
-    ref: o,
-    className: u(
+    ref: r,
+    className: d(
       "relative z-raised flex max-w-max flex-1 items-center justify-center",
-      r
+      n
     ),
     ...t,
     children: [
-      n,
+      o,
       /* @__PURE__ */ c(I, {})
     ]
   }
 ));
-L.displayName = N.displayName;
-const S = a.forwardRef(({ className: r, ...n }, t) => /* @__PURE__ */ c(
-  h,
+L.displayName = h.displayName;
+const S = a.forwardRef(({ className: n, ...o }, t) => /* @__PURE__ */ c(
+  N,
   {
     ref: t,
-    className: u(
+    className: d(
       "group flex flex-1 list-none items-center justify-center space-x-ds-02",
-      r
+      n
     ),
-    ...n
+    ...o
   }
 ));
-S.displayName = h.displayName;
-const J = O, W = a.forwardRef(({ className: r, children: n, ...t }, o) => /* @__PURE__ */ v(
+S.displayName = N.displayName;
+const J = O, W = a.forwardRef(({ className: n, children: o, ...t }, r) => /* @__PURE__ */ v(
   w,
   {
-    ref: o,
-    className: u(
-      "group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-ds-md bg-transparent px-ds-05 py-ds-03 text-ds-md font-medium transition-colors hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled",
-      r
+    ref: r,
+    className: d(
+      "group inline-flex h-ds-sm-plus w-max items-center justify-center rounded-ds-md bg-transparent px-ds-05 py-ds-03 text-ds-md font-medium transition-colors hover:bg-surface-raised-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none disabled:opacity-action-disabled",
+      n
     ),
     ...t,
     children: [
-      n,
+      o,
       " ",
       /* @__PURE__ */ c(
         E,
@@ -63,18 +63,18 @@ const b = {
   "to-start": { x: "-13rem", opacity: 0 },
   "to-end": { x: "13rem", opacity: 0 },
   center: { x: 0, opacity: 1 }
-}, D = a.forwardRef(({ className: r, ...n }, t) => {
-  const o = a.useRef(null), m = a.useCallback(
+}, D = a.forwardRef(({ className: n, ...o }, t) => {
+  const r = a.useRef(null), m = a.useCallback(
     (s) => {
-      o.current = s, typeof t == "function" ? t(s) : t && (t.current = s);
+      r.current = s, typeof t == "function" ? t(s) : t && (t.current = s);
     },
     [t]
   ), [i, l] = a.useState(null);
   a.useEffect(() => {
-    const s = o.current;
+    const s = r.current;
     if (!s) return;
-    const d = s.getAttribute("data-motion");
-    d && l(d);
+    const u = s.getAttribute("data-motion");
+    u && l(u);
     const f = new MutationObserver((A) => {
       for (const C of A)
         if (C.attributeName === "data-motion") {
@@ -89,11 +89,11 @@ const b = {
     x,
     {
       ref: m,
-      className: u(
+      className: d(
         "left-0 top-0 w-full md:absolute md:w-auto",
-        r
+        n
       ),
-      ...n,
+      ...o,
       children: /* @__PURE__ */ c(
         g.div,
         {
@@ -101,7 +101,7 @@ const b = {
           animate: p,
           transition: { ...j.smooth, opacity: y.fade },
           style: { width: "100%" },
-          children: n.children
+          children: o.children
         },
         i
       )
@@ -109,33 +109,33 @@ const b = {
   );
 });
 D.displayName = x.displayName;
-const K = V, I = a.forwardRef(({ className: r, ...n }, t) => {
-  const o = a.useRef(null), m = a.useCallback(
+const K = V, I = a.forwardRef(({ className: n, ...o }, t) => {
+  const r = a.useRef(null), m = a.useCallback(
     (e) => {
-      o.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+      r.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
     },
     [t]
   ), [i, l] = a.useState(!1);
   return a.useEffect(() => {
-    const e = o.current;
+    const e = r.current;
     if (!e) return;
     const p = e.getAttribute("data-state");
     l(p === "open");
-    const s = new MutationObserver((d) => {
-      for (const f of d)
+    const s = new MutationObserver((u) => {
+      for (const f of u)
         f.attributeName === "data-state" && l(e.getAttribute("data-state") === "open");
     });
     return s.observe(e, { attributes: !0, attributeFilter: ["data-state"] }), () => s.disconnect();
-  }, []), /* @__PURE__ */ v("div", { className: u("absolute left-0 top-full flex justify-center"), children: [
+  }, []), /* @__PURE__ */ v("div", { className: d("absolute left-0 top-full flex justify-center"), children: [
     /* @__PURE__ */ c(
       R,
       {
-        className: u(
-          "origin-top-center relative mt-ds-02b h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-1 shadow-03 md:w-[var(--radix-navigation-menu-viewport-width)]",
-          r
+        className: d(
+          "origin-top-center relative mt-ds-02b h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating md:w-[var(--radix-navigation-menu-viewport-width)]",
+          n
         ),
         ref: m,
-        ...n
+        ...o
       }
     ),
     /* @__PURE__ */ c(
@@ -155,20 +155,20 @@ const K = V, I = a.forwardRef(({ className: r, ...n }, t) => {
   ] });
 });
 I.displayName = R.displayName;
-const F = a.forwardRef(({ className: r, ...n }, t) => {
-  const o = a.useRef(null), m = a.useCallback(
+const F = a.forwardRef(({ className: n, ...o }, t) => {
+  const r = a.useRef(null), m = a.useCallback(
     (e) => {
-      o.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+      r.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
     },
     [t]
   ), [i, l] = a.useState(!1);
   return a.useEffect(() => {
-    const e = o.current;
+    const e = r.current;
     if (!e) return;
     const p = e.getAttribute("data-state");
     l(p === "visible");
-    const s = new MutationObserver((d) => {
-      for (const f of d)
+    const s = new MutationObserver((u) => {
+      for (const f of u)
         f.attributeName === "data-state" && l(e.getAttribute("data-state") === "visible");
     });
     return s.observe(e, { attributes: !0, attributeFilter: ["data-state"] }), () => s.disconnect();
@@ -176,11 +176,11 @@ const F = a.forwardRef(({ className: r, ...n }, t) => {
     M,
     {
       ref: m,
-      className: u(
+      className: d(
         "top-full z-base flex h-ds-02b items-end justify-center overflow-hidden",
-        r
+        n
       ),
-      ...n,
+      ...o,
       children: /* @__PURE__ */ c(
         g.div,
         {
@@ -188,7 +188,7 @@ const F = a.forwardRef(({ className: r, ...n }, t) => {
           initial: !1,
           animate: i ? { opacity: 1 } : { opacity: 0 },
           transition: y.fade,
-          className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-surface-border shadow-02"
+          className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-surface-border shadow-raised-hover"
         }
       )
     }

package/dist/ui/number-input.js

@@ -8,7 +8,7 @@ const D = y.forwardRef(
   ({
     value: s = 0,
     onValueChange: e,
-    min: r = Number.MIN_SAFE_INTEGER,
+    min: t = Number.MIN_SAFE_INTEGER,
     max: o = Number.MAX_SAFE_INTEGER,
     step: a = 1,
     disabled: d = !1,
@@ -17,23 +17,23 @@ const D = y.forwardRef(
     ...n
   }, l) => {
     const f = k(), p = u ?? (n.id || f.helperTextId ? void 0 : "Numeric value"), N = (c) => {
-      const t = c.target.value.trim();
-      if (t === "" || t === "-") {
-        e == null || e(r >= 0 ? r : 0);
+      const r = c.target.value.trim();
+      if (r === "" || r === "-") {
+        e == null || e(t >= 0 ? t : 0);
         return;
       }
-      const m = Number(t);
+      const m = Number(r);
       if (Number.isNaN(m)) return;
-      const w = Math.min(Math.max(m, r), o);
+      const w = Math.min(Math.max(m, t), o);
       e == null || e(w);
     }, v = (c) => {
       c.preventDefault();
-      const t = s + a;
-      t <= o && (e == null || e(t));
+      const r = s + a;
+      r <= o && (e == null || e(r));
     }, x = (c) => {
       c.preventDefault();
-      const t = s - a;
-      t >= r && (e == null || e(t));
+      const r = s - a;
+      r >= t && (e == null || e(r));
     };
     return /* @__PURE__ */ I(
       "div",
@@ -48,9 +48,9 @@ const D = y.forwardRef(
             {
               type: "button",
               onClick: x,
-              disabled: d || s <= r,
+              disabled: d || s <= t,
               "aria-label": "Decrease value",
-              className: "flex h-ds-sm w-ds-sm items-center justify-center border-0 text-surface-fg-subtle hover:bg-surface-3 hover:text-surface-fg-muted active:scale-90 transition-[color,transform] duration-fast-01 ease-productive-standard",
+              className: "flex h-ds-sm w-ds-sm items-center justify-center border-0 text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,transform] duration-fast-01 ease-productive-standard",
               children: /* @__PURE__ */ i(E, { className: "h-ico-sm w-ico-sm" })
             }
           ),
@@ -61,7 +61,7 @@ const D = y.forwardRef(
               type: "number",
               value: s,
               onChange: N,
-              min: r,
+              min: t,
               max: o,
               step: a,
               disabled: d,
@@ -78,7 +78,7 @@ const D = y.forwardRef(
               onClick: v,
               disabled: d || s >= o,
               "aria-label": "Increase value",
-              className: "flex h-ds-sm w-ds-sm items-center justify-center border-0 text-surface-fg-subtle hover:bg-surface-3 hover:text-surface-fg-muted active:scale-90 transition-[color,transform] duration-fast-01 ease-productive-standard",
+              className: "flex h-ds-sm w-ds-sm items-center justify-center border-0 text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg-muted active:scale-90 transition-[color,transform] duration-fast-01 ease-productive-standard",
               children: /* @__PURE__ */ i(j, { className: "h-ico-sm w-ico-sm" })
             }
           )

package/dist/ui/pagination.js

@@ -3,28 +3,28 @@ import { jsx as a, jsxs as g } from "react/jsx-runtime";
 import * as o from "react";
 import { S as R } from "../_chunks/primitives.js";
 import { IconChevronLeft as j, IconChevronRight as k, IconDots as C } from "@tabler/icons-react";
-import { cn as l } from "./lib/utils.js";
-const w = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a(
+import { cn as r } from "./lib/utils.js";
+const v = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a(
   "nav",
   {
     ref: s,
     role: "navigation",
     "aria-label": "pagination",
-    className: l("mx-auto flex w-full justify-center", e),
+    className: r("mx-auto flex w-full justify-center", e),
     ...i
   }
 ));
-w.displayName = "PaginationRoot";
-const x = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a(
+v.displayName = "PaginationRoot";
+const w = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a(
   "ul",
   {
     ref: s,
-    className: l("flex flex-row items-center gap-ds-02", e),
+    className: r("flex flex-row items-center gap-ds-02", e),
     ...i
   }
 ));
-x.displayName = "PaginationContent";
-const f = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a("li", { ref: s, className: l("", e), ...i }));
+w.displayName = "PaginationContent";
+const f = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ a("li", { ref: s, className: r("", e), ...i }));
 f.displayName = "PaginationItem";
 const u = o.forwardRef(
   ({ className: e, isActive: i = !1, asChild: s = !1, ...c }, t) => /* @__PURE__ */ a(
@@ -32,9 +32,9 @@ const u = o.forwardRef(
     {
       ref: t,
       "aria-current": i ? "page" : void 0,
-      className: l(
+      className: r(
         "inline-flex items-center justify-center h-ds-sm-plus w-ds-sm-plus rounded-ds-md text-ds-md font-medium tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled active:scale-95",
-        i ? "bg-accent-9 text-accent-fg" : "hover:bg-surface-3 text-surface-fg",
+        i ? "bg-accent-9 text-accent-fg" : "hover:bg-surface-raised-hover text-surface-fg",
         e
       ),
       ...c
@@ -42,12 +42,12 @@ const u = o.forwardRef(
   )
 );
 u.displayName = "PaginationLink";
-const v = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ g(
+const x = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ g(
   u,
   {
     ref: s,
     "aria-label": "Go to previous page",
-    className: l("w-auto gap-ds-02 pl-ds-03 pr-ds-04", e),
+    className: r("w-auto gap-ds-02 pl-ds-03 pr-ds-04", e),
     ...i,
     children: [
       /* @__PURE__ */ a(j, { className: "h-ico-sm w-ico-sm" }),
@@ -55,13 +55,13 @@ const v = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ g(
     ]
   }
 ));
-v.displayName = "PaginationPrevious";
+x.displayName = "PaginationPrevious";
 const y = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ g(
   u,
   {
     ref: s,
     "aria-label": "Go to next page",
-    className: l("w-auto gap-ds-02 pl-ds-04 pr-ds-03", e),
+    className: r("w-auto gap-ds-02 pl-ds-04 pr-ds-03", e),
     ...i,
     children: [
       /* @__PURE__ */ a("span", { children: "Next" }),
@@ -75,7 +75,7 @@ const P = o.forwardRef(({ className: e, ...i }, s) => /* @__PURE__ */ g(
   {
     ref: s,
     "aria-hidden": "true",
-    className: l(
+    className: r(
       "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center text-surface-fg-muted",
       e
     ),
@@ -118,23 +118,23 @@ const M = o.forwardRef(
     ...d
   }, p) => {
     const h = I(i, e, c);
-    return /* @__PURE__ */ a(w, { ref: p, className: t, ...d, children: /* @__PURE__ */ g(x, { children: [
+    return /* @__PURE__ */ a(v, { ref: p, className: t, ...d, children: /* @__PURE__ */ g(w, { children: [
       /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
-        v,
+        x,
         {
           onClick: () => s(Math.max(1, i - 1)),
           disabled: i <= 1
         }
       ) }),
       h.map(
-        (r, n) => r === "ellipsis" ? /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(P, {}) }, `e${n}`) : /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
+        (l, n) => l === "ellipsis" ? /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(P, {}) }, `e${n}`) : /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
           u,
           {
-            isActive: r === i,
-            onClick: () => s(r),
-            children: r
+            isActive: l === i,
+            onClick: () => s(l),
+            children: l
           }
-        ) }, r)
+        ) }, l)
       ),
       /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
         y,
@@ -148,13 +148,13 @@ const M = o.forwardRef(
 );
 M.displayName = "PaginationNav";
 export {
-  x as PaginationContent,
+  w as PaginationContent,
   P as PaginationEllipsis,
   f as PaginationItem,
   u as PaginationLink,
   M as PaginationNav,
   y as PaginationNext,
-  v as PaginationPrevious,
-  w as PaginationRoot,
+  x as PaginationPrevious,
+  v as PaginationRoot,
   I as generatePagination
 };