@dimasbaguspm/versaur 0.0.45 → 0.0.46

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

@@ -1,2884 +0,0 @@
-import { c as cva, j as jsxRuntimeExports, a as cn } from "./index-DOdDlCoL.js";
-import * as React from "react";
-import React__default, { createContext, useContext, forwardRef, useState, useEffect, useCallback, useRef, useId, cloneElement } from "react";
-import { ChevronDown, ChevronRight, CheckIcon, EllipsisVerticalIcon, X, XIcon, ImageOff } from "lucide-react";
-import ReactDOM from "react-dom";
-import { S as Skeleton } from "./skeleton-BNZyaRjo.js";
-const AccordionContext = createContext(
-  null
-), useAccordionContext = () => {
-  const e = useContext(AccordionContext);
-  if (!e)
-    throw new Error(
-      "Accordion compound components must be used within Accordion"
-    );
-  return e;
-}, accordionVariants = cva(
-  "border-b border-border bg-background overflow-hidden",
-  {
-    variants: {
-      disabled: {
-        true: "opacity-50 cursor-not-allowed",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: !1
-    }
-  }
-), accordionHeaderVariants = cva(
-  "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
-    }
-  }
-), accordionContentVariants = cva(
-  "overflow-hidden transition-all duration-300",
-  {
-    variants: {
-      isOpen: {
-        true: "max-h-screen opacity-100",
-        false: "max-h-0 opacity-0"
-      }
-    },
-    defaultVariants: {
-      isOpen: !1
-    }
-  }
-), accordionContentInnerVariants = cva("p-4 pt-0"), accordionIconVariants = cva("transition-transform duration-200", {
-  variants: {
-    isOpen: {
-      true: "rotate-180",
-      false: "rotate-0"
-    }
-  },
-  defaultVariants: {
-    isOpen: !1
-  }
-}), headingVariants = cva("", {
-  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-medium text-base 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
-  }
-}), Heading = forwardRef(
-  ({
-    level: e = 3,
-    color: t = "ghost",
-    hasUnderline: r = !1,
-    isCapitalize: i = !1,
-    hasMargin: s = !1,
-    align: n = "left",
-    italic: o = !1,
-    clamp: l = "none",
-    ellipsis: u = !1,
-    className: c,
-    children: f,
-    ...a
-  }, d) => {
-    const h = `h${e}`;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      h,
-      {
-        ref: d,
-        className: cn(
-          headingVariants({
-            color: t,
-            hasUnderline: r,
-            isCapitalize: i,
-            hasMargin: s,
-            align: n,
-            italic: o,
-            clamp: l,
-            ellipsis: u,
-            level: e
-          }),
-          c
-        ),
-        ...a,
-        children: f
-      }
-    );
-  }
-);
-Heading.displayName = "Heading";
-const iconVariants = cva("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"
-  }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...n }, o) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    t,
-    {
-      ref: o,
-      className: iconVariants({ color: r, size: i, className: s }),
-      ...n
-    }
-  );
-}), AccordionTitle = forwardRef(function({ className: t, children: r, ...i }, s) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Heading,
-    {
-      ref: s,
-      level: 4,
-      className: cn("font-medium", t),
-      ...i,
-      color: "black",
-      children: r
-    }
-  );
-}), AccordionContent = forwardRef(function({ className: t, children: r, ...i }, s) {
-  const { isOpen: n } = useAccordionContext();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      ref: s,
-      className: cn(accordionContentVariants({ isOpen: n }), t),
-      ...i,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: accordionContentInnerVariants(), children: r })
-    }
-  );
-}), AccordionIcon = forwardRef(function({ as: t, ...r }, i) {
-  const { isOpen: s } = useAccordionContext();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Icon,
-    {
-      ref: i,
-      as: t,
-      color: "ghost",
-      size: "sm",
-      className: accordionIconVariants({ isOpen: s }),
-      ...r
-    }
-  );
-}), AccordionRoot = forwardRef(
-  function({
-    title: t,
-    subtitle: r,
-    isDefaultOpen: i = !1,
-    disabled: s = !1,
-    hasMargin: n,
-    className: o,
-    children: l,
-    ...u
-  }, c) {
-    const [f, a] = useState(i), d = () => {
-      s || a((x) => !x);
-    }, h = {
-      isOpen: f,
-      toggle: d,
-      disabled: s
-    };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContext.Provider, { value: h, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        ref: c,
-        className: cn(
-          accordionVariants({ disabled: s }),
-          o,
-          n && "mb-4"
-        ),
-        ...u,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              role: "button",
-              className: accordionHeaderVariants({ disabled: s, isOpen: f }),
-              onClick: d,
-              "aria-disabled": s,
-              "aria-expanded": f,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 flex-grow", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: t }),
-                  r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIcon, { as: ChevronDown })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: cn(
-                "overflow-hidden transition-all duration-300",
-                f ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
-              ),
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 pt-2", children: l })
-            }
-          )
-        ]
-      }
-    ) });
-  }
-), Accordion = Object.assign(AccordionRoot, {
-  Title: AccordionTitle,
-  Content: AccordionContent,
-  Icon: AccordionIcon
-}), actionCardVariants = cva(
-  "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"
-    }
-  }
-), iconContainerVariants = cva(
-  "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"
-    }
-  }
-), arrowVariants = cva(
-  "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"
-    }
-  }
-), textVariants = cva("", {
-  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"
-  }
-}), Text = forwardRef(
-  ({
-    as: e = "span",
-    color: t = "ghost",
-    hasUnderline: r = !1,
-    isCapitalize: i = !1,
-    align: s = "left",
-    italic: n = !1,
-    clamp: o = "none",
-    ellipsis: l = !1,
-    fontSize: u,
-    fontWeight: c,
-    className: f,
-    children: a,
-    ...d
-  }, h) => {
-    const y = [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "p",
-      "span",
-      "label"
-    ].includes(e) ? e : "span", w = u ? `text-${u}` : "", j = c ? `font-${c}` : "";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      e,
-      {
-        ref: h,
-        className: cn(
-          textVariants({
-            color: t,
-            hasUnderline: r,
-            isCapitalize: i,
-            align: s,
-            italic: n,
-            clamp: o,
-            ellipsis: l,
-            // @ts-expect-error - `as` is not a valid variant
-            as: y
-          }),
-          w,
-          j,
-          f
-        ),
-        ...d,
-        children: a
-      }
-    );
-  }
-), ActionCardGroup = forwardRef(
-  ({ children: e, className: t }, r) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      ref: r,
-      className: cn(
-        "bg-background border border-border rounded-lg overflow-hidden",
-        "divide-y divide-border",
-        t
-      ),
-      role: "group",
-      children: e
-    }
-  )
-), ActionCardRoot = forwardRef(
-  ({
-    size: e = "md",
-    icon: t,
-    title: r,
-    subtitle: i,
-    badge: s,
-    showArrow: n = !0,
-    as: o = "button",
-    className: l,
-    ...u
-  }, c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    o,
-    {
-      ref: c,
-      className: cn(actionCardVariants({ size: e, as: o }), l),
-      ...u,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
-          t && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(iconContainerVariants({ size: e })), children: t }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Text,
-                {
-                  as: "span",
-                  fontSize: e === "sm" ? "sm" : "base",
-                  fontWeight: "semibold",
-                  color: "ghost",
-                  className: "text-left leading-normal",
-                  children: r
-                }
-              ),
-              s && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: "flex flex-wrap items-center flex-row justify-start gap-3",
-                  role: "group",
-                  children: s
-                }
-              )
-            ] }),
-            i && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Text,
-              {
-                as: "p",
-                fontSize: "sm",
-                color: "gray",
-                className: "text-left leading-normal",
-                children: i
-              }
-            )
-          ] })
-        ] }),
-        n && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Icon,
-          {
-            as: ChevronRight,
-            className: cn(arrowVariants({ size: e })),
-            color: "ghost",
-            "aria-hidden": "true"
-          }
-        ) })
-      ]
-    }
-  )
-), ActionCard = Object.assign(ActionCardRoot, {
-  Group: ActionCardGroup
-}), alertVariants = cva(
-  "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"
-    }
-  }
-), alertIconVariants = cva(
-  "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"
-    }
-  }
-), AlertIcon = forwardRef(
-  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: i, className: cn(alertIconVariants(), e), ...r, children: t })
-), AlertRoot = forwardRef(
-  ({
-    variant: e = "default",
-    color: t = "neutral",
-    icon: r,
-    className: i,
-    children: s,
-    ...n
-  }, o) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      ref: o,
-      role: "alert",
-      className: cn(alertVariants({ variant: e, color: t }), i),
-      ...n,
-      children: [
-        r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: s })
-      ]
-    }
-  )
-), Alert = Object.assign(AlertRoot, {
-  Icon: AlertIcon
-}), anchorVariants = cva(
-  [
-    "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
-    }
-  }
-), Anchor = forwardRef(
-  ({
-    children: e,
-    className: t,
-    color: r = "primary",
-    fontSize: i = "base",
-    fontWeight: s = "medium",
-    quiet: n = !1,
-    ...o
-  }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "a",
-    {
-      ref: l,
-      className: cn(
-        anchorVariants({ color: r, fontSize: i, fontWeight: s, quiet: n }),
-        t
-      ),
-      ...o,
-      children: e
-    }
-  )
-), Attribute = forwardRef(
-  function({ title: t, children: r, className: i, hasMargin: s, ...n }, o) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        ref: o,
-        className: cn("space-y-1", i, s && "mb-4"),
-        ...n,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Text,
-            {
-              as: "h4",
-              fontSize: "sm",
-              fontWeight: "normal",
-              color: "gray",
-              className: "leading-none",
-              children: t
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "base", fontWeight: "normal", children: r })
-        ]
-      }
-    );
-  }
-);
-function getColSpan(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 getGridCols(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 AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...n }, o) {
-  const l = getColSpan(i);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, className: cn(l, r), ...n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: s, children: t }) });
-}), AttributeListRoot = forwardRef(
-  function({ children: t, className: r, columns: i = 4, ...s }, n) {
-    const o = getGridCols(i);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "ul",
-      {
-        ref: n,
-        className: cn("grid gap-4", o, r),
-        ...s,
-        children: t
-      }
-    );
-  }
-), AttributeList = Object.assign(AttributeListRoot, {
-  Item: AttributeListItem
-}), avatarVariants = cva(
-  "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"
-    }
-  }
-), avatarImageVariants = cva(
-  "absolute inset-0 h-full w-full object-cover"
-), Avatar$1 = forwardRef(
-  ({
-    variant: e = "primary",
-    size: t = "md",
-    shape: r = "circle",
-    className: i,
-    children: s,
-    ...n
-  }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      ref: o,
-      className: cn(avatarVariants({ variant: e, size: t, shape: r }), i),
-      ...n,
-      children: s
-    }
-  )
-), AvatarImage = forwardRef(
-  ({ src: e, alt: t, className: r, onError: i, ...s }, n) => {
-    const [o, l] = useState(!1);
-    useEffect(() => {
-      l(!1);
-    }, [e]);
-    const u = useCallback(
-      (c) => {
-        l(!0), i?.(c);
-      },
-      [i]
-    );
-    return o ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "img",
-      {
-        ref: n,
-        src: e,
-        alt: t,
-        className: cn(avatarImageVariants(), r),
-        onError: u,
-        ...s
-      }
-    );
-  }
-), Avatar = Object.assign(Avatar$1, {
-  /**
-   * AvatarImage sub-component for displaying images with fallback behavior
-   */
-  Image: AvatarImage
-}), badgeVariants = cva(
-  "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
-    }
-  }
-), Badge = forwardRef(
-  ({
-    variant: e = "default",
-    shape: t = "square",
-    color: r = "primary",
-    size: i = "md",
-    iconLeft: s,
-    iconRight: n,
-    className: o,
-    children: l,
-    ...u
-  }, c) => {
-    const d = !(l != null && l !== "") && !!(s || n);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "span",
-      {
-        ref: c,
-        className: cn(
-          badgeVariants({
-            variant: e,
-            color: r,
-            shape: t,
-            size: i,
-            iconOnly: d
-          }),
-          o
-        ),
-        ...u,
-        children: d ? (
-          // Icon-only mode: display only the icon
-          s || n
-        ) : (
-          // Normal mode: display icon(s) and text
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            s,
-            l,
-            n
-          ] })
-        )
-      }
-    );
-  }
-), SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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" }))), SvgSpenicleRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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" }))), SvgSpenicleCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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" }))), SvgHubSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Square)"), /* @__PURE__ */ React.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 0, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), SvgHubRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Rounded)"), /* @__PURE__ */ React.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), SvgHubCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Circle)"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), SvgNotunicSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Notunic"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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__ */ React.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.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" }))), SvgNotunicRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Notunic"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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__ */ React.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.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" }))), SvgNotunicCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Notunic"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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__ */ React.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.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" }))), brandSizeClass = cva("", {
-  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"
-  }
-}), BrandLogo = forwardRef(
-  ({ shape: e = "square", size: t, name: r = "spenicle", ...i }, s) => {
-    const n = {
-      spenicle: {
-        square: SvgSpenicleSquare,
-        rounded: SvgSpenicleRounded,
-        circle: SvgSpenicleCircle
-      },
-      hub: {
-        square: SvgHubSquare,
-        rounded: SvgHubRounded,
-        circle: SvgHubCircle
-      },
-      notunic: {
-        square: SvgNotunicSquare,
-        rounded: SvgNotunicRounded,
-        circle: SvgNotunicCircle
-      }
-    }, l = (n[r] || n.spenicle)[e || "square"] || SvgSpenicleSquare;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      l,
-      {
-        ref: s,
-        ...i,
-        className: cn("inline-block", brandSizeClass({ size: t }))
-      }
-    );
-  }
-), Brand = forwardRef(
-  ({ name: e = "spenicle", size: t = "md", shape: r, ...i }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "span",
-    {
-      ref: s,
-      className: cn("inline-flex items-center gap-2"),
-      ...i,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { name: e, shape: r, size: t, "aria-hidden": "true" })
-    }
-  )
-), buttonVariants = cva(
-  "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: {
-        // Core variants using Versaur color system
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        accent_1: "bg-accent-1 text-white hover:bg-accent-1/90 focus-visible:ring-accent-1-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        accent_2: "bg-accent-2 text-white hover:bg-accent-2/90 focus-visible:ring-accent-2-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        accent_3: "bg-accent-3 text-white hover:bg-accent-3/90 focus-visible:ring-accent-3-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
-        // Outline variants
-        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
-        "accent_1-outline": "border border-accent-1 text-accent-1 bg-white hover:bg-accent-1 hover:text-white focus-visible:ring-accent-1-light focus-visible:ring-offset-white transition-all",
-        "accent_2-outline": "border border-accent-2 text-accent-2 bg-white hover:bg-accent-2 hover:text-white focus-visible:ring-accent-2-light focus-visible:ring-offset-white transition-all",
-        "accent_3-outline": "border border-accent-3 text-accent-3 bg-white hover:bg-accent-3 hover:text-white focus-visible:ring-accent-3-light focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
-        "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
-        // Ghost variants (subtle)
-        "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
-        "accent_1-ghost": "text-accent-1 bg-white hover:bg-accent-1/20 focus-visible:ring-accent-1 focus-visible:ring-offset-white",
-        "accent_2-ghost": "text-accent-2 bg-white hover:bg-accent-2/20 focus-visible:ring-accent-2 focus-visible:ring-offset-white",
-        "accent_3-ghost": "text-accent-3 bg-white hover:bg-accent-3/20 focus-visible:ring-accent-3 focus-visible:ring-offset-white",
-        // Semantic variants
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
-        // Utility variants
-        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: "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"
-    }
-  }
-), Button = React__default.forwardRef(
-  function({
-    className: t,
-    variant: r = "primary",
-    size: i = "md",
-    disabled: s = !1,
-    type: n = "button",
-    children: o,
-    ...l
-  }, u) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        ref: u,
-        type: n,
-        className: cn(buttonVariants({ variant: r, size: i }), t),
-        disabled: s,
-        "aria-disabled": s,
-        inert: s ? !0 : void 0,
-        ...l,
-        children: o
-      }
-    );
-  }
-), OverlayPortal = ({
-  container: e,
-  children: t
-}) => {
-  if (typeof window > "u" || typeof document > "u")
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: t });
-  const r = e ?? document.body;
-  return r ? ReactDOM.createPortal(t, r) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: t });
-}, menuVariants = cva(
-  "z-70 min-w-40 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 useMenuOutsideClick(e, t, r, i) {
-  useEffect(() => {
-    if (!e) return;
-    function s(n) {
-      !t.current?.contains(n.target) && !r.current?.contains(n.target) && i();
-    }
-    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
-  }, [e, i, t, r]);
-}
-function getScrollableAncestors(e) {
-  const t = [];
-  let r = e.parentElement;
-  for (; r && r !== document.documentElement; ) {
-    const i = getComputedStyle(r);
-    (i.overflow === "auto" || i.overflow === "scroll" || i.overflowY === "auto" || i.overflowY === "scroll" || i.overflowX === "auto" || i.overflowX === "scroll") && t.push(r), r = r.parentElement;
-  }
-  return t.push(document.documentElement), t;
-}
-function isTriggerVisible(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 i of t) {
-    if (i === document.documentElement) continue;
-    const s = i.getBoundingClientRect();
-    if (r.bottom < s.top || r.top > s.bottom || r.right < s.left || r.left > s.right)
-      return !1;
-  }
-  return !0;
-}
-function useMenuPosition(e, t, r, i = "bottom-start", s) {
-  const [n, o] = useState({ isReady: !1 }), l = useCallback(() => {
-    if (!e || !t.current) {
-      o({ isReady: !1 });
-      return;
-    }
-    if (!r.current) {
-      const v = setTimeout(() => {
-        o({ isReady: !1 });
-      }, 0);
-      return () => clearTimeout(v);
-    }
-    const u = t.current, c = r.current, f = getScrollableAncestors(u);
-    if (!isTriggerVisible(u, f)) {
-      o({ isReady: !1 });
-      return;
-    }
-    const a = u.getBoundingClientRect(), d = window.innerWidth, h = window.innerHeight;
-    let x = null;
-    s && ("getBoundingClientRect" in s ? x = s : "current" in s && (x = s.current));
-    const y = x || document.documentElement, w = y === document.documentElement ? { top: 0, bottom: h, left: 0, right: d } : y.getBoundingClientRect(), j = c.style.visibility, E = c.style.position, C = c.style.opacity;
-    c.style.visibility = "hidden", c.style.position = "absolute", c.style.opacity = "0";
-    const m = c.getBoundingClientRect();
-    c.style.visibility = j, c.style.position = E, c.style.opacity = C;
-    const k = w.bottom - a.bottom - 8, N = a.top - w.top - 8, I = w.right - a.left - 8, V = a.right - w.left - 8;
-    let p = i;
-    if (i === "auto") {
-      const b = [
-        {
-          name: "bottom-start",
-          fits: k >= m.height && I >= m.width,
-          spaceUsed: k,
-          priority: 1
-          // Prefer bottom-start as default
-        },
-        {
-          name: "bottom-end",
-          fits: k >= m.height && V >= m.width,
-          spaceUsed: k,
-          priority: 2
-        },
-        {
-          name: "top-start",
-          fits: N >= m.height && I >= m.width,
-          spaceUsed: N,
-          priority: 3
-        },
-        {
-          name: "top-end",
-          fits: N >= m.height && V >= m.width,
-          spaceUsed: N,
-          priority: 4
-        }
-      ].filter((R) => R.fits);
-      b.length > 0 ? p = b.sort(
-        (R, S) => R.priority - S.priority
-      )[0].name : k >= N ? p = I >= V ? "bottom-start" : "bottom-end" : p = I >= V ? "top-start" : "top-end";
-    }
-    const g = {};
-    if (s)
-      switch (g.position = "fixed", p) {
-        case "bottom-start":
-          g.top = a.bottom + 4, g.left = a.left;
-          break;
-        case "bottom-end":
-          g.top = a.bottom + 4, g.right = window.innerWidth - a.right;
-          break;
-        case "top-start":
-          g.bottom = window.innerHeight - a.top + 4, g.left = a.left;
-          break;
-        case "top-end":
-          g.bottom = window.innerHeight - a.top + 4, g.right = window.innerWidth - a.right;
-          break;
-      }
-    else
-      switch (g.position = "absolute", p) {
-        case "bottom-start":
-          g.top = a.height + 4, g.left = 0;
-          break;
-        case "bottom-end":
-          g.top = a.height + 4, g.right = 0;
-          break;
-        case "top-start":
-          g.bottom = a.height + 4, g.left = 0;
-          break;
-        case "top-end":
-          g.bottom = a.height + 4, g.right = 0;
-          break;
-      }
-    if (s) {
-      const v = {
-        top: p.startsWith("bottom") ? a.bottom + 4 : a.top - m.height - 4,
-        left: p.endsWith("start") ? a.left : a.right - m.width,
-        width: m.width,
-        height: m.height
-      };
-      if (v.left < w.left + 8) {
-        const b = w.left + 8 - v.left;
-        p.endsWith("start") ? g.left = (g.left || 0) + b : g.right = (g.right || 0) - b;
-      } else if (v.left + v.width > w.right - 8) {
-        const b = v.left + v.width - (w.right - 8);
-        p.endsWith("start") ? g.left = (g.left || 0) - b : g.right = (g.right || 0) + b;
-      }
-      if (p.startsWith("bottom")) {
-        const b = Math.max(
-          50,
-          w.bottom - a.bottom - 16
-        );
-        m.height > b && (g.maxHeight = b);
-      } else {
-        const b = Math.max(
-          50,
-          a.top - w.top - 16
-        );
-        m.height > b && (g.maxHeight = b);
-      }
-    } else {
-      const v = {
-        top: p.startsWith("bottom") ? a.height + 4 : -m.height - 4,
-        left: p.endsWith("start") ? 0 : -m.width,
-        width: m.width,
-        height: m.height
-      }, b = {
-        left: a.left,
-        right: a.right,
-        top: a.top,
-        bottom: a.bottom
-      };
-      if (b.left + v.left < 8) {
-        const R = 8 - (b.left + v.left);
-        p.endsWith("start") ? g.left = (g.left || 0) + R : g.right = (g.right || 0) - R;
-      } else if (b.left + v.left + v.width > d - 8) {
-        const R = b.left + v.left + v.width - (d - 8);
-        p.endsWith("start") ? g.left = (g.left || 0) - R : g.right = (g.right || 0) + R;
-      }
-    }
-    g.isReady = !0, o(g);
-  }, [e, i, t, r, s]);
-  return useEffect(() => {
-    l();
-  }, [l]), useEffect(() => {
-    if (!e || !t.current) return;
-    const u = t.current, c = getScrollableAncestors(u);
-    let f = !1;
-    const a = () => {
-      f || (requestAnimationFrame(() => {
-        l(), f = !1;
-      }), f = !0);
-    };
-    return c.forEach((d) => {
-      d === document.documentElement ? (window.addEventListener("scroll", a, { passive: !0 }), window.addEventListener("resize", a, { passive: !0 })) : d.addEventListener("scroll", a, { passive: !0 });
-    }), () => {
-      c.forEach((d) => {
-        d === document.documentElement ? (window.removeEventListener("scroll", a), window.removeEventListener("resize", a)) : d.removeEventListener("scroll", a);
-      });
-    };
-  }, [e, l, t]), n;
-}
-const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider, useMenuProvider = () => {
-  const e = useContext(MenuContext);
-  if (!e)
-    throw new Error("useMenuProvider must be used within a MenuProvider");
-  return e;
-}, MenuContent = forwardRef(
-  ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "flex flex-col gap-1", children: e })
-), MenuItem = forwardRef(
-  ({ children: e, disabled: t, onClick: r, active: i, ...s }, n) => {
-    const { preserve: o, onClose: l } = useMenuProvider(), u = (c) => {
-      r?.(c), o || l();
-    };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: n, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Button,
-      {
-        variant: "ghost",
-        className: cn("justify-start w-full gap-2"),
-        disabled: t,
-        onClick: u,
-        children: [
-          e,
-          i && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Icon,
-            {
-              as: CheckIcon,
-              color: "inherit",
-              className: "ml-auto",
-              size: "sm"
-            }
-          )
-        ]
-      }
-    ) });
-  }
-), MenuRoot = ({
-  isOpen: e,
-  onOutsideClick: t,
-  size: r = "md",
-  content: i,
-  children: s,
-  placement: n = "auto",
-  container: o,
-  preserve: l
-}) => {
-  const u = useRef(null), c = useRef(null), f = useId();
-  useMenuOutsideClick(e, c, u, t);
-  const a = useMenuPosition(
-    e,
-    u,
-    c,
-    n,
-    o || null
-  ), d = {
-    ...a,
-    position: a.position || "absolute",
-    overflowY: a.maxHeight ? "auto" : void 0,
-    overflowX: a.maxWidth ? "auto" : void 0
-  }, h = e && a.isReady, x = /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      id: f,
-      ref: c,
-      className: cn(menuVariants({ size: r, open: h })),
-      style: d,
-      role: "menu",
-      "aria-hidden": !h,
-      children: i
-    }
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    MenuProvider,
-    {
-      value: { onClose: t, preserve: !!l },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
-        cloneElement(s, {
-          // @ts-expect-error: ref is valid for button or forwardRef components
-          ref: u,
-          "aria-haspopup": "menu",
-          "aria-expanded": e,
-          "aria-controls": f
-        }),
-        e && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          !a.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              ref: c,
-              className: cn(menuVariants({ size: r, open: !1 })),
-              style: {
-                position: "absolute",
-                visibility: "hidden",
-                opacity: 0,
-                pointerEvents: "none"
-              },
-              role: "menu",
-              "aria-hidden": !0,
-              children: i
-            }
-          ),
-          a.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: a.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: x }) : x })
-        ] })
-      ] })
-    }
-  );
-}, Menu = Object.assign(MenuRoot, {
-  Content: MenuContent,
-  Item: MenuItem
-}), ButtonMenuRoot = forwardRef(
-  (e, t) => {
-    const {
-      children: r,
-      onOpenChange: i,
-      onClick: s,
-      placement: n,
-      container: o,
-      preserve: l,
-      label: u,
-      ...c
-    } = e ?? {}, [f, a] = useState(!1);
-    useEffect(() => {
-      i?.(f);
-    }, [f, i]);
-    const d = () => {
-      a(!1);
-    }, h = (x) => {
-      a((y) => !y), s?.(x);
-    };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Menu,
-      {
-        isOpen: f,
-        onOutsideClick: d,
-        placement: n,
-        container: o,
-        preserve: l,
-        content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: r }),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ref: t, onClick: h, ...c, children: u })
-      }
-    );
-  }
-), ButtonMenu = Object.assign(ButtonMenuRoot, {
-  Item: Menu.Item
-});
-function getIconColorFromVariant(e = "primary") {
-  const t = e.split("-");
-  if (t.length === 1)
-    switch (t[0]) {
-      case "ghost":
-      case "neutral":
-      case "outline":
-        return "ghost";
-      default:
-        return "white";
-    }
-  if (t?.[1] === "outline") return "inherit";
-  switch (t[0]) {
-    case "primary":
-      return "primary";
-    case "secondary":
-      return "secondary";
-    case "tertiary":
-      return "tertiary";
-    case "ghost":
-      return "ghost";
-    case "neutral":
-      return "ghost";
-    case "success":
-      return "success";
-    case "info":
-      return "info";
-    case "warning":
-      return "warning";
-    case "danger":
-      return "danger";
-    default:
-      return "neutral";
-  }
-}
-const buttonIconVariants = cva(
-  "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: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
-        "primary-outline": "border border-border text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-border text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-border text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-border text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
-        "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
-        "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "success-outline": "border border-border text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "info-outline": "border border-border text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "warning-outline": "border border-border text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "danger-outline": "border border-border text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
-        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: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
-      },
-      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"
-      },
-      shape: {
-        rounded: "rounded-md",
-        square: "rounded-sm",
-        circle: "rounded-full"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md",
-      shape: "rounded"
-    }
-  }
-), ButtonIcon = React__default.forwardRef(
-  function({
-    className: t,
-    variant: r = "primary",
-    size: i = "md",
-    shape: s = "rounded",
-    disabled: n = !1,
-    as: o,
-    "aria-label": l,
-    ...u
-  }, c) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        ref: c,
-        type: "button",
-        className: cn(
-          buttonIconVariants({
-            variant: r,
-            size: i,
-            shape: s
-          }),
-          t
-        ),
-        disabled: n,
-        "aria-disabled": n,
-        "aria-label": l,
-        inert: n ? !0 : void 0,
-        ...u,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Icon,
-          {
-            as: o,
-            size: "sm",
-            color: getIconColorFromVariant(r)
-          }
-        )
-      }
-    );
-  }
-), ButtonMenuIconRoot = forwardRef(
-  (e, t) => {
-    const {
-      as: r = EllipsisVerticalIcon,
-      children: i,
-      onOpenChange: s,
-      onClick: n,
-      placement: o,
-      container: l,
-      preserve: u,
-      ...c
-    } = e ?? {}, [f, a] = useState(!1);
-    useEffect(() => {
-      s?.(f);
-    }, [f, s]);
-    const d = () => {
-      a(!1);
-    }, h = (x) => {
-      a((y) => !y), n?.(x);
-    };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Menu,
-      {
-        isOpen: f,
-        onOutsideClick: d,
-        placement: o,
-        container: l,
-        preserve: u,
-        content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: i }),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: h, ...c })
-      }
-    );
-  }
-), ButtonMenuIcon = Object.assign(ButtonMenuIconRoot, {
-  Item: Menu.Item
-}), buttonFloatVariants = cva(
-  [
-    "inline-flex items-center justify-center gap-2",
-    "rounded-lg",
-    "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",
-    "shadow-lg",
-    "transition-transform",
-    "transition-shadow",
-    "will-change-transform,opacity,box-shadow",
-    "hover:scale-105",
-    "active:scale-95",
-    "focus-visible:shadow-xl",
-    "hover:shadow-xl",
-    "active:shadow-md"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
-        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
-        "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
-        "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
-        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: "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-12 w-12 min-w-12 min-h-12 text-base",
-        md: "h-14 w-14 min-w-14 min-h-14 text-lg",
-        lg: "h-16 w-16 min-w-16 min-h-16 text-xl"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [i, s] = useState({}), [n, o] = useState("fixed bottom-4 right-4"), l = useCallback(() => {
-    const c = r.current;
-    if (!c) return;
-    const a = c.getBoundingClientRect().height > window.innerHeight;
-    let d = {}, h = "";
-    a ? (d = {
-      position: "fixed",
-      bottom: t,
-      zIndex: 50,
-      transform: `translateY(${c.scrollTop}px)`
-    }, h = `fixed bottom-4 ${e}-4`) : (d = {
-      position: "fixed",
-      bottom: t,
-      zIndex: 50
-    }, h = `fixed bottom-4 ${e}-4`), s(d), o(h);
-  }, [e, t]);
-  return useEffect(() => {
-    l();
-    const c = r.current;
-    return c && c.addEventListener("scroll", l), window.addEventListener("resize", l), () => {
-      c && c.removeEventListener("scroll", l), window.removeEventListener("resize", l);
-    };
-  }, [l]), useEffect(() => {
-    r.current && l();
-  }, [e, t, l]), [useCallback(
-    (c) => {
-      r.current = c, c && l();
-    },
-    [l]
-  ), i, n];
-}
-const ButtonFloat = forwardRef(
-  function({
-    className: t,
-    variant: r = "primary",
-    size: i = "md",
-    side: s = "right",
-    offset: n = "1rem",
-    ...o
-  }, l) {
-    const [u, c, f] = useFloatingPosition(
-      s,
-      n
-    ), [a, d] = useState(!1);
-    return useEffect(() => {
-      d(!0);
-    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        ref: l,
-        type: o.type || "button",
-        className: cn(
-          buttonFloatVariants({ variant: r, size: i }),
-          f,
-          a && "animate-fab-in",
-          t
-        ),
-        style: c,
-        ...o
-      }
-    ) });
-  }
-), calculatorRootVariants = cva(
-  "flex flex-col w-full max-w-xs rounded-lg bg-background",
-  {
-    variants: {
-      disabled: {
-        true: "opacity-60 pointer-events-none",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: !1
-    }
-  }
-), calculatorButtonVariants = cva(
-  "flex-1 min-w-0 h-12 m-0.5 rounded text-lg font-medium transition-colors select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-neutral text-foreground hover:bg-neutral-soft hover:text-neutral",
-        action: "bg-primary text-white hover:bg-primary-soft hover:text-primary",
-        operator: "bg-secondary text-white hover:bg-secondary-soft hover:text-secondary",
-        danger: "bg-danger text-white hover:bg-danger-soft hover:text-danger"
-      },
-      disabled: {
-        true: "opacity-50 pointer-events-none",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      disabled: !1
-    }
-  }
-), CalculatorButton = forwardRef(({ variant: e = "default", className: t, ...r }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "button",
-  {
-    ref: i,
-    type: "button",
-    className: cn(
-      calculatorButtonVariants({ variant: e, disabled: r.disabled }),
-      t
-    ),
-    ...r
-  }
-));
-function useCalculator({
-  initialValue = "",
-  disabled,
-  onChange
-}) {
-  const [input, setInput] = useState(String(initialValue)), inputRef = useRef(null);
-  useEffect(() => {
-    setInput(String(initialValue));
-  }, [initialValue]);
-  const evaluate = useCallback((expr) => {
-    try {
-      if (!/^[-+*/.\d\s]+$/.test(expr)) return "";
-      const result = eval(expr);
-      return result?.toString() ?? "";
-    } catch {
-      return "";
-    }
-  }, []), handleButton = useCallback(
-    (e) => {
-      if (!disabled)
-        if (e === "C")
-          setInput("");
-        else if (e === "⌫")
-          setInput((t) => t.slice(0, -1));
-        else if (e === "=") {
-          const t = evaluate(input);
-          setInput(t);
-        } else
-          setInput((t) => t + e);
-    },
-    [disabled, input, evaluate]
-  );
-  useEffect(() => {
-    if (onChange) {
-      const e = evaluate(input);
-      onChange(e);
-    }
-  }, [evaluate, input, onChange]), useEffect(() => {
-    if (disabled) return;
-    const e = (t) => {
-      if (document.activeElement !== inputRef.current && document.activeElement?.tagName !== "BODY")
-        return;
-      const r = t.key;
-      r === "Enter" || r === "=" ? (handleButton("="), t.preventDefault()) : r === "Backspace" ? (handleButton("⌫"), t.preventDefault()) : r === "Escape" || r === "C" || r === "c" ? (handleButton("C"), t.preventDefault()) : (/^[0-9]$/.test(r) || ["/", "*", "-", "+", "."].includes(r)) && (handleButton(r), t.preventDefault());
-    };
-    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [handleButton, disabled]), useEffect(() => {
-    disabled || inputRef.current?.focus();
-  }, [disabled]);
-  const handleInput = (e) => {
-    const t = e.target.value.replace(/[^\d+\-*/.]/g, "");
-    setInput(t);
-  };
-  return {
-    input,
-    inputRef,
-    handleButton,
-    handleInput
-  };
-}
-const BUTTONS = [
-  ["7", "8", "9", "/"],
-  ["4", "5", "6", "*"],
-  ["1", "2", "3", "-"],
-  ["0", ".", "=", "+"]
-], Calculator = forwardRef(
-  ({
-    initialValue: e = "",
-    onChange: t,
-    disabled: r,
-    className: i,
-    "aria-label": s
-  }, n) => {
-    const { input: o, inputRef: l, handleButton: u, handleInput: c } = useCalculator({
-      initialValue: e,
-      disabled: r,
-      onChange: t
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        ref: n,
-        className: cn(calculatorRootVariants({ disabled: r }), i),
-        "aria-label": s || "Calculator",
-        role: "region",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "input",
-            {
-              ref: l,
-              className: "w-full mb-3 px-3 py-2 rounded border border-[var(--color-neutral)] bg-[var(--color-neutral-soft)] text-right text-xl font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
-              value: o,
-              onChange: c,
-              disabled: r,
-              inputMode: "decimal",
-              "aria-label": "Calculator input"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((f, a) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: f.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ButtonIcon,
-            {
-              as: X,
-              variant: "danger-ghost",
-              "aria-label": "Backspace",
-              size: "md",
-              onClick: () => u("⌫"),
-              disabled: r
-            },
-            "backspace"
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CalculatorButton,
-            {
-              variant: d === "=" ? "action" : d === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(d) ? "operator" : "default",
-              onClick: () => u(d),
-              disabled: r,
-              "aria-label": d,
-              children: d
-            },
-            d
-          )) }, a)) })
-        ]
-      }
-    );
-  }
-);
-Calculator.displayName = "Calculator";
-const cardVariants = cva(
-  "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"
-    }
-  }
-), CardList = forwardRef(
-  ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "ul",
-    {
-      ref: t,
-      className: "flex flex-wrap items-center min-w-0 overflow-hidden w-full gap-x-0",
-      children: e
-    }
-  )
-), CardListItem = forwardRef(
-  ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "gray", ellipsis: !0, clamp: 1, children: e })
-    }
-  )
-), CardRoot = forwardRef(
-  ({
-    size: e = "md",
-    shape: t = "rounded",
-    avatar: r,
-    title: i,
-    subtitle: s,
-    badge: n,
-    supplementaryInfo: o,
-    bordered: l = !1,
-    as: u = "button",
-    className: c,
-    ...f
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    u,
-    {
-      ref: a,
-      className: cn(
-        cardVariants({ size: e, shape: t, bordered: l, as: u }),
-        c,
-        "@container/card"
-      ),
-      ...f,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 @sm/card:gap-4 w-full", children: [
-        r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full min-w-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Text,
-              {
-                as: "h3",
-                fontSize: "base",
-                fontWeight: "semibold",
-                className: "break-words leading-tight",
-                children: i
-              }
-            ),
-            s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: typeof s == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: s }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 overflow-hidden", children: s }) })
-          ] }) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 @sm/card:flex-row @sm/card:justify-between @sm/card:items-center", children: [
-            n && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "order-1 @sm/card:order-none overflow-hidden", children: n }),
-            o && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 order-2 @sm/card:order-none @sm/card:ml-auto", children: typeof o == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Text,
-              {
-                as: "p",
-                fontSize: "sm",
-                color: "gray",
-                className: "truncate",
-                align: "right",
-                children: o
-              }
-            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-hidden", children: o }) })
-          ] })
-        ] })
-      ] })
-    }
-  )
-), Card = Object.assign(CardRoot, {
-  List: CardList,
-  ListItem: CardListItem
-}), filterChipVariants = cva(
-  "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",
-  {
-    variants: {
-      variant: {
-        // Core variants using Versaur color system
-        primary: "bg-primary-light text-primary hover:bg-primary-soft focus-visible:ring-primary-light focus-visible:ring-offset-white",
-        secondary: "bg-secondary-light text-secondary hover:bg-secondary-soft focus-visible:ring-secondary-light focus-visible:ring-offset-white",
-        tertiary: "bg-tertiary-light text-tertiary hover:bg-tertiary-soft focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white",
-        // Outline variants
-        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary-soft focus-visible:ring-primary-light focus-visible:ring-offset-white",
-        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary-soft focus-visible:ring-secondary-light focus-visible:ring-offset-white",
-        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary-soft focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
-        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
-        "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral focus-visible:ring-foreground-light focus-visible:ring-offset-white",
-        // Semantic variants
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white",
-        "success-outline": "border border-success text-success bg-white hover:bg-success-soft focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white",
-        "info-outline": "border border-info text-info bg-white hover:bg-info-soft focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning-soft focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white",
-        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger-soft focus-visible:ring-danger-light focus-visible:ring-offset-white"
-      },
-      size: {
-        sm: "h-7 px-3 text-xs",
-        md: "h-8 px-4 text-sm",
-        lg: "h-9 px-5 text-sm"
-      }
-    },
-    defaultVariants: {
-      variant: "neutral-outline",
-      size: "md"
-    }
-  }
-), FilterChip = React__default.forwardRef(
-  function e({
-    className: t,
-    variant: r = "neutral-outline",
-    size: i = "md",
-    disabled: s = !1,
-    children: n,
-    ...o
-  }, l) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        ref: l,
-        type: "button",
-        className: cn(filterChipVariants({ variant: r, size: i }), t),
-        disabled: s,
-        "aria-disabled": s,
-        "aria-label": `${n}, removable`,
-        inert: s ? !0 : void 0,
-        ...o,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: n }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: i === "lg" ? "md" : "sm" })
-        ]
-      }
-    );
-  }
-), hrVariants = cva("h-px w-full bg-border border-0", {
-  variants: {
-    hasMargin: {
-      true: "mb-4",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    hasMargin: !1
-  }
-}), Hr = forwardRef(
-  ({ hasMargin: e = !1, className: t, ...r }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "hr",
-    {
-      ref: i,
-      className: cn(hrVariants({ hasMargin: e }), t),
-      ...r
-    }
-  )
-), noResultsVariants = cva(
-  "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
-    }
-  }
-), noResultsHeaderVariants = cva(
-  "flex flex-row items-center gap-3 mb-2"
-), NoResults = React__default.forwardRef(
-  function e({ icon: t, title: r, subtitle: i, action: s, className: n, hasGrayBackground: o, ...l }, u) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "section",
-      {
-        ref: u,
-        className: cn(noResultsVariants({ hasGrayBackground: o }), n),
-        role: "status",
-        "aria-label": "No results found",
-        ...l,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: noResultsHeaderVariants(), children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h2", fontSize: "lg", children: r })
-          ] }),
-          i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", align: "center", color: "gray", className: "mb-4", children: i }),
-          s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "group", "aria-label": "Available actions", children: s })
-        ]
-      }
-    );
-  }
-), TableContext = createContext(null), TableProvider = TableContext.Provider;
-function useTableContext() {
-  const e = useContext(TableContext);
-  if (!e)
-    throw new Error("Table compound components must be used within <Table>");
-  return e;
-}
-const getTableColumnClass = (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";
-  }
-}, getRowSpanClass = (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";
-  }
-}, TableHeader = forwardRef(
-  ({ children: e, className: t, ...r }, i) => {
-    const { columns: s } = useTableContext();
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        role: "rowgroup",
-        className: cn("bg-neutral-soft", t),
-        ...r,
-        ref: i,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            role: "row",
-            className: cn("grid gap-4", getTableColumnClass(s)),
-            children: e
-          }
-        )
-      }
-    );
-  }
-), TableBody = forwardRef(
-  ({ children: e, className: t, ...r }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "rowgroup", ref: i, className: cn(t), ...r, children: e })
-), TableFooter = forwardRef(
-  ({ children: e, className: t, ...r }, i) => {
-    const { columns: s } = useTableContext();
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        role: "rowgroup",
-        className: cn("bg-neutral-soft", t),
-        ...r,
-        ref: i,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            role: "row",
-            className: cn("grid gap-4", getTableColumnClass(s)),
-            children: e
-          }
-        )
-      }
-    );
-  }
-), TableRow = forwardRef(
-  ({ children: e, className: t, ...r }, i) => {
-    const { columns: s } = useTableContext();
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        role: "row",
-        className: cn(
-          "grid gap-4",
-          getTableColumnClass(s),
-          "border-b border-border last:border-0",
-          t
-        ),
-        ref: i,
-        ...r,
-        children: e
-      }
-    );
-  }
-), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...n }, o) => {
-    const l = e === "th" ? "columnheader" : "cell";
-    let u = "text-left";
-    return r === "center" ? u = "text-center" : r === "right" && (u = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        ref: o,
-        role: l,
-        className: cn(
-          "px-4 py-2",
-          "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
-          getRowSpanClass(t),
-          u,
-          "truncate overflow-hidden whitespace-nowrap",
-          s
-        ),
-        ...n,
-        children: i
-      }
-    );
-  }
-), TableRowItem = forwardRef(
-  (e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TableColumn,
-    {
-      ...e,
-      as: "td",
-      ref: t,
-      className: cn(
-        "truncate overflow-hidden whitespace-nowrap",
-        e.className
-      )
-    }
-  )
-), TableHeaderItem = forwardRef(
-  (e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TableColumn,
-    {
-      ...e,
-      as: "th",
-      ref: t,
-      className: cn(
-        "truncate overflow-hidden whitespace-nowrap",
-        e.className
-      )
-    }
-  )
-), TableRoot = forwardRef(
-  ({ children: e, className: t, columns: r = 12, ...i }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: { columns: r }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      ref: s,
-      role: "table",
-      className: cn(
-        // 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
-      ),
-      ...i,
-      children: e
-    }
-  ) })
-), Table = Object.assign(TableRoot, {
-  Header: TableHeader,
-  HeaderItem: TableHeaderItem,
-  Body: TableBody,
-  Footer: TableFooter,
-  Row: TableRow,
-  RowItem: TableRowItem
-}), tileVariants = cva(
-  // 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"
-    }
-  }
-), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: i, ...s }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      ref: n,
-      className: cn(tileVariants({ variant: e, size: t, shape: r }), i),
-      ...s
-    }
-  )
-);
-function useImage({ src: e }) {
-  const [t, r] = useState(!1), [i, s] = useState(!1), n = useRef(!1), o = () => {
-    r(!0);
-  }, l = () => {
-    s(!0);
-  };
-  return useEffect(() => {
-    if (!e) return;
-    const u = new Image();
-    return u.src = e, u.onload = () => {
-      n.current || r(!0);
-    }, u.onerror = () => {
-      n.current || s(!0);
-    }, () => {
-      n.current = !0;
-    };
-  }, [e]), {
-    loaded: t,
-    errored: i,
-    handleLoad: o,
-    handleError: l
-  };
-}
-const imageVariants = cva("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"
-  }
-}), imageAtomVariants = cva(
-  "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 BaseImageSkeleton({
-  className: e,
-  shape: t,
-  size: r,
-  height: i,
-  width: s
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Skeleton,
-    {
-      className: cn(imageAtomVariants({ shape: t, size: r }), e),
-      style: { height: i, width: s }
-    }
-  );
-}
-function BaseImageFallback({
-  alt: e,
-  width: t,
-  height: r,
-  className: i,
-  style: s,
-  shape: n,
-  size: o
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: imageAtomVariants({ shape: n, size: o, className: i }),
-      style: { width: t, height: r, ...s },
-      "aria-label": e,
-      role: "img",
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ImageOff,
-          {
-            size: 32,
-            style: { opacity: 0.5, marginRight: 4 },
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { opacity: 0.7 }, children: e })
-      ]
-    }
-  );
-}
-const BaseImage = forwardRef(
-  ({
-    src: e,
-    alt: t,
-    onLoad: r,
-    onError: i,
-    width: s,
-    height: n,
-    loading: o = "lazy",
-    position: l = "cover",
-    size: u = "auto",
-    shape: c,
-    className: f,
-    ...a
-  }, d) => {
-    const { loaded: h, errored: x, handleLoad: y, handleError: w } = useImage({
-      src: e
-    }), j = typeof s == "number" ? s : Number(s), E = typeof n == "number" ? n : Number(n);
-    return !h && !x ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      BaseImageSkeleton,
-      {
-        shape: c,
-        width: j,
-        height: E
-      }
-    ) : x ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      BaseImageFallback,
-      {
-        shape: c,
-        alt: t,
-        width: j,
-        height: E
-      }
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "img",
-      {
-        ref: d,
-        src: e,
-        alt: t,
-        width: j,
-        height: E,
-        loading: o,
-        className: cn(
-          imageVariants({
-            position: l,
-            size: u,
-            shape: c
-          }),
-          f
-        ),
-        onLoad: (C) => {
-          y(), r?.(C);
-        },
-        onError: (C) => {
-          w(), i?.(C);
-        },
-        ...a
-      }
-    );
-  }
-), ImageCircle = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "circle" })), ImageSquare = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "square" })), ImageRectangle = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "rectangle" }));
-export {
-  Accordion as A,
-  Badge as B,
-  Calculator as C,
-  FilterChip as F,
-  Heading as H,
-  Icon as I,
-  Menu as M,
-  NoResults as N,
-  OverlayPortal as O,
-  Table as T,
-  ActionCard as a,
-  Alert as b,
-  Anchor as c,
-  Attribute as d,
-  AttributeList as e,
-  Avatar as f,
-  Brand as g,
-  Button as h,
-  ButtonMenu as i,
-  ButtonMenuIcon as j,
-  ButtonFloat as k,
-  ButtonIcon as l,
-  Card as m,
-  Hr as n,
-  Text as o,
-  Tile as p,
-  ImageCircle as q,
-  ImageSquare as r,
-  ImageRectangle as s,
-  BaseImage as t
-};