@fabio.caffarello/react-design-system 1.10.5 → 1.11.1

package/dist/tokens-DcAT-mPY.js

@@ -1,2140 +0,0 @@
-var J = Object.defineProperty;
-var ee = (a, t, r) => t in a ? J(a, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : a[t] = r;
-var R = (a, t, r) => ee(a, typeof t != "symbol" ? t + "" : t, r);
-const U = {
-  // Icon sizes
-  icon: {
-    sm: "h-4 w-4",
-    // 16px
-    md: "h-5 w-5",
-    // 20px (default)
-    lg: "h-6 w-6"
-    // 24px
-  },
-  // Text sizes
-  text: {
-    xs: "text-xs",
-    // 12px (group titles)
-    sm: "text-sm",
-    // 14px (items - default)
-    base: "text-base"
-    // 16px
-  },
-  // Spacing
-  spacing: {
-    itemPaddingX: "px-4",
-    // 16px horizontal padding for items
-    itemPaddingY: "py-2",
-    // 8px vertical padding for items
-    nestedIndent: "pl-6",
-    // 24px for nested items (level 1)
-    nestedIndentLevel2: "pl-10",
-    // 40px for nested items (level 2)
-    nestedIndentLevel3: "pl-14",
-    // 56px for nested items (level 3)
-    groupTitlePadding: "px-4 py-2",
-    // Padding for group titles
-    iconMargin: "mr-3"
-    // 12px margin between icon and text
-  },
-  // Colors (using Tailwind classes)
-  colors: {
-    active: {
-      bg: "bg-indigo-50",
-      text: "text-indigo-700",
-      border: "border-indigo-600"
-    },
-    inactive: {
-      text: "text-gray-700",
-      hover: "hover:bg-gray-100 hover:text-gray-900"
-    },
-    groupTitle: "text-gray-500"
-  },
-  // Chevron (for collapsible groups)
-  chevron: {
-    size: "h-3 w-3",
-    // 12px (reduced from h-4 w-4)
-    color: "text-gray-400"
-    // Subtle gray color
-  },
-  // Navigation column (for split sidebar)
-  navigation: {
-    width: {
-      default: "56px",
-      compact: "48px",
-      expanded: "200px"
-    },
-    background: {
-      default: "#fafafa",
-      hover: "#f5f5f5"
-    }
-  },
-  // Split sidebar
-  split: {
-    transition: "transition-all duration-300",
-    collapsedWidth: "0px"
-  },
-  // Content area
-  content: {
-    scrollbar: {
-      width: "thin",
-      color: {
-        thumb: "#cbd5e1",
-        track: "#f1f5f9"
-      }
-    }
-  }
-};
-function ye(a) {
-  return a <= 0 ? U.spacing.itemPaddingX : a === 1 ? U.spacing.nestedIndent : a === 2 ? U.spacing.nestedIndentLevel2 : a === 3 ? U.spacing.nestedIndentLevel3 : `pl-${4 + a * 4}`;
-}
-class d {
-  // 4px base
-  /**
-   * Create a spacing token from scale value
-   */
-  static create(t) {
-    const r = t * this.BASE_UNIT, i = r / 16;
-    return {
-      value: r,
-      rem: `${i}rem`,
-      px: `${r}px`,
-      tailwind: this.getTailwindClass(t)
-    };
-  }
-  /**
-   * Get Tailwind class for spacing value
-   */
-  static getTailwindClass(t) {
-    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
-    }[t] || String(t);
-  }
-}
-R(d, "BASE_UNIT", 4);
-const W = {
-  // Micro spacing (0-14px)
-  none: d.create(0),
-  "0.5": d.create(0.5),
-  // 2px (half-step)
-  xs: d.create(1),
-  // 4px
-  "1.5": d.create(1.5),
-  // 6px (half-step)
-  sm: d.create(2),
-  // 8px
-  "2.5": d.create(2.5),
-  // 10px (half-step)
-  md: d.create(3),
-  // 12px
-  "3.5": d.create(3.5),
-  // 14px (half-step)
-  // Standard spacing (16-32px)
-  base: d.create(4),
-  // 16px
-  lg: d.create(6),
-  // 24px
-  xl: d.create(8),
-  // 32px
-  // Large spacing (40-64px)
-  "2xl": d.create(10),
-  // 40px
-  "3xl": d.create(12),
-  // 48px
-  "4xl": d.create(16),
-  // 64px
-  // Extra large spacing (80px+)
-  "5xl": d.create(20),
-  // 80px
-  "6xl": d.create(24)
-  // 96px
-};
-function ke(a) {
-  return W[a];
-}
-function Te(a, t = "p") {
-  const i = W[a].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-y": "space-y"
-  }[t]}-${i}`;
-}
-class l {
-  /**
-   * Create font size token
-   */
-  static createFontSize(t) {
-    const i = {
-      "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" }
-    }[t];
-    return {
-      value: i.px,
-      rem: `${i.px / 16}rem`,
-      px: `${i.px}px`,
-      tailwind: i.tailwind
-    };
-  }
-  /**
-   * Create line height token
-   */
-  static createLineHeight(t) {
-    const i = {
-      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" }
-    }[t];
-    return {
-      value: i.value,
-      tailwind: i.tailwind
-    };
-  }
-  /**
-   * Create font weight token
-   */
-  static createFontWeight(t) {
-    const i = {
-      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" }
-    }[t];
-    return {
-      value: i.value,
-      tailwind: i.tailwind
-    };
-  }
-  /**
-   * Create complete typography token
-   */
-  static create(t, r = "normal", i = "normal") {
-    return {
-      fontSize: this.createFontSize(t),
-      lineHeight: this.createLineHeight(r),
-      fontWeight: this.createFontWeight(i)
-    };
-  }
-}
-const ve = {
-  sans: {
-    name: "sans",
-    stack: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
-    tailwind: "font-sans"
-  },
-  serif: {
-    name: "serif",
-    stack: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
-    tailwind: "font-serif"
-  },
-  mono: {
-    name: "mono",
-    stack: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-    tailwind: "font-mono"
-  }
-}, Se = {
-  light: l.createFontWeight("light"),
-  normal: l.createFontWeight("normal"),
-  medium: l.createFontWeight("medium"),
-  semibold: l.createFontWeight("semibold"),
-  bold: l.createFontWeight("bold")
-}, A = {
-  // Headings
-  h1: l.create("4xl", "tight", "bold"),
-  h2: l.create("3xl", "tight", "bold"),
-  h3: l.create("2xl", "snug", "semibold"),
-  h4: l.create("xl", "snug", "semibold"),
-  h5: l.create("lg", "normal", "medium"),
-  h6: l.create("base", "normal", "medium"),
-  // Body text
-  body: l.create("base", "relaxed", "normal"),
-  bodySmall: l.create("sm", "relaxed", "normal"),
-  bodyLarge: l.create("lg", "relaxed", "normal"),
-  // UI elements
-  label: l.create("sm", "normal", "medium"),
-  caption: l.create("xs", "normal", "normal"),
-  button: l.create("base", "normal", "medium")
-};
-function Ee(a) {
-  return A[a];
-}
-function Fe(a) {
-  const t = A[a];
-  return `${t.fontSize.tailwind} ${t.lineHeight.tailwind} ${t.fontWeight.tailwind}`;
-}
-function $e(a) {
-  return A[a].fontSize.tailwind;
-}
-function Le(a) {
-  return l.createFontSize(a).tailwind;
-}
-function Ae(a) {
-  return A[a].fontWeight.tailwind;
-}
-function Ce(a) {
-  return l.createFontWeight(a).tailwind;
-}
-function Oe(a) {
-  return A[a].lineHeight.tailwind;
-}
-const De = [
-  50,
-  100,
-  200,
-  300,
-  400,
-  500,
-  600,
-  700,
-  800,
-  900,
-  950
-];
-function e(a, t, r) {
-  const i = te(a), n = ae(a);
-  return {
-    hex: a,
-    rgb: i,
-    hsl: n,
-    cssVar: `var(--color-${t}-${r})`,
-    tailwind: `${t}-${r}`
-  };
-}
-function te(a) {
-  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
-  return t ? `${parseInt(t[1], 16)}, ${parseInt(t[2], 16)}, ${parseInt(t[3], 16)}` : "0, 0, 0";
-}
-function ae(a) {
-  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
-  if (!t) return "0, 0%, 0%";
-  const r = parseInt(t[1], 16) / 255, i = parseInt(t[2], 16) / 255, n = parseInt(t[3], 16) / 255, o = Math.max(r, i, n), s = Math.min(r, i, n);
-  let c = 0, M = 0;
-  const u = (o + s) / 2;
-  if (o !== s) {
-    const x = o - s;
-    switch (M = u > 0.5 ? x / (2 - o - s) : x / (o + s), o) {
-      case r:
-        c = ((i - n) / x + (i < n ? 6 : 0)) / 6;
-        break;
-      case i:
-        c = ((n - r) / x + 2) / 6;
-        break;
-      case n:
-        c = ((r - i) / x + 4) / 6;
-        break;
-    }
-  }
-  return `${Math.round(c * 360)}, ${Math.round(M * 100)}%, ${Math.round(u * 100)}%`;
-}
-const k = {
-  50: e("#eef2ff", "indigo", 50),
-  100: e("#e0e7ff", "indigo", 100),
-  200: e("#c7d2fe", "indigo", 200),
-  300: e("#a5b4fc", "indigo", 300),
-  400: e("#818cf8", "indigo", 400),
-  500: e("#6366f1", "indigo", 500),
-  600: e("#4f46e5", "indigo", 600),
-  700: e("#4338ca", "indigo", 700),
-  800: e("#3730a3", "indigo", 800),
-  900: e("#312e81", "indigo", 900),
-  950: e("#1e1b4b", "indigo", 950)
-}, T = {
-  50: e("#f5f3ff", "violet", 50),
-  100: e("#ede9fe", "violet", 100),
-  200: e("#ddd6fe", "violet", 200),
-  300: e("#c4b5fd", "violet", 300),
-  400: e("#a78bfa", "violet", 400),
-  500: e("#8b5cf6", "violet", 500),
-  600: e("#7c3aed", "violet", 600),
-  700: e("#6d28d9", "violet", 700),
-  800: e("#5b21b6", "violet", 800),
-  900: e("#4c1d95", "violet", 900),
-  950: e("#2e1065", "violet", 950)
-}, v = {
-  50: e("#ecfeff", "cyan", 50),
-  100: e("#cffafe", "cyan", 100),
-  200: e("#a5f3fc", "cyan", 200),
-  300: e("#67e8f9", "cyan", 300),
-  400: e("#22d3ee", "cyan", 400),
-  500: e("#06b6d4", "cyan", 500),
-  600: e("#0891b2", "cyan", 600),
-  700: e("#0e7490", "cyan", 700),
-  800: e("#155e75", "cyan", 800),
-  900: e("#164e63", "cyan", 900),
-  950: e("#083344", "cyan", 950)
-}, S = {
-  50: e("#f8fafc", "slate", 50),
-  100: e("#f1f5f9", "slate", 100),
-  200: e("#e2e8f0", "slate", 200),
-  300: e("#cbd5e1", "slate", 300),
-  400: e("#94a3b8", "slate", 400),
-  500: e("#64748b", "slate", 500),
-  600: e("#475569", "slate", 600),
-  700: e("#334155", "slate", 700),
-  800: e("#1e293b", "slate", 800),
-  900: e("#0f172a", "slate", 900),
-  950: e("#020617", "slate", 950)
-}, re = {
-  50: e("#f9fafb", "gray", 50),
-  100: e("#f3f4f6", "gray", 100),
-  200: e("#e5e7eb", "gray", 200),
-  300: e("#d1d5db", "gray", 300),
-  400: e("#9ca3af", "gray", 400),
-  500: e("#6b7280", "gray", 500),
-  600: e("#4b5563", "gray", 600),
-  700: e("#374151", "gray", 700),
-  800: e("#1f2937", "gray", 800),
-  900: e("#111827", "gray", 900),
-  950: e("#030712", "gray", 950)
-}, E = {
-  50: e("#ecfdf5", "emerald", 50),
-  100: e("#d1fae5", "emerald", 100),
-  200: e("#a7f3d0", "emerald", 200),
-  300: e("#6ee7b7", "emerald", 300),
-  400: e("#34d399", "emerald", 400),
-  500: e("#10b981", "emerald", 500),
-  600: e("#059669", "emerald", 600),
-  700: e("#047857", "emerald", 700),
-  800: e("#065f46", "emerald", 800),
-  900: e("#064e3b", "emerald", 900),
-  950: e("#022c22", "emerald", 950)
-}, ie = {
-  50: e("#f0fdf4", "green", 50),
-  100: e("#dcfce7", "green", 100),
-  200: e("#bbf7d0", "green", 200),
-  300: e("#86efac", "green", 300),
-  400: e("#4ade80", "green", 400),
-  500: e("#22c55e", "green", 500),
-  600: e("#16a34a", "green", 600),
-  700: e("#15803d", "green", 700),
-  800: e("#166534", "green", 800),
-  900: e("#14532d", "green", 900),
-  950: e("#052e16", "green", 950)
-}, F = {
-  50: e("#fffbeb", "amber", 50),
-  100: e("#fef3c7", "amber", 100),
-  200: e("#fde68a", "amber", 200),
-  300: e("#fcd34d", "amber", 300),
-  400: e("#fbbf24", "amber", 400),
-  500: e("#f59e0b", "amber", 500),
-  600: e("#d97706", "amber", 600),
-  700: e("#b45309", "amber", 700),
-  800: e("#92400e", "amber", 800),
-  900: e("#78350f", "amber", 900),
-  950: e("#451a03", "amber", 950)
-}, ne = {
-  50: e("#fefce8", "yellow", 50),
-  100: e("#fef9c3", "yellow", 100),
-  200: e("#fef08a", "yellow", 200),
-  300: e("#fde047", "yellow", 300),
-  400: e("#facc15", "yellow", 400),
-  500: e("#eab308", "yellow", 500),
-  600: e("#ca8a04", "yellow", 600),
-  700: e("#a16207", "yellow", 700),
-  800: e("#854d0e", "yellow", 800),
-  900: e("#713f12", "yellow", 900),
-  950: e("#422006", "yellow", 950)
-}, oe = {
-  50: e("#fff7ed", "orange", 50),
-  100: e("#ffedd5", "orange", 100),
-  200: e("#fed7aa", "orange", 200),
-  300: e("#fdba74", "orange", 300),
-  400: e("#fb923c", "orange", 400),
-  500: e("#f97316", "orange", 500),
-  600: e("#ea580c", "orange", 600),
-  700: e("#c2410c", "orange", 700),
-  800: e("#9a3412", "orange", 800),
-  900: e("#7c2d12", "orange", 900),
-  950: e("#431407", "orange", 950)
-}, $ = {
-  50: e("#fff1f2", "rose", 50),
-  100: e("#ffe4e6", "rose", 100),
-  200: e("#fecdd3", "rose", 200),
-  300: e("#fda4af", "rose", 300),
-  400: e("#fb7185", "rose", 400),
-  500: e("#f43f5e", "rose", 500),
-  600: e("#e11d48", "rose", 600),
-  700: e("#be123c", "rose", 700),
-  800: e("#9f1239", "rose", 800),
-  900: e("#881337", "rose", 900),
-  950: e("#4c0519", "rose", 950)
-}, se = {
-  50: e("#fef2f2", "red", 50),
-  100: e("#fee2e2", "red", 100),
-  200: e("#fecaca", "red", 200),
-  300: e("#fca5a5", "red", 300),
-  400: e("#f87171", "red", 400),
-  500: e("#ef4444", "red", 500),
-  600: e("#dc2626", "red", 600),
-  700: e("#b91c1c", "red", 700),
-  800: e("#991b1b", "red", 800),
-  900: e("#7f1d1d", "red", 900),
-  950: e("#450a0a", "red", 950)
-}, L = {
-  50: e("#f0f9ff", "sky", 50),
-  100: e("#e0f2fe", "sky", 100),
-  200: e("#bae6fd", "sky", 200),
-  300: e("#7dd3fc", "sky", 300),
-  400: e("#38bdf8", "sky", 400),
-  500: e("#0ea5e9", "sky", 500),
-  600: e("#0284c7", "sky", 600),
-  700: e("#0369a1", "sky", 700),
-  800: e("#075985", "sky", 800),
-  900: e("#0c4a6e", "sky", 900),
-  950: e("#082f49", "sky", 950)
-}, ce = {
-  50: e("#eff6ff", "blue", 50),
-  100: e("#dbeafe", "blue", 100),
-  200: e("#bfdbfe", "blue", 200),
-  300: e("#93c5fd", "blue", 300),
-  400: e("#60a5fa", "blue", 400),
-  500: e("#3b82f6", "blue", 500),
-  600: e("#2563eb", "blue", 600),
-  700: e("#1d4ed8", "blue", 700),
-  800: e("#1e40af", "blue", 800),
-  900: e("#1e3a8a", "blue", 900),
-  950: e("#172554", "blue", 950)
-}, le = {
-  50: e("#fdf4ff", "fuchsia", 50),
-  100: e("#fae8ff", "fuchsia", 100),
-  200: e("#f5d0fe", "fuchsia", 200),
-  300: e("#f0abfc", "fuchsia", 300),
-  400: e("#e879f9", "fuchsia", 400),
-  500: e("#d946ef", "fuchsia", 500),
-  600: e("#c026d3", "fuchsia", 600),
-  700: e("#a21caf", "fuchsia", 700),
-  800: e("#86198f", "fuchsia", 800),
-  900: e("#701a75", "fuchsia", 900),
-  950: e("#4a044e", "fuchsia", 950)
-}, de = {
-  50: e("#fdf2f8", "pink", 50),
-  100: e("#fce7f3", "pink", 100),
-  200: e("#fbcfe8", "pink", 200),
-  300: e("#f9a8d4", "pink", 300),
-  400: e("#f472b6", "pink", 400),
-  500: e("#ec4899", "pink", 500),
-  600: e("#db2777", "pink", 600),
-  700: e("#be185d", "pink", 700),
-  800: e("#9d174d", "pink", 800),
-  900: e("#831843", "pink", 900),
-  950: e("#500724", "pink", 950)
-}, fe = {
-  50: e("#faf5ff", "purple", 50),
-  100: e("#f3e8ff", "purple", 100),
-  200: e("#e9d5ff", "purple", 200),
-  300: e("#d8b4fe", "purple", 300),
-  400: e("#c084fc", "purple", 400),
-  500: e("#a855f7", "purple", 500),
-  600: e("#9333ea", "purple", 600),
-  700: e("#7e22ce", "purple", 700),
-  800: e("#6b21a8", "purple", 800),
-  900: e("#581c87", "purple", 900),
-  950: e("#3b0764", "purple", 950)
-}, ge = {
-  50: e("#f0fdfa", "teal", 50),
-  100: e("#ccfbf1", "teal", 100),
-  200: e("#99f6e4", "teal", 200),
-  300: e("#5eead4", "teal", 300),
-  400: e("#2dd4bf", "teal", 400),
-  500: e("#14b8a6", "teal", 500),
-  600: e("#0d9488", "teal", 600),
-  700: e("#0f766e", "teal", 700),
-  800: e("#115e59", "teal", 800),
-  900: e("#134e4a", "teal", 900),
-  950: e("#042f2e", "teal", 950)
-}, he = {
-  50: e("#f7fee7", "lime", 50),
-  100: e("#ecfccb", "lime", 100),
-  200: e("#d9f99d", "lime", 200),
-  300: e("#bef264", "lime", 300),
-  400: e("#a3e635", "lime", 400),
-  500: e("#84cc16", "lime", 500),
-  600: e("#65a30d", "lime", 600),
-  700: e("#4d7c0f", "lime", 700),
-  800: e("#3f6212", "lime", 800),
-  900: e("#365314", "lime", 900),
-  950: e("#1a2e05", "lime", 950)
-}, G = {
-  indigo: k,
-  violet: T,
-  cyan: v,
-  slate: S,
-  gray: re,
-  emerald: E,
-  green: ie,
-  amber: F,
-  yellow: ne,
-  orange: oe,
-  rose: $,
-  red: se,
-  sky: L,
-  blue: ce,
-  fuchsia: le,
-  pink: de,
-  purple: fe,
-  teal: ge,
-  lime: he
-};
-function I(a, t) {
-  return G[a][t];
-}
-function Ie(a) {
-  return G[a];
-}
-const V = {
-  primary: {
-    light: k[400],
-    DEFAULT: k[500],
-    dark: k[600],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  secondary: {
-    light: T[400],
-    DEFAULT: T[500],
-    dark: T[600],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  accent: {
-    light: v[400],
-    DEFAULT: v[500],
-    dark: v[600],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  success: {
-    light: E[400],
-    DEFAULT: E[500],
-    dark: E[600],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  warning: {
-    light: F[400],
-    DEFAULT: F[500],
-    dark: F[600],
-    contrast: {
-      hex: "#000000",
-      rgb: "0, 0, 0",
-      hsl: "0, 0%, 0%",
-      cssVar: "var(--color-black)",
-      tailwind: "black"
-    }
-  },
-  error: {
-    light: $[400],
-    DEFAULT: $[500],
-    dark: $[600],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  info: {
-    light: L[400],
-    DEFAULT: L[500],
-    dark: L[600],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  neutral: {
-    light: S[100],
-    DEFAULT: S[500],
-    dark: S[700],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  }
-}, H = {
-  primary: {
-    light: k[500],
-    DEFAULT: k[400],
-    dark: k[300],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  secondary: {
-    light: T[500],
-    DEFAULT: T[400],
-    dark: T[300],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  accent: {
-    light: v[500],
-    DEFAULT: v[400],
-    dark: v[300],
-    contrast: {
-      hex: "#000000",
-      rgb: "0, 0, 0",
-      hsl: "0, 0%, 0%",
-      cssVar: "var(--color-black)",
-      tailwind: "black"
-    }
-  },
-  success: {
-    light: E[500],
-    DEFAULT: E[400],
-    dark: E[300],
-    contrast: {
-      hex: "#000000",
-      rgb: "0, 0, 0",
-      hsl: "0, 0%, 0%",
-      cssVar: "var(--color-black)",
-      tailwind: "black"
-    }
-  },
-  warning: {
-    light: F[500],
-    DEFAULT: F[400],
-    dark: F[300],
-    contrast: {
-      hex: "#000000",
-      rgb: "0, 0, 0",
-      hsl: "0, 0%, 0%",
-      cssVar: "var(--color-black)",
-      tailwind: "black"
-    }
-  },
-  error: {
-    light: $[500],
-    DEFAULT: $[400],
-    dark: $[300],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  info: {
-    light: L[500],
-    DEFAULT: L[400],
-    dark: L[300],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  },
-  neutral: {
-    light: S[700],
-    DEFAULT: S[400],
-    dark: S[300],
-    contrast: {
-      hex: "#ffffff",
-      rgb: "255, 255, 255",
-      hsl: "0, 0%, 100%",
-      cssVar: "var(--color-white)",
-      tailwind: "white"
-    }
-  }
-}, Me = V;
-function N(a, t = "DEFAULT", r = "light") {
-  return (r === "dark" ? H : V)[a][t];
-}
-function Re(a, t = "light") {
-  return (t === "dark" ? H : V)[a];
-}
-function Ue(a, t, r = {}) {
-  const { format: i = "hex", opacity: n } = r, o = I(a, t);
-  let s;
-  switch (i) {
-    case "rgb":
-      s = n !== void 0 ? `rgba(${o.rgb}, ${n})` : `rgb(${o.rgb})`;
-      break;
-    case "hsl":
-      s = n !== void 0 ? `hsla(${o.hsl}, ${n})` : `hsl(${o.hsl})`;
-      break;
-    case "cssVar":
-      s = o.cssVar;
-      break;
-    case "tailwind":
-      s = o.tailwind;
-      break;
-    case "hex":
-    default:
-      s = o.hex;
-  }
-  return s;
-}
-function Ne(a, t = "DEFAULT", r = {}) {
-  const { format: i = "hex", opacity: n } = r, o = N(a, t);
-  let s;
-  switch (i) {
-    case "rgb":
-      s = n !== void 0 ? `rgba(${o.rgb}, ${n})` : `rgb(${o.rgb})`;
-      break;
-    case "hsl":
-      s = n !== void 0 ? `hsla(${o.hsl}, ${n})` : `hsl(${o.hsl})`;
-      break;
-    case "cssVar":
-      s = o.cssVar;
-      break;
-    case "tailwind":
-      s = o.tailwind;
-      break;
-    case "hex":
-    default:
-      s = o.hex;
-  }
-  return s;
-}
-function _e(a, t, r = {}) {
-  const {
-    type: i = "text",
-    hover: n = !1,
-    focus: o = !1,
-    active: s = !1
-  } = r, c = I(a, t), u = [`${i}-${c.tailwind}`];
-  return n && u.push(`hover:${i}-${c.tailwind}`), o && u.push(`focus:${i}-${c.tailwind}`), s && u.push(`active:${i}-${c.tailwind}`), u.join(" ");
-}
-function We(a, t = "DEFAULT", r = {}) {
-  const {
-    type: i = "text",
-    hover: n = !1,
-    focus: o = !1,
-    active: s = !1
-  } = r, c = N(a, t), u = [`${i}-${c.tailwind}`];
-  if (n) {
-    const x = N(
-      a,
-      t === "DEFAULT" ? "dark" : "DEFAULT"
-    );
-    u.push(`hover:${i}-${x.tailwind}`);
-  }
-  if (o && u.push(`focus:${i}-${c.tailwind}`), s) {
-    const x = N(a, "dark");
-    u.push(`active:${i}-${x.tailwind}`);
-  }
-  return u.join(" ");
-}
-function Ke(a, t, r = "bg") {
-  const i = I(a, t);
-  return `hover:${r}-${i.tailwind}`;
-}
-function Be(a, t, r = "border") {
-  const i = I(a, t);
-  return `focus:${r}-${i.tailwind}`;
-}
-function Pe(a, t) {
-  return `focus:ring-${I(a, t).tailwind}`;
-}
-function ze(a, t) {
-  return `rgba(${a.rgb}, ${t})`;
-}
-function ue(a) {
-  const t = B(a);
-  return t ? 0.299 * t[0] + 0.587 * t[1] + 0.114 * t[2] > 128 : !0;
-}
-function Ve(a) {
-  return ue(a) ? "#000000" : "#ffffff";
-}
-function B(a) {
-  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
-  return t ? [
-    parseInt(t[1], 16),
-    parseInt(t[2], 16),
-    parseInt(t[3], 16)
-  ] : null;
-}
-function Z(a, t, r = 0.5) {
-  const i = B(a), n = B(t);
-  if (!i || !n) return a;
-  const o = Math.round(i[0] * (1 - r) + n[0] * r), s = Math.round(i[1] * (1 - r) + n[1] * r), c = Math.round(i[2] * (1 - r) + n[2] * r);
-  return `#${((1 << 24) + (o << 16) + (s << 8) + c).toString(16).slice(1)}`;
-}
-function Ge(a, t) {
-  return Z(a, "#ffffff", t / 100);
-}
-function He(a, t) {
-  return Z(a, "#000000", t / 100);
-}
-const Ze = {
-  primary: {
-    name: "indigo",
-    light: 400,
-    default: 500,
-    dark: 600
-  },
-  secondary: {
-    name: "violet",
-    light: 400,
-    default: 500,
-    dark: 600
-  },
-  accent: {
-    name: "cyan",
-    light: 400,
-    default: 500,
-    dark: 600
-  }
-};
-class C {
-  /**
-   * Create breakpoint token
-   */
-  static create(t) {
-    const i = {
-      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" }
-    }[t];
-    return {
-      name: t,
-      minWidth: i.minWidth,
-      px: `${i.minWidth}px`,
-      rem: `${i.minWidth / 16}rem`,
-      tailwind: i.tailwind
-    };
-  }
-}
-const K = {
-  sm: C.create("sm"),
-  md: C.create("md"),
-  lg: C.create("lg"),
-  xl: C.create("xl"),
-  "2xl": C.create("2xl")
-};
-function je(a) {
-  return K[a];
-}
-function Ye(a, t = "min") {
-  const r = K[a];
-  return `@media (${t === "min" ? "min-width" : "max-width"}: ${r.px})`;
-}
-class _ {
-  generatePrimary() {
-    return {
-      light: { hex: "#818cf8", rgb: "129, 140, 248", tailwind: "indigo-400" },
-      DEFAULT: { hex: "#6366f1", rgb: "99, 102, 241", tailwind: "indigo-500" },
-      dark: { hex: "#4f46e5", rgb: "79, 70, 229", tailwind: "indigo-600" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateSecondary() {
-    return {
-      light: { hex: "#f9a8d4", rgb: "249, 168, 212", tailwind: "pink-300" },
-      DEFAULT: { hex: "#ec4899", rgb: "236, 72, 153", tailwind: "pink-500" },
-      dark: { hex: "#db2777", rgb: "219, 39, 119", tailwind: "pink-600" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateSuccess() {
-    return {
-      light: { hex: "#86efac", rgb: "134, 239, 172", tailwind: "green-300" },
-      DEFAULT: { hex: "#22c55e", rgb: "34, 197, 94", tailwind: "green-500" },
-      dark: { hex: "#16a34a", rgb: "22, 163, 74", tailwind: "green-600" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateWarning() {
-    return {
-      light: { hex: "#fde047", rgb: "253, 224, 71", tailwind: "yellow-300" },
-      DEFAULT: { hex: "#eab308", rgb: "234, 179, 8", tailwind: "yellow-500" },
-      dark: { hex: "#ca8a04", rgb: "202, 138, 4", tailwind: "yellow-600" },
-      contrast: { hex: "#000000", rgb: "0, 0, 0", tailwind: "black" }
-    };
-  }
-  generateError() {
-    return {
-      light: { hex: "#fca5a5", rgb: "252, 165, 165", tailwind: "red-300" },
-      DEFAULT: { hex: "#ef4444", rgb: "239, 68, 68", tailwind: "red-500" },
-      dark: { hex: "#dc2626", rgb: "220, 38, 38", tailwind: "red-600" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateInfo() {
-    return {
-      light: { hex: "#93c5fd", rgb: "147, 197, 253", tailwind: "blue-300" },
-      DEFAULT: { hex: "#3b82f6", rgb: "59, 130, 246", tailwind: "blue-500" },
-      dark: { hex: "#2563eb", rgb: "37, 99, 235", tailwind: "blue-600" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateNeutral() {
-    return {
-      light: { hex: "#f3f4f6", rgb: "243, 244, 246", tailwind: "gray-100" },
-      DEFAULT: { hex: "#6b7280", rgb: "107, 114, 128", tailwind: "gray-500" },
-      dark: { hex: "#374151", rgb: "55, 65, 81", tailwind: "gray-700" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-}
-class P {
-  generatePrimary() {
-    return {
-      light: { hex: "#6366f1", rgb: "99, 102, 241", tailwind: "indigo-500" },
-      DEFAULT: { hex: "#818cf8", rgb: "129, 140, 248", tailwind: "indigo-400" },
-      dark: { hex: "#a5b4fc", rgb: "165, 180, 252", tailwind: "indigo-300" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateSecondary() {
-    return {
-      light: { hex: "#ec4899", rgb: "236, 72, 153", tailwind: "pink-500" },
-      DEFAULT: { hex: "#f472b6", rgb: "244, 114, 182", tailwind: "pink-400" },
-      dark: { hex: "#f9a8d4", rgb: "249, 168, 212", tailwind: "pink-300" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateSuccess() {
-    return {
-      light: { hex: "#22c55e", rgb: "34, 197, 94", tailwind: "green-500" },
-      DEFAULT: { hex: "#4ade80", rgb: "74, 222, 128", tailwind: "green-400" },
-      dark: { hex: "#86efac", rgb: "134, 239, 172", tailwind: "green-300" },
-      contrast: { hex: "#000000", rgb: "0, 0, 0", tailwind: "black" }
-    };
-  }
-  generateWarning() {
-    return {
-      light: { hex: "#eab308", rgb: "234, 179, 8", tailwind: "yellow-500" },
-      DEFAULT: { hex: "#facc15", rgb: "250, 204, 21", tailwind: "yellow-400" },
-      dark: { hex: "#fde047", rgb: "253, 224, 71", tailwind: "yellow-300" },
-      contrast: { hex: "#000000", rgb: "0, 0, 0", tailwind: "black" }
-    };
-  }
-  generateError() {
-    return {
-      light: { hex: "#ef4444", rgb: "239, 68, 68", tailwind: "red-500" },
-      DEFAULT: { hex: "#f87171", rgb: "248, 113, 113", tailwind: "red-400" },
-      dark: { hex: "#fca5a5", rgb: "252, 165, 165", tailwind: "red-300" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateInfo() {
-    return {
-      light: { hex: "#3b82f6", rgb: "59, 130, 246", tailwind: "blue-500" },
-      DEFAULT: { hex: "#60a5fa", rgb: "96, 165, 250", tailwind: "blue-400" },
-      dark: { hex: "#93c5fd", rgb: "147, 197, 253", tailwind: "blue-300" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-  generateNeutral() {
-    return {
-      light: { hex: "#374151", rgb: "55, 65, 81", tailwind: "gray-700" },
-      DEFAULT: { hex: "#9ca3af", rgb: "156, 163, 175", tailwind: "gray-400" },
-      dark: { hex: "#d1d5db", rgb: "209, 213, 219", tailwind: "gray-300" },
-      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
-    };
-  }
-}
-class z {
-  constructor(t) {
-    R(this, "strategy");
-    this.strategy = t;
-  }
-  /**
-   * Set color strategy
-   */
-  setStrategy(t) {
-    this.strategy = t;
-  }
-  /**
-   * Generate semantic color palette
-   */
-  generatePalette() {
-    return {
-      primary: this.strategy.generatePrimary(),
-      secondary: this.strategy.generateSecondary(),
-      success: this.strategy.generateSuccess(),
-      warning: this.strategy.generateWarning(),
-      error: this.strategy.generateError(),
-      info: this.strategy.generateInfo(),
-      neutral: this.strategy.generateNeutral()
-    };
-  }
-}
-const j = (() => {
-  let a, t;
-  try {
-    a = new z(new _()).generatePalette();
-  } catch (r) {
-    console.error("Failed to initialize COLOR_TOKENS_LIGHT:", r);
-    const i = new _();
-    a = {
-      primary: i.generatePrimary(),
-      secondary: i.generateSecondary(),
-      success: i.generateSuccess(),
-      warning: i.generateWarning(),
-      error: i.generateError(),
-      info: i.generateInfo(),
-      neutral: i.generateNeutral()
-    };
-  }
-  try {
-    t = new z(new P()).generatePalette();
-  } catch (r) {
-    console.error("Failed to initialize COLOR_TOKENS_DARK:", r), t = a;
-  }
-  return { light: a, dark: t };
-})(), g = j.light, pe = j.dark, O = g;
-function qe(a, t = "DEFAULT") {
-  if (!O || typeof O != "object")
-    return console.warn("COLOR_TOKENS is not initialized, using fallback"), { hex: "#6b7280", rgb: "107, 114, 128", tailwind: "gray-500" };
-  const r = O[a];
-  if (!r || typeof r != "object")
-    return console.warn(
-      `Color role "${a}" not found in COLOR_TOKENS, using fallback`
-    ), { hex: "#6b7280", rgb: "107, 114, 128", tailwind: "gray-500" };
-  const i = r[t];
-  return !i || typeof i != "object" ? (console.warn(
-    `Color shade "${t}" not found for role "${a}", using fallback`
-  ), { hex: "#6b7280", rgb: "107, 114, 128", tailwind: "gray-500" }) : i;
-}
-function Y(a, t = "DEFAULT", r = "text") {
-  if (!O || typeof O != "object")
-    return console.warn("COLOR_TOKENS is not initialized, using fallback"), `${r}-gray-500`;
-  const i = O[a];
-  if (!i || typeof i != "object")
-    return console.warn(
-      `Color role "${a}" not found in COLOR_TOKENS, using fallback`
-    ), `${r}-gray-500`;
-  const n = i[t];
-  return !n || typeof n != "object" || !n.tailwind ? (console.warn(
-    `Color shade "${t}" not found for role "${a}", using fallback`
-  ), `${r}-gray-500`) : `${r}-${n.tailwind}`;
-}
-function Xe(a, t = "DEFAULT", r = "bg") {
-  return `hover:${Y(a, t, r)}`;
-}
-function Qe(a, t = "DEFAULT", r = "border") {
-  return `focus:${Y(a, t, r)}`;
-}
-function Je(a, t = "DEFAULT") {
-  var i;
-  return ((i = {
-    primary: {
-      light: "focus:ring-indigo-400",
-      DEFAULT: "focus:ring-indigo-500",
-      dark: "focus:ring-indigo-600"
-    },
-    secondary: {
-      light: "focus:ring-pink-300",
-      DEFAULT: "focus:ring-pink-500",
-      dark: "focus:ring-pink-600"
-    },
-    success: {
-      light: "focus:ring-green-300",
-      DEFAULT: "focus:ring-green-500",
-      dark: "focus:ring-green-600"
-    },
-    warning: {
-      light: "focus:ring-yellow-300",
-      DEFAULT: "focus:ring-yellow-500",
-      dark: "focus:ring-yellow-600"
-    },
-    error: {
-      light: "focus:ring-red-300",
-      DEFAULT: "focus:ring-red-500",
-      dark: "focus:ring-red-600"
-    },
-    info: {
-      light: "focus:ring-blue-300",
-      DEFAULT: "focus:ring-blue-500",
-      dark: "focus:ring-blue-600"
-    },
-    neutral: {
-      light: "focus:ring-gray-200",
-      DEFAULT: "focus:ring-gray-500",
-      dark: "focus:ring-gray-700"
-    }
-  }[a]) == null ? void 0 : i[t]) || "focus:ring-indigo-500";
-}
-class y {
-  /**
-   * Create a shadow token
-   */
-  static create(t) {
-    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"
-      }
-    }[t];
-  }
-}
-const q = {
-  none: y.create("none"),
-  sm: y.create("sm"),
-  md: y.create("md"),
-  lg: y.create("lg"),
-  xl: y.create("xl"),
-  "2xl": y.create("2xl"),
-  inner: y.create("inner")
-};
-function et(a) {
-  return q[a];
-}
-function tt(a) {
-  return q[a].tailwind;
-}
-class m {
-  /**
-   * Create a radius token
-   */
-  static create(t) {
-    const i = {
-      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"
-      }
-    }[t];
-    return {
-      value: i.px,
-      rem: `${i.px / 16}rem`,
-      px: `${i.px}px`,
-      tailwind: i.tailwind,
-      description: i.description
-    };
-  }
-}
-const X = {
-  none: m.create("none"),
-  sm: m.create("sm"),
-  md: m.create("md"),
-  lg: m.create("lg"),
-  xl: m.create("xl"),
-  "2xl": m.create("2xl"),
-  "3xl": m.create("3xl"),
-  full: m.create("full")
-};
-function at(a) {
-  return X[a];
-}
-function rt(a) {
-  return X[a].tailwind;
-}
-class w {
-  /**
-   * Create a border width token
-   */
-  static createWidth(t) {
-    const i = {
-      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"
-      }
-    }[t];
-    return {
-      value: i.px,
-      px: `${i.px}px`,
-      tailwind: i.tailwind
-    };
-  }
-  /**
-   * Create a complete border token
-   */
-  static create(t, r = "solid") {
-    return {
-      width: this.createWidth(t),
-      style: r,
-      description: `${t} ${r} border`
-    };
-  }
-}
-const be = {
-  none: w.create("none"),
-  thin: w.create("thin"),
-  base: w.create("base"),
-  medium: w.create("medium"),
-  thick: w.create("thick"),
-  // Dashed variants
-  thinDashed: w.create("thin", "dashed"),
-  baseDashed: w.create("base", "dashed"),
-  // Dotted variants
-  thinDotted: w.create("thin", "dotted"),
-  baseDotted: w.create("base", "dotted")
-};
-function it(a) {
-  return be[a];
-}
-function we(a) {
-  return w.createWidth(a).tailwind;
-}
-function xe(a) {
-  return {
-    solid: "border-solid",
-    dashed: "border-dashed",
-    dotted: "border-dotted"
-  }[a];
-}
-function nt(a, t = "solid") {
-  return `${we(a)} ${xe(t)}`;
-}
-class b {
-  /**
-   * Create an animation token
-   */
-  static create(t, r = "ease-in-out") {
-    const i = {
-      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: i[t],
-      easing: n[r]
-    };
-  }
-  /**
-   * Create a transition token
-   */
-  static createTransition(t, r = "base", i = "ease-in-out") {
-    const n = this.create(r, i), o = Array.isArray(t) ? t.join(", ") : t, s = [
-      n.duration.tailwind,
-      n.easing.tailwind
-    ].join(" ");
-    return {
-      property: o,
-      duration: n.duration.value,
-      timingFunction: n.easing.value,
-      tailwind: s
-    };
-  }
-}
-const ot = {
-  fast: b.create("fast"),
-  base: b.create("base"),
-  slow: b.create("slow"),
-  slower: b.create("slower"),
-  // Common transitions
-  colors: b.createTransition(
-    ["color", "background-color", "border-color"],
-    "base"
-  ),
-  opacity: b.createTransition("opacity", "fast"),
-  transform: b.createTransition("transform", "base"),
-  all: b.createTransition("all", "base")
-};
-function st(a, t) {
-  return b.create(a, t);
-}
-function ct(a, t = "ease-in-out") {
-  const r = b.create(a, t);
-  return `${r.duration.tailwind} ${r.easing.tailwind}`;
-}
-function lt(a, t = "base", r = "ease-in-out") {
-  return b.createTransition(
-    a,
-    t,
-    r
-  ).tailwind;
-}
-class p {
-  /**
-   * Create a z-index token
-   */
-  static create(t) {
-    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)"
-      }
-    }[t];
-  }
-}
-const dt = {
-  base: p.create("base"),
-  dropdown: p.create("dropdown"),
-  sticky: p.create("sticky"),
-  fixed: p.create("fixed"),
-  "modal-backdrop": p.create("modal-backdrop"),
-  modal: p.create("modal"),
-  popover: p.create("popover"),
-  tooltip: p.create("tooltip"),
-  toast: p.create("toast")
-};
-function ft(a) {
-  return p.create(a);
-}
-function gt(a) {
-  return p.create(a).tailwind;
-}
-class f {
-  /**
-   * Create an opacity token
-   */
-  static create(t) {
-    const r = t / 100, i = {
-      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: t,
-      decimal: r,
-      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"
-      }[t],
-      description: i[t]
-    };
-  }
-}
-const ht = {
-  transparent: f.create(0),
-  5: f.create(5),
-  10: f.create(10),
-  20: f.create(20),
-  25: f.create(25),
-  30: f.create(30),
-  40: f.create(40),
-  50: f.create(50),
-  60: f.create(60),
-  70: f.create(70),
-  75: f.create(75),
-  80: f.create(80),
-  90: f.create(90),
-  95: f.create(95),
-  opaque: f.create(100)
-};
-function ut(a) {
-  return f.create(a);
-}
-function pt(a) {
-  return f.create(a).tailwind;
-}
-class h {
-  /**
-   * Create a gradient token
-   */
-  static create(t, r = "to-r") {
-    const n = {
-      primary: {
-        from: g.primary.light.hex,
-        via: g.primary.DEFAULT.hex,
-        to: g.primary.dark.hex,
-        description: "Primary color gradient"
-      },
-      secondary: {
-        from: g.secondary.light.hex,
-        via: g.secondary.DEFAULT.hex,
-        to: g.secondary.dark.hex,
-        description: "Secondary color gradient"
-      },
-      success: {
-        from: g.success.light.hex,
-        to: g.success.dark.hex,
-        description: "Success color gradient"
-      },
-      error: {
-        from: g.error.light.hex,
-        to: g.error.dark.hex,
-        description: "Error color gradient"
-      },
-      info: {
-        from: g.info.light.hex,
-        to: g.info.dark.hex,
-        description: "Info color gradient"
-      },
-      warning: {
-        from: g.warning.light.hex,
-        to: g.warning.dark.hex,
-        description: "Warning color gradient"
-      }
-    }[t];
-    let s = `linear-gradient(${{
-      "to-r": "to right",
-      "to-l": "to left",
-      "to-t": "to top",
-      "to-b": "to bottom",
-      "to-tr": "to top right",
-      "to-tl": "to top left",
-      "to-br": "to bottom right",
-      "to-bl": "to bottom left"
-    }[r]}, ${n.from}`;
-    n.via && (s += `, ${n.via}`), s += `, ${n.to})`;
-    const c = [];
-    return c.push(`bg-gradient-${r.replace("to-", "")}`), c.push(`from-[${n.from}]`), n.via && c.push(`via-[${n.via}]`), c.push(`to-[${n.to}]`), {
-      value: s,
-      tailwind: c.join(" "),
-      description: n.description,
-      from: n.from,
-      via: n.via,
-      to: n.to
-    };
-  }
-  /**
-   * Convert hex color to approximate Tailwind color class
-   * This is a helper for documentation, actual implementation uses arbitrary values
-   * @deprecated Not currently used, kept for potential future use
-   */
-  // @ts-expect-error - Method kept for potential future use
-  static hexToTailwindColor(t) {
-    return t;
-  }
-}
-const bt = {
-  primary: h.create("primary"),
-  secondary: h.create("secondary"),
-  success: h.create("success"),
-  error: h.create("error"),
-  info: h.create("info"),
-  warning: h.create("warning"),
-  // Common directions
-  "primary-to-r": h.create("primary", "to-r"),
-  "primary-to-b": h.create("primary", "to-b"),
-  "secondary-to-r": h.create("secondary", "to-r"),
-  "success-to-r": h.create("success", "to-r"),
-  "error-to-r": h.create("error", "to-r")
-};
-function wt(a, t) {
-  return h.create(a, t);
-}
-function xt(a, t = "to-r") {
-  return h.create(a, t).tailwind;
-}
-class Q {
-  constructor(t = "light") {
-    R(this, "colorFactory");
-    const r = t === "light" ? new _() : new P();
-    this.colorFactory = new z(r);
-  }
-  /**
-   * Create spacing token
-   */
-  createSpacing(t) {
-    return d.create(t);
-  }
-  /**
-   * Create typography token
-   */
-  createTypography(t, r, i) {
-    return l.create(t, r, i);
-  }
-  /**
-   * Create color palette
-   */
-  createColorPalette() {
-    return this.colorFactory.generatePalette();
-  }
-  /**
-   * Create breakpoint token
-   */
-  createBreakpoint(t) {
-    return C.create(t);
-  }
-  /**
-   * Create shadow token
-   */
-  createShadow(t) {
-    return y.create(t);
-  }
-  /**
-   * Create radius token
-   */
-  createRadius(t) {
-    return m.create(t);
-  }
-  /**
-   * Create border token
-   */
-  createBorder(t) {
-    return w.create(t);
-  }
-  /**
-   * Create animation token
-   */
-  createAnimation(t, r) {
-    return b.create(t, r);
-  }
-  /**
-   * Create z-index token
-   */
-  createZIndex(t) {
-    return p.create(t);
-  }
-  /**
-   * Create opacity token
-   */
-  createOpacity(t) {
-    return f.create(t);
-  }
-  /**
-   * Create gradient token
-   */
-  createGradient(t, r) {
-    return h.create(t, r);
-  }
-  /**
-   * Create complete token set for a theme
-   */
-  createTokenSet() {
-    return {
-      spacing: {
-        xs: this.createSpacing(1),
-        sm: this.createSpacing(2),
-        md: this.createSpacing(3),
-        base: this.createSpacing(4),
-        lg: this.createSpacing(6),
-        xl: this.createSpacing(8),
-        "2xl": this.createSpacing(10),
-        "3xl": this.createSpacing(12),
-        "4xl": this.createSpacing(16)
-      },
-      typography: {
-        h1: this.createTypography("4xl", "tight", "bold"),
-        h2: this.createTypography("3xl", "tight", "bold"),
-        h3: this.createTypography("2xl", "snug", "semibold"),
-        body: this.createTypography("base", "relaxed", "normal"),
-        label: this.createTypography("sm", "normal", "medium"),
-        caption: this.createTypography("xs", "normal", "normal")
-      },
-      colors: this.createColorPalette(),
-      breakpoints: {
-        sm: this.createBreakpoint("sm"),
-        md: this.createBreakpoint("md"),
-        lg: this.createBreakpoint("lg"),
-        xl: this.createBreakpoint("xl"),
-        "2xl": this.createBreakpoint("2xl")
-      },
-      shadows: {
-        none: this.createShadow("none"),
-        sm: this.createShadow("sm"),
-        md: this.createShadow("md"),
-        lg: this.createShadow("lg"),
-        xl: this.createShadow("xl"),
-        "2xl": this.createShadow("2xl"),
-        inner: this.createShadow("inner")
-      },
-      radius: {
-        none: this.createRadius("none"),
-        sm: this.createRadius("sm"),
-        md: this.createRadius("md"),
-        lg: this.createRadius("lg"),
-        xl: this.createRadius("xl"),
-        "2xl": this.createRadius("2xl"),
-        "3xl": this.createRadius("3xl"),
-        full: this.createRadius("full")
-      },
-      borders: {
-        none: this.createBorder("none"),
-        thin: this.createBorder("thin"),
-        base: this.createBorder("base"),
-        medium: this.createBorder("medium"),
-        thick: this.createBorder("thick")
-      },
-      animations: {
-        fast: this.createAnimation("fast"),
-        base: this.createAnimation("base"),
-        slow: this.createAnimation("slow"),
-        slower: this.createAnimation("slower")
-      },
-      zIndex: {
-        base: this.createZIndex("base"),
-        dropdown: this.createZIndex("dropdown"),
-        sticky: this.createZIndex("sticky"),
-        fixed: this.createZIndex("fixed"),
-        "modal-backdrop": this.createZIndex("modal-backdrop"),
-        modal: this.createZIndex("modal"),
-        popover: this.createZIndex("popover"),
-        tooltip: this.createZIndex("tooltip"),
-        toast: this.createZIndex("toast")
-      },
-      opacity: {
-        transparent: this.createOpacity(0),
-        5: this.createOpacity(5),
-        10: this.createOpacity(10),
-        25: this.createOpacity(25),
-        50: this.createOpacity(50),
-        75: this.createOpacity(75),
-        90: this.createOpacity(90),
-        opaque: this.createOpacity(100)
-      },
-      gradients: {
-        primary: this.createGradient("primary"),
-        secondary: this.createGradient("secondary"),
-        success: this.createGradient("success"),
-        error: this.createGradient("error"),
-        info: this.createGradient("info"),
-        warning: this.createGradient("warning")
-      }
-    };
-  }
-  /**
-   * Switch theme
-   */
-  setTheme(t) {
-    const r = t === "light" ? new _() : new P();
-    this.colorFactory.setStrategy(r);
-  }
-}
-const mt = new Q("light");
-function yt(a = "light") {
-  return new Q(a).createTokenSet();
-}
-const kt = {
-  colors: g,
-  spacing: W,
-  typography: A,
-  breakpoints: K,
-  mode: "light"
-}, Tt = {
-  colors: pe,
-  spacing: W,
-  typography: A,
-  breakpoints: K,
-  mode: "dark"
-}, D = {
-  /**
-   * Track (the rounded background bar).
-   * w * h:
-   *   sm — 36 × 20 px
-   *   md — 44 × 24 px
-   *   lg — 56 × 28 px
-   */
-  track: {
-    sm: { w: "w-9", h: "h-5" },
-    md: { w: "w-11", h: "h-6" },
-    lg: { w: "w-14", h: "h-7" }
-  },
-  /**
-   * Thumb (the circular knob).
-   * w * h:
-   *   sm — 16 × 16 px
-   *   md — 20 × 20 px
-   *   lg — 24 × 24 px
-   */
-  thumb: {
-    sm: { w: "w-4", h: "h-4" },
-    md: { w: "w-5", h: "h-5" },
-    lg: { w: "w-6", h: "h-6" }
-  },
-  /**
-   * Translation distance of the thumb when the switch is on. Matches the
-   * track width minus the thumb width and border for visual symmetry.
-   *   sm — 16 px
-   *   md — 20 px
-   *   lg — 28 px
-   */
-  translate: {
-    sm: "translate-x-4",
-    md: "translate-x-5",
-    lg: "translate-x-7"
-  }
-};
-function vt(a) {
-  return {
-    track: `${D.track[a].w} ${D.track[a].h}`,
-    thumb: `${D.thumb[a].w} ${D.thumb[a].h}`,
-    translate: D.translate[a]
-  };
-}
-export {
-  ne as $,
-  ot as A,
-  K as B,
-  lt as C,
-  ft as D,
-  pt as E,
-  ut as F,
-  xt as G,
-  wt as H,
-  ye as I,
-  d as J,
-  l as K,
-  ve as L,
-  Se as M,
-  Oe as N,
-  Ze as O,
-  De as P,
-  k as Q,
-  v as R,
-  U as S,
-  A as T,
-  S as U,
-  T as V,
-  re as W,
-  E as X,
-  ie as Y,
-  dt as Z,
-  F as _,
-  Y as a,
-  oe as a0,
-  $ as a1,
-  se as a2,
-  L as a3,
-  ce as a4,
-  le as a5,
-  de as a6,
-  fe as a7,
-  ge as a8,
-  he as a9,
-  X as aA,
-  at as aB,
-  be as aC,
-  it as aD,
-  xe as aE,
-  nt as aF,
-  ht as aG,
-  bt as aH,
-  D as aI,
-  y as aJ,
-  m as aK,
-  w as aL,
-  b as aM,
-  p as aN,
-  f as aO,
-  h as aP,
-  G as aa,
-  I as ab,
-  Ie as ac,
-  Me as ad,
-  N as ae,
-  Re as af,
-  Ne as ag,
-  We as ah,
-  Ke as ai,
-  Be as aj,
-  Pe as ak,
-  ze as al,
-  ue as am,
-  Ve as an,
-  Z as ao,
-  Ge as ap,
-  He as aq,
-  C as ar,
-  Q as as,
-  mt as at,
-  yt as au,
-  kt as av,
-  Tt as aw,
-  qe as ax,
-  q as ay,
-  et as az,
-  rt as b,
-  Le as c,
-  Ce as d,
-  $e as e,
-  Ae as f,
-  Te as g,
-  Xe as h,
-  Qe as i,
-  tt as j,
-  gt as k,
-  ct as l,
-  Fe as m,
-  Je as n,
-  we as o,
-  vt as p,
-  V as q,
-  H as r,
-  W as s,
-  ke as t,
-  Ee as u,
-  _e as v,
-  Ue as w,
-  je as x,
-  Ye as y,
-  st as z
-};
-//# sourceMappingURL=tokens-DcAT-mPY.js.map