@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/ui/dialog.js

@@ -1,27 +1,27 @@
 "use client";
 import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import * as t from "react";
-import { aa as g, ab as C, ac as f, ad as x, ae as y, af as N, ag as R, ah as j } from "../_chunks/primitives.js";
+import { aa as g, ab as C, ac as f, ad as y, ae as x, af as v, ag as R, ah as j } from "../_chunks/primitives.js";
 import { IconX as M } from "@tabler/icons-react";
 import { cn as i } from "./lib/utils.js";
 import { tweens as p, springs as T } from "./lib/motion.js";
 import { A as P, m as u } from "../_chunks/framer.js";
-const v = t.createContext({ open: !1 }), z = () => t.useContext(v), A = ({
+const N = t.createContext({ open: !1 }), z = () => t.useContext(N), A = ({
   open: a,
   defaultOpen: s,
   onOpenChange: e,
   ...r
 }) => {
-  const [l, b] = t.useState(s ?? !1), n = a !== void 0, c = n ? a : l, h = t.useCallback(
+  const [l, h] = t.useState(s ?? !1), n = a !== void 0, c = n ? a : l, b = t.useCallback(
     (m) => {
-      n || b(m), e == null || e(m);
+      n || h(m), e == null || e(m);
     },
     [n, e]
   ), w = t.useMemo(() => ({ open: c }), [c]);
-  return /* @__PURE__ */ o(v.Provider, { value: w, children: /* @__PURE__ */ o(R, { open: c, onOpenChange: h, ...r }) });
+  return /* @__PURE__ */ o(N.Provider, { value: w, children: /* @__PURE__ */ o(R, { open: c, onOpenChange: b, ...r }) });
 };
 A.displayName = "Dialog";
-const K = j, F = C, L = x, D = t.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ o(
+const K = j, F = C, L = y, D = t.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ o(
   g,
   {
     ref: e,
@@ -61,12 +61,12 @@ const H = t.forwardRef(({ className: a, children: s, ...e }, r) => {
             exit: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
             transition: { ...T.smooth, opacity: p.fade },
             className: i(
-              "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
+              "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg gap-ds-05 border border-surface-border-strong bg-surface-overlay p-ds-06 shadow-overlay rounded-ds-xl",
               a
             ),
             children: [
               s,
-              /* @__PURE__ */ d(x, { className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-3 active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none", children: [
+              /* @__PURE__ */ d(y, { className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none", children: [
                 /* @__PURE__ */ o(M, { className: "h-ico-lg w-ico-lg" }),
                 /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
               ] })
@@ -116,7 +116,7 @@ const O = t.forwardRef(
 );
 O.displayName = "DialogFooter";
 const S = t.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ o(
-  y,
+  x,
   {
     ref: e,
     className: i(
@@ -126,16 +126,16 @@ const S = t.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ o(
     ...s
   }
 ));
-S.displayName = y.displayName;
+S.displayName = x.displayName;
 const V = t.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ o(
-  N,
+  v,
   {
     ref: e,
     className: i("text-ds-md text-surface-fg-muted", a),
     ...s
   }
 ));
-V.displayName = N.displayName;
+V.displayName = v.displayName;
 export {
   A as Dialog,
   L as DialogClose,

package/dist/ui/dropdown-menu.js

@@ -1,68 +1,68 @@
 "use client";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import * as r from "react";
-import { X as f, Y as b, Z as w, _ as y, $ as g, a0 as x, a1 as h, a2 as v, a3 as N, a4 as M, a5 as P, a6 as _, a7 as j, a8 as G, a9 as T } from "../_chunks/primitives.js";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import * as t from "react";
+import { X as f, Y as b, Z as y, _ as w, $ as g, a0 as v, a1 as h, a2 as x, a3 as N, a4 as M, a5 as P, a6 as _, a7 as j, a8 as G, a9 as T } from "../_chunks/primitives.js";
 import { IconChevronRight as z, IconCheck as A, IconCircle as L } from "@tabler/icons-react";
 import { cn as d } from "./lib/utils.js";
 import { tweens as D, springs as C } from "./lib/motion.js";
 import { A as R, m as S } from "../_chunks/framer.js";
-const I = r.createContext(!1), k = r.createContext(!1), U = ({
+const I = t.createContext(!1), k = t.createContext(!1), U = ({
   open: s,
-  defaultOpen: a = !1,
+  defaultOpen: o = !1,
   onOpenChange: e,
-  ...t
+  ...r
 }) => {
-  const [n, i] = r.useState(a), c = s !== void 0, l = c ? s : n, p = r.useCallback(
+  const [n, c] = t.useState(o), i = s !== void 0, l = i ? s : n, p = t.useCallback(
     (u) => {
-      c || i(u), e == null || e(u);
+      i || c(u), e == null || e(u);
     },
-    [c, e]
+    [i, e]
   );
-  return /* @__PURE__ */ o(I.Provider, { value: l, children: /* @__PURE__ */ o(_, { open: l, onOpenChange: p, ...t }) });
+  return /* @__PURE__ */ a(I.Provider, { value: l, children: /* @__PURE__ */ a(_, { open: l, onOpenChange: p, ...r }) });
 };
 U.displayName = "DropdownMenu";
-const se = P, oe = j, ae = w, X = ({
+const se = P, ae = j, oe = y, X = ({
   open: s,
-  defaultOpen: a = !1,
+  defaultOpen: o = !1,
   onOpenChange: e,
-  ...t
+  ...r
 }) => {
-  const [n, i] = r.useState(a), c = s !== void 0, l = c ? s : n, p = r.useCallback(
+  const [n, c] = t.useState(o), i = s !== void 0, l = i ? s : n, p = t.useCallback(
     (u) => {
-      c || i(u), e == null || e(u);
+      i || c(u), e == null || e(u);
     },
-    [c, e]
+    [i, e]
   );
-  return /* @__PURE__ */ o(k.Provider, { value: l, children: /* @__PURE__ */ o(T, { open: l, onOpenChange: p, ...t }) });
+  return /* @__PURE__ */ a(k.Provider, { value: l, children: /* @__PURE__ */ a(T, { open: l, onOpenChange: p, ...r }) });
 };
 X.displayName = "DropdownMenuSub";
-const te = G, Y = r.forwardRef(({ className: s, inset: a, children: e, ...t }, n) => /* @__PURE__ */ m(
+const re = G, Y = t.forwardRef(({ className: s, inset: o, children: e, ...r }, n) => /* @__PURE__ */ m(
   f,
   {
     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-2 data-[state=open]:bg-surface-2 [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0",
-      a && "pl-ds-07",
+      "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",
+      o && "pl-ds-07",
       s
     ),
-    ...t,
+    ...r,
     children: [
       e,
-      /* @__PURE__ */ o(z, { className: "ml-auto" })
+      /* @__PURE__ */ a(z, { className: "ml-auto" })
     ]
   }
 ));
 Y.displayName = f.displayName;
-const Z = r.forwardRef(({ className: s, children: a, ...e }, t) => {
-  const n = r.useContext(k);
-  return /* @__PURE__ */ o(R, { children: n && /* @__PURE__ */ o(
+const Z = t.forwardRef(({ className: s, children: o, ...e }, r) => {
+  const n = t.useContext(k);
+  return /* @__PURE__ */ a(R, { children: n && /* @__PURE__ */ a(
     b,
     {
-      ref: t,
+      ref: r,
       forceMount: !0,
       asChild: !0,
       ...e,
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ a(
         S.div,
         {
           initial: { opacity: 0, scale: 0.95 },
@@ -70,27 +70,27 @@ const Z = r.forwardRef(({ className: s, children: a, ...e }, t) => {
           exit: { opacity: 0, scale: 0.95 },
           transition: { ...C.snappy, opacity: D.fade },
           className: d(
-            "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",
+            "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",
             s
           ),
-          children: a
+          children: o
         }
       )
     }
   ) });
 });
 Z.displayName = b.displayName;
-const $ = r.forwardRef(({ className: s, sideOffset: a = 4, children: e, ...t }, n) => {
-  const i = r.useContext(I);
-  return /* @__PURE__ */ o(R, { children: i && /* @__PURE__ */ o(w, { forceMount: !0, children: /* @__PURE__ */ o(
-    y,
+const $ = t.forwardRef(({ className: s, sideOffset: o = 4, children: e, ...r }, n) => {
+  const c = t.useContext(I);
+  return /* @__PURE__ */ a(R, { children: c && /* @__PURE__ */ a(y, { forceMount: !0, children: /* @__PURE__ */ a(
+    w,
     {
       ref: n,
-      sideOffset: a,
+      sideOffset: o,
       forceMount: !0,
       asChild: !0,
-      ...t,
-      children: /* @__PURE__ */ o(
+      ...r,
+      children: /* @__PURE__ */ a(
         S.div,
         {
           initial: { opacity: 0, scale: 0.95 },
@@ -98,7 +98,7 @@ const $ = r.forwardRef(({ className: s, sideOffset: a = 4, children: e, ...t },
           exit: { opacity: 0, scale: 0.95 },
           transition: { ...C.snappy, opacity: D.fade },
           className: d(
-            "z-popover min-w-[8rem] rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-02 text-surface-fg shadow-03",
+            "z-popover min-w-[8rem] rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating",
             s
           ),
           children: e
@@ -107,83 +107,83 @@ const $ = r.forwardRef(({ className: s, sideOffset: a = 4, children: e, ...t },
     }
   ) }) });
 });
-$.displayName = y.displayName;
-const q = r.forwardRef(({ className: s, inset: a, ...e }, t) => /* @__PURE__ */ o(
+$.displayName = w.displayName;
+const q = t.forwardRef(({ className: s, inset: o, ...e }, r) => /* @__PURE__ */ a(
   g,
   {
-    ref: t,
+    ref: r,
     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 duration-fast-01 ease-productive-standard hover:bg-surface-2 focus:bg-surface-2 focus:text-surface-fg active:bg-surface-3 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",
+      "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 duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0",
+      o && "pl-ds-07",
       s
     ),
     ...e
   }
 ));
 q.displayName = g.displayName;
-const B = r.forwardRef(({ className: s, children: a, checked: e, ...t }, n) => /* @__PURE__ */ m(
-  x,
+const B = t.forwardRef(({ className: s, children: o, checked: e, ...r }, n) => /* @__PURE__ */ m(
+  v,
   {
     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 duration-fast-01 ease-productive-standard hover:bg-surface-2 focus:bg-surface-2 focus:text-surface-fg active:bg-surface-3 data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
+      "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 duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
       s
     ),
     checked: e,
-    ...t,
+    ...r,
     children: [
-      /* @__PURE__ */ o("span", { className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center", children: /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(A, { className: "h-ico-sm w-ico-sm" }) }) }),
-      a
+      /* @__PURE__ */ a("span", { className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center", children: /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(A, { className: "h-ico-sm w-ico-sm" }) }) }),
+      o
     ]
   }
 ));
-B.displayName = x.displayName;
-const E = r.forwardRef(({ className: s, children: a, ...e }, t) => /* @__PURE__ */ m(
-  v,
+B.displayName = v.displayName;
+const E = t.forwardRef(({ className: s, children: o, ...e }, r) => /* @__PURE__ */ m(
+  x,
   {
-    ref: t,
+    ref: r,
     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 duration-fast-01 ease-productive-standard hover:bg-surface-2 focus:bg-surface-2 focus:text-surface-fg active:bg-surface-3 data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
+      "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 duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled",
       s
     ),
     ...e,
     children: [
-      /* @__PURE__ */ o("span", { className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center", children: /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(L, { className: "h-2 w-2 fill-current" }) }) }),
-      a
+      /* @__PURE__ */ a("span", { className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center", children: /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(L, { className: "h-2 w-2 fill-current" }) }) }),
+      o
     ]
   }
 ));
-E.displayName = v.displayName;
-const F = r.forwardRef(({ className: s, inset: a, ...e }, t) => /* @__PURE__ */ o(
+E.displayName = x.displayName;
+const F = t.forwardRef(({ className: s, inset: o, ...e }, r) => /* @__PURE__ */ a(
   N,
   {
-    ref: t,
+    ref: r,
     className: d(
       "px-ds-03 py-ds-02b text-ds-md font-semibold",
-      a && "pl-ds-07",
+      o && "pl-ds-07",
       s
     ),
     ...e
   }
 ));
 F.displayName = N.displayName;
-const H = r.forwardRef(({ className: s, ...a }, e) => /* @__PURE__ */ o(
+const H = t.forwardRef(({ className: s, ...o }, e) => /* @__PURE__ */ a(
   M,
   {
     ref: e,
     className: d("-mx-ds-01 my-ds-02 h-px bg-surface-border", s),
-    ...a
+    ...o
   }
 ));
 H.displayName = M.displayName;
 const J = ({
   className: s,
-  ...a
-}) => /* @__PURE__ */ o(
+  ...o
+}) => /* @__PURE__ */ a(
   "span",
   {
     className: d("ml-auto text-ds-sm text-surface-fg-subtle", s),
-    ...a
+    ...o
   }
 );
 J.displayName = "DropdownMenuShortcut";
@@ -191,11 +191,11 @@ export {
   U as DropdownMenu,
   B as DropdownMenuCheckboxItem,
   $ as DropdownMenuContent,
-  oe as DropdownMenuGroup,
+  ae as DropdownMenuGroup,
   q as DropdownMenuItem,
   F as DropdownMenuLabel,
-  ae as DropdownMenuPortal,
-  te as DropdownMenuRadioGroup,
+  oe as DropdownMenuPortal,
+  re as DropdownMenuRadioGroup,
   E as DropdownMenuRadioItem,
   H as DropdownMenuSeparator,
   J as DropdownMenuShortcut,

package/dist/ui/file-upload.js

@@ -99,7 +99,7 @@ const J = r.forwardRef(
             "inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02",
             "text-ds-sm font-medium",
             "border border-surface-border-strong",
-            "bg-surface-3 text-surface-fg-muted",
+            "bg-surface-raised-hover text-surface-fg-muted",
             "hover:bg-accent-2",
             "disabled:opacity-action-disabled disabled:cursor-not-allowed",
             "transition-colors"
@@ -165,7 +165,7 @@ const J = r.forwardRef(
                 "flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg",
                 "border-2 border-dashed p-ds-08",
                 "cursor-pointer",
-                "border-surface-border-strong bg-surface-3",
+                "border-surface-border-strong bg-surface-raised-hover",
                 b && "border-accent-7 bg-accent-2",
                 s && "opacity-action-disabled cursor-not-allowed"
               ),
@@ -213,7 +213,7 @@ const J = r.forwardRef(
                     "aria-valuenow": x,
                     "aria-valuemin": 0,
                     "aria-valuemax": 100,
-                    className: "h-2 w-full overflow-hidden rounded-ds-full bg-surface-3",
+                    className: "h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover",
                     children: /* @__PURE__ */ t(
                       c.div,
                       {

package/dist/ui/hover-card.js

@@ -1,32 +1,32 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
 import * as t from "react";
-import { r as u, s as p, t as C, u as v } from "../_chunks/primitives.js";
+import { r as u, s as p, t as v, u as C } from "../_chunks/primitives.js";
 import { cn as y } from "./lib/utils.js";
-import { tweens as x, springs as b } from "./lib/motion.js";
-import { A as g, m as H } from "../_chunks/framer.js";
+import { tweens as g, springs as x } from "./lib/motion.js";
+import { A as b, m as H } from "../_chunks/framer.js";
 const m = t.createContext(!1), h = ({
-  open: s,
-  defaultOpen: a = !1,
+  open: a,
+  defaultOpen: s = !1,
   onOpenChange: e,
   ...n
 }) => {
-  const [i, c] = t.useState(a), o = s !== void 0, d = o ? s : i, f = t.useCallback(
+  const [i, c] = t.useState(s), o = a !== void 0, d = o ? a : i, f = t.useCallback(
     (l) => {
       o || c(l), e == null || e(l);
     },
     [o, e]
   );
-  return /* @__PURE__ */ r(m.Provider, { value: d, children: /* @__PURE__ */ r(v, { open: d, onOpenChange: f, ...n }) });
+  return /* @__PURE__ */ r(m.Provider, { value: d, children: /* @__PURE__ */ r(C, { open: d, onOpenChange: f, ...n }) });
 };
 h.displayName = "HoverCard";
-const T = C, w = t.forwardRef(({ className: s, align: a = "center", sideOffset: e = 4, children: n, ...i }, c) => {
+const T = v, w = t.forwardRef(({ className: a, align: s = "center", sideOffset: e = 4, children: n, ...i }, c) => {
   const o = t.useContext(m);
-  return /* @__PURE__ */ r(g, { children: o && /* @__PURE__ */ r(u, { forceMount: !0, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(b, { children: o && /* @__PURE__ */ r(u, { forceMount: !0, children: /* @__PURE__ */ r(
     p,
     {
       ref: c,
-      align: a,
+      align: s,
       sideOffset: e,
       forceMount: !0,
       asChild: !0,
@@ -37,10 +37,10 @@ const T = C, w = t.forwardRef(({ className: s, align: a = "center", sideOffset:
           initial: { opacity: 0, scale: 0.95 },
           animate: { opacity: 1, scale: 1 },
           exit: { opacity: 0, scale: 0.95 },
-          transition: { ...b.snappy, opacity: x.fade },
+          transition: { ...x.snappy, opacity: g.fade },
           className: y(
-            "z-popover w-64 rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-05 shadow-03 outline-none",
-            s
+            "z-popover w-64 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-none",
+            a
           ),
           children: n
         }

package/dist/ui/input-otp.js

@@ -1,45 +1,45 @@
 "use client";
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import * as a from "react";
 import { OTPInput as m, OTPInputContext as u } from "input-otp";
 import { IconMinus as f } from "@tabler/icons-react";
 import { cn as o } from "./lib/utils.js";
-const x = a.forwardRef(({ className: e, containerClassName: t, ...s }, n) => /* @__PURE__ */ r(
+const x = a.forwardRef(({ className: e, containerClassName: r, ...s }, n) => /* @__PURE__ */ t(
   m,
   {
     ref: n,
     containerClassName: o(
       "flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled",
-      t
+      r
     ),
     className: o("disabled:cursor-not-allowed", e),
     ...s
   }
 ));
 x.displayName = "InputOTP";
-const b = a.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ r("div", { ref: s, className: o("flex items-center", e), ...t }));
+const b = a.forwardRef(({ className: e, ...r }, s) => /* @__PURE__ */ t("div", { ref: s, className: o("flex items-center", e), ...r }));
 b.displayName = "InputOTPGroup";
-const I = a.forwardRef(({ index: e, className: t, ...s }, n) => {
+const I = a.forwardRef(({ index: e, className: r, ...s }, n) => {
   const i = a.useContext(u), { char: d, hasFakeCaret: l, isActive: c } = i.slots[e];
   return /* @__PURE__ */ p(
     "div",
     {
       ref: n,
       className: o(
-        "relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center border-y border-r border-surface-border-strong text-ds-md shadow-01 transition-[box-shadow] first:rounded-l-ds-md first:border-l last:rounded-r-ds-md",
+        "relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center border-y border-r border-surface-border-strong text-ds-md shadow-raised transition-[box-shadow] first:rounded-l-ds-md first:border-l last:rounded-r-ds-md",
         c && "z-raised ring-2 ring-accent-9",
-        t
+        r
       ),
       ...s,
       children: [
         d,
-        l && /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "animate-caret-blink h-[16px] w-px bg-surface-fg duration-slow-02" }) })
+        l && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ t("div", { className: "animate-caret-blink h-[16px] w-px bg-surface-fg duration-slow-02" }) })
       ]
     }
   );
 });
 I.displayName = "InputOTPSlot";
-const O = a.forwardRef(({ ...e }, t) => /* @__PURE__ */ r("div", { ref: t, role: "separator", ...e, children: /* @__PURE__ */ r(f, {}) }));
+const O = a.forwardRef(({ ...e }, r) => /* @__PURE__ */ t("div", { ref: r, role: "separator", ...e, children: /* @__PURE__ */ t(f, {}) }));
 O.displayName = "InputOTPSeparator";
 export {
   x as InputOTP,

package/dist/ui/input.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
 import * as v from "react";
 import { ag as p } from "../_chunks/vendor-utils.js";
 import { cn as d } from "./lib/utils.js";
@@ -9,14 +9,14 @@ import { m as w } from "../_chunks/framer.js";
 const y = p(
   [
     "flex w-full font-sans",
-    "bg-surface-3 text-surface-fg",
+    "bg-surface-raised-hover text-surface-fg",
     "border border-surface-border rounded-ds-md",
     "placeholder:text-surface-fg-subtle",
-    "hover:bg-surface-4",
+    "hover:bg-surface-raised-active",
     "transition-colors duration-fast-01 ease-productive-standard",
     "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-7 focus-visible:border-surface-border",
     "disabled:cursor-not-allowed disabled:opacity-action-disabled",
-    "read-only:bg-surface-2 read-only:cursor-default"
+    "read-only:bg-surface-raised read-only:cursor-default"
   ],
   {
     variants: {
@@ -29,13 +29,13 @@ const y = p(
     defaultVariants: { size: "md" }
   }
 ), N = v.forwardRef(
-  ({ className: n, type: l, state: m, size: t = "md", startIcon: e, endIcon: s, ...o }, u) => {
-    const r = h(), i = m ?? (r.state === "helper" ? void 0 : r.state), f = o["aria-describedby"] ?? r.helperTextId, b = o["aria-required"] ?? r.required, c = /* @__PURE__ */ a(
+  ({ className: n, type: l, state: m, size: a = "md", startIcon: e, endIcon: s, ...t }, u) => {
+    const r = h(), i = m ?? (r.state === "helper" ? void 0 : r.state), f = t["aria-describedby"] ?? r.helperTextId, b = t["aria-required"] ?? r.required, c = /* @__PURE__ */ o(
       w.input,
       {
         type: l,
         className: d(
-          y({ size: t }),
+          y({ size: a }),
           e && "pl-ds-07",
           s && "pr-ds-07",
           i === "error" && "border-error-7 focus-visible:ring-error-7",
@@ -47,13 +47,13 @@ const y = p(
         "aria-describedby": f,
         "aria-required": b || void 0,
         ref: u,
-        ...x(o)
+        ...x(t)
       }
     );
     return !e && !s ? c : /* @__PURE__ */ g("div", { className: "relative flex items-center w-full", children: [
-      e && /* @__PURE__ */ a("span", { className: d("absolute left-ds-03 flex items-center text-surface-fg-muted pointer-events-none", t === "lg" ? "[&>svg]:h-ico-md [&>svg]:w-ico-md" : "[&>svg]:h-ico-sm [&>svg]:w-ico-sm"), children: e }),
+      e && /* @__PURE__ */ o("span", { className: d("absolute left-ds-03 flex items-center text-surface-fg-muted pointer-events-none", a === "lg" ? "[&>svg]:h-ico-md [&>svg]:w-ico-md" : "[&>svg]:h-ico-sm [&>svg]:w-ico-sm"), children: e }),
       c,
-      s && /* @__PURE__ */ a("span", { className: d("absolute right-ds-03 flex items-center text-surface-fg-muted pointer-events-none", t === "lg" ? "[&>svg]:h-ico-md [&>svg]:w-ico-md" : "[&>svg]:h-ico-sm [&>svg]:w-ico-sm"), children: s })
+      s && /* @__PURE__ */ o("span", { className: d("absolute right-ds-03 flex items-center text-surface-fg-muted pointer-events-none", a === "lg" ? "[&>svg]:h-ico-md [&>svg]:w-ico-md" : "[&>svg]:h-ico-sm [&>svg]:w-ico-sm"), children: s })
     ] });
   }
 );