anicca-ui 1.0.0 → 1.1.0

package/dist/anicca-ui.es.js

@@ -1,287 +1,1900 @@
-import { jsx as n, jsxs as c, Fragment as O } from "react/jsx-runtime";
-import { useMemo as F, useState as S, useEffect as E, useCallback as k } from "react";
-const _ = {
-  primary: "--anicca-primary",
-  primaryFg: "--anicca-primary-fg",
-  primarySoft: "--anicca-primary-soft",
-  success: "--anicca-success",
-  successBg: "--anicca-success-bg",
-  danger: "--anicca-danger",
-  dangerBg: "--anicca-danger-bg",
-  warning: "--anicca-warning",
-  warningBg: "--anicca-warning-bg",
-  info: "--anicca-info",
-  infoBg: "--anicca-info-bg",
-  surface: "--anicca-surface",
-  surfaceMuted: "--anicca-surface-muted",
-  surfaceOverlay: "--anicca-surface-overlay",
-  surfaceDark: "--anicca-surface-dark",
-  surfaceDark2: "--anicca-surface-dark-2",
-  surfaceDarkFg: "--anicca-surface-dark-fg",
-  surfaceDarkFgMuted: "--anicca-surface-dark-fg-muted",
-  border: "--anicca-border",
-  borderStrong: "--anicca-border-strong",
-  borderDark: "--anicca-border-dark",
-  text: "--anicca-text",
-  textMuted: "--anicca-text-muted",
-  textSubtle: "--anicca-text-subtle",
-  radius: "--anicca-radius",
-  radiusSm: "--anicca-radius-sm",
-  radiusLg: "--anicca-radius-lg",
-  shadowSm: "--anicca-shadow-sm",
-  shadowMd: "--anicca-shadow-md",
-  shadowLg: "--anicca-shadow-lg"
+import { jsx as r, jsxs as u, Fragment as Y } from "react/jsx-runtime";
+import U, { useMemo as Q, forwardRef as W, useId as O, useRef as D, useEffect as M, useContext as ne, createContext as ae, useState as S, useCallback as C, isValidElement as oe, cloneElement as ie } from "react";
+import { createPortal as z } from "react-dom";
+const ge = {
+  primary: "--primary",
+  "on-primary": "--on-primary",
+  "primary-container": "--primary-container",
+  secondary: "--secondary",
+  "secondary-container": "--secondary-container",
+  "on-secondary-container": "--on-secondary-container",
+  tertiary: "--tertiary",
+  error: "--error",
+  surface: "--surface",
+  "surface-container-lowest": "--surface-container-lowest",
+  "surface-container-low": "--surface-container-low",
+  "surface-container": "--surface-container",
+  "surface-container-high": "--surface-container-high",
+  "surface-container-highest": "--surface-container-highest",
+  "on-surface": "--on-surface",
+  "on-surface-variant": "--on-surface-variant",
+  outline: "--outline",
+  "outline-variant": "--outline-variant",
+  background: "--background",
+  "sidebar-bg": "--sidebar-bg",
+  violet: "--violet",
+  amber: "--amber"
 };
-function H(t) {
+function ve(t) {
   if (!t) return {};
   const e = {};
-  for (const r of Object.keys(t)) {
-    const a = t[r];
-    a !== void 0 && (e[_[r]] = a);
+  for (const n of Object.keys(t)) {
+    const a = t[n];
+    a !== void 0 && (e[ge[n]] = a);
   }
   return e;
 }
-function pe({
+function Or({
   theme: t,
   as: e = "div",
-  className: r,
+  className: n,
   children: a
 }) {
-  const s = F(() => H(t), [t]);
-  return /* @__PURE__ */ n(e, { style: s, className: r, "data-anicca-theme": "", children: a });
+  const o = Q(() => ve(t), [t]);
+  return /* @__PURE__ */ r(e, { style: o, className: n, "data-anicca-theme": "", children: a });
 }
-function be({
+const ye = {
+  primary: "bg-primary text-primary-fg border border-primary hover:opacity-90 active:opacity-100 dark:bg-primary dark:text-primary-fg dark:border-primary",
+  secondary: "bg-surface-muted text-text border border-border hover:bg-surface-low dark:bg-surface-container dark:text-text dark:border-border dark:hover:bg-surface-container",
+  outline: "bg-transparent text-text border border-border hover:bg-surface-muted dark:text-text dark:border-border dark:hover:bg-surface-container",
+  ghost: "bg-transparent text-text border border-transparent hover:bg-surface-muted dark:text-text dark:hover:bg-surface-container",
+  danger: "bg-danger text-white border border-danger hover:opacity-90 dark:bg-danger dark:text-white dark:border-danger",
+  link: "bg-transparent text-primary border border-transparent underline-offset-4 hover:underline px-0 dark:text-primary"
+}, we = {
+  sm: "h-8 px-3 text-[0.78rem] gap-1.5 rounded-lg",
+  md: "h-10 px-4 text-[0.875rem] gap-2 rounded-lg",
+  lg: "h-12 px-6 text-[0.95rem] gap-2 rounded-a",
+  icon: "h-10 w-10 p-0 rounded-lg"
+}, zr = W(function({
+  variant: e = "primary",
+  size: n = "md",
+  loading: a = !1,
+  leftIcon: o,
+  rightIcon: i,
+  fullWidth: l,
+  className: m = "",
+  disabled: d,
+  children: b,
+  type: h = "button",
+  ...c
+}, s) {
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      ref: s,
+      type: h,
+      disabled: d || a,
+      "data-loading": a || void 0,
+      className: `relative inline-flex items-center justify-center font-semibold tracking-tight transition-[background,color,opacity,border-color] duration-200 ease-out focus-visible:outline-none focus-visible:ring-[var(--anicca-ring-width)] focus-visible:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed font-[inherit] ${ye[e]} ${we[n]} ${l ? "w-full" : ""} ${m}`,
+      ...c,
+      children: [
+        a && /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ u("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+          /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: "0.25" }),
+          /* @__PURE__ */ r("path", { d: "M22 12a10 10 0 0 1-10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+        ] }) }),
+        /* @__PURE__ */ u("span", { className: `inline-flex items-center gap-[inherit] ${a ? "opacity-0" : ""}`, children: [
+          o && /* @__PURE__ */ r("span", { className: "inline-flex shrink-0", children: o }),
+          b,
+          i && /* @__PURE__ */ r("span", { className: "inline-flex shrink-0", children: i })
+        ] })
+      ]
+    }
+  );
+}), ke = {
+  sm: "h-8 text-[0.8rem] rounded-lg",
+  md: "h-10 text-[0.875rem] rounded-lg",
+  lg: "h-12 text-[0.95rem] rounded-a"
+}, Hr = W(function({
+  label: e,
+  helper: n,
+  error: a,
+  required: o,
+  leftAddon: i,
+  rightAddon: l,
+  inputSize: m = "md",
+  id: d,
+  className: b = "",
+  wrapperClassName: h = "",
+  disabled: c,
+  ...s
+}, f) {
+  const p = O(), g = d ?? p, N = `${g}-helper`, $ = `${g}-error`, _ = a ? $ : n ? N : void 0;
+  return /* @__PURE__ */ u("div", { className: `flex flex-col gap-1.5 ${h}`, children: [
+    e && /* @__PURE__ */ u("label", { htmlFor: g, className: "text-[0.78rem] font-semibold text-text", children: [
+      e,
+      o && /* @__PURE__ */ r("span", { className: "text-danger ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: `group flex items-center gap-2 bg-surface border border-border px-3 transition-[border-color,box-shadow] duration-200 ease-out focus-within:border-primary focus-within:ring-[var(--anicca-ring-width)] focus-within:ring-primary/20 dark:bg-surface dark:border-border dark:focus-within:border-primary ${ke[m]} ${a ? "border-danger focus-within:border-danger focus-within:ring-danger/20" : ""} ${c ? "opacity-50 cursor-not-allowed bg-surface-muted dark:bg-surface-container" : ""}`,
+        children: [
+          i && /* @__PURE__ */ r("span", { className: "text-text-muted shrink-0 inline-flex items-center", children: i }),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: f,
+              id: g,
+              disabled: c,
+              "aria-invalid": a ? !0 : void 0,
+              "aria-describedby": _,
+              required: o,
+              className: `flex-1 min-w-0 bg-transparent outline-none border-none text-text placeholder:text-text-subtle font-[inherit] dark:text-text dark:placeholder:text-text-subtle ${b}`,
+              ...s
+            }
+          ),
+          l && /* @__PURE__ */ r("span", { className: "text-text-muted shrink-0 inline-flex items-center", children: l })
+        ]
+      }
+    ),
+    a ? /* @__PURE__ */ r("span", { id: $, className: "text-[0.72rem] text-danger font-medium", children: a }) : n ? /* @__PURE__ */ r("span", { id: N, className: "text-[0.72rem] text-text-muted", children: n }) : null
+  ] });
+}), Vr = W(function({
+  label: e,
+  helper: n,
+  error: a,
+  required: o,
+  autoResize: i = !1,
+  maxHeight: l,
+  showCount: m = !1,
+  maxLength: d,
+  id: b,
+  className: h = "",
+  wrapperClassName: c = "",
+  disabled: s,
+  onInput: f,
+  value: p,
+  defaultValue: g,
+  ...N
+}, $) {
+  const _ = O(), E = b ?? _, k = D(null), x = (y) => {
+    k.current = y, typeof $ == "function" ? $(y) : $ && ($.current = y);
+  }, w = () => {
+    const y = k.current;
+    if (!y || !i) return;
+    y.style.height = "auto";
+    const A = l ? Math.min(y.scrollHeight, l) : y.scrollHeight;
+    y.style.height = `${A}px`;
+  };
+  M(() => {
+    w();
+  }, [p, g, i, l]);
+  const v = typeof p == "string" ? p.length : 0;
+  return /* @__PURE__ */ u("div", { className: `flex flex-col gap-1.5 ${c}`, children: [
+    e && /* @__PURE__ */ u("label", { htmlFor: E, className: "text-[0.78rem] font-semibold text-text", children: [
+      e,
+      o && /* @__PURE__ */ r("span", { className: "text-danger ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ r(
+      "textarea",
+      {
+        ref: x,
+        id: E,
+        disabled: s,
+        required: o,
+        maxLength: d,
+        value: p,
+        defaultValue: g,
+        "aria-invalid": a ? !0 : void 0,
+        onInput: (y) => {
+          w(), f == null || f(y);
+        },
+        className: `bg-surface border border-border rounded-lg px-3 py-2 text-[0.875rem] text-text placeholder:text-text-subtle outline-none resize-y transition-[border-color,box-shadow] duration-200 ease-out focus:border-primary focus:ring-[var(--anicca-ring-width)] focus:ring-primary/20 font-[inherit] dark:bg-surface dark:border-border dark:text-text dark:placeholder:text-text-subtle dark:focus:border-primary ${a ? "border-danger focus:border-danger focus:ring-danger/20" : ""} ${s ? "opacity-50 cursor-not-allowed bg-surface-muted dark:bg-surface-container" : ""} ${i ? "resize-none overflow-hidden" : ""} ${h}`,
+        ...N
+      }
+    ),
+    /* @__PURE__ */ u("div", { className: "flex justify-between gap-3", children: [
+      /* @__PURE__ */ r("span", { className: "text-[0.72rem] flex-1 min-w-0", children: a ? /* @__PURE__ */ r("span", { className: "text-danger font-medium", children: a }) : n ? /* @__PURE__ */ r("span", { className: "text-text-muted", children: n }) : null }),
+      m && /* @__PURE__ */ u("span", { className: "text-[0.72rem] text-text-subtle tabular-nums", children: [
+        v,
+        d ? `/${d}` : ""
+      ] })
+    ] })
+  ] });
+}), Ne = {
+  sm: "h-8 text-[0.8rem] rounded-lg pl-3 pr-8",
+  md: "h-10 text-[0.875rem] rounded-lg pl-3 pr-9",
+  lg: "h-12 text-[0.95rem] rounded-a pl-4 pr-10"
+}, Ur = W(function({
+  label: e,
+  helper: n,
+  error: a,
+  required: o,
+  options: i,
+  placeholder: l,
+  selectSize: m = "md",
+  id: d,
+  className: b = "",
+  wrapperClassName: h = "",
+  disabled: c,
+  children: s,
+  value: f,
+  defaultValue: p,
+  ...g
+}, N) {
+  const $ = O(), _ = d ?? $;
+  return /* @__PURE__ */ u("div", { className: `flex flex-col gap-1.5 ${h}`, children: [
+    e && /* @__PURE__ */ u("label", { htmlFor: _, className: "text-[0.78rem] font-semibold text-text", children: [
+      e,
+      o && /* @__PURE__ */ r("span", { className: "text-danger ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ u("div", { className: "relative", children: [
+      /* @__PURE__ */ u(
+        "select",
+        {
+          ref: N,
+          id: _,
+          disabled: c,
+          required: o,
+          "aria-invalid": a ? !0 : void 0,
+          value: f,
+          defaultValue: p ?? (l && f === void 0 ? "" : void 0),
+          className: `appearance-none w-full bg-surface border border-border text-text outline-none cursor-pointer transition-[border-color,box-shadow] duration-200 ease-out focus:border-primary focus:ring-[var(--anicca-ring-width)] focus:ring-primary/20 font-[inherit] dark:bg-surface dark:border-border dark:text-text dark:focus:border-primary ${Ne[m]} ${a ? "border-danger focus:border-danger focus:ring-danger/20" : ""} ${c ? "opacity-50 cursor-not-allowed bg-surface-muted dark:bg-surface-container" : ""} ${b}`,
+          ...g,
+          children: [
+            l && /* @__PURE__ */ r("option", { value: "", disabled: !0, hidden: !0, children: l }),
+            s ?? (i == null ? void 0 : i.map((E) => /* @__PURE__ */ r("option", { value: E.value, disabled: E.disabled, children: E.label }, E.value)))
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(
+        "svg",
+        {
+          className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted pointer-events-none",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ r("polyline", { points: "6 9 12 15 18 9", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    ] }),
+    a ? /* @__PURE__ */ r("span", { className: "text-[0.72rem] text-danger font-medium", children: a }) : n ? /* @__PURE__ */ r("span", { className: "text-[0.72rem] text-text-muted", children: n }) : null
+  ] });
+}), Yr = W(function({
+  label: e,
+  description: n,
+  error: a,
+  indeterminate: o = !1,
+  id: i,
+  className: l = "",
+  wrapperClassName: m = "",
+  disabled: d,
+  checked: b,
+  defaultChecked: h,
+  ...c
+}, s) {
+  const f = O(), p = i ?? f, g = D(null), N = ($) => {
+    g.current = $, typeof s == "function" ? s($) : s && (s.current = $);
+  };
+  return M(() => {
+    g.current && (g.current.indeterminate = o);
+  }, [o]), /* @__PURE__ */ u("label", { htmlFor: p, className: `inline-flex items-start gap-2.5 cursor-pointer ${d ? "opacity-50 cursor-not-allowed" : ""} ${m}`, children: [
+    /* @__PURE__ */ u("span", { className: "relative inline-flex items-center justify-center shrink-0 mt-[0.15rem]", children: [
+      /* @__PURE__ */ r(
+        "input",
+        {
+          ref: N,
+          id: p,
+          type: "checkbox",
+          disabled: d,
+          checked: b,
+          defaultChecked: h,
+          "aria-invalid": a ? !0 : void 0,
+          className: `peer appearance-none w-[18px] h-[18px] border-[1.5px] border-border-strong rounded-xs bg-surface cursor-[inherit] transition-[background-color,border-color,box-shadow] duration-150 checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary focus-visible:outline-none focus-visible:ring-[var(--anicca-ring-width)] focus-visible:ring-primary/20 dark:bg-surface dark:border-border-strong dark:checked:bg-primary dark:checked:border-primary ${a ? "border-danger" : ""} ${l}`,
+          ...c
+        }
+      ),
+      /* @__PURE__ */ r(
+        "svg",
+        {
+          className: "absolute w-3 h-3 text-primary-fg pointer-events-none opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-0 transition-opacity duration-150",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ r("polyline", { points: "20 6 9 17 4 12", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: "absolute w-2.5 h-[2px] bg-primary-fg pointer-events-none opacity-0 peer-indeterminate:opacity-100", "aria-hidden": "true" })
+    ] }),
+    (e || n || a) && /* @__PURE__ */ u("span", { className: "flex flex-col gap-0.5 min-w-0", children: [
+      e && /* @__PURE__ */ r("span", { className: "text-[0.85rem] text-text font-medium leading-tight", children: e }),
+      n && !a && /* @__PURE__ */ r("span", { className: "text-[0.75rem] text-text-muted leading-snug", children: n }),
+      a && /* @__PURE__ */ r("span", { className: "text-[0.72rem] text-danger font-medium leading-snug", children: a })
+    ] })
+  ] });
+}), ue = ae(null);
+function Jr({
+  name: t,
+  value: e,
+  defaultValue: n,
+  onChange: a,
+  orientation: o = "vertical",
+  disabled: i,
+  label: l,
+  error: m,
+  className: d = "",
+  children: b
+}) {
+  const [h, c] = U.useState(n ?? ""), s = e !== void 0, f = s ? e : h, p = (g) => {
+    s || c(g), a == null || a(g);
+  };
+  return /* @__PURE__ */ u("div", { className: `flex flex-col gap-2 ${d}`, role: "radiogroup", "aria-label": l, children: [
+    l && /* @__PURE__ */ r("span", { className: "text-[0.78rem] font-semibold text-text", children: l }),
+    /* @__PURE__ */ r("div", { className: `flex ${o === "horizontal" ? "flex-row gap-4 flex-wrap" : "flex-col gap-2"}`, children: /* @__PURE__ */ r(ue.Provider, { value: { name: t, value: f, onChange: p, disabled: i }, children: b }) }),
+    m && /* @__PURE__ */ r("span", { className: "text-[0.72rem] text-danger font-medium", children: m })
+  ] });
+}
+const Gr = W(function({ value: e, label: n, description: a, id: o, className: i = "", wrapperClassName: l = "", disabled: m, ...d }, b) {
+  const h = O(), c = o ?? h, s = ne(ue), f = m || (s == null ? void 0 : s.disabled), p = s ? s.value === e : d.checked;
+  return /* @__PURE__ */ u("label", { htmlFor: c, className: `inline-flex items-start gap-2.5 cursor-pointer ${f ? "opacity-50 cursor-not-allowed" : ""} ${l}`, children: [
+    /* @__PURE__ */ u("span", { className: "relative inline-flex items-center justify-center shrink-0 mt-[0.15rem]", children: [
+      /* @__PURE__ */ r(
+        "input",
+        {
+          ref: b,
+          id: c,
+          type: "radio",
+          name: (s == null ? void 0 : s.name) ?? d.name,
+          value: e,
+          checked: p,
+          disabled: f,
+          onChange: (g) => {
+            var N, $;
+            (N = s == null ? void 0 : s.onChange) == null || N.call(s, e), ($ = d.onChange) == null || $.call(d, g);
+          },
+          className: `peer appearance-none w-[18px] h-[18px] border-[1.5px] border-border-strong rounded-full bg-surface cursor-[inherit] transition-[border-color,box-shadow] duration-150 checked:border-primary focus-visible:outline-none focus-visible:ring-[var(--anicca-ring-width)] focus-visible:ring-primary/20 dark:bg-surface dark:border-border-strong dark:checked:border-primary ${i}`,
+          ...d
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: "absolute w-[8px] h-[8px] rounded-full bg-primary pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-150", "aria-hidden": "true" })
+    ] }),
+    (n || a) && /* @__PURE__ */ u("span", { className: "flex flex-col gap-0.5 min-w-0", children: [
+      n && /* @__PURE__ */ r("span", { className: "text-[0.85rem] text-text font-medium leading-tight", children: n }),
+      a && /* @__PURE__ */ r("span", { className: "text-[0.75rem] text-text-muted leading-snug", children: a })
+    ] })
+  ] });
+}), $e = {
+  sm: { track: "w-8 h-[18px]", thumb: "w-3.5 h-3.5", translate: "peer-checked:translate-x-[14px]" },
+  md: { track: "w-10 h-[22px]", thumb: "w-[18px] h-[18px]", translate: "peer-checked:translate-x-[18px]" },
+  lg: { track: "w-12 h-7", thumb: "w-6 h-6", translate: "peer-checked:translate-x-5" }
+}, Zr = W(function({
+  label: e,
+  description: n,
+  switchSize: a = "md",
+  labelPosition: o = "right",
+  id: i,
+  className: l = "",
+  wrapperClassName: m = "",
+  disabled: d,
+  ...b
+}, h) {
+  const c = O(), s = i ?? c, { track: f, thumb: p, translate: g } = $e[a], N = /* @__PURE__ */ u("span", { className: `relative inline-flex items-center shrink-0 ${f}`, children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: h,
+        id: s,
+        type: "checkbox",
+        role: "switch",
+        disabled: d,
+        className: `peer appearance-none w-full h-full bg-border-strong rounded-full cursor-[inherit] transition-colors duration-200 ease-out checked:bg-primary focus-visible:outline-none focus-visible:ring-[var(--anicca-ring-width)] focus-visible:ring-primary/20 dark:bg-border dark:checked:bg-primary ${l}`,
+        ...b
+      }
+    ),
+    /* @__PURE__ */ r(
+      "span",
+      {
+        className: `absolute left-0.5 ${p} bg-surface rounded-full transition-transform duration-200 ease-out pointer-events-none ${g}`,
+        "aria-hidden": "true",
+        style: { boxShadow: "0 2px 4px rgba(0,0,0,0.15)" }
+      }
+    )
+  ] }), $ = (e || n) && /* @__PURE__ */ u("span", { className: "flex flex-col gap-0.5 min-w-0", children: [
+    e && /* @__PURE__ */ r("span", { className: "text-[0.85rem] text-text font-medium leading-tight", children: e }),
+    n && /* @__PURE__ */ r("span", { className: "text-[0.75rem] text-text-muted leading-snug", children: n })
+  ] });
+  return /* @__PURE__ */ u("label", { htmlFor: s, className: `inline-flex items-center gap-3 cursor-pointer ${d ? "opacity-50 cursor-not-allowed" : ""} ${m}`, children: [
+    o === "left" && $,
+    N,
+    o === "right" && $
+  ] });
+}), _e = {
+  elevated: "bg-surface border border-text/[0.06] shadow-md dark:bg-surface dark:border-border/50 dark:shadow-md",
+  outlined: "bg-surface border border-border dark:bg-surface dark:border-border",
+  flat: "bg-surface-muted border border-transparent dark:bg-surface-container"
+};
+function qr({
+  variant: t = "elevated",
+  accent: e,
+  unpadded: n,
+  className: a = "",
+  style: o,
+  children: i,
+  ...l
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `rounded-a ${n ? "" : "p-6"} ${_e[t]} ${e ? "border-l-4" : ""} ${a}`,
+      style: { ...e ? { borderLeftColor: e } : {}, ...o },
+      ...l,
+      children: i
+    }
+  );
+}
+function Kr({ className: t = "", children: e, ...n }) {
+  return /* @__PURE__ */ r("div", { className: `px-6 py-5 border-b border-border flex items-center justify-between gap-3 ${t}`, ...n, children: e });
+}
+function Xr({ className: t = "", children: e, ...n }) {
+  return /* @__PURE__ */ r("h3", { className: `text-[1rem] font-bold text-text tracking-tight m-0 ${t}`, ...n, children: e });
+}
+function Qr({ className: t = "", children: e, ...n }) {
+  return /* @__PURE__ */ r("p", { className: `text-[0.82rem] text-text-muted m-0 ${t}`, ...n, children: e });
+}
+function et({ className: t = "", children: e, ...n }) {
+  return /* @__PURE__ */ r("div", { className: `px-6 py-5 text-text ${t}`, ...n, children: e });
+}
+function rt({ className: t = "", children: e, ...n }) {
+  return /* @__PURE__ */ r("div", { className: `px-6 py-4 border-t border-border flex items-center justify-end gap-2 ${t}`, ...n, children: e });
+}
+const Ae = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+}, Le = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+function tt({
+  direction: t = "vertical",
+  gap: e = 1,
+  align: n,
+  justify: a,
+  wrap: o,
+  divider: i,
+  as: l = "div",
+  className: m = "",
+  style: d,
+  children: b,
+  ...h
+}) {
+  const c = l, s = typeof e == "number" ? `${e}rem` : e;
+  if (i !== void 0) {
+    const f = U.Children.toArray(b).filter(Boolean), p = [];
+    f.forEach((g, N) => {
+      p.push(g), N < f.length - 1 && p.push(/* @__PURE__ */ r(U.Fragment, { children: i }, `anicca-stack-divider-${N}`));
+    }), b = p;
+  }
+  return /* @__PURE__ */ r(
+    c,
+    {
+      className: `flex ${t === "vertical" ? "flex-col" : "flex-row"} ${o && t === "horizontal" ? "flex-wrap" : ""} ${n ? Ae[n] : ""} ${a ? Le[a] : ""} ${m}`,
+      style: { gap: s, ...d },
+      ...h,
+      children: b
+    }
+  );
+}
+function Se(t) {
+  if (t !== void 0)
+    return typeof t == "number" ? `repeat(${t}, minmax(0, 1fr))` : t;
+}
+function nt({
+  columns: t = 1,
+  responsive: e,
+  gap: n = 1,
+  minChildWidth: a,
+  as: o = "div",
+  className: i = "",
+  style: l,
+  children: m,
+  ...d
+}) {
+  const b = o, h = typeof n == "number" ? `${n}rem` : n, c = a ? `repeat(auto-fit, minmax(${a}, 1fr))` : Se((e == null ? void 0 : e.base) ?? t), s = { display: "grid", gap: h, gridTemplateColumns: c, ...l };
+  return /* @__PURE__ */ r(
+    b,
+    {
+      "data-anicca-grid": "",
+      "data-responsive": e ? JSON.stringify(e) : void 0,
+      className: i,
+      style: s,
+      ...d,
+      children: m
+    }
+  );
+}
+function at({
+  orientation: t = "horizontal",
+  label: e,
+  variant: n = "solid",
+  thickness: a = 1,
+  className: o = "",
+  style: i,
+  ...l
+}) {
+  return t === "vertical" ? /* @__PURE__ */ r(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      className: `self-stretch ${o}`,
+      style: {
+        borderLeftWidth: a,
+        borderLeftStyle: n,
+        borderColor: "rgb(var(--anicca-border))",
+        ...i
+      },
+      ...l
+    }
+  ) : e ? /* @__PURE__ */ u("div", { role: "separator", "aria-orientation": "horizontal", className: `flex items-center gap-3 ${o}`, ...l, children: [
+    /* @__PURE__ */ r("span", { className: "flex-1", style: { borderTopWidth: a, borderTopStyle: n, borderColor: "rgb(var(--anicca-border))" } }),
+    /* @__PURE__ */ r("span", { className: "text-[0.72rem] uppercase tracking-[0.08em] text-text-muted font-semibold dark:text-text-subtle", children: e }),
+    /* @__PURE__ */ r("span", { className: "flex-1", style: { borderTopWidth: a, borderTopStyle: n, borderColor: "rgb(var(--anicca-border))" } })
+  ] }) : /* @__PURE__ */ r(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: o,
+      style: {
+        borderTopWidth: a,
+        borderTopStyle: n,
+        borderColor: "rgb(var(--anicca-border))",
+        ...i
+      },
+      ...l
+    }
+  );
+}
+const Te = {
+  neutral: "bg-surface-muted text-text-muted",
+  primary: "bg-primary-soft text-primary",
+  success: "bg-success-bg text-success",
+  warning: "bg-warning-bg text-warning",
+  danger: "bg-danger-bg text-danger",
+  info: "bg-info-bg text-info"
+}, Ce = {
+  neutral: "bg-text text-surface",
+  primary: "bg-primary text-primary-fg",
+  success: "bg-success text-primary-fg",
+  warning: "bg-warning text-primary-fg",
+  danger: "bg-danger text-primary-fg",
+  info: "bg-info text-primary-fg"
+}, Ee = {
+  neutral: "border border-border text-text-muted",
+  primary: "border border-primary text-primary",
+  success: "border border-success text-success",
+  warning: "border border-warning text-warning",
+  danger: "border border-danger text-danger",
+  info: "border border-info text-info"
+}, Me = {
+  neutral: "bg-text-muted",
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info"
+}, je = {
+  sm: "h-5 px-2 text-[0.65rem]",
+  md: "h-6 px-2.5 text-[0.72rem]"
+};
+function ot({
+  variant: t = "neutral",
+  size: e = "md",
+  appearance: n = "soft",
+  dot: a,
+  className: o = "",
+  children: i,
+  ...l
+}) {
+  const m = n === "solid" ? Ce[t] : n === "outlined" ? Ee[t] : Te[t];
+  return /* @__PURE__ */ u(
+    "span",
+    {
+      className: `inline-flex items-center gap-1.5 rounded-full font-semibold whitespace-nowrap leading-none tracking-tight ${je[e]} ${m} ${o}`,
+      ...l,
+      children: [
+        a && /* @__PURE__ */ r("span", { className: `inline-block w-1.5 h-1.5 rounded-full ${Me[t]}`, "aria-hidden": "true" }),
+        i
+      ]
+    }
+  );
+}
+const fe = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 56,
+  xl: 72
+}, Ie = {
+  online: "var(--anicca-success)",
+  offline: "var(--anicca-text-subtle)",
+  busy: "var(--anicca-danger)",
+  away: "var(--anicca-warning)"
+}, De = {
+  circle: "rounded-full",
+  rounded: "rounded-lg",
+  square: "rounded-none"
+};
+function Be(t) {
+  return t ? t.split(/\s+/).filter(Boolean).slice(0, 2).map((e) => e[0].toUpperCase()).join("") : "?";
+}
+function Fe({
+  src: t,
+  alt: e,
+  name: n,
+  fallback: a,
+  size: o = "md",
+  shape: i = "circle",
+  status: l,
+  className: m = "",
+  style: d,
+  ...b
+}) {
+  const [h, c] = S(!1), s = typeof o == "number" ? o : fe[o], f = s * 0.4, p = t && !h;
+  return /* @__PURE__ */ u(
+    "span",
+    {
+      className: `relative inline-flex items-center justify-center bg-surface-muted text-text-muted overflow-hidden border border-border dark:bg-surface-container dark:text-text-muted dark:border-border ${De[i]} ${m}`,
+      style: { width: s, height: s, fontSize: f, ...d },
+      role: "img",
+      "aria-label": e ?? n ?? "avatar",
+      ...b,
+      children: [
+        p ? /* @__PURE__ */ r("img", { src: t, alt: e ?? n ?? "", onError: () => c(!0), className: "w-full h-full object-cover" }) : /* @__PURE__ */ r("span", { className: "font-bold tracking-tight", children: a ?? Be(n) }),
+        l && /* @__PURE__ */ r(
+          "span",
+          {
+            className: "absolute bottom-0 right-0 rounded-full border-2 border-surface",
+            style: { width: s * 0.28, height: s * 0.28, background: Ie[l] },
+            "aria-label": l
+          }
+        )
+      ]
+    }
+  );
+}
+function it({
+  max: t = 4,
+  spacing: e = 8,
+  size: n = "md",
+  className: a = "",
+  style: o,
+  children: i,
+  ...l
+}) {
+  const m = U.Children.toArray(i).filter(Boolean), d = m.slice(0, t), b = m.length - d.length, h = typeof n == "number" ? n : fe[n];
+  return /* @__PURE__ */ u("div", { className: `flex ${a}`, style: o, ...l, children: [
+    d.map((c, s) => /* @__PURE__ */ r("span", { style: { marginLeft: s === 0 ? 0 : -e }, className: "ring-2 ring-surface rounded-full", children: U.isValidElement(c) && c.type === Fe ? U.cloneElement(c, { size: n }) : c }, s)),
+    b > 0 && /* @__PURE__ */ u(
+      "span",
+      {
+        className: "inline-flex items-center justify-center bg-surface-muted text-text-muted rounded-full border-2 border-surface font-semibold",
+        style: { width: h, height: h, fontSize: h * 0.36, marginLeft: -e },
+        children: [
+          "+",
+          b
+        ]
+      }
+    )
+  ] });
+}
+function st({
+  variant: t = "rect",
+  width: e,
+  height: n,
+  lines: a = 1,
+  static: o,
+  className: i = "",
+  style: l,
+  ...m
+}) {
+  const d = `${o ? "" : "anicca-shimmer"} block bg-surface-muted dark:bg-surface-container`, b = typeof e == "number" ? `${e}px` : e, h = typeof n == "number" ? `${n}px` : n;
+  if (t === "circle") {
+    const c = b ?? h ?? "2.5rem";
+    return /* @__PURE__ */ r(
+      "span",
+      {
+        className: `${d} rounded-full ${i}`,
+        style: { width: c, height: c, ...l },
+        "aria-hidden": "true",
+        ...m
+      }
+    );
+  }
+  return t === "text" ? /* @__PURE__ */ r("span", { className: `flex flex-col gap-1.5 ${i}`, "aria-hidden": "true", ...m, children: Array.from({ length: a }).map((c, s) => /* @__PURE__ */ r(
+    "span",
+    {
+      className: `${d} rounded-xs`,
+      style: {
+        width: s === a - 1 && a > 1 ? "70%" : b ?? "100%",
+        height: h ?? "0.875rem"
+      }
+    },
+    s
+  )) }) : /* @__PURE__ */ r(
+    "span",
+    {
+      className: `${d} rounded-lg ${i}`,
+      style: { width: b ?? "100%", height: h ?? "1rem", ...l },
+      "aria-hidden": "true",
+      ...m
+    }
+  );
+}
+const Re = {
+  xs: 12,
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48
+};
+function ct({
+  size: t = "md",
+  thickness: e = 2.5,
+  color: n,
+  label: a = "Loading",
+  className: o = "",
+  style: i,
+  ...l
+}) {
+  const m = typeof t == "number" ? t : Re[t];
+  return /* @__PURE__ */ u(
+    "span",
+    {
+      role: "status",
+      "aria-label": a,
+      className: `inline-flex items-center justify-center text-primary ${o}`,
+      style: { color: n, ...i },
+      ...l,
+      children: [
+        /* @__PURE__ */ u("svg", { className: "animate-spin", width: m, height: m, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+          /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: e, opacity: "0.2" }),
+          /* @__PURE__ */ r("path", { d: "M22 12a10 10 0 0 1-10 10", stroke: "currentColor", strokeWidth: e, strokeLinecap: "round" })
+        ] }),
+        /* @__PURE__ */ r("span", { className: "sr-only", children: a })
+      ]
+    }
+  );
+}
+const Pe = {
+  previous: "← Prev",
+  next: "Next →",
+  page: "Page",
+  goToPage: (t) => `Go to page ${t}`
+};
+function V(t, e) {
+  return Array.from({ length: e - t + 1 }, (n, a) => t + a);
+}
+function We(t, e, n, a) {
+  const o = a * 2 + n * 2 + 3;
+  if (e <= o) return V(1, e);
+  const i = Math.max(t - n, a + 2), l = Math.min(t + n, e - a - 1), m = i > a + 2, d = l < e - a - 1, b = V(1, a), h = V(e - a + 1, e), c = [...b];
+  return m ? c.push("ellipsis") : c.push(...V(a + 1, i - 1)), c.push(...V(i, l)), d ? c.push("ellipsis") : c.push(...V(l + 1, e - a)), c.push(...h), c;
+}
+function dt({
+  page: t,
+  pageCount: e,
+  onPageChange: n,
+  siblingCount: a = 1,
+  boundaryCount: o = 1,
+  hideControls: i = !1,
+  labels: l,
+  className: m = "",
+  ...d
+}) {
+  const b = { ...Pe, ...l }, h = We(t, e, a, o), c = "min-w-[34px] h-[34px] px-2 inline-flex items-center justify-center text-[0.82rem] font-semibold rounded-lg border transition-[background-color,border-color,color] duration-150 focus-visible:outline-none focus-visible:ring-[var(--anicca-ring-width)] focus-visible:ring-primary-soft disabled:opacity-40 disabled:cursor-not-allowed";
+  return /* @__PURE__ */ u("nav", { className: `flex items-center gap-1.5 ${m}`, "aria-label": "Pagination", ...d, children: [
+    !i && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: `${c} bg-surface text-text-muted border-border hover:enabled:border-primary hover:enabled:text-primary`,
+        disabled: t <= 1,
+        onClick: () => n(t - 1),
+        children: b.previous
+      }
+    ),
+    h.map(
+      (s, f) => {
+        var p;
+        return s === "ellipsis" ? /* @__PURE__ */ r("span", { className: "px-1 text-text-subtle select-none", children: "…" }, `e${f}`) : /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            "aria-current": s === t ? "page" : void 0,
+            "aria-label": (p = b.goToPage) == null ? void 0 : p.call(b, s),
+            onClick: () => n(s),
+            className: `${c} ${s === t ? "bg-primary text-primary-fg border-primary" : "bg-surface text-text-muted border-border hover:enabled:border-primary hover:enabled:text-primary"}`,
+            children: s
+          },
+          s
+        );
+      }
+    ),
+    !i && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: `${c} bg-surface text-text-muted border-border hover:enabled:border-primary hover:enabled:text-primary`,
+        disabled: t >= e,
+        onClick: () => n(t + 1),
+        children: b.next
+      }
+    )
+  ] });
+}
+const Oe = {
+  info: "bg-info-bg border-info/40 text-info dark:bg-info/20 dark:border-info/30 dark:text-info",
+  success: "bg-success-bg border-success/40 text-success dark:bg-success/20 dark:border-success/30 dark:text-success",
+  warning: "bg-warning-bg border-warning/40 text-warning dark:bg-warning/20 dark:border-warning/30 dark:text-warning",
+  danger: "bg-danger-bg border-danger/40 text-danger dark:bg-danger/20 dark:border-danger/30 dark:text-danger",
+  neutral: "bg-surface-muted border-border text-text dark:bg-surface-container dark:border-border dark:text-text"
+}, ze = {
+  info: "bg-surface border-info text-info dark:bg-surface dark:border-info dark:text-info",
+  success: "bg-surface border-success text-success dark:bg-surface dark:border-success dark:text-success",
+  warning: "bg-surface border-warning text-warning dark:bg-surface dark:border-warning dark:text-warning",
+  danger: "bg-surface border-danger text-danger dark:bg-surface dark:border-danger dark:text-danger",
+  neutral: "bg-surface border-border text-text dark:bg-surface dark:border-border dark:text-text"
+}, He = {
+  info: /* @__PURE__ */ r(G, { d: "M12 8h.01M11 12h1v4h1" }),
+  success: /* @__PURE__ */ r(G, { d: "M20 6L9 17l-5-5" }),
+  warning: /* @__PURE__ */ r(G, { d: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }),
+  danger: /* @__PURE__ */ r(G, { d: "M10 14l4-4m0 4l-4-4M12 22a10 10 0 110-20 10 10 0 010 20z" }),
+  neutral: /* @__PURE__ */ r(G, { d: "M12 8h.01M11 12h1v4h1" })
+};
+function G({ d: t }) {
+  return /* @__PURE__ */ r("svg", { className: "w-5 h-5 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: t, strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function lt({
+  variant: t = "info",
+  title: e,
+  icon: n,
+  onDismiss: a,
+  labels: o,
+  appearance: i = "soft",
+  className: l = "",
+  children: m,
+  ...d
+}) {
+  const b = (o == null ? void 0 : o.dismiss) ?? "Dismiss", h = i === "outlined" ? ze[t] : Oe[t], c = n === null ? null : n ?? He[t];
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      role: "alert",
+      className: `flex items-start gap-3 p-4 rounded-lg border ${h} ${l}`,
+      ...d,
+      children: [
+        c,
+        /* @__PURE__ */ u("div", { className: "flex-1 min-w-0", children: [
+          e && /* @__PURE__ */ r("div", { className: "font-semibold text-[0.9rem] mb-0.5 text-text", children: e }),
+          /* @__PURE__ */ r("div", { className: "text-[0.82rem] text-text leading-relaxed", children: m })
+        ] }),
+        a && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: a,
+            "aria-label": b,
+            className: "shrink-0 w-6 h-6 inline-flex items-center justify-center rounded-xs text-text-muted hover:text-text hover:bg-surface-muted transition-colors",
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+}
+const me = ae(null), Ve = {
+  "top-right": "top-4 right-4 items-end",
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
+}, Ue = {
+  info: "border-info",
+  success: "border-success",
+  warning: "border-warning",
+  danger: "border-danger",
+  neutral: "border-border"
+};
+let Ye = 0;
+function ut({
+  position: t = "top-right",
+  defaultDuration: e = 4e3,
+  max: n = 5,
+  children: a
+}) {
+  const [o, i] = S([]), l = D(/* @__PURE__ */ new Map()), m = C((c) => {
+    i((f) => f.filter((p) => p.id !== c));
+    const s = l.current.get(c);
+    s && (window.clearTimeout(s), l.current.delete(c));
+  }, []), d = C((c) => {
+    const s = c.id ?? `t-${++Ye}`, f = c.duration ?? e;
+    if (i((p) => {
+      const g = [...p, { ...c, id: s, duration: f }];
+      return g.length > n ? g.slice(g.length - n) : g;
+    }), f > 0) {
+      const p = window.setTimeout(() => m(s), f);
+      l.current.set(s, p);
+    }
+    return s;
+  }, [e, m, n]), b = C(() => {
+    l.current.forEach((c) => window.clearTimeout(c)), l.current.clear(), i([]);
+  }, []);
+  M(() => () => {
+    l.current.forEach((c) => window.clearTimeout(c));
+  }, []);
+  const h = typeof document < "u" ? z(
+    /* @__PURE__ */ r(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: `fixed z-[2000] flex flex-col gap-2 pointer-events-none ${Ve[t]}`,
+        children: o.map((c) => /* @__PURE__ */ u(
+          "div",
+          {
+            role: "status",
+            className: `pointer-events-auto anicca-slide-up bg-surface border-l-4 ${Ue[c.variant ?? "neutral"]} border border-border rounded-lg shadow-md min-w-[280px] max-w-[420px] p-4 flex items-start gap-3`,
+            children: [
+              /* @__PURE__ */ u("div", { className: "flex-1 min-w-0", children: [
+                c.title && /* @__PURE__ */ r("div", { className: "font-semibold text-[0.88rem] text-text", children: c.title }),
+                c.description && /* @__PURE__ */ r("div", { className: "text-[0.8rem] text-text-muted mt-0.5 leading-snug", children: c.description })
+              ] }),
+              c.action && /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    c.action.onClick(), m(c.id);
+                  },
+                  className: "text-[0.78rem] font-semibold text-primary hover:underline shrink-0",
+                  children: c.action.label
+                }
+              ),
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => m(c.id),
+                  "aria-label": "Dismiss",
+                  className: "shrink-0 w-5 h-5 inline-flex items-center justify-center text-text-subtle hover:text-text transition-colors",
+                  children: "×"
+                }
+              )
+            ]
+          },
+          c.id
+        ))
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ u(me.Provider, { value: { toasts: o, push: d, dismiss: m, clear: b }, children: [
+    a,
+    h
+  ] });
+}
+function ft() {
+  const t = ne(me);
+  if (!t) throw new Error("useAniccaToast must be used inside <AniccaToastProvider>");
+  return t;
+}
+const be = ae(null), Je = {
+  info: "border-primary",
+  success: "border-tertiary",
+  warning: "border-amber",
+  danger: "border-error",
+  neutral: "border-outline-variant"
+}, Ge = {
+  info: "text-primary",
+  success: "text-tertiary",
+  warning: "text-amber",
+  danger: "text-error",
+  neutral: "text-outline"
+}, Ze = {
+  info: /* @__PURE__ */ u("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ r("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M10 9v5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ r("circle", { cx: "10", cy: "6.5", r: "0.75", fill: "currentColor" })
+  ] }),
+  success: /* @__PURE__ */ u("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ r("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M6.5 10.5l2.5 2.5 4.5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  warning: /* @__PURE__ */ u("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ r("path", { d: "M10 2.5L18 17H2L10 2.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ r("path", { d: "M10 8v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ r("circle", { cx: "10", cy: "13.5", r: "0.75", fill: "currentColor" })
+  ] }),
+  danger: /* @__PURE__ */ u("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ r("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M7 7l6 6M13 7l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  neutral: /* @__PURE__ */ u("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ r("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M6.5 10h7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] })
+}, qe = {
+  primary: "bg-primary text-on-primary hover:opacity-90",
+  secondary: "bg-surface-container text-on-surface border border-outline-variant/20 hover:bg-surface-container-high",
+  danger: "bg-error text-on-error hover:opacity-90"
+};
+let Ke = 0;
+function mt({ children: t }) {
+  var c, s;
+  const [e, n] = S([]), a = D(null), o = () => {
+    a.current !== null && (window.clearTimeout(a.current), a.current = null);
+  }, i = C((f) => {
+    o(), n((p) => p.filter((g) => g.id !== f));
+  }, []), l = C(() => {
+    o(), n([]);
+  }, []), m = C((f) => {
+    var N;
+    const p = f.id ?? `p-${++Ke}`, g = f.duration ?? ((N = f.actions) != null && N.length ? 0 : 4e3);
+    return n(($) => [...$, { ...f, id: p, duration: g }]), p;
+  }, []), d = e[0];
+  M(() => (o(), d && (d.duration ?? 0) > 0 && (a.current = window.setTimeout(() => i(d.id), d.duration)), o), [d == null ? void 0 : d.id, d == null ? void 0 : d.duration, i]), M(() => () => o(), []);
+  const b = (d == null ? void 0 : d.variant) ?? "neutral", h = typeof document < "u" && d ? z(
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: "fixed inset-0 z-[2100] flex items-center justify-center anicca-fade-in",
+        "aria-modal": "true",
+        role: "dialog",
+        "aria-labelledby": `popup-title-${d.id}`,
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50",
+              onClick: () => {
+                var f;
+                return !((f = d.actions) != null && f.length) && i(d.id);
+              }
+            }
+          ),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: `relative anicca-slide-up bg-surface-container-lowest rounded-[22px] border-t-4 ${Je[b]} border border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] w-full max-w-sm mx-4 shadow-[0_24px_70px_-20px_rgba(11,28,48,0.35),0_8px_24px_-12px_rgb(var(--primary)/0.12)] dark:shadow-[0_20px_60px_rgba(0,0,0,0.55)]`,
+              children: [
+                /* @__PURE__ */ r("div", { className: "p-5", children: /* @__PURE__ */ u("div", { className: "flex items-start gap-3", children: [
+                  /* @__PURE__ */ r("span", { className: `mt-0.5 shrink-0 ${Ge[b]}`, children: Ze[b] }),
+                  /* @__PURE__ */ u("div", { className: "flex-1 min-w-0", children: [
+                    d.title && /* @__PURE__ */ r(
+                      "div",
+                      {
+                        id: `popup-title-${d.id}`,
+                        className: "font-semibold text-body-base text-on-surface",
+                        children: d.title
+                      }
+                    ),
+                    d.description && /* @__PURE__ */ r("div", { className: "text-body-sm text-on-surface-variant mt-1 leading-relaxed", children: d.description })
+                  ] }),
+                  !((c = d.actions) != null && c.length) && /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => i(d.id),
+                      "aria-label": "Dismiss",
+                      className: "shrink-0 w-7 h-7 rounded-[8px] bg-on-surface/[0.05] text-outline text-[1rem] flex items-center justify-center hover:bg-surface-container-high hover:text-on-surface transition-all",
+                      children: "×"
+                    }
+                  )
+                ] }) }),
+                (s = d.actions) != null && s.length ? /* @__PURE__ */ r("div", { className: "px-5 pb-5 flex justify-end gap-2 border-t border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] pt-4", children: d.actions.map((f, p) => /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      f.onClick(), i(d.id);
+                    },
+                    className: `px-4 py-2 text-label-sm font-semibold rounded-[10px] transition-opacity ${qe[f.variant ?? "secondary"]}`,
+                    children: f.label
+                  },
+                  p
+                )) }) : null
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ u(be.Provider, { value: { push: m, dismiss: i, clear: l }, children: [
+    t,
+    h
+  ] });
+}
+function bt() {
+  const t = ne(be);
+  if (!t) throw new Error("useAniccaPopup must be used inside <AniccaPopupProvider>");
+  return t;
+}
+const K = 8;
+function pt({
+  content: t,
+  placement: e = "top",
+  delay: n = 200,
+  disabled: a,
+  open: o,
+  children: i,
+  className: l = ""
+}) {
+  const [m, d] = S(!1), b = o ?? m, h = D(null), c = D(), [s, f] = S(null), p = () => {
+    a || (window.clearTimeout(c.current), c.current = window.setTimeout(() => d(!0), n));
+  }, g = () => {
+    window.clearTimeout(c.current), d(!1);
+  };
+  if (M(() => {
+    if (!b || !h.current) return;
+    h.current.getBoundingClientRect();
+    const k = () => {
+      const x = h.current.getBoundingClientRect();
+      let w = 0, v = 0;
+      e === "top" ? (w = x.top - K, v = x.left + x.width / 2) : e === "bottom" ? (w = x.bottom + K, v = x.left + x.width / 2) : e === "left" ? (w = x.top + x.height / 2, v = x.left - K) : (w = x.top + x.height / 2, v = x.right + K), f({ top: w + window.scrollY, left: v + window.scrollX });
+    };
+    return k(), window.addEventListener("scroll", k, !0), window.addEventListener("resize", k), () => {
+      window.removeEventListener("scroll", k, !0), window.removeEventListener("resize", k);
+    };
+  }, [b, e]), M(() => () => window.clearTimeout(c.current), []), !oe(i)) return i;
+  const N = i.props, $ = ie(i, {
+    ref: (k) => {
+      h.current = k;
+      const x = i.ref;
+      typeof x == "function" ? x(k) : x && "current" in x && (x.current = k);
+    },
+    onMouseEnter: (k) => {
+      var x;
+      p(), (x = N.onMouseEnter) == null || x.call(N, k);
+    },
+    onMouseLeave: (k) => {
+      var x;
+      g(), (x = N.onMouseLeave) == null || x.call(N, k);
+    },
+    onFocus: (k) => {
+      var x;
+      p(), (x = N.onFocus) == null || x.call(N, k);
+    },
+    onBlur: (k) => {
+      var x;
+      g(), (x = N.onBlur) == null || x.call(N, k);
+    }
+  }), _ = {
+    top: "translate(-50%, -100%)",
+    bottom: "translate(-50%, 0)",
+    left: "translate(-100%, -50%)",
+    right: "translate(0, -50%)"
+  }, E = b && s && typeof document < "u" ? z(
+    /* @__PURE__ */ r(
+      "div",
+      {
+        role: "tooltip",
+        className: `fixed z-[2100] pointer-events-none anicca-fade-in ${l}`,
+        style: { top: s.top, left: s.left, transform: _[e] },
+        children: /* @__PURE__ */ r("div", { className: "bg-text text-surface text-[0.75rem] font-medium px-2.5 py-1.5 rounded-xs shadow-md leading-tight max-w-[240px] dark:bg-surface-container dark:text-text", children: t })
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ u(Y, { children: [
+    $,
+    E
+  ] });
+}
+const X = 10;
+function ht({
+  content: t,
+  placement: e = "bottom",
+  open: n,
+  onOpenChange: a,
+  disableOutsideClick: o,
+  disableEscapeKey: i,
+  trigger: l = "click",
+  children: m,
+  className: d = ""
+}) {
+  const b = n !== void 0, [h, c] = S(!1), s = b ? n : h, f = D(null), p = D(null), [g, N] = S(null), $ = C((v) => {
+    b || c(v), a == null || a(v);
+  }, [b, a]);
+  if (M(() => {
+    if (!s || !f.current) return;
+    const v = () => {
+      const y = f.current.getBoundingClientRect();
+      let A = 0, T = 0;
+      e === "top" ? (A = y.top - X, T = y.left + y.width / 2) : e === "bottom" ? (A = y.bottom + X, T = y.left + y.width / 2) : e === "left" ? (A = y.top + y.height / 2, T = y.left - X) : (A = y.top + y.height / 2, T = y.right + X), N({ top: A + window.scrollY, left: T + window.scrollX });
+    };
+    return v(), window.addEventListener("scroll", v, !0), window.addEventListener("resize", v), () => {
+      window.removeEventListener("scroll", v, !0), window.removeEventListener("resize", v);
+    };
+  }, [s, e]), M(() => {
+    if (!s) return;
+    const v = (A) => {
+      var j, P;
+      if (o) return;
+      const T = A.target;
+      (j = p.current) != null && j.contains(T) || (P = f.current) != null && P.contains(T) || $(!1);
+    }, y = (A) => {
+      !i && A.key === "Escape" && $(!1);
+    };
+    return document.addEventListener("mousedown", v), document.addEventListener("keydown", y), () => {
+      document.removeEventListener("mousedown", v), document.removeEventListener("keydown", y);
+    };
+  }, [s, o, i, $]), !oe(m)) return m;
+  const _ = m.props, k = ie(m, {
+    ref: (v) => {
+      f.current = v;
+      const y = m.ref;
+      typeof y == "function" ? y(v) : y && "current" in y && (y.current = v);
+    },
+    "aria-expanded": s,
+    ...l === "click" ? {
+      onClick: (v) => {
+        var y;
+        $(!s), (y = _.onClick) == null || y.call(_, v);
+      }
+    } : {
+      onMouseEnter: (v) => {
+        var y;
+        $(!0), (y = _.onMouseEnter) == null || y.call(_, v);
+      },
+      onMouseLeave: (v) => {
+        var y;
+        $(!1), (y = _.onMouseLeave) == null || y.call(_, v);
+      }
+    }
+  }), x = {
+    top: "translate(-50%, -100%)",
+    bottom: "translate(-50%, 0)",
+    left: "translate(-100%, -50%)",
+    right: "translate(0, -50%)"
+  }, w = s && g && typeof document < "u" ? z(
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: p,
+        role: "dialog",
+        className: `fixed z-[2050] anicca-fade-in ${d}`,
+        style: { top: g.top, left: g.left, transform: x[e] },
+        children: /* @__PURE__ */ r("div", { className: "bg-surface border border-border rounded-lg shadow-md p-3 min-w-[180px] text-[0.85rem] text-text dark:bg-surface dark:border-border dark:text-text", children: t })
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ u(Y, { children: [
+    k,
+    w
+  ] });
+}
+const ce = {
+  sm: "320px",
+  md: "400px",
+  lg: "520px",
+  xl: "720px",
+  full: "100%"
+};
+function xt({
+  open: t,
+  onClose: e,
+  side: n = "right",
+  size: a = "md",
+  title: o,
+  footer: i,
+  disableEscapeKey: l,
+  disableBackdropClick: m,
+  labels: d,
+  className: b = "",
+  children: h
+}) {
+  const c = (d == null ? void 0 : d.close) ?? "Close";
+  if (M(() => {
+    if (!t || l) return;
+    const $ = (_) => {
+      _.key === "Escape" && e();
+    };
+    return document.addEventListener("keydown", $), () => document.removeEventListener("keydown", $);
+  }, [t, e, l]), M(() => {
+    if (t)
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = "";
+      };
+  }, [t]), !t || typeof document > "u") return null;
+  const s = n === "left" || n === "right", f = a in ce ? ce[a] : a, p = {
+    [s ? "width" : "height"]: f,
+    [s ? "height" : "width"]: "100%"
+  }, g = {
+    left: "top-0 left-0 h-full",
+    right: "top-0 right-0 h-full",
+    top: "top-0 left-0 w-full",
+    bottom: "bottom-0 left-0 w-full"
+  }[n], N = {
+    left: "animate-[anicca-slide-from-left_0.25s_ease-out]",
+    right: "animate-[anicca-slide-from-right_0.25s_ease-out]",
+    top: "animate-[anicca-slide-from-top_0.25s_ease-out]",
+    bottom: "animate-[anicca-slide-from-bottom_0.25s_ease-out]"
+  }[n];
+  return z(
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "fixed inset-0 z-[1500] anicca-fade-in bg-surface-overlay/60",
+        onClick: m ? void 0 : e,
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ u(
+          "div",
+          {
+            className: `absolute bg-surface shadow-lg flex flex-col dark:bg-surface ${g} ${N} ${b}`,
+            style: p,
+            onClick: ($) => $.stopPropagation(),
+            children: [
+              o && /* @__PURE__ */ u("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+                /* @__PURE__ */ r("h2", { className: "text-[1rem] font-bold text-text m-0", children: o }),
+                /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: e,
+                    "aria-label": c,
+                    className: "w-8 h-8 rounded-lg bg-surface-muted text-text-muted hover:bg-border hover:text-text inline-flex items-center justify-center text-[1.1rem] transition-colors",
+                    children: "×"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto px-6 py-5 text-text", children: h }),
+              i && /* @__PURE__ */ r("div", { className: "px-6 py-4 border-t border-border flex justify-end gap-2 shrink-0", children: i })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+const de = 6;
+function gt({
+  content: t,
+  placement: e = "bottom-start",
+  open: n,
+  onOpenChange: a,
+  matchTriggerWidth: o,
+  children: i,
+  className: l = ""
+}) {
+  const m = n !== void 0, [d, b] = S(!1), h = m ? n : d, c = D(null), s = D(null), [f, p] = S(null), g = C((x) => {
+    m || b(x), a == null || a(x);
+  }, [m, a]);
+  if (M(() => {
+    if (!h || !c.current) return;
+    const x = () => {
+      const w = c.current.getBoundingClientRect(), v = e.startsWith("bottom"), y = e.endsWith("end"), A = (v ? w.bottom + de : w.top - de) + window.scrollY, T = (y ? w.right : w.left) + window.scrollX;
+      p({ top: A, left: T, width: w.width });
+    };
+    return x(), window.addEventListener("scroll", x, !0), window.addEventListener("resize", x), () => {
+      window.removeEventListener("scroll", x, !0), window.removeEventListener("resize", x);
+    };
+  }, [h, e]), M(() => {
+    if (!h) return;
+    const x = (v) => {
+      var A, T;
+      const y = v.target;
+      (A = s.current) != null && A.contains(y) || (T = c.current) != null && T.contains(y) || g(!1);
+    }, w = (v) => {
+      v.key === "Escape" && g(!1);
+    };
+    return document.addEventListener("mousedown", x), document.addEventListener("keydown", w), () => {
+      document.removeEventListener("mousedown", x), document.removeEventListener("keydown", w);
+    };
+  }, [h, g]), !oe(i)) return i;
+  const N = i.props, $ = ie(i, {
+    ref: (x) => {
+      c.current = x;
+      const w = i.ref;
+      typeof w == "function" ? w(x) : w && "current" in w && (w.current = x);
+    },
+    "aria-expanded": h,
+    "aria-haspopup": "menu",
+    onClick: (x) => {
+      var w;
+      g(!h), (w = N.onClick) == null || w.call(N, x);
+    }
+  }), _ = e.endsWith("end"), E = e.startsWith("top"), k = h && f && typeof document < "u" ? z(
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: s,
+        role: "menu",
+        className: `fixed z-[2050] anicca-fade-in ${l}`,
+        style: {
+          top: f.top,
+          left: f.left,
+          transform: `translate(${_ ? "-100%" : "0"}, ${E ? "-100%" : "0"})`,
+          minWidth: o ? f.width : 180
+        },
+        children: /* @__PURE__ */ r("div", { className: "bg-surface border border-border rounded-lg shadow-md py-1.5 max-h-[60vh] overflow-y-auto dark:bg-surface dark:border-border", children: t })
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ u(Y, { children: [
+    $,
+    k
+  ] });
+}
+function vt({ className: t = "", children: e, ...n }) {
+  return /* @__PURE__ */ r("div", { role: "menu", className: `flex flex-col ${t}`, ...n, children: e });
+}
+function yt({
+  leftIcon: t,
+  rightIcon: e,
+  destructive: n,
+  shortcut: a,
+  className: o = "",
+  children: i,
+  ...l
+}) {
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: `flex items-center gap-2.5 px-3 py-2 text-left text-[0.85rem] cursor-pointer border-none bg-transparent transition-colors duration-150 hover:bg-surface-muted focus-visible:outline-none focus-visible:bg-surface-muted disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-surface-container dark:focus-visible:bg-surface-container ${n ? "text-danger hover:bg-danger/10 dark:hover:bg-danger/20" : "text-text dark:text-text"} ${o}`,
+      ...l,
+      children: [
+        t && /* @__PURE__ */ r("span", { className: "shrink-0 inline-flex items-center w-4 h-4", children: t }),
+        /* @__PURE__ */ r("span", { className: "flex-1 truncate", children: i }),
+        a && /* @__PURE__ */ r("span", { className: "text-[0.72rem] text-text-subtle font-mono ml-2", children: a }),
+        e && /* @__PURE__ */ r("span", { className: "shrink-0 inline-flex items-center w-4 h-4", children: e })
+      ]
+    }
+  );
+}
+function wt({ className: t = "" }) {
+  return /* @__PURE__ */ r("div", { role: "separator", className: `my-1 h-px bg-border ${t}` });
+}
+function kt({
+  className: t = "",
+  children: e,
+  ...n
+}) {
+  return /* @__PURE__ */ r("div", { className: `px-3 py-1.5 text-[0.68rem] uppercase tracking-[0.06em] font-semibold text-text-subtle ${t}`, ...n, children: e });
+}
+const Xe = {
+  noResults: "No results",
+  searchPlaceholder: "Type to search..."
+}, Qe = (t, e) => e.label.toLowerCase().includes(t.toLowerCase());
+function Nt({
+  options: t,
+  value: e,
+  defaultValue: n,
+  onChange: a,
+  filter: o = Qe,
+  renderOption: i,
+  label: l,
+  helper: m,
+  error: d,
+  placeholder: b,
+  required: h,
+  disabled: c,
+  allowCustomValue: s,
+  labels: f,
+  wrapperClassName: p = "",
+  className: g = ""
+}) {
+  const N = { ...Xe, ...f }, $ = O(), _ = e !== void 0, [E, k] = S(n ?? ""), x = _ ? e : E, w = t.find((L) => L.value === x), [v, y] = S((w == null ? void 0 : w.label) ?? ""), [A, T] = S(!1), [j, P] = S(0), ee = D(null), J = D(null), q = D(null);
+  M(() => {
+    w ? y(w.label) : s || y("");
+  }, [w, s]);
+  const I = Q(
+    () => t.filter((L) => o(v, L)),
+    [t, v, o]
+  );
+  M(() => {
+    P(0);
+  }, [v, A]), M(() => {
+    const L = (F) => {
+      var B;
+      (B = q.current) != null && B.contains(F.target) || T(!1);
+    };
+    return document.addEventListener("mousedown", L), () => document.removeEventListener("mousedown", L);
+  }, []);
+  const H = (L) => {
+    var F;
+    L.disabled || (_ || k(L.value), a == null || a(L.value), y(L.label), T(!1), (F = J.current) == null || F.blur());
+  }, he = (L) => {
+    var F;
+    if (L.key === "ArrowDown")
+      L.preventDefault(), T(!0), P((B) => Math.min(B + 1, I.length - 1));
+    else if (L.key === "ArrowUp")
+      L.preventDefault(), P((B) => Math.max(B - 1, 0));
+    else if (L.key === "Enter") {
+      L.preventDefault();
+      const B = I[j];
+      B ? H(B) : s && (_ || k(v), a == null || a(v), T(!1));
+    } else L.key === "Escape" && (T(!1), (F = J.current) == null || F.blur());
+  };
+  return /* @__PURE__ */ u("div", { ref: q, className: `flex flex-col gap-1.5 ${p}`, children: [
+    l && /* @__PURE__ */ u("label", { htmlFor: $, className: "text-[0.78rem] font-semibold text-text", children: [
+      l,
+      h && /* @__PURE__ */ r("span", { className: "text-danger ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ u("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        "input",
+        {
+          ref: J,
+          id: $,
+          type: "text",
+          role: "combobox",
+          "aria-expanded": A,
+          "aria-controls": `${$}-listbox`,
+          "aria-activedescendant": A ? `${$}-opt-${j}` : void 0,
+          autoComplete: "off",
+          disabled: c,
+          required: h,
+          value: v,
+          placeholder: b ?? N.searchPlaceholder,
+          onChange: (L) => {
+            y(L.target.value), T(!0);
+          },
+          onFocus: () => T(!0),
+          onKeyDown: he,
+          "aria-invalid": d ? !0 : void 0,
+          className: `w-full h-10 px-3 pr-9 text-[0.875rem] bg-surface border border-border rounded-lg text-text placeholder:text-text-subtle outline-none transition-[border-color,box-shadow] duration-200 focus:border-primary focus:ring-[var(--anicca-ring-width)] focus:ring-primary/20 dark:bg-surface dark:border-border dark:text-text dark:placeholder:text-text-subtle dark:focus:border-primary ${d ? "border-danger focus:border-danger focus:ring-danger/20" : ""} ${c ? "opacity-50 cursor-not-allowed bg-surface-muted dark:bg-surface-container" : ""} ${g}`
+        }
+      ),
+      /* @__PURE__ */ r(
+        "svg",
+        {
+          className: `absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted pointer-events-none transition-transform ${A ? "rotate-180" : ""}`,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ r("polyline", { points: "6 9 12 15 18 9", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      ),
+      A && /* @__PURE__ */ r(
+        "ul",
+        {
+          ref: ee,
+          id: `${$}-listbox`,
+          role: "listbox",
+          className: "absolute z-[2000] top-full left-0 right-0 mt-1 bg-surface border border-border rounded-lg shadow-md max-h-[260px] overflow-y-auto py-1.5 dark:bg-surface dark:border-border",
+          children: I.length === 0 ? /* @__PURE__ */ r("li", { className: "px-3 py-2 text-[0.82rem] text-text-subtle", children: N.noResults }) : I.map((L, F) => {
+            const B = F === j, se = L.value === x;
+            return /* @__PURE__ */ r(
+              "li",
+              {
+                id: `${$}-opt-${F}`,
+                role: "option",
+                "aria-selected": se,
+                onMouseEnter: () => P(F),
+                onMouseDown: (xe) => {
+                  xe.preventDefault(), H(L);
+                },
+                className: `px-3 py-2 cursor-pointer text-[0.85rem] flex flex-col gap-0.5 ${B ? "bg-surface-muted" : ""} ${se ? "text-primary font-semibold" : "text-text"} ${L.disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+                children: i ? i(L, B) : /* @__PURE__ */ u(Y, { children: [
+                  /* @__PURE__ */ r("span", { children: L.label }),
+                  L.description && /* @__PURE__ */ r("span", { className: "text-[0.72rem] text-text-muted", children: L.description })
+                ] })
+              },
+              L.value
+            );
+          })
+        }
+      )
+    ] }),
+    d ? /* @__PURE__ */ r("span", { className: "text-[0.72rem] text-danger font-medium", children: d }) : m ? /* @__PURE__ */ r("span", { className: "text-[0.72rem] text-text-muted", children: m }) : null
+  ] });
+}
+function $t({
   title: t,
   value: e,
-  icon: r,
+  icon: n,
   trend: a,
-  trendLabel: s,
-  color: o,
-  className: i = ""
-}) {
-  const p = a !== void 0 ? a > 0 ? "up" : a < 0 ? "down" : "neutral" : null, l = {
-    up: "text-a-success bg-a-success-bg",
-    down: "text-a-danger bg-a-danger-bg",
-    neutral: "text-a-text-muted bg-a-surface-muted"
+  trendLabel: o,
+  color: i,
+  className: l = ""
+}) {
+  const m = a !== void 0 ? a > 0 ? "up" : a < 0 ? "down" : "neutral" : null, d = {
+    up: "text-[#15803d] bg-[rgba(22,163,74,0.1)] dark:text-[#10b981] dark:bg-[rgba(16,185,129,0.18)]",
+    down: "text-[#dc2626] bg-[rgba(220,38,38,0.1)] dark:text-[#ef4444] dark:bg-[rgba(239,68,68,0.18)]",
+    neutral: "text-[#64748b] bg-[rgba(100,116,139,0.1)] dark:text-[#94a3b8] dark:bg-[rgba(100,116,139,0.18)]"
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: `relative bg-gradient-to-br from-a-surface to-a-surface-muted rounded-a p-6 border-l-4 shadow-a-sm transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] overflow-hidden hover:shadow-a-md hover:-translate-y-1 group ${i}`,
-      style: { borderLeftColor: o ?? "var(--anicca-primary)" },
+      className: `
+        relative overflow-hidden group
+        bg-surface-container-lowest rounded-[20px]
+        border border-on-surface/[0.06]
+        shadow-[0_1px_2px_rgba(11,28,48,0.04),0_12px_32px_-14px_rgba(11,28,48,0.14)]
+        dark:shadow-[0_1px_2px_rgba(0,0,0,0.3),0_12px_32px_-14px_rgba(0,0,0,0.5)]
+        transition-[transform,box-shadow] duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]
+        hover:-translate-y-[3px]
+        hover:shadow-[0_1px_2px_rgba(11,28,48,0.05),0_18px_44px_-16px_rgba(11,28,48,0.22)]
+        ${l}
+      `,
+      style: {
+        padding: "1.5rem 1.5rem 1.5rem 1.625rem",
+        borderLeft: `3px solid ${i ?? "rgb(var(--primary))"}`
+      },
       role: "group",
       "aria-label": `${t}: ${e}`,
       children: [
-        /* @__PURE__ */ c("div", { className: "flex justify-between items-start mb-3", children: [
-          /* @__PURE__ */ n("span", { className: "text-xs text-a-text-muted font-semibold uppercase tracking-[0.06em]", children: t }),
-          r && /* @__PURE__ */ n("span", { className: "text-2xl text-a-text-subtle opacity-80 transition-transform duration-300 ease-in-out group-hover:scale-110", children: r })
+        /* @__PURE__ */ r(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute top-0 right-0 w-[100px] h-[100px] rounded-full pointer-events-none",
+            style: { background: "radial-gradient(circle, rgb(var(--primary) / 0.05) 0%, transparent 70%)", transform: "translate(30%, -30%)" }
+          }
+        ),
+        /* @__PURE__ */ u("div", { className: "flex justify-between items-start mb-3", children: [
+          /* @__PURE__ */ r("span", { className: "text-[0.7rem] font-semibold text-outline uppercase tracking-[0.08em]", children: t }),
+          n && /* @__PURE__ */ r("span", { className: "text-2xl text-[#94a3b8] opacity-80 transition-transform duration-300 ease-in-out group-hover:scale-110", children: n })
         ] }),
-        /* @__PURE__ */ n("div", { className: "text-[2rem] font-extrabold text-a-text mb-3 tracking-tight leading-[1.1]", children: e }),
-        a !== void 0 && /* @__PURE__ */ c("div", { className: `inline-flex items-center gap-[0.35rem] text-[0.8rem] font-semibold py-1 px-[0.6rem] rounded-[20px] ${l[p || "neutral"]}`, children: [
-          /* @__PURE__ */ n("span", { className: "text-[0.7rem]", children: p === "up" ? "↑" : p === "down" ? "↓" : "→" }),
-          /* @__PURE__ */ c("span", { className: "font-bold", children: [
+        /* @__PURE__ */ r("div", { className: "text-[1.875rem] font-bold font-display text-on-surface mb-3 tracking-[-0.03em] leading-[1.1] [font-variant-numeric:tabular-nums]", children: e }),
+        a !== void 0 && m && /* @__PURE__ */ u("div", { className: `inline-flex items-center gap-[0.35rem] text-[0.8rem] font-semibold rounded-[20px] py-1 px-[0.6rem] ${d[m]}`, children: [
+          /* @__PURE__ */ r("span", { className: "text-[0.7rem]", children: m === "up" ? "↑" : m === "down" ? "↓" : "→" }),
+          /* @__PURE__ */ u("span", { className: "font-bold", children: [
             Math.abs(a),
             "%"
           ] }),
-          s && /* @__PURE__ */ n("span", { className: "text-a-text-subtle font-normal ml-2 text-xs", children: s })
+          o && /* @__PURE__ */ r("span", { className: "text-[#94a3b8] font-normal ml-2 text-[0.75rem]", children: o })
         ] })
       ]
     }
   );
 }
-const Y = {
-  loading: "Loading chart"
-};
-function xe({
+const er = { loading: "Loading chart" };
+function _t({
   title: t,
   subtitle: e,
-  children: r,
+  children: n,
   loading: a = !1,
-  empty: s = !1,
-  emptyMessage: o = "No data available",
-  height: i = 300,
-  labels: p,
-  className: l = ""
+  empty: o = !1,
+  emptyMessage: i = "No data available",
+  height: l = 300,
+  labels: m,
+  className: d = ""
 }) {
-  const h = typeof i == "number" ? `${i}px` : i, d = { ...Y, ...p };
-  return /* @__PURE__ */ c("div", { className: `bg-gradient-to-br from-a-surface to-a-surface-muted rounded-a p-7 shadow-a-sm border border-a-border ${l}`, children: [
-    /* @__PURE__ */ c("div", { className: "mb-5", children: [
-      /* @__PURE__ */ n("div", { className: "text-[1.05rem] font-bold text-a-text tracking-[-0.01em]", children: t }),
-      e && /* @__PURE__ */ n("div", { className: "text-[0.8rem] text-a-text-muted mt-[0.3rem] font-normal", children: e })
+  const b = typeof l == "number" ? `${l}px` : l, h = { ...er, ...m };
+  return /* @__PURE__ */ u("div", { className: `bg-surface-container-lowest rounded-[20px] p-[1.75rem] shadow-[0_1px_2px_rgba(11,28,48,0.04),0_12px_32px_-14px_rgba(11,28,48,0.14)] dark:shadow-[0_1px_2px_rgba(0,0,0,0.3),0_4px_12px_rgba(0,0,0,0.35)] border border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] ${d}`, children: [
+    /* @__PURE__ */ u("div", { className: "mb-5", children: [
+      /* @__PURE__ */ r("div", { className: "text-[1.05rem] font-semibold text-on-surface tracking-[-0.02em]", children: t }),
+      e && /* @__PURE__ */ r("div", { className: "text-[0.8rem] text-outline dark:text-[#94a3b8] mt-[0.3rem] font-normal", children: e })
     ] }),
-    /* @__PURE__ */ n("div", { className: "relative w-full rounded-xl overflow-hidden", style: { height: h }, children: a ? /* @__PURE__ */ n("div", { className: "w-full rounded-xl anicca-shimmer", style: { height: h }, "aria-label": d.loading }) : s ? /* @__PURE__ */ c("div", { className: "flex flex-col items-center justify-center text-a-text-subtle gap-4 anicca-empty-bg rounded-xl border-2 border-dashed border-a-border", style: { height: h }, children: [
-      /* @__PURE__ */ c(
-        "svg",
-        {
-          className: "w-14 h-14 opacity-40 stroke-[1.2]",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ n("path", { d: "M3 3v18h18", strokeLinecap: "round", strokeLinejoin: "round" }),
-            /* @__PURE__ */ n("path", { d: "M7 16l4-4 4 4 5-5", strokeLinecap: "round", strokeLinejoin: "round" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ n("span", { className: "text-[0.9rem] text-a-text-muted font-medium", children: o })
-    ] }) : r })
+    /* @__PURE__ */ r("div", { className: "relative w-full rounded-xl overflow-hidden", style: { height: b }, children: a ? /* @__PURE__ */ r("div", { className: "w-full rounded-xl anicca-shimmer", style: { height: b }, "aria-label": h.loading }) : o ? /* @__PURE__ */ u(
+      "div",
+      {
+        className: "anicca-empty-bg flex flex-col items-center justify-center gap-4 rounded-xl border-2 border-dashed border-[#e2e8f0] dark:border-[rgba(71,85,105,0.5)]",
+        style: { height: b },
+        children: [
+          /* @__PURE__ */ u("svg", { className: "w-14 h-14 opacity-40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [
+            /* @__PURE__ */ r("path", { d: "M3 3v18h18", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ r("path", { d: "M7 16l4-4 4 4 5-5", strokeLinecap: "round", strokeLinejoin: "round" })
+          ] }),
+          /* @__PURE__ */ r("span", { className: "text-[0.9rem] text-[#64748b] dark:text-[#94a3b8] font-medium", children: i })
+        ]
+      }
+    ) : n })
   ] });
 }
-const I = {
+const rr = {
   expand: "Expand sidebar",
   collapse: "Collapse sidebar",
   navigation: "Sidebar navigation"
 };
-function ge({
+function At({
   items: t,
   collapsed: e = !1,
-  onCollapse: r,
-  logo: a,
-  footer: s,
+  logo: n,
+  footer: a,
   activePath: o = "",
   labels: i,
-  className: p = ""
-}) {
-  const [l, h] = S({}), d = { ...I, ...i }, m = (v) => {
-    h((M) => ({ ...M, [v]: !M[v] }));
-  }, x = () => {
-    r == null || r(!e);
-  }, u = "flex items-center gap-3 py-[0.65rem] px-4 text-a-surface-dark-fg-muted no-underline text-sm font-medium cursor-pointer transition-all duration-200 ease-in-out border-none bg-transparent w-full text-left rounded-[10px] mb-[2px] hover:bg-a-surface-dark-2/60 hover:text-a-surface-dark-fg group/item", g = "bg-a-primary-soft text-a-primary hover:bg-a-primary-soft hover:text-a-primary", D = (v) => {
-    const M = o === v.href, T = v.children && v.children.length > 0, b = l[v.href];
-    return /* @__PURE__ */ c("div", { children: [
-      T ? /* @__PURE__ */ c(
+  className: l = ""
+}) {
+  const [m, d] = S({}), b = { ...rr, ...i }, h = (s) => d((f) => ({ ...f, [s]: !f[s] })), c = (s, f = !1) => {
+    var x;
+    const p = o === s.href, g = (((x = s.children) == null ? void 0 : x.length) ?? 0) > 0, N = m[s.href], $ = f ? "text-primary font-semibold dark:text-white dark:font-semibold" : [
+      "bg-primary-container/10 text-primary font-bold translate-x-1 rounded-lg",
+      "dark:bg-primary dark:text-white dark:shadow-lg dark:shadow-primary/20"
+    ].join(" "), _ = f ? "text-[#767586] hover:text-on-surface dark:text-[#64748b] dark:hover:text-[#e2e8f0]" : [
+      "text-on-surface-variant hover:bg-secondary-container/30 hover:text-on-surface",
+      "dark:text-secondary dark:hover:text-white dark:hover:bg-surface-container-highest/50"
+    ].join(" "), E = [
+      "flex items-center gap-3 px-4 py-3 text-[0.875rem] font-medium",
+      "cursor-pointer transition-all duration-200 border-none bg-transparent text-left no-underline",
+      f ? "pl-[2.75rem] text-[0.82rem]" : ""
+    ].join(" "), k = /* @__PURE__ */ u(Y, { children: [
+      s.icon && /* @__PURE__ */ r("span", { className: "shrink-0 w-5 flex items-center justify-center text-[1.1rem] transition-transform duration-200 ease-in-out group-hover/item:scale-110", children: s.icon }),
+      !e && /* @__PURE__ */ r("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis flex-1", children: s.label }),
+      g && !e && /* @__PURE__ */ r(
+        "span",
+        {
+          className: "ml-auto text-[0.65rem] transition-transform duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]",
+          style: { opacity: N ? 1 : 0.6, transform: N ? "rotate(90deg)" : "none" },
+          children: "▶"
+        }
+      )
+    ] });
+    return /* @__PURE__ */ u("div", { className: "group/item", children: [
+      g ? /* @__PURE__ */ r(
         "button",
         {
-          className: `${u} ${M ? g : ""}`,
-          onClick: () => m(v.href),
-          "aria-expanded": b,
-          children: [
-            v.icon && /* @__PURE__ */ n("span", { className: "shrink-0 w-5 flex items-center justify-center text-[1.1rem] transition-transform duration-200 ease-in-out group-hover/item:scale-110", children: v.icon }),
-            /* @__PURE__ */ n("span", { className: `whitespace-nowrap overflow-hidden text-ellipsis transition-opacity duration-200 ease-in-out ${e ? "hidden" : ""}`, children: v.label }),
-            !e && /* @__PURE__ */ n("span", { className: `ml-auto transition-transform duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] text-[0.65rem] opacity-60 ${b ? "rotate-90 opacity-100" : ""}`, children: "▶" })
-          ]
+          className: `${E} ${p ? $ : _}`,
+          onClick: () => h(s.href),
+          "aria-expanded": N,
+          children: k
         }
-      ) : /* @__PURE__ */ c(
+      ) : /* @__PURE__ */ r(
         "a",
         {
-          href: v.href,
-          className: `${u} ${M ? g : ""}`,
-          "aria-current": M ? "page" : void 0,
-          children: [
-            v.icon && /* @__PURE__ */ n("span", { className: "shrink-0 w-5 flex items-center justify-center text-[1.1rem] transition-transform duration-200 ease-in-out group-hover/item:scale-110", children: v.icon }),
-            /* @__PURE__ */ n("span", { className: `whitespace-nowrap overflow-hidden text-ellipsis transition-opacity duration-200 ease-in-out ${e ? "hidden" : ""}`, children: v.label })
-          ]
+          href: s.href,
+          className: `${E} ${p ? $ : _}`,
+          "aria-current": p ? "page" : void 0,
+          children: k
         }
       ),
-      T && !e && /* @__PURE__ */ n("div", { className: `pl-2 overflow-hidden transition-[max-height] duration-[350ms] ease-[cubic-bezier(0.4,0,0.2,1)] ${b ? "max-h-[500px]" : "max-h-0"}`, children: v.children.map(($) => /* @__PURE__ */ c(
-        "a",
+      g && !e && /* @__PURE__ */ r(
+        "div",
         {
-          href: $.href,
-          className: `${u} pl-11 text-[0.82rem] ${o === $.href ? g : ""}`,
-          "aria-current": o === $.href ? "page" : void 0,
-          children: [
-            $.icon && /* @__PURE__ */ n("span", { className: "shrink-0 w-5 flex items-center justify-center text-[1.1rem]", children: $.icon }),
-            /* @__PURE__ */ n("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: $.label })
-          ]
-        },
-        $.href
-      )) })
-    ] }, v.href);
+          className: "overflow-hidden transition-[max-height] duration-[350ms] ease-[cubic-bezier(0.4,0,0.2,1)]",
+          style: { maxHeight: N ? "500px" : "0" },
+          children: s.children.map((w) => c(w, !0))
+        }
+      )
+    ] }, s.href);
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ u(
     "aside",
     {
-      className: `flex flex-col h-screen sticky top-0 bg-gradient-to-b from-a-surface-dark to-a-surface-dark-2 text-a-surface-dark-fg transition-[width] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] overflow-hidden border-r border-a-border-dark shrink-0 ${e ? "w-[72px]" : "w-[260px]"} ${p}`,
+      className: `
+        flex flex-col h-screen sticky top-0 overflow-hidden shrink-0
+        bg-surface dark:bg-sidebar-bg
+        border-r border-on-surface/[0.08] dark:border-outline-variant/30
+        dark:shadow-2xl
+        transition-[width] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]
+        ${e ? "w-[72px]" : "w-[260px]"}
+        ${l}
+      `,
       role: "navigation",
-      "aria-label": d.navigation,
+      "aria-label": b.navigation,
       children: [
-        a && /* @__PURE__ */ n("div", { className: "flex items-center justify-center py-6 px-5 border-b border-a-border-dark min-h-[72px]", children: a }),
-        /* @__PURE__ */ n("nav", { className: "flex-1 overflow-y-auto py-3 px-2 min-h-0", children: t.map(D) }),
-        /* @__PURE__ */ c("div", { className: "p-4 border-t border-a-border-dark", children: [
-          s && !e && s,
-          /* @__PURE__ */ n(
-            "button",
-            {
-              className: "flex items-center justify-center w-full py-[0.6rem] bg-a-surface-dark-2/60 border border-a-border-dark rounded-lg text-a-surface-dark-fg-muted cursor-pointer text-[0.9rem] transition-all duration-200 ease-in-out hover:bg-a-surface-dark-2 hover:text-a-surface-dark-fg",
-              onClick: x,
-              "aria-label": e ? d.expand : d.collapse,
-              children: e ? "→" : "←"
-            }
-          )
-        ] })
+        n && /* @__PURE__ */ r("div", { className: `
+          flex items-center px-5 shrink-0
+          h-[68px] border-b border-on-surface/[0.08] dark:border-outline-variant/30
+          ${e ? "justify-center" : ""}
+        `, children: n }),
+        /* @__PURE__ */ r(
+          "nav",
+          {
+            className: "flex-1 flex flex-col gap-1 overflow-y-auto py-3 min-h-0 [scrollbar-width:thin] [scrollbar-color:rgb(var(--outline-variant))_transparent] dark:[scrollbar-color:#334155_transparent]",
+            children: t.map((s) => c(s))
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: `
+        pt-4 pb-4 border-t border-outline-variant/10 shrink-0
+      `, children: a && !e && /* @__PURE__ */ r("div", { className: "px-4 dark:px-0 mb-2", children: a }) })
       ]
     }
   );
 }
-const U = {
-  toggleMenu: "Toggle menu"
-};
-function ye({
+const tr = { toggleMenu: "Toggle menu" };
+function Lt({
   title: t,
   logo: e,
-  actions: r,
+  actions: n,
   user: a,
-  onMenuToggle: s,
-  labels: o,
-  className: i = ""
+  onMenuToggle: o,
+  labels: i,
+  className: l = ""
 }) {
-  const p = { ...U, ...o }, l = (h) => h.split(" ").map((d) => d[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ c("header", { className: `flex items-center justify-between px-7 h-[68px] bg-a-surface/90 backdrop-blur-[12px] border-b border-a-border shadow-a-sm sticky top-0 z-[100] ${i}`, role: "banner", children: [
-    /* @__PURE__ */ c("div", { className: "flex items-center gap-[0.85rem]", children: [
-      s && /* @__PURE__ */ n(
-        "button",
-        {
-          className: "flex items-center justify-center w-[38px] h-[38px] border border-a-border bg-a-surface-muted rounded-[10px] cursor-pointer text-a-text-muted text-[1.2rem] transition-all duration-200 ease-in-out hover:bg-a-border hover:text-a-text",
-          onClick: s,
-          "aria-label": p.toggleMenu,
-          children: "☰"
-        }
-      ),
-      e && /* @__PURE__ */ n("div", { className: "flex items-center", children: e }),
-      t && /* @__PURE__ */ n("span", { className: "text-[1.1rem] font-bold text-a-text tracking-[-0.01em]", children: t })
-    ] }),
-    /* @__PURE__ */ c("div", { className: "flex items-center gap-5", children: [
-      r && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: r }),
-      a && /* @__PURE__ */ c("div", { className: "flex items-center gap-3 py-[0.4rem] pr-[0.6rem] pl-[0.4rem] rounded-xl transition-colors duration-200 ease-in-out hover:bg-a-surface-muted", children: [
-        /* @__PURE__ */ n(
-          "div",
-          {
-            className: "w-[38px] h-[38px] rounded-[10px] text-a-primary-fg flex items-center justify-center text-[0.8rem] font-bold overflow-hidden",
-            style: { background: "var(--anicca-primary)" },
-            children: a.avatar ? /* @__PURE__ */ n("img", { src: a.avatar, alt: a.name, className: "w-full h-full object-cover" }) : l(a.name)
-          }
-        ),
-        /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ n("span", { className: "text-[0.85rem] font-semibold text-a-text", children: a.name }),
-          a.role && /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-a-text-muted font-normal", children: a.role })
+  const m = { ...tr, ...i }, d = (b) => b.split(" ").map((h) => h[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ u(
+    "header",
+    {
+      className: `glass flex items-center justify-between px-7 h-[68px] sticky top-0 z-[100] border-b border-on-surface/[0.06] shadow-[0_1px_2px_rgba(11,28,48,0.03)] dark:border-outline-variant/50 dark:shadow-[0_1px_3px_rgba(0,0,0,0.3)] ${l}`,
+      role: "banner",
+      children: [
+        /* @__PURE__ */ u("div", { className: "flex items-center gap-[0.85rem]", children: [
+          o && /* @__PURE__ */ r(
+            "button",
+            {
+              className: "flex items-center justify-center w-[38px] h-[38px] rounded-[10px] cursor-pointer text-[1.2rem] transition-all duration-200 ease-in-out text-[#475569] border border-[rgba(226,232,240,0.8)] bg-[rgba(248,250,252,0.8)] hover:bg-[#f1f5f9] hover:border-[#cbd5e1] hover:text-[#1e293b] dark:bg-[rgba(30,41,59,0.7)] dark:border-[rgba(71,85,105,0.5)] dark:text-[#94a3b8] dark:hover:bg-[rgba(71,85,105,0.4)] dark:hover:border-[rgba(100,116,139,0.5)] dark:hover:text-on-surface",
+              onClick: o,
+              "aria-label": m.toggleMenu,
+              children: "☰"
+            }
+          ),
+          e && /* @__PURE__ */ r("div", { className: "flex items-center", children: e }),
+          t && /* @__PURE__ */ r("span", { className: "text-[1.1rem] font-semibold text-on-surface tracking-[-0.02em]", children: t })
+        ] }),
+        /* @__PURE__ */ u("div", { className: "flex items-center gap-5", children: [
+          n && /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: n }),
+          a && /* @__PURE__ */ u(
+            "div",
+            {
+              className: "flex items-center gap-3 rounded-xl transition-colors duration-200 ease-in-out hover:bg-[rgba(241,245,249,0.8)] dark:hover:bg-[rgba(71,85,105,0.3)] cursor-default",
+              style: { padding: "0.4rem 0.6rem 0.4rem 0.4rem" },
+              children: [
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: "w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-[0.8rem] font-bold text-white overflow-hidden shrink-0",
+                    style: {
+                      background: "linear-gradient(135deg, #3b82f6 0%, #6366f1 100%)",
+                      boxShadow: "0 2px 8px rgba(59,130,246,0.25)"
+                    },
+                    children: a.avatar ? /* @__PURE__ */ r("img", { src: a.avatar, alt: a.name, className: "w-full h-full object-cover" }) : d(a.name)
+                  }
+                ),
+                /* @__PURE__ */ u("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ r("span", { className: "text-[0.85rem] font-semibold text-[#0f172a] dark:text-on-surface", children: a.name }),
+                  a.role && /* @__PURE__ */ r("span", { className: "text-[0.7rem] text-[#64748b] dark:text-[#94a3b8] font-normal", children: a.role })
+                ] })
+              ]
+            }
+          )
         ] })
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
-function ve({
+function St({
   items: t,
   separator: e = "/",
-  ariaLabel: r = "Breadcrumb",
+  ariaLabel: n = "Breadcrumb",
   className: a = ""
 }) {
-  return /* @__PURE__ */ n("nav", { className: `py-[0.6rem] ${a}`, "aria-label": r, children: /* @__PURE__ */ n("ol", { className: "flex items-center list-none m-0 p-0 flex-wrap", children: t.map((s, o) => {
-    const i = o === t.length - 1;
-    return /* @__PURE__ */ n("li", { className: "flex items-center", children: i ? /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-[0.35rem] text-a-text text-[0.82rem] font-bold py-[0.3rem] px-[0.7rem] bg-a-surface-muted rounded-md", children: [
-      s.icon && /* @__PURE__ */ n("span", { className: "flex items-center text-[0.85rem]", children: s.icon }),
-      s.label
-    ] }) : /* @__PURE__ */ c(O, { children: [
-      /* @__PURE__ */ c("a", { href: s.href || "#", className: "inline-flex items-center gap-[0.35rem] text-a-text-muted no-underline text-[0.82rem] font-medium py-[0.3rem] px-[0.6rem] rounded-md transition-all duration-200 ease-in-out hover:text-a-primary hover:bg-a-primary-soft", children: [
-        s.icon && /* @__PURE__ */ n("span", { className: "flex items-center text-[0.85rem]", children: s.icon }),
-        s.label
-      ] }),
-      /* @__PURE__ */ n("span", { className: "mx-1 text-a-text-subtle text-xs select-none", "aria-hidden": "true", children: e })
-    ] }) }, `${s.label}-${o}`);
+  return /* @__PURE__ */ r("nav", { className: `py-[0.6rem] ${a}`, "aria-label": n, children: /* @__PURE__ */ r("ol", { className: "flex items-center list-none m-0 p-0 flex-wrap", children: t.map((o, i) => {
+    const l = i === t.length - 1;
+    return /* @__PURE__ */ r("li", { className: "flex items-center", children: l ? /* @__PURE__ */ u("span", { className: "inline-flex items-center gap-[0.35rem] text-[#0f172a] dark:text-on-surface text-[0.82rem] font-bold py-[0.3rem] px-[0.7rem] bg-[rgba(15,23,42,0.05)] dark:bg-[rgba(71,85,105,0.4)] rounded-[6px]", children: [
+      o.icon && /* @__PURE__ */ r("span", { className: "flex items-center text-[0.85rem]", children: o.icon }),
+      o.label
+    ] }) : /* @__PURE__ */ u(Y, { children: [
+      /* @__PURE__ */ u(
+        "a",
+        {
+          href: o.href || "#",
+          className: "inline-flex items-center gap-[0.35rem] text-[#64748b] dark:text-[#94a3b8] no-underline text-[0.82rem] font-medium py-[0.3rem] px-[0.6rem] rounded-[6px] transition-all duration-200 ease-in-out hover:text-[#3b82f6] hover:bg-[rgba(59,130,246,0.08)] dark:hover:bg-[rgba(59,130,246,0.12)]",
+          children: [
+            o.icon && /* @__PURE__ */ r("span", { className: "flex items-center text-[0.85rem]", children: o.icon }),
+            o.label
+          ]
+        }
+      ),
+      /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "mx-1 text-[#cbd5e1] dark:text-[#475569] text-[0.75rem] select-none", children: e })
+    ] }) }, `${o.label}-${i}`);
   }) }) });
 }
-const J = {
+const nr = {
   searchPlaceholder: "Search...",
   results: "results",
   emptyMessage: "No data found",
@@ -290,448 +1903,517 @@ const J = {
   previous: "← Prev",
   next: "Next →"
 };
-function Ne({
+function Tt({
   data: t,
   columns: e,
-  searchable: r = !0,
-  pageSize: a = 5,
-  className: s = "",
-  labels: o
-}) {
-  const [i, p] = S(""), [l, h] = S(null), [d, m] = S(!0), [x, u] = S(0), g = { ...J, ...o }, D = F(() => {
-    let b = t;
-    if (i) {
-      const $ = i.toLowerCase();
-      b = b.filter(
-        (f) => e.some((N) => String(f[N.key] ?? "").toLowerCase().includes($))
-      );
+  searchable: n = !0,
+  searchPlaceholder: a,
+  pageSize: o = 5,
+  className: i = "",
+  labels: l
+}) {
+  const [m, d] = S(""), [b, h] = S(null), [c, s] = S(!0), [f, p] = S(0), g = { ...nr, ...l }, N = Q(() => {
+    let k = t;
+    if (m) {
+      const x = m.toLowerCase();
+      k = k.filter((w) => e.some((v) => String(w[v.key] ?? "").toLowerCase().includes(x)));
     }
-    return l && (b = [...b].sort(($, f) => {
-      const N = String($[l] ?? ""), y = String(f[l] ?? ""), w = N.localeCompare(y, void 0, { numeric: !0 });
-      return d ? w : -w;
-    })), b;
-  }, [t, i, l, d, e]), v = a > 0 ? Math.ceil(D.length / a) : 1, M = a > 0 ? D.slice(x * a, (x + 1) * a) : D, T = (b) => {
-    l === b ? m(!d) : (h(b), m(!0));
+    return b && (k = [...k].sort((x, w) => {
+      const v = String(x[b] ?? ""), y = String(w[b] ?? "");
+      return c ? v.localeCompare(y, void 0, { numeric: !0 }) : y.localeCompare(v, void 0, { numeric: !0 });
+    })), k;
+  }, [t, m, b, c, e]), $ = o > 0 ? Math.ceil(N.length / o) : 1, _ = o > 0 ? N.slice(f * o, (f + 1) * o) : N, E = (k) => {
+    b === k ? s(!c) : (h(k), s(!0));
   };
-  return /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a shadow-a-sm border border-a-border overflow-hidden ${s}`, children: [
-    r && /* @__PURE__ */ c("div", { className: "flex items-center justify-between py-5 px-6 border-b border-a-border", children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-2 bg-a-surface-muted border-[1.5px] border-a-border rounded-[10px] py-2 px-[0.85rem] transition-colors focus-within:border-a-primary focus-within:shadow-[0_0_0_3px_var(--anicca-primary-soft)]", children: [
-        /* @__PURE__ */ n("span", { className: "text-[0.85rem] opacity-50", children: "🔍" }),
-        /* @__PURE__ */ n(
+  return /* @__PURE__ */ u("div", { className: `bg-surface-container-lowest rounded-[20px] shadow-[0_1px_2px_rgba(11,28,48,0.04),0_12px_32px_-14px_rgba(11,28,48,0.14)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.3)] border border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] overflow-hidden ${i}`, children: [
+    n && /* @__PURE__ */ u("div", { className: "flex items-center justify-between py-5 px-6 border-b border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)]", children: [
+      /* @__PURE__ */ u("div", { className: "flex items-center gap-2 bg-[#f8fafc] dark:bg-background border border-on-surface/[0.08] dark:border-[rgba(71,85,105,0.5)] rounded-[10px] py-2 px-[0.85rem] transition-[border-color,box-shadow] duration-200 focus-within:border-primary focus-within:shadow-[0_0_0_3px_rgb(var(--primary)/0.12)] dark:focus-within:border-primary dark:focus-within:shadow-[0_0_0_3px_rgba(59,130,246,0.15)]", children: [
+        /* @__PURE__ */ u("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "shrink-0 text-outline", "aria-hidden": "true", children: [
+          /* @__PURE__ */ r("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ r("path", { d: "m21 21-4.35-4.35", strokeLinecap: "round" })
+        ] }),
+        /* @__PURE__ */ r(
           "input",
           {
-            className: "border-none bg-transparent outline-none text-[0.85rem] font-[inherit] text-a-text w-[200px] placeholder:text-a-text-subtle",
-            value: i,
-            onChange: (b) => {
-              p(b.target.value), u(0);
-            },
-            placeholder: g.searchPlaceholder
+            className: "border-none bg-transparent outline-none text-[0.85rem] font-[inherit] text-on-surface dark:text-on-surface w-[200px] placeholder:text-[#94a3b8] dark:placeholder:text-[#64748b]",
+            placeholder: a ?? g.searchPlaceholder,
+            value: m,
+            onChange: (k) => {
+              d(k.target.value), p(0);
+            }
           }
         )
       ] }),
-      /* @__PURE__ */ c("span", { className: "text-xs text-a-text-subtle font-medium", children: [
-        D.length,
+      /* @__PURE__ */ u("span", { className: "text-[0.75rem] font-medium text-[#94a3b8]", children: [
+        N.length,
         " ",
         g.results
       ] })
     ] }),
-    /* @__PURE__ */ n("div", { className: "overflow-x-auto", children: /* @__PURE__ */ c("table", { className: "w-full border-collapse border-spacing-0", children: [
-      /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ n("tr", { children: e.map((b) => /* @__PURE__ */ c(
+    /* @__PURE__ */ r("div", { className: "overflow-x-auto", children: /* @__PURE__ */ u("table", { className: "w-full border-separate border-spacing-0", children: [
+      /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: e.map((k) => /* @__PURE__ */ u(
         "th",
         {
-          className: `text-left py-3 px-5 text-[0.7rem] font-semibold text-a-text-muted uppercase tracking-[0.05em] bg-a-surface-muted whitespace-nowrap ${b.sortable ? "cursor-pointer select-none transition-colors duration-150 hover:text-a-text" : ""}`,
-          style: b.width ? { width: b.width } : void 0,
-          onClick: b.sortable ? () => T(b.key) : void 0,
+          className: `text-left py-[0.9rem] px-5 text-[0.68rem] font-semibold text-[#767586] dark:text-[#94a3b8] uppercase tracking-[0.08em] bg-transparent dark:bg-background border-b border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] whitespace-nowrap ${k.sortable ? "cursor-pointer select-none transition-colors duration-150 hover:text-on-surface dark:hover:text-on-surface" : ""}`,
+          style: k.width ? { width: k.width } : void 0,
+          onClick: k.sortable ? () => E(k.key) : void 0,
           children: [
-            b.label,
-            b.sortable && l === b.key && /* @__PURE__ */ n("span", { className: "text-[0.7rem]", children: d ? " ↑" : " ↓" })
+            k.label,
+            k.sortable && b === k.key && /* @__PURE__ */ r("span", { className: "text-[0.7rem] ml-1", children: c ? "↑" : "↓" })
           ]
         },
-        b.key
+        k.key
       )) }) }),
-      /* @__PURE__ */ n("tbody", { children: M.length === 0 ? /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", { colSpan: e.length, className: "py-12 px-6 text-center text-a-text-subtle text-[0.9rem]", children: g.emptyMessage }) }) : M.map((b, $) => /* @__PURE__ */ n("tr", { className: "transition-colors duration-150 hover:[&>td]:bg-a-surface-muted", children: e.map((f) => /* @__PURE__ */ n("td", { className: "py-[0.85rem] px-5 text-[0.85rem] border-b border-a-border align-middle last:border-b-0 text-a-text", children: f.render ? f.render(b[f.key], b) : String(b[f.key] ?? "") }, f.key)) }, $)) })
+      /* @__PURE__ */ r("tbody", { children: _.length === 0 ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: e.length, className: "py-12 px-6 text-center text-[#94a3b8] text-[0.85rem]", children: g.emptyMessage }) }) : _.map((k, x) => /* @__PURE__ */ r("tr", { className: "group", children: e.map((w) => /* @__PURE__ */ r(
+        "td",
+        {
+          className: `py-4 px-5 text-[0.85rem] text-on-surface dark:text-[#cbd5e1] align-middle border-b border-on-surface/[0.05] dark:border-[rgba(51,65,85,0.4)] last:border-b-0 transition-colors duration-150 group-hover:bg-primary/[0.07] dark:group-hover:bg-[rgba(71,85,105,0.35)] ${x % 2 !== 0 ? "bg-surface-container-low/40 dark:bg-[rgba(51,65,85,0.25)]" : ""}`,
+          children: w.render ? w.render(k[w.key], k) : String(k[w.key] ?? "")
+        },
+        w.key
+      )) }, x)) })
     ] }) }),
-    a > 0 && v > 1 && /* @__PURE__ */ c("div", { className: "flex items-center justify-center gap-4 py-4 px-6 border-t border-a-border", children: [
-      /* @__PURE__ */ n(
+    o > 0 && $ > 1 && /* @__PURE__ */ u("div", { className: "flex items-center justify-center gap-4 py-4 px-6 border-t border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)]", children: [
+      /* @__PURE__ */ r(
         "button",
         {
-          className: "py-[0.4rem] px-[0.85rem] border-[1.5px] border-a-border rounded-lg bg-a-surface text-[0.78rem] font-medium text-a-text-muted cursor-pointer transition-all duration-150 font-[inherit] hover:enabled:border-a-primary hover:enabled:text-a-primary disabled:opacity-40 disabled:cursor-not-allowed",
-          disabled: x === 0,
-          onClick: () => u(x - 1),
+          className: "py-[0.45rem] px-[0.9rem] border border-on-surface/10 dark:border-[rgba(71,85,105,0.5)] rounded-[10px] bg-surface-container-lowest dark:bg-[#1e293b] text-[0.78rem] font-semibold text-[#565e74] dark:text-[#cbd5e1] cursor-pointer font-[inherit] transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed hover:enabled:border-primary hover:enabled:text-primary hover:enabled:bg-primary/[0.04] dark:hover:enabled:border-[#3b82f6] dark:hover:enabled:text-[#3b82f6]",
+          disabled: f === 0,
+          onClick: () => p(f - 1),
           children: g.previous
         }
       ),
-      /* @__PURE__ */ c("span", { className: "text-[0.78rem] text-a-text-muted font-medium", children: [
+      /* @__PURE__ */ u("span", { className: "text-[0.78rem] text-[#64748b] dark:text-[#94a3b8] font-medium", children: [
         g.page,
         " ",
-        x + 1,
+        f + 1,
         " ",
         g.of,
         " ",
-        v
+        $
       ] }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ r(
         "button",
         {
-          className: "py-[0.4rem] px-[0.85rem] border-[1.5px] border-a-border rounded-lg bg-a-surface text-[0.78rem] font-medium text-a-text-muted cursor-pointer transition-all duration-150 font-[inherit] hover:enabled:border-a-primary hover:enabled:text-a-primary disabled:opacity-40 disabled:cursor-not-allowed",
-          disabled: x >= v - 1,
-          onClick: () => u(x + 1),
+          className: "py-[0.45rem] px-[0.9rem] border border-on-surface/10 dark:border-[rgba(71,85,105,0.5)] rounded-[10px] bg-surface-container-lowest dark:bg-[#1e293b] text-[0.78rem] font-semibold text-[#565e74] dark:text-[#cbd5e1] cursor-pointer font-[inherit] transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed hover:enabled:border-primary hover:enabled:text-primary hover:enabled:bg-primary/[0.04] dark:hover:enabled:border-[#3b82f6] dark:hover:enabled:text-[#3b82f6]",
+          disabled: f >= $ - 1,
+          onClick: () => p(f + 1),
           children: g.next
         }
       )
     ] })
   ] });
 }
-function we({
+function Ct({
   items: t,
   title: e,
-  badge: r,
+  badge: n,
   className: a = ""
 }) {
-  const s = e && e.length > 0 || r;
-  return /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a p-6 shadow-a-sm border border-a-border ${a}`, children: [
-    s && /* @__PURE__ */ c("div", { className: "flex justify-between items-center mb-5", children: [
-      e ? /* @__PURE__ */ n("span", { className: "text-[0.95rem] font-bold text-a-text", children: e }) : /* @__PURE__ */ n("span", {}),
-      r && /* @__PURE__ */ n("span", { children: r })
+  const o = e && e.length > 0 || n;
+  return /* @__PURE__ */ u("div", { className: `bg-surface-container-lowest rounded-[20px] p-6 shadow-[0_1px_2px_rgba(11,28,48,0.04),0_12px_32px_-14px_rgba(11,28,48,0.14)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.3)] border border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] ${a}`, children: [
+    o && /* @__PURE__ */ u("div", { className: "flex justify-between items-center mb-5", children: [
+      e ? /* @__PURE__ */ r("span", { className: "text-[0.95rem] font-bold text-[#0f172a] dark:text-on-surface", children: e }) : /* @__PURE__ */ r("span", {}),
+      n && /* @__PURE__ */ r("span", { children: n })
     ] }),
-    /* @__PURE__ */ n("div", { className: "flex flex-col", children: t.map((o, i) => /* @__PURE__ */ c("div", { className: "flex gap-[0.85rem] py-[0.85rem] relative", children: [
-      i < t.length - 1 && /* @__PURE__ */ n("div", { className: "absolute left-[18px] top-[48px] bottom-0 w-[1.5px] bg-gradient-to-b from-a-border to-transparent" }),
-      /* @__PURE__ */ n(
+    /* @__PURE__ */ r("div", { className: "flex flex-col", children: t.map((i, l) => /* @__PURE__ */ u("div", { className: "flex gap-[0.85rem] py-[0.85rem] relative", children: [
+      l < t.length - 1 && /* @__PURE__ */ r(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute left-[18px] top-[48px] bottom-0 w-[1.5px]",
+          style: { background: "linear-gradient(180deg, rgb(var(--outline-variant)), transparent)" }
+        }
+      ),
+      /* @__PURE__ */ r(
         "div",
         {
           className: "w-9 h-9 rounded-[10px] flex items-center justify-center text-[0.95rem] shrink-0 relative z-[1]",
-          style: { background: o.iconBg || "var(--anicca-surface-muted)" },
-          children: o.icon
+          style: { background: i.iconBg || "rgb(var(--surface-container-low))" },
+          children: i.icon
         }
       ),
-      /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ n("div", { className: "text-[0.82rem] text-a-text leading-relaxed", children: o.message }),
-        /* @__PURE__ */ n("div", { className: "text-[0.7rem] text-a-text-subtle mt-[0.2rem]", children: o.time })
+      /* @__PURE__ */ u("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ r("div", { className: "text-[0.82rem] text-[#334155] dark:text-[#cbd5e1] leading-[1.5]", children: i.message }),
+        /* @__PURE__ */ r("div", { className: "text-[0.7rem] text-[#94a3b8] mt-[0.2rem]", children: i.time })
       ] })
-    ] }, i)) })
+    ] }, l)) })
   ] });
 }
-const V = {
-  unit: "projects"
-};
-function ke({
+const ar = { unit: "projects" };
+function Et({
   items: t,
   title: e,
-  showCount: r = !0,
+  showCount: n = !0,
   labels: a,
-  className: s = ""
+  className: o = ""
 }) {
-  const o = { ...V, ...a };
-  return /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a p-6 shadow-a-sm border border-a-border ${s}`, children: [
-    e && /* @__PURE__ */ c("div", { className: "flex justify-between items-center mb-5", children: [
-      /* @__PURE__ */ n("span", { className: "text-[0.95rem] font-bold text-a-text", children: e }),
-      r && /* @__PURE__ */ c("span", { className: "text-[0.68rem] py-[0.2rem] px-[0.55rem] rounded-[20px] font-semibold bg-a-info-bg text-a-info", children: [
+  const i = { ...ar, ...a };
+  return /* @__PURE__ */ u("div", { className: `bg-surface-container-lowest rounded-[20px] p-6 shadow-[0_1px_2px_rgba(11,28,48,0.04),0_12px_32px_-14px_rgba(11,28,48,0.14)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.3)] border border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] ${o}`, children: [
+    e && /* @__PURE__ */ u("div", { className: "flex justify-between items-center mb-5", children: [
+      /* @__PURE__ */ r("span", { className: "text-[0.95rem] font-bold text-[#0f172a] dark:text-on-surface", children: e }),
+      n && /* @__PURE__ */ u("span", { className: "text-[0.68rem] font-semibold py-[0.2rem] px-[0.55rem] rounded-[20px] bg-[#f5f3ff] text-violet dark:bg-[rgba(59,130,246,0.18)] dark:text-[#3b82f6]", children: [
         t.length,
         " ",
-        o.unit
+        i.unit
       ] })
     ] }),
-    t.map((i, p) => {
-      const l = i.color || "var(--anicca-primary)";
-      return /* @__PURE__ */ c("div", { className: `py-[0.85rem] border-b border-a-border last:border-b-0 last:pb-0 ${p === 0 && !e ? "pt-0" : ""}`, children: [
-        /* @__PURE__ */ c("div", { className: "flex justify-between items-center mb-2", children: [
-          /* @__PURE__ */ n("span", { className: "text-[0.85rem] font-semibold text-a-text", children: i.name }),
-          /* @__PURE__ */ c("span", { className: "text-xs font-bold", style: { color: l }, children: [
-            i.progress,
-            "%"
-          ] })
-        ] }),
-        /* @__PURE__ */ n("div", { className: "h-[7px] bg-a-surface-muted rounded overflow-hidden", children: /* @__PURE__ */ n("div", { className: "h-full rounded transition-[width] duration-500 ease-in-out", style: { width: `${i.progress}%`, background: l } }) }),
-        (i.status || i.team) && /* @__PURE__ */ c("div", { className: "flex justify-between items-center mt-[0.4rem]", children: [
-          i.status && /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-a-text-subtle", children: i.status }),
-          i.team && /* @__PURE__ */ n("div", { className: "flex", children: i.team.map((h, d) => {
-            const m = typeof h == "string" ? h : h.color, x = typeof h == "string" ? String.fromCharCode(65 + d) : h.label ?? String.fromCharCode(65 + d);
-            return /* @__PURE__ */ n("div", { className: "w-[22px] h-[22px] rounded-full border-2 border-a-surface -ml-[6px] first:ml-0 flex items-center justify-center text-[0.55rem] font-bold text-a-primary-fg", style: { background: m }, children: x }, d);
-          }) })
-        ] })
-      ] }, i.name);
+    t.map((l, m) => {
+      const d = l.color || "rgb(var(--primary))";
+      return /* @__PURE__ */ u(
+        "div",
+        {
+          className: `py-[0.85rem] ${m < t.length - 1 ? "border-b border-[#f8fafc] dark:border-[rgba(51,65,85,0.4)]" : "border-b-0 pb-0"} ${m === 0 && !e ? "pt-0" : ""}`,
+          children: [
+            /* @__PURE__ */ u("div", { className: "flex justify-between items-center mb-2", children: [
+              /* @__PURE__ */ r("span", { className: "text-[0.85rem] font-semibold text-[#0f172a] dark:text-on-surface", children: l.name }),
+              /* @__PURE__ */ u("span", { className: "text-[0.75rem] font-bold", style: { color: d }, children: [
+                l.progress,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ r("div", { className: "h-[7px] bg-[#f1f5f9] dark:bg-[rgba(71,85,105,0.4)] rounded overflow-hidden", children: /* @__PURE__ */ r(
+              "div",
+              {
+                className: "h-full rounded transition-[width] duration-500 ease-in-out",
+                style: { width: `${l.progress}%`, background: d }
+              }
+            ) }),
+            (l.status || l.team) && /* @__PURE__ */ u("div", { className: "flex justify-between items-center mt-[0.4rem]", children: [
+              l.status && /* @__PURE__ */ r("span", { className: "text-[0.7rem] text-[#94a3b8]", children: l.status }),
+              l.team && /* @__PURE__ */ r("div", { className: "flex", children: l.team.map((b, h) => {
+                const c = typeof b == "string" ? b : b.color, s = typeof b == "string" ? String.fromCharCode(65 + h) : b.label ?? String.fromCharCode(65 + h);
+                return /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: "w-[22px] h-[22px] rounded-full border-2 border-surface-container-lowest dark:border-[#1e293b] flex items-center justify-center text-[0.55rem] font-bold text-white",
+                    style: { background: c, marginLeft: h === 0 ? 0 : "-6px" },
+                    children: s
+                  },
+                  h
+                );
+              }) })
+            ] })
+          ]
+        },
+        l.name
+      );
     })
   ] });
 }
-const P = {
-  close: "Close"
-};
-function $e({
+const or = { close: "Close" };
+function Mt({
   open: t,
   onClose: e,
-  title: r,
+  title: n,
   children: a,
-  footer: s,
-  disableEscapeKey: o = !1,
-  disableBackdropClick: i = !1,
-  labels: p,
-  className: l = ""
+  footer: o,
+  disableEscapeKey: i = !1,
+  disableBackdropClick: l = !1,
+  labels: m,
+  className: d = ""
 }) {
-  const h = { ...P, ...p };
-  return E(() => {
-    if (!t || o) return;
-    const d = (m) => {
-      m.key === "Escape" && e();
+  const b = { ...or, ...m };
+  return M(() => {
+    if (!t || i) return;
+    const h = (c) => {
+      c.key === "Escape" && e();
     };
-    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
-  }, [t, e, o]), E(() => {
+    return document.addEventListener("keydown", h), () => document.removeEventListener("keydown", h);
+  }, [t, e, i]), M(() => {
     if (t)
       return document.body.style.overflow = "hidden", () => {
         document.body.style.overflow = "";
       };
-  }, [t]), t ? /* @__PURE__ */ n(
+  }, [t]), t ? /* @__PURE__ */ r(
     "div",
     {
       className: "fixed inset-0 backdrop-blur-[4px] flex items-center justify-center z-[1000] anicca-fade-in p-4",
-      style: { background: "var(--anicca-surface-overlay)" },
-      onClick: i ? void 0 : e,
+      style: { background: "rgba(15,23,42,0.6)" },
+      onClick: l ? void 0 : e,
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": r,
-      children: /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a shadow-a-lg w-full max-w-[480px] max-h-[90vh] overflow-y-auto anicca-slide-up ${l}`, onClick: (d) => d.stopPropagation(), children: [
-        r && /* @__PURE__ */ c("div", { className: "flex items-center justify-between py-5 px-6 border-b border-a-border", children: [
-          /* @__PURE__ */ n("span", { className: "text-base font-bold text-a-text", children: r }),
-          /* @__PURE__ */ n("button", { className: "w-8 h-8 rounded-lg border-none bg-a-surface-muted text-a-text-muted text-[1.1rem] cursor-pointer flex items-center justify-center transition-all duration-150 hover:bg-a-border hover:text-a-text", onClick: e, "aria-label": h.close, children: "×" })
-        ] }),
-        /* @__PURE__ */ n("div", { className: "p-6 text-a-text", children: a }),
-        s && /* @__PURE__ */ n("div", { className: "flex justify-end gap-3 py-4 px-6 border-t border-a-border", children: s })
-      ] })
+      "aria-label": n,
+      children: /* @__PURE__ */ u(
+        "div",
+        {
+          className: `bg-surface-container-lowest rounded-[22px] border border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] w-full max-w-[480px] max-h-[90vh] overflow-y-auto anicca-slide-up shadow-[0_24px_70px_-20px_rgba(11,28,48,0.35),0_8px_24px_-12px_rgb(var(--primary)/0.12)] dark:shadow-[0_20px_60px_rgba(0,0,0,0.55)] ${d}`,
+          onClick: (h) => h.stopPropagation(),
+          children: [
+            n && /* @__PURE__ */ u("div", { className: "flex items-center justify-between py-5 px-6 border-b border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)]", children: [
+              /* @__PURE__ */ r("span", { className: "text-body-base font-semibold tracking-[-0.01em] text-on-surface", children: n }),
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  className: "w-8 h-8 rounded-[10px] border-none bg-on-surface/[0.05] text-secondary text-[1.1rem] cursor-pointer flex items-center justify-center transition-all duration-150 font-[inherit] hover:bg-[#e2e8f0] hover:text-[#1e293b] dark:bg-[#334155] dark:text-[#94a3b8] dark:hover:bg-[#475569] dark:hover:text-on-surface",
+                  onClick: e,
+                  "aria-label": b.close,
+                  children: "×"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r("div", { className: "p-6 text-on-surface", children: a }),
+            o && /* @__PURE__ */ r("div", { className: "flex justify-end gap-3 py-4 px-6 border-t border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)]", children: o })
+          ]
+        }
+      )
     }
   ) : null;
 }
-function Me({
+function jt({
   tabs: t,
   defaultTab: e,
-  activeKey: r,
+  activeKey: n,
   onChange: a,
-  className: s = ""
+  className: o = ""
 }) {
-  var d;
-  const [o, i] = S(e || ((d = t[0]) == null ? void 0 : d.key) || ""), p = r ?? o, l = t.find((m) => m.key === p), h = (m) => {
-    r === void 0 && i(m), a == null || a(m);
+  var h;
+  const [i, l] = S(e || ((h = t[0]) == null ? void 0 : h.key) || ""), m = n ?? i, d = t.find((c) => c.key === m), b = (c) => {
+    n === void 0 && l(c), a == null || a(c);
   };
-  return /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a shadow-a-sm border border-a-border overflow-hidden ${s}`, children: [
-    /* @__PURE__ */ n("div", { className: "flex pt-2 px-6 border-b border-a-border", role: "tablist", children: t.map((m) => /* @__PURE__ */ c(
-      "button",
-      {
-        className: `py-[0.7rem] px-[1.1rem] text-[0.82rem] font-medium cursor-pointer border-none bg-transparent border-b-2 transition-all duration-200 flex items-center gap-[0.4rem] font-[inherit] -mb-px ${p === m.key ? "text-a-primary border-b-a-primary font-semibold" : "text-a-text-muted border-b-transparent hover:text-a-text"}`,
-        onClick: () => h(m.key),
-        role: "tab",
-        "aria-selected": p === m.key,
-        children: [
-          m.icon && /* @__PURE__ */ n("span", { className: "text-[0.9rem]", children: m.icon }),
-          m.label
-        ]
-      },
-      m.key
-    )) }),
-    /* @__PURE__ */ n("div", { className: "p-6 text-a-text", role: "tabpanel", children: l == null ? void 0 : l.content })
-  ] });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: `bg-surface-container-lowest rounded-[20px] shadow-[0_1px_2px_rgba(11,28,48,0.04),0_12px_32px_-14px_rgba(11,28,48,0.14)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.3)] border border-on-surface/[0.06] overflow-hidden ${o}`,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "flex pt-2 px-6 border-b border-[#f1f5f9] dark:border-outline-variant/50",
+            role: "tablist",
+            children: t.map((c) => {
+              const s = m === c.key;
+              return /* @__PURE__ */ u(
+                "button",
+                {
+                  className: `
+                py-[0.7rem] px-[1.1rem] text-[0.82rem] font-medium cursor-pointer
+                border-none bg-transparent border-b-2 transition-all duration-200
+                flex items-center gap-[0.4rem] font-[inherit] -mb-px
+                ${s ? "text-primary border-b-primary font-semibold" : "text-secondary border-b-transparent hover:text-on-surface dark:text-[#94a3b8] dark:hover:text-on-surface"}
+              `,
+                  onClick: () => b(c.key),
+                  role: "tab",
+                  "aria-selected": s,
+                  children: [
+                    c.icon && /* @__PURE__ */ r("span", { className: "text-[0.9rem]", children: c.icon }),
+                    c.label
+                  ]
+                },
+                c.key
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "p-6 text-on-surface", role: "tabpanel", children: d == null ? void 0 : d.content })
+      ]
+    }
+  );
 }
-function Se(t = "This field is required") {
+function It(t = "This field is required") {
   return {
     validate: (e) => e == null ? !1 : typeof e == "string" ? e.trim().length > 0 : Array.isArray(e) ? e.length > 0 : !0,
     message: t
   };
 }
-function Ae(t = "Invalid email address") {
+function Dt(t = "Invalid email address") {
   return {
     validate: (e) => typeof e != "string" ? !1 : /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),
     message: t
   };
 }
-function De(t, e) {
+function Bt(t, e) {
   return {
-    validate: (r) => typeof r != "string" ? !1 : r.length >= t,
+    validate: (n) => typeof n != "string" ? !1 : n.length >= t,
     message: e || `Must be at least ${t} characters`
   };
 }
-function Te(t, e) {
+function Ft(t, e) {
   return {
-    validate: (r) => typeof r != "string" ? !1 : r.length <= t,
+    validate: (n) => typeof n != "string" ? !1 : n.length <= t,
     message: e || `Must be at most ${t} characters`
   };
 }
-function Ce(t, e = "Invalid format") {
+function Rt(t, e = "Invalid format") {
   return {
-    validate: (r) => typeof r != "string" ? !1 : t.test(r),
+    validate: (n) => typeof n != "string" ? !1 : t.test(n),
     message: e
   };
 }
-function je(t, e) {
+function Pt(t, e) {
   return {
-    validate: (r) => typeof r != "number" ? !1 : r >= t,
+    validate: (n) => typeof n != "number" ? !1 : n >= t,
     message: e || `Must be at least ${t}`
   };
 }
-function Le(t, e) {
+function Wt(t, e) {
   return {
-    validate: (r) => typeof r != "number" ? !1 : r <= t,
+    validate: (n) => typeof n != "number" ? !1 : n <= t,
     message: e || `Must be at most ${t}`
   };
 }
-function Fe(t, e) {
+function Ot(t, e) {
   return {
     validate: t,
     message: e
   };
 }
-function Ee(t) {
-  const { initialValues: e, validationSchema: r, onSubmit: a } = t, [s, o] = S(e), [i, p] = S({}), [l, h] = S({}), [d, m] = S(!1), x = k(
-    (f, N) => {
-      const y = r == null ? void 0 : r[f];
-      if (y) {
-        for (const w of y)
-          if (!w.validate(N))
-            return w.message;
+function zt(t) {
+  const { initialValues: e, validationSchema: n, onSubmit: a } = t, [o, i] = S(e), [l, m] = S({}), [d, b] = S({}), [h, c] = S(!1), s = C(
+    (x, w) => {
+      const v = n == null ? void 0 : n[x];
+      if (v) {
+        for (const y of v)
+          if (!y.validate(w))
+            return y.message;
       }
     },
-    [r]
-  ), u = k(() => {
-    const f = {};
-    for (const N of Object.keys(e)) {
-      const y = x(N, s[N]);
-      y && (f[N] = y);
+    [n]
+  ), f = C(() => {
+    const x = {};
+    for (const w of Object.keys(e)) {
+      const v = s(w, o[w]);
+      v && (x[w] = v);
     }
-    return f;
-  }, [e, x, s]), g = Object.keys(i).length === 0, D = k(
-    (f) => (N) => {
-      const y = N.target.value;
-      if (o((w) => ({ ...w, [f]: y })), l[f]) {
-        const w = x(f, y);
-        p((C) => {
-          const L = { ...C };
-          return w ? L[f] = w : delete L[f], L;
+    return x;
+  }, [e, s, o]), p = Object.keys(l).length === 0, g = C(
+    (x) => (w) => {
+      const v = w.target.value;
+      if (i((y) => ({ ...y, [x]: v })), d[x]) {
+        const y = s(x, v);
+        m((A) => {
+          const T = { ...A };
+          return y ? T[x] = y : delete T[x], T;
         });
       }
     },
-    [l, x]
-  ), v = k(
-    (f) => () => {
-      h((y) => ({ ...y, [f]: !0 }));
-      const N = x(f, s[f]);
-      p((y) => {
-        const w = { ...y };
-        return N ? w[f] = N : delete w[f], w;
+    [d, s]
+  ), N = C(
+    (x) => () => {
+      b((v) => ({ ...v, [x]: !0 }));
+      const w = s(x, o[x]);
+      m((v) => {
+        const y = { ...v };
+        return w ? y[x] = w : delete y[x], y;
       });
     },
-    [x, s]
-  ), M = k(
-    async (f) => {
-      f && f.preventDefault();
-      const N = {};
-      for (const w of Object.keys(e))
-        N[w] = !0;
-      h(N);
-      const y = u();
-      if (p(y), Object.keys(y).length === 0 && a) {
-        m(!0);
+    [s, o]
+  ), $ = C(
+    async (x) => {
+      x && x.preventDefault();
+      const w = {};
+      for (const y of Object.keys(e))
+        w[y] = !0;
+      b(w);
+      const v = f();
+      if (m(v), Object.keys(v).length === 0 && a) {
+        c(!0);
         try {
-          await a(s);
+          await a(o);
         } finally {
-          m(!1);
+          c(!1);
         }
       }
     },
-    [e, a, u, s]
-  ), T = k(() => {
-    o(e), p({}), h({}), m(!1);
-  }, [e]), b = k(
-    (f, N) => {
-      if (o((y) => ({ ...y, [f]: N })), l[f]) {
-        const y = x(f, N);
-        p((w) => {
-          const C = { ...w };
-          return y ? C[f] = y : delete C[f], C;
+    [e, a, f, o]
+  ), _ = C(() => {
+    i(e), m({}), b({}), c(!1);
+  }, [e]), E = C(
+    (x, w) => {
+      if (i((v) => ({ ...v, [x]: w })), d[x]) {
+        const v = s(x, w);
+        m((y) => {
+          const A = { ...y };
+          return v ? A[x] = v : delete A[x], A;
         });
       }
     },
-    [l, x]
-  ), $ = k((f, N) => {
-    p((y) => ({ ...y, [f]: N }));
+    [d, s]
+  ), k = C((x, w) => {
+    m((v) => ({ ...v, [x]: w }));
   }, []);
   return {
-    values: s,
-    errors: i,
-    touched: l,
-    isValid: g,
-    isSubmitting: d,
-    handleChange: D,
-    handleBlur: v,
-    handleSubmit: M,
-    reset: T,
-    setFieldValue: b,
-    setFieldError: $
+    values: o,
+    errors: l,
+    touched: d,
+    isValid: p,
+    isSubmitting: h,
+    handleChange: g,
+    handleBlur: N,
+    handleSubmit: $,
+    reset: _,
+    setFieldValue: E,
+    setFieldError: k
   };
 }
-const q = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"], z = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], K = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"], R = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-function A(t) {
+const ir = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"], sr = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], cr = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"], dr = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+function R(t) {
   return typeof t == "string" ? new Date(t) : new Date(t.getTime());
 }
-function j(t) {
+function Z(t) {
   return t.toString().padStart(2, "0");
 }
-function W(t, e, r = "en") {
-  const a = A(t), s = r === "id" ? q : z, o = r === "id" ? K : R;
-  return e.replace("YYYY", a.getFullYear().toString()).replace("MM", j(a.getMonth() + 1)).replace("DD", j(a.getDate())).replace("HH", j(a.getHours())).replace("mm", j(a.getMinutes())).replace("ss", j(a.getSeconds())).replace("dddd", s[a.getDay()]).replace("MMMM", o[a.getMonth()]);
+function lr(t, e, n = "en") {
+  const a = R(t), o = n === "id" ? ir : sr, i = n === "id" ? cr : dr;
+  return e.replace("YYYY", a.getFullYear().toString()).replace("MM", Z(a.getMonth() + 1)).replace("DD", Z(a.getDate())).replace("HH", Z(a.getHours())).replace("mm", Z(a.getMinutes())).replace("ss", Z(a.getSeconds())).replace("dddd", o[a.getDay()]).replace("MMMM", i[a.getMonth()]);
 }
-function G(t, e, r) {
-  const a = A(t), s = A(e);
-  if (r === "years")
-    return Math.abs(a.getFullYear() - s.getFullYear());
-  if (r === "months")
+function ur(t, e, n) {
+  const a = R(t), o = R(e);
+  if (n === "years")
+    return Math.abs(a.getFullYear() - o.getFullYear());
+  if (n === "months")
     return Math.abs(
-      (a.getFullYear() - s.getFullYear()) * 12 + (a.getMonth() - s.getMonth())
+      (a.getFullYear() - o.getFullYear()) * 12 + (a.getMonth() - o.getMonth())
     );
-  const o = Math.abs(a.getTime() - s.getTime());
-  return Math.floor(o / {
+  const i = Math.abs(a.getTime() - o.getTime());
+  return Math.floor(i / {
     seconds: 1e3,
     minutes: 6e4,
     hours: 36e5,
     days: 864e5
-  }[r]);
+  }[n]);
 }
-function Q(t, e = "en") {
-  const r = A(t), s = (/* @__PURE__ */ new Date()).getTime() - r.getTime(), o = s < 0, i = Math.abs(s), p = Math.floor(i / 1e3), l = Math.floor(i / 6e4), h = Math.floor(i / 36e5), d = Math.floor(i / 864e5), m = Math.floor(d / 7), x = Math.floor(d / 30), u = Math.floor(d / 365);
+function fr(t, e = "en") {
+  const n = R(t), o = (/* @__PURE__ */ new Date()).getTime() - n.getTime(), i = o < 0, l = Math.abs(o), m = Math.floor(l / 1e3), d = Math.floor(l / 6e4), b = Math.floor(l / 36e5), h = Math.floor(l / 864e5), c = Math.floor(h / 7), s = Math.floor(h / 30), f = Math.floor(h / 365);
   if (e === "id") {
-    const g = o ? "lagi" : "lalu";
-    return p < 60 ? "baru saja" : l < 60 ? `${l} menit ${g}` : h < 24 ? `${h} jam ${g}` : d < 7 ? `${d} hari ${g}` : m < 4 ? `${m} minggu ${g}` : x < 12 ? `${x} bulan ${g}` : `${u} tahun ${g}`;
+    const p = i ? "lagi" : "lalu";
+    return m < 60 ? "baru saja" : d < 60 ? `${d} menit ${p}` : b < 24 ? `${b} jam ${p}` : h < 7 ? `${h} hari ${p}` : c < 4 ? `${c} minggu ${p}` : s < 12 ? `${s} bulan ${p}` : `${f} tahun ${p}`;
   }
-  return p < 60 ? "just now" : o ? l < 60 ? `in ${l} minutes` : h < 24 ? `in ${h} hours` : d < 7 ? `in ${d} days` : m < 4 ? `in ${m} weeks` : x < 12 ? `in ${x} months` : `in ${u} years` : l < 60 ? `${l} minutes ago` : h < 24 ? `${h} hours ago` : d < 7 ? `${d} days ago` : m < 4 ? `${m} weeks ago` : x < 12 ? `${x} months ago` : `${u} years ago`;
+  return m < 60 ? "just now" : i ? d < 60 ? `in ${d} minutes` : b < 24 ? `in ${b} hours` : h < 7 ? `in ${h} days` : c < 4 ? `in ${c} weeks` : s < 12 ? `in ${s} months` : `in ${f} years` : d < 60 ? `${d} minutes ago` : b < 24 ? `${b} hours ago` : h < 7 ? `${h} days ago` : c < 4 ? `${c} weeks ago` : s < 12 ? `${s} months ago` : `${f} years ago`;
 }
-function X(t, e) {
-  const r = A(t);
+function mr(t, e) {
+  const n = R(t);
   switch (e) {
     case "day":
-      return r.setHours(0, 0, 0, 0), r;
+      return n.setHours(0, 0, 0, 0), n;
     case "week": {
-      const a = r.getDay();
-      return r.setDate(r.getDate() - a), r.setHours(0, 0, 0, 0), r;
+      const a = n.getDay();
+      return n.setDate(n.getDate() - a), n.setHours(0, 0, 0, 0), n;
     }
     case "month":
-      return r.setDate(1), r.setHours(0, 0, 0, 0), r;
+      return n.setDate(1), n.setHours(0, 0, 0, 0), n;
     case "year":
-      return r.setMonth(0, 1), r.setHours(0, 0, 0, 0), r;
+      return n.setMonth(0, 1), n.setHours(0, 0, 0, 0), n;
   }
 }
-function Z(t, e) {
-  const r = A(t);
+function br(t, e) {
+  const n = R(t);
   switch (e) {
     case "day":
-      return r.setHours(23, 59, 59, 999), r;
+      return n.setHours(23, 59, 59, 999), n;
     case "week": {
-      const a = r.getDay();
-      return r.setDate(r.getDate() + (6 - a)), r.setHours(23, 59, 59, 999), r;
+      const a = n.getDay();
+      return n.setDate(n.getDate() + (6 - a)), n.setHours(23, 59, 59, 999), n;
     }
     case "month":
-      return r.setMonth(r.getMonth() + 1, 0), r.setHours(23, 59, 59, 999), r;
+      return n.setMonth(n.getMonth() + 1, 0), n.setHours(23, 59, 59, 999), n;
     case "year":
-      return r.setMonth(11, 31), r.setHours(23, 59, 59, 999), r;
+      return n.setMonth(11, 31), n.setHours(23, 59, 59, 999), n;
   }
 }
-function ee(t, e, r) {
-  const a = A(t);
-  switch (r) {
+function pr(t, e, n) {
+  const a = R(t);
+  switch (n) {
     case "minutes":
       return a.setMinutes(a.getMinutes() + e), a;
     case "hours":
@@ -744,184 +2426,536 @@ function ee(t, e, r) {
       return a.setFullYear(a.getFullYear() + e), a;
   }
 }
-function te(t) {
+function hr(t) {
   return t instanceof Date ? !isNaN(t.getTime()) : typeof t == "string" ? !isNaN(new Date(t).getTime()) : !1;
 }
-function re(t, e) {
-  return A(t).getTime() < A(e).getTime();
+function xr(t, e) {
+  return R(t).getTime() < R(e).getTime();
 }
-function ae(t, e) {
-  return A(t).getTime() > A(e).getTime();
+function gr(t, e) {
+  return R(t).getTime() > R(e).getTime();
 }
-function Be(t) {
-  const [e, r] = S(() => {
+function Ht(t) {
+  const [e, n] = S(() => {
     if (t == null) return null;
-    const u = typeof t == "string" ? new Date(t) : t;
-    return isNaN(u.getTime()) ? null : u;
-  }), a = k((u) => {
-    if (u === null) {
-      r(null);
+    const f = typeof t == "string" ? new Date(t) : t;
+    return isNaN(f.getTime()) ? null : f;
+  }), a = C((f) => {
+    if (f === null) {
+      n(null);
       return;
     }
-    const g = typeof u == "string" ? new Date(u) : u;
-    r(isNaN(g.getTime()) ? null : g);
-  }, []), s = k(
-    (u, g = "en") => e ? W(e, u, g) : "",
+    const p = typeof f == "string" ? new Date(f) : f;
+    n(isNaN(p.getTime()) ? null : p);
+  }, []), o = C(
+    (f, p = "en") => e ? lr(e, f, p) : "",
     [e]
-  ), o = k(
-    (u, g) => e ? G(e, u, g) : 0,
+  ), i = C(
+    (f, p) => e ? ur(e, f, p) : 0,
     [e]
-  ), i = k(
-    (u = "en") => e ? Q(e, u) : "",
+  ), l = C(
+    (f = "en") => e ? fr(e, f) : "",
     [e]
-  ), p = k(
-    (u, g) => e ? ee(e, u, g) : /* @__PURE__ */ new Date(),
+  ), m = C(
+    (f, p) => e ? pr(e, f, p) : /* @__PURE__ */ new Date(),
     [e]
-  ), l = k(
-    (u) => e ? X(e, u) : /* @__PURE__ */ new Date(),
+  ), d = C(
+    (f) => e ? mr(e, f) : /* @__PURE__ */ new Date(),
     [e]
-  ), h = k(
-    (u) => e ? Z(e, u) : /* @__PURE__ */ new Date(),
+  ), b = C(
+    (f) => e ? br(e, f) : /* @__PURE__ */ new Date(),
     [e]
-  ), d = k(() => te(e), [e]), m = k(
-    (u) => e ? re(e, u) : !1,
+  ), h = C(() => hr(e), [e]), c = C(
+    (f) => e ? xr(e, f) : !1,
     [e]
-  ), x = k(
-    (u) => e ? ae(e, u) : !1,
+  ), s = C(
+    (f) => e ? gr(e, f) : !1,
     [e]
   );
   return {
     date: e,
     setDate: a,
-    format: s,
-    diff: o,
-    relative: i,
-    add: p,
-    startOf: l,
-    endOf: h,
-    isValid: d,
-    isBefore: m,
-    isAfter: x
+    format: o,
+    diff: i,
+    relative: l,
+    add: m,
+    startOf: d,
+    endOf: b,
+    isValid: h,
+    isBefore: c,
+    isAfter: s
   };
 }
-function ne(t, e) {
-  let r = null;
+function vr(t, e) {
+  let n = null;
   return (...a) => {
-    r && clearTimeout(r), r = setTimeout(() => t(...a), e);
+    n && clearTimeout(n), n = setTimeout(() => t(...a), e);
   };
 }
-function se(t, e) {
-  let r = 0;
+function yr(t, e) {
+  let n = 0;
   return (...a) => {
-    const s = Date.now();
-    s - r >= e && (r = s, t(...a));
+    const o = Date.now();
+    o - n >= e && (n = o, t(...a));
   };
 }
-function oe(t, e, r = "...") {
-  return t.length <= e ? t : t.slice(0, e) + r;
+function wr(t, e, n = "...") {
+  return t.length <= e ? t : t.slice(0, e) + n;
 }
-async function ie(t) {
+async function kr(t) {
   try {
     if (navigator.clipboard && navigator.clipboard.writeText)
       return await navigator.clipboard.writeText(t), !0;
     const e = document.createElement("textarea");
     e.value = t, e.style.position = "fixed", e.style.opacity = "0", document.body.appendChild(e), e.select();
-    const r = document.execCommand("copy");
-    return document.body.removeChild(e), r;
+    const n = document.execCommand("copy");
+    return document.body.removeChild(e), n;
   } catch {
     return !1;
   }
 }
-function ce(t) {
+function Nr(t) {
   return t.toLowerCase().replace(/[^\w\s-]/g, "").replace(/[\s_]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
 }
-function le(t) {
+function $r(t) {
   return t && t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
 }
-function de(t) {
+function _r(t) {
   return typeof structuredClone == "function" ? structuredClone(t) : JSON.parse(JSON.stringify(t));
 }
-function B(t, e = "") {
-  const r = {};
+function pe(t, e = "") {
+  const n = {};
   for (const a of Object.keys(t)) {
-    const s = e ? `${e}.${a}` : a, o = t[a];
-    o !== null && typeof o == "object" && !Array.isArray(o) ? Object.assign(r, B(o, s)) : r[s] = o;
+    const o = e ? `${e}.${a}` : a, i = t[a];
+    i !== null && typeof i == "object" && !Array.isArray(i) ? Object.assign(n, pe(i, o)) : n[o] = i;
   }
-  return r;
+  return n;
 }
-function ue(t, e) {
-  const r = {};
+function Ar(t, e) {
+  const n = {};
   for (const a of t) {
-    const s = String(a[e]);
-    r[s] || (r[s] = []), r[s].push(a);
+    const o = String(a[e]);
+    n[o] || (n[o] = []), n[o].push(a);
   }
-  return r;
+  return n;
 }
-function fe(t, e) {
-  const r = /* @__PURE__ */ new Set();
+function Lr(t, e) {
+  const n = /* @__PURE__ */ new Set();
   return t.filter((a) => {
-    const s = a[e];
-    return r.has(s) ? !1 : (r.add(s), !0);
+    const o = a[e];
+    return n.has(o) ? !1 : (n.add(o), !0);
   });
 }
-function Oe() {
-  return F(
+function Vt() {
+  return Q(
     () => ({
-      debounce: ne,
-      throttle: se,
-      truncate: oe,
-      copyToClipboard: ie,
-      slugify: ce,
-      capitalize: le,
-      deepClone: de,
-      flattenObject: B,
-      groupBy: ue,
-      uniqueBy: fe
+      debounce: vr,
+      throttle: yr,
+      truncate: wr,
+      copyToClipboard: kr,
+      slugify: Nr,
+      capitalize: $r,
+      deepClone: _r,
+      flattenObject: pe,
+      groupBy: Ar,
+      uniqueBy: Lr
     }),
     []
   );
 }
+const Sr = {
+  signinTitle: "Sign in with email",
+  signupTitle: "Create an account",
+  recoverTitle: "Reset your password",
+  signinSubtitle: "Welcome back! Enter your credentials.",
+  signupSubtitle: "Start your journey today.",
+  recoverSubtitle: "We'll send a reset link to your email.",
+  nameLabel: "Full Name",
+  namePlaceholder: "Jane Smith",
+  emailLabel: "Email address",
+  emailPlaceholder: "you@example.com",
+  passwordLabel: "Password",
+  passwordPlaceholder: "••••••••",
+  showPassword: "Show password",
+  hidePassword: "Hide password",
+  forgotPassword: "Forgot password?",
+  signinCta: "Get Started",
+  signupCta: "Create Account",
+  recoverCta: "Send Reset Link",
+  divider: "Or sign in with",
+  toSignup: "Don't have an account? Sign up",
+  toSignin: "Already have an account? Sign in",
+  toRecover: "← Return to sign in"
+};
+function le({ size: t = 22 }) {
+  return /* @__PURE__ */ u("svg", { "aria-hidden": "true", width: t, height: t, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ r("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ r("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  ] });
+}
+function Tr() {
+  return /* @__PURE__ */ u("svg", { "aria-hidden": "true", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ r("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+    /* @__PURE__ */ r("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+  ] });
+}
+function Cr() {
+  return /* @__PURE__ */ u("svg", { "aria-hidden": "true", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ r("circle", { cx: "12", cy: "8", r: "4" }),
+    /* @__PURE__ */ r("path", { d: "M4 20c0-4 3.6-7 8-7s8 3 8 7" })
+  ] });
+}
+function Er() {
+  return /* @__PURE__ */ u("svg", { "aria-hidden": "true", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ r("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+    /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function Mr() {
+  return /* @__PURE__ */ u("svg", { "aria-hidden": "true", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ r("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
+    /* @__PURE__ */ r("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
+    /* @__PURE__ */ r("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] });
+}
+function jr() {
+  return /* @__PURE__ */ u("svg", { "aria-hidden": "true", width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ r("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ r("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ] });
+}
+function Ir() {
+  return /* @__PURE__ */ u("svg", { "aria-hidden": "true", className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", opacity: "0.25" }),
+    /* @__PURE__ */ r("path", { d: "M22 12a10 10 0 0 1-10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+  ] });
+}
+function Dr() {
+  return /* @__PURE__ */ u("svg", { "aria-hidden": "true", width: 18, height: 18, viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ r("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }),
+    /* @__PURE__ */ r("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+    /* @__PURE__ */ r("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
+    /* @__PURE__ */ r("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
+  ] });
+}
+function Br() {
+  return /* @__PURE__ */ r("svg", { "aria-hidden": "true", width: 18, height: 18, viewBox: "0 0 24 24", fill: "#1877F2", children: /* @__PURE__ */ r("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) });
+}
+function Fr() {
+  return /* @__PURE__ */ r("svg", { "aria-hidden": "true", width: 17, height: 17, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ r("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) });
+}
+function re({ label: t, type: e, value: n, onChange: a, placeholder: o, leftAddon: i, rightAddon: l, autoComplete: m, disabled: d }) {
+  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ r("label", { className: "text-label-sm font-semibold text-on-surface", children: t }),
+    /* @__PURE__ */ u("div", { className: `flex items-center gap-2 h-11 px-3.5 rounded-[10px] border border-outline-variant bg-surface-container-low transition-[border-color,box-shadow] duration-200 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/15 dark:bg-surface-container dark:border-outline-variant dark:focus-within:border-primary ${d ? "opacity-50 cursor-not-allowed" : ""}`, children: [
+      i && /* @__PURE__ */ r("span", { className: "text-on-surface-variant shrink-0 inline-flex items-center", children: i }),
+      /* @__PURE__ */ r(
+        "input",
+        {
+          type: e,
+          value: n,
+          onChange: (b) => a(b.target.value),
+          placeholder: o,
+          autoComplete: m,
+          disabled: d,
+          className: "flex-1 min-w-0 bg-transparent outline-none border-none text-body-sm text-on-surface placeholder:text-on-surface-variant/50 font-[inherit] disabled:cursor-not-allowed"
+        }
+      ),
+      l && /* @__PURE__ */ r("span", { className: "text-on-surface-variant shrink-0 inline-flex items-center", children: l })
+    ] })
+  ] });
+}
+function te({ onClick: t, "aria-label": e, children: n }) {
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      "aria-label": e,
+      className: "w-11 h-11 rounded-full border border-outline-variant bg-surface-container-lowest flex items-center justify-center hover:bg-surface-container-low hover:border-outline transition-colors dark:bg-surface-container dark:border-outline-variant dark:hover:bg-surface-container-high",
+      children: n
+    }
+  );
+}
+function Ut({
+  open: t,
+  onClose: e,
+  mode: n,
+  onModeChange: a,
+  onSubmit: o,
+  onGoogle: i,
+  onFacebook: l,
+  onApple: m,
+  loading: d = !1,
+  error: b,
+  labels: h,
+  disableEscapeKey: c = !1,
+  disableBackdropClick: s = !1,
+  className: f = ""
+}) {
+  const p = { ...Sr, ...h }, g = n ?? "signin", N = !!(i || l || m), [$, _] = S(""), [E, k] = S(""), [x, w] = S(""), [v, y] = S(!1), [A, T] = S(!1), j = d || A;
+  if (M(() => {
+    if (!t || c) return;
+    const I = (H) => {
+      H.key === "Escape" && e();
+    };
+    return document.addEventListener("keydown", I), () => document.removeEventListener("keydown", I);
+  }, [t, e, c]), M(() => {
+    if (t)
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = "";
+      };
+  }, [t]), !t || typeof document > "u") return null;
+  const P = { signin: p.signinTitle, signup: p.signupTitle, recover: p.recoverTitle }[g], ee = { signin: p.signinSubtitle, signup: p.signupSubtitle, recover: p.recoverSubtitle }[g], J = { signin: p.signinCta, signup: p.signupCta, recover: p.recoverCta }[g], q = async (I) => {
+    if (I.preventDefault(), !j) {
+      T(!0);
+      try {
+        const H = {
+          mode: g,
+          email: $,
+          ...g !== "recover" && { password: E },
+          ...g === "signup" && { name: x }
+        };
+        await o(H);
+      } finally {
+        T(!1);
+      }
+    }
+  };
+  return z(
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "fixed inset-0 backdrop-blur-[4px] flex items-center justify-center z-[1200] anicca-fade-in p-4",
+        style: { background: "rgba(15,23,42,0.6)" },
+        onClick: s ? void 0 : e,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "anicca-auth-modal-title",
+        children: /* @__PURE__ */ u(
+          "div",
+          {
+            className: `bg-surface-container-lowest rounded-[24px] border border-on-surface/[0.06] dark:border-[rgba(51,65,85,0.5)] w-full max-w-[400px] anicca-slide-up shadow-[0_24px_70px_-20px_rgba(11,28,48,0.35),0_8px_24px_-12px_rgb(var(--primary)/0.12)] dark:shadow-[0_20px_60px_rgba(0,0,0,0.55)] ${f}`,
+            onClick: (I) => I.stopPropagation(),
+            children: [
+              /* @__PURE__ */ u("div", { className: "flex flex-col items-center pt-8 pb-2 px-8", children: [
+                /* @__PURE__ */ r("div", { className: "w-12 h-12 rounded-[14px] bg-primary/10 flex items-center justify-center mb-4 text-primary", children: /* @__PURE__ */ r(le, { size: 22 }) }),
+                /* @__PURE__ */ r(
+                  "h2",
+                  {
+                    id: "anicca-auth-modal-title",
+                    className: "text-headline-md text-on-surface text-center m-0",
+                    children: P
+                  }
+                ),
+                /* @__PURE__ */ r("p", { className: "text-body-sm text-on-surface-variant text-center mt-1 mb-0", children: ee })
+              ] }),
+              b && /* @__PURE__ */ u("div", { className: "mx-8 mt-4 flex items-center gap-2.5 px-4 py-3 rounded-[10px] bg-error/[0.08] border border-error/20 text-error text-body-sm", children: [
+                /* @__PURE__ */ r("span", { className: "shrink-0", children: /* @__PURE__ */ r(jr, {}) }),
+                b
+              ] }),
+              /* @__PURE__ */ u("form", { className: "px-8 pt-5 pb-6 flex flex-col gap-4", onSubmit: q, noValidate: !0, children: [
+                g === "signup" && /* @__PURE__ */ r(
+                  re,
+                  {
+                    label: p.nameLabel,
+                    type: "text",
+                    value: x,
+                    onChange: w,
+                    placeholder: p.namePlaceholder,
+                    leftAddon: /* @__PURE__ */ r(Cr, {}),
+                    autoComplete: "name",
+                    disabled: j
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  re,
+                  {
+                    label: p.emailLabel,
+                    type: "email",
+                    value: $,
+                    onChange: _,
+                    placeholder: p.emailPlaceholder,
+                    leftAddon: /* @__PURE__ */ r(Tr, {}),
+                    autoComplete: "email",
+                    disabled: j
+                  }
+                ),
+                g !== "recover" && /* @__PURE__ */ r(
+                  re,
+                  {
+                    label: p.passwordLabel,
+                    type: v ? "text" : "password",
+                    value: E,
+                    onChange: k,
+                    placeholder: p.passwordPlaceholder,
+                    leftAddon: /* @__PURE__ */ r(le, { size: 16 }),
+                    rightAddon: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => y((I) => !I),
+                        "aria-label": v ? p.hidePassword : p.showPassword,
+                        className: "text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer",
+                        children: v ? /* @__PURE__ */ r(Mr, {}) : /* @__PURE__ */ r(Er, {})
+                      }
+                    ),
+                    autoComplete: g === "signin" ? "current-password" : "new-password",
+                    disabled: j
+                  }
+                ),
+                g === "signin" && /* @__PURE__ */ r("div", { className: "flex justify-end -mt-2", children: /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    className: "text-label-sm text-primary hover:underline underline-offset-4 transition-colors font-[inherit] cursor-pointer",
+                    onClick: () => a == null ? void 0 : a("recover"),
+                    children: p.forgotPassword
+                  }
+                ) }),
+                /* @__PURE__ */ u(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: j,
+                    className: "relative w-full h-11 rounded-[12px] font-semibold text-label-md tracking-tight hover:opacity-90 active:opacity-100 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 mt-1 font-[inherit] cursor-pointer",
+                    style: { background: "rgb(var(--on-surface))", color: "rgb(var(--surface-container-lowest))" },
+                    children: [
+                      j && /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ r(Ir, {}) }),
+                      /* @__PURE__ */ r("span", { className: j ? "opacity-0" : "", children: J })
+                    ]
+                  }
+                )
+              ] }),
+              g !== "recover" && N && /* @__PURE__ */ u("div", { className: "px-8 pb-7", children: [
+                /* @__PURE__ */ u("div", { className: "flex items-center gap-3 mb-4", children: [
+                  /* @__PURE__ */ r("div", { className: "flex-1 h-px bg-outline-variant" }),
+                  /* @__PURE__ */ r("span", { className: "text-label-sm text-on-surface-variant whitespace-nowrap", children: p.divider }),
+                  /* @__PURE__ */ r("div", { className: "flex-1 h-px bg-outline-variant" })
+                ] }),
+                /* @__PURE__ */ u("div", { className: "flex items-center justify-center gap-3", children: [
+                  i && /* @__PURE__ */ r(te, { onClick: i, "aria-label": "Sign in with Google", children: /* @__PURE__ */ r(Dr, {}) }),
+                  l && /* @__PURE__ */ r(te, { onClick: l, "aria-label": "Sign in with Facebook", children: /* @__PURE__ */ r(Br, {}) }),
+                  m && /* @__PURE__ */ r(te, { onClick: m, "aria-label": "Sign in with Apple", children: /* @__PURE__ */ r(Fr, {}) })
+                ] })
+              ] }),
+              /* @__PURE__ */ u("div", { className: "text-center pb-6 px-8 text-body-sm text-on-surface-variant", children: [
+                g === "signin" && /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    className: "text-primary hover:underline underline-offset-4 font-[inherit] cursor-pointer",
+                    onClick: () => a == null ? void 0 : a("signup"),
+                    children: p.toSignup
+                  }
+                ),
+                g === "signup" && /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    className: "text-primary hover:underline underline-offset-4 font-[inherit] cursor-pointer",
+                    onClick: () => a == null ? void 0 : a("signin"),
+                    children: p.toSignin
+                  }
+                ),
+                g === "recover" && /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    className: "text-primary hover:underline underline-offset-4 font-[inherit] cursor-pointer",
+                    onClick: () => a == null ? void 0 : a("signin"),
+                    children: p.toRecover
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
 export {
-  _ as ANICCA_THEME_CSS_VAR_MAP,
-  we as AniccaActivityFeed,
-  ve as AniccaBreadcrumb,
-  xe as AniccaChartWrapper,
-  Ne as AniccaDataTable,
-  $e as AniccaModal,
-  ye as AniccaNavbar,
-  ke as AniccaProgressCard,
-  ge as AniccaSidebar,
-  be as AniccaStatCard,
-  Me as AniccaTabs,
-  pe as AniccaThemeProvider,
-  ee as aniccaAdd,
-  le as aniccaCapitalize,
-  ie as aniccaCopyToClipboard,
-  ne as aniccaDebounce,
-  de as aniccaDeepClone,
-  G as aniccaDiff,
-  Z as aniccaEndOf,
-  B as aniccaFlattenObject,
-  W as aniccaFormat,
-  ue as aniccaGroupBy,
-  ae as aniccaIsAfter,
-  re as aniccaIsBefore,
-  te as aniccaIsValid,
-  Q as aniccaRelative,
-  ce as aniccaSlugify,
-  X as aniccaStartOf,
-  se as aniccaThrottle,
-  oe as aniccaTruncate,
-  fe as aniccaUniqueBy,
-  Fe as custom,
-  Ae as email,
-  Le as max,
-  Te as maxLength,
-  je as min,
-  De as minLength,
-  Ce as pattern,
-  Se as required,
-  Be as useAniccaDate,
-  Ee as useAniccaForm,
-  Oe as useAniccaUtils
+  ge as ANICCA_THEME_CSS_VAR_MAP,
+  Ct as AniccaActivityFeed,
+  lt as AniccaAlert,
+  Ut as AniccaAuthModal,
+  Fe as AniccaAvatar,
+  it as AniccaAvatarGroup,
+  ot as AniccaBadge,
+  St as AniccaBreadcrumb,
+  zr as AniccaButton,
+  qr as AniccaCard,
+  et as AniccaCardBody,
+  Qr as AniccaCardDescription,
+  rt as AniccaCardFooter,
+  Kr as AniccaCardHeader,
+  Xr as AniccaCardTitle,
+  _t as AniccaChartWrapper,
+  Yr as AniccaCheckbox,
+  Nt as AniccaCombobox,
+  Tt as AniccaDataTable,
+  at as AniccaDivider,
+  xt as AniccaDrawer,
+  gt as AniccaDropdown,
+  nt as AniccaGrid,
+  Hr as AniccaInput,
+  vt as AniccaMenu,
+  wt as AniccaMenuDivider,
+  yt as AniccaMenuItem,
+  kt as AniccaMenuLabel,
+  Mt as AniccaModal,
+  Lt as AniccaNavbar,
+  dt as AniccaPagination,
+  ht as AniccaPopover,
+  mt as AniccaPopupProvider,
+  Et as AniccaProgressCard,
+  Gr as AniccaRadio,
+  Jr as AniccaRadioGroup,
+  Ur as AniccaSelect,
+  At as AniccaSidebar,
+  st as AniccaSkeleton,
+  ct as AniccaSpinner,
+  tt as AniccaStack,
+  $t as AniccaStatCard,
+  Zr as AniccaSwitch,
+  jt as AniccaTabs,
+  Vr as AniccaTextarea,
+  Or as AniccaThemeProvider,
+  ut as AniccaToastProvider,
+  pt as AniccaTooltip,
+  pr as aniccaAdd,
+  $r as aniccaCapitalize,
+  kr as aniccaCopyToClipboard,
+  vr as aniccaDebounce,
+  _r as aniccaDeepClone,
+  ur as aniccaDiff,
+  br as aniccaEndOf,
+  pe as aniccaFlattenObject,
+  lr as aniccaFormat,
+  Ar as aniccaGroupBy,
+  gr as aniccaIsAfter,
+  xr as aniccaIsBefore,
+  hr as aniccaIsValid,
+  fr as aniccaRelative,
+  Nr as aniccaSlugify,
+  mr as aniccaStartOf,
+  yr as aniccaThrottle,
+  wr as aniccaTruncate,
+  Lr as aniccaUniqueBy,
+  Ot as custom,
+  Dt as email,
+  Wt as max,
+  Ft as maxLength,
+  Pt as min,
+  Bt as minLength,
+  Rt as pattern,
+  It as required,
+  Ht as useAniccaDate,
+  zt as useAniccaForm,
+  bt as useAniccaPopup,
+  ft as useAniccaToast,
+  Vt as useAniccaUtils
 };