@rafal.lemieszewski/tide-ui 0.87.6 → 0.87.8

package/dist/es/components/fundamental/dropdown-menu.js

@@ -1,17 +1,17 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
 import * as n from "react";
-import * as c from "@radix-ui/react-dropdown-menu";
+import * as i from "@radix-ui/react-dropdown-menu";
 import { ChevronLeft as z, ChevronRight as h, Check as g, Circle as w } from "lucide-react";
 import { cn as u } from "../../lib/utils.js";
 import { useIsDesktop as j } from "../../lib/hooks.js";
 import { Drawer as _, DrawerTrigger as P, DrawerContent as B, DrawerClose as y } from "./drawer.js";
 import { Icon as x } from "./icon.js";
-const W = c.Root, $ = c.Trigger, ce = c.Group, E = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, children: e, ...a }, s) => /* @__PURE__ */ p(
-  c.SubTrigger,
+const W = i.Root, $ = i.Trigger, ie = i.Group, E = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, children: e, ...a }, s) => /* @__PURE__ */ v(
+  i.SubTrigger,
   {
     ref: s,
     className: u(
-      "text-body-md flex [&]:cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-m)] outline-none focus:bg-[var(--color-background-neutral-subtlest-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] data-[state=open]:bg-[var(--color-background-neutral-subtlest-hovered)]",
+      "text-body-md flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] px-[var(--space-m)] h-[var(--size-m)] outline-none focus:bg-[var(--color-background-neutral-subtlest-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] data-[state=open]:bg-[var(--color-background-neutral-subtlest-hovered)]",
       o && "pl-8",
       t
     ),
@@ -22,38 +22,38 @@ const W = c.Root, $ = c.Trigger, ce = c.Group, E = /* @__PURE__ */ n.forwardRef(
     ]
   }
 ));
-E.displayName = c.SubTrigger.displayName;
+E.displayName = i.SubTrigger.displayName;
 const G = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r(
-  c.SubContent,
+  i.SubContent,
   {
     ref: e,
     className: u(
-      "z-50 min-w-[12rem] overflow-hidden rounded-l border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-xs)] text-[var(--color-text-primary)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[12rem] overflow-hidden rounded-[var(--border-radius-l)] border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-xs)] text-[var(--color-text-primary)] shadow-[var(--shadow-400)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       t
     ),
     ...o
   }
 ));
-G.displayName = c.SubContent.displayName;
-const k = /* @__PURE__ */ n.forwardRef(({ className: t, sideOffset: o = 4, ...e }, a) => /* @__PURE__ */ r(c.Portal, { children: /* @__PURE__ */ r(
-  c.Content,
+G.displayName = i.SubContent.displayName;
+const k = /* @__PURE__ */ n.forwardRef(({ className: t, sideOffset: o = 4, ...e }, a) => /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ r(
+  i.Content,
   {
     ref: a,
     sideOffset: o,
     className: u(
-      "z-50 min-w-[16rem] overflow-hidden rounded-l border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-s)] text-[var(--color-text-primary)] shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[16rem] overflow-hidden rounded-[var(--border-radius-l)] border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-s)] text-[var(--color-text-primary)] shadow-[var(--shadow-500)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       t
     ),
     ...e
   }
 ) }));
-k.displayName = c.Content.displayName;
-const N = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, children: s, ...l }, i) => /* @__PURE__ */ p(
-  c.Item,
+k.displayName = i.Content.displayName;
+const N = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, children: s, ...l }, c) => /* @__PURE__ */ v(
+  i.Item,
   {
-    ref: i,
+    ref: c,
     className: u(
-      "[&]:text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
+      "[&]:text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] px-[var(--space-m)] h-[var(--size-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
       e && "text-[var(--color-text-error-bold)] hover:text-[var(--color-text-error-bold)] focus:text-[var(--color-text-error-bold)] hover:bg-[var(--color-background-error-subtle)] focus:bg-[var(--color-background-error-subtle)] [&>svg]:text-[var(--color-icon-error-bold)]",
       o && "pl-8",
       t
@@ -65,44 +65,44 @@ const N = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e
     ]
   }
 ));
-N.displayName = c.Item.displayName;
-const V = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, ...a }, s) => /* @__PURE__ */ p(
-  c.CheckboxItem,
+N.displayName = i.Item.displayName;
+const V = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, ...a }, s) => /* @__PURE__ */ v(
+  i.CheckboxItem,
   {
     ref: s,
     className: u(
-      "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
+      "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
       t
     ),
     checked: e,
     onSelect: (l) => l.preventDefault(),
     ...a,
     children: [
-      /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-s border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(c.ItemIndicator, { children: /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-s border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }) }),
+      /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-[var(--border-radius-s)] border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(i.ItemIndicator, { children: /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-[var(--border-radius-s)] border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }) }),
       o
     ]
   }
 ));
-V.displayName = c.CheckboxItem.displayName;
-const A = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, ...e }, a) => /* @__PURE__ */ p(
-  c.RadioItem,
+V.displayName = i.CheckboxItem.displayName;
+const A = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, ...e }, a) => /* @__PURE__ */ v(
+  i.RadioItem,
   {
     ref: a,
     className: u(
-      "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed [&[data-state=checked]_span]:border-[var(--color-border-brand-bold)] [&[data-state=checked]_span]:bg-[var(--color-background-blue-bold)] [&[data-state=checked]_span]:text-[var(--color-text-on-action)]",
+      "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed [&[data-state=checked]_span]:border-[var(--color-border-brand-bold)] [&[data-state=checked]_span]:bg-[var(--color-background-blue-bold)] [&[data-state=checked]_span]:text-[var(--color-text-on-action)]",
       t
     ),
     onSelect: (s) => s.preventDefault(),
     ...e,
     children: [
-      /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-full border-2 border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(c.ItemIndicator, { className: "flex h-full w-full items-center justify-center rounded-full text-current", children: /* @__PURE__ */ r(w, { className: "h-[6px] w-[6px] fill-current" }) }) }),
+      /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-full border-2 border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(i.ItemIndicator, { className: "flex h-full w-full items-center justify-center rounded-full text-current", children: /* @__PURE__ */ r(w, { className: "h-[6px] w-[6px] fill-current" }) }) }),
       o
     ]
   }
 ));
-A.displayName = c.RadioItem.displayName;
+A.displayName = i.RadioItem.displayName;
 const H = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, ...e }, a) => /* @__PURE__ */ r(
-  c.Label,
+  i.Label,
   {
     ref: a,
     className: u(
@@ -113,23 +113,23 @@ const H = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, ...e }, a) =>
     ...e
   }
 ));
-H.displayName = c.Label.displayName;
+H.displayName = i.Label.displayName;
 const X = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r(
-  c.Separator,
+  i.Separator,
   {
     ref: e,
     className: u("-mx-2 my-[var(--space-s)] h-px bg-[var(--color-border-primary-subtle)]", t),
     ...o
   }
 ));
-X.displayName = c.Separator.displayName;
-const D = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, autoClose: s = !0, onSelect: l, children: i, ...b }, d) => {
-  const m = /* @__PURE__ */ p(
+X.displayName = i.Separator.displayName;
+const D = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, autoClose: s = !0, onSelect: l, children: c, ...m }, d) => {
+  const b = /* @__PURE__ */ v(
     "div",
     {
       ref: d,
       className: u(
-        "[&]:text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-l)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        "[&]:text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] px-[var(--space-m)] h-[var(--size-l)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
         e && "text-[var(--color-text-error-bold)] hover:text-[var(--color-text-error-bold)] focus:text-[var(--color-text-error-bold)] hover:bg-[var(--color-background-error-subtle)] focus:bg-[var(--color-background-error-subtle)] [&>svg]:text-[var(--color-icon-error-bold)]",
         o && "pl-8",
         t
@@ -137,23 +137,23 @@ const D = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e
       onClick: (f) => l?.(f.nativeEvent),
       role: "menuitem",
       tabIndex: 0,
-      ...b,
+      ...m,
       children: [
         a && /* @__PURE__ */ r(x, { name: a, size: "m", className: "mr-2" }),
-        i
+        c
       ]
     }
   );
-  return s ? /* @__PURE__ */ r(y, { asChild: !0, children: m }) : m;
+  return s ? /* @__PURE__ */ r(y, { asChild: !0, children: b }) : b;
 });
 D.displayName = "MobileDropdownItem";
-const C = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, autoClose: a = !1, onCheckedChange: s, ...l }, i) => {
-  const b = /* @__PURE__ */ p(
+const C = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, autoClose: a = !1, onCheckedChange: s, ...l }, c) => {
+  const m = /* @__PURE__ */ v(
     "div",
     {
-      ref: i,
+      ref: c,
       className: u(
-        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-l)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] h-[var(--size-l)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
         t
       ),
       onClick: () => s?.(!e),
@@ -162,28 +162,28 @@ const C = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e,
       tabIndex: 0,
       ...l,
       children: [
-        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-s border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: e && /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-s border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }),
+        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-[var(--border-radius-s)] border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: e && /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-[var(--border-radius-s)] border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }),
         o
       ]
     }
   );
-  return a ? /* @__PURE__ */ r(y, { asChild: !0, children: b }) : b;
+  return a ? /* @__PURE__ */ r(y, { asChild: !0, children: m }) : m;
 });
 C.displayName = "MobileDropdownCheckboxItem";
-const M = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, checked: a, icon: s, autoClose: l = !0, onRadioSelect: i, ...b }, d) => {
-  const m = /* @__PURE__ */ p(
+const M = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, checked: a, icon: s, autoClose: l = !0, onRadioSelect: c, ...m }, d) => {
+  const b = /* @__PURE__ */ v(
     "div",
     {
       ref: d,
       className: u(
-        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-l)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] h-[var(--size-l)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
         t
       ),
-      onClick: () => i?.(e),
+      onClick: () => c?.(e),
       role: "menuitemradio",
       "aria-checked": a,
       tabIndex: 0,
-      ...b,
+      ...m,
       children: [
         /* @__PURE__ */ r("span", { className: u(
           "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-full border-2 border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]",
@@ -194,7 +194,7 @@ const M = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, c
       ]
     }
   );
-  return l ? /* @__PURE__ */ r(y, { asChild: !0, children: m }) : m;
+  return l ? /* @__PURE__ */ r(y, { asChild: !0, children: b }) : b;
 });
 M.displayName = "MobileDropdownRadioItem";
 const R = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, ...e }, a) => /* @__PURE__ */ r(
@@ -220,11 +220,11 @@ const I = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => /* @__PURE
   }
 ));
 I.displayName = "MobileDropdownSeparator";
-const v = n.createContext({ isDesktop: !0 }), ie = ({ children: t }) => {
+const p = n.createContext({ isDesktop: !0 }), ce = ({ children: t }) => {
   const o = j(), e = n.useMemo(() => ({ isDesktop: o }), [o]);
-  return o ? /* @__PURE__ */ r(v.Provider, { value: e, children: /* @__PURE__ */ r(W, { children: t }) }) : /* @__PURE__ */ r(v.Provider, { value: e, children: /* @__PURE__ */ r(K, { children: /* @__PURE__ */ r(_, { children: t }) }) });
+  return o ? /* @__PURE__ */ r(p.Provider, { value: e, children: /* @__PURE__ */ r(W, { children: t }) }) : /* @__PURE__ */ r(p.Provider, { value: e, children: /* @__PURE__ */ r(K, { children: /* @__PURE__ */ r(_, { children: t }) }) });
 }, q = /* @__PURE__ */ n.forwardRef(({ className: t, sideOffset: o = 4, children: e, ...a }, s) => {
-  const { isDesktop: l } = n.useContext(v);
+  const { isDesktop: l } = n.useContext(p);
   return l ? /* @__PURE__ */ r(
     k,
     {
@@ -234,7 +234,7 @@ const v = n.createContext({ isDesktop: !0 }), ie = ({ children: t }) => {
       ...a,
       children: e
     }
-  ) : /* @__PURE__ */ p(
+  ) : /* @__PURE__ */ v(
     B,
     {
       ref: s,
@@ -253,7 +253,7 @@ const v = n.createContext({ isDesktop: !0 }), ie = ({ children: t }) => {
 });
 q.displayName = "ResponsiveDropdownMenuContent";
 const F = /* @__PURE__ */ n.forwardRef(({ asChild: t, children: o, ...e }, a) => {
-  const { isDesktop: s } = n.useContext(v);
+  const { isDesktop: s } = n.useContext(p);
   if (s)
     return /* @__PURE__ */ r($, { ref: a, asChild: t, ...e, children: o });
   const l = t ? {} : {
@@ -298,10 +298,10 @@ const J = n.createContext({}), S = n.createContext({
     levels: [],
     currentLevelIndex: 0,
     isTransitioning: !1
-  }), a = n.useCallback((d, m) => {
+  }), a = n.useCallback((d, b) => {
     e((f) => {
       const T = {
-        id: `${m}-${Date.now()}`,
+        id: `${b}-${Date.now()}`,
         ...d
       };
       return {
@@ -321,23 +321,23 @@ const J = n.createContext({}), S = n.createContext({
       e((d) => ({ ...d, isTransitioning: !1 }));
     }, 300);
   }, []), l = n.useCallback((d) => {
-    e((m) => ({
-      ...m,
-      levels: m.levels.some((f) => f.id === d.id) ? m.levels : [...m.levels, d]
+    e((b) => ({
+      ...b,
+      levels: b.levels.some((f) => f.id === d.id) ? b.levels : [...b.levels, d]
     }));
-  }, []), i = n.useCallback((d) => o.levels[o.currentLevelIndex]?.id === d, [o]), b = n.useMemo(() => ({
+  }, []), c = n.useCallback((d) => o.levels[o.currentLevelIndex]?.id === d, [o]), m = n.useMemo(() => ({
     navigationState: o,
     navigateToSubmenu: a,
     navigateBack: s,
     registerMenuLevel: l,
-    isCurrentLevel: i
-  }), [o, a, s, l, i]);
-  return /* @__PURE__ */ r(S.Provider, { value: b, children: t });
+    isCurrentLevel: c
+  }), [o, a, s, l, c]);
+  return /* @__PURE__ */ r(S.Provider, { value: m, children: t });
 }, O = ({ children: t }) => {
-  const { navigationState: o, navigateBack: e } = n.useContext(S), { levels: a, currentLevelIndex: s, isTransitioning: l } = o, i = a[s];
-  return /* @__PURE__ */ p("div", { className: "relative overflow-hidden h-full", children: [
-    !(s === 0) && i && /* @__PURE__ */ p("div", { className: "flex items-center px-[var(--space-m)] pt-[var(--space-s)] pb-[var(--space-m)] border-b border-[var(--color-border-primary-subtle)]", children: [
-      /* @__PURE__ */ p(
+  const { navigationState: o, navigateBack: e } = n.useContext(S), { levels: a, currentLevelIndex: s, isTransitioning: l } = o, c = a[s];
+  return /* @__PURE__ */ v("div", { className: "relative overflow-hidden h-full", children: [
+    !(s === 0) && c && /* @__PURE__ */ v("div", { className: "flex items-center px-[var(--space-m)] pt-[var(--space-s)] pb-[var(--space-m)] border-b border-[var(--color-border-primary-subtle)]", children: [
+      /* @__PURE__ */ v(
         "button",
         {
           onClick: e,
@@ -348,7 +348,7 @@ const J = n.createContext({}), S = n.createContext({
           ]
         }
       ),
-      i.title && /* @__PURE__ */ r("h3", { className: "text-heading-sm text-[var(--color-text-primary)] ml-[var(--space-m)]", children: i.title })
+      c.title && /* @__PURE__ */ r("h3", { className: "text-heading-sm text-[var(--color-text-primary)] ml-[var(--space-m)]", children: c.title })
     ] }),
     /* @__PURE__ */ r(
       "div",
@@ -360,7 +360,7 @@ const J = n.createContext({}), S = n.createContext({
         style: {
           transform: `translateX(-${s * 100}%)`
         },
-        children: /* @__PURE__ */ p("div", { className: "flex", children: [
+        children: /* @__PURE__ */ v("div", { className: "flex", children: [
           /* @__PURE__ */ r(
             "div",
             {
@@ -369,7 +369,7 @@ const J = n.createContext({}), S = n.createContext({
               children: t
             }
           ),
-          a.map((d, m) => m > 0 && /* @__PURE__ */ r(
+          a.map((d, b) => b > 0 && /* @__PURE__ */ r(
             "div",
             {
               className: "w-full flex-shrink-0",
@@ -382,18 +382,18 @@ const J = n.createContext({}), S = n.createContext({
       }
     )
   ] });
-}, Q = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, autoClose: s, onSelect: l, ...i }, b) => {
-  const { isDesktop: d } = n.useContext(v);
+}, Q = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, autoClose: s, onSelect: l, ...c }, m) => {
+  const { isDesktop: d } = n.useContext(p);
   return d ? /* @__PURE__ */ r(
     N,
     {
-      ref: b,
+      ref: m,
       className: t,
       inset: o,
       destructive: e,
       icon: a,
       onSelect: l,
-      ...i
+      ...c
     }
   ) : /* @__PURE__ */ r(
     D,
@@ -404,19 +404,19 @@ const J = n.createContext({}), S = n.createContext({
       icon: a,
       autoClose: s,
       onSelect: l,
-      ...i
+      ...c
     }
   );
 });
 Q.displayName = "ResponsiveDropdownMenuItem";
-const U = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, autoClose: a, onCheckedChange: s, ...l }, i) => {
-  const { isDesktop: b } = n.useContext(v);
-  return b ? /* @__PURE__ */ p(
-    c.CheckboxItem,
+const U = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, autoClose: a, onCheckedChange: s, ...l }, c) => {
+  const { isDesktop: m } = n.useContext(p);
+  return m ? /* @__PURE__ */ v(
+    i.CheckboxItem,
     {
-      ref: i,
+      ref: c,
       className: u(
-        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
+        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
         t
       ),
       checked: e,
@@ -424,7 +424,7 @@ const U = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e,
       onSelect: (d) => d.preventDefault(),
       ...l,
       children: [
-        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-s border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(c.ItemIndicator, { children: /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-s border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }) }),
+        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-[var(--border-radius-s)] border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(i.ItemIndicator, { children: /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-[var(--border-radius-s)] border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }) }),
         o
       ]
     }
@@ -441,26 +441,26 @@ const U = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e,
   );
 });
 U.displayName = "ResponsiveDropdownMenuCheckboxItem";
-const Y = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, icon: a, autoClose: s, ...l }, i) => {
-  const { isDesktop: b } = n.useContext(v);
-  return b ? /* @__PURE__ */ p(
-    c.RadioItem,
+const Y = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, icon: a, autoClose: s, ...l }, c) => {
+  const { isDesktop: m } = n.useContext(p);
+  return m ? /* @__PURE__ */ v(
+    i.RadioItem,
     {
-      ref: i,
+      ref: c,
       className: u(
-        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed [&[data-state=checked]_span]:border-[var(--color-border-brand-bold)] [&[data-state=checked]_span]:bg-[var(--color-background-blue-bold)] [&[data-state=checked]_span]:text-[var(--color-text-on-action)]",
+        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed [&[data-state=checked]_span]:border-[var(--color-border-brand-bold)] [&[data-state=checked]_span]:bg-[var(--color-background-blue-bold)] [&[data-state=checked]_span]:text-[var(--color-text-on-action)]",
         t
       ),
       value: e,
       onSelect: (d) => d.preventDefault(),
       ...l,
       children: [
-        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-full border-2 border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(c.ItemIndicator, { className: "flex h-full w-full items-center justify-center rounded-full text-current", children: /* @__PURE__ */ r(w, { className: "h-[6px] w-[6px] fill-current" }) }) }),
+        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-full border-2 border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(i.ItemIndicator, { className: "flex h-full w-full items-center justify-center rounded-full text-current", children: /* @__PURE__ */ r(w, { className: "h-[6px] w-[6px] fill-current" }) }) }),
         a && /* @__PURE__ */ r(x, { name: a, size: "m", className: "mr-2 ml-6" }),
         o
       ]
     }
-  ) : /* @__PURE__ */ r(J.Consumer, { children: ({ radioValue: d, onRadioChange: m }) => /* @__PURE__ */ r(
+  ) : /* @__PURE__ */ r(J.Consumer, { children: ({ radioValue: d, onRadioChange: b }) => /* @__PURE__ */ r(
     M,
     {
       className: t,
@@ -468,7 +468,7 @@ const Y = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, i
       checked: d === e,
       icon: a,
       autoClose: s,
-      onRadioSelect: m,
+      onRadioSelect: b,
       ...l,
       children: o
     }
@@ -476,9 +476,9 @@ const Y = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, i
 });
 Y.displayName = "ResponsiveDropdownMenuRadioItem";
 const Z = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, ...e }, a) => {
-  const { isDesktop: s } = n.useContext(v);
+  const { isDesktop: s } = n.useContext(p);
   return s ? /* @__PURE__ */ r(
-    c.Label,
+    i.Label,
     {
       ref: a,
       className: u(
@@ -499,9 +499,9 @@ const Z = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, ...e }, a) =>
 });
 Z.displayName = "ResponsiveDropdownMenuLabel";
 const ee = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => {
-  const { isDesktop: a } = n.useContext(v);
+  const { isDesktop: a } = n.useContext(p);
   return a ? /* @__PURE__ */ r(
-    c.Separator,
+    i.Separator,
     {
       ref: e,
       className: u("-mx-2 my-[var(--space-s)] h-px bg-[var(--color-border-primary-subtle)]", t),
@@ -517,14 +517,14 @@ const ee = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => {
 });
 ee.displayName = "ResponsiveDropdownMenuSeparator";
 const re = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, icon: e, children: a, ...s }, l) => {
-  const { isDesktop: i } = n.useContext(v), { triggerNavigation: b } = n.useContext(L);
-  if (i)
-    return /* @__PURE__ */ p(
-      c.SubTrigger,
+  const { isDesktop: c } = n.useContext(p), { triggerNavigation: m } = n.useContext(L);
+  if (c)
+    return /* @__PURE__ */ v(
+      i.SubTrigger,
       {
         ref: l,
         className: u(
-          "text-body-md flex [&]:cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-m)] outline-none focus:bg-[var(--color-background-neutral-subtlest-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] data-[state=open]:bg-[var(--color-background-neutral-subtlest-hovered)]",
+          "text-body-md flex [&]:cursor-pointer select-none items-center rounded-[var(--border-radius-m)] px-[var(--space-m)] h-[var(--size-m)] outline-none focus:bg-[var(--color-background-neutral-subtlest-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] data-[state=open]:bg-[var(--color-background-neutral-subtlest-hovered)]",
           o && "pl-8",
           t
         ),
@@ -536,22 +536,22 @@ const re = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, icon: e, chil
         ]
       }
     );
-  const { onClick: d, ...m } = s;
-  return /* @__PURE__ */ p(
+  const { onClick: d, ...b } = s;
+  return /* @__PURE__ */ v(
     "button",
     {
       ref: l,
       className: u(
-        "text-body-md relative flex w-full cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-l)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        "text-body-md relative flex w-full cursor-pointer select-none items-center rounded-[var(--border-radius-m)] px-[var(--space-m)] h-[var(--size-l)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
         o && "pl-8",
         t
       ),
       onClick: (f) => {
-        b(), d && d(f);
+        m(), d && d(f);
       },
       role: "button",
       type: "button",
-      ...m,
+      ...b,
       children: [
         e && /* @__PURE__ */ r(x, { name: e, size: "m", className: "mr-2" }),
         a,
@@ -562,13 +562,13 @@ const re = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, icon: e, chil
 });
 re.displayName = "ResponsiveDropdownMenuSubTrigger";
 const oe = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, ...e }, a) => {
-  const { isDesktop: s } = n.useContext(v), { setSubmenuContent: l } = n.useContext(L);
+  const { isDesktop: s } = n.useContext(p), { setSubmenuContent: l } = n.useContext(L);
   return s ? /* @__PURE__ */ r(
-    c.SubContent,
+    i.SubContent,
     {
       ref: a,
       className: u(
-        "z-50 min-w-[12rem] overflow-hidden rounded-l border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-xs)] text-[var(--color-text-primary)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[12rem] overflow-hidden rounded-[var(--border-radius-l)] border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-xs)] text-[var(--color-text-primary)] shadow-[var(--shadow-400)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         t
       ),
       ...e,
@@ -578,7 +578,7 @@ const oe = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, ...e }, a)
 });
 oe.displayName = "ResponsiveDropdownMenuSubContent";
 export {
-  ie as DropdownMenu,
+  ce as DropdownMenu,
   U as DropdownMenuCheckboxItem,
   q as DropdownMenuContent,
   W as DropdownMenuDesktop,
@@ -589,7 +589,7 @@ export {
   A as DropdownMenuDesktopRadioItem,
   X as DropdownMenuDesktopSeparator,
   $ as DropdownMenuDesktopTrigger,
-  ce as DropdownMenuGroup,
+  ie as DropdownMenuGroup,
   Q as DropdownMenuItem,
   Z as DropdownMenuLabel,
   Y as DropdownMenuRadioItem,

package/dist/es/components/fundamental/file-upload.js

@@ -56,7 +56,7 @@ const M = n.createContext(
 );
 j.displayName = "FileUploadRoot";
 const ee = Q(
-  "relative flex flex-col items-center justify-center rounded-l border-2 border-dashed p-6 text-center transition-colors duration-200",
+  "relative flex flex-col items-center justify-center rounded-[var(--border-radius-l)] border-2 border-dashed p-6 text-center transition-colors duration-200",
   {
     variants: {
       isDragActive: {
@@ -182,7 +182,7 @@ const B = /* @__PURE__ */ n.forwardRef(
     {
       ref: l,
       className: v(
-        "flex items-center gap-3 rounded-l border p-3",
+        "flex items-center gap-3 rounded-[var(--border-radius-l)] border p-3",
         "border-[var(--color-border-primary)]",
         e.status === "error" && "border-[var(--color-border-error-bold)] bg-[var(--color-background-error-subtle)]",
         e.status === "success" && "border-[var(--color-border-success-bold)] bg-[var(--color-background-success-subtle)]",

package/dist/es/components/fundamental/hover-card.js

@@ -1,16 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import * as s from "react";
 import * as t from "@radix-ui/react-hover-card";
 import { cn as n } from "../../lib/utils.js";
-const c = t.Root, f = t.Trigger, m = /* @__PURE__ */ s.forwardRef(({ className: a, align: e = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
+const c = t.Root, f = t.Trigger, m = /* @__PURE__ */ s.forwardRef(({ className: o, align: r = "center", sideOffset: e = 4, ...d }, i) => /* @__PURE__ */ a(t.Portal, { children: /* @__PURE__ */ a(
   t.Content,
   {
     ref: i,
-    align: e,
-    sideOffset: r,
+    align: r,
+    sideOffset: e,
     className: n(
-      "z-50 w-64 rounded-m border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-l)] text-[var(--color-text-primary)] shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      a
+      "z-50 w-64 rounded-[var(--border-radius-m)] border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-l)] text-[var(--color-text-primary)] shadow-[var(--shadow-400)] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      o
     ),
     ...d
   }

package/dist/es/components/fundamental/input-group.js

@@ -13,7 +13,7 @@ const v = /* @__PURE__ */ e.forwardRef(
       "data-slot": "input-group",
       role: "group",
       className: s(
-        "group/input-group relative flex w-full items-center rounded-m border border-[var(--color-interaction-border-input)] bg-[var(--color-interaction-background-input-neutral)] outline-none transition-[color,box-shadow,border-color]",
+        "group/input-group relative flex w-full items-center rounded-[var(--border-radius-m)] border border-[var(--color-interaction-border-input)] bg-[var(--color-interaction-background-input-neutral)] outline-none transition-[color,box-shadow,border-color]",
         // Default height for inputs
         "h-[var(--size-m)] has-[>textarea]:h-auto",
         // Adjust padding when inline addons are present
@@ -38,7 +38,7 @@ const v = /* @__PURE__ */ e.forwardRef(
 );
 v.displayName = "InputGroup";
 const b = u(
-  "text-[var(--color-text-secondary)] flex h-auto cursor-text select-none items-center justify-center gap-[var(--space-xs)] py-[var(--space-s)] [&]:text-body-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-xs [&>svg:not([class*='size-'])]:size-[var(--size-s)]",
+  "text-[var(--color-text-secondary)] flex h-auto cursor-text select-none items-center justify-center gap-[var(--space-xs)] py-[var(--space-s)] [&]:text-body-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[var(--border-radius-xs)] [&>svg:not([class*='size-'])]:size-[var(--size-s)]",
   {
     variants: {
       align: {