impact-nova 2.1.0-alpha.4 → 2.1.0-alpha.6

package/dist/components/data-display/statistics-card/statistics-card.js

@@ -1,4 +1,4 @@
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
 import * as n from "react";
 import { cn as d } from "../../../lib/utils.js";
 import { Checkbox as k } from "../../forms/checkbox/checkbox.js";
@@ -12,7 +12,7 @@ const H = n.forwardRef(
     const f = n.useMemo(
       () => l ? e.map((N, T) => l(N, T)) : e,
       [e, l]
-    ), p = "var(--color-canvas-subtle, #f8f9fb)", x = "px-5 py-4", h = "gap-4 md:gap-6 lg:gap-8", u = "w-full min-w-0 max-w-[439px]", C = o?.colors?.background || p, b = o?.spacing?.rootPadding || x, w = o?.spacing?.rootGap || h, S = o?.spacing?.rootWidth || u, v = n.useMemo(
+    ), p = "var(--color-canvas-subtle, #f8f9fb)", x = "px-5 py-4", h = "gap-4 md:gap-6 lg:gap-8", g = "w-full min-w-0 max-w-[439px]", C = o?.colors?.background || p, b = o?.spacing?.rootPadding || x, w = o?.spacing?.rootGap || h, S = o?.spacing?.rootWidth || g, v = n.useMemo(
       () => ({ items: f, onItemToggle: a, chartSize: t, config: o }),
       [f, a, t, o]
     );
@@ -77,7 +77,7 @@ const q = n.forwardRef(
     "span",
     {
       ref: t,
-      className: d("font-semibold text-base leading-[1.5em] text-content-muted truncate line-clamp-1", s),
+      className: d("font-semibold text-base leading-[1.5em] text-secondary-foreground truncate line-clamp-1", s),
       ...a,
       children: e
     }
@@ -85,7 +85,7 @@ const q = n.forwardRef(
 );
 q.displayName = "StatisticsCardTitleText";
 const A = n.forwardRef(
-  ({ content: s, icon: e, ...a }, t) => /* @__PURE__ */ i("div", { ref: t, ...a, children: /* @__PURE__ */ g(R, { children: [
+  ({ content: s, icon: e, ...a }, t) => /* @__PURE__ */ i("div", { ref: t, ...a, children: /* @__PURE__ */ u(R, { children: [
     /* @__PURE__ */ i(I, { asChild: !0, children: e || /* @__PURE__ */ i(L, { size: "sm", className: "text-secondary-foreground cursor-pointer shrink-0" }) }),
     /* @__PURE__ */ i(j, { variant: "tertiary", side: "top", children: s })
   ] }) })
@@ -93,10 +93,10 @@ const A = n.forwardRef(
 A.displayName = "StatisticsCardTitleTooltip";
 const E = n.forwardRef(
   ({ className: s, centerLabel: e, chartConfig: a, chartSize: t = 104, ...o }, l) => {
-    const { items: c, onItemToggle: m } = y(), { total: r, checkedTotal: f, hasChecked: p } = W(c), x = G(e, p, f, r), h = $(c, p), u = B(c, m, a), C = {
-      ...u,
+    const { items: c, onItemToggle: m } = y(), { total: r, checkedTotal: f, hasChecked: p } = W(c), x = G(e, p, f, r), h = $(c, p), g = B(c, m, a), C = {
+      ...g,
       chart: {
-        ...u.chart,
+        ...g.chart,
         type: "pie",
         height: t,
         width: t,
@@ -110,7 +110,7 @@ const E = n.forwardRef(
       navigation: { buttonOptions: { enabled: !1 } },
       series: h
     };
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ u(
       "div",
       {
         ref: l,
@@ -158,8 +158,8 @@ const J = n.forwardRef(
     const { items: l, onItemToggle: c, config: m } = y();
     let r = a, f = -1;
     if (!r && e !== void 0 ? (r = l[e], f = e) : r && (f = l.findIndex((w) => w === r)), !r || f === -1) return null;
-    const p = "bg-white", x = "px-3 py-1.5", h = "var(--color-foreground)", u = m?.colors?.background || p, C = m?.spacing?.itemPadding || x, b = m?.colors?.text || h;
-    return /* @__PURE__ */ g(
+    const p = "bg-white", x = "px-3 py-1.5", h = "var(--color-foreground)", g = m?.colors?.background || p, C = m?.spacing?.itemPadding || x, b = m?.colors?.text || h;
+    return /* @__PURE__ */ u(
       "div",
       {
         ref: o,
@@ -167,7 +167,7 @@ const J = n.forwardRef(
         "aria-label": `${r.label}: ${r.value}`,
         className: d(
           "flex flex-row items-center gap-2 rounded-md border-l-2 transition-all",
-          u,
+          g,
           C,
           s
         ),
@@ -178,7 +178,7 @@ const J = n.forwardRef(
         },
         ...t,
         children: [
-          /* @__PURE__ */ g("div", { className: "flex flex-row items-center gap-2 flex-1 min-w-0", children: [
+          /* @__PURE__ */ u("div", { className: "flex flex-row items-center gap-2 flex-1 min-w-0", children: [
             /* @__PURE__ */ i(
               k,
               {
@@ -223,7 +223,7 @@ const K = n.forwardRef(
 );
 K.displayName = "StatisticsCardSummary";
 const Q = n.forwardRef(
-  ({ className: s, label: e, count: a, color: t = "var(--color-secondary-foreground)", ...o }, l) => /* @__PURE__ */ g(
+  ({ className: s, label: e, count: a, color: t = "var(--color-secondary-foreground)", ...o }, l) => /* @__PURE__ */ u(
     "div",
     {
       ref: l,
@@ -237,7 +237,7 @@ const Q = n.forwardRef(
             className: "w-1.5 h-1.5 rounded-full shrink-0 bg-[var(--summary-color)]"
           }
         ),
-        /* @__PURE__ */ g("span", { children: [
+        /* @__PURE__ */ u("span", { children: [
           e,
           ": ",
           a

package/dist/components/feedback/alert-dialog/alert-dialog.js

@@ -3,26 +3,26 @@ import * as i from "react";
 import * as t from "@radix-ui/react-alert-dialog";
 import { wrapRadixPart as n, createCompoundPart as d } from "../../../lib/primitives/create-compound.js";
 import { cn as r } from "../../../lib/utils.js";
-import { buttonVariants as m } from "../../primitives/button/button.variants.js";
-const w = (e) => /* @__PURE__ */ l(t.Root, { "data-component": "alert-dialog", ...e }), b = n(
+import { buttonVariants as c } from "../../primitives/button/button.variants.js";
+const w = (a) => /* @__PURE__ */ l(t.Root, { "data-component": "alert-dialog", ...a }), b = n(
   "alert-dialog",
   "trigger",
   "AlertDialogTrigger",
   t.Trigger
-), f = t.Portal, c = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+), f = t.Portal, m = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
   t.Overlay,
   {
     className: r(
       "fixed inset-0 z-50 bg-scrim-deep data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none motion-reduce:transition-none",
-      e
+      a
     ),
-    ...a,
+    ...e,
     ref: o
   }
 ));
-c.displayName = t.Overlay.displayName;
-const u = i.forwardRef(({ className: e, onOpenAutoFocus: a, ...o }, p) => /* @__PURE__ */ g(f, { children: [
-  /* @__PURE__ */ l(c, {}),
+m.displayName = t.Overlay.displayName;
+const u = i.forwardRef(({ className: a, onOpenAutoFocus: e, ...o }, p) => /* @__PURE__ */ g(f, { children: [
+  /* @__PURE__ */ l(m, {}),
   /* @__PURE__ */ l(
     t.Content,
     {
@@ -30,11 +30,11 @@ const u = i.forwardRef(({ className: e, onOpenAutoFocus: a, ...o }, p) => /* @__
       "aria-describedby": void 0,
       "data-component": "alert-dialog-content",
       onOpenAutoFocus: (s) => {
-        s.preventDefault(), a?.(s);
+        s.preventDefault(), e?.(s);
       },
       className: r(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-canvas p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg motion-reduce:animate-none motion-reduce:transition-none",
-        e
+        a
       ),
       ...o
     }
@@ -60,28 +60,28 @@ const C = d("alert-dialog", {
   "description",
   "AlertDialogDescription",
   t.Description,
-  "text-sm text-content-muted"
-), A = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+  "text-sm text-content-secondary"
+), A = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
   t.Action,
   {
     ref: o,
     "data-component": "alert-dialog-action",
-    className: r(m(), e),
-    ...a
+    className: r(c(), a),
+    ...e
   }
 ));
 A.displayName = t.Action.displayName;
-const D = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
+const D = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
   t.Cancel,
   {
     ref: o,
     "data-component": "alert-dialog-cancel",
     className: r(
-      m({ variant: "outline" }),
+      c({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      e
+      a
     ),
-    ...a
+    ...e
   }
 ));
 D.displayName = t.Cancel.displayName;
@@ -93,7 +93,7 @@ export {
   P as AlertDialogDescription,
   R as AlertDialogFooter,
   C as AlertDialogHeader,
-  c as AlertDialogOverlay,
+  m as AlertDialogOverlay,
   f as AlertDialogPortal,
   T as AlertDialogTitle,
   b as AlertDialogTrigger

package/dist/components/feedback/dialog/dialog.js

@@ -54,7 +54,7 @@ const N = d.forwardRef(({ className: a, children: i, hideClose: n, onOpenAutoFoc
               variant: "ghost",
               size: "iconSm",
               "data-component": "dialog-close",
-              className: "absolute end-4 top-3.5 opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 data-[state=open]:bg-accent data-[state=open]:text-content-muted [&_svg]:!size-3 [&_svg]:block",
+              className: "absolute end-4 top-3.5 opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 data-[state=open]:bg-accent data-[state=open]:text-content-icon [&_svg]:!size-3 [&_svg]:block",
               "aria-label": x,
               children: /* @__PURE__ */ e(y, {})
             }

package/dist/components/feedback/drawer/drawer.js

@@ -2,11 +2,11 @@ import { jsx as r, jsxs as o } from "react/jsx-runtime";
 import * as c from "react";
 import { Drawer as e } from "vaul";
 import { Cross as g } from "impact-nova-icons";
-import { wrapRadixPart as s, createCompoundPart as l } from "../../../lib/primitives/create-compound.js";
+import { wrapRadixPart as n, createCompoundPart as l } from "../../../lib/primitives/create-compound.js";
 import { cn as d } from "../../../lib/utils.js";
 import { useImpactNovaI18n as D } from "../../../i18n/use-impact-nova-i18n.js";
-import { Tooltip as u, TooltipTrigger as x, TooltipContent as N } from "../tooltip/tooltip.js";
-const h = ({
+import { Tooltip as u, TooltipTrigger as x, TooltipContent as y } from "../tooltip/tooltip.js";
+const N = ({
   shouldScaleBackground: t = !0,
   ...a
 }) => /* @__PURE__ */ r(
@@ -17,29 +17,29 @@ const h = ({
     ...a
   }
 );
-h.displayName = "Drawer";
-const z = s(
+N.displayName = "Drawer";
+const z = n(
   "drawer",
   "trigger",
   "DrawerTrigger",
   e.Trigger
-), y = e.Portal, F = s(
+), h = e.Portal, F = n(
   "drawer",
   "close",
   "DrawerClose",
   e.Close
-), m = c.forwardRef(({ className: t, ...a }, n) => /* @__PURE__ */ r(
+), m = c.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ r(
   e.Overlay,
   {
-    ref: n,
+    ref: s,
     className: d("fixed inset-0 z-50 bg-scrim-deep", t),
     ...a
   }
 ));
 m.displayName = e.Overlay.displayName;
-const b = c.forwardRef(({ className: t, children: a, hideClose: n, ...p }, w) => {
+const b = c.forwardRef(({ className: t, children: a, hideClose: s, ...p }, w) => {
   const { t: f } = D(), i = f("aria.close");
-  return /* @__PURE__ */ o(y, { children: [
+  return /* @__PURE__ */ o(h, { children: [
     /* @__PURE__ */ r(m, {}),
     /* @__PURE__ */ o(
       e.Content,
@@ -54,11 +54,11 @@ const b = c.forwardRef(({ className: t, children: a, hideClose: n, ...p }, w) =>
         children: [
           /* @__PURE__ */ r("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
           a,
-          !n && /* @__PURE__ */ o(u, { children: [
+          !s && /* @__PURE__ */ o(u, { children: [
             /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ o(
               e.Close,
               {
-                className: "absolute end-4 top-4 rounded-sm opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-content-muted",
+                className: "absolute end-4 top-4 rounded-sm opacity-50 ring-offset-canvas transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-content-icon",
                 "aria-label": i,
                 children: [
                   /* @__PURE__ */ r(g, { className: "!h-3 !w-3" }),
@@ -66,7 +66,7 @@ const b = c.forwardRef(({ className: t, children: a, hideClose: n, ...p }, w) =>
                 ]
               }
             ) }),
-            /* @__PURE__ */ r(N, { variant: "tertiary", side: "top", children: i })
+            /* @__PURE__ */ r(y, { variant: "tertiary", side: "top", children: i })
           ] })
         ]
       }
@@ -82,28 +82,28 @@ const H = l("drawer", {
   part: "footer",
   displayName: "DrawerFooter",
   className: "mt-auto flex flex-col gap-2 p-4"
-}), k = s(
+}), k = n(
   "drawer",
   "title",
   "DrawerTitle",
   e.Title,
   "text-lg font-semibold leading-none tracking-tight"
-), L = s(
+), L = n(
   "drawer",
   "description",
   "DrawerDescription",
   e.Description,
-  "text-sm text-content-muted"
+  "text-sm text-content-secondary"
 );
 export {
-  h as Drawer,
+  N as Drawer,
   F as DrawerClose,
   b as DrawerContent,
   L as DrawerDescription,
   I as DrawerFooter,
   H as DrawerHeader,
   m as DrawerOverlay,
-  y as DrawerPortal,
+  h as DrawerPortal,
   k as DrawerTitle,
   z as DrawerTrigger
 };

package/dist/components/feedback/dropdown-menu/dropdown-menu.js

@@ -1,9 +1,9 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import * as l from "react";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import * as c from "react";
 import * as t from "@radix-ui/react-dropdown-menu";
 import { Checkmark as f, ChevronRight as x } from "impact-nova-icons";
 import { wrapRadixPart as p } from "../../../lib/primitives/create-compound.js";
-import { cn as s } from "../../../lib/utils.js";
+import { cn as d } from "../../../lib/utils.js";
 const j = (n) => /* @__PURE__ */ e(t.Root, { "data-component": "dropdown-menu", ...n }), G = p(
   "dropdown-menu",
   "trigger",
@@ -14,25 +14,25 @@ const j = (n) => /* @__PURE__ */ e(t.Root, { "data-component": "dropdown-menu",
   "group",
   "DropdownMenuGroup",
   t.Group
-), T = t.Portal, L = t.Sub, g = l.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
+), T = t.Portal, L = t.Sub, g = c.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
   t.RadioGroup,
   {
     ref: o,
-    className: s("flex flex-col gap-0.5", n),
+    className: d("flex flex-col gap-0.5", n),
     ...a
   }
 ));
 g.displayName = t.RadioGroup.displayName;
-const h = l.forwardRef(({ className: n, inset: a, icon: o, children: r, ...d }, i) => /* @__PURE__ */ c(
+const h = c.forwardRef(({ className: n, inset: a, icon: o, children: r, ...s }, i) => /* @__PURE__ */ l(
   t.SubTrigger,
   {
     ref: i,
-    className: s(
+    className: d(
       "flex cursor-default select-none items-center gap-2 rounded-md px-3 h-[35px] text-[13px] outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 font-medium",
       a && "pl-4",
       n
     ),
-    ...d,
+    ...s,
     children: [
       o && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: o }),
       r,
@@ -41,27 +41,27 @@ const h = l.forwardRef(({ className: n, inset: a, icon: o, children: r, ...d },
   }
 ));
 h.displayName = t.SubTrigger.displayName;
-const w = l.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
+const b = c.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
   t.SubContent,
   {
     ref: o,
-    className: s(
-      "z-[100] min-w-[8rem] overflow-hidden rounded-lg bg-canvas-overlay p-2 text-canvas-overlay-foreground shadow-elevation-floating text-[13px] 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 origin-[--radix-dropdown-menu-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
+    className: d(
+      "z-50 min-w-[8rem] overflow-hidden rounded-lg bg-canvas-overlay p-2 text-canvas-overlay-foreground shadow-elevation-floating text-[13px] 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 origin-[--radix-dropdown-menu-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
       n
     ),
     ...a
   }
 ) }));
-w.displayName = t.SubContent.displayName;
-const N = l.forwardRef(({ className: n, sideOffset: a = 4, portalled: o = !0, ...r }, d) => {
+b.displayName = t.SubContent.displayName;
+const w = c.forwardRef(({ className: n, sideOffset: a = 4, portalled: o = !0, ...r }, s) => {
   const i = /* @__PURE__ */ e(
     t.Content,
     {
-      ref: d,
+      ref: s,
       sideOffset: a,
       "data-component": "dropdown-menu-content",
-      className: s(
-        "z-[100] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[12rem] overflow-y-auto overflow-x-hidden rounded-lg bg-canvas-overlay p-2 text-canvas-overlay-foreground shadow-elevation-floating flex flex-col gap-0.5",
+      className: d(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[12rem] overflow-y-auto overflow-x-hidden rounded-lg bg-canvas-overlay p-2 text-canvas-overlay-foreground shadow-elevation-floating flex flex-col gap-0.5",
         "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 origin-[--radix-dropdown-menu-content-transform-origin] motion-reduce:animate-none motion-reduce:transition-none",
         n
       ),
@@ -70,13 +70,13 @@ const N = l.forwardRef(({ className: n, sideOffset: a = 4, portalled: o = !0, ..
   );
   return o ? /* @__PURE__ */ e(t.Portal, { children: i }) : i;
 });
-N.displayName = t.Content.displayName;
-const b = l.forwardRef(({ className: n, inset: a, description: o, icon: r, children: d, ...i }, m) => /* @__PURE__ */ c(
+w.displayName = t.Content.displayName;
+const N = c.forwardRef(({ className: n, inset: a, description: o, icon: r, children: s, ...i }, m) => /* @__PURE__ */ l(
   t.Item,
   {
     ref: m,
     "data-component": "dropdown-menu-item",
-    className: s(
+    className: d(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-3 h-[35px] text-[13px] outline-none transition-colors focus:bg-accent focus:text-content data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       a && "pl-4",
       n
@@ -84,19 +84,19 @@ const b = l.forwardRef(({ className: n, inset: a, description: o, icon: r, child
     ...i,
     children: [
       r && /* @__PURE__ */ e("span", { className: "flex-shrink-0 [&>svg]:size-4", children: r }),
-      /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 justify-center", children: [
-        /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: d }),
+      /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 justify-center", children: [
+        /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: s }),
         o && /* @__PURE__ */ e("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: o })
       ] })
     ]
   }
 ));
-b.displayName = t.Item.displayName;
-const v = l.forwardRef(({ className: n, children: a, checked: o, description: r, icon: d, ...i }, m) => /* @__PURE__ */ c(
+N.displayName = t.Item.displayName;
+const y = c.forwardRef(({ className: n, children: a, checked: o, description: r, icon: s, ...i }, m) => /* @__PURE__ */ l(
   t.CheckboxItem,
   {
     ref: m,
-    className: s(
+    className: d(
       "relative flex cursor-default select-none items-center rounded-md h-[35px] pl-10 pr-3 text-[13px] outline-none transition-colors focus:bg-accent focus:text-content data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       n
     ),
@@ -107,16 +107,16 @@ const v = l.forwardRef(({ className: n, children: a, checked: o, description: r,
       /* @__PURE__ */ e("span", { className: "absolute left-3 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ e(
         "div",
         {
-          className: s(
+          className: d(
             "flex h-4 w-4 items-center justify-center rounded-[4px] border border-stroke transition-colors",
             o && "bg-brand border-brand text-brand-foreground"
           ),
           children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(f, { className: "h-3.5 w-3.5" }) })
         }
       ) }),
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-        d && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: d }),
-        /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 justify-center", children: [
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+        s && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: s }),
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 justify-center", children: [
           /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: a }),
           r && /* @__PURE__ */ e("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: r })
         ] })
@@ -124,32 +124,45 @@ const v = l.forwardRef(({ className: n, children: a, checked: o, description: r,
     ]
   }
 ));
-v.displayName = t.CheckboxItem.displayName;
-const y = l.forwardRef(({ className: n, children: a, description: o, icon: r, ...d }, i) => /* @__PURE__ */ e(
+y.displayName = t.CheckboxItem.displayName;
+const v = c.forwardRef(({ className: n, children: a, description: o, icon: r, ...s }, i) => /* @__PURE__ */ l(
   t.RadioItem,
   {
     ref: i,
-    className: s(
-      "relative flex cursor-default select-none items-center rounded-md h-[35px] px-3 text-[13px] outline-none transition-colors focus:bg-accent focus:text-content data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:bg-accent",
+    "data-component": "dropdown-menu-radio-item",
+    className: d(
+      "group relative flex cursor-default select-none items-center rounded-md min-h-[35px] py-1.5 pl-10 pr-3 text-[13px] outline-none transition-colors focus:bg-accent focus:text-content data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:bg-accent",
       n
     ),
     onSelect: (m) => m.preventDefault(),
-    ...d,
-    children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-      r && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: r }),
-      /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 justify-center", children: [
-        /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: a }),
-        o && /* @__PURE__ */ e("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: o })
+    ...s,
+    children: [
+      /* @__PURE__ */ e("span", { className: "absolute left-3 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: d(
+            "flex h-4 w-4 items-center justify-center rounded-full border border-stroke transition-colors",
+            "group-data-[state=checked]:border-brand"
+          ),
+          children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e("div", { className: "h-2 w-2 rounded-full bg-brand" }) })
+        }
+      ) }),
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+        r && /* @__PURE__ */ e("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: r }),
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 justify-center", children: [
+          /* @__PURE__ */ e("span", { className: "font-medium leading-none", children: a }),
+          o && /* @__PURE__ */ e("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: o })
+        ] })
       ] })
-    ] })
+    ]
   }
 ));
-y.displayName = t.RadioItem.displayName;
-const D = l.forwardRef(({ className: n, inset: a, ...o }, r) => /* @__PURE__ */ e(
+v.displayName = t.RadioItem.displayName;
+const D = c.forwardRef(({ className: n, inset: a, ...o }, r) => /* @__PURE__ */ e(
   t.Label,
   {
     ref: r,
-    className: s(
+    className: d(
       "px-3 py-2 text-xs font-bold tracking-wider text-content-icon",
       a && "pl-4",
       n
@@ -158,55 +171,55 @@ const D = l.forwardRef(({ className: n, inset: a, ...o }, r) => /* @__PURE__ */
   }
 ));
 D.displayName = t.Label.displayName;
-const M = l.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
+const M = c.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
   t.Separator,
   {
     ref: o,
-    className: s("-mx-2 my-1 h-px bg-stroke-hairline", n),
+    className: d("-mx-2 my-1 h-px bg-stroke-hairline", n),
     ...a
   }
 ));
 M.displayName = t.Separator.displayName;
-const R = ({
+const k = ({
   className: n,
   ...a
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: s(
+    className: d(
       "sticky bottom-0 z-10 -mx-2 -mb-2 mt-1 flex items-center justify-end gap-2 border-t bg-canvas-elevated p-2 shrink-0 rounded-b-xl",
       n
     ),
     ...a
   }
 );
-R.displayName = "DropdownMenuFooter";
-const k = ({
+k.displayName = "DropdownMenuFooter";
+const R = ({
   className: n,
   ...a
 }) => /* @__PURE__ */ e(
   "span",
   {
-    className: s("ml-auto text-xs tracking-widest opacity-60", n),
+    className: d("ml-auto text-xs tracking-widest opacity-60", n),
     ...a
   }
 );
-k.displayName = "DropdownMenuShortcut";
+R.displayName = "DropdownMenuShortcut";
 export {
   j as DropdownMenu,
-  v as DropdownMenuCheckboxItem,
-  N as DropdownMenuContent,
-  R as DropdownMenuFooter,
+  y as DropdownMenuCheckboxItem,
+  w as DropdownMenuContent,
+  k as DropdownMenuFooter,
   P as DropdownMenuGroup,
-  b as DropdownMenuItem,
+  N as DropdownMenuItem,
   D as DropdownMenuLabel,
   T as DropdownMenuPortal,
   g as DropdownMenuRadioGroup,
-  y as DropdownMenuRadioItem,
+  v as DropdownMenuRadioItem,
   M as DropdownMenuSeparator,
-  k as DropdownMenuShortcut,
+  R as DropdownMenuShortcut,
   L as DropdownMenuSub,
-  w as DropdownMenuSubContent,
+  b as DropdownMenuSubContent,
   h as DropdownMenuSubTrigger,
   G as DropdownMenuTrigger
 };

package/dist/components/feedback/popover/popover.js

@@ -34,7 +34,7 @@ const B = (o) => /* @__PURE__ */ e(
       "aria-label": s ?? v("aria.popover"),
       "data-component": "popover-content",
       className: n(
-        "z-[100] min-w-[240px] rounded-xl border bg-canvas-overlay p-3 text-canvas-overlay-foreground shadow-md outline-none overflow-hidden 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 origin-[--radix-popover-content-transform-origin] pointer-events-auto motion-reduce:animate-none motion-reduce:transition-none",
+        "z-50 min-w-[240px] rounded-xl border bg-canvas-overlay p-3 text-canvas-overlay-foreground shadow-md outline-none overflow-hidden 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 origin-[--radix-popover-content-transform-origin] pointer-events-auto motion-reduce:animate-none motion-reduce:transition-none",
         o
       ),
       ...r

package/dist/components/feedback/sheet/sheet.js

@@ -153,7 +153,7 @@ const G = S("sheet", {
   "description",
   "SheetDescription",
   t.Description,
-  "text-sm text-muted-foreground"
+  "text-sm text-content-secondary"
 );
 export {
   V as Sheet,