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

package/dist/server/index.js

@@ -0,0 +1,1842 @@
+var ee = Object.defineProperty, ae = Object.defineProperties;
+var te = Object.getOwnPropertyDescriptors;
+var V = Object.getOwnPropertySymbols;
+var _ = Object.prototype.hasOwnProperty, K = Object.prototype.propertyIsEnumerable;
+var B = (r, a, i) => a in r ? ee(r, a, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[a] = i, b = (r, a) => {
+  for (var i in a || (a = {}))
+    _.call(a, i) && B(r, i, a[i]);
+  if (V)
+    for (var i of V(a))
+      K.call(a, i) && B(r, i, a[i]);
+  return r;
+}, k = (r, a) => ae(r, te(a));
+var h = (r, a) => {
+  var i = {};
+  for (var t in r)
+    _.call(r, t) && a.indexOf(t) < 0 && (i[t] = r[t]);
+  if (r != null && V)
+    for (var t of V(r))
+      a.indexOf(t) < 0 && K.call(r, t) && (i[t] = r[t]);
+  return i;
+};
+var X = (r, a, i) => B(r, typeof a != "symbol" ? a + "" : a, i);
+import { jsxs as T, jsx as o } from "react/jsx-runtime";
+import Q, { forwardRef as H, memo as re } from "react";
+import { X as ie, AlertCircle as ne, Loader2 as se, CheckCircle2 as G } from "lucide-react";
+import { clsx as le } from "clsx";
+import { twMerge as oe } from "tailwind-merge";
+import { cva as ce } from "class-variance-authority";
+class A {
+  /**
+   * 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 de = {
+  none: A.create("none"),
+  sm: A.create("sm"),
+  md: A.create("md"),
+  lg: A.create("lg"),
+  xl: A.create("xl"),
+  "2xl": A.create("2xl"),
+  "3xl": A.create("3xl"),
+  full: A.create("full")
+};
+function S(r) {
+  return de[r].tailwind;
+}
+class w {
+  // 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);
+  }
+}
+X(w, "BASE_UNIT", 4);
+const fe = {
+  // Micro spacing (0-14px)
+  none: w.create(0),
+  "0.5": w.create(0.5),
+  // 2px (half-step)
+  xs: w.create(1),
+  // 4px
+  "1.5": w.create(1.5),
+  // 6px (half-step)
+  sm: w.create(2),
+  // 8px
+  "2.5": w.create(2.5),
+  // 10px (half-step)
+  md: w.create(3),
+  // 12px
+  "3.5": w.create(3.5),
+  // 14px (half-step)
+  // Standard spacing (16-32px)
+  base: w.create(4),
+  // 16px
+  lg: w.create(6),
+  // 24px
+  xl: w.create(8),
+  // 32px
+  // Large spacing (40-64px)
+  "2xl": w.create(10),
+  // 40px
+  "3xl": w.create(12),
+  // 48px
+  "4xl": w.create(16),
+  // 64px
+  // Extra large spacing (80px+)
+  "5xl": w.create(20),
+  // 80px
+  "6xl": w.create(24)
+  // 96px
+};
+function l(r, a = "p") {
+  const t = fe[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 v {
+  /**
+   * 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)
+    };
+  }
+}
+v.createFontWeight("light"), v.createFontWeight("normal"), v.createFontWeight("medium"), v.createFontWeight("semibold"), v.createFontWeight("bold");
+const U = {
+  // Headings
+  h1: v.create("4xl", "tight", "bold"),
+  h2: v.create("3xl", "tight", "bold"),
+  h3: v.create("2xl", "snug", "semibold"),
+  h4: v.create("xl", "snug", "semibold"),
+  h5: v.create("lg", "normal", "medium"),
+  h6: v.create("base", "normal", "medium"),
+  // Body text
+  body: v.create("base", "relaxed", "normal"),
+  bodySmall: v.create("sm", "relaxed", "normal"),
+  bodyLarge: v.create("lg", "relaxed", "normal"),
+  // UI elements
+  label: v.create("sm", "normal", "medium"),
+  caption: v.create("xs", "normal", "normal"),
+  button: v.create("base", "normal", "medium")
+};
+function I(r) {
+  const a = U[r];
+  return `${a.fontSize.tailwind} ${a.lineHeight.tailwind} ${a.fontWeight.tailwind}`;
+}
+function C(r) {
+  return U[r].fontSize.tailwind;
+}
+function R(r) {
+  return U[r].fontWeight.tailwind;
+}
+function d(...r) {
+  return oe(le(r));
+}
+const O = (r, a) => {
+  const i = ce(r, a);
+  return ((t) => {
+    const n = i(t);
+    return d(n);
+  });
+}, pe = O(
+  // Base classes
+  d(
+    "inline-flex",
+    "items-center",
+    "font-medium",
+    S("full"),
+    l("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(
+          l("xs", "px"),
+          l("xs", "py"),
+          C("caption")
+        ),
+        md: d(
+          l("sm", "px"),
+          l("xs", "py"),
+          C("bodySmall")
+        ),
+        lg: d(
+          l("md", "px"),
+          l("sm", "py"),
+          C("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
+    }
+  }
+), ue = H(function(N, y) {
+  var F = N, {
+    children: a,
+    variant: i = "default",
+    size: t = "md",
+    onRemove: n,
+    selected: s = !1,
+    disabled: c = !1,
+    className: f = "",
+    "aria-label": m,
+    onClick: p,
+    tabIndex: u
+  } = F, x = h(F, [
+    "children",
+    "variant",
+    "size",
+    "onRemove",
+    "selected",
+    "disabled",
+    "className",
+    "aria-label",
+    "onClick",
+    "tabIndex"
+  ]);
+  const q = (() => {
+    if (m) return m;
+    if (typeof a == "string") return a;
+    if (typeof a == "object" && a !== null && "props" in a) {
+      const M = a.props;
+      if (M != null && M.children && typeof M.children == "string")
+        return M.children;
+    }
+  })(), P = p !== void 0, Z = P && !c, J = (M) => {
+    c || (M.key === "Enter" || M.key === " ") && (M.preventDefault(), p == null || p());
+  };
+  return /* @__PURE__ */ T(
+    "div",
+    k(b({
+      ref: y,
+      className: d(
+        pe({ variant: i, size: t, selected: s, disabled: c }),
+        n && l("xs", "pr"),
+        f
+      ),
+      "aria-disabled": c
+    }, x), {
+      children: [
+        P ? /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            onClick: c ? void 0 : p,
+            onKeyDown: J,
+            disabled: c,
+            "aria-pressed": s ? !0 : void 0,
+            "aria-label": m || q,
+            tabIndex: u !== void 0 ? u : Z ? 0 : void 0,
+            className: d(
+              "flex-1",
+              "bg-transparent",
+              "border-0",
+              l("none", "p"),
+              "text-inherit",
+              "text-left",
+              "cursor-pointer",
+              "focus:outline-none",
+              "focus:ring-2",
+              "focus:ring-line-focus",
+              "focus:ring-offset-2",
+              S("full")
+            ),
+            children: a
+          }
+        ) : /* @__PURE__ */ o("span", { children: a }),
+        n && !c && /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            onClick: (M) => {
+              M.stopPropagation(), n();
+            },
+            className: d(
+              l("xs", "ml"),
+              "hover:bg-tint-hover",
+              S("full"),
+              l("xs", "p"),
+              "transition-colors",
+              "focus:outline-none",
+              "focus:ring-2",
+              "focus:ring-line-focus",
+              "focus:ring-offset-1"
+            ),
+            "aria-label": `Remove ${q || "chip"}`,
+            children: /* @__PURE__ */ o(ie, { className: "h-3 w-3", "aria-hidden": "true" })
+          }
+        )
+      ]
+    })
+  );
+});
+ue.displayName = "Chip";
+function De(n) {
+  var s = n, {
+    message: r,
+    id: a,
+    className: i = ""
+  } = s, t = h(s, [
+    "message",
+    "id",
+    "className"
+  ]);
+  const c = [
+    l("xs", "mt"),
+    C("bodySmall"),
+    "text-fg-error",
+    "flex",
+    "items-center",
+    l("xs", "gap")
+  ], f = d(...c, i);
+  return /* @__PURE__ */ T("div", k(b({ role: "alert", id: a, className: f, "aria-live": "polite" }, t), { children: [
+    /* @__PURE__ */ o(ne, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ o("span", { children: r })
+  ] }));
+}
+function je(t) {
+  var n = t, {
+    variant: r = "info",
+    className: a
+  } = n, i = h(n, [
+    "variant",
+    "className"
+  ]);
+  const s = {
+    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__ */ o(
+    "div",
+    b({
+      role: "alert",
+      className: d(
+        "border",
+        l("base", "px"),
+        l("sm", "py"),
+        S("lg"),
+        s[r],
+        a
+      )
+    }, i)
+  );
+}
+function g(r, a, i) {
+  const t = me(r), n = be(r);
+  return {
+    hex: r,
+    rgb: t,
+    hsl: n,
+    cssVar: `var(--color-${a}-${i})`,
+    tailwind: `${a}-${i}`
+  };
+}
+function me(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 be(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, s = Math.max(i, t, n), c = Math.min(i, t, n);
+  let f = 0, m = 0;
+  const p = (s + c) / 2;
+  if (s !== c) {
+    const u = s - c;
+    switch (m = p > 0.5 ? u / (2 - s - c) : u / (s + c), s) {
+      case i:
+        f = ((t - n) / u + (t < n ? 6 : 0)) / 6;
+        break;
+      case t:
+        f = ((n - i) / u + 2) / 6;
+        break;
+      case n:
+        f = ((i - t) / u + 4) / 6;
+        break;
+    }
+  }
+  return `${Math.round(f * 360)}, ${Math.round(m * 100)}%, ${Math.round(p * 100)}%`;
+}
+g("#f0f4f8", "brand-primary", 50), g("#d9e2ec", "brand-primary", 100), g("#bcccdc", "brand-primary", 200), g("#9fb3c8", "brand-primary", 300), g("#7390ad", "brand-primary", 400), g("#486581", "brand-primary", 500), g("#334e68", "brand-primary", 600), g("#243b53", "brand-primary", 700), g("#1a2a3a", "brand-primary", 800), g("#102a43", "brand-primary", 900), g("#061a35", "brand-primary", 950);
+g("#f7f5ff", "brand-secondary", 50), g("#eee9ff", "brand-secondary", 100), g("#e0d6ff", "brand-secondary", 200), g("#cbb8ff", "brand-secondary", 300), g("#aa89fc", "brand-secondary", 400), g("#8e58f2", "brand-secondary", 500), g("#703bc8", "brand-secondary", 600), g("#582aa2", "brand-secondary", 700), g("#44227e", "brand-secondary", 800), g("#32185d", "brand-secondary", 900), g("#180635", "brand-secondary", 950);
+function e(r, a, i) {
+  const t = ge(r), n = xe(r);
+  return {
+    hex: r,
+    rgb: t,
+    hsl: n,
+    cssVar: `var(--color-${a}-${i})`,
+    tailwind: `${a}-${i}`
+  };
+}
+function ge(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 xe(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, s = Math.max(i, t, n), c = Math.min(i, t, n);
+  let f = 0, m = 0;
+  const p = (s + c) / 2;
+  if (s !== c) {
+    const u = s - c;
+    switch (m = p > 0.5 ? u / (2 - s - c) : u / (s + c), s) {
+      case i:
+        f = ((t - n) / u + (t < n ? 6 : 0)) / 6;
+        break;
+      case t:
+        f = ((n - i) / u + 2) / 6;
+        break;
+      case n:
+        f = ((i - t) / u + 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 z {
+  /**
+   * 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`
+    };
+  }
+}
+z.create("none"), z.create("thin"), z.create("base"), z.create("medium"), z.create("thick"), z.create("thin", "dashed"), z.create("base", "dashed"), z.create("thin", "dotted"), z.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 W {
+  /**
+   * 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), s = Array.isArray(a) ? a.join(", ") : a, c = [
+      n.duration.tailwind,
+      n.easing.tailwind
+    ].join(" ");
+    return {
+      property: s,
+      duration: n.duration.value,
+      timingFunction: n.easing.value,
+      tailwind: c
+    };
+  }
+}
+W.create("fast"), W.create("base"), W.create("slow"), W.create("slower"), W.createTransition(
+  ["color", "background-color", "border-color"],
+  "base"
+), W.createTransition("opacity", "fast"), W.createTransition("transform", "base"), W.createTransition("all", "base");
+class L {
+  /**
+   * 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];
+  }
+}
+L.create("base"), L.create("dropdown"), L.create("sticky"), L.create("fixed"), L.create("modal-backdrop"), L.create("modal"), L.create("popover"), L.create("tooltip"), L.create("toast");
+class $ {
+  /**
+   * 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]
+    };
+  }
+}
+$.create(0), $.create(5), $.create(10), $.create(20), $.create(25), $.create(30), $.create(40), $.create(50), $.create(60), $.create(70), $.create(75), $.create(80), $.create(90), $.create(95), $.create(100);
+const he = O("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"
+  }
+}), Y = O("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"
+  }
+}), ye = H(function(x, u) {
+  var y = x, {
+    value: a,
+    max: i = 100,
+    variant: t = "primary",
+    size: n = "md",
+    showLabel: s = !1,
+    label: c,
+    "aria-label": f,
+    className: m = ""
+  } = y, p = h(y, [
+    "value",
+    "max",
+    "variant",
+    "size",
+    "showLabel",
+    "label",
+    "aria-label",
+    "className"
+  ]);
+  const N = a === void 0, F = N ? void 0 : Math.min(Math.max(a / i * 100, 0), 100), j = f || (N ? "Loading in progress" : `Progress: ${F == null ? void 0 : F.toFixed(0)}%`);
+  return /* @__PURE__ */ T("div", k(b({ ref: u, className: d("w-full", m) }, p), { children: [
+    s && (c || !N) && /* @__PURE__ */ T(
+      "div",
+      {
+        className: d(
+          "flex",
+          "items-center",
+          "justify-between",
+          l("xs", "mb")
+        ),
+        children: [
+          c && /* @__PURE__ */ o(
+            "span",
+            {
+              className: d(
+                C("bodySmall"),
+                R("label"),
+                "text-fg-primary"
+              ),
+              children: c
+            }
+          ),
+          !N && F !== void 0 && /* @__PURE__ */ T(
+            "span",
+            {
+              className: d(
+                C("bodySmall"),
+                "text-fg-secondary"
+              ),
+              children: [
+                F.toFixed(0),
+                "%"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(
+      "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",
+          he({ size: n, variant: t }),
+          S("full")
+        ),
+        children: N ? /* @__PURE__ */ o(
+          "div",
+          {
+            className: d(
+              "absolute",
+              "top-0",
+              "left-0",
+              "bottom-0",
+              Y({ variant: t }),
+              S("full"),
+              "motion-reduce:animate-none"
+            ),
+            style: {
+              width: "30%",
+              animation: "progress-indeterminate 1.5s ease-in-out infinite"
+            }
+          }
+        ) : /* @__PURE__ */ o(
+          "div",
+          {
+            className: d(
+              "h-full",
+              Y({ variant: t }),
+              S("full"),
+              "transition-all",
+              "duration-300",
+              "ease-out"
+            ),
+            style: {
+              width: `${F}%`
+            },
+            "aria-hidden": "true"
+          }
+        )
+      }
+    )
+  ] }));
+});
+ye.displayName = "Progress";
+function Ee(f) {
+  var m = f, {
+    variant: r = "text",
+    width: a,
+    height: i,
+    lines: t = 1,
+    className: n = "",
+    "aria-label": s
+  } = m, c = h(m, [
+    "variant",
+    "width",
+    "height",
+    "lines",
+    "className",
+    "aria-label"
+  ]);
+  const p = [
+    "motion-safe:animate-pulse",
+    "bg-surface-muted",
+    S("sm")
+  ], u = {
+    text: "h-4",
+    card: "h-32",
+    list: "h-12",
+    circle: S("full")
+  }, x = d(...p, u[r], n), y = {};
+  a && (y.width = a), i && (y.height = i);
+  const N = s || `Loading ${r} content`;
+  return r === "text" && t > 1 ? /* @__PURE__ */ o(
+    "div",
+    k(b({
+      className: l("sm", "space-y"),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": N
+    }, c), {
+      children: Array.from({ length: t }).map((F, j) => /* @__PURE__ */ o(
+        "div",
+        {
+          className: x,
+          style: j === t - 1 ? { width: "75%" } : y,
+          "aria-hidden": "true"
+        },
+        j
+      ))
+    })
+  ) : /* @__PURE__ */ o(
+    "div",
+    b({
+      className: x,
+      style: y,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": N
+    }, c)
+  );
+}
+const we = O("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"
+  }
+}), ve = re(function(c) {
+  var f = c, {
+    size: a = "md",
+    variant: i = "primary",
+    label: t,
+    className: n = ""
+  } = f, s = h(f, [
+    "size",
+    "variant",
+    "label",
+    "className"
+  ]);
+  return /* @__PURE__ */ T(
+    "div",
+    k(b({
+      className: d("inline-flex", "items-center", n),
+      role: "status",
+      "aria-label": t || "Loading",
+      "aria-live": "polite"
+    }, s), {
+      children: [
+        /* @__PURE__ */ o(
+          se,
+          {
+            className: d(we({ size: a, variant: i })),
+            "aria-hidden": "true"
+          }
+        ),
+        t && /* @__PURE__ */ o(
+          "span",
+          {
+            className: d(
+              l("sm", "ml"),
+              C("bodySmall"),
+              "text-fg-secondary",
+              "sr-only"
+            ),
+            children: t
+          }
+        )
+      ]
+    })
+  );
+});
+ve.displayName = "Spinner";
+const ke = {
+  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 $e(p, m) {
+  var u = p, {
+    variant: r = "paragraph",
+    bold: a,
+    italic: i,
+    className: t,
+    as: n,
+    colorRole: s = "neutral",
+    colorShade: c = "dark"
+  } = u, f = h(u, [
+    "variant",
+    "bold",
+    "italic",
+    "className",
+    "as",
+    "colorRole",
+    "colorShade"
+  ]);
+  const x = [];
+  let y;
+  if (n)
+    y = n;
+  else
+    switch (r) {
+      case "heading":
+        y = "h2";
+        break;
+      case "list":
+        y = "li";
+        break;
+      default:
+        y = "p";
+        break;
+    }
+  return r === "heading" ? x.push(I("h2")) : r === "body" || r === "paragraph" ? x.push(I("body")) : r === "bodySmall" ? x.push(I("bodySmall")) : r === "bodyLarge" ? x.push(I("bodyLarge")) : r === "caption" ? x.push(I("caption")) : r === "label" ? x.push(I("label")) : x.push(I("body")), a && x.push("font-bold"), i && x.push("italic"), x.push(ke[s][c]), /* @__PURE__ */ o(y, b({ ref: m, className: d(...x, t) }, f));
+}
+const Ve = H($e), Ne = {
+  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"
+}, Te = Q.forwardRef(
+  (m, f) => {
+    var p = m, {
+      className: r,
+      maxWidth: a = "lg",
+      paddingX: i = "base",
+      paddingY: t = "base",
+      center: n = !0,
+      children: s
+    } = p, c = h(p, [
+      "className",
+      "maxWidth",
+      "paddingX",
+      "paddingY",
+      "center",
+      "children"
+    ]);
+    return /* @__PURE__ */ o(
+      "div",
+      k(b({
+        ref: f,
+        className: d(
+          "w-full",
+          Ne[a],
+          l(i, "px"),
+          l(t, "py"),
+          n && "mx-auto",
+          r
+        )
+      }, c), {
+        children: s
+      })
+    );
+  }
+);
+Te.displayName = "Container";
+const Me = Q.forwardRef(
+  (m, f) => {
+    var p = m, {
+      className: r,
+      spacing: a = "base",
+      align: i = "stretch",
+      justify: t = "start",
+      direction: n = "column",
+      children: s
+    } = p, c = h(p, [
+      "className",
+      "spacing",
+      "align",
+      "justify",
+      "direction",
+      "children"
+    ]);
+    const u = n === "column" ? l(a, "gap-y") : l(a, "gap-x"), x = {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    }, y = {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    };
+    return /* @__PURE__ */ o(
+      "div",
+      k(b({
+        ref: f,
+        className: d(
+          "flex",
+          n === "column" ? "flex-col" : "flex-row",
+          u,
+          x[i],
+          y[t],
+          r
+        )
+      }, c), {
+        children: s
+      })
+    );
+  }
+);
+Me.displayName = "Stack";
+const Se = H(
+  function({ option: a, isHighlighted: i, onSelect: t }, n) {
+    const s = () => {
+      a.disabled || t(a);
+    };
+    return /* @__PURE__ */ T(
+      "div",
+      {
+        ref: n,
+        role: "option",
+        "aria-selected": i,
+        "aria-disabled": a.disabled,
+        onClick: s,
+        className: `
+          flex
+          items-center
+          ${l("sm", "gap")}
+          ${l("sm", "px")}
+          ${l("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__ */ o("span", { className: "flex-shrink-0", children: a.icon }),
+          /* @__PURE__ */ o("span", { className: "flex-1", children: a.label })
+        ]
+      }
+    );
+  }
+);
+Se.displayName = "AutocompleteOption";
+function He(n) {
+  var s = n, {
+    items: r,
+    separator: a = "/",
+    className: i = ""
+  } = s, t = h(s, [
+    "items",
+    "separator",
+    "className"
+  ]);
+  const c = [
+    "flex",
+    "items-center",
+    l("sm", "space-x"),
+    C("bodySmall")
+  ], f = d(...c, i);
+  return /* @__PURE__ */ o("nav", k(b({ "aria-label": "Breadcrumb", className: f }, t), { children: /* @__PURE__ */ o(
+    "ol",
+    {
+      className: d("flex", "items-center", l("sm", "space-x")),
+      children: r.map((m, p) => {
+        const u = p === r.length - 1;
+        return /* @__PURE__ */ T("li", { className: "flex items-center", children: [
+          p > 0 && /* @__PURE__ */ o(
+            "span",
+            {
+              className: d(
+                l("sm", "mx"),
+                "text-fg-tertiary"
+              ),
+              "aria-hidden": "true",
+              children: a
+            }
+          ),
+          u ? /* @__PURE__ */ o(
+            "span",
+            {
+              className: d(
+                "text-fg-primary",
+                R("label")
+              ),
+              "aria-current": "page",
+              children: m.label
+            }
+          ) : m.href ? /* @__PURE__ */ o(
+            "a",
+            {
+              href: m.href,
+              className: d(
+                "inline-flex",
+                "items-center",
+                l("xs", "px"),
+                l("xs", "pt"),
+                "border-b-2",
+                "border-transparent",
+                C("bodySmall"),
+                R("label"),
+                "transition-colors",
+                "text-fg-secondary",
+                "hover:border-line-emphasis",
+                "hover:text-fg-primary"
+              ),
+              children: m.label
+            }
+          ) : /* @__PURE__ */ o("span", { className: "text-fg-secondary", children: m.label })
+        ] }, p);
+      })
+    }
+  ) }));
+}
+function Oe(t) {
+  var n = t, {
+    children: r,
+    className: a = ""
+  } = n, i = h(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ o(
+    "div",
+    k(b({
+      className: `flex flex-col ${l("1.5", "space-y")} ${l("lg", "p")} ${l("base", "pb")} ${a}`
+    }, i), {
+      children: r
+    })
+  );
+}
+function Be(t) {
+  var n = t, {
+    children: r,
+    className: a = ""
+  } = n, i = h(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ o(
+    "div",
+    k(b({
+      className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:${l("sm", "space-x")} ${l("lg", "p")} ${l("base", "pt")} ${a}`
+    }, i), {
+      children: r
+    })
+  );
+}
+function Re(t) {
+  var n = t, {
+    children: r,
+    className: a = ""
+  } = n, i = h(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ o(
+    "div",
+    k(b({
+      className: `
+        ${l("lg", "p")}
+        border-b
+        border-line-default
+        ${a}
+      `
+    }, i), {
+      children: r
+    })
+  );
+}
+function Ue(t) {
+  var n = t, {
+    children: r,
+    className: a = ""
+  } = n, i = h(n, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ o(
+    "div",
+    k(b({
+      className: `
+        ${l("lg", "p")}
+        border-t
+        border-line-default
+        flex
+        justify-end
+        ${l("sm", "gap")}
+        ${a}
+      `
+    }, i), {
+      children: r
+    })
+  );
+}
+function qe({ children: r, className: a }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: d(
+        "flex-shrink-0 flex items-center",
+        l("sm", "gap"),
+        a
+      ),
+      children: r
+    }
+  );
+}
+function Pe({
+  children: r,
+  className: a
+}) {
+  return /* @__PURE__ */ o(
+    "nav",
+    {
+      className: d(
+        "flex-1 flex items-center justify-center",
+        l("base", "gap"),
+        "hidden md:flex",
+        // Hidden on mobile, visible on desktop
+        a
+      ),
+      "aria-label": "Main navigation",
+      children: r
+    }
+  );
+}
+function _e(i) {
+  var t = i, {
+    className: r = ""
+  } = t, a = h(t, [
+    "className"
+  ]);
+  return /* @__PURE__ */ o(
+    "div",
+    b({
+      role: "separator",
+      className: `
+        h-px
+        bg-line-default
+        ${l("sm", "my")}
+        ${r}
+      `
+    }, a)
+  );
+}
+function Ke(t) {
+  var n = t, {
+    orientation: r = "horizontal",
+    className: a = ""
+  } = n, i = h(n, [
+    "orientation",
+    "className"
+  ]);
+  return r === "vertical" ? /* @__PURE__ */ o(
+    "div",
+    b({
+      className: d("w-px", "h-6", "bg-line-default", "mx-auto", a),
+      role: "separator",
+      "aria-orientation": "vertical"
+    }, i)
+  ) : /* @__PURE__ */ o(
+    "div",
+    b({
+      className: d(
+        "w-full",
+        "h-px",
+        "bg-line-default",
+        l("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 Xe(n) {
+  var s = n, { column: r, row: a, className: i = "" } = s, t = h(s, ["column", "row", "className"]);
+  const c = r.key in a ? a[r.key] : void 0;
+  return /* @__PURE__ */ o(
+    "td",
+    k(b({
+      className: `${l("lg", "px")} ${l("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 Ge({
+  items: r,
+  orientation: a = "vertical",
+  className: i = ""
+}) {
+  return a === "horizontal" ? /* @__PURE__ */ o("div", { className: `flex items-start ${i}`, children: r.map((t, n) => {
+    const s = t.status || (n === 0 ? "active" : n < r.findIndex((f) => f.status === "active") ? "completed" : "default"), c = n === r.length - 1;
+    return /* @__PURE__ */ o("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ T("div", { className: "flex flex-col items-center flex-1", children: [
+      /* @__PURE__ */ o(
+        "div",
+        k(b({}, s === "default" ? { "data-marker": "pending" } : {}), {
+          className: `
+                  flex
+                  items-center
+                  justify-center
+                  w-10
+                  h-10
+                  ${S("full")}
+                  border-2
+                  ${s === "completed" ? "bg-success border-success text-fg-inverse" : s === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : s === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                `,
+          children: t.icon || (s === "completed" ? /* @__PURE__ */ o(G, { className: "h-4 w-4" }) : n + 1)
+        })
+      ),
+      !c && /* @__PURE__ */ o(
+        "div",
+        {
+          className: `
+                      w-full
+                      h-0.5
+                      ${l("sm", "mt")}
+                      ${s === "completed" ? "bg-success" : "bg-line-emphasis"}
+                    `
+        }
+      ),
+      /* @__PURE__ */ T(
+        "div",
+        {
+          className: `${l("base", "mt")} text-center ${l("base", "px")}`,
+          children: [
+            t.timestamp && /* @__PURE__ */ o(
+              "p",
+              {
+                className: `text-xs text-fg-tertiary ${l("xs", "mb")}`,
+                children: t.timestamp
+              }
+            ),
+            /* @__PURE__ */ o("h3", { className: "text-sm font-semibold text-fg-primary", children: t.title }),
+            t.description && /* @__PURE__ */ o(
+              "p",
+              {
+                className: `text-xs text-fg-secondary ${l("xs", "mt")}`,
+                children: t.description
+              }
+            ),
+            t.content && /* @__PURE__ */ o("div", { className: l("sm", "mt"), children: t.content })
+          ]
+        }
+      )
+    ] }) }, t.id);
+  }) }) : /* @__PURE__ */ o("div", { className: `${l("none", "space-y")} ${i}`, children: r.map((t, n) => {
+    const s = t.status || (n === 0 ? "active" : n < r.findIndex((f) => f.status === "active") ? "completed" : "default"), c = n === r.length - 1;
+    return /* @__PURE__ */ T(
+      "div",
+      {
+        className: `flex items-start ${l("base", "gap")}`,
+        children: [
+          /* @__PURE__ */ T("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ o(
+              "div",
+              k(b({}, s === "default" ? { "data-marker": "pending" } : {}), {
+                className: `
+                flex
+                items-center
+                justify-center
+                w-10
+                h-10
+                ${S("full")}
+                border-2
+                ${s === "completed" ? "bg-success border-success text-fg-inverse" : s === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : s === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+              `,
+                children: t.icon || (s === "completed" ? /* @__PURE__ */ o(G, { className: "h-4 w-4" }) : n + 1)
+              })
+            ),
+            !c && /* @__PURE__ */ o(
+              "div",
+              {
+                className: `
+                    w-0.5
+                    flex-1
+                    min-h-16
+                    ${l("sm", "mt")}
+                    ${s === "completed" ? "bg-success" : "bg-line-emphasis"}
+                  `
+              }
+            )
+          ] }),
+          /* @__PURE__ */ T("div", { className: `flex-1 ${l("xl", "pb")}`, children: [
+            t.timestamp && /* @__PURE__ */ o(
+              "p",
+              {
+                className: `text-xs text-fg-tertiary ${l("xs", "mb")}`,
+                children: t.timestamp
+              }
+            ),
+            /* @__PURE__ */ o(
+              "h3",
+              {
+                className: `
+                text-base
+                font-semibold
+                ${s === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
+              `,
+                children: t.title
+              }
+            ),
+            t.description && /* @__PURE__ */ o(
+              "p",
+              {
+                className: `text-sm text-fg-secondary ${l("xs", "mt")}`,
+                children: t.description
+              }
+            ),
+            t.content && /* @__PURE__ */ o("div", { className: l("md", "mt"), children: t.content })
+          ] })
+        ]
+      },
+      t.id
+    );
+  }) });
+}
+export {
+  Se as AutocompleteOption,
+  He as Breadcrumb,
+  ue as Chip,
+  Te as Container,
+  Be as DialogFooter,
+  Oe as DialogHeader,
+  Ue as DrawerFooter,
+  Re as DrawerHeader,
+  De as ErrorMessage,
+  qe as HeaderActions,
+  Pe as HeaderNavigation,
+  je as Info,
+  _e as MenuSeparator,
+  Ke as NavbarSeparator,
+  ye as Progress,
+  Ee as Skeleton,
+  ve as Spinner,
+  Me as Stack,
+  Xe as TableCell,
+  Ve as Text,
+  Ge as Timeline
+};
+//# sourceMappingURL=index.js.map