@rafal.lemieszewski/tide-ui 0.87.7 → 0.87.8

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

@@ -3,7 +3,7 @@ import * as a from "react";
 import { cva as l } from "class-variance-authority";
 import { cn as s } from "../../lib/utils.js";
 const d = l(
-  "relative w-full rounded-m border p-[var(--space-l)] [&>svg~*]:pl-[var(--space-3xl)] [&>svg+div]:translate-y-[-2px] [&>svg]:absolute [&>svg]:left-[var(--space-l)] [&>svg]:top-[var(--space-l)] [&>svg]:text-current",
+  "relative w-full rounded-[var(--border-radius-m)] border p-[var(--space-l)] [&>svg~*]:pl-[var(--space-3xl)] [&>svg+div]:translate-y-[-2px] [&>svg]:absolute [&>svg]:left-[var(--space-l)] [&>svg]:top-[var(--space-l)] [&>svg]:text-current",
   {
     variants: {
       variant: {

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

@@ -3,7 +3,7 @@ import * as n from "react";
 import * as a from "@radix-ui/react-avatar";
 import { cva as d } from "class-variance-authority";
 import { cn as l } from "../../lib/utils.js";
-const p = d(
+const v = d(
   "relative flex shrink-0 overflow-hidden items-center justify-center aspect-square",
   {
     variants: {
@@ -40,22 +40,22 @@ const p = d(
       {
         type: "organization",
         size: "s",
-        className: "rounded-s"
+        className: "rounded-[var(--border-radius-s)]"
       },
       {
         type: "organization",
         size: "m",
-        className: "rounded-m"
+        className: "rounded-[var(--border-radius-m)]"
       },
       {
         type: "organization",
         size: "l",
-        className: "rounded-m"
+        className: "rounded-[var(--border-radius-m)]"
       },
       {
         type: "organization",
         size: "xl",
-        className: "rounded-l"
+        className: "rounded-[var(--border-radius-l)]"
       }
     ],
     defaultVariants: {
@@ -63,7 +63,7 @@ const p = d(
       type: "user"
     }
   }
-), x = d(
+), p = d(
   "flex h-full w-full items-center justify-center font-medium [&]:text-[var(--color-text-inverse)]",
   {
     variants: {
@@ -102,22 +102,22 @@ const p = d(
       {
         type: "organization",
         size: "s",
-        className: "rounded-s"
+        className: "rounded-[var(--border-radius-s)]"
       },
       {
         type: "organization",
         size: "m",
-        className: "rounded-m"
+        className: "rounded-[var(--border-radius-m)]"
       },
       {
         type: "organization",
         size: "l",
-        className: "rounded-m"
+        className: "rounded-[var(--border-radius-m)]"
       },
       {
         type: "organization",
         size: "xl",
-        className: "rounded-l"
+        className: "rounded-[var(--border-radius-l)]"
       }
     ],
     defaultVariants: {
@@ -126,40 +126,40 @@ const p = d(
       variant: "information"
     }
   }
-), z = /* @__PURE__ */ n.forwardRef(({ className: e, size: s, type: r, ...i }, t) => /* @__PURE__ */ o(
+), x = /* @__PURE__ */ n.forwardRef(({ className: e, size: r, type: s, ...i }, t) => /* @__PURE__ */ o(
   a.Root,
   {
     ref: t,
-    className: l(p({ size: s, type: r }), e),
+    className: l(v({ size: r, type: s }), e),
     ...i
   }
 ));
-z.displayName = a.Root.displayName;
-const v = /* @__PURE__ */ n.forwardRef(({ className: e, ...s }, r) => /* @__PURE__ */ c(u, { children: [
+x.displayName = a.Root.displayName;
+const z = /* @__PURE__ */ n.forwardRef(({ className: e, ...r }, s) => /* @__PURE__ */ c(u, { children: [
   /* @__PURE__ */ o(
     a.Image,
     {
-      ref: r,
+      ref: s,
       className: l("aspect-square h-full w-full object-cover rounded-[inherit]", e),
-      ...s
+      ...r
     }
   ),
   /* @__PURE__ */ o("div", { className: "absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_rgba(85,95,109,0.1)] pointer-events-none" })
 ] }));
-v.displayName = a.Image.displayName;
-const g = /* @__PURE__ */ n.forwardRef(({ className: e, size: s, type: r, variant: i, ...t }, m) => /* @__PURE__ */ o(
+z.displayName = a.Image.displayName;
+const g = /* @__PURE__ */ n.forwardRef(({ className: e, size: r, type: s, variant: i, ...t }, m) => /* @__PURE__ */ o(
   a.Fallback,
   {
     ref: m,
-    className: l(x({ size: s, type: r, variant: i }), e),
+    className: l(p({ size: r, type: s, variant: i }), e),
     ...t
   }
 ));
 g.displayName = a.Fallback.displayName;
 export {
-  z as Avatar,
+  x as Avatar,
   g as AvatarFallback,
-  v as AvatarImage,
-  x as avatarFallbackVariants,
-  p as avatarVariants
+  z as AvatarImage,
+  p as avatarFallbackVariants,
+  v as avatarVariants
 };

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

@@ -3,7 +3,7 @@ import * as u from "react";
 import { cva as x } from "class-variance-authority";
 import { cn as e } from "../../lib/utils.js";
 const m = x(
-  "inline-flex items-center w-fit max-w-full shrink-0 rounded-s px-[var(--space-s)] py-[var(--space-xs)] text-caption-medium-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 cursor-default",
+  "inline-flex items-center w-fit max-w-full shrink-0 rounded-[var(--border-radius-s)] px-[var(--space-s)] py-[var(--space-xs)] text-caption-medium-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-1 cursor-default",
   {
     variants: {
       intent: {

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

@@ -1,46 +1,46 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import * as t from "react";
 import { Slot as x } from "@radix-ui/react-slot";
 import { ChevronDown as h, Check as y, ArrowRight as N } from "lucide-react";
 import { cn as s } from "../../lib/utils.js";
 import { Popover as g, PopoverTrigger as B, PopoverContent as w } from "./popover.js";
 import { Command as C, CommandInput as P, CommandList as R, CommandEmpty as k, CommandGroup as S, CommandItem as L } from "./command.js";
-const z = /* @__PURE__ */ t.forwardRef(({ ...r }, a) => /* @__PURE__ */ e("nav", { ref: a, "aria-label": "breadcrumb", ...r }));
+const z = /* @__PURE__ */ t.forwardRef(({ ...e }, a) => /* @__PURE__ */ r("nav", { ref: a, "aria-label": "breadcrumb", ...e }));
 z.displayName = "Breadcrumb";
-const I = /* @__PURE__ */ t.forwardRef(({ className: r, ...a }, o) => /* @__PURE__ */ e(
+const I = /* @__PURE__ */ t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
   "ol",
   {
     ref: o,
     className: s(
       "[&]:text-body-md flex  flex-wrap items-center gap-[var(--space-s)] text-[var(--color-text-secondary)]",
-      r
+      e
     ),
     ...a
   }
 ));
 I.displayName = "BreadcrumbList";
-const j = /* @__PURE__ */ t.forwardRef(({ className: r, ...a }, o) => /* @__PURE__ */ e(
+const j = /* @__PURE__ */ t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
   "li",
   {
     ref: o,
-    className: s("inline-flex items-center gap-[var(--space-s)]", r),
+    className: s("inline-flex items-center gap-[var(--space-s)]", e),
     ...a
   }
 ));
 j.displayName = "BreadcrumbItem";
-const O = /* @__PURE__ */ t.forwardRef(({ asChild: r, className: a, ...o }, c) => /* @__PURE__ */ e(
-  r ? x : "a",
+const O = /* @__PURE__ */ t.forwardRef(({ asChild: e, className: a, ...o }, c) => /* @__PURE__ */ r(
+  e ? x : "a",
   {
     ref: c,
     className: s(
-      "rounded-xs cursor-pointer underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:underline focus:ring-2 focus:ring-[var(--color-border-focused)] focus:ring-offset-2 focus:outline-none",
+      "rounded-[var(--border-radius-xs)] cursor-pointer underline-offset-2 transition-colors hover:text-[var(--color-text-primary)] hover:underline focus:ring-2 focus:ring-[var(--color-border-focused)] focus:ring-offset-2 focus:outline-none",
       a
     ),
     ...o
   }
 ));
 O.displayName = "BreadcrumbLink";
-const A = /* @__PURE__ */ t.forwardRef(({ className: r, ...a }, o) => /* @__PURE__ */ e(
+const A = /* @__PURE__ */ t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
   "span",
   {
     ref: o,
@@ -49,7 +49,7 @@ const A = /* @__PURE__ */ t.forwardRef(({ className: r, ...a }, o) => /* @__PURE
     "aria-current": "page",
     className: s(
       "!text-body-medium-md text-[var(--color-text-primary)]",
-      r
+      e
     ),
     ...a
   }
@@ -57,7 +57,7 @@ const A = /* @__PURE__ */ t.forwardRef(({ className: r, ...a }, o) => /* @__PURE
 A.displayName = "BreadcrumbPage";
 const D = /* @__PURE__ */ t.forwardRef(
   ({
-    children: r,
+    children: e,
     className: a,
     siblings: o,
     value: c,
@@ -68,7 +68,7 @@ const D = /* @__PURE__ */ t.forwardRef(
   }, f) => {
     const [v, l] = t.useState(!1);
     return /* @__PURE__ */ i(g, { open: v, onOpenChange: l, children: [
-      /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ i(
+      /* @__PURE__ */ r(B, { asChild: !0, children: /* @__PURE__ */ i(
         "button",
         {
           ref: f,
@@ -79,16 +79,16 @@ const D = /* @__PURE__ */ t.forwardRef(
           ),
           ...p,
           children: [
-            r,
-            /* @__PURE__ */ e(h, { className: "h-[var(--size-3xs)] w-[var(--size-3xs)] shrink-0 text-[var(--color-icon-tertiary)]" })
+            e,
+            /* @__PURE__ */ r(h, { className: "h-[var(--size-3xs)] w-[var(--size-3xs)] shrink-0 text-[var(--color-icon-tertiary)]" })
           ]
         }
       ) }),
-      /* @__PURE__ */ e(w, { align: "start", className: "min-w-[16rem] p-0", children: /* @__PURE__ */ i(C, { children: [
-        /* @__PURE__ */ e(P, { placeholder: d }),
+      /* @__PURE__ */ r(w, { align: "start", className: "min-w-[16rem] p-0", children: /* @__PURE__ */ i(C, { children: [
+        /* @__PURE__ */ r(P, { placeholder: d }),
         /* @__PURE__ */ i(R, { children: [
-          /* @__PURE__ */ e(k, { children: u }),
-          /* @__PURE__ */ e(S, { children: o.map((n) => /* @__PURE__ */ i(
+          /* @__PURE__ */ r(k, { children: u }),
+          /* @__PURE__ */ r(S, { children: o.map((n) => /* @__PURE__ */ i(
             L,
             {
               value: n.value,
@@ -97,7 +97,7 @@ const D = /* @__PURE__ */ t.forwardRef(
               },
               children: [
                 n.label,
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ r(
                   y,
                   {
                     className: s(
@@ -117,17 +117,17 @@ const D = /* @__PURE__ */ t.forwardRef(
 );
 D.displayName = "BreadcrumbPagePicker";
 const E = ({
-  children: r,
+  children: e,
   className: a,
   ...o
-}) => /* @__PURE__ */ e(
+}) => /* @__PURE__ */ r(
   "li",
   {
     role: "presentation",
     "aria-hidden": "true",
     className: s("text-[var(--color-text-tertiary)]", a),
     ...o,
-    children: r ?? /* @__PURE__ */ e(N, { className: "h-[var(--size-3xs)] w-[var(--size-3xs)]" })
+    children: e ?? /* @__PURE__ */ r(N, { className: "h-[var(--size-3xs)] w-[var(--size-3xs)]" })
   }
 );
 E.displayName = "BreadcrumbSeparator";

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

@@ -3,7 +3,7 @@ import * as t from "react";
 import { cva as m } from "class-variance-authority";
 import { cn as i } from "../../lib/utils.js";
 import { Separator as v } from "./separator.js";
-const f = m(
+const b = m(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-[var(--space-xs)] [&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
   {
     variants: {
@@ -16,7 +16,7 @@ const f = m(
       orientation: "horizontal"
     }
   }
-), b = /* @__PURE__ */ t.forwardRef(
+), f = /* @__PURE__ */ t.forwardRef(
   ({ className: o, orientation: e, size: r, variant: a, children: l, ...u }, p) => {
     const c = t.Children.map(l, (s) => {
       if (t.isValidElement(s)) {
@@ -35,18 +35,18 @@ const f = m(
         role: "group",
         "data-slot": "button-group",
         "data-orientation": e,
-        className: i(f({ orientation: e }), o),
+        className: i(b({ orientation: e }), o),
         ...u,
         children: c
       }
     );
   }
 );
-b.displayName = "ButtonGroup";
-const x = /* @__PURE__ */ t.forwardRef(
+f.displayName = "ButtonGroup";
+const g = /* @__PURE__ */ t.forwardRef(
   ({ className: o, asChild: e = !1, children: r, ...a }, l) => e && t.isValidElement(r) ? t.cloneElement(r, {
     className: i(
-      "bg-[var(--color-background-neutral-subtlest)] shadow-xs flex items-center gap-[var(--space-xs)] rounded-m border border-[var(--color-border-primary-subtle)] px-[var(--space-l)] [&]:text-body-sm font-medium [&_svg:not([class*='size-'])]:size-[var(--size-s)] [&_svg]:pointer-events-none",
+      "bg-[var(--color-background-neutral-subtlest)] shadow-[var(--shadow-100)] flex items-center gap-[var(--space-xs)] rounded-[var(--border-radius-m)] border border-[var(--color-border-primary-subtle)] px-[var(--space-l)] [&]:text-body-sm font-medium [&_svg:not([class*='size-'])]:size-[var(--size-s)] [&_svg]:pointer-events-none",
       r.props.className,
       o
     )
@@ -55,7 +55,7 @@ const x = /* @__PURE__ */ t.forwardRef(
     {
       ref: l,
       className: i(
-        "bg-[var(--color-background-neutral-subtlest)] shadow-xs flex items-center gap-[var(--space-xs)] rounded-m border border-[var(--color-border-primary-subtle)] px-[var(--space-l)] [&]:text-body-sm font-medium [&_svg:not([class*='size-'])]:size-[var(--size-s)] [&_svg]:pointer-events-none",
+        "bg-[var(--color-background-neutral-subtlest)] shadow-[var(--shadow-100)] flex items-center gap-[var(--space-xs)] rounded-[var(--border-radius-m)] border border-[var(--color-border-primary-subtle)] px-[var(--space-l)] [&]:text-body-sm font-medium [&_svg:not([class*='size-'])]:size-[var(--size-s)] [&_svg]:pointer-events-none",
         o
       ),
       ...a,
@@ -63,8 +63,8 @@ const x = /* @__PURE__ */ t.forwardRef(
     }
   )
 );
-x.displayName = "ButtonGroupText";
-const g = /* @__PURE__ */ t.forwardRef(({ className: o, orientation: e = "vertical", ...r }, a) => /* @__PURE__ */ d(
+g.displayName = "ButtonGroupText";
+const x = /* @__PURE__ */ t.forwardRef(({ className: o, orientation: e = "vertical", ...r }, a) => /* @__PURE__ */ d(
   v,
   {
     ref: a,
@@ -77,10 +77,10 @@ const g = /* @__PURE__ */ t.forwardRef(({ className: o, orientation: e = "vertic
     ...r
   }
 ));
-g.displayName = "ButtonGroupSeparator";
+x.displayName = "ButtonGroupSeparator";
 export {
-  b as ButtonGroup,
-  g as ButtonGroupSeparator,
-  x as ButtonGroupText,
-  f as buttonGroupVariants
+  f as ButtonGroup,
+  x as ButtonGroupSeparator,
+  g as ButtonGroupText,
+  b as buttonGroupVariants
 };

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

@@ -1,9 +1,9 @@
-import { jsxs as P, jsx as c } from "react/jsx-runtime";
+import { jsxs as P, jsx as d } from "react/jsx-runtime";
 import N from "react";
 import { cva as j } from "class-variance-authority";
 import { ChevronDown as D, Loader2 as I } from "lucide-react";
 import { cn as V } from "../../lib/utils.js";
-import { Icon as d } from "./icon.js";
+import { Icon as c } from "./icon.js";
 const B = j(
   "inline-flex items-center justify-center relative transition-all duration-150 ease-in-out focus:outline-none cursor-pointer select-none disabled:cursor-not-allowed gap-[var(--space-xs)] whitespace-nowrap",
   {
@@ -12,41 +12,41 @@ const B = j(
         default: [
           "bg-[var(--color-background-neutral-subtlest)] text-[var(--color-text-primary)]",
           "border border-[var(--color-border-action-outline)]",
-          "enabled:hover:bg-[var(--color-background-neutral-subtlest-hovered)] enabled:hover:border-[var(--color-border-action-outline-hovered)] enabled:hover:shadow-sm",
+          "enabled:hover:bg-[var(--color-background-neutral-subtlest-hovered)] enabled:hover:border-[var(--color-border-action-outline-hovered)] enabled:hover:shadow-[var(--shadow-200)]",
           "focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
-          "enabled:active:bg-[var(--grey-alpha-50)] enabled:active:translate-y-px enabled:active:shadow-xs",
+          "enabled:active:bg-[var(--grey-alpha-50)] enabled:active:translate-y-px enabled:active:shadow-[var(--shadow-100)]",
           "disabled:bg-[var(--color-background-disabled)] disabled:[&]:text-[var(--color-text-disabled)] disabled:border-[var(--color-border-action-outline)]"
         ],
         secondary: [
           "bg-[var(--color-background-neutral-subtlest)] text-[var(--color-text-primary)]",
           "border border-[var(--color-border-action-outline)]",
-          "enabled:hover:bg-[var(--color-background-neutral-subtlest-hovered)] enabled:hover:border-[var(--color-border-action-outline-hovered)] enabled:hover:shadow-sm",
+          "enabled:hover:bg-[var(--color-background-neutral-subtlest-hovered)] enabled:hover:border-[var(--color-border-action-outline-hovered)] enabled:hover:shadow-[var(--shadow-200)]",
           "focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
-          "enabled:active:bg-[var(--grey-alpha-50)] enabled:active:translate-y-px enabled:active:shadow-xs",
+          "enabled:active:bg-[var(--grey-alpha-50)] enabled:active:translate-y-px enabled:active:shadow-[var(--shadow-100)]",
           "disabled:bg-[var(--color-background-disabled)] disabled:[&]:text-[var(--color-text-disabled)] disabled:border-[var(--color-border-action-outline)]"
         ],
         primary: [
           "bg-[var(--color-background-blue-bold)] [&]:text-[var(--color-text-on-action)]",
           "border-none",
-          "enabled:hover:bg-[var(--color-background-blue-bold-hovered)] enabled:hover:shadow-sm",
+          "enabled:hover:bg-[var(--color-background-blue-bold-hovered)] enabled:hover:shadow-[var(--shadow-200)]",
           "focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
-          "enabled:active:bg-[var(--blue-700)] enabled:active:translate-y-px enabled:active:shadow-xs",
+          "enabled:active:bg-[var(--blue-700)] enabled:active:translate-y-px enabled:active:shadow-[var(--shadow-100)]",
           "disabled:bg-[var(--color-background-disabled)] disabled:[&]:text-[var(--color-text-disabled)]"
         ],
         destructive: [
           "bg-[var(--color-background-error-bold)] [&]:text-[var(--color-text-on-action)]",
           "border-none",
-          "enabled:hover:bg-[var(--color-background-error-bold-hovered)] enabled:hover:shadow-sm",
+          "enabled:hover:bg-[var(--color-background-error-bold-hovered)] enabled:hover:shadow-[var(--shadow-200)]",
           "focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
-          "enabled:active:bg-[var(--red-700)] enabled:active:translate-y-px enabled:active:shadow-xs",
+          "enabled:active:bg-[var(--red-700)] enabled:active:translate-y-px enabled:active:shadow-[var(--shadow-100)]",
           "disabled:bg-[var(--color-background-disabled)] disabled:[&]:text-[var(--color-text-disabled)]"
         ],
         success: [
           "bg-[var(--color-background-success-bold)] [&]:text-[var(--color-text-on-action)]",
           "border-none",
-          "enabled:hover:bg-[var(--color-background-success-bold-hovered)] enabled:hover:shadow-sm",
+          "enabled:hover:bg-[var(--color-background-success-bold-hovered)] enabled:hover:shadow-[var(--shadow-200)]",
           "focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
-          "enabled:active:bg-[var(--green-700)] enabled:active:translate-y-px enabled:active:shadow-xs",
+          "enabled:active:bg-[var(--green-700)] enabled:active:translate-y-px enabled:active:shadow-[var(--shadow-100)]",
           "disabled:bg-[var(--color-background-disabled)] disabled:[&]:text-[var(--color-text-disabled)]"
         ],
         ghost: [
@@ -60,13 +60,13 @@ const B = j(
       },
       size: {
         s: [
-          "text-label-sm h-[var(--size-s)] rounded-s px-[var(--space-m)]"
+          "text-label-sm h-[var(--size-s)] rounded-[var(--border-radius-s)] px-[var(--space-m)]"
         ],
         m: [
-          "text-label-md h-[var(--size-m)] rounded-s px-[var(--space-m)]"
+          "text-label-md h-[var(--size-m)] rounded-[var(--border-radius-s)] px-[var(--space-m)]"
         ],
         l: [
-          "text-label-md h-[var(--size-l)] rounded-s px-[var(--space-l)]"
+          "text-label-md h-[var(--size-l)] rounded-[var(--border-radius-s)] px-[var(--space-l)]"
         ]
       },
       iconPosition: {
@@ -133,19 +133,19 @@ const B = j(
 ), C = /* @__PURE__ */ N.forwardRef(
   ({
     className: u,
-    variant: o,
+    variant: a,
     size: b,
     children: s,
-    icon: a,
+    icon: o,
     iconPosition: p,
     dropdown: i = !1,
     dropdownOpen: g = !1,
-    disabled: m = !1,
+    disabled: f = !1,
     loading: e = !1,
-    type: f = "button",
-    ...x
-  }, h) => {
-    const l = b || "m", v = m || e, n = v ? "disabled" : o === "primary" || o === "destructive" || o === "success" ? "inverse" : "primary", y = () => e ? /* @__PURE__ */ c(d, { name: I, size: l, color: n, className: "animate-spin" }) : null, t = () => e ? y() : a ? /* @__PURE__ */ c(d, { name: a, size: l, color: n }) : null, z = () => i ? /* @__PURE__ */ c(d, { name: D, size: l, color: n }) : null, r = a && s ? p : a || e ? "only" : e && s ? "left" : "none", w = i ? {
+    type: m = "button",
+    ...h
+  }, x) => {
+    const l = b || "m", v = f || e, n = v ? "disabled" : a === "primary" || a === "destructive" || a === "success" ? "inverse" : "primary", w = () => e ? /* @__PURE__ */ d(c, { name: I, size: l, color: n, className: "animate-spin" }) : null, t = () => e ? w() : o ? /* @__PURE__ */ d(c, { name: o, size: l, color: n }) : null, y = () => i ? /* @__PURE__ */ d(c, { name: D, size: l, color: n }) : null, r = o && s ? p : o || e ? "only" : e && s ? "left" : "none", z = i ? {
       "aria-haspopup": "menu",
       "aria-expanded": g
     } : {}, k = e ? {
@@ -155,26 +155,26 @@ const B = j(
     return /* @__PURE__ */ P(
       "button",
       {
-        type: f,
+        type: m,
         className: V(
           B({
-            variant: o,
+            variant: a,
             size: b,
             iconPosition: r,
             className: u
           })
         ),
-        ref: h,
+        ref: x,
         disabled: v,
-        ...w,
+        ...z,
         ...k,
-        ...x,
+        ...h,
         children: [
           r === "left" && t(),
           r !== "only" && s,
           r === "right" && t(),
           r === "only" && t(),
-          i && z()
+          i && y()
         ]
       }
     );

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

@@ -1,7 +1,7 @@
 import { jsx as x } from "react/jsx-runtime";
 import * as y from "react";
 import { DayPicker as L } from "react-day-picker";
-import { cn as m } from "../../lib/utils.js";
+import { cn as v } from "../../lib/utils.js";
 import { Icon as M } from "./icon.js";
 import { ChevronLeft as P, ChevronRight as H } from "lucide-react";
 function B(i) {
@@ -11,18 +11,18 @@ function B(i) {
     showOutsideDays: _ = !0,
     mode: n,
     ...k
-  } = i, o = "selected" in i ? i.selected : void 0, s = "onSelect" in i ? i.onSelect : void 0, [r, v] = y.useState(null), [g, b] = y.useState(null), f = (e, t) => e.toDateString() === t.toDateString(), p = (e, t, c) => {
-    const u = e.getTime(), a = t.getTime(), d = c.getTime(), [E, I] = a < d ? [a, d] : [d, a];
+  } = i, o = "selected" in i ? i.selected : void 0, s = "onSelect" in i ? i.onSelect : void 0, [r, m] = y.useState(null), [g, b] = y.useState(null), f = (e, t) => e.toDateString() === t.toDateString(), p = (e, t, d) => {
+    const u = e.getTime(), a = t.getTime(), c = d.getTime(), [E, I] = a < c ? [a, c] : [c, a];
     return u > E && u < I;
   }, S = (e, t) => {
     if (!t.disabled && n === "range")
       if (!r)
-        v(e);
+        m(e);
       else if (f(e, r))
-        s && s({ from: r, to: r }), v(null), b(null);
+        s && s({ from: r, to: r }), m(null), b(null);
       else {
-        const [c, u] = [r, e].sort((a, d) => a.getTime() - d.getTime());
-        s && s({ from: c, to: u }), v(null), b(null);
+        const [d, u] = [r, e].sort((a, c) => a.getTime() - c.getTime());
+        s && s({ from: d, to: u }), m(null), b(null);
       }
   }, z = (e, t) => {
     n === "range" && r && !t.disabled && b(e);
@@ -42,7 +42,7 @@ function B(i) {
     return !t.from || !t.to ? !1 : p(e, t.from, t.to);
   }, l = {
     showOutsideDays: _,
-    className: m(
+    className: v(
       // relative for nav positioning; padding creates space around entire calendar including buttons
       "relative",
       "py-[var(--space-m)] px-[var(--space-s)]",
@@ -65,33 +65,33 @@ function B(i) {
       caption_label: "text-body-medium-md text-[var(--color-text-primary)]",
       // nav: fills root, flexbox positions buttons at left/right edges, vertically centered
       nav: "absolute inset-0 flex justify-between items-center px-[var(--space-s)] pointer-events-none z-10",
-      button_previous: m(
+      button_previous: v(
         "pointer-events-auto",
-        "inline-flex items-center justify-center rounded-m",
+        "inline-flex items-center justify-center rounded-[var(--border-radius-m)]",
         "w-[var(--size-m)] h-[var(--size-m)] p-0",
         "bg-[var(--color-background-neutral-subtlest)] text-[var(--color-text-primary)]",
         "border border-[var(--color-border-action-outline)]",
-        "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:border-[var(--color-border-action-outline-hovered)] hover:shadow-sm",
+        "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:border-[var(--color-border-action-outline-hovered)] hover:shadow-[var(--shadow-200)]",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
         "disabled:pointer-events-none disabled:opacity-50"
       ),
-      button_next: m(
+      button_next: v(
         "pointer-events-auto",
-        "inline-flex items-center justify-center rounded-m",
+        "inline-flex items-center justify-center rounded-[var(--border-radius-m)]",
         "w-[var(--size-m)] h-[var(--size-m)] p-0",
         "bg-[var(--color-background-neutral-subtlest)] text-[var(--color-text-primary)]",
         "border border-[var(--color-border-action-outline)]",
-        "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:border-[var(--color-border-action-outline-hovered)] hover:shadow-sm",
+        "hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:border-[var(--color-border-action-outline-hovered)] hover:shadow-[var(--shadow-200)]",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2",
         "disabled:pointer-events-none disabled:opacity-50"
       ),
       month_grid: "w-full border-collapse space-y-[var(--space-xs)]",
       weekdays: "flex",
-      weekday: "text-[var(--color-text-tertiary)] rounded-m w-[var(--size-m)] font-normal text-caption-medium-sm",
+      weekday: "text-[var(--color-text-tertiary)] rounded-[var(--border-radius-m)] w-[var(--size-m)] font-normal text-caption-medium-sm",
       week: "flex w-full mt-[var(--space-s)]",
       day: "h-[var(--size-m)] w-[var(--size-m)] text-center text-body-sm p-0 relative focus-within:relative focus-within:z-20",
-      day_button: m(
-        "inline-flex items-center justify-center rounded-m",
+      day_button: v(
+        "inline-flex items-center justify-center rounded-[var(--border-radius-m)]",
         "w-[var(--size-m)] h-[var(--size-m)] p-0",
         "text-body-sm font-normal text-[var(--color-text-primary)]",
         "hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
@@ -100,7 +100,7 @@ function B(i) {
       ),
       range_start: "day-range-start",
       range_end: "day-range-end",
-      selected: "!bg-[var(--color-background-blue-bold)] [&_button]:!text-white [&_button]:after:!bg-white rounded-m",
+      selected: "!bg-[var(--color-background-blue-bold)] [&_button]:!text-white [&_button]:after:!bg-white rounded-[var(--border-radius-m)]",
       today: "[&_button]:relative [&_button]:after:content-[''] [&_button]:after:absolute [&_button]:after:bottom-1 [&_button]:after:left-1/2 [&_button]:after:-translate-x-1/2 [&_button]:after:w-1 [&_button]:after:h-1 [&_button]:after:rounded-full [&_button]:after:bg-red-500 font-medium",
       outside: "day-outside text-[var(--color-text-tertiary)] opacity-50 aria-selected:bg-[var(--color-background-blue-subtle)] aria-selected:text-[var(--color-text-tertiary)] aria-selected:opacity-30",
       disabled: "text-[var(--color-text-disabled)] opacity-50",
@@ -117,8 +117,8 @@ function B(i) {
     },
     components: {
       Chevron: ({ orientation: e, ...t }) => {
-        const c = e === "left" ? P : H, { size: u, ...a } = t;
-        return /* @__PURE__ */ x(M, { name: c, size: "s", ...a });
+        const d = e === "left" ? P : H, { size: u, ...a } = t;
+        return /* @__PURE__ */ x(M, { name: d, size: "s", ...a });
       }
     },
     ...k