impact-nova 2.1.0-alpha.7 → 2.1.0-alpha.8

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

@@ -1,99 +1,86 @@
 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";
-import { Tooltip as R, TooltipTrigger as I, TooltipContent as j } from "../../feedback/tooltip/tooltip.js";
-import { Info as L } from "impact-nova-icons";
-import { Chart as P } from "../chart/chart.js";
-import { useStatisticsChartData as W, useStatisticsChartLabel as G, useStatisticsChartSeries as $, useStatisticsChartOptions as B } from "./statistics-card.hooks.js";
-import { useStatisticsCardContext as y, StatisticsCardContext as O } from "./statistics-card-context.js";
-const H = n.forwardRef(
-  ({ className: s, items: e, onItemToggle: a, chartSize: t = 110, config: o, mapItem: l, children: c, ...m }, r) => {
-    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", 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]
+import * as S from "react";
+import { createComponent as m } from "../../../lib/primitives/create-component.js";
+import { createCompoundPart as v } from "../../../lib/primitives/create-compound.js";
+import { cn as p } from "../../../lib/utils.js";
+import { Checkbox as P } from "../../forms/checkbox/checkbox.js";
+import { Tooltip as j, TooltipTrigger as L, TooltipContent as W } from "../../feedback/tooltip/tooltip.js";
+import { Info as G } from "impact-nova-icons";
+import { Chart as B } from "../chart/chart.js";
+import { useStatisticsChartData as $, useStatisticsChartLabel as O, useStatisticsChartSeries as R, useStatisticsChartOptions as H } from "./statistics-card.hooks.js";
+import { useStatisticsCardContext as y, StatisticsCardContext as M } from "./statistics-card-context.js";
+const X = m(
+  "StatisticsCardRoot",
+  ({ className: r, items: a, onItemToggle: s, chartSize: t = 110, config: o, mapItem: n, children: c, ...l }, e) => {
+    const d = S.useMemo(
+      () => n ? a.map((k, I) => n(k, I)) : a,
+      [a, n]
+    ), f = "var(--color-surface-subtle)", 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 || f, w = o?.spacing?.rootPadding || x, b = o?.spacing?.rootGap || h, N = o?.spacing?.rootWidth || g, T = S.useMemo(
+      () => ({ items: d, onItemToggle: s, chartSize: t, config: o }),
+      [d, s, t, o]
     );
-    return /* @__PURE__ */ i(O.Provider, { value: v, children: /* @__PURE__ */ i(
+    return /* @__PURE__ */ i(M.Provider, { value: T, children: /* @__PURE__ */ i(
       "div",
       {
-        ref: r,
+        ref: e,
         role: "region",
         "aria-roledescription": "statistics card",
         "data-component": "statistics-card",
-        className: d(
+        className: p(
           "flex flex-row flex-wrap md:flex-nowrap items-center justify-between rounded-lg box-border min-w-0 overflow-hidden bg-[var(--statistics-card-bg)]",
-          S,
-          b,
+          N,
           w,
-          s
+          b,
+          r
         ),
         style: { "--statistics-card-bg": C },
-        ...m,
+        ...l,
         children: c
       }
     ) });
   }
-);
-H.displayName = "StatisticsCardRoot";
-const M = n.forwardRef(({ className: s, children: e, ...a }, t) => /* @__PURE__ */ i(
-  "div",
-  {
-    ref: t,
-    className: d("flex flex-col items-start gap-4 flex-shrink-0 min-w-0", s),
-    ...a,
-    children: e
-  }
-));
-M.displayName = "StatisticsCardHeader";
-const D = n.forwardRef(
-  ({ className: s, children: e, ...a }, t) => /* @__PURE__ */ i(
-    "div",
-    {
-      ref: t,
-      className: d("flex flex-row items-center gap-1.5 min-w-0 max-w-[150px]", s),
-      ...a,
-      children: e
-    }
-  )
-);
-D.displayName = "StatisticsCardTitle";
-const V = n.forwardRef(
-  ({ icon: s, className: e, ...a }, t) => /* @__PURE__ */ i(
+), Y = v("statistics-card", {
+  part: "header",
+  displayName: "StatisticsCardHeader",
+  className: "flex flex-col items-start gap-4 flex-shrink-0 min-w-0"
+}), Z = v("statistics-card", {
+  part: "title",
+  displayName: "StatisticsCardTitle",
+  className: "flex flex-row items-center gap-1.5 min-w-0 max-w-[150px]"
+}), _ = m(
+  "StatisticsCardTitleIcon",
+  ({ icon: r, className: a, ...s }, t) => /* @__PURE__ */ i(
     "div",
     {
       ref: t,
-      className: d("flex items-center justify-center w-6 h-6 p-1.5 bg-accent rounded-full shrink-0", e),
-      ...a,
-      children: s
+      "data-component": "statistics-card-title-icon",
+      className: p("flex items-center justify-center w-6 h-6 p-1.5 bg-accent rounded-full shrink-0", a),
+      ...s,
+      children: r
     }
   )
-);
-V.displayName = "StatisticsCardTitleIcon";
-const q = n.forwardRef(
-  ({ className: s, children: e, ...a }, t) => /* @__PURE__ */ i(
+), z = m(
+  "StatisticsCardTitleText",
+  ({ className: r, children: a, ...s }, t) => /* @__PURE__ */ i(
     "span",
     {
       ref: t,
-      className: d("font-semibold text-base leading-[1.5em] text-secondary-foreground truncate line-clamp-1", s),
-      ...a,
-      children: e
+      "data-component": "statistics-card-title-text",
+      className: p("font-semibold text-base leading-[1.5em] text-secondary-foreground truncate line-clamp-1", r),
+      ...s,
+      children: a
     }
   )
-);
-q.displayName = "StatisticsCardTitleText";
-const A = n.forwardRef(
-  ({ 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 })
+), tt = m(
+  "StatisticsCardTitleTooltip",
+  ({ content: r, icon: a, ...s }, t) => /* @__PURE__ */ i("div", { ref: t, "data-component": "statistics-card-title-tooltip", ...s, children: /* @__PURE__ */ u(j, { children: [
+    /* @__PURE__ */ i(L, { asChild: !0, children: a || /* @__PURE__ */ i(G, { size: "sm", className: "text-secondary-foreground cursor-pointer shrink-0" }) }),
+    /* @__PURE__ */ i(W, { variant: "tertiary", side: "top", children: r })
   ] }) })
-);
-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), g = B(c, m, a), C = {
+), et = m(
+  "StatisticsCardChart",
+  ({ className: r, centerLabel: a, chartConfig: s, chartSize: t = 104, ...o }, n) => {
+    const { items: c, onItemToggle: l } = y(), { total: e, checkedTotal: d, hasChecked: f } = $(c), x = O(a, f, d, e), h = R(c, f), g = H(c, l, s), C = {
       ...g,
       chart: {
         ...g.chart,
@@ -113,13 +100,14 @@ const E = n.forwardRef(
     return /* @__PURE__ */ u(
       "div",
       {
-        ref: l,
-        className: d("relative flex items-center justify-center flex-shrink-0", s),
+        ref: n,
+        "data-component": "statistics-card-chart",
+        className: p("relative flex items-center justify-center flex-shrink-0", r),
         style: { width: `${t}px`, height: `${t}px` },
         ...o,
         children: [
           /* @__PURE__ */ i(
-            P,
+            B,
             {
               options: C,
               height: t,
@@ -132,59 +120,61 @@ const E = n.forwardRef(
       }
     );
   }
-);
-E.displayName = "StatisticsCardChart";
-const F = n.forwardRef(({ className: s, children: e, ...a }, t) => {
-  const { config: o } = y(), l = "w-full md:w-auto md:min-w-[190px] md:max-w-[208px]", c = "gap-2", m = o?.spacing?.legendWidth || l, r = o?.spacing?.itemGap || c;
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      ref: t,
-      role: "list",
-      className: d(
-        "flex flex-col justify-center min-w-0 flex-1 md:flex-none",
-        m,
-        r,
-        s
-      ),
-      ...a,
-      children: e
-    }
-  );
-});
-F.displayName = "StatisticsCardLegend";
-const J = n.forwardRef(
-  ({ className: s, index: e, item: a, ...t }, o) => {
-    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)", g = m?.colors?.background || p, C = m?.spacing?.itemPadding || x, b = m?.colors?.text || h;
+), at = m(
+  "StatisticsCardLegend",
+  ({ className: r, children: a, ...s }, t) => {
+    const { config: o } = y(), n = "w-full md:w-auto md:min-w-[190px] md:max-w-[208px]", c = "gap-2", l = o?.spacing?.legendWidth || n, e = o?.spacing?.itemGap || c;
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: t,
+        role: "list",
+        "data-component": "statistics-card-legend",
+        className: p(
+          "flex flex-col justify-center min-w-0 flex-1 md:flex-none",
+          l,
+          e,
+          r
+        ),
+        ...s,
+        children: a
+      }
+    );
+  }
+), st = m(
+  "StatisticsCardLegendItem",
+  ({ className: r, index: a, item: s, ...t }, o) => {
+    const { items: n, onItemToggle: c, config: l } = y();
+    let e = s, d = -1;
+    if (!e && a !== void 0 ? (e = n[a], d = a) : e && (d = n.findIndex((b) => b === e)), !e || d === -1) return null;
+    const f = "bg-canvas-elevated", x = "px-3 py-1.5", h = "var(--color-foreground)", g = l?.colors?.background || f, C = l?.spacing?.itemPadding || x, w = l?.colors?.text || h;
     return /* @__PURE__ */ u(
       "div",
       {
         ref: o,
         role: "listitem",
-        "aria-label": `${r.label}: ${r.value}`,
-        className: d(
-          "flex flex-row items-center gap-2 rounded-md border-l-2 transition-all",
+        "aria-label": `${e.label}: ${e.value}`,
+        "data-component": "statistics-card-legend-item",
+        className: p(
+          "flex flex-row items-center gap-2 rounded-md border-l-2 transition-all shadow-elevation-floating",
+          e.checked && "shadow-none ring-[3px] ring-[var(--item-color)]",
           g,
           C,
-          s
+          r
         ),
         style: {
-          borderLeftColor: r.borderColor,
-          boxShadow: r.checked ? `0 0 0 3px ${r.borderColor}` : "0px 0px 4px 0px rgba(0,0,0,0.12)",
-          "--item-color": r.borderColor
+          borderLeftColor: e.borderColor,
+          "--item-color": e.borderColor
         },
         ...t,
         children: [
           /* @__PURE__ */ u("div", { className: "flex flex-row items-center gap-2 flex-1 min-w-0", children: [
             /* @__PURE__ */ i(
-              k,
+              P,
               {
-                checked: r.checked ?? !1,
-                onCheckedChange: (w) => c?.(f, w === !0),
-                "aria-label": `Select ${r.label}`,
+                checked: e.checked ?? !1,
+                onCheckedChange: (b) => c?.(d, b === !0),
+                "aria-label": `Select ${e.label}`,
                 className: "shrink-0"
               }
             ),
@@ -192,8 +182,8 @@ const J = n.forwardRef(
               "span",
               {
                 className: "flex-1 font-medium text-xs leading-[1.25em] truncate text-[var(--item-text)]",
-                style: { "--item-text": b },
-                children: r.label
+                style: { "--item-text": w },
+                children: e.label
               }
             )
           ] }),
@@ -201,33 +191,25 @@ const J = n.forwardRef(
             "span",
             {
               className: "shrink-0 font-semibold text-sm leading-[1.5em] text-right min-w-[27px] text-foreground",
-              children: r.value
+              children: e.value
             }
           )
         ]
       }
     );
   }
-);
-J.displayName = "StatisticsCardLegendItem";
-const K = n.forwardRef(
-  ({ className: s, children: e, ...a }, t) => /* @__PURE__ */ i(
+), it = v("statistics-card", {
+  part: "summary",
+  displayName: "StatisticsCardSummary",
+  className: "flex flex-wrap items-center gap-3 self-center text-[11px] font-medium text-secondary-foreground"
+}), rt = m(
+  "StatisticsCardSummaryItem",
+  ({ className: r, label: a, count: s, color: t = "var(--color-secondary-foreground)", ...o }, n) => /* @__PURE__ */ u(
     "div",
     {
-      ref: t,
-      className: d("flex flex-wrap items-center gap-3 self-center text-[11px] font-medium text-secondary-foreground", s),
-      ...a,
-      children: e
-    }
-  )
-);
-K.displayName = "StatisticsCardSummary";
-const Q = n.forwardRef(
-  ({ className: s, label: e, count: a, color: t = "var(--color-secondary-foreground)", ...o }, l) => /* @__PURE__ */ u(
-    "div",
-    {
-      ref: l,
-      className: d("flex items-center gap-1", s),
+      ref: n,
+      "data-component": "statistics-card-summary-item",
+      className: p("flex items-center gap-1", r),
       style: { "--summary-color": t },
       ...o,
       children: [
@@ -238,25 +220,24 @@ const Q = n.forwardRef(
           }
         ),
         /* @__PURE__ */ u("span", { children: [
-          e,
+          a,
           ": ",
-          a
+          s
         ] })
       ]
     }
   )
 );
-Q.displayName = "StatisticsCardSummaryItem";
 export {
-  E as StatisticsCardChart,
-  M as StatisticsCardHeader,
-  F as StatisticsCardLegend,
-  J as StatisticsCardLegendItem,
-  H as StatisticsCardRoot,
-  K as StatisticsCardSummary,
-  Q as StatisticsCardSummaryItem,
-  D as StatisticsCardTitle,
-  V as StatisticsCardTitleIcon,
-  q as StatisticsCardTitleText,
-  A as StatisticsCardTitleTooltip
+  et as StatisticsCardChart,
+  Y as StatisticsCardHeader,
+  at as StatisticsCardLegend,
+  st as StatisticsCardLegendItem,
+  X as StatisticsCardRoot,
+  it as StatisticsCardSummary,
+  rt as StatisticsCardSummaryItem,
+  Z as StatisticsCardTitle,
+  _ as StatisticsCardTitleIcon,
+  z as StatisticsCardTitleText,
+  tt as StatisticsCardTitleTooltip
 };

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

@@ -4,24 +4,24 @@ 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 c } from "../../primitives/button/button.variants.js";
-const w = (a) => /* @__PURE__ */ l(t.Root, { "data-component": "alert-dialog", ...a }), b = n(
+const w = (e) => /* @__PURE__ */ l(t.Root, { "data-component": "alert-dialog", ...e }), b = n(
   "alert-dialog",
   "trigger",
   "AlertDialogTrigger",
   t.Trigger
-), f = t.Portal, m = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
+), f = t.Portal, m = i.forwardRef(({ className: e, ...a }, 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",
-      a
+      e
     ),
-    ...e,
+    ...a,
     ref: o
   }
 ));
 m.displayName = t.Overlay.displayName;
-const u = i.forwardRef(({ className: a, onOpenAutoFocus: e, ...o }, p) => /* @__PURE__ */ g(f, { children: [
+const u = i.forwardRef(({ className: e, onOpenAutoFocus: a, ...o }, p) => /* @__PURE__ */ g(f, { children: [
   /* @__PURE__ */ l(m, {}),
   /* @__PURE__ */ l(
     t.Content,
@@ -30,11 +30,11 @@ const u = i.forwardRef(({ className: a, onOpenAutoFocus: e, ...o }, p) => /* @__
       "aria-describedby": void 0,
       "data-component": "alert-dialog-content",
       onOpenAutoFocus: (s) => {
-        s.preventDefault(), e?.(s);
+        s.preventDefault(), a?.(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",
-        a
+        e
       ),
       ...o
     }
@@ -48,30 +48,30 @@ const C = d("alert-dialog", {
 }), R = d("alert-dialog", {
   part: "footer",
   displayName: "AlertDialogFooter",
-  className: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+  className: "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2"
 }), T = n(
   "alert-dialog",
   "title",
   "AlertDialogTitle",
   t.Title,
-  "text-lg font-semibold"
+  "text-lg font-semibold text-content"
 ), P = n(
   "alert-dialog",
   "description",
   "AlertDialogDescription",
   t.Description,
   "text-sm text-content-secondary"
-), A = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
+), A = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
   t.Action,
   {
     ref: o,
     "data-component": "alert-dialog-action",
-    className: r(c(), a),
-    ...e
+    className: r(c(), e),
+    ...a
   }
 ));
 A.displayName = t.Action.displayName;
-const D = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
+const D = i.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ l(
   t.Cancel,
   {
     ref: o,
@@ -79,9 +79,9 @@ const D = i.forwardRef(({ className: a, ...e }, o) => /* @__PURE__ */ l(
     className: r(
       c({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      a
+      e
     ),
-    ...e
+    ...a
   }
 ));
 D.displayName = t.Cancel.displayName;

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

@@ -68,15 +68,15 @@ N.displayName = t.Content.displayName;
 const B = s("dialog", {
   part: "header",
   displayName: "DialogHeader",
-  className: "relative flex flex-col justify-center text-center sm:text-start bg-canvas-tint p-4 pe-12 border-b"
+  className: "relative flex flex-col justify-center border-b bg-canvas-tint p-4 pe-12 text-center sm:text-start"
 }), F = s("dialog", {
   part: "body",
   displayName: "DialogBody",
-  className: "px-6 py-6 flex-1 overflow-y-auto min-h-0"
+  className: "min-h-0 flex-1 overflow-y-auto px-6 py-6"
 }), k = s("dialog", {
   part: "footer",
   displayName: "DialogFooter",
-  className: "flex flex-col-reverse sm:flex-row sm:justify-end sm:items-center sm:gap-2 px-4 py-[9px] bg-canvas-elevated"
+  className: "flex flex-col-reverse bg-canvas-elevated px-4 py-[9px] sm:flex-row sm:items-center sm:justify-end sm:gap-2"
 }), H = o(
   "dialog",
   "title",

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

@@ -1,12 +1,12 @@
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import * as c from "react";
+import * as l from "react";
 import { Drawer as e } from "vaul";
 import { Cross as g } from "impact-nova-icons";
-import { wrapRadixPart as n, createCompoundPart as l } from "../../../lib/primitives/create-compound.js";
+import { wrapRadixPart as s, createCompoundPart as c } 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 y } from "../tooltip/tooltip.js";
-const N = ({
+import { useImpactNovaI18n as u } from "../../../i18n/use-impact-nova-i18n.js";
+import { Tooltip as D, TooltipTrigger as b, TooltipContent as x } from "../tooltip/tooltip.js";
+const v = ({
   shouldScaleBackground: t = !0,
   ...a
 }) => /* @__PURE__ */ r(
@@ -17,29 +17,29 @@ const N = ({
     ...a
   }
 );
-N.displayName = "Drawer";
-const z = n(
+v.displayName = "Drawer";
+const j = s(
   "drawer",
   "trigger",
   "DrawerTrigger",
   e.Trigger
-), h = e.Portal, F = n(
+), y = e.Portal, z = s(
   "drawer",
   "close",
   "DrawerClose",
   e.Close
-), m = c.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ r(
+), m = l.forwardRef(({ className: t, ...a }, n) => /* @__PURE__ */ r(
   e.Overlay,
   {
-    ref: s,
+    ref: n,
     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: s, ...p }, w) => {
-  const { t: f } = D(), i = f("aria.close");
-  return /* @__PURE__ */ o(h, { children: [
+const N = l.forwardRef(({ className: t, children: a, hideClose: n, ...p }, w) => {
+  const { t: f } = u(), i = f("aria.close");
+  return /* @__PURE__ */ o(y, { children: [
     /* @__PURE__ */ r(m, {}),
     /* @__PURE__ */ o(
       e.Content,
@@ -47,15 +47,15 @@ const b = c.forwardRef(({ className: t, children: a, hideClose: s, ...p }, w) =>
         ref: w,
         "data-component": "drawer-content",
         className: d(
-          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-canvas",
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-stroke-subtle bg-canvas-elevated",
           t
         ),
         ...p,
         children: [
           /* @__PURE__ */ r("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
           a,
-          !s && /* @__PURE__ */ o(u, { children: [
-            /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ o(
+          !n && /* @__PURE__ */ o(D, { children: [
+            /* @__PURE__ */ r(b, { 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-icon",
@@ -66,29 +66,29 @@ const b = c.forwardRef(({ className: t, children: a, hideClose: s, ...p }, w) =>
                 ]
               }
             ) }),
-            /* @__PURE__ */ r(y, { variant: "tertiary", side: "top", children: i })
+            /* @__PURE__ */ r(x, { variant: "tertiary", side: "top", children: i })
           ] })
         ]
       }
     )
   ] });
 });
-b.displayName = "DrawerContent";
-const H = l("drawer", {
+N.displayName = "DrawerContent";
+const F = c("drawer", {
   part: "header",
   displayName: "DrawerHeader",
-  className: "grid gap-1.5 p-4 text-center sm:text-start"
-}), I = l("drawer", {
+  className: "grid gap-1.5 border-b border-stroke-subtle bg-canvas-elevated p-4 text-center sm:text-start"
+}), H = c("drawer", {
   part: "footer",
   displayName: "DrawerFooter",
-  className: "mt-auto flex flex-col gap-2 p-4"
-}), k = n(
+  className: "mt-auto flex flex-col gap-2 border-t border-stroke-subtle bg-canvas-elevated p-4"
+}), I = s(
   "drawer",
   "title",
   "DrawerTitle",
   e.Title,
   "text-lg font-semibold leading-none tracking-tight"
-), L = n(
+), L = s(
   "drawer",
   "description",
   "DrawerDescription",
@@ -96,14 +96,14 @@ const H = l("drawer", {
   "text-sm text-content-secondary"
 );
 export {
-  N as Drawer,
-  F as DrawerClose,
-  b as DrawerContent,
+  v as Drawer,
+  z as DrawerClose,
+  N as DrawerContent,
   L as DrawerDescription,
-  I as DrawerFooter,
-  H as DrawerHeader,
+  H as DrawerFooter,
+  F as DrawerHeader,
   m as DrawerOverlay,
-  h as DrawerPortal,
-  k as DrawerTitle,
-  z as DrawerTrigger
+  y as DrawerPortal,
+  I as DrawerTitle,
+  j as DrawerTrigger
 };