@fabio.caffarello/react-design-system 2.0.1 → 2.1.0

package/dist/server/index.js

@@ -0,0 +1,1804 @@
+var J = Object.defineProperty, ee = Object.defineProperties;
+var ae = Object.getOwnPropertyDescriptors;
+var I = Object.getOwnPropertySymbols;
+var P = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var O = (r, a, i) => a in r ? J(r, a, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[a] = i, u = (r, a) => {
+  for (var i in a || (a = {}))
+    P.call(a, i) && O(r, i, a[i]);
+  if (I)
+    for (var i of I(a))
+      _.call(a, i) && O(r, i, a[i]);
+  return r;
+}, v = (r, a) => ee(r, ae(a));
+var x = (r, a) => {
+  var i = {};
+  for (var t in r)
+    P.call(r, t) && a.indexOf(t) < 0 && (i[t] = r[t]);
+  if (r != null && I)
+    for (var t of I(r))
+      a.indexOf(t) < 0 && _.call(r, t) && (i[t] = r[t]);
+  return i;
+};
+var K = (r, a, i) => O(r, typeof a != "symbol" ? a + "" : a, i);
+import { jsxs as $, jsx as l } from "react/jsx-runtime";
+import Y, { forwardRef as V, memo as te } from "react";
+import { X as re, AlertCircle as ie, Loader2 as ne, CheckCircle2 as X } from "lucide-react";
+import { clsx as se } from "clsx";
+import { twMerge as le } from "tailwind-merge";
+import { cva as oe } from "class-variance-authority";
+class C {
+  /**
+   * Create a radius token
+   */
+  static create(a) {
+    const t = {
+      none: {
+        px: 0,
+        tailwind: "rounded-none",
+        description: "No border radius"
+      },
+      sm: {
+        px: 2,
+        tailwind: "rounded-sm",
+        description: "Small radius (2px) for subtle rounding"
+      },
+      md: {
+        px: 6,
+        tailwind: "rounded-md",
+        description: "Medium radius (6px) for buttons and inputs"
+      },
+      lg: {
+        px: 8,
+        tailwind: "rounded-lg",
+        description: "Large radius (8px) for cards and containers"
+      },
+      xl: {
+        px: 12,
+        tailwind: "rounded-xl",
+        description: "Extra large radius (12px) for prominent elements"
+      },
+      "2xl": {
+        px: 16,
+        tailwind: "rounded-2xl",
+        description: "2X large radius (16px) for large containers"
+      },
+      "3xl": {
+        px: 24,
+        tailwind: "rounded-3xl",
+        description: "3X large radius (24px) for very large containers"
+      },
+      full: {
+        px: 9999,
+        tailwind: "rounded-full",
+        description: "Full radius for circular elements"
+      }
+    }[a];
+    return {
+      value: t.px,
+      rem: `${t.px / 16}rem`,
+      px: `${t.px}px`,
+      tailwind: t.tailwind,
+      description: t.description
+    };
+  }
+}
+const ce = {
+  none: C.create("none"),
+  sm: C.create("sm"),
+  md: C.create("md"),
+  lg: C.create("lg"),
+  xl: C.create("xl"),
+  "2xl": C.create("2xl"),
+  "3xl": C.create("3xl"),
+  full: C.create("full")
+};
+function T(r) {
+  return ce[r].tailwind;
+}
+class y {
+  // 4px base
+  /**
+   * Create a spacing token from scale value
+   */
+  static create(a) {
+    const i = a * this.BASE_UNIT, t = i / 16;
+    return {
+      value: i,
+      rem: `${t}rem`,
+      px: `${i}px`,
+      tailwind: this.getTailwindClass(a)
+    };
+  }
+  /**
+   * Get Tailwind class for spacing value
+   */
+  static getTailwindClass(a) {
+    return {
+      0: "0",
+      0.5: "0.5",
+      // 2px — half-step, used by fine UI (badges, switches, separators)
+      1: "1",
+      // 4px
+      1.5: "1.5",
+      // 6px — half-step
+      2: "2",
+      // 8px
+      2.5: "2.5",
+      // 10px — half-step
+      3: "3",
+      // 12px
+      3.5: "3.5",
+      // 14px — half-step
+      4: "4",
+      // 16px
+      5: "5",
+      // 20px
+      6: "6",
+      // 24px
+      8: "8",
+      // 32px
+      10: "10",
+      // 40px
+      12: "12",
+      // 48px
+      16: "16",
+      // 64px
+      20: "20",
+      // 80px
+      24: "24",
+      // 96px
+      32: "32",
+      // 128px
+      40: "40",
+      // 160px
+      48: "48",
+      // 192px
+      64: "64",
+      // 256px
+      80: "80",
+      // 320px
+      96: "96"
+      // 384px
+    }[a] || String(a);
+  }
+}
+K(y, "BASE_UNIT", 4);
+const de = {
+  // Micro spacing (0-14px)
+  none: y.create(0),
+  "0.5": y.create(0.5),
+  // 2px (half-step)
+  xs: y.create(1),
+  // 4px
+  "1.5": y.create(1.5),
+  // 6px (half-step)
+  sm: y.create(2),
+  // 8px
+  "2.5": y.create(2.5),
+  // 10px (half-step)
+  md: y.create(3),
+  // 12px
+  "3.5": y.create(3.5),
+  // 14px (half-step)
+  // Standard spacing (16-32px)
+  base: y.create(4),
+  // 16px
+  lg: y.create(6),
+  // 24px
+  xl: y.create(8),
+  // 32px
+  // Large spacing (40-64px)
+  "2xl": y.create(10),
+  // 40px
+  "3xl": y.create(12),
+  // 48px
+  "4xl": y.create(16),
+  // 64px
+  // Extra large spacing (80px+)
+  "5xl": y.create(20),
+  // 80px
+  "6xl": y.create(24)
+  // 96px
+};
+function s(r, a = "p") {
+  const t = de[r].tailwind;
+  return `${{
+    p: "p",
+    m: "m",
+    px: "px",
+    mx: "mx",
+    py: "py",
+    my: "my",
+    pt: "pt",
+    mt: "mt",
+    pr: "pr",
+    mr: "mr",
+    pb: "pb",
+    mb: "mb",
+    pl: "pl",
+    ml: "ml",
+    gap: "gap",
+    "gap-x": "gap-x",
+    "gap-y": "gap-y",
+    "space-x": "space-x",
+    "space-y": "space-y"
+  }[a]}-${t}`;
+}
+class w {
+  /**
+   * Create font size token
+   */
+  static createFontSize(a) {
+    const t = {
+      "2xs": { px: 10, tailwind: "text-2xs" },
+      // micro-text (badge counters, mini chips)
+      xs: { px: 12, tailwind: "text-xs" },
+      sm: { px: 14, tailwind: "text-sm" },
+      base: { px: 16, tailwind: "text-base" },
+      lg: { px: 18, tailwind: "text-lg" },
+      xl: { px: 20, tailwind: "text-xl" },
+      "2xl": { px: 24, tailwind: "text-2xl" },
+      "3xl": { px: 30, tailwind: "text-3xl" },
+      "4xl": { px: 36, tailwind: "text-4xl" },
+      "5xl": { px: 48, tailwind: "text-5xl" },
+      "6xl": { px: 60, tailwind: "text-6xl" }
+    }[a];
+    return {
+      value: t.px,
+      rem: `${t.px / 16}rem`,
+      px: `${t.px}px`,
+      tailwind: t.tailwind
+    };
+  }
+  /**
+   * Create line height token
+   */
+  static createLineHeight(a) {
+    const t = {
+      none: { value: 1, tailwind: "leading-none" },
+      tight: { value: 1.25, tailwind: "leading-tight" },
+      snug: { value: 1.375, tailwind: "leading-snug" },
+      normal: { value: 1.5, tailwind: "leading-normal" },
+      relaxed: { value: 1.625, tailwind: "leading-relaxed" },
+      loose: { value: 2, tailwind: "leading-loose" }
+    }[a];
+    return {
+      value: t.value,
+      tailwind: t.tailwind
+    };
+  }
+  /**
+   * Create font weight token
+   */
+  static createFontWeight(a) {
+    const t = {
+      light: { value: 300, tailwind: "font-light" },
+      normal: { value: 400, tailwind: "font-normal" },
+      medium: { value: 500, tailwind: "font-medium" },
+      semibold: { value: 600, tailwind: "font-semibold" },
+      bold: { value: 700, tailwind: "font-bold" }
+    }[a];
+    return {
+      value: t.value,
+      tailwind: t.tailwind
+    };
+  }
+  /**
+   * Create complete typography token
+   */
+  static create(a, i = "normal", t = "normal") {
+    return {
+      fontSize: this.createFontSize(a),
+      lineHeight: this.createLineHeight(i),
+      fontWeight: this.createFontWeight(t)
+    };
+  }
+}
+w.createFontWeight("light"), w.createFontWeight("normal"), w.createFontWeight("medium"), w.createFontWeight("semibold"), w.createFontWeight("bold");
+const B = {
+  // Headings
+  h1: w.create("4xl", "tight", "bold"),
+  h2: w.create("3xl", "tight", "bold"),
+  h3: w.create("2xl", "snug", "semibold"),
+  h4: w.create("xl", "snug", "semibold"),
+  h5: w.create("lg", "normal", "medium"),
+  h6: w.create("base", "normal", "medium"),
+  // Body text
+  body: w.create("base", "relaxed", "normal"),
+  bodySmall: w.create("sm", "relaxed", "normal"),
+  bodyLarge: w.create("lg", "relaxed", "normal"),
+  // UI elements
+  label: w.create("sm", "normal", "medium"),
+  caption: w.create("xs", "normal", "normal"),
+  button: w.create("base", "normal", "medium")
+};
+function W(r) {
+  const a = B[r];
+  return `${a.fontSize.tailwind} ${a.lineHeight.tailwind} ${a.fontWeight.tailwind}`;
+}
+function L(r) {
+  return B[r].fontSize.tailwind;
+}
+function U(r) {
+  return B[r].fontWeight.tailwind;
+}
+function d(...r) {
+  return le(se(r));
+}
+const H = (r, a) => {
+  const i = oe(r, a);
+  return ((t) => {
+    const n = i(t);
+    return d(n);
+  });
+}, fe = H(
+  // Base classes
+  d(
+    "inline-flex",
+    "items-center",
+    "font-medium",
+    T("full"),
+    s("xs", "gap")
+  ),
+  {
+    variants: {
+      variant: {
+        default: d(
+          "bg-surface-muted",
+          "text-fg-primary",
+          "border",
+          "border-line-default"
+        ),
+        outlined: d(
+          "bg-transparent",
+          "text-fg-primary",
+          "border",
+          "border-line-default"
+        ),
+        filled: d(
+          "bg-surface-brand-strong",
+          "text-fg-inverse",
+          "border",
+          "border-transparent"
+        )
+      },
+      size: {
+        sm: d(
+          s("xs", "px"),
+          s("xs", "py"),
+          L("caption")
+        ),
+        md: d(
+          s("sm", "px"),
+          s("xs", "py"),
+          L("bodySmall")
+        ),
+        lg: d(
+          s("md", "px"),
+          s("sm", "py"),
+          L("body")
+        )
+      },
+      selected: {
+        true: d(
+          "bg-surface-brand-strong",
+          "text-fg-inverse",
+          "border",
+          "border-line-brand"
+        ),
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        selected: !0,
+        variant: "default",
+        class: ""
+        // Override variant when selected
+      },
+      {
+        selected: !0,
+        variant: "outlined",
+        class: ""
+        // Override variant when selected
+      },
+      {
+        selected: !0,
+        variant: "filled",
+        class: ""
+        // Override variant when selected
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      selected: !1,
+      disabled: !1
+    }
+  }
+), pe = V(function(N, h) {
+  var M = N, {
+    children: a,
+    variant: i = "default",
+    size: t = "md",
+    onRemove: n,
+    selected: o = !1,
+    disabled: c = !1,
+    className: f = "",
+    "aria-label": m,
+    onClick: p,
+    tabIndex: b
+  } = M, g = x(M, [
+    "children",
+    "variant",
+    "size",
+    "onRemove",
+    "selected",
+    "disabled",
+    "className",
+    "aria-label",
+    "onClick",
+    "tabIndex"
+  ]);
+  const R = (() => {
+    if (m) return m;
+    if (typeof a == "string") return a;
+    if (typeof a == "object" && a !== null && "props" in a) {
+      const S = a.props;
+      if (S != null && S.children && typeof S.children == "string")
+        return S.children;
+    }
+  })(), q = p !== void 0, Q = q && !c, Z = (S) => {
+    c || (S.key === "Enter" || S.key === " ") && (S.preventDefault(), p == null || p());
+  };
+  return /* @__PURE__ */ $(
+    "div",
+    v(u({
+      ref: h,
+      className: d(
+        fe({ variant: i, size: t, selected: o, disabled: c }),
+        n && s("xs", "pr"),
+        f
+      ),
+      "aria-disabled": c
+    }, g), {
+      children: [
+        q ? /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: c ? void 0 : p,
+            onKeyDown: Z,
+            disabled: c,
+            "aria-pressed": o ? !0 : void 0,
+            "aria-label": m || R,
+            tabIndex: b !== void 0 ? b : Q ? 0 : void 0,
+            className: d(
+              "flex-1",
+              "bg-transparent",
+              "border-0",
+              s("none", "p"),
+              "text-inherit",
+              "text-left",
+              "cursor-pointer",
+              "focus:outline-none",
+              "focus:ring-2",
+              "focus:ring-line-focus",
+              "focus:ring-offset-2",
+              T("full")
+            ),
+            children: a
+          }
+        ) : /* @__PURE__ */ l("span", { children: a }),
+        n && !c && /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: (S) => {
+              S.stopPropagation(), n();
+            },
+            className: d(
+              s("xs", "ml"),
+              "hover:bg-tint-hover",
+              T("full"),
+              s("xs", "p"),
+              "transition-colors",
+              "focus:outline-none",
+              "focus:ring-2",
+              "focus:ring-line-focus",
+              "focus:ring-offset-1"
+            ),
+            "aria-label": `Remove ${R || "chip"}`,
+            children: /* @__PURE__ */ l(re, { className: "h-3 w-3", "aria-hidden": "true" })
+          }
+        )
+      ]
+    })
+  );
+});
+pe.displayName = "Chip";
+function Ae(n) {
+  var o = n, {
+    message: r,
+    id: a,
+    className: i = ""
+  } = o, t = x(o, [
+    "message",
+    "id",
+    "className"
+  ]);
+  const c = [
+    s("xs", "mt"),
+    L("bodySmall"),
+    "text-fg-error",
+    "flex",
+    "items-center",
+    s("xs", "gap")
+  ], f = d(...c, i);
+  return /* @__PURE__ */ $("div", v(u({ role: "alert", id: a, className: f, "aria-live": "polite" }, t), { children: [
+    /* @__PURE__ */ l(ie, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ l("span", { children: r })
+  ] }));
+}
+function We(t) {
+  var n = t, {
+    variant: r = "info",
+    className: a
+  } = n, i = x(n, [
+    "variant",
+    "className"
+  ]);
+  const o = {
+    warning: d("bg-warning-bg", "text-warning-dark", "border-warning"),
+    error: d("bg-error-bg", "text-error-dark", "border-error"),
+    info: d("bg-info-bg", "text-info-dark", "border-info")
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    u({
+      role: "alert",
+      className: d(
+        "border",
+        s("base", "px"),
+        s("sm", "py"),
+        T("lg"),
+        o[r],
+        a
+      )
+    }, i)
+  );
+}
+function e(r, a, i) {
+  const t = ue(r), n = me(r);
+  return {
+    hex: r,
+    rgb: t,
+    hsl: n,
+    cssVar: `var(--color-${a}-${i})`,
+    tailwind: `${a}-${i}`
+  };
+}
+function ue(r) {
+  const a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
+  return a ? `${parseInt(a[1], 16)}, ${parseInt(a[2], 16)}, ${parseInt(a[3], 16)}` : "0, 0, 0";
+}
+function me(r) {
+  const a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
+  if (!a) return "0, 0%, 0%";
+  const i = parseInt(a[1], 16) / 255, t = parseInt(a[2], 16) / 255, n = parseInt(a[3], 16) / 255, o = Math.max(i, t, n), c = Math.min(i, t, n);
+  let f = 0, m = 0;
+  const p = (o + c) / 2;
+  if (o !== c) {
+    const b = o - c;
+    switch (m = p > 0.5 ? b / (2 - o - c) : b / (o + c), o) {
+      case i:
+        f = ((t - n) / b + (t < n ? 6 : 0)) / 6;
+        break;
+      case t:
+        f = ((n - i) / b + 2) / 6;
+        break;
+      case n:
+        f = ((i - t) / b + 4) / 6;
+        break;
+    }
+  }
+  return `${Math.round(f * 360)}, ${Math.round(m * 100)}%, ${Math.round(p * 100)}%`;
+}
+e("#eef2ff", "indigo", 50), e("#e0e7ff", "indigo", 100), e("#c7d2fe", "indigo", 200), e("#a5b4fc", "indigo", 300), e("#818cf8", "indigo", 400), e("#6366f1", "indigo", 500), e("#4f46e5", "indigo", 600), e("#4338ca", "indigo", 700), e("#3730a3", "indigo", 800), e("#312e81", "indigo", 900), e("#1e1b4b", "indigo", 950);
+e("#f5f3ff", "violet", 50), e("#ede9fe", "violet", 100), e("#ddd6fe", "violet", 200), e("#c4b5fd", "violet", 300), e("#a78bfa", "violet", 400), e("#8b5cf6", "violet", 500), e("#7c3aed", "violet", 600), e("#6d28d9", "violet", 700), e("#5b21b6", "violet", 800), e("#4c1d95", "violet", 900), e("#2e1065", "violet", 950);
+e("#ecfeff", "cyan", 50), e("#cffafe", "cyan", 100), e("#a5f3fc", "cyan", 200), e("#67e8f9", "cyan", 300), e("#22d3ee", "cyan", 400), e("#06b6d4", "cyan", 500), e("#0891b2", "cyan", 600), e("#0e7490", "cyan", 700), e("#155e75", "cyan", 800), e("#164e63", "cyan", 900), e("#083344", "cyan", 950);
+e("#f8fafc", "slate", 50), e("#f1f5f9", "slate", 100), e("#e2e8f0", "slate", 200), e("#cbd5e1", "slate", 300), e("#94a3b8", "slate", 400), e("#64748b", "slate", 500), e("#475569", "slate", 600), e("#334155", "slate", 700), e("#1e293b", "slate", 800), e("#0f172a", "slate", 900), e("#020617", "slate", 950);
+e("#f9fafb", "gray", 50), e("#f3f4f6", "gray", 100), e("#e5e7eb", "gray", 200), e("#d1d5db", "gray", 300), e("#9ca3af", "gray", 400), e("#6b7280", "gray", 500), e("#4b5563", "gray", 600), e("#374151", "gray", 700), e("#1f2937", "gray", 800), e("#111827", "gray", 900), e("#030712", "gray", 950);
+e("#ecfdf5", "emerald", 50), e("#d1fae5", "emerald", 100), e("#a7f3d0", "emerald", 200), e("#6ee7b7", "emerald", 300), e("#34d399", "emerald", 400), e("#10b981", "emerald", 500), e("#059669", "emerald", 600), e("#047857", "emerald", 700), e("#065f46", "emerald", 800), e("#064e3b", "emerald", 900), e("#022c22", "emerald", 950);
+e("#f0fdf4", "green", 50), e("#dcfce7", "green", 100), e("#bbf7d0", "green", 200), e("#86efac", "green", 300), e("#4ade80", "green", 400), e("#22c55e", "green", 500), e("#16a34a", "green", 600), e("#15803d", "green", 700), e("#166534", "green", 800), e("#14532d", "green", 900), e("#052e16", "green", 950);
+e("#fffbeb", "amber", 50), e("#fef3c7", "amber", 100), e("#fde68a", "amber", 200), e("#fcd34d", "amber", 300), e("#fbbf24", "amber", 400), e("#f59e0b", "amber", 500), e("#d97706", "amber", 600), e("#b45309", "amber", 700), e("#92400e", "amber", 800), e("#78350f", "amber", 900), e("#451a03", "amber", 950);
+e("#fefce8", "yellow", 50), e("#fef9c3", "yellow", 100), e("#fef08a", "yellow", 200), e("#fde047", "yellow", 300), e("#facc15", "yellow", 400), e("#eab308", "yellow", 500), e("#ca8a04", "yellow", 600), e("#a16207", "yellow", 700), e("#854d0e", "yellow", 800), e("#713f12", "yellow", 900), e("#422006", "yellow", 950);
+e("#fff7ed", "orange", 50), e("#ffedd5", "orange", 100), e("#fed7aa", "orange", 200), e("#fdba74", "orange", 300), e("#fb923c", "orange", 400), e("#f97316", "orange", 500), e("#ea580c", "orange", 600), e("#c2410c", "orange", 700), e("#9a3412", "orange", 800), e("#7c2d12", "orange", 900), e("#431407", "orange", 950);
+e("#fff1f2", "rose", 50), e("#ffe4e6", "rose", 100), e("#fecdd3", "rose", 200), e("#fda4af", "rose", 300), e("#fb7185", "rose", 400), e("#f43f5e", "rose", 500), e("#e11d48", "rose", 600), e("#be123c", "rose", 700), e("#9f1239", "rose", 800), e("#881337", "rose", 900), e("#4c0519", "rose", 950);
+e("#fef2f2", "red", 50), e("#fee2e2", "red", 100), e("#fecaca", "red", 200), e("#fca5a5", "red", 300), e("#f87171", "red", 400), e("#ef4444", "red", 500), e("#dc2626", "red", 600), e("#b91c1c", "red", 700), e("#991b1b", "red", 800), e("#7f1d1d", "red", 900), e("#450a0a", "red", 950);
+e("#f0f9ff", "sky", 50), e("#e0f2fe", "sky", 100), e("#bae6fd", "sky", 200), e("#7dd3fc", "sky", 300), e("#38bdf8", "sky", 400), e("#0ea5e9", "sky", 500), e("#0284c7", "sky", 600), e("#0369a1", "sky", 700), e("#075985", "sky", 800), e("#0c4a6e", "sky", 900), e("#082f49", "sky", 950);
+e("#eff6ff", "blue", 50), e("#dbeafe", "blue", 100), e("#bfdbfe", "blue", 200), e("#93c5fd", "blue", 300), e("#60a5fa", "blue", 400), e("#3b82f6", "blue", 500), e("#2563eb", "blue", 600), e("#1d4ed8", "blue", 700), e("#1e40af", "blue", 800), e("#1e3a8a", "blue", 900), e("#172554", "blue", 950);
+e("#fdf4ff", "fuchsia", 50), e("#fae8ff", "fuchsia", 100), e("#f5d0fe", "fuchsia", 200), e("#f0abfc", "fuchsia", 300), e("#e879f9", "fuchsia", 400), e("#d946ef", "fuchsia", 500), e("#c026d3", "fuchsia", 600), e("#a21caf", "fuchsia", 700), e("#86198f", "fuchsia", 800), e("#701a75", "fuchsia", 900), e("#4a044e", "fuchsia", 950);
+e("#fdf2f8", "pink", 50), e("#fce7f3", "pink", 100), e("#fbcfe8", "pink", 200), e("#f9a8d4", "pink", 300), e("#f472b6", "pink", 400), e("#ec4899", "pink", 500), e("#db2777", "pink", 600), e("#be185d", "pink", 700), e("#9d174d", "pink", 800), e("#831843", "pink", 900), e("#500724", "pink", 950);
+e("#faf5ff", "purple", 50), e("#f3e8ff", "purple", 100), e("#e9d5ff", "purple", 200), e("#d8b4fe", "purple", 300), e("#c084fc", "purple", 400), e("#a855f7", "purple", 500), e("#9333ea", "purple", 600), e("#7e22ce", "purple", 700), e("#6b21a8", "purple", 800), e("#581c87", "purple", 900), e("#3b0764", "purple", 950);
+e("#f0fdfa", "teal", 50), e("#ccfbf1", "teal", 100), e("#99f6e4", "teal", 200), e("#5eead4", "teal", 300), e("#2dd4bf", "teal", 400), e("#14b8a6", "teal", 500), e("#0d9488", "teal", 600), e("#0f766e", "teal", 700), e("#115e59", "teal", 800), e("#134e4a", "teal", 900), e("#042f2e", "teal", 950);
+e("#f7fee7", "lime", 50), e("#ecfccb", "lime", 100), e("#d9f99d", "lime", 200), e("#bef264", "lime", 300), e("#a3e635", "lime", 400), e("#84cc16", "lime", 500), e("#65a30d", "lime", 600), e("#4d7c0f", "lime", 700), e("#3f6212", "lime", 800), e("#365314", "lime", 900), e("#1a2e05", "lime", 950);
+class D {
+  /**
+   * Create a shadow token
+   */
+  static create(a) {
+    return {
+      none: {
+        value: "none",
+        tailwind: "shadow-none",
+        description: "No shadow"
+      },
+      sm: {
+        value: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        tailwind: "shadow-sm",
+        description: "Small shadow for subtle elevation"
+      },
+      md: {
+        value: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        tailwind: "shadow-md",
+        description: "Medium shadow for cards and elevated elements"
+      },
+      lg: {
+        value: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        tailwind: "shadow-lg",
+        description: "Large shadow for modals and dropdowns"
+      },
+      xl: {
+        value: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        tailwind: "shadow-xl",
+        description: "Extra large shadow for prominent modals"
+      },
+      "2xl": {
+        value: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        tailwind: "shadow-2xl",
+        description: "2X large shadow for maximum elevation"
+      },
+      inner: {
+        value: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+        tailwind: "shadow-inner",
+        description: "Inner shadow for inset elements"
+      }
+    }[a];
+  }
+}
+D.create("none"), D.create("sm"), D.create("md"), D.create("lg"), D.create("xl"), D.create("2xl"), D.create("inner");
+class F {
+  /**
+   * Create a border width token
+   */
+  static createWidth(a) {
+    const t = {
+      none: {
+        px: 0,
+        tailwind: "border-0"
+      },
+      thin: {
+        px: 1,
+        tailwind: "border"
+      },
+      base: {
+        px: 1,
+        tailwind: "border"
+      },
+      medium: {
+        px: 2,
+        tailwind: "border-2"
+      },
+      thick: {
+        px: 4,
+        tailwind: "border-4"
+      }
+    }[a];
+    return {
+      value: t.px,
+      px: `${t.px}px`,
+      tailwind: t.tailwind
+    };
+  }
+  /**
+   * Create a complete border token
+   */
+  static create(a, i = "solid") {
+    return {
+      width: this.createWidth(a),
+      style: i,
+      description: `${a} ${i} border`
+    };
+  }
+}
+F.create("none"), F.create("thin"), F.create("base"), F.create("medium"), F.create("thick"), F.create("thin", "dashed"), F.create("base", "dashed"), F.create("thin", "dotted"), F.create("base", "dotted");
+class E {
+  /**
+   * Create breakpoint token
+   */
+  static create(a) {
+    const t = {
+      sm: { minWidth: 640, tailwind: "sm" },
+      md: { minWidth: 768, tailwind: "md" },
+      lg: { minWidth: 1024, tailwind: "lg" },
+      xl: { minWidth: 1280, tailwind: "xl" },
+      "2xl": { minWidth: 1536, tailwind: "2xl" }
+    }[a];
+    return {
+      name: a,
+      minWidth: t.minWidth,
+      px: `${t.minWidth}px`,
+      rem: `${t.minWidth / 16}rem`,
+      tailwind: t.tailwind
+    };
+  }
+}
+E.create("sm"), E.create("md"), E.create("lg"), E.create("xl"), E.create("2xl");
+class A {
+  /**
+   * Create an animation token
+   */
+  static create(a, i = "ease-in-out") {
+    const t = {
+      fast: {
+        value: "150ms",
+        ms: 150,
+        tailwind: "duration-150"
+      },
+      base: {
+        value: "200ms",
+        ms: 200,
+        tailwind: "duration-200"
+      },
+      slow: {
+        value: "300ms",
+        ms: 300,
+        tailwind: "duration-300"
+      },
+      slower: {
+        value: "500ms",
+        ms: 500,
+        tailwind: "duration-500"
+      }
+    }, n = {
+      "ease-in": {
+        value: "cubic-bezier(0.4, 0, 1, 1)",
+        tailwind: "ease-in",
+        description: "Slow start, fast end"
+      },
+      "ease-out": {
+        value: "cubic-bezier(0, 0, 0.2, 1)",
+        tailwind: "ease-out",
+        description: "Fast start, slow end"
+      },
+      "ease-in-out": {
+        value: "cubic-bezier(0.4, 0, 0.2, 1)",
+        tailwind: "ease-in-out",
+        description: "Slow start and end, fast middle"
+      },
+      spring: {
+        value: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+        tailwind: "ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]",
+        description: "Spring-like bounce effect"
+      }
+    };
+    return {
+      duration: t[a],
+      easing: n[i]
+    };
+  }
+  /**
+   * Create a transition token
+   */
+  static createTransition(a, i = "base", t = "ease-in-out") {
+    const n = this.create(i, t), o = Array.isArray(a) ? a.join(", ") : a, c = [
+      n.duration.tailwind,
+      n.easing.tailwind
+    ].join(" ");
+    return {
+      property: o,
+      duration: n.duration.value,
+      timingFunction: n.easing.value,
+      tailwind: c
+    };
+  }
+}
+A.create("fast"), A.create("base"), A.create("slow"), A.create("slower"), A.createTransition(
+  ["color", "background-color", "border-color"],
+  "base"
+), A.createTransition("opacity", "fast"), A.createTransition("transform", "base"), A.createTransition("all", "base");
+class z {
+  /**
+   * Create a z-index token
+   */
+  static create(a) {
+    return {
+      base: {
+        value: 0,
+        tailwind: "z-0",
+        description: "Base layer for normal content"
+      },
+      dropdown: {
+        value: 1e3,
+        tailwind: "z-[1000]",
+        description: "Dropdown menus and select options"
+      },
+      sticky: {
+        value: 1020,
+        tailwind: "z-[1020]",
+        description: "Sticky headers and navigation"
+      },
+      fixed: {
+        value: 1030,
+        tailwind: "z-[1030]",
+        description: "Fixed position elements"
+      },
+      "modal-backdrop": {
+        value: 1040,
+        tailwind: "z-[1040]",
+        description: "Modal backdrop/overlay"
+      },
+      modal: {
+        value: 1050,
+        tailwind: "z-[1050]",
+        description: "Modal dialogs and drawers"
+      },
+      popover: {
+        value: 1060,
+        tailwind: "z-[1060]",
+        description: "Popovers and tooltips"
+      },
+      tooltip: {
+        value: 1070,
+        tailwind: "z-[1070]",
+        description: "Tooltips (highest priority)"
+      },
+      toast: {
+        value: 1080,
+        tailwind: "z-[1080]",
+        description: "Toast notifications (highest priority)"
+      }
+    }[a];
+  }
+}
+z.create("base"), z.create("dropdown"), z.create("sticky"), z.create("fixed"), z.create("modal-backdrop"), z.create("modal"), z.create("popover"), z.create("tooltip"), z.create("toast");
+class k {
+  /**
+   * Create an opacity token
+   */
+  static create(a) {
+    const i = a / 100, t = {
+      0: "Fully transparent",
+      5: "Very light overlay",
+      10: "Light overlay",
+      20: "Subtle overlay",
+      25: "Quarter opacity",
+      30: "Light background",
+      40: "Semi-transparent",
+      50: "Half opacity",
+      60: "Semi-opaque",
+      70: "Mostly opaque",
+      75: "Three-quarter opacity",
+      80: "High opacity",
+      90: "Very high opacity",
+      95: "Nearly opaque",
+      100: "Fully opaque"
+    };
+    return {
+      value: a,
+      decimal: i,
+      tailwind: {
+        0: "opacity-0",
+        5: "opacity-5",
+        10: "opacity-10",
+        20: "opacity-20",
+        25: "opacity-25",
+        30: "opacity-30",
+        40: "opacity-40",
+        50: "opacity-50",
+        60: "opacity-60",
+        70: "opacity-70",
+        75: "opacity-75",
+        80: "opacity-80",
+        90: "opacity-90",
+        95: "opacity-95",
+        100: "opacity-100"
+      }[a],
+      description: t[a]
+    };
+  }
+}
+k.create(0), k.create(5), k.create(10), k.create(20), k.create(25), k.create(30), k.create(40), k.create(50), k.create(60), k.create(70), k.create(75), k.create(80), k.create(90), k.create(95), k.create(100);
+const be = H("w-full", {
+  variants: {
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    },
+    variant: {
+      primary: "bg-surface-muted",
+      secondary: "bg-surface-muted",
+      success: "bg-success-bg-emphasis",
+      error: "bg-error-bg-emphasis",
+      warning: "bg-warning-bg-emphasis",
+      info: "bg-info-bg-emphasis"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+}), G = H("transition-all", {
+  variants: {
+    variant: {
+      primary: "bg-surface-brand",
+      secondary: "bg-surface-secondary",
+      success: "bg-success",
+      error: "bg-error",
+      warning: "bg-warning",
+      info: "bg-info"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+}), ge = V(function(g, b) {
+  var h = g, {
+    value: a,
+    max: i = 100,
+    variant: t = "primary",
+    size: n = "md",
+    showLabel: o = !1,
+    label: c,
+    "aria-label": f,
+    className: m = ""
+  } = h, p = x(h, [
+    "value",
+    "max",
+    "variant",
+    "size",
+    "showLabel",
+    "label",
+    "aria-label",
+    "className"
+  ]);
+  const N = a === void 0, M = N ? void 0 : Math.min(Math.max(a / i * 100, 0), 100), j = f || (N ? "Loading in progress" : `Progress: ${M == null ? void 0 : M.toFixed(0)}%`);
+  return /* @__PURE__ */ $("div", v(u({ ref: b, className: d("w-full", m) }, p), { children: [
+    o && (c || !N) && /* @__PURE__ */ $(
+      "div",
+      {
+        className: d(
+          "flex",
+          "items-center",
+          "justify-between",
+          s("xs", "mb")
+        ),
+        children: [
+          c && /* @__PURE__ */ l(
+            "span",
+            {
+              className: d(
+                L("bodySmall"),
+                U("label"),
+                "text-fg-primary"
+              ),
+              children: c
+            }
+          ),
+          !N && M !== void 0 && /* @__PURE__ */ $(
+            "span",
+            {
+              className: d(
+                L("bodySmall"),
+                "text-fg-secondary"
+              ),
+              children: [
+                M.toFixed(0),
+                "%"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuemin": N ? void 0 : 0,
+        "aria-valuemax": N ? void 0 : i,
+        "aria-valuenow": N ? void 0 : a,
+        "aria-label": j,
+        "aria-busy": N,
+        className: d(
+          "relative",
+          "w-full",
+          "overflow-hidden",
+          be({ size: n, variant: t }),
+          T("full")
+        ),
+        children: N ? /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(
+              "absolute",
+              "top-0",
+              "left-0",
+              "bottom-0",
+              G({ variant: t }),
+              T("full"),
+              "motion-reduce:animate-none"
+            ),
+            style: {
+              width: "30%",
+              animation: "progress-indeterminate 1.5s ease-in-out infinite"
+            }
+          }
+        ) : /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(
+              "h-full",
+              G({ variant: t }),
+              T("full"),
+              "transition-all",
+              "duration-300",
+              "ease-out"
+            ),
+            style: {
+              width: `${M}%`
+            },
+            "aria-hidden": "true"
+          }
+        )
+      }
+    )
+  ] }));
+});
+ge.displayName = "Progress";
+function De(f) {
+  var m = f, {
+    variant: r = "text",
+    width: a,
+    height: i,
+    lines: t = 1,
+    className: n = "",
+    "aria-label": o
+  } = m, c = x(m, [
+    "variant",
+    "width",
+    "height",
+    "lines",
+    "className",
+    "aria-label"
+  ]);
+  const p = [
+    "motion-safe:animate-pulse",
+    "bg-surface-muted",
+    T("sm")
+  ], b = {
+    text: "h-4",
+    card: "h-32",
+    list: "h-12",
+    circle: T("full")
+  }, g = d(...p, b[r], n), h = {};
+  a && (h.width = a), i && (h.height = i);
+  const N = o || `Loading ${r} content`;
+  return r === "text" && t > 1 ? /* @__PURE__ */ l(
+    "div",
+    v(u({
+      className: s("sm", "space-y"),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": N
+    }, c), {
+      children: Array.from({ length: t }).map((M, j) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: g,
+          style: j === t - 1 ? { width: "75%" } : h,
+          "aria-hidden": "true"
+        },
+        j
+      ))
+    })
+  ) : /* @__PURE__ */ l(
+    "div",
+    u({
+      className: g,
+      style: h,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": N
+    }, c)
+  );
+}
+const xe = H("motion-safe:animate-spin", {
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-8 w-8"
+    },
+    variant: {
+      primary: "text-fg-brand",
+      secondary: "text-fg-brand-secondary",
+      neutral: "text-fg-secondary"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+}), he = te(function(c) {
+  var f = c, {
+    size: a = "md",
+    variant: i = "primary",
+    label: t,
+    className: n = ""
+  } = f, o = x(f, [
+    "size",
+    "variant",
+    "label",
+    "className"
+  ]);
+  return /* @__PURE__ */ $(
+    "div",
+    v(u({
+      className: d("inline-flex", "items-center", n),
+      role: "status",
+      "aria-label": t || "Loading",
+      "aria-live": "polite"
+    }, o), {
+      children: [
+        /* @__PURE__ */ l(
+          ne,
+          {
+            className: d(xe({ size: a, variant: i })),
+            "aria-hidden": "true"
+          }
+        ),
+        t && /* @__PURE__ */ l(
+          "span",
+          {
+            className: d(
+              s("sm", "ml"),
+              L("bodySmall"),
+              "text-fg-secondary",
+              "sr-only"
+            ),
+            children: t
+          }
+        )
+      ]
+    })
+  );
+});
+he.displayName = "Spinner";
+const ye = {
+  primary: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-indigo-400",
+    DEFAULT: "text-fg-brand",
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    dark: "text-indigo-600",
+    contrast: "text-fg-inverse"
+  },
+  secondary: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-pink-300",
+    DEFAULT: "text-fg-brand-secondary",
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    dark: "text-pink-600",
+    contrast: "text-fg-inverse"
+  },
+  success: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-green-300",
+    DEFAULT: "text-fg-success",
+    dark: "text-success-dark",
+    contrast: "text-fg-inverse"
+  },
+  warning: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-yellow-300",
+    DEFAULT: "text-fg-warning",
+    dark: "text-warning-dark",
+    contrast: "text-fg-inverse"
+  },
+  error: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-red-300",
+    DEFAULT: "text-fg-error",
+    dark: "text-error-dark",
+    contrast: "text-fg-inverse"
+  },
+  info: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-blue-300",
+    DEFAULT: "text-fg-info",
+    dark: "text-info-dark",
+    contrast: "text-fg-inverse"
+  },
+  neutral: {
+    light: "text-fg-tertiary",
+    DEFAULT: "text-fg-secondary",
+    dark: "text-fg-primary",
+    contrast: "text-fg-inverse"
+  }
+};
+function we(p, m) {
+  var b = p, {
+    variant: r = "paragraph",
+    bold: a,
+    italic: i,
+    className: t,
+    as: n,
+    colorRole: o = "neutral",
+    colorShade: c = "dark"
+  } = b, f = x(b, [
+    "variant",
+    "bold",
+    "italic",
+    "className",
+    "as",
+    "colorRole",
+    "colorShade"
+  ]);
+  const g = [];
+  let h;
+  if (n)
+    h = n;
+  else
+    switch (r) {
+      case "heading":
+        h = "h2";
+        break;
+      case "list":
+        h = "li";
+        break;
+      default:
+        h = "p";
+        break;
+    }
+  return r === "heading" ? g.push(W("h2")) : r === "body" || r === "paragraph" ? g.push(W("body")) : r === "bodySmall" ? g.push(W("bodySmall")) : r === "bodyLarge" ? g.push(W("bodyLarge")) : r === "caption" ? g.push(W("caption")) : r === "label" ? g.push(W("label")) : g.push(W("body")), a && g.push("font-bold"), i && g.push("italic"), g.push(ye[o][c]), /* @__PURE__ */ l(h, u({ ref: m, className: d(...g, t) }, f));
+}
+const je = V(we), ve = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full"
+}, ke = Y.forwardRef(
+  (m, f) => {
+    var p = m, {
+      className: r,
+      maxWidth: a = "lg",
+      paddingX: i = "base",
+      paddingY: t = "base",
+      center: n = !0,
+      children: o
+    } = p, c = x(p, [
+      "className",
+      "maxWidth",
+      "paddingX",
+      "paddingY",
+      "center",
+      "children"
+    ]);
+    return /* @__PURE__ */ l(
+      "div",
+      v(u({
+        ref: f,
+        className: d(
+          "w-full",
+          ve[a],
+          s(i, "px"),
+          s(t, "py"),
+          n && "mx-auto",
+          r
+        )
+      }, c), {
+        children: o
+      })
+    );
+  }
+);
+ke.displayName = "Container";
+const Ne = Y.forwardRef(
+  (m, f) => {
+    var p = m, {
+      className: r,
+      spacing: a = "base",
+      align: i = "stretch",
+      justify: t = "start",
+      direction: n = "column",
+      children: o
+    } = p, c = x(p, [
+      "className",
+      "spacing",
+      "align",
+      "justify",
+      "direction",
+      "children"
+    ]);
+    const b = n === "column" ? s(a, "gap-y") : s(a, "gap-x"), g = {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    }, h = {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    };
+    return /* @__PURE__ */ l(
+      "div",
+      v(u({
+        ref: f,
+        className: d(
+          "flex",
+          n === "column" ? "flex-col" : "flex-row",
+          b,
+          g[i],
+          h[t],
+          r
+        )
+      }, c), {
+        children: o
+      })
+    );
+  }
+);
+Ne.displayName = "Stack";
+const $e = V(
+  function({ option: a, isHighlighted: i, onSelect: t }, n) {
+    const o = () => {
+      a.disabled || t(a);
+    };
+    return /* @__PURE__ */ $(
+      "div",
+      {
+        ref: n,
+        role: "option",
+        "aria-selected": i,
+        "aria-disabled": a.disabled,
+        onClick: o,
+        className: `
+          flex
+          items-center
+          ${s("sm", "gap")}
+          ${s("sm", "px")}
+          ${s("sm", "py")}
+          text-sm
+          cursor-pointer
+          transition-colors
+          ${i ? "bg-surface-active" : ""}
+          ${a.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover"}
+        `,
+        children: [
+          a.icon && /* @__PURE__ */ l("span", { className: "flex-shrink-0", children: a.icon }),
+          /* @__PURE__ */ l("span", { className: "flex-1", children: a.label })
+        ]
+      }
+    );
+  }
+);
+$e.displayName = "AutocompleteOption";
+function Ee(n) {
+  var o = n, {
+    items: r,
+    separator: a = "/",
+    className: i = ""
+  } = o, t = x(o, [
+    "items",
+    "separator",
+    "className"
+  ]);
+  const c = [
+    "flex",
+    "items-center",
+    s("sm", "space-x"),
+    L("bodySmall")
+  ], f = d(...c, i);
+  return /* @__PURE__ */ l("nav", v(u({ "aria-label": "Breadcrumb", className: f }, t), { children: /* @__PURE__ */ l(
+    "ol",
+    {
+      className: d("flex", "items-center", s("sm", "space-x")),
+      children: r.map((m, p) => {
+        const b = p === r.length - 1;
+        return /* @__PURE__ */ $("li", { className: "flex items-center", children: [
+          p > 0 && /* @__PURE__ */ l(
+            "span",
+            {
+              className: d(
+                s("sm", "mx"),
+                "text-fg-tertiary"
+              ),
+              "aria-hidden": "true",
+              children: a
+            }
+          ),
+          b ? /* @__PURE__ */ l(
+            "span",
+            {
+              className: d(
+                "text-fg-primary",
+                U("label")
+              ),
+              "aria-current": "page",
+              children: m.label
+            }
+          ) : m.href ? /* @__PURE__ */ l(
+            "a",
+            {
+              href: m.href,
+              className: d(
+                "inline-flex",
+                "items-center",
+                s("xs", "px"),
+                s("xs", "pt"),
+                "border-b-2",
+                "border-transparent",
+                L("bodySmall"),
+                U("label"),
+                "transition-colors",
+                "text-fg-secondary",
+                "hover:border-line-emphasis",
+                "hover:text-fg-primary"
+              ),
+              children: m.label
+            }
+          ) : /* @__PURE__ */ l("span", { className: "text-fg-secondary", children: m.label })
+        ] }, p);
+      })
+    }
+  ) }));
+}
+function Ie(t) {
+  var n = t, {
+    children: r,
+    className: a = ""
+  } = n, i = x(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ l(
+    "div",
+    v(u({
+      className: `flex flex-col ${s("1.5", "space-y")} ${s("lg", "p")} ${s("base", "pb")} ${a}`
+    }, i), {
+      children: r
+    })
+  );
+}
+function Ve(t) {
+  var n = t, {
+    children: r,
+    className: a = ""
+  } = n, i = x(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ l(
+    "div",
+    v(u({
+      className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:${s("sm", "space-x")} ${s("lg", "p")} ${s("base", "pt")} ${a}`
+    }, i), {
+      children: r
+    })
+  );
+}
+function He(t) {
+  var n = t, {
+    children: r,
+    className: a = ""
+  } = n, i = x(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ l(
+    "div",
+    v(u({
+      className: `
+        ${s("lg", "p")}
+        border-b
+        border-line-default
+        ${a}
+      `
+    }, i), {
+      children: r
+    })
+  );
+}
+function Oe(t) {
+  var n = t, {
+    children: r,
+    className: a = ""
+  } = n, i = x(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ l(
+    "div",
+    v(u({
+      className: `
+        ${s("lg", "p")}
+        border-t
+        border-line-default
+        flex
+        justify-end
+        ${s("sm", "gap")}
+        ${a}
+      `
+    }, i), {
+      children: r
+    })
+  );
+}
+function Ue({ children: r, className: a }) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: d(
+        "flex-shrink-0 flex items-center",
+        s("sm", "gap"),
+        a
+      ),
+      children: r
+    }
+  );
+}
+function Be({
+  children: r,
+  className: a
+}) {
+  return /* @__PURE__ */ l(
+    "nav",
+    {
+      className: d(
+        "flex-1 flex items-center justify-center",
+        s("base", "gap"),
+        "hidden md:flex",
+        // Hidden on mobile, visible on desktop
+        a
+      ),
+      "aria-label": "Main navigation",
+      children: r
+    }
+  );
+}
+function Re(i) {
+  var t = i, {
+    className: r = ""
+  } = t, a = x(t, [
+    "className"
+  ]);
+  return /* @__PURE__ */ l(
+    "div",
+    u({
+      role: "separator",
+      className: `
+        h-px
+        bg-line-default
+        ${s("sm", "my")}
+        ${r}
+      `
+    }, a)
+  );
+}
+function qe(t) {
+  var n = t, {
+    orientation: r = "horizontal",
+    className: a = ""
+  } = n, i = x(n, [
+    "orientation",
+    "className"
+  ]);
+  return r === "vertical" ? /* @__PURE__ */ l(
+    "div",
+    u({
+      className: d("w-px", "h-6", "bg-line-default", "mx-auto", a),
+      role: "separator",
+      "aria-orientation": "vertical"
+    }, i)
+  ) : /* @__PURE__ */ l(
+    "div",
+    u({
+      className: d(
+        "w-full",
+        "h-px",
+        "bg-line-default",
+        s("sm", "my"),
+        // my-2 (8px) para consistência com gap-2 usado em outros lugares
+        "flex-shrink-0",
+        // Prevenir que separator encolha
+        a
+      ),
+      role: "separator",
+      "aria-orientation": "horizontal",
+      style: {
+        // Garantir que separator não seja afetado por transformações
+        willChange: "auto",
+        transform: "none"
+      }
+    }, i)
+  );
+}
+function Pe(n) {
+  var o = n, { column: r, row: a, className: i = "" } = o, t = x(o, ["column", "row", "className"]);
+  const c = r.key in a ? a[r.key] : void 0;
+  return /* @__PURE__ */ l(
+    "td",
+    v(u({
+      className: `${s("lg", "px")} ${s("base", "py")} whitespace-nowrap text-sm text-fg-primary ${r.hiddenOnMobile ? "hidden md:table-cell" : ""} ${i}`
+    }, t), {
+      children: r.render ? r.render(c, a) : String(c != null ? c : "")
+    })
+  );
+}
+function _e({
+  items: r,
+  orientation: a = "vertical",
+  className: i = ""
+}) {
+  return a === "horizontal" ? /* @__PURE__ */ l("div", { className: `flex items-start ${i}`, children: r.map((t, n) => {
+    const o = t.status || (n === 0 ? "active" : n < r.findIndex((f) => f.status === "active") ? "completed" : "default"), c = n === r.length - 1;
+    return /* @__PURE__ */ l("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ $("div", { className: "flex flex-col items-center flex-1", children: [
+      /* @__PURE__ */ l(
+        "div",
+        v(u({}, o === "default" ? { "data-marker": "pending" } : {}), {
+          className: `
+                  flex
+                  items-center
+                  justify-center
+                  w-10
+                  h-10
+                  ${T("full")}
+                  border-2
+                  ${o === "completed" ? "bg-success border-success text-fg-inverse" : o === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : o === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                `,
+          children: t.icon || (o === "completed" ? /* @__PURE__ */ l(X, { className: "h-4 w-4" }) : n + 1)
+        })
+      ),
+      !c && /* @__PURE__ */ l(
+        "div",
+        {
+          className: `
+                      w-full
+                      h-0.5
+                      ${s("sm", "mt")}
+                      ${o === "completed" ? "bg-success" : "bg-line-emphasis"}
+                    `
+        }
+      ),
+      /* @__PURE__ */ $(
+        "div",
+        {
+          className: `${s("base", "mt")} text-center ${s("base", "px")}`,
+          children: [
+            t.timestamp && /* @__PURE__ */ l(
+              "p",
+              {
+                className: `text-xs text-fg-tertiary ${s("xs", "mb")}`,
+                children: t.timestamp
+              }
+            ),
+            /* @__PURE__ */ l("h3", { className: "text-sm font-semibold text-fg-primary", children: t.title }),
+            t.description && /* @__PURE__ */ l(
+              "p",
+              {
+                className: `text-xs text-fg-secondary ${s("xs", "mt")}`,
+                children: t.description
+              }
+            ),
+            t.content && /* @__PURE__ */ l("div", { className: s("sm", "mt"), children: t.content })
+          ]
+        }
+      )
+    ] }) }, t.id);
+  }) }) : /* @__PURE__ */ l("div", { className: `${s("none", "space-y")} ${i}`, children: r.map((t, n) => {
+    const o = t.status || (n === 0 ? "active" : n < r.findIndex((f) => f.status === "active") ? "completed" : "default"), c = n === r.length - 1;
+    return /* @__PURE__ */ $(
+      "div",
+      {
+        className: `flex items-start ${s("base", "gap")}`,
+        children: [
+          /* @__PURE__ */ $("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ l(
+              "div",
+              v(u({}, o === "default" ? { "data-marker": "pending" } : {}), {
+                className: `
+                flex
+                items-center
+                justify-center
+                w-10
+                h-10
+                ${T("full")}
+                border-2
+                ${o === "completed" ? "bg-success border-success text-fg-inverse" : o === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : o === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+              `,
+                children: t.icon || (o === "completed" ? /* @__PURE__ */ l(X, { className: "h-4 w-4" }) : n + 1)
+              })
+            ),
+            !c && /* @__PURE__ */ l(
+              "div",
+              {
+                className: `
+                    w-0.5
+                    flex-1
+                    min-h-16
+                    ${s("sm", "mt")}
+                    ${o === "completed" ? "bg-success" : "bg-line-emphasis"}
+                  `
+              }
+            )
+          ] }),
+          /* @__PURE__ */ $("div", { className: `flex-1 ${s("xl", "pb")}`, children: [
+            t.timestamp && /* @__PURE__ */ l(
+              "p",
+              {
+                className: `text-xs text-fg-tertiary ${s("xs", "mb")}`,
+                children: t.timestamp
+              }
+            ),
+            /* @__PURE__ */ l(
+              "h3",
+              {
+                className: `
+                text-base
+                font-semibold
+                ${o === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
+              `,
+                children: t.title
+              }
+            ),
+            t.description && /* @__PURE__ */ l(
+              "p",
+              {
+                className: `text-sm text-fg-secondary ${s("xs", "mt")}`,
+                children: t.description
+              }
+            ),
+            t.content && /* @__PURE__ */ l("div", { className: s("md", "mt"), children: t.content })
+          ] })
+        ]
+      },
+      t.id
+    );
+  }) });
+}
+export {
+  $e as AutocompleteOption,
+  Ee as Breadcrumb,
+  pe as Chip,
+  ke as Container,
+  Ve as DialogFooter,
+  Ie as DialogHeader,
+  Oe as DrawerFooter,
+  He as DrawerHeader,
+  Ae as ErrorMessage,
+  Ue as HeaderActions,
+  Be as HeaderNavigation,
+  We as Info,
+  Re as MenuSeparator,
+  qe as NavbarSeparator,
+  ge as Progress,
+  De as Skeleton,
+  he as Spinner,
+  Ne as Stack,
+  Pe as TableCell,
+  je as Text,
+  _e as Timeline
+};
+//# sourceMappingURL=index.js.map