@dimasbaguspm/versaur 0.0.47 → 0.0.49

package/dist/js/image-rectangle-K9jmTTED.js

@@ -0,0 +1,2607 @@
+import { c as x, j as a, a as f } from "./index-DOdDlCoL.js";
+import * as l from "react";
+import A, { createContext as B, useContext as O, forwardRef as m, useState as V, useEffect as I, useCallback as R, useRef as W, useId as re, cloneElement as ne } from "react";
+import { ChevronDown as se, ChevronRight as ae, LoaderCircleIcon as G, CheckIcon as oe, EllipsisVerticalIcon as ie, XIcon as le, ImageOff as ce } from "lucide-react";
+import de from "react-dom";
+import { S as ue } from "./skeleton-BNZyaRjo.js";
+const $ = B(
+  null
+), D = () => {
+  const e = O($);
+  if (!e)
+    throw new Error(
+      "Accordion compound components must be used within Accordion"
+    );
+  return e;
+}, fe = x(
+  "border-b border-border bg-background overflow-hidden",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), he = x(
+  "flex items-center justify-between w-full p-4 text-left transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-light focus-visible:ring-inset",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed",
+        false: "cursor-pointer hover:bg-neutral-soft"
+      },
+      isOpen: {
+        true: "",
+        false: "bg-background"
+      }
+    },
+    defaultVariants: {
+      disabled: !1,
+      isOpen: !1
+    }
+  }
+), me = x(
+  "overflow-hidden transition-all duration-300",
+  {
+    variants: {
+      isOpen: {
+        true: "max-h-screen opacity-100",
+        false: "max-h-0 opacity-0"
+      }
+    },
+    defaultVariants: {
+      isOpen: !1
+    }
+  }
+), ge = x("p-4 pt-0"), xe = x("transition-transform duration-200", {
+  variants: {
+    isOpen: {
+      true: "rotate-180",
+      false: "rotate-0"
+    }
+  },
+  defaultVariants: {
+    isOpen: !1
+  }
+}), be = x("", {
+  variants: {
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-ghost",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      inherit: "",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white"
+    },
+    hasUnderline: {
+      true: "underline",
+      false: ""
+    },
+    isCapitalize: {
+      true: "capitalize",
+      false: ""
+    },
+    hasMargin: {
+      true: "mb-4",
+      false: ""
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    italic: {
+      true: "italic",
+      false: ""
+    },
+    clamp: {
+      1: "line-clamp-1",
+      2: "line-clamp-2",
+      3: "line-clamp-3",
+      4: "line-clamp-4",
+      5: "line-clamp-5",
+      none: ""
+    },
+    ellipsis: {
+      true: "truncate",
+      false: ""
+    },
+    level: {
+      1: "font-bold text-2xl leading-loose",
+      2: "font-semibold text-xl leading-relaxed",
+      3: "font-semibold text-lg leading-relaxed",
+      4: "font-bold text-sm leading-normal",
+      5: "font-semibold text-sm leading-normal",
+      6: "font-medium text-xs leading-normal"
+    }
+  },
+  defaultVariants: {
+    color: "ghost",
+    hasUnderline: !1,
+    isCapitalize: !1,
+    hasMargin: !1,
+    align: "left",
+    italic: !1,
+    clamp: "none",
+    ellipsis: !1,
+    level: 1
+  }
+}), X = m(
+  ({
+    level: e = 3,
+    color: t = "black",
+    hasUnderline: r = !1,
+    isCapitalize: s = !1,
+    hasMargin: n = !1,
+    align: o = "left",
+    italic: i = !1,
+    clamp: c = "none",
+    ellipsis: d = !1,
+    className: h,
+    children: g,
+    ...u
+  }, b) => {
+    const w = `h${e}`;
+    return /* @__PURE__ */ a.jsx(
+      w,
+      {
+        ref: b,
+        className: f(
+          be({
+            color: t,
+            hasUnderline: r,
+            isCapitalize: s,
+            hasMargin: n,
+            align: o,
+            italic: i,
+            clamp: c,
+            ellipsis: d,
+            level: e
+          }),
+          h
+        ),
+        ...u,
+        children: g
+      }
+    );
+  }
+);
+X.displayName = "Heading";
+const pe = x("inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      xs: "w-3 h-3",
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6",
+      xl: "w-8 h-8",
+      inherit: "w-auto h-auto"
+    },
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-neutral",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white",
+      inherit: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+}), N = A.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: n, ...o }, i) {
+  return /* @__PURE__ */ a.jsx(
+    t,
+    {
+      ref: i,
+      className: pe({ color: r, size: s, className: n }),
+      ...o
+    }
+  );
+}), we = m(function({ className: t, children: r, ...s }, n) {
+  return /* @__PURE__ */ a.jsx(
+    X,
+    {
+      ref: n,
+      level: 4,
+      className: f("font-medium", t),
+      ...s,
+      color: "black",
+      children: r
+    }
+  );
+}), ve = m(function({ className: t, children: r, ...s }, n) {
+  const { isOpen: o } = D();
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: n,
+      className: f(me({ isOpen: o }), t),
+      ...s,
+      children: /* @__PURE__ */ a.jsx("div", { className: ge(), children: r })
+    }
+  );
+}), Y = m(function({ as: t, ...r }, s) {
+  const { isOpen: n } = D();
+  return /* @__PURE__ */ a.jsx(
+    N,
+    {
+      ref: s,
+      as: t,
+      color: "ghost",
+      size: "sm",
+      className: xe({ isOpen: n }),
+      ...r
+    }
+  );
+}), ye = m(
+  function({
+    title: t,
+    subtitle: r,
+    isDefaultOpen: s = !1,
+    disabled: n = !1,
+    hasMargin: o,
+    className: i,
+    children: c,
+    ...d
+  }, h) {
+    const [g, u] = V(s), b = () => {
+      n || u((p) => !p);
+    }, w = {
+      isOpen: g,
+      toggle: b,
+      disabled: n
+    };
+    return /* @__PURE__ */ a.jsx($.Provider, { value: w, children: /* @__PURE__ */ a.jsxs(
+      "div",
+      {
+        ref: h,
+        className: f(
+          fe({ disabled: n }),
+          i,
+          o && "mb-4"
+        ),
+        ...d,
+        children: [
+          /* @__PURE__ */ a.jsx(
+            "div",
+            {
+              role: "button",
+              className: he({ disabled: n, isOpen: g }),
+              onClick: b,
+              "aria-disabled": n,
+              "aria-expanded": g,
+              children: /* @__PURE__ */ a.jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
+                /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3 flex-grow", children: [
+                  /* @__PURE__ */ a.jsx("div", { className: "flex-1", children: t }),
+                  r && /* @__PURE__ */ a.jsx("div", { className: "flex-shrink-0", children: r })
+                ] }),
+                /* @__PURE__ */ a.jsx(Y, { as: se })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ a.jsx(
+            "div",
+            {
+              className: f(
+                "overflow-hidden transition-all duration-300",
+                g ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
+              ),
+              children: /* @__PURE__ */ a.jsx("div", { className: "p-4 pt-2", children: c })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+), Qt = Object.assign(ye, {
+  Title: we,
+  Content: ve,
+  Icon: Y
+}), je = x(
+  "group flex items-center justify-between transition-all duration-200 w-full",
+  {
+    variants: {
+      size: {
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-5"
+      },
+      as: {
+        button: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50 cursor-pointer",
+        div: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      as: "button"
+    }
+  }
+), ke = x(
+  "bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl flex items-center justify-center group-hover:from-primary-soft group-hover:to-primary-light duration-200",
+  {
+    variants: {
+      size: {
+        sm: "w-8 h-8",
+        md: "w-10 h-10",
+        lg: "w-12 h-12"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), Ne = x(
+  "inline-flex items-center justify-center text-ghost-bold transition-colors duration-200",
+  {
+    variants: {
+      size: {
+        sm: "w-3 h-3",
+        md: "w-4 h-4",
+        lg: "w-5 h-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), Ee = x("", {
+  variants: {
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-ghost",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      inherit: "",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white"
+    },
+    hasUnderline: {
+      true: "underline",
+      false: ""
+    },
+    isCapitalize: {
+      true: "capitalize",
+      false: ""
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    italic: {
+      true: "italic",
+      false: ""
+    },
+    clamp: {
+      1: "line-clamp-1",
+      2: "line-clamp-2",
+      3: "line-clamp-3",
+      4: "line-clamp-4",
+      5: "line-clamp-5",
+      none: ""
+    },
+    ellipsis: {
+      true: "truncate",
+      false: ""
+    },
+    as: {
+      h1: "font-bold text-4xl leading-loose",
+      h2: "font-semibold text-3xl leading-relaxed",
+      h3: "font-medium text-2xl leading-relaxed",
+      h4: "font-bold text-xl leading-normal",
+      h5: "font-semibold text-lg leading-normal",
+      h6: "font-medium text-base leading-normal",
+      p: "font-normal text-base leading-normal",
+      span: "font-normal text-base leading-normal",
+      label: "font-normal text-xs leading-normal"
+    }
+  },
+  defaultVariants: {
+    color: "neutral",
+    hasUnderline: !1,
+    isCapitalize: !1,
+    align: "left",
+    italic: !1,
+    clamp: "none",
+    ellipsis: !1,
+    as: "span"
+  }
+}), y = m(
+  ({
+    as: e = "span",
+    color: t = "ghost",
+    hasUnderline: r = !1,
+    isCapitalize: s = !1,
+    align: n = "left",
+    italic: o = !1,
+    clamp: i = "none",
+    ellipsis: c = !1,
+    fontSize: d,
+    fontWeight: h,
+    className: g,
+    children: u,
+    ...b
+  }, w) => {
+    const v = [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "label"
+    ].includes(e) ? e : "span", E = d ? `text-${d}` : "", C = h ? `font-${h}` : "";
+    return /* @__PURE__ */ a.jsx(
+      e,
+      {
+        ref: w,
+        className: f(
+          Ee({
+            color: t,
+            hasUnderline: r,
+            isCapitalize: s,
+            align: n,
+            italic: o,
+            clamp: i,
+            ellipsis: c,
+            // @ts-expect-error - `as` is not a valid variant
+            as: v
+          }),
+          E,
+          C,
+          g
+        ),
+        ...b,
+        children: u
+      }
+    );
+  }
+), Ce = m(
+  ({ children: e, className: t }, r) => /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: r,
+      className: f(
+        "bg-background border border-border rounded-lg overflow-hidden",
+        "divide-y divide-border",
+        t
+      ),
+      role: "group",
+      children: e
+    }
+  )
+), ze = m(
+  ({
+    size: e = "md",
+    icon: t,
+    title: r,
+    subtitle: s,
+    badge: n,
+    showArrow: o = !0,
+    as: i = "button",
+    className: c,
+    ...d
+  }, h) => /* @__PURE__ */ a.jsxs(
+    i,
+    {
+      ref: h,
+      className: f(je({ size: e, as: i }), c),
+      ...d,
+      children: [
+        /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
+          t && /* @__PURE__ */ a.jsx("div", { className: f(ke({ size: e })), children: t }),
+          /* @__PURE__ */ a.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-3 mb-1", children: [
+              /* @__PURE__ */ a.jsx(
+                y,
+                {
+                  as: "span",
+                  fontSize: e === "sm" ? "sm" : "base",
+                  fontWeight: "semibold",
+                  color: "ghost",
+                  className: "text-left leading-normal",
+                  children: r
+                }
+              ),
+              n && /* @__PURE__ */ a.jsx(
+                "div",
+                {
+                  className: "flex flex-wrap items-center flex-row justify-start gap-3",
+                  role: "group",
+                  children: n
+                }
+              )
+            ] }),
+            s && /* @__PURE__ */ a.jsx(
+              y,
+              {
+                as: "p",
+                fontSize: "sm",
+                color: "gray",
+                className: "text-left leading-normal",
+                children: s
+              }
+            )
+          ] })
+        ] }),
+        o && /* @__PURE__ */ a.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ a.jsx(
+          N,
+          {
+            as: ae,
+            className: f(Ne({ size: e })),
+            color: "ghost",
+            "aria-hidden": "true"
+          }
+        ) })
+      ]
+    }
+  )
+), Zt = Object.assign(ze, {
+  Group: Ce
+}), Ve = x(
+  "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border"
+      },
+      color: {
+        // Core colors
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: "",
+        // Semantic colors
+        success: "",
+        info: "",
+        warning: "",
+        danger: ""
+      }
+    },
+    compoundVariants: [
+      // Default variant styles (soft backgrounds)
+      {
+        variant: "default",
+        color: "primary",
+        class: "bg-primary-soft text-primary border border-primary"
+      },
+      {
+        variant: "default",
+        color: "secondary",
+        class: "bg-secondary-soft text-secondary border border-secondary"
+      },
+      {
+        variant: "default",
+        color: "tertiary",
+        class: "bg-tertiary-soft text-tertiary border border-tertiary"
+      },
+      {
+        variant: "default",
+        color: "ghost",
+        class: "bg-ghost-soft text-ghost border border-ghost"
+      },
+      {
+        variant: "default",
+        color: "neutral",
+        class: "bg-border/50 text-foreground border border-border"
+      },
+      {
+        variant: "default",
+        color: "success",
+        class: "bg-success-soft text-success border border-success"
+      },
+      {
+        variant: "default",
+        color: "info",
+        class: "bg-info-soft text-info border border-info"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        class: "bg-warning-soft text-warning border border-warning"
+      },
+      {
+        variant: "default",
+        color: "danger",
+        class: "bg-danger-soft text-danger border border-danger"
+      },
+      // Outline variant styles
+      {
+        variant: "outline",
+        color: "primary",
+        class: "bg-transparent text-primary border-primary"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        class: "bg-transparent text-secondary border-secondary"
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        class: "bg-transparent text-tertiary border-tertiary"
+      },
+      {
+        variant: "outline",
+        color: "ghost",
+        class: "bg-transparent text-ghost border-ghost"
+      },
+      {
+        variant: "outline",
+        color: "neutral",
+        class: "bg-transparent text-foreground border-border"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        class: "bg-transparent text-success border-success"
+      },
+      {
+        variant: "outline",
+        color: "info",
+        class: "bg-transparent text-info border-info"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        class: "bg-transparent text-warning border-warning"
+      },
+      {
+        variant: "outline",
+        color: "danger",
+        class: "bg-transparent text-danger border-danger"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "neutral"
+    }
+  }
+), Ie = x(
+  "flex-shrink-0 flex justify-center items-center ",
+  {
+    variants: {
+      size: {
+        sm: "w-4 h-4",
+        md: "w-5 h-5",
+        lg: "w-6 h-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), J = m(
+  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a.jsx("div", { ref: s, className: f(Ie(), e), ...r, children: t })
+), Me = m(
+  ({
+    variant: e = "default",
+    color: t = "neutral",
+    icon: r,
+    className: s,
+    children: n,
+    ...o
+  }, i) => /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      ref: i,
+      role: "alert",
+      className: f(Ve({ variant: e, color: t }), s),
+      ...o,
+      children: [
+        r && /* @__PURE__ */ a.jsx(J, { children: r }),
+        /* @__PURE__ */ a.jsx("div", { className: "flex-1", children: n })
+      ]
+    }
+  )
+), er = Object.assign(Me, {
+  Icon: J
+}), Ae = x(
+  [
+    "inline-flex items-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    // pseudo selectors for anchor
+    "hover:no-underline"
+  ],
+  {
+    variants: {
+      color: {
+        primary: "text-primary",
+        secondary: "text-secondary",
+        ghost: "text-ghost",
+        danger: "text-danger",
+        neutral: "text-neutral"
+      },
+      fontSize: {
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+        "5xl": "text-5xl",
+        "6xl": "text-6xl",
+        "7xl": "text-7xl",
+        "8xl": "text-8xl",
+        "9xl": "text-9xl",
+        inherit: "",
+        undefined: ""
+      },
+      fontWeight: {
+        thin: "font-thin",
+        extralight: "font-extralight",
+        light: "font-light",
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+        extrabold: "font-extrabold",
+        black: "font-black",
+        inherit: "",
+        undefined: ""
+      },
+      quiet: {
+        true: "",
+        false: "underline underline-offset-2"
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      fontSize: "base",
+      fontWeight: "medium",
+      quiet: !1
+    }
+  }
+), tr = m(
+  ({
+    children: e,
+    className: t,
+    color: r = "primary",
+    fontSize: s = "base",
+    fontWeight: n = "medium",
+    quiet: o = !1,
+    ...i
+  }, c) => /* @__PURE__ */ a.jsx(
+    "a",
+    {
+      ref: c,
+      className: f(
+        Ae({ color: r, fontSize: s, fontWeight: n, quiet: o }),
+        t
+      ),
+      ...i,
+      children: e
+    }
+  )
+), Le = m(
+  function({ title: t, children: r, className: s, hasMargin: n, ...o }, i) {
+    return /* @__PURE__ */ a.jsxs(
+      "div",
+      {
+        ref: i,
+        className: f("space-y-1", s, n && "mb-4"),
+        ...o,
+        children: [
+          /* @__PURE__ */ a.jsx(
+            y,
+            {
+              as: "h4",
+              fontSize: "xs",
+              fontWeight: "normal",
+              color: "gray",
+              className: "leading-none",
+              children: t
+            }
+          ),
+          /* @__PURE__ */ a.jsx(y, { as: "p", fontSize: "sm", fontWeight: "normal", children: r })
+        ]
+      }
+    );
+  }
+);
+function Se(e = 1) {
+  switch (e) {
+    case 1:
+      return "col-span-1";
+    case 2:
+      return "col-span-2";
+    case 3:
+      return "col-span-3";
+    case 4:
+      return "col-span-4";
+    case 5:
+      return "col-span-5";
+    case 6:
+      return "col-span-6";
+    case 7:
+      return "col-span-7";
+    case 8:
+      return "col-span-8";
+    case 9:
+      return "col-span-9";
+    case 10:
+      return "col-span-10";
+    case 11:
+      return "col-span-11";
+    case 12:
+      return "col-span-12";
+    default:
+      return "col-span-1";
+  }
+}
+function We(e = 4) {
+  switch (e) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "grid-cols-2";
+    case 3:
+      return "grid-cols-3";
+    case 4:
+      return "grid-cols-4";
+    case 5:
+      return "grid-cols-5";
+    case 6:
+      return "grid-cols-6";
+    case 7:
+      return "grid-cols-7";
+    case 8:
+      return "grid-cols-8";
+    case 9:
+      return "grid-cols-9";
+    case 10:
+      return "grid-cols-10";
+    case 11:
+      return "grid-cols-11";
+    case 12:
+      return "grid-cols-12";
+    default:
+      return "grid-cols-4";
+  }
+}
+const Be = m(function({ children: t, className: r, span: s = 1, title: n, ...o }, i) {
+  const c = Se(s);
+  return /* @__PURE__ */ a.jsx("li", { ref: i, className: f(c, r), ...o, children: /* @__PURE__ */ a.jsx(Le, { title: n, children: t }) });
+}), Oe = m(
+  function({ children: t, className: r, columns: s = 4, ...n }, o) {
+    const i = We(s);
+    return /* @__PURE__ */ a.jsx(
+      "ul",
+      {
+        ref: o,
+        className: f("grid gap-4", i, r),
+        ...n,
+        children: t
+      }
+    );
+  }
+), rr = Object.assign(Oe, {
+  Item: Be
+}), He = x(
+  "inline-flex items-center justify-center font-medium text-white overflow-hidden transition-all duration-200 select-none relative",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "bg-primary-light text-primary",
+        secondary: "bg-secondary-light text-secondary",
+        tertiary: "bg-tertiary-light text-tertiary",
+        ghost: "bg-ghost-light text-ghost",
+        neutral: "bg-neutral-light text-foreground border border-border",
+        // Accent variants
+        accent_1: "bg-accent-1-light text-accent-1",
+        accent_2: "bg-accent-2-light text-accent-2",
+        accent_3: "bg-accent-3-light text-accent-3",
+        // Semantic variants
+        success: "bg-success-light text-success",
+        info: "bg-info-light text-info",
+        warning: "bg-warning-light text-warning",
+        danger: "bg-danger-light text-danger"
+      },
+      size: {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-7 w-7 text-xs",
+        md: "h-9 w-9 text-sm",
+        lg: "h-10 w-10 text-base",
+        xl: "h-12 w-12 text-xl"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-none",
+        rounded: "rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      shape: "circle"
+    }
+  }
+), Te = x(
+  "absolute inset-0 h-full w-full object-cover"
+), qe = m(
+  ({
+    variant: e = "primary",
+    size: t = "md",
+    shape: r = "circle",
+    className: s,
+    children: n,
+    ...o
+  }, i) => /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: i,
+      className: f(He({ variant: e, size: t, shape: r }), s),
+      ...o,
+      children: n
+    }
+  )
+), Pe = m(
+  ({ src: e, alt: t, className: r, onError: s, ...n }, o) => {
+    const [i, c] = V(!1);
+    I(() => {
+      c(!1);
+    }, [e]);
+    const d = R(
+      (h) => {
+        c(!0), s?.(h);
+      },
+      [s]
+    );
+    return i ? null : /* @__PURE__ */ a.jsx(
+      "img",
+      {
+        ref: o,
+        src: e,
+        alt: t,
+        className: f(Te(), r),
+        onError: d,
+        ...n
+      }
+    );
+  }
+), nr = Object.assign(qe, {
+  /**
+   * AvatarImage sub-component for displaying images with fallback behavior
+   */
+  Image: Pe
+}), _e = x(
+  "inline-flex items-center justify-center font-medium transition-all duration-200 select-none gap-1 min-h-[1.25rem]",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border bg-background"
+      },
+      color: {
+        // Core colors
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: "",
+        // Accent colors
+        accent_1: "",
+        accent_2: "",
+        accent_3: "",
+        // Semantic colors
+        success: "",
+        info: "",
+        warning: "",
+        danger: ""
+      },
+      shape: {
+        rounded: "rounded-full",
+        square: "rounded-xs"
+      },
+      size: {
+        sm: "text-xs px-1 py-0.25 h-3",
+        md: "text-xs px-1.5 py-0.5 h-4",
+        lg: "text-sm px-2 py-1 h-6"
+      },
+      iconOnly: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Default variant color combinations - using light/soft backgrounds
+      {
+        variant: "default",
+        color: "primary",
+        className: "bg-primary-light text-primary-bold"
+      },
+      {
+        variant: "default",
+        color: "secondary",
+        className: "bg-secondary-light text-secondary-bold"
+      },
+      {
+        variant: "default",
+        color: "tertiary",
+        className: "bg-tertiary-light text-tertiary-bold"
+      },
+      {
+        variant: "default",
+        color: "ghost",
+        className: "bg-ghost/05 text-ghost"
+      },
+      {
+        variant: "default",
+        color: "neutral",
+        className: "bg-neutral-light text-foreground"
+      },
+      {
+        variant: "default",
+        color: "success",
+        className: "bg-success-light/50 text-success-bold"
+      },
+      {
+        variant: "default",
+        color: "info",
+        className: "bg-info-light/50 text-info-bold"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        className: "bg-warning-light/50 text-warning-bold"
+      },
+      {
+        variant: "default",
+        color: "danger",
+        className: "bg-danger-light/40 text-danger-bold"
+      },
+      {
+        variant: "default",
+        color: "accent_1",
+        className: "bg-accent-1-light text-accent-1-bold"
+      },
+      {
+        variant: "default",
+        color: "accent_2",
+        className: "bg-accent-2-light text-accent-2-bold"
+      },
+      {
+        variant: "default",
+        color: "accent_3",
+        className: "bg-accent-3-light text-accent-3-bold"
+      },
+      // Outline variant color combinations
+      {
+        variant: "outline",
+        color: "primary",
+        className: "border-primary text-primary"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        className: "border-secondary text-secondary"
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        className: "border-tertiary text-tertiary"
+      },
+      {
+        variant: "outline",
+        color: "ghost",
+        className: "border-ghost text-ghost"
+      },
+      {
+        variant: "outline",
+        color: "neutral",
+        className: "border-neutral text-foreground"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        className: "border-success text-success"
+      },
+      {
+        variant: "outline",
+        color: "info",
+        className: "border-info text-info"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        className: "border-warning text-warning"
+      },
+      {
+        variant: "outline",
+        color: "danger",
+        className: "border-danger text-danger"
+      },
+      {
+        variant: "outline",
+        color: "accent_1",
+        className: "border-accent-1 text-accent-1"
+      },
+      {
+        variant: "outline",
+        color: "accent_2",
+        className: "border-accent-2 text-accent-2"
+      },
+      {
+        variant: "outline",
+        color: "accent_3",
+        className: "border-accent-3 text-accent-3"
+      },
+      // Icon-only size adjustments
+      {
+        iconOnly: !0,
+        size: "sm",
+        className: "px-1 py-1 w-5 h-5"
+      },
+      {
+        iconOnly: !0,
+        size: "md",
+        className: "px-1.5 py-1.5 w-6 h-6"
+      },
+      {
+        iconOnly: !0,
+        size: "lg",
+        className: "px-2 py-2 w-7 h-7"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary",
+      shape: "square",
+      size: "md",
+      iconOnly: !1
+    }
+  }
+), sr = m(
+  ({
+    variant: e = "default",
+    shape: t = "square",
+    color: r = "primary",
+    size: s = "md",
+    iconLeft: n,
+    iconRight: o,
+    className: i,
+    children: c,
+    ...d
+  }, h) => {
+    const b = !(c != null && c !== "") && !!(n || o);
+    return /* @__PURE__ */ a.jsx(
+      "span",
+      {
+        ref: h,
+        className: f(
+          _e({
+            variant: e,
+            color: r,
+            shape: t,
+            size: s,
+            iconOnly: b
+          }),
+          i
+        ),
+        ...d,
+        children: b ? (
+          // Icon-only mode: display only the icon
+          n || o
+        ) : (
+          // Normal mode: display icon(s) and text
+          /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+            n,
+            c,
+            o
+          ] })
+        )
+      }
+    );
+  }
+), _ = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Spenicle"), /* @__PURE__ */ l.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Fe = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Spenicle"), /* @__PURE__ */ l.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Ue = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Spenicle"), /* @__PURE__ */ l.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Re = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Hub (Square)"), /* @__PURE__ */ l.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 0, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), Ge = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Hub (Rounded)"), /* @__PURE__ */ l.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), $e = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Hub (Circle)"), /* @__PURE__ */ l.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ l.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ l.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), De = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Notunic"), /* @__PURE__ */ l.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), Xe = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Notunic"), /* @__PURE__ */ l.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), Ye = (e) => /* @__PURE__ */ l.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ l.createElement("title", null, "Notunic"), /* @__PURE__ */ l.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ l.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ l.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), Je = x("", {
+  variants: {
+    size: {
+      xs: "h-6 w-6",
+      sm: "h-7 w-7",
+      md: "h-9 w-9",
+      lg: "h-10 w-10",
+      xl: "h-12 w-12"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), Ke = m(
+  ({ shape: e = "square", size: t, name: r = "spenicle", ...s }, n) => {
+    const o = {
+      spenicle: {
+        square: _,
+        rounded: Fe,
+        circle: Ue
+      },
+      hub: {
+        square: Re,
+        rounded: Ge,
+        circle: $e
+      },
+      notunic: {
+        square: De,
+        rounded: Xe,
+        circle: Ye
+      }
+    }, c = (o[r] || o.spenicle)[e || "square"] || _;
+    return /* @__PURE__ */ a.jsx(
+      c,
+      {
+        ref: n,
+        ...s,
+        className: f("inline-block", Je({ size: t }))
+      }
+    );
+  }
+), ar = m(
+  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, n) => /* @__PURE__ */ a.jsx(
+    "span",
+    {
+      ref: n,
+      className: f("inline-flex items-center gap-2"),
+      ...s,
+      children: /* @__PURE__ */ a.jsx(Ke, { name: e, shape: r, size: t, "aria-hidden": "true" })
+    }
+  )
+), Qe = x(
+  "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none cursor-pointer",
+  {
+    variants: {
+      variant: {
+        // Primary variant - main action button with coral accent
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        // Ghost variant - subtle, minimal visual weight
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        // Outline variant - bordered, lightweight alternative
+        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
+        // Destructive variant - for dangerous or irreversible actions
+        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
+      },
+      size: {
+        sm: "h-7 px-3 text-sm min-w-[2.25rem]",
+        md: "h-9 px-4 text-sm min-w-[2.5rem]",
+        lg: "h-10 px-8 text-lg min-w-[2.75rem]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), K = A.forwardRef(
+  function({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    disabled: n = !1,
+    type: o = "button",
+    busy: i,
+    children: c,
+    ...d
+  }, h) {
+    const g = s === "sm" ? "sm" : s === "lg" ? "md" : "sm", u = () => r === "primary" || r === "destructive" ? "white" : "inherit";
+    return /* @__PURE__ */ a.jsxs(
+      "button",
+      {
+        ref: h,
+        type: o,
+        className: f(Qe({ variant: r, size: s }), t),
+        disabled: n || i,
+        "aria-disabled": n || i,
+        inert: n || i ? !0 : void 0,
+        "aria-busy": i ? !0 : void 0,
+        ...d,
+        children: [
+          i && /* @__PURE__ */ a.jsx(
+            N,
+            {
+              as: G,
+              size: g,
+              color: u(),
+              className: "animate-spin"
+            }
+          ),
+          c
+        ]
+      }
+    );
+  }
+), Ze = x(
+  "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none cursor-pointer no-underline",
+  {
+    variants: {
+      variant: {
+        // Primary variant - main action button with coral accent
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        // Ghost variant - subtle, minimal visual weight
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        // Outline variant - bordered, lightweight alternative
+        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all"
+      },
+      size: {
+        sm: "h-7 px-3 text-sm min-w-[2.25rem]",
+        md: "h-9 px-4 text-sm min-w-[2.5rem]",
+        lg: "h-10 px-8 text-lg min-w-[2.75rem]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), or = A.forwardRef(function({
+  className: t,
+  variant: r = "primary",
+  size: s = "md",
+  disabled: n = !1,
+  children: o,
+  href: i,
+  onClick: c,
+  ...d
+}, h) {
+  const g = (u) => {
+    if (n) {
+      u.preventDefault();
+      return;
+    }
+    c?.(u);
+  };
+  return /* @__PURE__ */ a.jsx(
+    "a",
+    {
+      ref: h,
+      href: n ? void 0 : i,
+      className: f(Ze({ variant: r, size: s }), t),
+      "aria-disabled": n ? !0 : void 0,
+      tabIndex: n ? -1 : void 0,
+      role: n ? "link" : void 0,
+      onClick: g,
+      ...d,
+      children: o
+    }
+  );
+}), et = ({
+  container: e,
+  children: t
+}) => {
+  if (typeof window > "u" || typeof document > "u")
+    return /* @__PURE__ */ a.jsx(a.Fragment, { children: t });
+  const r = e ?? document.body;
+  return r ? de.createPortal(t, r) : /* @__PURE__ */ a.jsx(a.Fragment, { children: t });
+}, tt = x(
+  "z-70 min-w-56 bg-background rounded-lg border border-border transition-all duration-200 ease-out will-change-transform shadow-lg",
+  {
+    variants: {
+      size: {
+        sm: "py-1.5 px-1",
+        md: "py-2 px-1"
+      },
+      open: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 pointer-events-none scale-95"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      open: !1
+    }
+  }
+);
+function F(e) {
+  const t = [];
+  let r = e.parentElement;
+  for (; r && r !== document.documentElement; ) {
+    const s = getComputedStyle(r);
+    (s.overflow === "auto" || s.overflow === "scroll" || s.overflowY === "auto" || s.overflowY === "scroll" || s.overflowX === "auto" || s.overflowX === "scroll") && t.push(r), r = r.parentElement;
+  }
+  return t.push(document.documentElement), t;
+}
+function rt(e, t) {
+  const r = e.getBoundingClientRect();
+  if (r.bottom < 0 || r.top > window.innerHeight || r.right < 0 || r.left > window.innerWidth)
+    return !1;
+  for (const s of t) {
+    if (s === document.documentElement) continue;
+    const n = s.getBoundingClientRect();
+    if (r.bottom < n.top || r.top > n.bottom || r.right < n.left || r.left > n.right)
+      return !1;
+  }
+  return !0;
+}
+function nt(e, t, r, s, n, o) {
+  if (e !== "auto")
+    return e;
+  const c = [
+    {
+      name: "bottom-start",
+      fits: r >= t.height && n >= t.width,
+      spaceUsed: r,
+      priority: 1
+    },
+    {
+      name: "bottom-end",
+      fits: r >= t.height && o >= t.width,
+      spaceUsed: r,
+      priority: 2
+    },
+    {
+      name: "top-start",
+      fits: s >= t.height && n >= t.width,
+      spaceUsed: s,
+      priority: 3
+    },
+    {
+      name: "top-end",
+      fits: s >= t.height && o >= t.width,
+      spaceUsed: s,
+      priority: 4
+    }
+  ].filter((d) => d.fits);
+  return c.length > 0 ? c.sort((d, h) => d.priority - h.priority)[0].name : r >= s ? n >= o ? "bottom-start" : "bottom-end" : n >= o ? "top-start" : "top-end";
+}
+function st(e, t) {
+  const r = {};
+  switch (e) {
+    case "bottom-start":
+      r.top = t.bottom + 4, r.left = t.left;
+      break;
+    case "bottom-end":
+      r.top = t.bottom + 4, r.right = window.innerWidth - t.right;
+      break;
+    case "top-start":
+      r.bottom = window.innerHeight - t.top + 4, r.left = t.left;
+      break;
+    case "top-end":
+      r.bottom = window.innerHeight - t.top + 4, r.right = window.innerWidth - t.right;
+      break;
+  }
+  return r;
+}
+function at(e, t) {
+  const r = {};
+  switch (e) {
+    case "bottom-start":
+      r.top = t.height + 4, r.left = 0;
+      break;
+    case "bottom-end":
+      r.top = t.height + 4, r.right = 0;
+      break;
+    case "top-start":
+      r.bottom = t.height + 4, r.left = 0;
+      break;
+    case "top-end":
+      r.bottom = t.height + 4, r.right = 0;
+      break;
+  }
+  return r;
+}
+function ot(e, t, r, s, n) {
+  const o = {
+    top: t.startsWith("bottom") ? r.bottom + 4 : r.top - s.height - 4,
+    left: t.endsWith("start") ? r.left : r.right - s.width,
+    width: s.width,
+    height: s.height
+  };
+  if (o.left < n.left + 8) {
+    const c = n.left + 8 - o.left;
+    t.endsWith("start") ? e.left = (e.left || 0) + c : e.right = (e.right || 0) - c;
+  } else if (o.left + o.width > n.right - 8) {
+    const c = o.left + o.width - (n.right - 8);
+    t.endsWith("start") ? e.left = (e.left || 0) - c : e.right = (e.right || 0) + c;
+  }
+  let i;
+  if (t.startsWith("bottom")) {
+    const c = Math.max(
+      50,
+      n.bottom - r.bottom - 16
+    );
+    s.height > c && (i = c);
+  } else {
+    const c = Math.max(
+      50,
+      r.top - n.top - 16
+    );
+    s.height > c && (i = c);
+  }
+  return { position: e, maxHeight: i };
+}
+function it(e, t, r, s) {
+  const n = {
+    top: t.startsWith("bottom") ? r.height + 4 : -s.height - 4,
+    left: t.endsWith("start") ? 0 : -s.width,
+    width: s.width,
+    height: s.height
+  };
+  if (r.left + n.left < 8) {
+    const o = 8 - (r.left + n.left);
+    t.endsWith("start") ? e.left = (e.left || 0) + o : e.right = (e.right || 0) - o;
+  } else if (r.left + n.left + n.width > window.innerWidth - 8) {
+    const o = r.left + n.left + n.width - (window.innerWidth - 8);
+    t.endsWith("start") ? e.left = (e.left || 0) - o : e.right = (e.right || 0) + o;
+  }
+  return e;
+}
+function lt(e, t, r, s) {
+  I(() => {
+    if (!e) return;
+    function n(o) {
+      !t.current?.contains(o.target) && !r.current?.contains(o.target) && s();
+    }
+    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
+  }, [e, s, t, r]);
+}
+function ct(e) {
+  return e ? "getBoundingClientRect" in e ? e : "current" in e ? e.current : null : null;
+}
+function dt(e) {
+  return !e || e === document.documentElement ? {
+    top: 0,
+    bottom: window.innerHeight,
+    left: 0,
+    right: window.innerWidth
+  } : e.getBoundingClientRect();
+}
+function ut(e, t) {
+  return {
+    spaceBelow: t.bottom - e.bottom - 8,
+    spaceAbove: e.top - t.top - 8,
+    spaceRight: t.right - e.left - 8,
+    spaceLeft: e.right - t.left - 8
+  };
+}
+function ft(e) {
+  const t = e.style.visibility, r = e.style.position, s = e.style.opacity;
+  e.style.visibility = "hidden", e.style.position = "absolute", e.style.opacity = "0";
+  const n = e.getBoundingClientRect();
+  return e.style.visibility = t, e.style.position = r, e.style.opacity = s, n;
+}
+function ht(e, t, r, s = "bottom-start", n) {
+  const [o, i] = V({ isReady: !1 }), c = R(() => {
+    if (!e || !t.current) {
+      i({ isReady: !1 });
+      return;
+    }
+    if (!r.current) {
+      const z = setTimeout(() => {
+        i({ isReady: !1 });
+      }, 0);
+      return () => clearTimeout(z);
+    }
+    const d = t.current, h = r.current, g = F(d);
+    if (!rt(d, g)) {
+      i({ isReady: !1 });
+      return;
+    }
+    const u = d.getBoundingClientRect(), b = ct(n), w = dt(b), p = ft(h);
+    if (!p) {
+      i({ isReady: !1 });
+      return;
+    }
+    const { spaceBelow: v, spaceAbove: E, spaceRight: C, spaceLeft: L } = ut(u, w), k = nt(
+      s,
+      p,
+      v,
+      E,
+      C,
+      L
+    ), j = {};
+    if (n) {
+      j.position = "fixed";
+      const z = st(k, u);
+      Object.assign(j, z);
+      const { position: S, maxHeight: P } = ot(
+        z,
+        k,
+        u,
+        p,
+        w
+      );
+      Object.assign(j, S), P !== void 0 && (j.maxHeight = P);
+    } else {
+      j.position = "absolute";
+      const z = at(k, u);
+      Object.assign(j, z);
+      const S = it(
+        z,
+        k,
+        u,
+        p
+      );
+      Object.assign(j, S);
+    }
+    j.isReady = !0, i(j);
+  }, [e, s, t, r, n]);
+  return I(() => {
+    c();
+  }, [c]), I(() => {
+    if (!e || !t.current) return;
+    const d = t.current, h = F(d);
+    let g = !1;
+    const u = () => {
+      g || (requestAnimationFrame(() => {
+        c(), g = !1;
+      }), g = !0);
+    };
+    return h.forEach((b) => {
+      b === document.documentElement ? (window.addEventListener("scroll", u, { passive: !0 }), window.addEventListener("resize", u, { passive: !0 })) : b.addEventListener("scroll", u, { passive: !0 });
+    }), () => {
+      h.forEach((b) => {
+        b === document.documentElement ? (window.removeEventListener("scroll", u), window.removeEventListener("resize", u)) : b.removeEventListener("scroll", u);
+      });
+    };
+  }, [e, c, t]), o;
+}
+const Q = B(void 0), mt = Q.Provider, gt = () => {
+  const e = O(Q);
+  if (!e)
+    throw new Error("useMenuProvider must be used within a MenuProvider");
+  return e;
+}, xt = m(
+  ({ children: e }, t) => /* @__PURE__ */ a.jsx("ul", { ref: t, className: "flex flex-col gap-1", children: e })
+), bt = m(
+  ({ children: e, disabled: t, onClick: r, active: s, ...n }, o) => {
+    const { preserve: i, onClose: c } = gt(), d = (h) => {
+      r?.(h), i || c();
+    };
+    return /* @__PURE__ */ a.jsx("li", { ref: o, ...n, children: /* @__PURE__ */ a.jsxs(
+      K,
+      {
+        variant: "ghost",
+        className: f("justify-start w-full gap-2"),
+        disabled: t,
+        onClick: d,
+        children: [
+          e,
+          s && /* @__PURE__ */ a.jsx(
+            N,
+            {
+              as: oe,
+              color: "inherit",
+              className: "ml-auto",
+              size: "sm"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+function pt(e) {
+  return {
+    top: e.top,
+    bottom: e.bottom,
+    left: e.left,
+    right: e.right,
+    maxHeight: e.maxHeight,
+    maxWidth: e.maxWidth,
+    position: e.position || "absolute",
+    overflowY: e.maxHeight ? "auto" : void 0,
+    overflowX: e.maxWidth ? "auto" : void 0
+  };
+}
+function U(e, t, r, s, n, o) {
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      id: e,
+      ref: t,
+      className: f(tt({ size: r, open: s })),
+      style: n,
+      role: "menu",
+      "aria-hidden": !s,
+      children: o
+    }
+  );
+}
+const wt = ({
+  isOpen: e,
+  onOutsideClick: t,
+  size: r = "md",
+  content: s,
+  children: n,
+  placement: o = "auto",
+  container: i,
+  preserve: c
+}) => {
+  const d = W(null), h = W(null), g = re();
+  lt(e, h, d, t);
+  const u = ht(
+    e,
+    d,
+    h,
+    o,
+    i || null
+  ), b = e && u.isReady, w = pt(u), p = !u.isReady && U(
+    g,
+    h,
+    r,
+    !1,
+    {
+      position: "absolute",
+      visibility: "hidden",
+      opacity: 0,
+      pointerEvents: "none"
+    },
+    s
+  ), v = u.isReady && U(
+    g,
+    h,
+    r,
+    !!b,
+    w,
+    s
+  ), E = u.position === "fixed" && v ? /* @__PURE__ */ a.jsx(et, { children: v }) : v;
+  return /* @__PURE__ */ a.jsx(
+    mt,
+    {
+      value: { onClose: t, preserve: !!c },
+      children: /* @__PURE__ */ a.jsxs("div", { className: "relative w-fit", children: [
+        ne(n, {
+          // @ts-expect-error: ref is valid for button or forwardRef components
+          ref: d,
+          "aria-haspopup": "menu",
+          "aria-expanded": e,
+          "aria-controls": g
+        }),
+        e && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+          p,
+          E
+        ] })
+      ] })
+    }
+  );
+}, M = Object.assign(wt, {
+  Content: xt,
+  Item: bt
+}), vt = m(
+  (e, t) => {
+    const {
+      children: r,
+      onOpenChange: s,
+      onClick: n,
+      placement: o,
+      container: i,
+      preserve: c,
+      label: d,
+      ...h
+    } = e ?? {}, [g, u] = V(!1);
+    I(() => {
+      s?.(g);
+    }, [g, s]);
+    const b = () => {
+      u(!1);
+    }, w = (p) => {
+      p.stopPropagation(), u((v) => !v), n?.(p);
+    };
+    return /* @__PURE__ */ a.jsx(
+      M,
+      {
+        isOpen: g,
+        onOutsideClick: b,
+        placement: o,
+        container: i,
+        preserve: c,
+        content: /* @__PURE__ */ a.jsx(M.Content, { children: r }),
+        children: /* @__PURE__ */ a.jsx(K, { ref: t, onClick: w, ...h, children: d })
+      }
+    );
+  }
+), ir = Object.assign(vt, {
+  Item: M.Item
+});
+function yt(e = "primary") {
+  return e === "primary" || e === "destructive" ? "white" : "inherit";
+}
+const jt = x(
+  "inline-flex items-center justify-center font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] select-none cursor-pointer",
+  {
+    variants: {
+      variant: {
+        // Primary variant - main action button with coral accent
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        // Ghost variant - subtle, minimal visual weight
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        // Outline variant - bordered, lightweight alternative
+        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
+        // Destructive variant - for dangerous or irreversible actions
+        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
+      },
+      size: {
+        sm: "h-7 w-7",
+        md: "h-9 w-9",
+        lg: "h-10 w-10"
+      },
+      shape: {
+        rounded: "rounded-md",
+        square: "rounded-sm",
+        circle: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+), kt = A.forwardRef(
+  function({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    shape: n = "rounded",
+    disabled: o = !1,
+    busy: i,
+    as: c,
+    "aria-label": d,
+    ...h
+  }, g) {
+    const u = yt(r);
+    return /* @__PURE__ */ a.jsx(
+      "button",
+      {
+        ref: g,
+        type: "button",
+        className: f(
+          jt({
+            variant: r,
+            size: s,
+            shape: n
+          }),
+          t
+        ),
+        disabled: o || i,
+        "aria-disabled": o || i,
+        "aria-label": d,
+        inert: o || i ? !0 : void 0,
+        "aria-busy": i ? !0 : void 0,
+        ...h,
+        children: i ? /* @__PURE__ */ a.jsx(
+          N,
+          {
+            as: G,
+            size: "sm",
+            color: u,
+            className: "animate-spin"
+          }
+        ) : /* @__PURE__ */ a.jsx(N, { as: c, size: "sm", color: u })
+      }
+    );
+  }
+), Nt = m(
+  (e, t) => {
+    const {
+      as: r = ie,
+      children: s,
+      onOpenChange: n,
+      onClick: o,
+      placement: i,
+      container: c,
+      preserve: d,
+      ...h
+    } = e ?? {}, [g, u] = V(!1);
+    I(() => {
+      n?.(g);
+    }, [g, n]);
+    const b = () => {
+      u(!1);
+    }, w = (p) => {
+      p.stopPropagation(), u((v) => !v), o?.(p);
+    };
+    return /* @__PURE__ */ a.jsx(
+      M,
+      {
+        isOpen: g,
+        onOutsideClick: b,
+        placement: i,
+        container: c,
+        preserve: d,
+        content: /* @__PURE__ */ a.jsx(M.Content, { children: s }),
+        children: /* @__PURE__ */ a.jsx(kt, { ref: t, as: r, onClick: w, ...h })
+      }
+    );
+  }
+), lr = Object.assign(Nt, {
+  Item: M.Item
+}), Et = x(
+  "flex justify-between transition-colors duration-200 w-full",
+  {
+    variants: {
+      size: {
+        none: "p-0",
+        xs: "p-2 sm:p-2",
+        sm: "p-2 sm:p-3",
+        md: "p-3 sm:p-4",
+        lg: "p-4 sm:p-6",
+        xl: "p-6 sm:p-8"
+      },
+      shape: {
+        rounded: "rounded-lg",
+        square: "rounded-none"
+      },
+      bordered: {
+        true: "border border-border",
+        false: ""
+      },
+      as: {
+        button: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50 cursor-pointer",
+        div: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "rounded",
+      bordered: !1,
+      as: "button"
+    }
+  }
+), Ct = m(
+  ({ children: e }, t) => /* @__PURE__ */ a.jsx(
+    "ul",
+    {
+      ref: t,
+      className: "flex flex-wrap items-center min-w-0 overflow-hidden w-full gap-x-0",
+      children: e
+    }
+  )
+), zt = m(
+  ({ children: e }, t) => /* @__PURE__ */ a.jsx(
+    "li",
+    {
+      ref: t,
+      className: "flex items-center min-w-0 flex-shrink-0 after:content-[''] after:inline-block after:mx-1.5 @sm/card:after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden after:flex-shrink-0",
+      children: /* @__PURE__ */ a.jsx(y, { as: "span", fontSize: "sm", color: "gray", ellipsis: !0, clamp: 1, children: e })
+    }
+  )
+), Vt = m(
+  ({
+    size: e = "md",
+    shape: t = "rounded",
+    avatar: r,
+    title: s,
+    subtitle: n,
+    badge: o,
+    supplementaryInfo: i,
+    bordered: c = !1,
+    as: d = "button",
+    className: h,
+    ...g
+  }, u) => /* @__PURE__ */ a.jsx(
+    d,
+    {
+      ref: u,
+      className: f(
+        Et({ size: e, shape: t, bordered: c, as: d }),
+        h,
+        "@container/card"
+      ),
+      ...g,
+      children: /* @__PURE__ */ a.jsxs("div", { className: "flex items-start gap-3 @sm/card:gap-4 w-full", children: [
+        r && /* @__PURE__ */ a.jsx("div", { className: "flex-shrink-0", children: r }),
+        /* @__PURE__ */ a.jsxs("div", { className: "w-full min-w-0", children: [
+          /* @__PURE__ */ a.jsx("div", { className: "mb-2", children: /* @__PURE__ */ a.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ a.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ a.jsx(
+              y,
+              {
+                as: "h3",
+                fontSize: "base",
+                fontWeight: "semibold",
+                className: "break-words leading-tight",
+                children: s
+              }
+            ),
+            n && /* @__PURE__ */ a.jsx("div", { className: "mt-1", children: typeof n == "string" ? /* @__PURE__ */ a.jsx(y, { as: "p", fontSize: "sm", color: "gray", children: n }) : /* @__PURE__ */ a.jsx("div", { className: "min-w-0 overflow-hidden", children: n }) })
+          ] }) }) }),
+          /* @__PURE__ */ a.jsxs("div", { className: "flex flex-col gap-2 @sm/card:flex-row @sm/card:justify-between @sm/card:items-center", children: [
+            o && /* @__PURE__ */ a.jsx("div", { className: "order-1 @sm/card:order-none overflow-hidden", children: o }),
+            i && /* @__PURE__ */ a.jsx("div", { className: "flex-shrink-0 order-2 @sm/card:order-none @sm/card:ml-auto", children: typeof i == "string" ? /* @__PURE__ */ a.jsx(
+              y,
+              {
+                as: "p",
+                fontSize: "sm",
+                color: "gray",
+                className: "truncate",
+                align: "right",
+                children: i
+              }
+            ) : /* @__PURE__ */ a.jsx("div", { className: "overflow-hidden", children: i }) })
+          ] })
+        ] })
+      ] })
+    }
+  )
+), cr = Object.assign(Vt, {
+  List: Ct,
+  ListItem: zt
+}), It = x(
+  "inline-flex items-center gap-1.5 rounded-full font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none cursor-pointer text-sm leading-none border border-border text-foreground bg-white hover:bg-neutral focus-visible:ring-foreground-light focus-visible:ring-offset-white",
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-3 text-xs",
+        md: "h-8 px-4 text-sm",
+        lg: "h-9 px-5 text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), dr = A.forwardRef(
+  function({ className: t, size: r = "md", disabled: s = !1, children: n, ...o }, i) {
+    return /* @__PURE__ */ a.jsxs(
+      "button",
+      {
+        ref: i,
+        type: "button",
+        className: f(It({ size: r }), t),
+        disabled: s,
+        "aria-disabled": s,
+        "aria-label": `${n}, removable`,
+        inert: s ? !0 : void 0,
+        ...o,
+        children: [
+          /* @__PURE__ */ a.jsx("span", { className: "flex-shrink-0", children: n }),
+          /* @__PURE__ */ a.jsx(N, { as: le, color: "inherit", size: r === "lg" ? "md" : "sm" })
+        ]
+      }
+    );
+  }
+), Mt = x("h-px w-full bg-border border-0", {
+  variants: {
+    hasMargin: {
+      true: "mb-4",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    hasMargin: !1
+  }
+}), ur = m(
+  ({ hasMargin: e = !1, className: t, ...r }, s) => /* @__PURE__ */ a.jsx(
+    "hr",
+    {
+      ref: s,
+      className: f(Mt({ hasMargin: e }), t),
+      ...r
+    }
+  )
+), At = x(
+  "flex flex-col items-center justify-center text-center border border-border rounded-lg bg-background",
+  {
+    variants: {
+      spacing: {
+        sm: "py-8 px-4",
+        md: "py-12 px-6",
+        lg: "py-16 px-8"
+      },
+      hasGrayBackground: {
+        true: "bg-neutral-soft",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      spacing: "md",
+      hasGrayBackground: !1
+    }
+  }
+), Lt = x(
+  "flex flex-row items-center gap-3 mb-2"
+), fr = A.forwardRef(
+  function({ icon: t, title: r, subtitle: s, action: n, className: o, hasGrayBackground: i, ...c }, d) {
+    return /* @__PURE__ */ a.jsxs(
+      "section",
+      {
+        ref: d,
+        className: f(At({ hasGrayBackground: i }), o),
+        role: "status",
+        "aria-label": "No results found",
+        ...c,
+        children: [
+          /* @__PURE__ */ a.jsxs("header", { className: Lt(), children: [
+            /* @__PURE__ */ a.jsx(N, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
+            /* @__PURE__ */ a.jsx(y, { as: "h2", fontSize: "lg", children: r })
+          ] }),
+          s && /* @__PURE__ */ a.jsx(y, { as: "p", align: "center", color: "gray", className: "mb-4", children: s }),
+          n && /* @__PURE__ */ a.jsx("div", { role: "group", "aria-label": "Available actions", children: n })
+        ]
+      }
+    );
+  }
+), Z = B(null), St = Z.Provider;
+function H() {
+  const e = O(Z);
+  if (!e)
+    throw new Error("Table compound components must be used within <Table>");
+  return e;
+}
+const T = (e) => {
+  if (e < 1 || e > 12)
+    throw new Error("Column span must be between 1 and 12");
+  switch (e) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "grid-cols-2";
+    case 3:
+      return "grid-cols-3";
+    case 4:
+      return "grid-cols-4";
+    case 5:
+      return "grid-cols-5";
+    case 6:
+      return "grid-cols-6";
+    case 7:
+      return "grid-cols-7";
+    case 8:
+      return "grid-cols-8";
+    case 9:
+      return "grid-cols-9";
+    case 10:
+      return "grid-cols-10";
+    case 11:
+      return "grid-cols-11";
+    case 12:
+      return "grid-cols-12";
+    default:
+      return "grid-cols-2";
+  }
+}, Wt = (e) => {
+  if (e < 1 || e > 12)
+    throw new Error("Column span must be between 1 and 12");
+  switch (e) {
+    case 1:
+      return "col-span-1";
+    case 2:
+      return "col-span-2";
+    case 3:
+      return "col-span-3";
+    case 4:
+      return "col-span-4";
+    case 5:
+      return "col-span-5";
+    case 6:
+      return "col-span-6";
+    case 7:
+      return "col-span-7";
+    case 8:
+      return "col-span-8";
+    case 9:
+      return "col-span-9";
+    case 10:
+      return "col-span-10";
+    case 11:
+      return "col-span-11";
+    case 12:
+      return "col-span-12";
+    default:
+      return "col-span-2";
+  }
+}, Bt = m(
+  ({ children: e, className: t, ...r }, s) => {
+    const { columns: n } = H();
+    return /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        role: "rowgroup",
+        className: f("bg-neutral-soft", t),
+        ...r,
+        ref: s,
+        children: /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            role: "row",
+            className: f("grid gap-4", T(n)),
+            children: e
+          }
+        )
+      }
+    );
+  }
+), Ot = m(
+  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a.jsx("div", { role: "rowgroup", ref: s, className: f(t), ...r, children: e })
+), Ht = m(
+  ({ children: e, className: t, ...r }, s) => {
+    const { columns: n } = H();
+    return /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        role: "rowgroup",
+        className: f("bg-neutral-soft", t),
+        ...r,
+        ref: s,
+        children: /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            role: "row",
+            className: f("grid gap-4", T(n)),
+            children: e
+          }
+        )
+      }
+    );
+  }
+), Tt = m(
+  ({ children: e, className: t, ...r }, s) => {
+    const { columns: n } = H();
+    return /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        role: "row",
+        className: f(
+          "grid gap-4",
+          T(n),
+          "border-b border-border last:border-0",
+          t
+        ),
+        ref: s,
+        ...r,
+        children: e
+      }
+    );
+  }
+), ee = m(
+  ({ as: e = "td", span: t, align: r = "left", children: s, className: n, ...o }, i) => {
+    const c = e === "th" ? "columnheader" : "cell";
+    let d = "text-left";
+    return r === "center" ? d = "text-center" : r === "right" && (d = "text-right"), /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        ref: i,
+        role: c,
+        className: f(
+          "px-4 py-2",
+          "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
+          Wt(t),
+          d,
+          "truncate overflow-hidden whitespace-nowrap",
+          n
+        ),
+        ...o,
+        children: s
+      }
+    );
+  }
+), qt = m(
+  (e, t) => /* @__PURE__ */ a.jsx(
+    ee,
+    {
+      ...e,
+      as: "td",
+      ref: t,
+      className: f(
+        "truncate overflow-hidden whitespace-nowrap",
+        e.className
+      )
+    }
+  )
+), Pt = m(
+  (e, t) => /* @__PURE__ */ a.jsx(
+    ee,
+    {
+      ...e,
+      as: "th",
+      ref: t,
+      className: f(
+        "truncate overflow-hidden whitespace-nowrap",
+        e.className
+      )
+    }
+  )
+), _t = m(
+  ({ children: e, className: t, columns: r = 12, ...s }, n) => /* @__PURE__ */ a.jsx(St, { value: { columns: r }, children: /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: n,
+      role: "table",
+      className: f(
+        // Versaur design system: border, background, shadow, rounded, spacing
+        "w-full overflow-x-auto border border-border bg-background rounded-lg ",
+        "text-foreground",
+        "sm:rounded-xl",
+        "transition-colors",
+        t
+      ),
+      ...s,
+      children: e
+    }
+  ) })
+), hr = Object.assign(_t, {
+  Header: Bt,
+  HeaderItem: Pt,
+  Body: Ot,
+  Footer: Ht,
+  Row: Tt,
+  RowItem: qt
+}), Ft = x(
+  // Base classes
+  "block transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        white: "bg-white border border-border",
+        neutral: "bg-neutral border border-gray-200",
+        primary: "bg-primary-soft border border-primary",
+        secondary: "bg-secondary-soft border border-secondary",
+        tertiary: "bg-tertiary-soft border border-tertiary",
+        ghost: "bg-transparent border border-ghost",
+        success: "bg-success-soft border border-success",
+        info: "bg-info-soft border border-info",
+        warning: "bg-warning-soft border border-warning",
+        danger: "bg-danger-soft border border-danger"
+      },
+      size: {
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8"
+      },
+      shape: {
+        rounded: "rounded-lg",
+        square: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      variant: "white",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+), mr = m(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...n }, o) => /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: o,
+      className: f(Ft({ variant: e, size: t, shape: r }), s),
+      ...n
+    }
+  )
+);
+function Ut({ src: e }) {
+  const [t, r] = V(!1), [s, n] = V(!1), o = W(!1), i = () => {
+    r(!0);
+  }, c = () => {
+    n(!0);
+  };
+  return I(() => {
+    if (!e) return;
+    const d = new Image();
+    return d.src = e, d.onload = () => {
+      o.current || r(!0);
+    }, d.onerror = () => {
+      o.current || n(!0);
+    }, () => {
+      o.current = !0;
+    };
+  }, [e]), {
+    loaded: t,
+    errored: s,
+    handleLoad: i,
+    handleError: c
+  };
+}
+const Rt = x("block object-cover", {
+  variants: {
+    position: {
+      cover: "object-cover",
+      contain: "object-contain",
+      center: "object-center",
+      top: "object-top",
+      bottom: "object-bottom",
+      left: "object-left",
+      right: "object-right",
+      none: ""
+    },
+    size: {
+      sm: "w-16 h-16",
+      md: "w-32 h-32",
+      lg: "w-48 h-48",
+      full: "w-full h-full",
+      auto: ""
+    },
+    shape: {
+      rectangle: "rounded",
+      square: "aspect-square rounded",
+      circle: "rounded-full aspect-square"
+    }
+  },
+  defaultVariants: {
+    position: "cover",
+    size: "auto",
+    shape: "rectangle"
+  }
+}), te = x(
+  "flex items-center justify-center bg-neutral-soft text-ghost border border-border",
+  {
+    variants: {
+      shape: {
+        rectangle: "rounded",
+        square: "aspect-square rounded",
+        circle: "rounded-full aspect-square"
+      },
+      size: {
+        sm: "w-16 h-16",
+        md: "w-32 h-32",
+        lg: "w-48 h-48",
+        full: "w-full h-full",
+        auto: "w-full h-full"
+      }
+    },
+    defaultVariants: {
+      shape: "rectangle",
+      size: "auto"
+    }
+  }
+);
+function Gt({
+  className: e,
+  shape: t,
+  size: r,
+  height: s,
+  width: n
+}) {
+  return /* @__PURE__ */ a.jsx(
+    ue,
+    {
+      className: f(te({ shape: t, size: r }), e),
+      style: { height: s, width: n }
+    }
+  );
+}
+function $t({
+  alt: e,
+  width: t,
+  height: r,
+  className: s,
+  style: n,
+  shape: o,
+  size: i
+}) {
+  return /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      className: te({ shape: o, size: i, className: s }),
+      style: { width: t, height: r, ...n },
+      "aria-label": e,
+      role: "img",
+      children: [
+        /* @__PURE__ */ a.jsx(
+          ce,
+          {
+            size: 32,
+            style: { opacity: 0.5, marginRight: 4 },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ a.jsx("span", { style: { opacity: 0.7 }, children: e })
+      ]
+    }
+  );
+}
+const q = m(
+  ({
+    src: e,
+    alt: t,
+    onLoad: r,
+    onError: s,
+    width: n,
+    height: o,
+    loading: i = "lazy",
+    position: c = "cover",
+    size: d = "auto",
+    shape: h,
+    className: g,
+    ...u
+  }, b) => {
+    const { loaded: w, errored: p, handleLoad: v, handleError: E } = Ut({
+      src: e
+    }), C = typeof n == "number" ? n : Number(n), L = typeof o == "number" ? o : Number(o);
+    return !w && !p ? /* @__PURE__ */ a.jsx(
+      Gt,
+      {
+        shape: h,
+        width: C,
+        height: L
+      }
+    ) : p ? /* @__PURE__ */ a.jsx(
+      $t,
+      {
+        shape: h,
+        alt: t,
+        width: C,
+        height: L
+      }
+    ) : /* @__PURE__ */ a.jsx(
+      "img",
+      {
+        ref: b,
+        src: e,
+        alt: t,
+        width: C,
+        height: L,
+        loading: i,
+        className: f(
+          Rt({
+            position: c,
+            size: d,
+            shape: h
+          }),
+          g
+        ),
+        onLoad: (k) => {
+          v(), r?.(k);
+        },
+        onError: (k) => {
+          E(), s?.(k);
+        },
+        ...u
+      }
+    );
+  }
+), gr = m((e, t) => /* @__PURE__ */ a.jsx(q, { ref: t, ...e, shape: "circle" })), xr = m((e, t) => /* @__PURE__ */ a.jsx(q, { ref: t, ...e, shape: "square" })), br = m((e, t) => /* @__PURE__ */ a.jsx(q, { ref: t, ...e, shape: "rectangle" }));
+export {
+  Qt as A,
+  sr as B,
+  cr as C,
+  dr as F,
+  X as H,
+  N as I,
+  M,
+  fr as N,
+  et as O,
+  hr as T,
+  Zt as a,
+  er as b,
+  tr as c,
+  Le as d,
+  rr as e,
+  nr as f,
+  ar as g,
+  K as h,
+  or as i,
+  ir as j,
+  lr as k,
+  kt as l,
+  ur as m,
+  y as n,
+  mr as o,
+  gr as p,
+  xr as q,
+  br as r,
+  q as s
+};