@rafal.lemieszewski/tide-ui 0.87.7 → 0.87.8

package/dist/es/components/fundamental/sidebar.js

@@ -17,7 +17,7 @@ function E() {
 }
 const J = /* @__PURE__ */ t.forwardRef(
   ({ defaultOpen: r = !0, open: e, onOpenChange: a, className: o, style: i, children: l, ...u }, f) => {
-    const [p, m] = t.useState(r), [v, h] = t.useState(!1), [y, R] = t.useState(!1), g = e ?? p, w = t.useCallback(
+    const [v, m] = t.useState(r), [p, h] = t.useState(!1), [y, R] = t.useState(!1), g = e ?? v, w = t.useCallback(
       (n) => {
         const c = typeof n == "function" ? n(g) : n;
         a ? a(c) : m(c), typeof document < "u" && (document.cookie = `${V}=${c}; path=/; max-age=${q}`);
@@ -41,11 +41,11 @@ const J = /* @__PURE__ */ t.forwardRef(
         open: g,
         setOpen: w,
         isMobile: y,
-        openMobile: v,
+        openMobile: p,
         setOpenMobile: h,
         toggleSidebar: b
       }),
-      [N, g, w, y, v, h, b]
+      [N, g, w, y, p, h, b]
     );
     return /* @__PURE__ */ d(G.Provider, { value: S, children: /* @__PURE__ */ d(_.Provider, { delayDuration: 0, children: /* @__PURE__ */ d(
       "div",
@@ -76,7 +76,7 @@ const Q = /* @__PURE__ */ t.forwardRef(
     children: i,
     ...l
   }, u) => {
-    const { isMobile: f, state: p, openMobile: m, setOpenMobile: v } = E();
+    const { isMobile: f, state: v, openMobile: m, setOpenMobile: p } = E();
     return e === "none" ? /* @__PURE__ */ d(
       "div",
       {
@@ -88,7 +88,7 @@ const Q = /* @__PURE__ */ t.forwardRef(
         ...l,
         children: i
       }
-    ) : f ? /* @__PURE__ */ d(I.Root, { open: m, onOpenChange: v, modal: !1, children: /* @__PURE__ */ C(I.Portal, { children: [
+    ) : f ? /* @__PURE__ */ d(I.Root, { open: m, onOpenChange: p, modal: !1, children: /* @__PURE__ */ C(I.Portal, { children: [
       /* @__PURE__ */ d(I.Overlay, { className: "fixed inset-0 z-40 bg-black/80" }),
       /* @__PURE__ */ d(
         I.Content,
@@ -96,7 +96,7 @@ const Q = /* @__PURE__ */ t.forwardRef(
           ref: u,
           "data-sidebar": "sidebar",
           "data-mobile": "true",
-          className: "fixed inset-y-0 z-50 h-auto w-[var(--sidebar-width-mobile)] bg-[var(--color-surface-primary)] p-0 text-[var(--color-text-primary)] shadow-md transition ease-in-out data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+          className: "fixed inset-y-0 z-50 h-auto w-[var(--sidebar-width-mobile)] bg-[var(--color-surface-primary)] p-0 text-[var(--color-text-primary)] shadow-[var(--shadow-300)] transition ease-in-out data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
           style: {
             "--sidebar-width": X
           },
@@ -109,8 +109,8 @@ const Q = /* @__PURE__ */ t.forwardRef(
       {
         ref: u,
         className: "group peer hidden md:block text-[var(--color-text-primary)]",
-        "data-state": p,
-        "data-collapsible": p === "collapsed" ? e : "",
+        "data-state": v,
+        "data-collapsible": v === "collapsed" ? e : "",
         "data-variant": r,
         "data-side": a,
         children: /* @__PURE__ */ d(
@@ -120,8 +120,8 @@ const Q = /* @__PURE__ */ t.forwardRef(
               "duration-200 relative h-svh w-[var(--sidebar-width)] bg-[var(--color-surface-primary)] border-r border-[var(--color-border-primary-subtle)] transition-[width] ease-linear",
               "group-data-[collapsible=offcanvas]:w-0",
               "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]",
-              r === "floating" && "m-[var(--space-s)] rounded-m border border-[var(--color-border-primary-subtle)] shadow-md",
-              r === "inset" && "m-[var(--space-s)] ml-0 rounded-r-m border-r border-[var(--color-border-primary-subtle)]",
+              r === "floating" && "m-[var(--space-s)] rounded-[var(--border-radius-m)] border border-[var(--color-border-primary-subtle)] shadow-[var(--shadow-300)]",
+              r === "inset" && "m-[var(--space-s)] ml-0 rounded-r-[var(--border-radius-m)] border-r border-[var(--color-border-primary-subtle)]",
               o
             ),
             ...l,
@@ -193,7 +193,7 @@ const ee = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PUR
     ref: a,
     className: s(
       "relative flex flex-1 flex-col min-w-0 bg-[var(--color-surface-base)]",
-      "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+      "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-[var(--border-radius-xl)] md:peer-data-[variant=inset]:shadow-[var(--shadow-200)]",
       r
     ),
     ...e
@@ -206,7 +206,7 @@ const re = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PUR
     ref: a,
     "data-sidebar": "input",
     className: s(
-      "flex h-8 w-full rounded-l border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)] px-[var(--space-m)] py-[var(--space-s)] text-sm text-[var(--color-text-primary)] ring-offset-[var(--color-surface-primary)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--color-text-tertiary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focused)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-8 w-full rounded-[var(--border-radius-l)] border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)] px-[var(--space-m)] py-[var(--space-s)] text-sm text-[var(--color-text-primary)] ring-offset-[var(--color-surface-primary)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--color-text-tertiary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focused)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       r
     ),
     ...e
@@ -219,7 +219,7 @@ const ae = /* @__PURE__ */ t.forwardRef(({ className: r, children: e, onOpenChan
     ref: l,
     "data-sidebar": "search-button",
     className: s(
-      "text-body-md flex h-8 w-full cursor-pointer items-center rounded-m border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] px-3 py-1 pr-20 pl-8 text-left text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-border-primary-medium)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)] focus:ring-offset-2 focus:outline-none active:border-[var(--color-border-primary-medium)] group-data-[collapsible=icon]:hidden",
+      "text-body-md flex h-8 w-full cursor-pointer items-center rounded-[var(--border-radius-m)] border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] px-3 py-1 pr-20 pl-8 text-left text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-border-primary-medium)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)] focus:ring-offset-2 focus:outline-none active:border-[var(--color-border-primary-medium)] group-data-[collapsible=icon]:hidden",
       r
     ),
     onClick: () => a?.(!0),
@@ -305,7 +305,7 @@ const ne = /* @__PURE__ */ t.forwardRef(({ className: r, asChild: e = !1, ...a }
     ref: o,
     "data-sidebar": "group-label",
     className: s(
-      "duration-200 flex h-8 shrink-0 items-center rounded-m px-2 [&]:text-body-medium-sm text-[var(--color-text-tertiary)] outline-none ring-[var(--color-border-focused)] transition-opacity ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "duration-200 flex h-8 shrink-0 items-center rounded-[var(--border-radius-m)] px-2 [&]:text-body-medium-sm text-[var(--color-text-tertiary)] outline-none ring-[var(--color-border-focused)] transition-opacity ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
       "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
       r
     ),
@@ -319,7 +319,7 @@ const ce = /* @__PURE__ */ t.forwardRef(({ className: r, asChild: e = !1, ...a }
     ref: o,
     "data-sidebar": "group-action",
     className: s(
-      "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-m p-0 text-[var(--color-text-secondary)] outline-none ring-[var(--color-border-focused)] transition-transform hover:bg-[var(--color-background-neutral-subtlest)] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-[var(--border-radius-m)] p-0 text-[var(--color-text-secondary)] outline-none ring-[var(--color-border-focused)] transition-transform hover:bg-[var(--color-background-neutral-subtlest)] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
       "after:absolute after:-inset-2 after:md:hidden",
       "group-data-[collapsible=icon]:hidden",
       r
@@ -348,7 +348,7 @@ const be = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PUR
   }
 ));
 be.displayName = "SidebarMenu";
-const pe = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
+const ve = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ d(
   "li",
   {
     ref: a,
@@ -357,9 +357,9 @@ const pe = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PUR
     ...e
   }
 ));
-pe.displayName = "SidebarMenuItem";
-const ve = P(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-m px-2 py-1.5 text-left text-body-medium-md outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-[var(--color-background-blue-subtle-selected)] data-[active=true]:text-[var(--color-text-brand-bold-selected)] data-[state=open]:bg-[var(--color-surface-secondary)] group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:justify-center [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-[var(--color-text-brand-bold-selected)] cursor-pointer",
+ve.displayName = "SidebarMenuItem";
+const pe = P(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-[var(--border-radius-m)] px-2 py-1.5 text-left text-body-medium-md outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-[var(--color-background-blue-subtle-selected)] data-[active=true]:text-[var(--color-text-brand-bold-selected)] data-[state=open]:bg-[var(--color-surface-secondary)] group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:justify-center [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-[var(--color-text-brand-bold-selected)] cursor-pointer",
   {
     variants: {
       variant: {
@@ -387,18 +387,18 @@ const ve = P(
     enhancedHover: l = !0,
     preserveActiveOnFocus: u = !0,
     className: f,
-    onMouseEnter: p,
+    onMouseEnter: v,
     onMouseLeave: m,
-    onFocus: v,
+    onFocus: p,
     onBlur: h,
     onMouseDown: y,
     ...R
   }, g) => {
     const w = r ? "span" : "button", { isMobile: b, state: N } = E(), [S, n] = t.useState(!1), [c, z] = t.useState(!1), M = t.useRef(!1), B = t.useCallback(
       (k) => {
-        l && n(!0), p?.(k);
+        l && n(!0), v?.(k);
       },
-      [l, p]
+      [l, v]
     ), D = t.useCallback(
       (k) => {
         l && n(!1), m?.(k);
@@ -411,17 +411,17 @@ const ve = P(
       [y]
     ), j = t.useCallback(
       (k) => {
-        l && !M.current && z(!0), M.current = !1, v?.(k);
+        l && !M.current && z(!0), M.current = !1, p?.(k);
       },
-      [l, v]
+      [l, p]
     ), K = t.useCallback(
       (k) => {
         l && z(!1), h?.(k);
       },
       [l, h]
-    ), L = t.useMemo(() => a !== "enhanced" ? ve({ variant: "default", size: o }) : s(
+    ), L = t.useMemo(() => a !== "enhanced" ? pe({ variant: "default", size: o }) : s(
       // Base button styles
-      "relative peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-m px-2 py-1.5 text-left text-body-medium-md outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer z-2",
+      "relative peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-[var(--border-radius-m)] px-2 py-1.5 text-left text-body-medium-md outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer z-2",
       // Size variants
       o === "s" && "h-7 text-body-sm py-1",
       o === "default" && "h-8",
@@ -464,10 +464,10 @@ const ve = P(
         "data-size": o,
         "data-active": e,
         className: s(L, f),
-        onMouseEnter: l ? B : p,
+        onMouseEnter: l ? B : v,
         onMouseLeave: l ? D : m,
         onMouseDown: l ? x : y,
-        onFocus: l ? j : v,
+        onFocus: l ? j : p,
         onBlur: l ? K : h,
         ...R
       }
@@ -482,7 +482,7 @@ const ve = P(
           side: "right",
           align: "center",
           hidden: N !== "collapsed" || b,
-          className: "z-50 overflow-hidden rounded-m bg-[var(--color-surface-primary)] px-3 py-1.5 text-xs text-[var(--color-text-primary)] border border-[var(--color-border-primary-subtle)] shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+          className: "z-50 overflow-hidden rounded-[var(--border-radius-m)] bg-[var(--color-surface-primary)] px-3 py-1.5 text-xs text-[var(--color-text-primary)] border border-[var(--color-border-primary-subtle)] shadow-[var(--shadow-300)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
           ...i
         }
       )
@@ -499,7 +499,7 @@ const me = /* @__PURE__ */ t.forwardRef(({ className: r, showOnHover: e = !1, si
     size: "s",
     className: s(
       // Base positioning and styling - Fixed inconsistencies
-      "absolute right-1 flex aspect-square items-center justify-center rounded-m p-0",
+      "absolute right-1 flex aspect-square items-center justify-center rounded-[var(--border-radius-m)] p-0",
       "text-[var(--color-text-secondary)] outline-none transition-all duration-150 ease-in-out",
       "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
       "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focused)]",
@@ -537,7 +537,7 @@ const ge = /* @__PURE__ */ t.forwardRef(({ className: r, ...e }, a) => /* @__PUR
     ref: a,
     "data-sidebar": "menu-badge",
     className: s(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-m px-1 text-xs font-medium tabular-nums text-[var(--color-text-on-action)] select-none pointer-events-none",
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-[var(--border-radius-m)] px-1 text-xs font-medium tabular-nums text-[var(--color-text-on-action)] select-none pointer-events-none",
       "peer-hover/menu-button:text-[var(--color-text-brand-bold-selected)] peer-data-[active=true]/menu-button:text-[var(--color-text-brand-bold-selected)]",
       "peer-data-[size=s]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
@@ -556,14 +556,14 @@ const xe = /* @__PURE__ */ t.forwardRef(({ className: r, showIcon: e = !1, ...a
     {
       ref: o,
       "data-sidebar": "menu-skeleton",
-      className: s("rounded-m h-8 flex gap-2 px-2 items-center", r),
+      className: s("rounded-[var(--border-radius-m)] h-8 flex gap-2 px-2 items-center", r),
       ...a,
       children: [
-        e && /* @__PURE__ */ d("div", { className: "rounded-m bg-[var(--color-surface-secondary)] size-4 animate-pulse" }),
+        e && /* @__PURE__ */ d("div", { className: "rounded-[var(--border-radius-m)] bg-[var(--color-surface-secondary)] size-4 animate-pulse" }),
         /* @__PURE__ */ d(
           "div",
           {
-            className: "h-4 flex-1 max-w-[--skeleton-width] bg-[var(--color-surface-secondary)] rounded-m animate-pulse",
+            className: "h-4 flex-1 max-w-[--skeleton-width] bg-[var(--color-surface-secondary)] rounded-[var(--border-radius-m)] animate-pulse",
             style: {
               "--skeleton-width": i
             }
@@ -599,9 +599,9 @@ const we = /* @__PURE__ */ t.forwardRef(({
   className: l,
   onMouseEnter: u,
   onMouseLeave: f,
-  onFocus: p,
+  onFocus: v,
   onBlur: m,
-  onMouseDown: v,
+  onMouseDown: p,
   ...h
 }, y) => {
   const R = r ? "span" : "button", [g, w] = t.useState(!1), [b, N] = t.useState(!1), S = t.useRef(!1), n = t.useCallback(
@@ -616,14 +616,14 @@ const we = /* @__PURE__ */ t.forwardRef(({
     [o, f]
   ), z = t.useCallback(
     (x) => {
-      S.current = !0, v?.(x);
+      S.current = !0, p?.(x);
     },
-    [v]
+    [p]
   ), M = t.useCallback(
     (x) => {
-      o && !S.current && N(!0), S.current = !1, p?.(x);
+      o && !S.current && N(!0), S.current = !1, v?.(x);
     },
-    [o, p]
+    [o, v]
   ), B = t.useCallback(
     (x) => {
       o && N(!1), m?.(x);
@@ -631,7 +631,7 @@ const we = /* @__PURE__ */ t.forwardRef(({
     [o, m]
   ), D = t.useMemo(() => s(
     // Base submenu button styles
-    "relative flex w-full justify-start h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-m px-2 text-[var(--color-text-secondary)] outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--color-text-secondary)] z-2",
+    "relative flex w-full justify-start h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-[var(--border-radius-m)] px-2 text-[var(--color-text-secondary)] outline-none ring-[var(--color-border-focused)] transition-all duration-150 ease-in-out disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 cursor-pointer [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--color-text-secondary)] z-2",
     // Size variants
     e === "s" && "text-body-sm px-1.5 py-0.5",
     e === "m" && "text-body-md",
@@ -672,8 +672,8 @@ const we = /* @__PURE__ */ t.forwardRef(({
       type: r ? void 0 : "button",
       onMouseEnter: o ? n : u,
       onMouseLeave: o ? c : f,
-      onMouseDown: o ? z : v,
-      onFocus: o ? M : p,
+      onMouseDown: o ? z : p,
+      onFocus: o ? M : v,
       onBlur: o ? B : m,
       ...h
     }
@@ -695,7 +695,7 @@ export {
   me as SidebarMenuAction,
   ge as SidebarMenuBadge,
   fe as SidebarMenuButton,
-  pe as SidebarMenuItem,
+  ve as SidebarMenuItem,
   xe as SidebarMenuSkeleton,
   he as SidebarMenuSub,
   we as SidebarMenuSubButton,

package/dist/es/components/fundamental/skeleton.js

@@ -1,15 +1,15 @@
 import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import * as d from "react";
+import * as n from "react";
 import { cn as m } from "../../lib/utils.js";
-import { cva as b } from "class-variance-authority";
-const g = b(
+import { cva as S } from "class-variance-authority";
+const g = S(
   "animate-pulse bg-[var(--grey-alpha-50)] rounded",
   {
     variants: {
       variant: {
         default: "",
         circle: "rounded-full",
-        rectangular: "rounded-s"
+        rectangular: "rounded-[var(--border-radius-s)]"
       },
       size: {
         s: "h-4",
@@ -23,19 +23,19 @@ const g = b(
       size: "m"
     }
   }
-), o = /* @__PURE__ */ d.forwardRef(
+), o = /* @__PURE__ */ n.forwardRef(
   ({
     className: s,
     variant: t,
     size: a,
     width: r,
     height: l,
-    randomWidth: n = !1,
+    randomWidth: d = !1,
     lines: i = 1,
     style: u,
     ...f
   }, y) => {
-    const h = d.useMemo(() => n ? `${Math.floor(Math.random() * 40) + 50}%` : void 0, [n]), w = d.useMemo(() => {
+    const h = n.useMemo(() => d ? `${Math.floor(Math.random() * 40) + 50}%` : void 0, [d]), w = n.useMemo(() => {
       const c = { ...u };
       return r !== void 0 ? c.width = typeof r == "number" ? `${r}px` : r : h && (c.width = h), l !== void 0 && (c.height = typeof l == "number" ? `${l}px` : l), c;
     }, [u, r, l, h]);
@@ -52,9 +52,9 @@ const g = b(
               g({ variant: t, size: a }),
               "w-full",
               // Last line is often shorter in real text
-              v === i - 1 && n && "max-w-[75%]"
+              v === i - 1 && d && "max-w-[75%]"
             ),
-            style: v === i - 1 && n ? { width: `${Math.floor(Math.random() * 25) + 50}%` } : n ? { width: h } : w,
+            style: v === i - 1 && d ? { width: `${Math.floor(Math.random() * 25) + 50}%` } : d ? { width: h } : w,
             "aria-hidden": "true"
           },
           v
@@ -73,7 +73,7 @@ const g = b(
   }
 );
 o.displayName = "Skeleton";
-const N = /* @__PURE__ */ d.forwardRef(({ size: s = "m", className: t, ...a }, r) => /* @__PURE__ */ e(
+const N = /* @__PURE__ */ n.forwardRef(({ size: s = "m", className: t, ...a }, r) => /* @__PURE__ */ e(
   o,
   {
     ref: r,
@@ -88,7 +88,7 @@ const N = /* @__PURE__ */ d.forwardRef(({ size: s = "m", className: t, ...a }, r
   }
 ));
 N.displayName = "SkeletonAvatar";
-const S = /* @__PURE__ */ d.forwardRef(({ size: s = "m", className: t, ...a }, r) => /* @__PURE__ */ e(
+const b = /* @__PURE__ */ n.forwardRef(({ size: s = "m", className: t, ...a }, r) => /* @__PURE__ */ e(
   o,
   {
     ref: r,
@@ -101,13 +101,13 @@ const S = /* @__PURE__ */ d.forwardRef(({ size: s = "m", className: t, ...a }, r
     ...a
   }
 ));
-S.displayName = "SkeletonButton";
-const k = /* @__PURE__ */ d.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ p(
+b.displayName = "SkeletonButton";
+const k = /* @__PURE__ */ n.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ p(
   "div",
   {
     ref: a,
     className: m(
-      "rounded-l border border-[var(--color-border-primary-subtle)] p-[var(--space-l)] space-y-[var(--space-m)]",
+      "rounded-[var(--border-radius-l)] border border-[var(--color-border-primary-subtle)] p-[var(--space-l)] space-y-[var(--space-m)]",
       s
     ),
     ...t,
@@ -121,21 +121,21 @@ const k = /* @__PURE__ */ d.forwardRef(({ className: s, ...t }, a) => /* @__PURE
           /* @__PURE__ */ e(N, { size: "s" }),
           /* @__PURE__ */ e(o, { height: 16, width: "80px" })
         ] }),
-        /* @__PURE__ */ e(S, { size: "s" })
+        /* @__PURE__ */ e(b, { size: "s" })
       ] })
     ]
   }
 ));
 k.displayName = "SkeletonCard";
-const $ = /* @__PURE__ */ d.forwardRef(({ className: s, rows: t = 5, columns: a = 4, ...r }, l) => /* @__PURE__ */ p(
+const $ = /* @__PURE__ */ n.forwardRef(({ className: s, rows: t = 5, columns: a = 4, ...r }, l) => /* @__PURE__ */ p(
   "div",
   {
     ref: l,
     className: m("space-y-[var(--space-m)]", s),
     ...r,
     children: [
-      /* @__PURE__ */ e("div", { className: "grid gap-[var(--space-m)]", style: { gridTemplateColumns: `repeat(${a}, 1fr)` }, children: Array.from({ length: a }).map((n, i) => /* @__PURE__ */ e(o, { height: 20, width: "70%" }, `header-${i}`)) }),
-      Array.from({ length: t }).map((n, i) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "grid gap-[var(--space-m)]", style: { gridTemplateColumns: `repeat(${a}, 1fr)` }, children: Array.from({ length: a }).map((d, i) => /* @__PURE__ */ e(o, { height: 20, width: "70%" }, `header-${i}`)) }),
+      Array.from({ length: t }).map((d, i) => /* @__PURE__ */ e(
         "div",
         {
           className: "grid gap-[var(--space-m)]",
@@ -151,7 +151,7 @@ $.displayName = "SkeletonTable";
 export {
   o as Skeleton,
   N as SkeletonAvatar,
-  S as SkeletonButton,
+  b as SkeletonButton,
   k as SkeletonCard,
   $ as SkeletonTable,
   g as skeletonVariants

package/dist/es/components/fundamental/slider.js

@@ -21,7 +21,7 @@ const u = /* @__PURE__ */ c.forwardRef(({ className: l, value: a, defaultValue:
         Array.from({ length: i }).map((f, t) => /* @__PURE__ */ o(
           r.Thumb,
           {
-            className: "block h-[var(--size-xs)] w-[var(--size-xs)] rounded-full border border-[var(--color-border-brand-bold)] bg-[var(--color-surface-primary)] shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-primary)] data-[disabled]:!cursor-not-allowed data-[disabled]:pointer-events-auto data-[disabled]:border-[var(--grey-300)] data-[disabled]:ring-0 z-10 relative"
+            className: "block h-[var(--size-xs)] w-[var(--size-xs)] rounded-full border border-[var(--color-border-brand-bold)] bg-[var(--color-surface-primary)] shadow-[var(--shadow-200)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-primary)] data-[disabled]:!cursor-not-allowed data-[disabled]:pointer-events-auto data-[disabled]:border-[var(--grey-300)] data-[disabled]:ring-0 z-10 relative"
           },
           t
         ))

package/dist/es/components/fundamental/spinner.js

@@ -1,9 +1,9 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import * as d from "react";
 import { cn as c } from "../../lib/utils.js";
-import { cva as b } from "class-variance-authority";
+import { cva as p } from "class-variance-authority";
 import { Icon as v } from "./icon.js";
-const x = b(
+const x = p(
   "animate-spin",
   {
     variants: {
@@ -38,7 +38,7 @@ const x = b(
       speed: "normal"
     }
   }
-), p = /* @__PURE__ */ d.forwardRef(
+), f = /* @__PURE__ */ d.forwardRef(
   ({
     className: o,
     size: r,
@@ -48,7 +48,7 @@ const x = b(
     showLabel: n = !1,
     loadingText: t = "Loading...",
     ...i
-  }, u) => /* @__PURE__ */ f(
+  }, u) => /* @__PURE__ */ b(
     "div",
     {
       ref: u,
@@ -70,7 +70,7 @@ const x = b(
     }
   )
 );
-p.displayName = "Spinner";
+f.displayName = "Spinner";
 const y = /* @__PURE__ */ d.forwardRef(
   ({
     className: o,
@@ -87,7 +87,7 @@ const y = /* @__PURE__ */ d.forwardRef(
       medium: "bg-[var(--color-surface-primary)]/80",
       heavy: "bg-[var(--color-surface-primary)]/95"
     }[a];
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ b(
       "div",
       {
         ref: i,
@@ -98,7 +98,7 @@ const y = /* @__PURE__ */ d.forwardRef(
         ),
         ...t,
         children: [
-          /* @__PURE__ */ l(p, { size: s, variant: "primary" }),
+          /* @__PURE__ */ l(f, { size: s, variant: "primary" }),
           /* @__PURE__ */ l("p", { className: "mt-3 text-body-sm text-[var(--color-text-secondary)]", children: e }),
           n
         ]
@@ -118,9 +118,9 @@ const g = /* @__PURE__ */ d.forwardRef(
   }, t) => {
     const i = {
       none: "rounded-none",
-      s: "rounded-s",
+      s: "rounded-[var(--border-radius-s)]",
       m: "rounded",
-      l: "rounded-l",
+      l: "rounded-[var(--border-radius-l)]",
       full: "rounded-full"
     }[s];
     return /* @__PURE__ */ l(
@@ -220,6 +220,6 @@ export {
   h as ProgressDots,
   w as Pulse,
   g as Skeleton,
-  p as Spinner,
+  f as Spinner,
   x as spinnerVariants
 };

package/dist/es/components/fundamental/switch.js

@@ -1,21 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import * as i from "react";
 import * as e from "@radix-ui/react-switch";
-import { cn as a } from "../../lib/utils.js";
-const c = /* @__PURE__ */ i.forwardRef(({ className: s, ...o }, r) => /* @__PURE__ */ t(
+import { cn as t } from "../../lib/utils.js";
+const c = /* @__PURE__ */ i.forwardRef(({ className: s, ...o }, r) => /* @__PURE__ */ a(
   e.Root,
   {
-    className: a(
+    className: t(
       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full p-[2px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#669fb6] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-primary)] disabled:cursor-not-allowed data-[state=checked]:bg-[#005f85] data-[state=unchecked]:bg-[#c0c3c9] hover:data-[state=checked]:bg-[#004764] hover:data-[state=unchecked]:bg-[#9fa5ac] disabled:data-[state=checked]:bg-[#ccdfe7] disabled:data-[state=unchecked]:bg-[rgba(85,95,109,0.1)]",
       s
     ),
     ...o,
     ref: r,
-    children: /* @__PURE__ */ t(
+    children: /* @__PURE__ */ a(
       e.Thumb,
       {
-        className: a(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        className: t(
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-[var(--shadow-200)] ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
         )
       }
     )