impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/drawer.js

@@ -1,52 +1,52 @@
 import { jsx as a, jsxs as n } from "react/jsx-runtime";
 import * as i from "react";
-import { Drawer as t } from "vaul";
+import { Drawer as r } from "vaul";
 import { X as f } from "lucide-react";
 import { cn as s } from "../../lib/utils.js";
-import { Tooltip as g, TooltipTrigger as w, TooltipContent as u } from "./tooltip.js";
+import { Tooltip as w, TooltipTrigger as g, TooltipContent as u } from "./tooltip.js";
 import { useImpactNovaI18n as N } from "../../i18n/ImpactNovaI18nContext.js";
 const x = ({
   shouldScaleBackground: e = !0,
-  ...r
+  ...t
 }) => /* @__PURE__ */ a(
-  t.Root,
+  r.Root,
   {
     shouldScaleBackground: e,
-    ...r
+    ...t
   }
 );
 x.displayName = "Drawer";
-const F = t.Trigger, D = t.Portal, H = t.Close, c = i.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ a(
-  t.Overlay,
+const H = r.Trigger, D = r.Portal, I = r.Close, c = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
+  r.Overlay,
   {
     ref: o,
-    className: s("fixed inset-0 z-50 bg-black/80", e),
-    ...r
+    className: s("fixed inset-0 z-50 bg-scrim-deep", e),
+    ...t
   }
 ));
-c.displayName = t.Overlay.displayName;
-const y = i.forwardRef(({ className: e, children: r, hideClose: o, ...d }, m) => {
+c.displayName = r.Overlay.displayName;
+const y = i.forwardRef(({ className: e, children: t, hideClose: o, ...d }, m) => {
   const { t: p } = N(), l = p("aria.close");
   return /* @__PURE__ */ n(D, { children: [
     /* @__PURE__ */ a(c, {}),
     /* @__PURE__ */ n(
-      t.Content,
+      r.Content,
       {
         ref: m,
         "data-component": "drawer-content",
         className: s(
-          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-canvas",
           e
         ),
         ...d,
         children: [
           /* @__PURE__ */ a("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
-          r,
-          !o && /* @__PURE__ */ n(g, { children: [
-            /* @__PURE__ */ a(w, { asChild: !0, children: /* @__PURE__ */ n(
-              t.Close,
+          t,
+          !o && /* @__PURE__ */ n(w, { children: [
+            /* @__PURE__ */ a(g, { asChild: !0, children: /* @__PURE__ */ n(
+              r.Close,
               {
-                className: "absolute right-4 top-4 rounded-sm opacity-50 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+                className: "absolute right-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",
                 "aria-label": l,
                 children: [
                   /* @__PURE__ */ a(f, { className: "h-4 w-4" }),
@@ -62,30 +62,30 @@ const y = i.forwardRef(({ className: e, children: r, hideClose: o, ...d }, m) =>
   ] });
 });
 y.displayName = "DrawerContent";
-const b = ({
+const h = ({
   className: e,
-  ...r
+  ...t
 }) => /* @__PURE__ */ a(
   "div",
   {
     className: s("grid gap-1.5 p-4 text-center sm:text-left", e),
-    ...r
+    ...t
   }
 );
-b.displayName = "DrawerHeader";
-const h = ({
+h.displayName = "DrawerHeader";
+const v = ({
   className: e,
-  ...r
+  ...t
 }) => /* @__PURE__ */ a(
   "div",
   {
     className: s("mt-auto flex flex-col gap-2 p-4", e),
-    ...r
+    ...t
   }
 );
-h.displayName = "DrawerFooter";
-const v = i.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ a(
-  t.Title,
+v.displayName = "DrawerFooter";
+const b = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
+  r.Title,
   {
     ref: o,
     "data-component": "drawer-title",
@@ -93,29 +93,29 @@ const v = i.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ a(
       "text-lg font-semibold leading-none tracking-tight",
       e
     ),
-    ...r
+    ...t
   }
 ));
-v.displayName = t.Title.displayName;
-const T = i.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ a(
-  t.Description,
+b.displayName = r.Title.displayName;
+const T = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
+  r.Description,
   {
     ref: o,
     "data-component": "drawer-description",
-    className: s("text-sm text-muted-foreground", e),
-    ...r
+    className: s("text-sm text-content-muted", e),
+    ...t
   }
 ));
-T.displayName = t.Description.displayName;
+T.displayName = r.Description.displayName;
 export {
   x as Drawer,
-  H as DrawerClose,
+  I as DrawerClose,
   y as DrawerContent,
   T as DrawerDescription,
-  h as DrawerFooter,
-  b as DrawerHeader,
+  v as DrawerFooter,
+  h as DrawerHeader,
   c as DrawerOverlay,
   D as DrawerPortal,
-  v as DrawerTitle,
-  F as DrawerTrigger
+  b as DrawerTitle,
+  H as DrawerTrigger
 };

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

@@ -2,176 +2,176 @@ import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import * as l from "react";
 import * as e from "@radix-ui/react-dropdown-menu";
 import { Check as f, ChevronRight as u } from "lucide-react";
-import { cn as s } from "../../lib/utils.js";
-const C = e.Root, I = e.Trigger, _ = e.Group, j = e.Portal, F = e.Sub, x = l.forwardRef(({ className: a, ...o }, n) => /* @__PURE__ */ t(
+import { cn as r } from "../../lib/utils.js";
+const C = e.Root, I = e.Trigger, j = e.Group, G = e.Portal, P = e.Sub, x = l.forwardRef(({ className: a, ...n }, o) => /* @__PURE__ */ t(
   e.RadioGroup,
   {
-    ref: n,
-    className: s("flex flex-col gap-0.5", a),
-    ...o
+    ref: o,
+    className: r("flex flex-col gap-0.5", a),
+    ...n
   }
 ));
 x.displayName = e.RadioGroup.displayName;
-const g = l.forwardRef(({ className: a, inset: o, icon: n, children: r, ...d }, i) => /* @__PURE__ */ c(
+const g = l.forwardRef(({ className: a, inset: n, icon: o, children: s, ...d }, i) => /* @__PURE__ */ c(
   e.SubTrigger,
   {
     ref: i,
-    className: s(
+    className: r(
       "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",
-      o && "pl-4",
+      n && "pl-4",
       a
     ),
     ...d,
     children: [
-      n && /* @__PURE__ */ t("span", { className: "flex-shrink-0 text-text-secondary [&>svg]:size-4", children: n }),
-      r,
-      /* @__PURE__ */ t(u, { className: "ml-auto text-icon-gray" })
+      o && /* @__PURE__ */ t("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: o }),
+      s,
+      /* @__PURE__ */ t(u, { className: "ml-auto text-content-icon" })
     ]
   }
 ));
 g.displayName = e.SubTrigger.displayName;
-const h = l.forwardRef(({ className: a, ...o }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(
+const h = l.forwardRef(({ className: a, ...n }, o) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(
   e.SubContent,
   {
-    ref: n,
-    className: s(
-      "z-50 min-w-[8rem] overflow-hidden rounded-lg bg-popover p-2 text-popover-foreground shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)] 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]",
+    ref: o,
+    className: r(
+      "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]",
       a
     ),
-    ...o
+    ...n
   }
 ) }));
 h.displayName = e.SubContent.displayName;
-const N = l.forwardRef(({ className: a, sideOffset: o = 4, portalled: n = !0, ...r }, d) => {
+const N = l.forwardRef(({ className: a, sideOffset: n = 4, portalled: o = !0, ...s }, d) => {
   const i = /* @__PURE__ */ t(
     e.Content,
     {
       ref: d,
-      sideOffset: o,
+      sideOffset: n,
       "data-component": "dropdown-menu-content",
-      className: s(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[12rem] overflow-y-auto overflow-x-hidden rounded-lg bg-popover p-2 text-popover-foreground shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)] flex flex-col gap-0.5",
+      className: r(
+        "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]",
         a
       ),
-      ...r
+      ...s
     }
   );
-  return n ? /* @__PURE__ */ t(e.Portal, { children: i }) : i;
+  return o ? /* @__PURE__ */ t(e.Portal, { children: i }) : i;
 });
 N.displayName = e.Content.displayName;
-const b = l.forwardRef(({ className: a, inset: o, description: n, icon: r, children: d, ...i }, p) => /* @__PURE__ */ c(
+const b = l.forwardRef(({ className: a, inset: n, description: o, icon: s, children: d, ...i }, m) => /* @__PURE__ */ c(
   e.Item,
   {
-    ref: p,
+    ref: m,
     "data-component": "dropdown-menu-item",
-    className: s(
-      "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-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      o && "pl-4",
+    className: r(
+      "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",
+      n && "pl-4",
       a
     ),
     ...i,
     children: [
-      r && /* @__PURE__ */ t("span", { className: "flex-shrink-0 [&>svg]:size-4", children: r }),
+      s && /* @__PURE__ */ t("span", { className: "flex-shrink-0 [&>svg]:size-4", children: s }),
       /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 justify-center", children: [
         /* @__PURE__ */ t("span", { className: "font-medium leading-none", children: d }),
-        n && /* @__PURE__ */ t("span", { className: "text-[10px] leading-tight text-text-secondary line-clamp-1", children: n })
+        o && /* @__PURE__ */ t("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: o })
       ] })
     ]
   }
 ));
 b.displayName = e.Item.displayName;
-const w = l.forwardRef(({ className: a, children: o, checked: n, description: r, icon: d, ...i }, p) => /* @__PURE__ */ c(
+const w = l.forwardRef(({ className: a, children: n, checked: o, description: s, icon: d, ...i }, m) => /* @__PURE__ */ c(
   e.CheckboxItem,
   {
-    ref: p,
-    className: s(
-      "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-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    ref: m,
+    className: r(
+      "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",
       a
     ),
-    checked: n,
-    onSelect: (m) => m.preventDefault(),
+    checked: o,
+    onSelect: (p) => p.preventDefault(),
     ...i,
     children: [
-      /* @__PURE__ */ t("span", { className: "absolute left-3 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t("div", { className: s(
-        "flex h-4 w-4 items-center justify-center rounded-[4px] border border-border transition-colors",
-        n && "bg-primary border-primary text-white"
+      /* @__PURE__ */ t("span", { className: "absolute left-3 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t("div", { className: r(
+        "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__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(f, { className: "h-3 w-3", strokeWidth: 3 }) }) }) }),
       /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-        d && /* @__PURE__ */ t("span", { className: "flex-shrink-0 text-text-secondary [&>svg]:size-4", children: d }),
+        d && /* @__PURE__ */ t("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__ */ t("span", { className: "font-medium leading-none", children: o }),
-          r && /* @__PURE__ */ t("span", { className: "text-[10px] leading-tight text-text-secondary line-clamp-1", children: r })
+          /* @__PURE__ */ t("span", { className: "font-medium leading-none", children: n }),
+          s && /* @__PURE__ */ t("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: s })
         ] })
       ] })
     ]
   }
 ));
 w.displayName = e.CheckboxItem.displayName;
-const y = l.forwardRef(({ className: a, children: o, description: n, icon: r, ...d }, i) => /* @__PURE__ */ t(
+const v = l.forwardRef(({ className: a, children: n, description: o, icon: s, ...d }, i) => /* @__PURE__ */ t(
   e.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-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:bg-[#F0F4FF]",
+    className: r(
+      "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",
       a
     ),
-    onSelect: (p) => p.preventDefault(),
+    onSelect: (m) => m.preventDefault(),
     ...d,
     children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-      r && /* @__PURE__ */ t("span", { className: "flex-shrink-0 text-text-secondary [&>svg]:size-4", children: r }),
+      s && /* @__PURE__ */ t("span", { className: "flex-shrink-0 text-content-secondary [&>svg]:size-4", children: s }),
       /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5 justify-center", children: [
-        /* @__PURE__ */ t("span", { className: "font-medium leading-none", children: o }),
-        n && /* @__PURE__ */ t("span", { className: "text-[10px] leading-tight text-text-secondary line-clamp-1", children: n })
+        /* @__PURE__ */ t("span", { className: "font-medium leading-none", children: n }),
+        o && /* @__PURE__ */ t("span", { className: "text-[10px] leading-tight text-content-secondary line-clamp-1", children: o })
       ] })
     ] })
   }
 ));
-y.displayName = e.RadioItem.displayName;
-const v = l.forwardRef(({ className: a, inset: o, ...n }, r) => /* @__PURE__ */ t(
+v.displayName = e.RadioItem.displayName;
+const y = l.forwardRef(({ className: a, inset: n, ...o }, s) => /* @__PURE__ */ t(
   e.Label,
   {
-    ref: r,
-    className: s(
-      "px-3 py-2 text-xs font-bold tracking-wider text-icon-gray",
-      o && "pl-4",
+    ref: s,
+    className: r(
+      "px-3 py-2 text-xs font-bold tracking-wider text-content-icon",
+      n && "pl-4",
       a
     ),
-    ...n
+    ...o
   }
 ));
-v.displayName = e.Label.displayName;
-const D = l.forwardRef(({ className: a, ...o }, n) => /* @__PURE__ */ t(
+y.displayName = e.Label.displayName;
+const D = l.forwardRef(({ className: a, ...n }, o) => /* @__PURE__ */ t(
   e.Separator,
   {
-    ref: n,
-    className: s("-mx-2 my-1 h-px bg-border", a),
-    ...o
+    ref: o,
+    className: r("-mx-2 my-1 h-px bg-border", a),
+    ...n
   }
 ));
 D.displayName = e.Separator.displayName;
 const M = ({
   className: a,
-  ...o
+  ...n
 }) => /* @__PURE__ */ t(
   "div",
   {
-    className: s(
-      "sticky bottom-0 z-10 -mx-2 -mb-2 mt-1 flex items-center justify-end gap-2 border-t bg-white p-2 shrink-0 rounded-b-xl",
+    className: r(
+      "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",
       a
     ),
-    ...o
+    ...n
   }
 );
 M.displayName = "DropdownMenuFooter";
 const R = ({
   className: a,
-  ...o
+  ...n
 }) => /* @__PURE__ */ t(
   "span",
   {
-    className: s("ml-auto text-xs tracking-widest opacity-60", a),
-    ...o
+    className: r("ml-auto text-xs tracking-widest opacity-60", a),
+    ...n
   }
 );
 R.displayName = "DropdownMenuShortcut";
@@ -180,15 +180,15 @@ export {
   w as DropdownMenuCheckboxItem,
   N as DropdownMenuContent,
   M as DropdownMenuFooter,
-  _ as DropdownMenuGroup,
+  j as DropdownMenuGroup,
   b as DropdownMenuItem,
-  v as DropdownMenuLabel,
-  j as DropdownMenuPortal,
+  y as DropdownMenuLabel,
+  G as DropdownMenuPortal,
   x as DropdownMenuRadioGroup,
-  y as DropdownMenuRadioItem,
+  v as DropdownMenuRadioItem,
   D as DropdownMenuSeparator,
   R as DropdownMenuShortcut,
-  F as DropdownMenuSub,
+  P as DropdownMenuSub,
   h as DropdownMenuSubContent,
   g as DropdownMenuSubTrigger,
   I as DropdownMenuTrigger

package/dist/components/ui/empty-container.js

@@ -10,104 +10,108 @@ const c = [
   { Component: N, width: 250, height: 180 },
   { Component: S, width: 225, height: 150 },
   { Component: I, width: 225, height: 150 }
-], R = m.forwardRef(
+], v = m.forwardRef(
   ({ className: o, children: t, asChild: e = !1, ...n }, a) => /* @__PURE__ */ r(
     e ? p : "div",
     {
       ref: a,
       className: s(
-        "flex flex-col items-center justify-center py-10 px-5 text-center animate-in fade-in zoom-in duration-300 border border-border-subtle rounded-xl bg-card w-[884px] min-w-[884px] h-auto",
+        "flex flex-col items-center justify-center py-16 px-5 text-center animate-in fade-in zoom-in duration-300 border border-stroke-subtle rounded-xl bg-canvas-elevated w-[884px] min-w-[884px] h-auto",
         o
       ),
       "data-component": "empty-container",
       ...n,
-      children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center max-w-[650px] gap-4", children: t })
+      children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center max-w-[650px]", children: t })
     }
   )
 );
-R.displayName = "EmptyContainer";
-const v = m.forwardRef(
-  ({ className: o, children: t, width: e, height: n, asChild: a = !1, ...i }, f) => {
-    const [l, M] = m.useState(() => t ? null : Math.floor(Math.random() * c.length)), h = () => {
-      if (t) return t;
-      if (l !== null) {
-        const { Component: C, width: g, height: x } = c[l];
-        return /* @__PURE__ */ r(
-          C,
-          {
-            size: "100%",
-            style: {
-              width: e || g,
-              height: n || x
-            }
+v.displayName = "EmptyContainer";
+const R = m.forwardRef(({ className: o, children: t, width: e, height: n, asChild: a = !1, ...i }, f) => {
+  const [l, M] = m.useState(() => t ? null : Math.floor(Math.random() * c.length)), h = () => {
+    if (t) return t;
+    if (l !== null) {
+      const {
+        Component: C,
+        width: g,
+        height: x
+      } = c[l];
+      return /* @__PURE__ */ r(
+        C,
+        {
+          size: "100%",
+          style: {
+            width: e || g,
+            height: n || x
           }
-        );
-      }
-      return null;
-    }, d = l !== null ? c[l] : null, u = e || (t ? "auto" : d?.width || 225), y = n || (t ? "auto" : d?.height || 150);
-    return /* @__PURE__ */ r(
-      a ? p : "div",
-      {
-        ref: f,
-        className: s(
-          "mb-4 flex items-center justify-center relative",
-          "after:absolute after:inset-0 after:bg-primary/5 after:blur-3xl after:-z-10 after:rounded-full",
-          o
-        ),
-        style: {
-          width: u,
-          height: y,
-          ...i.style
-        },
-        "data-component": "empty-container-image",
-        ...i,
-        children: h()
-      }
-    );
-  }
-);
-v.displayName = "EmptyContainerImage";
-const T = m.forwardRef(
-  ({ className: o, children: t, asChild: e = !1, ...n }, a) => /* @__PURE__ */ r(
-    e ? p : "h3",
+        }
+      );
+    }
+    return null;
+  }, d = l !== null ? c[l] : null, u = e || (t ? "auto" : d?.width || 225), y = n || (t ? "auto" : d?.height || 150);
+  return /* @__PURE__ */ r(
+    a ? p : "div",
     {
-      ref: a,
-      className: s("text-xl font-bold tracking-tight text-foreground", o),
-      "data-component": "empty-container-title",
-      ...n,
-      children: t
+      ref: f,
+      className: s(
+        "mb-4 flex items-center justify-center relative",
+        "after:absolute after:inset-0 after:bg-brand/5 after:blur-3xl after:-z-10 after:rounded-full",
+        o
+      ),
+      style: {
+        width: u,
+        height: y,
+        ...i.style
+      },
+      "data-component": "empty-container-image",
+      ...i,
+      children: h()
     }
-  )
-);
+  );
+});
+R.displayName = "EmptyContainerImage";
+const T = m.forwardRef(({ className: o, children: t, asChild: e = !1, ...n }, a) => /* @__PURE__ */ r(
+  e ? p : "h3",
+  {
+    ref: a,
+    className: s("text-xl font-bold tracking-tight text-content", o),
+    "data-component": "empty-container-title",
+    ...n,
+    children: t
+  }
+));
 T.displayName = "EmptyContainerTitle";
 const j = m.forwardRef(({ className: o, children: t, asChild: e = !1, ...n }, a) => /* @__PURE__ */ r(
   e ? p : "p",
   {
     ref: a,
-    className: s("text-base font-medium text-secondary-foreground leading-relaxed", o),
+    className: s(
+      "text-base leading-5 font-medium text-secondary-foreground",
+      o
+    ),
     "data-component": "empty-container-description",
     ...n,
     children: t
   }
 ));
 j.displayName = "EmptyContainerDescription";
-const A = m.forwardRef(
-  ({ className: o, children: t, asChild: e = !1, ...n }, a) => /* @__PURE__ */ r(
-    e ? p : "div",
-    {
-      ref: a,
-      className: s("mt-6 flex flex-wrap items-center justify-center gap-3", o),
-      "data-component": "empty-container-action",
-      ...n,
-      children: t
-    }
-  )
-);
+const A = m.forwardRef(({ className: o, children: t, asChild: e = !1, ...n }, a) => /* @__PURE__ */ r(
+  e ? p : "div",
+  {
+    ref: a,
+    className: s(
+      "mt-6 flex flex-wrap items-center justify-center gap-3",
+      o
+    ),
+    "data-component": "empty-container-action",
+    ...n,
+    children: t
+  }
+));
 A.displayName = "EmptyContainerAction";
 export {
-  R as EmptyContainer,
+  v as EmptyContainer,
   A as EmptyContainerAction,
   j as EmptyContainerDescription,
-  v as EmptyContainerImage,
+  R as EmptyContainerImage,
   T as EmptyContainerTitle
 };