@dimasbaguspm/versaur 0.0.17 → 0.0.19

package/dist/js/{tile-B9bt2AY6.js → image-rectangle-CLU-GVtw.js}

@@ -1,146 +1,9 @@
-import { a as cva, j as jsxRuntimeExports, c as cn } from "./index-C1uJQB34.js";
+import { c as cva, j as jsxRuntimeExports, a as cn } from "./index-DOdDlCoL.js";
 import * as React from "react";
-import React__default, { forwardRef, useState, useRef, useEffect, useCallback, createContext, useContext, useMemo } from "react";
-import { X, ChevronLeft, ChevronRight } from "lucide-react";
-const 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 }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "button",
-  {
-    ref: s,
-    type: "button",
-    className: cn(
-      calculatorButtonVariants({ variant: e, disabled: r.disabled }),
-      t
-    ),
-    ...r
-  }
-));
-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 "neutral";
-    }
-  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",
-  {
-    variants: {
-      variant: {
-        // Core variants using Versaur color system
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft 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-soft 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-soft 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-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-soft focus-visible:ring-offset-white transition-all",
-        // Ghost variants (subtle)
-        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral-light 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-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger-light 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: {
-        xs: "h-6 w-6",
-        sm: "h-8 w-8",
-        md: "h-10 w-10",
-        lg: "h-12 w-12",
-        xl: "h-14 w-14"
-      },
-      shape: {
-        rounded: "rounded-md",
-        square: "rounded-sm",
-        circle: "rounded-full"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md",
-      shape: "rounded"
-    }
-  }
-), iconVariants = cva("inline-flex items-center justify-center", {
+import React__default, { forwardRef, useState, useEffect, useCallback, useRef, createContext, useContext, useMemo } from "react";
+import { X, ChevronLeft, ChevronRight, ImageOff } from "lucide-react";
+import { S as Skeleton } from "./skeleton-BNZyaRjo.js";
+const iconVariants = cva("inline-flex items-center justify-center", {
   variants: {
     size: {
       xs: "w-3 h-3",
@@ -166,257 +29,16 @@ const buttonIconVariants = cva(
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: o, ...n }, a) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: n, ...o }, i) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
-      ref: a,
-      className: iconVariants({ color: r, size: s, className: o }),
-      ...n
-    }
-  );
-}), ButtonIcon = React__default.forwardRef(
-  function({
-    className: t,
-    variant: r = "primary",
-    size: s = "md",
-    shape: o = "rounded",
-    disabled: n = !1,
-    as: a,
-    "aria-label": i,
-    ...u
-  }, c) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        ref: c,
-        type: "button",
-        className: cn(
-          buttonIconVariants({
-            variant: r,
-            size: s,
-            shape: o
-          }),
-          t
-        ),
-        disabled: n,
-        "aria-disabled": n,
-        "aria-label": i,
-        inert: n ? !0 : void 0,
-        ...u,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Icon,
-          {
-            as: a,
-            size: s,
-            color: getIconColorFromVariant(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 "";
+      ref: i,
+      className: iconVariants({ color: r, size: s, className: n }),
+      ...o
     }
-  }, []), 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: s,
-    "aria-label": o
-  }, n) => {
-    const { input: a, inputRef: i, handleButton: u, handleInput: c } = useCalculator({
-      initialValue: e,
-      disabled: r,
-      onChange: t
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        ref: n,
-        className: cn(calculatorRootVariants({ disabled: r }), s),
-        "aria-label": o || "Calculator",
-        role: "region",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "input",
-            {
-              ref: i,
-              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: a,
-              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((x, b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: x.map((f) => f === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ButtonIcon,
-            {
-              as: X,
-              variant: "danger-ghost",
-              "aria-label": "Backspace",
-              size: "md",
-              onClick: () => u("⌫"),
-              disabled: r
-            },
-            "backspace"
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CalculatorButton,
-            {
-              variant: f === "=" ? "action" : f === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(f) ? "operator" : "default",
-              onClick: () => u(f),
-              disabled: r,
-              "aria-label": f,
-              children: f
-            },
-            f
-          )) }, b)) })
-        ]
-      }
-    );
-  }
-);
-Calculator.displayName = "Calculator";
-const 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",
-  {
-    variants: {
-      variant: {
-        // Core variants using Versaur color system
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft 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-soft 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-soft 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-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-soft focus-visible:ring-offset-white transition-all",
-        // Ghost variants (subtle)
-        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/70 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
-        // Semantic variants
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger-light 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-8 px-3 text-sm min-w-[2.25rem]",
-        md: "h-10 px-4 text-sm min-w-[2.5rem]",
-        lg: "h-12 px-8 text-lg min-w-[2.75rem]"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-), Button = React__default.forwardRef(
-  function e({
-    className: t,
-    variant: r = "primary",
-    size: s = "md",
-    disabled: o = !1,
-    type: n = "button",
-    children: a,
-    ...i
-  }, u) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        ref: u,
-        type: n,
-        className: cn(buttonVariants({ variant: r, size: s }), t),
-        disabled: o,
-        "aria-disabled": o,
-        inert: o ? !0 : void 0,
-        ...i,
-        children: a
-      }
-    );
-  }
-), alertVariants = cva(
+}), alertVariants = cva(
   "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
   {
     variants: {
@@ -559,18 +181,18 @@ const buttonVariants = cva(
     color: t = "neutral",
     icon: r,
     className: s,
-    children: o,
-    ...n
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    children: n,
+    ...o
+  }, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      ref: a,
+      ref: i,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), s),
-      ...n,
+      ...o,
       children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: o })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: n })
       ]
     }
   )
@@ -639,18 +261,18 @@ const buttonVariants = cva(
     className: t,
     color: r = "primary",
     fontSize: s = "base",
-    fontWeight: o = "medium",
-    quiet: n = !1,
-    ...a
-  }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    fontWeight: n = "medium",
+    quiet: o = !1,
+    ...i
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
-      ref: i,
+      ref: a,
       className: cn(
-        anchorVariants({ color: r, fontSize: s, fontWeight: o, quiet: n }),
+        anchorVariants({ color: r, fontSize: s, fontWeight: n, quiet: o }),
         t
       ),
-      ...a,
+      ...i,
       children: e
     }
   )
@@ -698,38 +320,38 @@ const buttonVariants = cva(
     size: t = "md",
     shape: r = "circle",
     className: s,
-    children: o,
-    ...n
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    children: n,
+    ...o
+  }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: a,
+      ref: i,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
-      ...n,
-      children: o
+      ...o,
+      children: n
     }
   )
 ), AvatarImage = forwardRef(
-  ({ src: e, alt: t, className: r, onError: s, ...o }, n) => {
-    const [a, i] = useState(!1);
+  ({ src: e, alt: t, className: r, onError: s, ...n }, o) => {
+    const [i, a] = useState(!1);
     useEffect(() => {
-      i(!1);
+      a(!1);
     }, [e]);
     const u = useCallback(
-      (c) => {
-        i(!0), s?.(c);
+      (l) => {
+        a(!0), s?.(l);
       },
       [s]
     );
-    return a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return i ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: n,
+        ref: o,
         src: e,
         alt: t,
         className: cn(avatarImageVariants(), r),
         onError: u,
-        ...o
+        ...n
       }
     );
   }
@@ -897,17 +519,17 @@ const buttonVariants = cva(
     shape: t = "square",
     color: r = "primary",
     size: s = "md",
-    iconLeft: o,
-    iconRight: n,
-    className: a,
-    children: i,
+    iconLeft: n,
+    iconRight: o,
+    className: i,
+    children: a,
     ...u
-  }, c) => {
-    const f = !(i != null && i !== "") && !!(o || n);
+  }, l) => {
+    const f = !(a != null && a !== "") && !!(n || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
-        ref: c,
+        ref: l,
         className: cn(
           badgeVariants({
             variant: e,
@@ -916,18 +538,18 @@ const buttonVariants = cva(
             size: s,
             iconOnly: f
           }),
-          a
+          i
         ),
         ...u,
         children: f ? (
           // Icon-only mode: display only the icon
-          o || n
+          n || o
         ) : (
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            o,
-            i,
-            n
+            n,
+            a,
+            o
           ] })
         )
       }
@@ -944,36 +566,110 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
       lg: "h-10 w-10",
       xl: "h-12 w-12"
     }
-  },
-  defaultVariants: {
-    size: "md"
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), BrandLogo = forwardRef(
+  ({ shape: e = "square", size: t, ...r }, s) => {
+    const o = {
+      square: SvgSpenicleSquare,
+      rounded: SvgSpenicleRounded,
+      circle: SvgSpenicleCircle
+    }[e] || SvgSpenicleSquare;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      o,
+      {
+        ref: s,
+        ...r,
+        className: cn("inline-block", brandSizeClass({ size: t }))
+      }
+    );
+  }
+), Brand = forwardRef(
+  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "span",
+    {
+      ref: n,
+      className: cn("inline-flex items-center gap-2"),
+      ...s,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { 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",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
+        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft 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-soft 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-soft 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-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-soft focus-visible:ring-offset-white transition-all",
+        // Ghost variants (subtle)
+        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/70 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
+        // Semantic variants
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "danger-ghost": "text-danger bg-white hover:bg-danger-light 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-8 px-3 text-sm min-w-[2.25rem]",
+        md: "h-10 px-4 text-sm min-w-[2.5rem]",
+        lg: "h-12 px-8 text-lg min-w-[2.75rem]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
   }
-}), BrandLogo = forwardRef(
-  ({ shape: e = "square", size: t, ...r }, s) => {
-    const n = {
-      square: SvgSpenicleSquare,
-      rounded: SvgSpenicleRounded,
-      circle: SvgSpenicleCircle
-    }[e] || SvgSpenicleSquare;
+), Button = React__default.forwardRef(
+  function({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    disabled: n = !1,
+    type: o = "button",
+    children: i,
+    ...a
+  }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      n,
+      "button",
       {
-        ref: s,
-        ...r,
-        className: cn("inline-block", brandSizeClass({ size: t }))
+        ref: u,
+        type: o,
+        className: cn(buttonVariants({ variant: r, size: s }), t),
+        disabled: n,
+        "aria-disabled": n,
+        inert: n ? !0 : void 0,
+        ...a,
+        children: i
       }
     );
   }
-), Brand = forwardRef(
-  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "span",
-    {
-      ref: o,
-      className: cn("inline-flex items-center gap-2"),
-      ...s,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { shape: r, size: t, "aria-hidden": "true" })
-    }
-  )
 ), buttonFloatVariants = cva(
   [
     "inline-flex items-center justify-center gap-2",
@@ -1035,76 +731,381 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
         lg: "h-16 w-16 min-w-16 min-h-16 text-xl"
       }
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function useFloatingPosition(e, t = "1rem") {
+  const r = useRef(null), [s, n] = useState({}), [o, i] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
+    const l = r.current;
+    if (!l) return;
+    const h = l.getBoundingClientRect().height > window.innerHeight;
+    let f = {}, p = "";
+    h ? (f = {
+      position: "fixed",
+      bottom: t,
+      zIndex: 50,
+      transform: `translateY(${l.scrollTop}px)`
+    }, p = `fixed bottom-4 ${e}-4`) : (f = {
+      position: "fixed",
+      bottom: t,
+      zIndex: 50
+    }, p = `fixed bottom-4 ${e}-4`), n(f), i(p);
+  }, [e, t]);
+  return useEffect(() => {
+    a();
+    const l = r.current;
+    return l && l.addEventListener("scroll", a), window.addEventListener("resize", a), () => {
+      l && l.removeEventListener("scroll", a), window.removeEventListener("resize", a);
+    };
+  }, [a]), useEffect(() => {
+    r.current && a();
+  }, [e, t, a]), [useCallback(
+    (l) => {
+      r.current = l, l && a();
+    },
+    [a]
+  ), s, o];
+}
+const ButtonFloat = forwardRef(
+  function({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    side: n = "right",
+    offset: o = "1rem",
+    ...i
+  }, a) {
+    const [u, l, x] = useFloatingPosition(
+      n,
+      o
+    ), [h, f] = useState(!1);
+    return useEffect(() => {
+      f(!0);
+    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        ref: a,
+        type: i.type || "button",
+        className: cn(
+          buttonFloatVariants({ variant: r, size: s }),
+          x,
+          h && "animate-fab-in",
+          t
+        ),
+        style: l,
+        ...i
+      }
+    ) });
+  }
+);
+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 "neutral";
+    }
+  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",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
+        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft 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-soft 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-soft 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-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-soft focus-visible:ring-offset-white transition-all",
+        // Ghost variants (subtle)
+        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral-light 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-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft 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-soft focus-visible:ring-offset-white transition-all",
+        "danger-ghost": "text-danger bg-white hover:bg-danger-light 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: {
+        xs: "h-6 w-6",
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-14 w-14"
+      },
+      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: s = "md",
+    shape: n = "rounded",
+    disabled: o = !1,
+    as: i,
+    "aria-label": a,
+    ...u
+  }, l) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        ref: l,
+        type: "button",
+        className: cn(
+          buttonIconVariants({
+            variant: r,
+            size: s,
+            shape: n
+          }),
+          t
+        ),
+        disabled: o,
+        "aria-disabled": o,
+        "aria-label": a,
+        inert: o ? !0 : void 0,
+        ...u,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Icon,
+          {
+            as: i,
+            size: s,
+            color: getIconColorFromVariant(r)
+          }
+        )
+      }
+    );
+  }
+), 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 }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "button",
+  {
+    ref: s,
+    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);
     }
-  }
-);
-function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [s, o] = useState({}), [n, a] = useState("fixed bottom-4 right-4"), i = useCallback(() => {
-    const c = r.current;
-    if (!c) return;
-    const b = c.getBoundingClientRect().height > window.innerHeight;
-    let f = {}, w = "";
-    b ? (f = {
-      position: "fixed",
-      bottom: t,
-      zIndex: 50,
-      transform: `translateY(${c.scrollTop}px)`
-    }, w = `fixed bottom-4 ${e}-4`) : (f = {
-      position: "fixed",
-      bottom: t,
-      zIndex: 50
-    }, w = `fixed bottom-4 ${e}-4`), o(f), a(w);
-  }, [e, t]);
-  return useEffect(() => {
-    i();
-    const c = r.current;
-    return c && c.addEventListener("scroll", i), window.addEventListener("resize", i), () => {
-      c && c.removeEventListener("scroll", i), window.removeEventListener("resize", i);
+  }, [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());
     };
-  }, [i]), useEffect(() => {
-    r.current && i();
-  }, [e, t, i]), [useCallback(
-    (c) => {
-      r.current = c, c && i();
-    },
-    [i]
-  ), s, n];
+    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 ButtonFloat = forwardRef(
-  function e({
-    className: t,
-    variant: r = "primary",
-    size: s = "md",
-    side: o = "right",
-    offset: n = "1rem",
-    ...a
-  }, i) {
-    const [u, c, x] = useFloatingPosition(
-      o,
-      n
-    ), [b, f] = useState(!1);
-    return useEffect(() => {
-      f(!0);
-    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
+const BUTTONS = [
+  ["7", "8", "9", "/"],
+  ["4", "5", "6", "*"],
+  ["1", "2", "3", "-"],
+  ["0", ".", "=", "+"]
+], Calculator = forwardRef(
+  ({
+    initialValue: e = "",
+    onChange: t,
+    disabled: r,
+    className: s,
+    "aria-label": n
+  }, o) => {
+    const { input: i, inputRef: a, handleButton: u, handleInput: l } = useCalculator({
+      initialValue: e,
+      disabled: r,
+      onChange: t
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
       {
-        ref: i,
-        type: a.type || "button",
-        className: cn(
-          buttonFloatVariants({ variant: r, size: s }),
-          x,
-          b && "animate-fab-in",
-          t
-        ),
-        style: c,
-        ...a
+        ref: o,
+        className: cn(calculatorRootVariants({ disabled: r }), s),
+        "aria-label": n || "Calculator",
+        role: "region",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              ref: a,
+              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: i,
+              onChange: l,
+              disabled: r,
+              inputMode: "decimal",
+              "aria-label": "Calculator input"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((x, h) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: x.map((f) => f === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ButtonIcon,
+            {
+              as: X,
+              variant: "danger-ghost",
+              "aria-label": "Backspace",
+              size: "md",
+              onClick: () => u("⌫"),
+              disabled: r
+            },
+            "backspace"
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CalculatorButton,
+            {
+              variant: f === "=" ? "action" : f === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(f) ? "operator" : "default",
+              onClick: () => u(f),
+              disabled: r,
+              "aria-label": f,
+              children: f
+            },
+            f
+          )) }, h)) })
+        ]
       }
-    ) });
+    );
   }
-), textVariants = cva("", {
+);
+Calculator.displayName = "Calculator";
+const textVariants = cva("", {
   variants: {
     color: {
       primary: "text-primary",
@@ -1179,16 +1180,16 @@ const ButtonFloat = forwardRef(
     color: t = "ghost",
     hasUnderline: r = !1,
     isCapitalize: s = !1,
-    align: o = "left",
-    italic: n = !1,
-    clamp: a = "none",
-    ellipsis: i = !1,
+    align: n = "left",
+    italic: o = !1,
+    clamp: i = "none",
+    ellipsis: a = !1,
     fontSize: u,
-    fontWeight: c,
+    fontWeight: l,
     className: x,
-    children: b,
+    children: h,
     ...f
-  }, w) => {
+  }, p) => {
     const d = [
       "h1",
       "h2",
@@ -1199,29 +1200,29 @@ const ButtonFloat = forwardRef(
       "p",
       "span",
       "label"
-    ].includes(e) ? e : "span", v = u ? `text-${u}` : "", p = c ? `font-${c}` : "";
+    ].includes(e) ? e : "span", v = u ? `text-${u}` : "", w = l ? `font-${l}` : "";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       e,
       {
-        ref: w,
+        ref: p,
         className: cn(
           textVariants({
             color: t,
             hasUnderline: r,
             isCapitalize: s,
-            align: o,
-            italic: n,
-            clamp: a,
-            ellipsis: i,
+            align: n,
+            italic: o,
+            clamp: i,
+            ellipsis: a,
             // @ts-expect-error - `as` is not a valid variant
             as: d
           }),
           v,
-          p,
+          w,
           x
         ),
         ...f,
-        children: b
+        children: h
       }
     );
   }
@@ -1268,9 +1269,9 @@ const CalendarHeader = () => {
     ] })
   ] });
 }, CalendarWeekdays = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 px-4 text-ghost-500 mb-3", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((e) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "xs", color: "ghost", align: "center", children: e }, e)) }), CalendarDaysSingle = () => {
-  const e = useCalendarContext(), { year: t, month: r, value: s, onChange: o, setMonth: n, setYear: a } = e, i = (g, m) => new Date(g, m + 1, 0).getDate(), c = ((g, m) => new Date(g, m, 1).getDay())(t, r), x = i(t, r), b = r - 1 < 0 ? 11 : r - 1, f = r === 0 ? t - 1 : t, w = i(t, b), y = r === 11 ? 0 : r + 1, d = r === 11 ? t + 1 : t, v = [];
-  for (let g = 0; g < c; g++) {
-    const m = w - c + g + 1;
+  const e = useCalendarContext(), { year: t, month: r, value: s, onChange: n, setMonth: o, setYear: i } = e, a = (g, m) => new Date(g, m + 1, 0).getDate(), l = ((g, m) => new Date(g, m, 1).getDay())(t, r), x = a(t, r), h = r - 1 < 0 ? 11 : r - 1, f = r === 0 ? t - 1 : t, p = a(t, h), y = r === 11 ? 0 : r + 1, d = r === 11 ? t + 1 : t, v = [];
+  for (let g = 0; g < l; g++) {
+    const m = p - l + g + 1;
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1280,7 +1281,7 @@ const CalendarHeader = () => {
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            o?.(new Date(f, b, m)), n(b), a(f);
+            n?.(new Date(f, h, m)), o(h), i(f);
           }
         },
         "prev-" + g
@@ -1308,15 +1309,15 @@ const CalendarHeader = () => {
           "aria-label": `Select ${t}-${r + 1}-${g}`,
           "aria-current": m ? "date" : void 0,
           onClick: () => {
-            o?.(new Date(t, r, g));
+            n?.(new Date(t, r, g));
           }
         },
         g
       )
     );
   }
-  const p = c + x;
-  for (let g = 0; g < (p % 7 === 0 ? 0 : 7 - p % 7); g++)
+  const w = l + x;
+  for (let g = 0; g < (w % 7 === 0 ? 0 : 7 - w % 7); g++)
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1326,7 +1327,7 @@ const CalendarHeader = () => {
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            o?.(new Date(d, y, g + 1)), n(y), a(d);
+            n?.(new Date(d, y, g + 1)), o(y), i(d);
           }
         },
         "next-" + g
@@ -1334,35 +1335,35 @@ const CalendarHeader = () => {
     );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: v });
 }, CalendarDaysRange = () => {
-  const { year: e, month: t, value: r, onChange: s, setMonth: o, setYear: n } = useCalendarContext(), a = (l, h) => new Date(l, h + 1, 0).getDate(), u = ((l, h) => new Date(l, h, 1).getDay())(e, t), c = a(e, t), x = t - 1 < 0 ? 11 : t - 1, b = t === 0 ? e - 1 : e, f = a(e, x), w = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, d = [], v = () => {
+  const { year: e, month: t, value: r, onChange: s, setMonth: n, setYear: o } = useCalendarContext(), i = (c, b) => new Date(c, b + 1, 0).getDate(), u = ((c, b) => new Date(c, b, 1).getDay())(e, t), l = i(e, t), x = t - 1 < 0 ? 11 : t - 1, h = t === 0 ? e - 1 : e, f = i(e, x), p = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, d = [], v = () => {
     if (!Array.isArray(r)) return [null, null];
-    const [l, h] = r;
-    return !l && !h ? [null, null] : l && h ? l <= h ? [l, h] : [h, l] : [l, h];
-  }, [p, g] = v(), m = (l) => {
-    if (!p || !g) return !1;
-    const h = new Date(e, t, l);
-    return h >= p && h <= g;
-  }, N = (l) => p ? p.getFullYear() === e && p.getMonth() === t && p.getDate() === l : !1, T = (l) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === l : !1;
-  for (let l = 0; l < u; l++) {
-    const h = f - u + l + 1;
+    const [c, b] = r;
+    return !c && !b ? [null, null] : c && b ? c <= b ? [c, b] : [b, c] : [c, b];
+  }, [w, g] = v(), m = (c) => {
+    if (!w || !g) return !1;
+    const b = new Date(e, t, c);
+    return b >= w && b <= g;
+  }, I = (c) => w ? w.getFullYear() === e && w.getMonth() === t && w.getDate() === c : !1, N = (c) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === c : !1;
+  for (let c = 0; c < u; c++) {
+    const b = f - u + c + 1;
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: h }),
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: b }),
           size: "sm",
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), o(x), n(b);
+            s?.([null, null]), n(x), o(h);
           }
         },
-        "prev-" + l
+        "prev-" + c
       )
     );
   }
-  for (let l = 1; l <= c; l++) {
-    const h = m(l), C = N(l), E = T(l);
+  for (let c = 1; c <= l; c++) {
+    const b = m(c), C = I(c), E = N(c);
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1372,47 +1373,47 @@ const CalendarHeader = () => {
             {
               as: "span",
               fontSize: "sm",
-              color: h || C || E ? "inherit" : "ghost",
+              color: b || C || E ? "inherit" : "ghost",
               className: cn(
-                h && " bg-primary text-white",
+                b && " bg-primary text-white",
                 C && "rounded-l-full bg-primary text-white",
                 E && "rounded-r-full bg-primary text-white"
               ),
-              children: l
+              children: c
             }
           ),
-          variant: C || E || h ? "primary" : "ghost",
+          variant: C || E || b ? "primary" : "ghost",
           size: "sm",
-          "aria-label": `Select ${e}-${t + 1}-${l}`,
+          "aria-label": `Select ${e}-${t + 1}-${c}`,
           "aria-current": C || E ? "date" : void 0,
           onClick: () => {
             if (!Array.isArray(r) || !r[0] || r[0] && r[1])
-              s?.([new Date(e, t, l), null]);
+              s?.([new Date(e, t, c), null]);
             else if (r[0] && !r[1]) {
-              const j = r[0], R = new Date(e, t, l);
+              const j = r[0], R = new Date(e, t, c);
               j.getTime() === R.getTime() ? s?.([j, R]) : s?.(j < R ? [j, R] : [R, j]);
             }
           }
         },
-        l
+        c
       )
     );
   }
-  const S = u + c;
-  for (let l = 0; l < (S % 7 === 0 ? 0 : 7 - S % 7); l++)
+  const S = u + l;
+  for (let c = 0; c < (S % 7 === 0 ? 0 : 7 - S % 7); c++)
     d.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: l + 1 }),
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: c + 1 }),
           size: "sm",
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), o(w), n(y);
+            s?.([null, null]), n(p), o(y);
           }
         },
-        "next-" + l
+        "next-" + c
       )
     );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: d });
@@ -1425,35 +1426,35 @@ function useCalendar({
   type: t,
   onChange: r,
   initialYear: s,
-  initialMonth: o
+  initialMonth: n
 }) {
-  const [n, a] = useState(o), [i, u] = useState(s), [c, x] = useState([
+  const [o, i] = useState(n), [a, u] = useState(s), [l, x] = useState([
     null,
     null
   ]);
-  let b = e;
-  t === "range" && !e && (b = c);
+  let h = e;
+  t === "range" && !e && (h = l);
   const f = useCallback(() => {
-    const d = n === 0 ? 11 : n - 1, v = n === 0 ? i - 1 : i;
-    a(d), u(v), t === "single" && r?.(new Date(v, d, 1));
-  }, [n, i, t, r]), w = useCallback(() => {
-    const d = n === 11 ? 0 : n + 1, v = n === 11 ? i + 1 : i;
-    a(d), u(v), t === "single" && r?.(new Date(v, d, 1));
-  }, [n, i, t, r]), y = useCallback(
+    const d = o === 0 ? 11 : o - 1, v = o === 0 ? a - 1 : a;
+    i(d), u(v), t === "single" && r?.(new Date(v, d, 1));
+  }, [o, a, t, r]), p = useCallback(() => {
+    const d = o === 11 ? 0 : o + 1, v = o === 11 ? a + 1 : a;
+    i(d), u(v), t === "single" && r?.(new Date(v, d, 1));
+  }, [o, a, t, r]), y = useCallback(
     (d) => {
       t === "single" ? r?.(d) : t === "range" && (x(d), r?.(d));
     },
     [t, r]
   );
   return {
-    year: i,
-    month: n,
-    value: b,
-    setMonth: a,
+    year: a,
+    month: o,
+    value: h,
+    setMonth: i,
     setYear: u,
     onChange: y,
     handlePrevMonth: f,
-    handleNextMonth: w
+    handleNextMonth: p
   };
 }
 const CalendarRoot = ({
@@ -1461,79 +1462,35 @@ const CalendarRoot = ({
   onChange: t,
   className: r,
   type: s = "single",
-  ...o
+  ...n
 }) => {
-  const n = /* @__PURE__ */ new Date(), a = useCalendar({
+  const o = /* @__PURE__ */ new Date(), i = useCalendar({
     value: e,
     onChange: t,
     type: s,
-    initialYear: n.getFullYear(),
-    initialMonth: n.getMonth()
+    initialYear: o.getFullYear(),
+    initialMonth: o.getMonth()
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     CalendarContext.Provider,
     {
       value: {
-        year: a.year,
-        month: a.month,
-        value: a.value,
+        year: i.year,
+        month: i.month,
+        value: i.value,
         type: s,
-        setMonth: a.setMonth,
-        setYear: a.setYear,
-        onChange: a.onChange
+        setMonth: i.setMonth,
+        setYear: i.setYear,
+        onChange: i.onChange
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...o, children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...n, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarHeader, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarWeekdays, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, {})
       ] })
     }
   );
-}, Calendar = Object.assign(CalendarRoot, {}), snackbarVariants = cva(
-  "flex items-center gap-2 px-4 py-2 rounded-sm w-fit relative shadow-sm",
-  {
-    variants: {
-      color: {
-        success: "text-success-bold bg-success-soft border-l-4 border-success",
-        info: "text-info-bold bg-info-soft border-l-4 border-info",
-        warning: "text-warning-bold bg-warning-soft border-l-4 border-warning",
-        danger: "text-danger-bold bg-danger-soft border-l-4 border-danger"
-      }
-    },
-    defaultVariants: {
-      color: "success"
-    }
-  }
-), SnackbarText = ({
-  children: e,
-  ...t
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "span",
-  {
-    className: "flex-1 truncate text-sm",
-    "data-testid": "snackbar-text",
-    ...t,
-    children: e
-  }
-), SnackbarAction = ({
-  children: e,
-  ...t
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2", "data-testid": "snackbar-action", ...t, children: e }), Snackbar = forwardRef(
-  ({ children: e, action: t, color: r, className: s, ...o }, n) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      ref: n,
-      role: "status",
-      "aria-live": "polite",
-      className: cn(snackbarVariants({ color: r }), s),
-      ...o,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SnackbarText, { children: e }),
-        t && /* @__PURE__ */ jsxRuntimeExports.jsx(SnackbarAction, { children: t })
-      ]
-    }
-  )
-), TableContext = createContext(null), TableProvider = TableContext.Provider;
+}, Calendar = Object.assign(CalendarRoot, {}), TableContext = createContext(null), TableProvider = TableContext.Provider;
 function useTableContext() {
   const e = useContext(TableContext);
   if (!e)
@@ -1604,7 +1561,7 @@ const getTableColumnClass = (e) => {
   }
 }, TableHeader = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { maxColumns: o } = useTableContext();
+    const { maxColumns: n } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -1616,7 +1573,7 @@ const getTableColumnClass = (e) => {
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(o)),
+            className: cn("grid gap-4", getTableColumnClass(n)),
             children: e
           }
         )
@@ -1627,7 +1584,7 @@ const getTableColumnClass = (e) => {
   ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "rowgroup", ref: s, className: cn(t), ...r, children: e })
 ), TableFooter = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { maxColumns: o } = useTableContext();
+    const { maxColumns: n } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -1639,7 +1596,7 @@ const getTableColumnClass = (e) => {
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(o)),
+            className: cn("grid gap-4", getTableColumnClass(n)),
             children: e
           }
         )
@@ -1648,14 +1605,14 @@ const getTableColumnClass = (e) => {
   }
 ), TableRow = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { maxColumns: o } = useTableContext();
+    const { maxColumns: n } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         role: "row",
         className: cn(
           "grid gap-4",
-          getTableColumnClass(o),
+          getTableColumnClass(n),
           "border-b border-border last:border-0",
           t
         ),
@@ -1666,36 +1623,36 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: o, ...n }, a) => {
-    const i = e === "th" ? "columnheader" : "cell";
+  ({ as: e = "td", span: t, align: r = "left", children: s, className: n, ...o }, i) => {
+    const a = e === "th" ? "columnheader" : "cell";
     let u = "text-left";
     return r === "center" ? u = "text-center" : r === "right" && (u = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        ref: a,
-        role: i,
+        ref: i,
+        role: a,
         className: cn(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
           getRowSpanClass(t),
           u,
-          o
+          n
         ),
-        ...n,
+        ...o,
         children: s
       }
     );
   }
 ), TableRoot = forwardRef(
-  ({ children: e, className: t, maxColumns: r = 12, ...s }, o) => {
-    const n = useMemo(
+  ({ children: e, className: t, maxColumns: r = 12, ...s }, n) => {
+    const o = useMemo(
       () => ({ maxColumns: r }),
       [r]
     );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        ref: o,
+        ref: n,
         role: "table",
         className: cn(
           "w-full overflow-x-auto rounded-lg border border-border",
@@ -1748,21 +1705,257 @@ const getTableColumnClass = (e) => {
     }
   }
 ), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...o }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...n }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: n,
+      ref: o,
       className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
-      ...o
+      ...n
     }
   )
 );
+function getColSpan(e = 4) {
+  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-4";
+  }
+}
+const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...n }, o) {
+  const i = getColSpan(s);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: o, className: cn(i, r), ...n, children: t });
+}), DescriptionListTerm = forwardRef(function e({ children: t, ...r }, s) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("dt", { ref: s, ...r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", fontWeight: "medium", color: "gray", children: t }) });
+}), DescriptionListDetails = forwardRef(function e({ children: t, color: r = "black", ...s }, n) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: n, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "base", fontWeight: "medium", color: r, children: t }) });
+}), DescriptionListRoot = forwardRef(
+  function e({ children: t, className: r, ...s }, n) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "dl",
+      {
+        ref: n,
+        className: cn("grid grid-cols-12 gap-y-4", r),
+        ...s,
+        children: t
+      }
+    );
+  }
+), DescriptionList = Object.assign(DescriptionListRoot, {
+  Item: DescriptionListItem,
+  Term: DescriptionListTerm,
+  Details: DescriptionListDetails
+});
+function useImage({ src: e }) {
+  const [t, r] = useState(!1), [s, n] = useState(!1), o = useRef(!1), i = () => {
+    r(!0);
+  }, a = () => {
+    n(!0);
+  };
+  return useEffect(() => {
+    if (!e) return;
+    const u = new Image();
+    return u.src = e, u.onload = () => {
+      o.current || r(!0);
+    }, u.onerror = () => {
+      o.current || n(!0);
+    }, () => {
+      o.current = !0;
+    };
+  }, [e]), {
+    loaded: t,
+    errored: s,
+    handleLoad: i,
+    handleError: a
+  };
+}
+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: s,
+  width: n
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Skeleton,
+    {
+      className: cn(imageAtomVariants({ shape: t, size: r }), e),
+      style: { height: s, width: n }
+    }
+  );
+}
+function BaseImageFallback({
+  alt: e,
+  width: t,
+  height: r,
+  className: s,
+  style: n,
+  shape: o,
+  size: i
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: imageAtomVariants({ shape: o, size: i, className: s }),
+      style: { width: t, height: r, ...n },
+      "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: s,
+    width: n,
+    height: o,
+    loading: i = "lazy",
+    position: a = "cover",
+    size: u = "auto",
+    shape: l,
+    className: x,
+    ...h
+  }, f) => {
+    const { loaded: p, errored: y, handleLoad: d, handleError: v } = useImage({
+      src: e
+    }), w = typeof n == "number" ? n : Number(n), g = typeof o == "number" ? o : Number(o);
+    return !p && !y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      BaseImageSkeleton,
+      {
+        shape: l,
+        width: w,
+        height: g
+      }
+    ) : y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      BaseImageFallback,
+      {
+        shape: l,
+        alt: t,
+        width: w,
+        height: g
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        ref: f,
+        src: e,
+        alt: t,
+        width: w,
+        height: g,
+        loading: i,
+        className: cn(
+          imageVariants({
+            position: a,
+            size: u,
+            shape: l
+          }),
+          x
+        ),
+        onLoad: (m) => {
+          d(), r?.(m);
+        },
+        onError: (m) => {
+          v(), s?.(m);
+        },
+        ...h
+      }
+    );
+  }
+), 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 {
   Alert as A,
   Badge as B,
   Calculator as C,
+  DescriptionList as D,
   Icon as I,
-  Snackbar as S,
   Table as T,
   Anchor as a,
   Avatar as b,
@@ -1772,5 +1965,9 @@ export {
   ButtonIcon as f,
   Calendar as g,
   Text as h,
-  Tile as i
+  Tile as i,
+  ImageCircle as j,
+  ImageSquare as k,
+  ImageRectangle as l,
+  BaseImage as m
 };