@tenerife.music/ui 1.0.13 → 1.0.16

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
 import * as React49 from 'react';
 import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -22,13 +22,18 @@ var primaryColors = {
   100: "210 40% 96%",
   200: "217 32.6% 17.5%",
   300: "216 28% 26%",
-  400: "215 25% 27%",
-  500: "215 20% 35%",
-  // Base primary
-  600: "215 16% 47%",
-  700: "216 12% 54%",
-  800: "217 10% 62%",
-  900: "222 47.4% 11.2%",
+  400: "215 25% 30%",
+  // Adjusted for better progression
+  500: "215 20% 38%",
+  // Adjusted for better progression
+  600: "215 16% 45%",
+  // Adjusted for better progression
+  700: "216 12% 35%",
+  // Rebalanced for semantic strength (L* ~35)
+  800: "217 10% 28%",
+  // Adjusted for proper progression
+  900: "222 47.4% 18%",
+  // Adjusted for better progression
   950: "222 84% 4.9%"
   // Darkest blue
 };
@@ -38,12 +43,15 @@ var accentColors = {
   200: "280 60% 85%",
   300: "280 55% 75%",
   400: "280 50% 65%",
-  500: "280 70% 67%",
-  // Base accent (night mode primary)
-  600: "259 65% 58%",
-  700: "259 60% 50%",
-  800: "259 55% 45%",
-  900: "259 50% 40%",
+  500: "280 65% 72%",
+  // Adjusted for WCAG AA contrast (4.5:1) with dark text in night mode
+  600: "259 65% 59%",
+  // Default accent - lightened for better contrast vs secondary (L* ~59, was 52, 15 delta from secondary-600)
+  700: "259 60% 44%",
+  // Active state - rebalanced for semantic strength (L* ~44, 12 delta from secondary-700)
+  800: "259 55% 38%",
+  // Adjusted for proper progression
+  900: "259 50% 32%",
   950: "259 45% 30%"
 };
 var secondaryColors = {
@@ -52,12 +60,15 @@ var secondaryColors = {
   200: "173 100% 85%",
   300: "173 100% 70%",
   400: "173 100% 55%",
-  500: "173 100% 37%",
-  // Base secondary (Tenerife #00bfa6)
-  600: "173 100% 32%",
-  700: "173 95% 27%",
+  500: "173 100% 45%",
+  // Adjusted for better scale progression
+  600: "173 100% 44%",
+  // Default secondary - rebalanced for better contrast vs primary (L* ~44, was 38)
+  700: "173 95% 32%",
+  // Active state - rebalanced for semantic strength (L* ~32)
   800: "173 90% 22%",
-  900: "173 85% 17%",
+  // Primary variant - darkened for dominance (L* ~22, was 26)
+  900: "173 85% 20%",
   950: "173 80% 12%"
 };
 var surfaceColors = {
@@ -150,13 +161,13 @@ var chartColors = {
 var textColors = {
   day: {
     primary: "0 0% 9%",
-    // Almost black
+    // Almost black (neutral-900 equivalent)
     secondary: "0 0% 45%",
     // Medium gray
     tertiary: "0 0% 65%",
     // Light gray
-    muted: "0 0% 38%",
-    // Muted gray with stronger contrast
+    muted: "0 0% 42%",
+    // Muted gray - adjusted for WCAG AA contrast (4.5:1) on surface.elevated2
     inverse: "0 0% 100%"
     // White (for dark backgrounds)
   },
@@ -468,6 +479,139 @@ var ALERT_TOKENS = {
   }
 };
 
+// src/tokens/components/motion.ts
+var MOTION_TOKENS = {
+  /**
+   * Transition property tokens
+   * Maps to Tailwind transition utilities
+   */
+  transition: {
+    all: "transition-all",
+    // All properties
+    colors: "transition-colors",
+    // Color properties only
+    opacity: "transition-opacity",
+    // Opacity only
+    transform: "transition-transform",
+    // Transform only
+    shadow: "transition-shadow",
+    // Box shadow only
+    none: "transition-none"
+    // No transition
+  },
+  /**
+   * Duration tokens
+   * Maps to foundation motion duration tokens via Tailwind
+   */
+  duration: {
+    instant: "duration-0",
+    // 0ms
+    fast: "duration-fast",
+    // 150ms - maps to motion.durations.fast
+    normal: "duration-normal",
+    // 300ms - maps to motion.durations.normal
+    slow: "duration-slow",
+    // 500ms - maps to motion.durations.slow
+    slower: "duration-slower",
+    // 700ms - maps to motion.durations.slower
+    slowest: "duration-slowest",
+    // 1000ms - maps to motion.durations.slowest
+    // Granular durations
+    "75": "duration-75",
+    // 75ms
+    "100": "duration-100",
+    // 100ms
+    "200": "duration-200",
+    // 200ms
+    "250": "duration-250",
+    // 250ms
+    "300": "duration-300",
+    // 300ms
+    "400": "duration-400",
+    // 400ms
+    "500": "duration-500",
+    // 500ms
+    "600": "duration-600",
+    // 600ms
+    "700": "duration-700",
+    // 700ms
+    "800": "duration-800",
+    // 800ms
+    "1000": "duration-1000"
+    // 1000ms
+  },
+  /**
+   * Easing tokens
+   * Maps to foundation motion easing tokens via Tailwind
+   */
+  easing: {
+    linear: "ease-linear",
+    // Linear easing
+    in: "ease-in",
+    // Ease in
+    out: "ease-out",
+    // Ease out (recommended for most UI)
+    "in-out": "ease-in-out",
+    // Ease in-out
+    bounce: "ease-bounce",
+    // Bounce easing
+    elastic: "ease-elastic"
+    // Elastic easing
+  },
+  /**
+   * Pre-configured transition tokens
+   * Combines duration and easing for common use cases
+   */
+  transitionPreset: {
+    fast: "transition-all duration-fast ease-out",
+    // Fast transition
+    normal: "transition-all duration-normal ease-in-out",
+    // Normal transition (default)
+    slow: "transition-all duration-slow ease-in-out",
+    // Slow transition
+    colors: "transition-colors duration-normal ease-out",
+    // Color transitions (common)
+    transform: "transition-transform duration-normal ease-out",
+    // Transform transitions
+    opacity: "transition-opacity duration-fast ease-out"
+    // Opacity transitions
+  },
+  /**
+   * Animation tokens
+   * Maps to foundation motion animation tokens via Tailwind
+   */
+  animation: {
+    none: "animate-none",
+    // No animation
+    spin: "animate-spin",
+    // Spin animation
+    pulse: "animate-pulse",
+    // Pulse animation
+    bounce: "animate-bounce",
+    // Bounce animation
+    ping: "animate-ping",
+    // Ping animation
+    shake: "animate-shake",
+    // Shake animation
+    fadeIn: "animate-fadeIn",
+    // Fade in
+    fadeOut: "animate-fadeOut",
+    // Fade out
+    slideInUp: "animate-slideInUp",
+    // Slide in from bottom
+    slideInDown: "animate-slideInDown",
+    // Slide in from top
+    slideInLeft: "animate-slideInLeft",
+    // Slide in from right
+    slideInRight: "animate-slideInRight",
+    // Slide in from left
+    scaleIn: "animate-scaleIn",
+    // Scale in
+    scaleOut: "animate-scaleOut"
+    // Scale out
+  }
+};
+
 // src/tokens/components/button.ts
 var BUTTON_TOKENS = {
   /**
@@ -500,25 +644,48 @@ var BUTTON_TOKENS = {
     vertical: {
       sm: "py-xs",
       // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "py-sm"
+      md: "py-sm",
       // 8px (0.5rem) - maps to semanticSpacing.sm
+      lg: "py-md"
+      // 16px (1rem) - maps to semanticSpacing.md - standardized for visual distinction
     }
   },
   /**
-   * Gap between icon and text
+   * Gap between icon and text by size
+   * Scales with button size for visual consistency
    */
-  gap: "gap-sm",
-  // 8px (0.5rem) - maps to semanticSpacing.sm
+  gap: {
+    sm: "gap-xs",
+    // 4px (0.25rem) - smaller gap for small buttons
+    md: "gap-sm",
+    // 8px (0.5rem) - medium gap for medium buttons
+    lg: "gap-md"
+    // 16px (1rem) - larger gap for large buttons
+  },
   /**
    * Border radius for all button sizes
+   * Consistent radius across sizes for visual harmony
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule References componentRadius.button.md (6px / 0.375rem) from Radius Authority
+   * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
    */
   radius: "rounded-md",
-  // 6px (0.375rem) - maps to borderRadius.md
+  // References componentRadius.button.md (6px / 0.375rem) - Radius Authority compliant
   /**
-   * Icon size within buttons
+   * Icon size within buttons by button size
+   * Scales proportionally with button size for visual balance
    */
-  iconSize: "size-4",
-  // 16px (1rem) - maps to spacing[4]
+  iconSize: {
+    sm: "size-3.5",
+    // 14px (0.875rem) - smaller icon for small buttons
+    md: "size-4",
+    // 16px (1rem) - medium icon for medium buttons
+    lg: "size-5",
+    // 20px (1.25rem) - larger icon for large buttons
+    icon: "size-4"
+    // 16px (1rem) - medium icon for icon-only buttons
+  },
   /**
    * Width tokens
    */
@@ -528,15 +695,19 @@ var BUTTON_TOKENS = {
   },
   /**
    * Font sizes by button size
-   * Maps to foundation typography fontSize tokens
+   * References foundation typography fontSize tokens from Typography Authority
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule All fontSize values reference Typography Authority tokens
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
    */
   fontSize: {
     sm: "text-xs",
-    // Maps to fontSize.xs[0]
+    // References fontSize.xs[0] from Typography Authority (~12px)
     md: "text-sm",
-    // Maps to fontSize.sm[0]
-    lg: "text-sm"
-    // Maps to fontSize.sm[0]
+    // References fontSize.sm[0] from Typography Authority (~14px)
+    lg: "text-base"
+    // References fontSize.base[0] from Typography Authority (~16px)
   },
   /**
    * Shadow tokens by variant
@@ -551,50 +722,137 @@ var BUTTON_TOKENS = {
   /**
    * Color tokens for button variants
    * Uses semantic color tokens that map to CSS variables
+   *
+   * State tokens (hover, active, disabled) use CSS variables from State Matrix.
+   * All states are injected via updateStateMatrixFromTokens() and consumed via arbitrary values.
+   * States react to Color Authority changes automatically through State Matrix.
+   *
+   * Interaction Authority Rules:
+   * - Hover (Priority 4): hover: prefix - ONLY when !disabled && !loading && pointer-events:auto
+   * - Active (Priority 3): active: prefix - ONLY when !disabled && !loading && mousedown
+   * - Focus (Priority 5): focus-visible: prefix - ONLY when !disabled && keyboard navigation
+   * - Disabled (Priority 1): disabled: prefix - Blocks ALL interactions
+   * - Loading (Priority 2): loading: prefix - Blocks hover/active (when implemented)
+   * - Base (Priority 6): No prefix - Default state, pointer-events: auto
+   *
+   * @enforcement TUNG_STATE_AUTHORITY_FOUNDATION_LOCK
+   * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+   * @rule States use CSS variables, not Tailwind variants
+   * @rule All state variables follow pattern: --{component}-{variant}-{state}-{property}
+   * @rule Visual states (colors) are SEPARATE from interaction states (pointer-events)
+   * @rule Hover MUST work with real mouse cursor, NOT just DevTools force state
+   * @rule Active MUST activate only on mousedown, NOT on hover
+   * @rule Focus MUST activate only on keyboard navigation, NOT on mouse click
+   *
+   * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
    */
   variant: {
     primary: {
-      background: "bg-primary",
-      // Primary background using CSS var
+      background: "bg-[hsl(var(--button-primary-base-bg))]",
+      // Primary base background - CSS variable from State Matrix
       text: "text-primary-foreground",
       // Primary text using CSS var
-      hover: "hover:bg-primary/90"
-      // Primary hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-primary-hover-bg))]",
+      // Primary hover - CSS variable from State Matrix (Priority 4: blocked by disabled/loading)
+      active: "active:bg-[hsl(var(--button-primary-active-bg))]",
+      // Primary active - CSS variable from State Matrix (Priority 3: blocked by disabled/loading, priority over hover)
+      focus: "focus-visible:bg-[hsl(var(--button-primary-focus-bg))]",
+      // Primary focus - CSS variable from State Matrix (Priority 5: keyboard navigation only)
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-primary-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix (Priority 1: blocks all)
+        text: "disabled:text-[hsl(var(--button-primary-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      },
+      loading: "bg-[hsl(var(--button-primary-loading-bg))]"
+      // Primary loading - CSS variable from State Matrix (Priority 2: blocks hover/active, used with aria-busy/data-loading when implemented)
     },
     secondary: {
       background: "bg-secondary",
       // Secondary background using CSS var
       text: "text-secondary-foreground",
       // Secondary text using CSS var
-      hover: "hover:bg-secondary/80"
-      // Secondary hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-secondary-hover-bg))]",
+      // Secondary hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-secondary-active-bg))]",
+      // Secondary active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-secondary-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-secondary-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     },
     accent: {
       background: "bg-accent",
       // Accent background using CSS var
       text: "text-accent-foreground",
       // Accent text using CSS var
-      hover: "hover:bg-accent/90"
-      // Accent hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-accent-hover-bg))]",
+      // Accent hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-accent-active-bg))]",
+      // Accent active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-accent-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-accent-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     },
     outline: {
       border: "border border-input",
       // Input border using CSS var
       background: "bg-background",
       // Background using CSS var
+      text: "text-foreground",
+      // Foreground text using CSS var
       hover: {
-        background: "hover:bg-accent",
-        // Accent hover using CSS var
-        text: "hover:text-accent-foreground"
-        // Accent text using CSS var
+        background: "hover:bg-[hsl(var(--button-outline-hover-bg))]",
+        // Outline hover background - CSS variable from State Matrix
+        text: "hover:text-[hsl(var(--button-outline-hover-text))]",
+        // Outline hover text - CSS variable from State Matrix
+        border: "hover:border-[hsl(var(--button-outline-hover-border))]"
+        // Outline hover border - CSS variable from State Matrix
+      },
+      active: {
+        background: "active:bg-[hsl(var(--button-outline-active-bg))]",
+        // Outline active background - CSS variable from State Matrix
+        text: "active:text-[hsl(var(--button-outline-active-text))]",
+        // Outline active text - CSS variable from State Matrix
+        border: "active:border-[hsl(var(--button-outline-active-border))]"
+        // Outline active border - CSS variable from State Matrix
+      },
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-outline-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-outline-disabled-text))]",
+        // Disabled text - CSS variable from State Matrix
+        border: "disabled:border-[hsl(var(--button-outline-disabled-border))]"
+        // Disabled border - CSS variable from State Matrix
       }
     },
     ghost: {
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-foreground",
+      // Foreground text using CSS var
       hover: {
-        background: "hover:bg-accent",
-        // Accent hover using CSS var
-        text: "hover:text-accent-foreground"
-        // Accent text using CSS var
+        background: "hover:bg-[hsl(var(--button-ghost-hover-bg))]",
+        // Ghost hover background - CSS variable from State Matrix
+        text: "hover:text-[hsl(var(--button-ghost-hover-text))]"
+        // Ghost hover text - CSS variable from State Matrix
+      },
+      active: {
+        background: "active:bg-[hsl(var(--button-ghost-active-bg))]",
+        // Ghost active background - CSS variable from State Matrix
+        text: "active:text-[hsl(var(--button-ghost-active-text))]"
+        // Ghost active text - CSS variable from State Matrix
+      },
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-ghost-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-ghost-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
       }
     },
     destructive: {
@@ -602,16 +860,94 @@ var BUTTON_TOKENS = {
       // Destructive background using CSS var
       text: "text-destructive-foreground",
       // Destructive text using CSS var
-      hover: "hover:bg-destructive/90"
-      // Destructive hover using CSS var
+      hover: "hover:bg-[hsl(var(--button-destructive-hover-bg))]",
+      // Destructive hover - CSS variable from State Matrix
+      active: "active:bg-[hsl(var(--button-destructive-active-bg))]",
+      // Destructive active - CSS variable from State Matrix
+      disabled: {
+        background: "disabled:bg-[hsl(var(--button-destructive-disabled-bg))]",
+        // Disabled background - CSS variable from State Matrix
+        text: "disabled:text-[hsl(var(--button-destructive-disabled-text))]"
+        // Disabled text - CSS variable from State Matrix
+      }
     }
   },
   /**
    * Transition tokens
+   * References Motion Authority tokens for consistent motion behavior
+   *
+   * @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
+   * @rule Uses MOTION_TOKENS.transitionPreset.colors from Motion Authority
+   * @rule Motion transitions MUST use canonical motion tokens only
+   * @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
    */
   transition: {
-    colors: "transition-colors"
-    // Color transition using motion tokens
+    colors: MOTION_TOKENS.transitionPreset.colors
+    // "transition-colors duration-normal ease-out" - Motion Authority compliant
+  },
+  /**
+   * Global state tokens
+   * Shared state tokens that apply across all variants
+   * Variant-specific states are defined in variant.*.active and variant.*.disabled
+   *
+   * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+   * @rule All interaction states MUST follow Interaction Authority Contract
+   * @rule State priority: disabled > loading > active > hover > focus-visible > base
+   * @rule Visual states (colors) are SEPARATE from interaction states (pointer-events, cursor)
+   * @rule All states MUST be browser-native (CSS pseudo-classes), NOT JavaScript-managed
+   */
+  state: {
+    /**
+     * Disabled state tokens
+     * Global disabled state tokens (variant-specific overrides in variant.*.disabled)
+     *
+     * Interaction Authority Rules:
+     * - Priority: 1 (Highest) - Blocks ALL interactions
+     * - MUST block hover, active, and focus states
+     * - MUST use disabled: prefix (never in base state)
+     * - Base state MUST have pointer-events: auto (default) for hover to work
+     *
+     * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+     * @enforcement TUNG_BUTTON_INTERACTION_FIX
+     * @rule Interaction Authority: pointer-events is NOT a visual token
+     * @rule pointer-events-none MUST use disabled: prefix (never in base state)
+     * @rule Base state MUST have pointer-events: auto (default) for hover to work
+     * @rule These tokens are applied in base but only activate when element is disabled
+     * @rule Hover is FORBIDDEN when disabled={true}
+     * @rule Active is FORBIDDEN when disabled={true}
+     * @rule Focus is FORBIDDEN when disabled={true} (for interactions)
+     *
+     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+     */
+    disabled: {
+      cursor: "disabled:cursor-not-allowed",
+      // Disabled cursor style (only applies when disabled)
+      pointerEvents: "disabled:pointer-events-none"
+      // Disable pointer events (only applies when disabled)
+    },
+    /**
+     * Focus state tokens
+     * Focus ring for keyboard navigation
+     *
+     * Interaction Authority Rules:
+     * - Priority: 5 - Lower than active and hover
+     * - MUST activate only on keyboard navigation (focus-visible: prefix)
+     * - MUST NOT activate on mouse click (use :focus-visible, not :focus)
+     * - MUST be blocked by disabled state
+     *
+     * @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
+     * @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
+     * @rule Focus MUST be blocked when disabled={true}
+     * @rule Focus MUST NOT activate on mouse click
+     *
+     * @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
+     */
+    focus: {
+      ring: "focus-visible:ring-1 focus-visible:ring-ring",
+      // Focus ring using semantic ring color
+      outline: "focus-visible:outline-none"
+      // Remove default outline (replaced by ring)
+    }
   }
 };
 
@@ -699,6 +1035,68 @@ var CARD_TOKENS = {
   }
 };
 
+// src/tokens/components/artist.ts
+var ARTIST_TOKENS = {
+  /**
+   * Image container tokens
+   * Layout classes for image container wrapper
+   */
+  image: {
+    /**
+     * Container layout tokens
+     * Positioning and sizing for image container
+     */
+    container: {
+      /**
+       * Base container layout
+       * Relative positioning, full width, overflow hidden
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      layout: "relative w-full overflow-hidden"
+    },
+    /**
+     * Image sizing tokens
+     * Full width and height for images
+     */
+    sizing: {
+      /**
+       * Full size image
+       * Uses Tailwind sizing utilities (allowed per architecture)
+       */
+      full: "h-full w-full"
+    },
+    /**
+     * Placeholder container tokens
+     * Layout for placeholder icon container when no image is provided
+     */
+    placeholder: {
+      /**
+       * Placeholder container layout
+       * Flex centering for placeholder icon
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      container: "flex h-full w-full items-center justify-center"
+    }
+  },
+  /**
+   * Footer border tokens
+   * Border styling for card footer separator
+   */
+  footer: {
+    /**
+     * Footer border tokens
+     * Top border separator for footer section
+     */
+    border: {
+      /**
+       * Footer border top
+       * Uses semantic border color token
+       */
+      top: "border-t border-border"
+    }
+  }
+};
+
 // src/tokens/spacing.ts
 var spacing = {
   // Zero spacing
@@ -962,139 +1360,44 @@ var tailwindSpacingConfig = {
 // src/tokens/components/data.ts
 var DATA_TOKENS = {
   /**
-   * Table Component Tokens
+   * Skeleton Component Tokens
    */
-  table: {
+  skeleton: {
     /**
-     * Table row heights by size
+     * Skeleton heights by variant
      * Maps to Tailwind height utilities
      */
-    rowHeight: {
-      sm: "h-8",
-      // 32px (2rem) - compact rows
-      md: "h-10",
-      // 40px (2.5rem) - default rows
-      lg: "h-12"
-      // 48px (3rem) - spacious rows
-    },
-    /**
-     * Table cell and header padding by size
-     * Maps to semantic spacing tokens
-     */
-    padding: {
-      cell: {
-        sm: "p-xs",
-        // 4px (0.25rem) - maps to semanticSpacing.xs
-        md: "p-sm",
-        // 8px (0.5rem) - maps to semanticSpacing.sm
-        lg: "p-md"
-        // 16px (1rem) - maps to semanticSpacing.md
-      },
-      header: {
-        sm: "px-xs py-sm",
-        // 4px horizontal, 8px vertical
-        md: "px-sm py-md",
-        // 8px horizontal, 16px vertical
-        lg: "px-md py-lg"
-        // 16px horizontal, 24px vertical
-      }
-    },
-    /**
-     * Gap between table cells (horizontal spacing)
-     */
-    gap: {
-      sm: "gap-xs",
-      // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "gap-sm"
-      // 8px (0.5rem) - maps to semanticSpacing.sm
+    height: {
+      text: "h-4",
+      // 16px (1rem) - text line height
+      circle: "h-10 w-10",
+      // 40px × 40px (2.5rem) - circular skeleton
+      block: "h-20",
+      // 80px (5rem) - block skeleton
+      card: "h-32",
+      // 128px (8rem) - card skeleton
+      inline: "h-4"
+      // 16px (1rem) - inline text
     },
     /**
-     * Border radius for table
+     * Border radius by variant
+     * Maps to foundation borderRadius tokens
      */
     radius: {
-      default: "rounded-md"
+      text: "rounded-sm",
+      // 4px (0.25rem) - maps to borderRadius.sm
+      circle: "rounded-full",
+      // Full circle - maps to borderRadius.full
+      block: "rounded-md",
       // 6px (0.375rem) - maps to borderRadius.md
+      card: "rounded-xl",
+      // 12px (0.75rem) - maps to borderRadius.xl
+      inline: "rounded-sm"
+      // 4px (0.25rem) - maps to borderRadius.sm
     },
     /**
-     * Shadow tokens for table
-     * Maps to foundation elevation shadow tokens
-     */
-    shadow: {
-      none: "shadow-none",
-      // No shadow
-      subtle: "shadow-sm"
-      // Maps to elevationShadows.sm
-    },
-    /**
-     * Typography tokens for table headers and cells
-     * Maps to foundation typography fontSize tokens
-     */
-    typography: {
-      header: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-semibold"
-        // Maps to fontWeight.semibold
-      },
-      cell: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-normal"
-        // Maps to fontWeight.normal
-      }
-    },
-    /**
-     * Color tokens for table states
-     * Uses semantic color tokens
-     */
-    colors: {
-      border: "border-border",
-      // Border color
-      rowHover: "hover:bg-muted/50",
-      // Row hover background
-      rowSelected: "bg-muted"
-      // Selected row background
-    }
-  },
-  /**
-   * Skeleton Component Tokens
-   */
-  skeleton: {
-    /**
-     * Skeleton heights by variant
-     * Maps to Tailwind height utilities
-     */
-    height: {
-      text: "h-4",
-      // 16px (1rem) - text line height
-      circle: "h-10 w-10",
-      // 40px × 40px (2.5rem) - circular skeleton
-      block: "h-20",
-      // 80px (5rem) - block skeleton
-      card: "h-32",
-      // 128px (8rem) - card skeleton
-      inline: "h-4"
-      // 16px (1rem) - inline text
-    },
-    /**
-     * Border radius by variant
-     * Maps to foundation borderRadius tokens
-     */
-    radius: {
-      text: "rounded-sm",
-      // 4px (0.25rem) - maps to borderRadius.sm
-      circle: "rounded-full",
-      // Full circle - maps to borderRadius.full
-      block: "rounded-md",
-      // 6px (0.375rem) - maps to borderRadius.md
-      card: "rounded-xl",
-      // 12px (0.75rem) - maps to borderRadius.xl
-      inline: "rounded-sm"
-      // 4px (0.25rem) - maps to borderRadius.sm
-    },
-    /**
-     * Animation tokens
-     * Uses motion tokens for animations
+     * Animation tokens
+     * Uses motion tokens for animations
      */
     animation: {
       pulse: "animate-pulse",
@@ -1121,97 +1424,6 @@ var DATA_TOKENS = {
       inline: "inline-block"
       // Inline block display
     }
-  },
-  /**
-   * EmptyState Component Tokens
-   */
-  emptyState: {
-    /**
-     * Spacing tokens for EmptyState
-     * Maps to semantic spacing tokens
-     */
-    spacing: {
-      gap: "gap-md",
-      // 16px (1rem) - gap between elements - maps to semanticSpacing.md
-      padding: "p-lg"
-      // 24px (1.5rem) - container padding - maps to semanticSpacing.lg
-    },
-    /**
-     * Border radius for EmptyState container
-     */
-    radius: {
-      default: "rounded-xl"
-      // 12px (0.75rem) - maps to borderRadius.xl
-    },
-    /**
-     * Icon sizes by variant
-     * Maps to Tailwind size utilities
-     */
-    iconSize: {
-      sm: "size-8",
-      // 32px (2rem)
-      md: "size-12",
-      // 48px (3rem)
-      lg: "size-16"
-      // 64px (4rem)
-    },
-    /**
-     * Typography tokens for EmptyState
-     * Maps to foundation typography tokens
-     */
-    typography: {
-      title: {
-        fontSize: "text-lg",
-        // Maps to fontSize.lg[0]
-        fontWeight: "font-semibold"
-        // Maps to fontWeight.semibold
-      },
-      description: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-normal"
-        // Maps to fontWeight.normal
-      }
-    }
-  },
-  /**
-   * DataList Component Tokens
-   */
-  dataList: {
-    /**
-     * Spacing tokens for DataList
-     * Maps to semantic spacing tokens
-     */
-    spacing: {
-      gap: "gap-md",
-      // 16px (1rem) - gap between items - maps to semanticSpacing.md
-      padding: "p-md"
-      // 16px (1rem) - container padding - maps to semanticSpacing.md
-    },
-    /**
-     * Label width tokens (for desktop horizontal layout)
-     * Maps to Tailwind width utilities
-     */
-    labelWidth: {
-      sm: "w-24",
-      // 96px (6rem) - small label width
-      md: "w-32",
-      // 128px (8rem) - default label width
-      lg: "w-40"
-      // 160px (10rem) - large label width
-    },
-    /**
-     * Row padding tokens
-     * Maps to semantic spacing tokens
-     */
-    rowPadding: {
-      sm: "py-xs",
-      // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "py-sm",
-      // 8px (0.5rem) - maps to semanticSpacing.sm
-      lg: "py-md"
-      // 16px (1rem) - maps to semanticSpacing.md
-    }
   }
 };
 
@@ -1271,139 +1483,6 @@ var ICON_TOKENS = {
   }
 };
 
-// src/tokens/components/motion.ts
-var MOTION_TOKENS = {
-  /**
-   * Transition property tokens
-   * Maps to Tailwind transition utilities
-   */
-  transition: {
-    all: "transition-all",
-    // All properties
-    colors: "transition-colors",
-    // Color properties only
-    opacity: "transition-opacity",
-    // Opacity only
-    transform: "transition-transform",
-    // Transform only
-    shadow: "transition-shadow",
-    // Box shadow only
-    none: "transition-none"
-    // No transition
-  },
-  /**
-   * Duration tokens
-   * Maps to foundation motion duration tokens via Tailwind
-   */
-  duration: {
-    instant: "duration-0",
-    // 0ms
-    fast: "duration-fast",
-    // 150ms - maps to motion.durations.fast
-    normal: "duration-normal",
-    // 300ms - maps to motion.durations.normal
-    slow: "duration-slow",
-    // 500ms - maps to motion.durations.slow
-    slower: "duration-slower",
-    // 700ms - maps to motion.durations.slower
-    slowest: "duration-slowest",
-    // 1000ms - maps to motion.durations.slowest
-    // Granular durations
-    "75": "duration-75",
-    // 75ms
-    "100": "duration-100",
-    // 100ms
-    "200": "duration-200",
-    // 200ms
-    "250": "duration-250",
-    // 250ms
-    "300": "duration-300",
-    // 300ms
-    "400": "duration-400",
-    // 400ms
-    "500": "duration-500",
-    // 500ms
-    "600": "duration-600",
-    // 600ms
-    "700": "duration-700",
-    // 700ms
-    "800": "duration-800",
-    // 800ms
-    "1000": "duration-1000"
-    // 1000ms
-  },
-  /**
-   * Easing tokens
-   * Maps to foundation motion easing tokens via Tailwind
-   */
-  easing: {
-    linear: "ease-linear",
-    // Linear easing
-    in: "ease-in",
-    // Ease in
-    out: "ease-out",
-    // Ease out (recommended for most UI)
-    "in-out": "ease-in-out",
-    // Ease in-out
-    bounce: "ease-bounce",
-    // Bounce easing
-    elastic: "ease-elastic"
-    // Elastic easing
-  },
-  /**
-   * Pre-configured transition tokens
-   * Combines duration and easing for common use cases
-   */
-  transitionPreset: {
-    fast: "transition-all duration-fast ease-out",
-    // Fast transition
-    normal: "transition-all duration-normal ease-in-out",
-    // Normal transition (default)
-    slow: "transition-all duration-slow ease-in-out",
-    // Slow transition
-    colors: "transition-colors duration-normal ease-out",
-    // Color transitions (common)
-    transform: "transition-transform duration-normal ease-out",
-    // Transform transitions
-    opacity: "transition-opacity duration-fast ease-out"
-    // Opacity transitions
-  },
-  /**
-   * Animation tokens
-   * Maps to foundation motion animation tokens via Tailwind
-   */
-  animation: {
-    none: "animate-none",
-    // No animation
-    spin: "animate-spin",
-    // Spin animation
-    pulse: "animate-pulse",
-    // Pulse animation
-    bounce: "animate-bounce",
-    // Bounce animation
-    ping: "animate-ping",
-    // Ping animation
-    shake: "animate-shake",
-    // Shake animation
-    fadeIn: "animate-fadeIn",
-    // Fade in
-    fadeOut: "animate-fadeOut",
-    // Fade out
-    slideInUp: "animate-slideInUp",
-    // Slide in from bottom
-    slideInDown: "animate-slideInDown",
-    // Slide in from top
-    slideInLeft: "animate-slideInLeft",
-    // Slide in from right
-    slideInRight: "animate-slideInRight",
-    // Slide in from left
-    scaleIn: "animate-scaleIn",
-    // Scale in
-    scaleOut: "animate-scaleOut"
-    // Scale out
-  }
-};
-
 // src/tokens/components/domain.ts
 var DOMAIN_TOKENS = {
   /**
@@ -1556,7 +1635,7 @@ var DOMAIN_TOKENS = {
   },
   /**
    * Image tokens for card media
-   * Defines aspect ratio, radius, and overlay styles
+   * Defines aspect ratio, radius, overlay styles, and placeholder gradients
    */
   image: {
     /**
@@ -1579,6 +1658,40 @@ var DOMAIN_TOKENS = {
     overlay: {
       gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
       // Gradient overlay for image hover states
+    },
+    /**
+     * Placeholder gradient tokens for image placeholders
+     * Used when no image URL is provided
+     */
+    placeholder: {
+      gradient: "bg-gradient-to-br from-muted to-muted/50"
+      // Placeholder gradient background
+    }
+  },
+  /**
+   * Text tokens for card text elements
+   * Defines hover states and line clamping for titles and descriptions
+   */
+  text: {
+    /**
+     * Hover state tokens for text elements
+     * Used for interactive text elements like titles
+     */
+    hover: {
+      primary: "group-hover:text-primary"
+      // Hover state for primary text color
+    },
+    /**
+     * Line clamp tokens for text truncation
+     * Used for limiting text to specific number of lines
+     */
+    lineClamp: {
+      one: "line-clamp-1",
+      // Single line clamp
+      two: "line-clamp-2",
+      // Two line clamp
+      three: "line-clamp-3"
+      // Three line clamp
     }
   },
   /**
@@ -1801,7 +1914,95 @@ var DOMAIN_TOKENS = {
       height: "h-6"
       // References spacing[6] (1.5rem / 24px) via Tailwind
     }
-  }
+  },
+  /**
+   * CTA (Call-to-Action) button tokens for domain card components
+   * Provides PromoCard-specific CTA button styling tokens
+   * These tokens are semantically owned by domain card components, not by the Button component
+   * References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
+   */
+  cta: {
+    /**
+     * CTA button styling tokens
+     * Used by PromoCard and other domain card components for CTA button elements
+     */
+    button: {
+      /**
+       * Button heights by size
+       * Maps to Tailwind height utilities: h-8, h-9
+       */
+      height: {
+        sm: "h-8",
+        // 32px (2rem) - compact size
+        md: "h-9"
+        // 36px (2.25rem) - default size
+      },
+      /**
+       * Button padding by size
+       * Horizontal and vertical padding values
+       * References semanticSpacing tokens
+       */
+      padding: {
+        horizontal: {
+          sm: "px-sm",
+          // 8px (0.5rem) - maps to semanticSpacing.sm
+          md: "px-md"
+          // 16px (1rem) - maps to semanticSpacing.md
+        },
+        vertical: {
+          sm: "py-xs"
+          // 4px (0.25rem) - maps to semanticSpacing.xs
+        }
+      },
+      /**
+       * Border radius for CTA buttons
+       * References borderRadius.md (6px / 0.375rem)
+       * Using Tailwind class "rounded-md" which maps to borderRadius.md
+       */
+      radius: "rounded-md",
+      // References borderRadius.md via Tailwind
+      /**
+       * Font sizes by button size
+       * Maps to foundation typography fontSize tokens
+       */
+      fontSize: {
+        sm: "text-xs",
+        // Maps to fontSize.xs[0]
+        md: "text-sm"
+        // Maps to fontSize.sm[0]
+      },
+      /**
+       * Shadow tokens for CTA buttons
+       * Maps to foundation elevation shadow tokens
+       */
+      shadow: {
+        primary: "shadow"
+        // Maps to elevationShadows.xs (primary variant uses shadow)
+      },
+      /**
+       * Color tokens for CTA button variants
+       * Uses semantic color tokens that map to CSS variables
+       */
+      variant: {
+        primary: {
+          background: "bg-primary",
+          // Primary background using CSS var
+          text: "text-primary-foreground",
+          // Primary text using CSS var
+          hover: "hover:bg-primary/90"
+          // Primary hover using CSS var
+        }
+      },
+      /**
+       * Transition tokens for CTA buttons
+       * References MOTION_TOKENS for transitions
+       */
+      transition: {
+        colors: "transition-colors"
+        // Color transition using motion tokens
+      }
+    }
+  }
 };
 
 // src/tokens/components/input.ts
@@ -1904,40 +2105,6 @@ var INPUT_TOKENS = {
     text: "text-[hsl(var(--foreground))]"
     // File input text color using CSS var
   },
-  /**
-   * Select listbox tokens
-   * Styling for select dropdown container
-   */
-  selectListbox: {
-    border: "border border-[hsl(var(--border))]",
-    // Border color using CSS var
-    background: "bg-[hsl(var(--popover))]",
-    // Background using CSS var
-    text: "text-[hsl(var(--popover-foreground))]",
-    // Text color using CSS var
-    radius: "rounded-md",
-    // Radius token (6px)
-    shadow: "shadow-md"
-    // Shadow token
-  },
-  /**
-   * Select option tokens
-   * Styling for select option items
-   */
-  selectOption: {
-    focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
-      // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
-      // Focus text using CSS var
-    },
-    selected: {
-      background: "bg-[hsl(var(--accent))]",
-      // Selected background using CSS var
-      text: "text-[hsl(var(--accent-foreground))]"
-      // Selected text using CSS var
-    }
-  },
   /**
    * Variant-based tokens
    * Border, background, and text colors for different variants
@@ -2151,6 +2318,188 @@ var INPUT_TOKENS = {
   }
 };
 
+// src/tokens/components/textarea.ts
+var TEXTAREA_TOKENS = {
+  /**
+   * Shadow token
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: "shadow-sm",
+  // Maps to elevationShadows.sm
+  /**
+   * Variant-based tokens
+   * Border, background, and text colors for different variants
+   * All use CSS variable references for theme support
+   */
+  variant: {
+    primary: {
+      border: "border-[hsl(var(--tm-primary))]",
+      // Primary border color
+      background: "bg-[hsl(var(--tm-primary))]",
+      // Primary background
+      text: "text-[hsl(var(--tm-primary-foreground))]",
+      // Primary text color
+      focus: "focus-visible:shadow-[var(--focus-ring-primary)]"
+      // Primary focus ring
+    },
+    secondary: {
+      border: "border-[hsl(var(--tm-secondary))]",
+      // Secondary border color
+      background: "bg-[hsl(var(--tm-secondary))]",
+      // Secondary background
+      text: "text-[hsl(var(--tm-secondary-foreground))]",
+      // Secondary text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    outline: {
+      border: "border-[hsl(var(--input))]",
+      // Input border color
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    ghost: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    destructive: {
+      border: "border-[hsl(var(--destructive))]",
+      // Destructive border color
+      background: "bg-[hsl(var(--destructive))]",
+      // Destructive background
+      text: "text-[hsl(var(--destructive-foreground))]",
+      // Destructive text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    }
+  },
+  /**
+   * State-based tokens
+   * Border, background, and text colors for different states
+   * All use CSS variable references for theme support
+   */
+  state: {
+    border: {
+      default: "border-[hsl(var(--input))]",
+      // Default border color using CSS var
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]",
+      // Focus ring using CSS var
+      error: "border-[hsl(var(--destructive))]",
+      // Error state border using CSS var
+      success: "border-[hsl(var(--semantic-success))]",
+      // Success state border using CSS var
+      disabled: "border-[hsl(var(--input))]"
+      // Disabled state border (same as default)
+    },
+    background: {
+      default: "bg-transparent",
+      // Default background
+      disabled: "bg-transparent"
+      // Disabled background (same as default)
+    },
+    text: {
+      default: "text-[hsl(var(--foreground))]",
+      // Default text color using CSS var
+      placeholder: "placeholder:text-[hsl(var(--muted-foreground))]",
+      // Placeholder text color using CSS var
+      disabled: "disabled:opacity-50"
+      // Disabled text opacity
+    }
+  },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
+  /**
+   * Message tokens
+   * Spacing, positioning, and styling for helper text and error messages
+   */
+  message: {
+    // 8px (0.5rem) - spacing between control and message
+    position: {
+      bottom: "bottom-sm",
+      // 8px (0.5rem) - bottom position for character counter
+      right: "right-sm"
+      // 8px (0.5rem) - right position for character counter
+    },
+    color: {
+      default: "text-[hsl(var(--muted-foreground))]",
+      // Default message color
+      error: "text-[hsl(var(--destructive))]"}
+  },
+  /**
+   * Size-based token structure
+   * Organized by size for easy access
+   */
+  size: {
+    xs: {
+      padding: {
+        horizontal: "px-xs",
+        vertical: "py-xs"
+      },
+      radius: "rounded-sm",
+      fontSize: "text-xs"},
+    sm: {
+      padding: {
+        horizontal: "px-sm",
+        vertical: "py-xs"
+      },
+      radius: "rounded-md",
+      fontSize: "text-sm"},
+    md: {
+      padding: {
+        horizontal: "px-sm",
+        vertical: "py-xs"
+      },
+      radius: "rounded-md",
+      fontSize: "text-base",
+      fontSizeResponsive: "md:text-sm"},
+    lg: {
+      padding: {
+        horizontal: "px-md",
+        vertical: "py-sm"
+      },
+      radius: "rounded-md",
+      fontSize: "text-base"},
+    xl: {
+      padding: {
+        horizontal: "px-lg",
+        vertical: "py-md"
+      },
+      radius: "rounded-lg",
+      fontSize: "text-lg"}
+  }
+};
+
+// src/tokens/components/form.ts
+var FORM_TOKENS = {
+  /**
+   * Label tokens
+   * Spacing and styling for labels
+   */
+  label: {
+    // 8px (0.5rem) - spacing between label and control
+    /**
+     * Color for required asterisk mark
+     */
+    requiredMark: "text-destructive"
+    // Color for required asterisk
+  }};
+
 // src/tokens/components/checkbox.ts
 var CHECKBOX_TOKENS = {
   /**
@@ -2925,8 +3274,16 @@ var TEXT_TOKENS = {
     // Maps to fontSize.base[0]
     lg: "text-lg",
     // Maps to fontSize.lg[0]
-    xl: "text-xl"
+    xl: "text-xl",
     // Maps to fontSize.xl[0]
+    "2xl": "text-2xl",
+    // Maps to fontSize.2xl[0]
+    "3xl": "text-3xl",
+    // Maps to fontSize.3xl[0]
+    "4xl": "text-4xl",
+    // Maps to fontSize.4xl[0]
+    "5xl": "text-5xl"
+    // Maps to fontSize.5xl[0]
   },
   /**
    * Font weights by weight variant
@@ -2951,6 +3308,8 @@ var TEXT_TOKENS = {
     // Maps to lineHeight.none
     tight: "leading-tight",
     // Maps to lineHeight.tight
+    snug: "leading-snug",
+    // Maps to lineHeight.snug
     normal: "leading-normal",
     // Maps to lineHeight.normal
     relaxed: "leading-relaxed",
@@ -3474,9 +3833,9 @@ var TOAST_TOKENS = {
       // Default opacity (hidden)
       groupHover: "group-hover:opacity-100",
       // Visible on group hover
-      focus: "focus:opacity-100",
+      focus: "focus-visible:opacity-100",
       // Visible on focus
-      focusRing: "focus:outline-none focus:ring-1"
+      focusRing: "focus-visible:outline-none focus-visible:ring-1"
       // Focus ring styling
     }
   }
@@ -4218,19 +4577,27 @@ var DROPDOWN_TOKENS = {
       // 256px
     }
   },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
   /**
    * Item tokens by size
    * Individual menu item
    */
   item: {
     background: {
-      focus: "focus:bg-[hsl(var(--accent))]",
+      focus: "focus-visible:bg-[hsl(var(--accent))]",
       // Focus background using CSS var
       selected: "bg-[hsl(var(--accent))]"
       // Selected background using CSS var
     },
     text: {
-      focus: "focus:text-[hsl(var(--accent-foreground))]",
+      focus: "focus-visible:text-[hsl(var(--accent-foreground))]",
       // Focus text using CSS var
       selected: "text-[hsl(var(--accent-foreground))]"
       // Selected text using CSS var
@@ -4482,9 +4849,9 @@ var SELECT_TOKENS = {
     indicator: {
       size: "size-4"},
     focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
+      background: "focus-visible:bg-[hsl(var(--accent))]",
       // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
+      text: "focus-visible:text-[hsl(var(--accent-foreground))]"
       // Focus text using CSS var
     },
     disabled: {
@@ -5027,26 +5394,314 @@ var MODAL_TOKENS = {
   }
 };
 
-// src/tokens/motion/v2.ts
-var motionV2Durations = {
-  fast: "150ms",
-  // Quick interactions
-  normal: "250ms",
-  // Default transitions
-  slow: "350ms",
-  // Emphasized animations
-  reduced: "0ms"
-  // For prefers-reduced-motion
-};
-var motionV2Easings = {
-  soft: "cubic-bezier(0.22, 1, 0.36, 1)",
-  // Gentle, smooth
-  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
-  // Material Design standard
-  emphasized: "cubic-bezier(0.2, 0, 0, 1)"
-  // Strong, decisive
-};
-var motionV2Transitions = {
+// src/tokens/components/table.ts
+var TABLE_TOKENS = {
+  /**
+   * Table cell and header padding by size
+   * Maps to semantic spacing tokens
+   */
+  padding: {
+    cell: {
+      sm: "p-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      md: "p-sm",
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+      lg: "p-md"
+      // 16px (1rem) - maps to semanticSpacing.md
+    },
+    header: {
+      sm: "px-xs py-sm",
+      // 4px horizontal, 8px vertical
+      md: "px-sm py-md",
+      // 8px horizontal, 16px vertical
+      lg: "px-md py-lg"
+      // 16px horizontal, 24px vertical
+    }
+  },
+  /**
+   * Border radius for table
+   */
+  radius: {
+    default: "rounded-md"
+    // 6px (0.375rem) - maps to borderRadius.md
+  },
+  /**
+   * Shadow tokens for table
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: {
+    // No shadow
+    subtle: "shadow-sm"
+    // Maps to elevationShadows.sm
+  },
+  /**
+   * Typography tokens for table headers and cells
+   * Maps to foundation typography fontSize tokens
+   */
+  typography: {
+    header: {
+      fontSize: "text-sm",
+      // Maps to fontSize.sm[0]
+      fontWeight: "font-semibold"
+      // Maps to fontWeight.semibold
+    },
+    cell: {
+      fontSize: "text-sm",
+      // Maps to fontSize.sm[0]
+      fontWeight: "font-normal"
+      // Maps to fontWeight.normal
+    }
+  },
+  /**
+   * Color tokens for table states
+   * Uses semantic color tokens
+   */
+  colors: {
+    border: "border-border",
+    // Border color
+    rowHover: "hover:bg-muted/50",
+    // Row hover background
+    rowSelected: "bg-muted"
+    // Selected row background
+  },
+  /**
+   * Border tokens for table
+   */
+  border: {
+    bottom: "border-b"
+    // Border bottom for rows and headers
+  },
+  /**
+   * Layout tokens for table container and base styles
+   */
+  layout: {
+    overflow: "overflow-x-auto",
+    // Table container overflow
+    table: "w-full border-collapse"
+    // Table base styles
+  },
+  /**
+   * Sticky header tokens
+   * For sticky header positioning and styling
+   */
+  sticky: {
+    header: "sticky top-0 z-10 bg-background"
+    // Sticky header styles
+  },
+  /**
+   * Expandable row tokens
+   * For expandable content styling
+   */
+  expandable: {
+    padding: "p-md",
+    // Expandable content padding - maps to semanticSpacing.md
+    container: "p-0",
+    // Expandable container padding
+    transition: "overflow-hidden transition-all duration-normal ease-in-out",
+    // Transition styles
+    expanded: "max-h-[100vh] opacity-100",
+    // Expanded state
+    collapsed: "max-h-0 opacity-0",
+    // Collapsed state
+    cursor: "cursor-pointer",
+    // Cursor for expandable rows
+    content: {
+      expanded: "block",
+      // Expanded content display
+      collapsed: "hidden"
+      // Collapsed content display
+    }
+  },
+  /**
+   * Loading state tokens
+   * For loading state cell styling
+   */
+  loading: {
+    cellPadding: "p-sm",
+    // Loading state cell padding - maps to semanticSpacing.sm
+    skeletonWidth: "w-full"
+    // Skeleton width
+  },
+  /**
+   * Empty state tokens
+   * For empty state cell styling
+   */
+  empty: {
+    padding: "p-8"
+    // Empty state padding - maps to semanticSpacing.2xl
+  },
+  /**
+   * Sortable header tokens
+   * For sortable header styling and interactions
+   */
+  sortable: {
+    hover: "hover:bg-muted/50",
+    // Sortable header hover
+    gap: "gap-2",
+    // Sort icon gap - maps to semanticSpacing.sm
+    cursor: "cursor-pointer select-none",
+    // Sortable cursor
+    container: "flex items-center",
+    // Sortable header container
+    icon: {
+      base: "inline-flex size-4 items-center text-muted-foreground transition-transform",
+      // Sort icon base styles
+      rotated: "rotate-180",
+      // Rotated state (descending)
+      inactive: "opacity-30"
+      // Inactive state (no sort)
+    }
+  }
+};
+
+// src/tokens/components/data-list.ts
+var DATA_LIST_TOKENS = {
+  /**
+   * Spacing tokens for DataList
+   * Maps to semantic spacing tokens
+   */
+  spacing: {
+    gap: "gap-md"},
+  /**
+   * Label width tokens (for desktop horizontal layout)
+   * Maps to Tailwind width utilities
+   */
+  labelWidth: {
+    // 96px (6rem) - small label width
+    md: "w-32"},
+  /**
+   * Row padding tokens
+   * Maps to semantic spacing tokens
+   */
+  rowPadding: {
+    sm: "py-xs",
+    // 4px (0.25rem) - maps to semanticSpacing.xs
+    md: "py-sm",
+    // 8px (0.5rem) - maps to semanticSpacing.sm
+    lg: "py-md"
+    // 16px (1rem) - maps to semanticSpacing.md
+  },
+  /**
+   * Item tokens
+   * For individual DataList item styling
+   */
+  item: {
+    /**
+     * Border tokens for items
+     */
+    border: "border-b border-border last:border-0",
+    // Item borders
+    /**
+     * Responsive layout tokens
+     */
+    layout: {
+      mobile: "flex flex-col",
+      // Mobile layout - vertical
+      desktop: "md:flex-row md:items-center"
+      // Desktop layout - horizontal
+    }
+  },
+  /**
+   * Label tokens
+   * For DataList label styling
+   */
+  label: {
+    mobile: "mb-1 font-semibold text-foreground",
+    // Mobile label styles
+    desktop: "md:mb-0"
+    // Desktop label margin override
+  },
+  /**
+   * Value tokens
+   * For DataList value styling
+   */
+  value: {
+    color: "text-muted-foreground",
+    // Value text color
+    flex: "flex-1"
+    // Value flex grow
+  }
+};
+
+// src/tokens/components/empty-state.ts
+var EMPTY_STATE_TOKENS = {
+  /**
+   * Spacing tokens for EmptyState
+   * Maps to semantic spacing tokens
+   */
+  spacing: {
+    // 24px (1.5rem) - container padding - maps to semanticSpacing.lg
+    action: "mt-2"
+    // Action button margin top - maps to semanticSpacing.xs
+  },
+  /**
+   * Icon sizes by variant
+   * Maps to Tailwind size utilities
+   */
+  icon: {
+    size: {
+      sm: "size-8",
+      // 32px (2rem)
+      md: "size-12",
+      // 48px (3rem)
+      lg: "size-16"
+      // 64px (4rem)
+    },
+    container: "flex items-center justify-center text-muted-foreground"
+    // Icon container styles
+  },
+  /**
+   * Typography tokens for EmptyState
+   * Maps to foundation typography tokens
+   */
+  typography: {
+    title: {
+      fontSize: "text-lg",
+      // Maps to fontSize.lg[0]
+      fontWeight: "font-semibold",
+      // Maps to fontWeight.semibold
+      color: "text-foreground"
+      // Title text color
+    },
+    description: {
+      fontSize: "text-sm",
+      // Maps to fontSize.sm[0]
+      fontWeight: "font-normal",
+      // Maps to fontWeight.normal
+      color: "text-muted-foreground",
+      // Description text color
+      maxWidth: "max-w-md"
+      // Maximum width for description
+    }
+  },
+  /**
+   * Alignment tokens
+   * For text alignment in EmptyState
+   */
+  alignment: {
+    center: "text-center"}
+};
+
+// src/tokens/motion/v2.ts
+var motionV2Durations = {
+  fast: "150ms",
+  // Quick interactions
+  normal: "250ms",
+  // Default transitions
+  slow: "350ms",
+  // Emphasized animations
+  reduced: "0ms"
+  // For prefers-reduced-motion
+};
+var motionV2Easings = {
+  soft: "cubic-bezier(0.22, 1, 0.36, 1)",
+  // Gentle, smooth
+  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Material Design standard
+  emphasized: "cubic-bezier(0.2, 0, 0, 1)"
+  // Strong, decisive
+};
+var motionV2Transitions = {
   fast: `${motionV2Durations.fast} ${motionV2Easings.standard}`,
   normal: `${motionV2Durations.normal} ${motionV2Easings.standard}`,
   slow: `${motionV2Durations.slow} ${motionV2Easings.emphasized}`,
@@ -5294,54 +5949,54 @@ var transitions = {
 var keyframes = {
   // Fade animations
   fadeIn: {
-    from: { opacity: 0 },
-    to: { opacity: 1 }
+    from: { opacity: "0" },
+    to: { opacity: "1" }
   },
   fadeOut: {
-    from: { opacity: 1 },
-    to: { opacity: 0 }
+    from: { opacity: "1" },
+    to: { opacity: "0" }
   },
   // Slide animations
   slideInUp: {
-    from: { transform: "translateY(100%)", opacity: 0 },
-    to: { transform: "translateY(0)", opacity: 1 }
+    from: { transform: "translateY(100%)", opacity: "0" },
+    to: { transform: "translateY(0)", opacity: "1" }
   },
   slideInDown: {
-    from: { transform: "translateY(-100%)", opacity: 0 },
-    to: { transform: "translateY(0)", opacity: 1 }
+    from: { transform: "translateY(-100%)", opacity: "0" },
+    to: { transform: "translateY(0)", opacity: "1" }
   },
   slideInLeft: {
-    from: { transform: "translateX(-100%)", opacity: 0 },
-    to: { transform: "translateX(0)", opacity: 1 }
+    from: { transform: "translateX(-100%)", opacity: "0" },
+    to: { transform: "translateX(0)", opacity: "1" }
   },
   slideInRight: {
-    from: { transform: "translateX(100%)", opacity: 0 },
-    to: { transform: "translateX(0)", opacity: 1 }
+    from: { transform: "translateX(100%)", opacity: "0" },
+    to: { transform: "translateX(0)", opacity: "1" }
   },
   slideOutUp: {
-    from: { transform: "translateY(0)", opacity: 1 },
-    to: { transform: "translateY(-100%)", opacity: 0 }
+    from: { transform: "translateY(0)", opacity: "1" },
+    to: { transform: "translateY(-100%)", opacity: "0" }
   },
   slideOutDown: {
-    from: { transform: "translateY(0)", opacity: 1 },
-    to: { transform: "translateY(100%)", opacity: 0 }
+    from: { transform: "translateY(0)", opacity: "1" },
+    to: { transform: "translateY(100%)", opacity: "0" }
   },
   slideOutLeft: {
-    from: { transform: "translateX(0)", opacity: 1 },
-    to: { transform: "translateX(-100%)", opacity: 0 }
+    from: { transform: "translateX(0)", opacity: "1" },
+    to: { transform: "translateX(-100%)", opacity: "0" }
   },
   slideOutRight: {
-    from: { transform: "translateX(0)", opacity: 1 },
-    to: { transform: "translateX(100%)", opacity: 0 }
+    from: { transform: "translateX(0)", opacity: "1" },
+    to: { transform: "translateX(100%)", opacity: "0" }
   },
   // Scale animations
   scaleIn: {
-    from: { transform: "scale(0.95)", opacity: 0 },
-    to: { transform: "scale(1)", opacity: 1 }
+    from: { transform: "scale(0.95)", opacity: "0" },
+    to: { transform: "scale(1)", opacity: "1" }
   },
   scaleOut: {
-    from: { transform: "scale(1)", opacity: 1 },
-    to: { transform: "scale(0.95)", opacity: 0 }
+    from: { transform: "scale(1)", opacity: "1" },
+    to: { transform: "scale(0.95)", opacity: "0" }
   },
   scaleUp: {
     from: { transform: "scale(1)" },
@@ -5362,8 +6017,8 @@ var keyframes = {
   },
   // Pulse and bounce
   pulse: {
-    "0%, 100%": { opacity: 1 },
-    "50%": { opacity: 0.5 }
+    "0%, 100%": { opacity: "1" },
+    "50%": { opacity: "0.5" }
   },
   bounce: {
     "0%, 100%": {
@@ -5385,7 +6040,7 @@ var keyframes = {
   ping: {
     "75%, 100%": {
       transform: "scale(2)",
-      opacity: 0
+      opacity: "0"
     }
   },
   // Accordion animations (for Radix UI)
@@ -6344,41 +6999,179 @@ var tokenSystemSummary = {
 
 // src/tokens/theme.ts
 var UI_COLORS = tailwindThemeColors;
+var FORBIDDEN_PATTERNS = [
+  // Raw color utilities (bg-red-500, text-blue-600, etc.)
+  // These are always forbidden as they bypass the color token system
+  /\b(bg|text|border|ring|outline)-(red|blue|green|yellow|purple|pink|indigo|gray|slate|zinc|neutral|stone|orange|amber|emerald|teal|cyan|sky|violet|fuchsia|rose)-\d+/,
+  // Raw spacing utilities with arbitrary numbers (p-4, m-2, gap-3, etc.)
+  // Allow semantic spacing tokens (px-sm, py-md, etc.) which use token names
+  /\b(p|m|px|py|pt|pb|pl|pr|mx|my|mt|mb|ml|mr|gap|space-[xy])-(\d+|\[)/,
+  // Raw size utilities with arbitrary numbers (w-4, h-6, etc.)
+  // Allow semantic size tokens (h-8, w-9, etc.) which are standard design system values
+  // Only flag arbitrary values like w-[123px] or h-[calc(...)]
+  /\b(w|h|min-w|min-h|max-w|max-h)-\[/
+];
+function validateTokenUsage(classes, context) {
+  if (process.env.NODE_ENV === "production") {
+    return;
+  }
+  for (const pattern of FORBIDDEN_PATTERNS) {
+    if (pattern.test(classes)) {
+      console.warn(
+        `[tokenCVA] Potential hardcoded Tailwind utility detected in ${context}:
+  "${classes}"
+  Pattern: ${pattern}
+  Please use token-based utilities instead (e.g., from component tokens).`
+      );
+    }
+  }
+}
+function validateVariantConfig(value, path, visited = /* @__PURE__ */ new Set()) {
+  if (value === void 0 || value === null) {
+    return;
+  }
+  const key = `${path}-${String(value)}`;
+  if (visited.has(key)) {
+    return;
+  }
+  visited.add(key);
+  if (typeof value === "string") {
+    validateTokenUsage(value, path);
+  } else if (Array.isArray(value)) {
+    value.forEach((item, index2) => {
+      validateVariantConfig(item, `${path}[${index2}]`, visited);
+    });
+  } else if (typeof value === "object") {
+    Object.entries(value).forEach(([key2, val]) => {
+      validateVariantConfig(val, `${path}.${key2}`, visited);
+    });
+  }
+}
+function tokenCVA(config) {
+  if (process.env.NODE_ENV !== "production") {
+    if (config.base) {
+      validateVariantConfig(config.base, "base");
+    }
+    if (config.variants) {
+      Object.entries(config.variants).forEach(([variantKey, variantValues]) => {
+        Object.entries(variantValues).forEach(([valueKey, value]) => {
+          validateVariantConfig(value, `variants.${variantKey}.${valueKey}`);
+        });
+      });
+    }
+    if (config.compoundVariants) {
+      config.compoundVariants.forEach((compound, index2) => {
+        if (compound.class) {
+          validateVariantConfig(compound.class, `compoundVariants[${index2}].class`);
+        }
+        if (compound.className) {
+          validateVariantConfig(compound.className, `compoundVariants[${index2}].className`);
+        }
+      });
+    }
+  }
+  return cva(config.base, {
+    variants: config.variants,
+    compoundVariants: config.compoundVariants,
+    defaultVariants: config.defaultVariants
+  });
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var buttonVariants = cva(
-  `inline-flex items-center justify-center ${BUTTON_TOKENS.gap} whitespace-nowrap ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.fontSize.md} font-medium ${BUTTON_TOKENS.transition.colors} focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:${BUTTON_TOKENS.iconSize} [&_svg]:shrink-0`,
-  {
-    variants: {
-      variant: {
-        primary: `${BUTTON_TOKENS.variant.primary.background} ${BUTTON_TOKENS.variant.primary.text} ${BUTTON_TOKENS.shadow.primary} ${BUTTON_TOKENS.variant.primary.hover}`,
-        secondary: `${BUTTON_TOKENS.variant.secondary.background} ${BUTTON_TOKENS.variant.secondary.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.secondary.hover}`,
-        accent: `${BUTTON_TOKENS.variant.accent.background} ${BUTTON_TOKENS.variant.accent.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.accent.hover}`,
-        outline: `${BUTTON_TOKENS.variant.outline.border} ${BUTTON_TOKENS.variant.outline.background} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.outline.hover.background} ${BUTTON_TOKENS.variant.outline.hover.text}`,
-        ghost: `${BUTTON_TOKENS.variant.ghost.hover.background} ${BUTTON_TOKENS.variant.ghost.hover.text}`,
-        destructive: `${BUTTON_TOKENS.variant.destructive.background} ${BUTTON_TOKENS.variant.destructive.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.destructive.hover}`
-      },
-      size: {
-        sm: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm}`,
-        md: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.md}`,
-        lg: `${BUTTON_TOKENS.height.lg} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.lg} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.lg}`,
-        icon: `${BUTTON_TOKENS.height.icon} ${BUTTON_TOKENS.width.icon}`
-      }
+function formatDate(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(date));
+}
+var buttonVariants = tokenCVA({
+  base: `inline-flex items-center justify-center whitespace-nowrap ${BUTTON_TOKENS.radius} font-medium ${BUTTON_TOKENS.transition.colors} ${BUTTON_TOKENS.state.focus.outline} ${BUTTON_TOKENS.state.focus.ring} ${BUTTON_TOKENS.state.disabled.cursor} ${BUTTON_TOKENS.state.disabled.pointerEvents} [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+  variants: {
+    variant: {
+      primary: `${BUTTON_TOKENS.variant.primary.background} ${BUTTON_TOKENS.variant.primary.text} ${BUTTON_TOKENS.shadow.primary} ${BUTTON_TOKENS.variant.primary.hover} ${BUTTON_TOKENS.variant.primary.active} ${BUTTON_TOKENS.variant.primary.focus} ${BUTTON_TOKENS.variant.primary.disabled.background} ${BUTTON_TOKENS.variant.primary.disabled.text}`,
+      secondary: `${BUTTON_TOKENS.variant.secondary.background} ${BUTTON_TOKENS.variant.secondary.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.secondary.hover} ${BUTTON_TOKENS.variant.secondary.active} ${BUTTON_TOKENS.variant.secondary.disabled.background} ${BUTTON_TOKENS.variant.secondary.disabled.text}`,
+      accent: `${BUTTON_TOKENS.variant.accent.background} ${BUTTON_TOKENS.variant.accent.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.accent.hover} ${BUTTON_TOKENS.variant.accent.active} ${BUTTON_TOKENS.variant.accent.disabled.background} ${BUTTON_TOKENS.variant.accent.disabled.text}`,
+      outline: `${BUTTON_TOKENS.variant.outline.border} ${BUTTON_TOKENS.variant.outline.background} ${BUTTON_TOKENS.variant.outline.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.outline.hover.background} ${BUTTON_TOKENS.variant.outline.hover.text} ${BUTTON_TOKENS.variant.outline.hover.border} ${BUTTON_TOKENS.variant.outline.active.background} ${BUTTON_TOKENS.variant.outline.active.text} ${BUTTON_TOKENS.variant.outline.active.border} ${BUTTON_TOKENS.variant.outline.disabled.background} ${BUTTON_TOKENS.variant.outline.disabled.text} ${BUTTON_TOKENS.variant.outline.disabled.border}`,
+      ghost: `${BUTTON_TOKENS.variant.ghost.background} ${BUTTON_TOKENS.variant.ghost.text} ${BUTTON_TOKENS.variant.ghost.hover.background} ${BUTTON_TOKENS.variant.ghost.hover.text} ${BUTTON_TOKENS.variant.ghost.active.background} ${BUTTON_TOKENS.variant.ghost.active.text} ${BUTTON_TOKENS.variant.ghost.disabled.background} ${BUTTON_TOKENS.variant.ghost.disabled.text}`,
+      destructive: `${BUTTON_TOKENS.variant.destructive.background} ${BUTTON_TOKENS.variant.destructive.text} ${BUTTON_TOKENS.shadow.default} ${BUTTON_TOKENS.variant.destructive.hover} ${BUTTON_TOKENS.variant.destructive.active} ${BUTTON_TOKENS.variant.destructive.disabled.background} ${BUTTON_TOKENS.variant.destructive.disabled.text}`
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
+    size: {
+      sm: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm} ${BUTTON_TOKENS.gap.sm} [&_svg]:${BUTTON_TOKENS.iconSize.sm}`,
+      md: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.md} ${BUTTON_TOKENS.gap.md} [&_svg]:${BUTTON_TOKENS.iconSize.md}`,
+      lg: `${BUTTON_TOKENS.height.lg} ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.padding.horizontal.lg} ${BUTTON_TOKENS.padding.vertical.md} ${BUTTON_TOKENS.fontSize.lg} ${BUTTON_TOKENS.gap.lg} [&_svg]:${BUTTON_TOKENS.iconSize.lg}`,
+      icon: `${BUTTON_TOKENS.height.icon} ${BUTTON_TOKENS.width.icon} [&_svg]:${BUTTON_TOKENS.iconSize.icon}`
     }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
   }
-);
+});
 var Button = React49.forwardRef(
   ({ className, variant, size: size3, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsxs(Comp, { className: cn(buttonVariants({ variant, size: size3, className })), ref, ...props, children: [
-      leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: leftIcon }),
+    const finalClassName = cn(buttonVariants({ variant, size: size3, className }));
+    const iconSizeMap = {
+      "size-3.5": "[&_svg]:w-3.5 [&_svg]:h-3.5",
+      "size-4": "[&_svg]:w-4 [&_svg]:h-4",
+      "size-5": "[&_svg]:w-5 [&_svg]:h-5"
+    };
+    const iconSizeToken = size3 ? BUTTON_TOKENS.iconSize[size3] : BUTTON_TOKENS.iconSize.md;
+    const iconSizeClass = iconSizeMap[iconSizeToken] || "[&_svg]:w-4 [&_svg]:h-4";
+    if (typeof window !== "undefined" && variant === "primary") {
+      const hasHoverClass = finalClassName.includes(
+        "hover:bg-[hsl(var(--button-primary-hover-bg))]"
+      );
+      const hasActiveClass = finalClassName.includes(
+        "active:bg-[hsl(var(--button-primary-active-bg))]"
+      );
+      fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          location: "button.tsx:137",
+          message: "Button className check (State Authority Contract)",
+          data: {
+            variant,
+            size: size3,
+            className: finalClassName,
+            hasHoverClass,
+            hasActiveClass,
+            hoverClassInString: finalClassName.includes("hover"),
+            allClasses: finalClassName.split(" ").filter((c) => c.includes("hover") || c.includes("active") || c.includes("disabled"))
+          },
+          timestamp: Date.now(),
+          sessionId: "debug-session",
+          runId: "state-authority-contract",
+          hypothesisId: "A"
+        })
+      }).catch(() => {
+      });
+    }
+    return /* @__PURE__ */ jsxs(Comp, { className: finalClassName, ref, ...props, children: [
+      leftIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
+            iconSizeClass
+          ),
+          children: leftIcon
+        }
+      ),
       children,
-      rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
+      rightIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none relative z-10 inline-flex items-center [&_svg]:text-current",
+            iconSizeClass
+          ),
+          children: rightIcon
+        }
+      )
     ] });
   }
 );
@@ -6473,14 +7266,14 @@ Alert.displayName = "Alert";
 var bodyVariants = cva("font-sans text-foreground", {
   variants: {
     size: {
-      md: "text-md leading-relaxed tracking-normal",
-      lg: "text-lg leading-relaxed tracking-normal"
+      md: `${TEXT_TOKENS.fontSize.md} ${TEXT_TOKENS.lineHeight.relaxed} ${TEXT_TOKENS.letterSpacing.normal}`,
+      lg: `${TEXT_TOKENS.fontSize.lg} ${TEXT_TOKENS.lineHeight.relaxed} ${TEXT_TOKENS.letterSpacing.normal}`
     },
     weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
+      normal: TEXT_TOKENS.fontWeight.normal,
+      medium: TEXT_TOKENS.fontWeight.medium,
+      semibold: TEXT_TOKENS.fontWeight.semibold,
+      bold: TEXT_TOKENS.fontWeight.bold
     },
     muted: {
       true: "text-muted-foreground",
@@ -6508,22 +7301,31 @@ var Body = React49.forwardRef(
   }
 );
 Body.displayName = "Body";
-var captionVariants = cva("font-sans text-foreground", {
-  variants: {
-    weight: {
-      normal: "font-normal",
-      medium: "font-medium"
+var captionVariants = cva(
+  [
+    "font-sans",
+    "text-foreground",
+    TEXT_TOKENS.fontSize.xs,
+    TEXT_TOKENS.lineHeight.tight,
+    TEXT_TOKENS.letterSpacing.wide
+  ].filter(Boolean).join(" "),
+  {
+    variants: {
+      weight: {
+        normal: TEXT_TOKENS.fontWeight.normal,
+        medium: TEXT_TOKENS.fontWeight.medium
+      },
+      muted: {
+        true: "text-muted-foreground",
+        false: ""
+      }
     },
-    muted: {
-      true: "text-muted-foreground",
-      false: ""
+    defaultVariants: {
+      weight: "normal",
+      muted: true
     }
-  },
-  defaultVariants: {
-    weight: "normal",
-    muted: true
   }
-});
+);
 var Caption = React49.forwardRef(
   ({ className, weight, muted, as = "span", children, ...props }, ref) => {
     const Component = as;
@@ -6531,11 +7333,7 @@ var Caption = React49.forwardRef(
       Component,
       {
         ref,
-        className: cn(
-          "text-xs leading-tight tracking-wide",
-          captionVariants({ weight, muted }),
-          className
-        ),
+        className: cn(captionVariants({ weight, muted }), className),
         ...props,
         children
       }
@@ -6543,11 +7341,43 @@ var Caption = React49.forwardRef(
   }
 );
 Caption.displayName = "Caption";
+
+// src/tokens/components/code.ts
+var CODE_TOKENS = {
+  /**
+   * Background color tokens
+   * Uses semantic color tokens
+   */
+  background: {
+    muted: "bg-muted"
+    // Muted background for code blocks
+  },
+  /**
+   * Border radius tokens
+   * Maps to foundation borderRadius tokens
+   */
+  radius: {
+    inline: "rounded",
+    // Small radius for inline code
+    block: "rounded-md"
+    // Medium radius for code blocks
+  },
+  /**
+   * Padding tokens
+   * Maps to foundation spacing tokens
+   */
+  padding: {
+    inline: "px-xs py-0.5",
+    // 4px horizontal, 4px vertical for inline code
+    block: "p-md"
+    // 16px padding for code blocks
+  }
+};
 var codeVariants = cva("font-mono text-foreground", {
   variants: {
     variant: {
-      inline: "rounded bg-muted px-xs py-0.5 text-sm font-semibold",
-      block: "block rounded-md bg-muted p-md text-sm font-semibold"
+      inline: `${CODE_TOKENS.radius.inline} ${CODE_TOKENS.background.muted} ${CODE_TOKENS.padding.inline} ${TEXT_TOKENS.fontSize.sm} ${TEXT_TOKENS.fontWeight.semibold}`,
+      block: `block ${CODE_TOKENS.radius.block} ${CODE_TOKENS.background.muted} ${CODE_TOKENS.padding.block} ${TEXT_TOKENS.fontSize.sm} ${TEXT_TOKENS.fontWeight.semibold}`
     },
     muted: {
       true: "text-muted-foreground",
@@ -6577,19 +7407,19 @@ Code.displayName = "Code";
 var displayVariants = cva("font-display text-foreground", {
   variants: {
     size: {
-      xl: "text-xl leading-normal tracking-normal",
-      "2xl": "text-2xl leading-tight tracking-tight",
-      "3xl": "text-3xl leading-tight tracking-tight",
-      "4xl": "text-4xl leading-none tracking-tight"
+      xl: `${TEXT_TOKENS.fontSize.xl} ${TEXT_TOKENS.lineHeight.normal} ${TEXT_TOKENS.letterSpacing.normal}`,
+      "2xl": `${TEXT_TOKENS.fontSize["2xl"]} ${TEXT_TOKENS.lineHeight.tight} ${TEXT_TOKENS.letterSpacing.tight}`,
+      "3xl": `${TEXT_TOKENS.fontSize["3xl"]} ${TEXT_TOKENS.lineHeight.tight} ${TEXT_TOKENS.letterSpacing.tight}`,
+      "4xl": `${TEXT_TOKENS.fontSize["4xl"]} ${TEXT_TOKENS.lineHeight.none} ${TEXT_TOKENS.letterSpacing.tight}`
     },
     weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
-    },
-    muted: {
-      true: "text-muted-foreground",
+      normal: TEXT_TOKENS.fontWeight.normal,
+      medium: TEXT_TOKENS.fontWeight.medium,
+      semibold: TEXT_TOKENS.fontWeight.semibold,
+      bold: TEXT_TOKENS.fontWeight.bold
+    },
+    muted: {
+      true: "text-muted-foreground",
       false: ""
     }
   },
@@ -6618,149 +7448,87 @@ var Display = React49.forwardRef(
   }
 );
 Display.displayName = "Display";
+var levelConfig = {
+  1: [
+    TEXT_TOKENS.fontSize["5xl"],
+    TEXT_TOKENS.fontWeight.bold,
+    TEXT_TOKENS.lineHeight.tight,
+    TEXT_TOKENS.letterSpacing.tight
+  ],
+  2: [
+    TEXT_TOKENS.fontSize["4xl"],
+    TEXT_TOKENS.fontWeight.bold,
+    TEXT_TOKENS.lineHeight.tight,
+    TEXT_TOKENS.letterSpacing.tight
+  ],
+  3: [
+    TEXT_TOKENS.fontSize["3xl"],
+    TEXT_TOKENS.fontWeight.semibold,
+    TEXT_TOKENS.lineHeight.snug,
+    TEXT_TOKENS.letterSpacing.normal
+  ],
+  4: [
+    TEXT_TOKENS.fontSize["2xl"],
+    TEXT_TOKENS.fontWeight.semibold,
+    TEXT_TOKENS.lineHeight.snug,
+    TEXT_TOKENS.letterSpacing.normal
+  ],
+  5: [
+    TEXT_TOKENS.fontSize.xl,
+    TEXT_TOKENS.fontWeight.medium,
+    TEXT_TOKENS.lineHeight.normal,
+    TEXT_TOKENS.letterSpacing.normal
+  ],
+  6: [
+    TEXT_TOKENS.fontSize.lg,
+    TEXT_TOKENS.fontWeight.medium,
+    TEXT_TOKENS.lineHeight.normal,
+    TEXT_TOKENS.letterSpacing.normal
+  ]
+};
+var levelVariants = Object.entries(levelConfig).reduce(
+  (acc, [level, [fontSize2, defaultWeight, lineHeight2, letterSpacing2]]) => {
+    acc[Number(level)] = `${fontSize2} ${defaultWeight} ${lineHeight2} ${letterSpacing2}`;
+    return acc;
+  },
+  {}
+);
+var generateWeightVariants = () => {
+  const weights = [
+    "normal",
+    "medium",
+    "semibold",
+    "bold"
+  ];
+  const levels = [1, 2, 3, 4, 5, 6];
+  const variants = [];
+  for (const level of levels) {
+    const [fontSize2, , lineHeight2, letterSpacing2] = levelConfig[level];
+    for (const weight of weights) {
+      variants.push({
+        level,
+        weight,
+        class: `${fontSize2} ${TEXT_TOKENS.fontWeight[weight]} ${lineHeight2} ${letterSpacing2}`
+      });
+    }
+  }
+  return variants;
+};
 var headingVariants = cva("font-display text-foreground", {
   variants: {
-    level: {
-      1: "text-5xl font-bold leading-tight tracking-tight",
-      2: "text-4xl font-bold leading-tight tracking-tight",
-      3: "text-3xl font-semibold leading-snug tracking-normal",
-      4: "text-2xl font-semibold leading-snug tracking-normal",
-      5: "text-xl font-medium leading-normal tracking-normal",
-      6: "text-lg font-medium leading-normal tracking-normal"
-    },
+    level: levelVariants,
     weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
+      normal: TEXT_TOKENS.fontWeight.normal,
+      medium: TEXT_TOKENS.fontWeight.medium,
+      semibold: TEXT_TOKENS.fontWeight.semibold,
+      bold: TEXT_TOKENS.fontWeight.bold
     },
     muted: {
       true: "text-muted-foreground",
       false: ""
     }
   },
-  compoundVariants: [
-    {
-      level: 1,
-      weight: "normal",
-      class: "text-5xl font-normal"
-    },
-    {
-      level: 1,
-      weight: "medium",
-      class: "text-5xl font-medium"
-    },
-    {
-      level: 1,
-      weight: "semibold",
-      class: "text-5xl font-semibold"
-    },
-    {
-      level: 1,
-      weight: "bold",
-      class: "text-5xl font-bold"
-    },
-    {
-      level: 2,
-      weight: "normal",
-      class: "text-4xl font-normal"
-    },
-    {
-      level: 2,
-      weight: "medium",
-      class: "text-4xl font-medium"
-    },
-    {
-      level: 2,
-      weight: "semibold",
-      class: "text-4xl font-semibold"
-    },
-    {
-      level: 2,
-      weight: "bold",
-      class: "text-4xl font-bold"
-    },
-    {
-      level: 3,
-      weight: "normal",
-      class: "text-3xl font-normal"
-    },
-    {
-      level: 3,
-      weight: "medium",
-      class: "text-3xl font-medium"
-    },
-    {
-      level: 3,
-      weight: "semibold",
-      class: "text-3xl font-semibold"
-    },
-    {
-      level: 3,
-      weight: "bold",
-      class: "text-3xl font-bold"
-    },
-    {
-      level: 4,
-      weight: "normal",
-      class: "text-2xl font-normal"
-    },
-    {
-      level: 4,
-      weight: "medium",
-      class: "text-2xl font-medium"
-    },
-    {
-      level: 4,
-      weight: "semibold",
-      class: "text-2xl font-semibold"
-    },
-    {
-      level: 4,
-      weight: "bold",
-      class: "text-2xl font-bold"
-    },
-    {
-      level: 5,
-      weight: "normal",
-      class: "text-xl font-normal"
-    },
-    {
-      level: 5,
-      weight: "medium",
-      class: "text-xl font-medium"
-    },
-    {
-      level: 5,
-      weight: "semibold",
-      class: "text-xl font-semibold"
-    },
-    {
-      level: 5,
-      weight: "bold",
-      class: "text-xl font-bold"
-    },
-    {
-      level: 6,
-      weight: "normal",
-      class: "text-lg font-normal"
-    },
-    {
-      level: 6,
-      weight: "medium",
-      class: "text-lg font-medium"
-    },
-    {
-      level: 6,
-      weight: "semibold",
-      class: "text-lg font-semibold"
-    },
-    {
-      level: 6,
-      weight: "bold",
-      class: "text-lg font-bold"
-    }
-  ],
+  compoundVariants: generateWeightVariants(),
   defaultVariants: {
     level: 1,
     muted: false
@@ -6784,8 +7552,8 @@ Heading.displayName = "Heading";
 var leadVariants = cva("font-sans text-foreground", {
   variants: {
     size: {
-      lg: "text-lg leading-normal tracking-normal",
-      xl: "text-xl leading-normal tracking-normal"
+      lg: `${TEXT_TOKENS.fontSize.lg} ${TEXT_TOKENS.lineHeight.normal} ${TEXT_TOKENS.letterSpacing.normal}`,
+      xl: `${TEXT_TOKENS.fontSize.xl} ${TEXT_TOKENS.lineHeight.normal} ${TEXT_TOKENS.letterSpacing.normal}`
     },
     muted: {
       true: "text-muted-foreground",
@@ -6922,7 +7690,7 @@ function getSpacingPx(token) {
   return 4;
 }
 var selectTriggerVariants = cva(
-  `flex items-center justify-between outline-none ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed [&>span]:line-clamp-1`,
+  `flex items-center justify-between outline-none ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed [&>span]:line-clamp-1`,
   {
     variants: {
       size: {
@@ -7381,7 +8149,7 @@ var ModalClose = React49.forwardRef(
           MODAL_TOKENS.close.radius,
           MODAL_TOKENS.close.opacity.default,
           MODAL_TOKENS.close.opacity.hover,
-          "ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+          "ring-offset-background transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
           className
         ),
         ...props,
@@ -7973,8 +8741,10 @@ var Input = React49.forwardRef(
       }
       return void 0;
     });
+    const baseVariant = getBaseValue(variant);
+    const baseSize = getBaseValue(size3);
     const inputClasses = cn(
-      inputVariants({ variant, size: size3, state, fullWidth }),
+      inputVariants({ variant: baseVariant, size: baseSize, state, fullWidth }),
       // Add padding for icons if present
       iconLeft && INPUT_TOKENS.icon.paddingLeft,
       iconRight && INPUT_TOKENS.icon.paddingRight,
@@ -8312,31 +9082,31 @@ var Radio = React49.forwardRef(
 );
 Radio.displayName = "Radio";
 var textareaVariants = cva(
-  `flex min-h-[80px] ${INPUT_TOKENS.shadow} ${MOTION_TOKENS.transition.colors} disabled:cursor-not-allowed focus-visible:outline-none resize-y`,
+  `flex min-h-[80px] ${TEXTAREA_TOKENS.shadow} ${MOTION_TOKENS.transition.colors} disabled:cursor-not-allowed focus-visible:outline-none resize-y`,
   {
     variants: {
       variant: {
-        primary: `${INPUT_TOKENS.variant.primary.border} ${INPUT_TOKENS.variant.primary.background} ${INPUT_TOKENS.variant.primary.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.primary.focus}`,
-        secondary: `${INPUT_TOKENS.variant.secondary.border} ${INPUT_TOKENS.variant.secondary.background} ${INPUT_TOKENS.variant.secondary.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.secondary.focus}`,
-        outline: `${INPUT_TOKENS.variant.outline.border} ${INPUT_TOKENS.variant.outline.background} ${INPUT_TOKENS.variant.outline.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.outline.focus}`,
-        ghost: `${INPUT_TOKENS.variant.ghost.border} ${INPUT_TOKENS.variant.ghost.background} ${INPUT_TOKENS.variant.ghost.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.ghost.focus}`,
-        destructive: `${INPUT_TOKENS.variant.destructive.border} ${INPUT_TOKENS.variant.destructive.background} ${INPUT_TOKENS.variant.destructive.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.destructive.focus}`
+        primary: `${TEXTAREA_TOKENS.variant.primary.border} ${TEXTAREA_TOKENS.variant.primary.background} ${TEXTAREA_TOKENS.variant.primary.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.primary.focus}`,
+        secondary: `${TEXTAREA_TOKENS.variant.secondary.border} ${TEXTAREA_TOKENS.variant.secondary.background} ${TEXTAREA_TOKENS.variant.secondary.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.secondary.focus}`,
+        outline: `${TEXTAREA_TOKENS.variant.outline.border} ${TEXTAREA_TOKENS.variant.outline.background} ${TEXTAREA_TOKENS.variant.outline.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.outline.focus}`,
+        ghost: `${TEXTAREA_TOKENS.variant.ghost.border} ${TEXTAREA_TOKENS.variant.ghost.background} ${TEXTAREA_TOKENS.variant.ghost.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.ghost.focus}`,
+        destructive: `${TEXTAREA_TOKENS.variant.destructive.border} ${TEXTAREA_TOKENS.variant.destructive.background} ${TEXTAREA_TOKENS.variant.destructive.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.destructive.focus}`
       },
       size: {
-        xs: `${INPUT_TOKENS.size.xs.padding.horizontal} ${INPUT_TOKENS.size.xs.padding.vertical} ${INPUT_TOKENS.size.xs.radius} ${INPUT_TOKENS.size.xs.fontSize}`,
-        sm: `${INPUT_TOKENS.size.sm.padding.horizontal} ${INPUT_TOKENS.size.sm.padding.vertical} ${INPUT_TOKENS.size.sm.radius} ${INPUT_TOKENS.size.sm.fontSize}`,
-        md: `${INPUT_TOKENS.size.md.padding.horizontal} ${INPUT_TOKENS.size.md.padding.vertical} ${INPUT_TOKENS.size.md.radius} ${INPUT_TOKENS.size.md.fontSize} ${INPUT_TOKENS.size.md.fontSizeResponsive}`,
-        lg: `${INPUT_TOKENS.size.lg.padding.horizontal} ${INPUT_TOKENS.size.lg.padding.vertical} ${INPUT_TOKENS.size.lg.radius} ${INPUT_TOKENS.size.lg.fontSize}`,
-        xl: `${INPUT_TOKENS.size.xl.padding.horizontal} ${INPUT_TOKENS.size.xl.padding.vertical} ${INPUT_TOKENS.size.xl.radius} ${INPUT_TOKENS.size.xl.fontSize}`
+        xs: `${TEXTAREA_TOKENS.size.xs.padding.horizontal} ${TEXTAREA_TOKENS.size.xs.padding.vertical} ${TEXTAREA_TOKENS.size.xs.radius} ${TEXTAREA_TOKENS.size.xs.fontSize}`,
+        sm: `${TEXTAREA_TOKENS.size.sm.padding.horizontal} ${TEXTAREA_TOKENS.size.sm.padding.vertical} ${TEXTAREA_TOKENS.size.sm.radius} ${TEXTAREA_TOKENS.size.sm.fontSize}`,
+        md: `${TEXTAREA_TOKENS.size.md.padding.horizontal} ${TEXTAREA_TOKENS.size.md.padding.vertical} ${TEXTAREA_TOKENS.size.md.radius} ${TEXTAREA_TOKENS.size.md.fontSize} ${TEXTAREA_TOKENS.size.md.fontSizeResponsive}`,
+        lg: `${TEXTAREA_TOKENS.size.lg.padding.horizontal} ${TEXTAREA_TOKENS.size.lg.padding.vertical} ${TEXTAREA_TOKENS.size.lg.radius} ${TEXTAREA_TOKENS.size.lg.fontSize}`,
+        xl: `${TEXTAREA_TOKENS.size.xl.padding.horizontal} ${TEXTAREA_TOKENS.size.xl.padding.vertical} ${TEXTAREA_TOKENS.size.xl.radius} ${TEXTAREA_TOKENS.size.xl.fontSize}`
       },
       state: {
-        default: `${INPUT_TOKENS.state.border.default} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        error: `${INPUT_TOKENS.state.border.error} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        success: `${INPUT_TOKENS.state.border.success} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        disabled: `${INPUT_TOKENS.state.border.disabled} ${INPUT_TOKENS.state.background.disabled} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.text.disabled}`
+        default: `${TEXTAREA_TOKENS.state.border.default} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        error: `${TEXTAREA_TOKENS.state.border.error} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        success: `${TEXTAREA_TOKENS.state.border.success} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        disabled: `${TEXTAREA_TOKENS.state.border.disabled} ${TEXTAREA_TOKENS.state.background.disabled} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.text.disabled}`
       },
       fullWidth: {
-        true: INPUT_TOKENS.width.full,
+        true: TEXTAREA_TOKENS.width.full,
         false: ""
       }
     },
@@ -8380,7 +9150,7 @@ var Textarea = React49.forwardRef(
     const currentLength = typeof currentValue === "string" ? currentValue.length : 0;
     const shouldShowCounter = showCharacterCount && maxLength !== void 0;
     if (shouldShowCounter) {
-      return /* @__PURE__ */ jsxs("div", { className: cn("relative", fullWidth !== false && INPUT_TOKENS.width.full), children: [
+      return /* @__PURE__ */ jsxs("div", { className: cn("relative", fullWidth !== false && TEXTAREA_TOKENS.width.full), children: [
         /* @__PURE__ */ jsx(
           "textarea",
           {
@@ -8400,11 +9170,11 @@ var Textarea = React49.forwardRef(
           {
             className: cn(
               "absolute",
-              INPUT_TOKENS.message.position.bottom,
-              INPUT_TOKENS.message.position.right,
+              TEXTAREA_TOKENS.message.position.bottom,
+              TEXTAREA_TOKENS.message.position.right,
               TEXT_TOKENS.fontSize.xs,
-              INPUT_TOKENS.message.color.default,
-              currentLength > maxLength && INPUT_TOKENS.message.color.error
+              TEXTAREA_TOKENS.message.color.default,
+              currentLength > maxLength && TEXTAREA_TOKENS.message.color.error
             ),
             children: [
               currentLength,
@@ -8439,45 +9209,6 @@ function shadowToClass(value) {
   if (!value || value === "none") return void 0;
   return `shadow-${value}`;
 }
-function displayToClass(value) {
-  if (!value) return void 0;
-  if (value === "inline") return "inline";
-  if (value === "inline-block") return "inline-block";
-  if (value === "flex") return "flex";
-  if (value === "inline-flex") return "inline-flex";
-  if (value === "grid") return "grid";
-  if (value === "inline-grid") return "inline-grid";
-  if (value === "block") return "block";
-  if (value === "none") return "hidden";
-  return void 0;
-}
-function flexDirectionToClass(value) {
-  if (!value) return void 0;
-  if (value === "row") return "flex-row";
-  if (value === "column") return "flex-col";
-  if (value === "row-reverse") return "flex-row-reverse";
-  if (value === "column-reverse") return "flex-col-reverse";
-  return void 0;
-}
-function alignToClass(value) {
-  if (!value) return void 0;
-  if (value === "start") return "items-start";
-  if (value === "end") return "items-end";
-  if (value === "center") return "items-center";
-  if (value === "baseline") return "items-baseline";
-  if (value === "stretch") return "items-stretch";
-  return void 0;
-}
-function justifyToClass(value) {
-  if (!value) return void 0;
-  if (value === "start") return "justify-start";
-  if (value === "end") return "justify-end";
-  if (value === "center") return "justify-center";
-  if (value === "between") return "justify-between";
-  if (value === "around") return "justify-around";
-  if (value === "evenly") return "justify-evenly";
-  return void 0;
-}
 var Box = React49.forwardRef(
   ({
     as: Component = "div",
@@ -8495,14 +9226,9 @@ var Box = React49.forwardRef(
     mr,
     mb,
     ml,
-    display,
-    flexDirection,
     radius,
     shadow,
     bg,
-    gap,
-    align,
-    justify,
     className,
     style,
     ...props
@@ -8523,7 +9249,6 @@ var Box = React49.forwardRef(
     const mlValue = getBaseValue2(ml);
     const radiusValue = getBaseValue2(radius);
     const bgValue = getBaseValue2(bg);
-    const gapValue = getBaseValue2(gap);
     const inlineStyles = {
       ...pValue !== void 0 && { padding: getSpacingCSSVar(String(pValue)) },
       ...!p && pxValue !== void 0 && {
@@ -8553,18 +9278,9 @@ var Box = React49.forwardRef(
       ...!m && !mx && mlValue !== void 0 && { marginLeft: getSpacingCSSVar(String(mlValue)) },
       ...radiusValue !== void 0 && { borderRadius: getRadiusCSSVar(radiusValue) },
       ...bgValue !== void 0 && { backgroundColor: getColorCSSVar(bgValue) },
-      ...gapValue !== void 0 && { gap: getSpacingCSSVar(String(gapValue)) },
       ...style
     };
     const classes = cn(
-      // Display
-      displayToClass(display),
-      // Flex direction
-      flexDirectionToClass(flexDirection),
-      // Align
-      alignToClass(align),
-      // Justify
-      justifyToClass(justify),
       // Shadow
       shadowToClass(shadow),
       className
@@ -8575,18 +9291,46 @@ var Box = React49.forwardRef(
   }
 );
 Box.displayName = "Box";
+function alignToClass(value) {
+  if (!value) return void 0;
+  if (value === "start") return "items-start";
+  if (value === "end") return "items-end";
+  if (value === "center") return "items-center";
+  if (value === "baseline") return "items-baseline";
+  if (value === "stretch") return "items-stretch";
+  return void 0;
+}
+function justifyToClass(value) {
+  if (!value) return void 0;
+  if (value === "start") return "justify-start";
+  if (value === "end") return "justify-end";
+  if (value === "center") return "justify-center";
+  if (value === "between") return "justify-between";
+  if (value === "around") return "justify-around";
+  if (value === "evenly") return "justify-evenly";
+  return void 0;
+}
 var Stack = React49.forwardRef(
-  ({ direction = "vertical", spacing: spacing2, gap, align, justify, ...props }, ref) => {
+  ({ direction = "vertical", spacing: spacing2, gap, align, justify, className, style, ...props }, ref) => {
     const gapValue = spacing2 ?? gap;
+    const gapBaseValue = getBaseValue(gapValue);
+    const flexClasses = cn(
+      "flex",
+      direction === "horizontal" ? "flex-row" : "flex-col",
+      alignToClass(align),
+      justifyToClass(justify),
+      className
+    );
+    const inlineStyles = {
+      ...gapBaseValue !== void 0 && { gap: getSpacingCSSVar(String(gapBaseValue)) },
+      ...style
+    };
     return /* @__PURE__ */ jsx(
       Box,
       {
         ref,
-        display: "flex",
-        flexDirection: direction === "horizontal" ? "row" : "column",
-        gap: gapValue,
-        align,
-        justify,
+        className: flexClasses,
+        style: Object.keys(inlineStyles).length > 0 ? inlineStyles : void 0,
         ...props
       }
     );
@@ -8697,7 +9441,7 @@ function getFlexBaseValue(value) {
   }
   return value;
 }
-function flexDirectionToClass2(value) {
+function flexDirectionToClass(value) {
   if (!value) return void 0;
   if (value === "row") return "flex-row";
   if (value === "column") return "flex-col";
@@ -8750,8 +9494,10 @@ var Flex = React49.forwardRef(
     const alignValue = getFlexBaseValue(align);
     const justifyValue = getFlexBaseValue(justify);
     const basisValue = getFlexBaseValue(basis);
+    const gapBaseValue = getBaseValue(gap);
     const flexClasses = cn(
-      flexDirectionToClass2(directionValue),
+      "flex",
+      flexDirectionToClass(directionValue),
       flexWrapToClass(wrapValue),
       growToClass(grow),
       shrinkToClass(shrink),
@@ -8770,15 +9516,13 @@ var Flex = React49.forwardRef(
     })();
     const flexStyle = {
       ...flexBasisCSS ? { flexBasis: flexBasisCSS } : {},
+      ...gapBaseValue !== void 0 && { gap: getSpacingCSSVar(String(gapBaseValue)) },
       ...style
     };
     return /* @__PURE__ */ jsx(
       Box,
       {
         ref,
-        display: "flex",
-        flexDirection: directionValue,
-        gap,
         className: flexClasses,
         style: Object.keys(flexStyle).length > 0 ? flexStyle : void 0,
         ...props
@@ -8845,7 +9589,22 @@ function justifyToClass3(value) {
   return void 0;
 }
 var Grid = React49.forwardRef(
-  ({ cols, sm, md, lg, xl, "2xl": xl2, rows, gap, flow, align, justify, className, ...props }, ref) => {
+  ({
+    cols,
+    sm,
+    md,
+    lg,
+    xl,
+    "2xl": xl2,
+    rows,
+    gap,
+    flow,
+    align,
+    justify,
+    className,
+    style,
+    ...props
+  }, ref) => {
     let colsValue = cols;
     if (sm || md || lg || xl || xl2) {
       if (cols !== void 0 && typeof cols !== "object") {
@@ -8914,23 +9673,25 @@ var Grid = React49.forwardRef(
       justifyToClass3(justifyValue),
       className
     );
-    return /* @__PURE__ */ jsx(Box, { ref, display: "grid", gap, className: gridClasses, ...props });
+    const gapBaseValue = gap ? getBaseValue(gap) : void 0;
+    const gridStyle = {
+      ...gapBaseValue !== void 0 && { gap: getSpacingCSSVar(String(gapBaseValue)) },
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        className: cn("grid", gridClasses),
+        style: Object.keys(gridStyle).length > 0 ? gridStyle : void 0,
+        ...props
+      }
+    );
   }
 );
 Grid.displayName = "Grid";
-var Row = React49.forwardRef(({ gap, align, justify, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      display: "flex",
-      flexDirection: "row",
-      gap,
-      align,
-      justify,
-      ...props
-    }
-  );
+var Row = React49.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Stack, { ref, direction: "horizontal", ...props });
 });
 Row.displayName = "Row";
 var surfaceVariants = cva("", {
@@ -8965,7 +9726,7 @@ var labelVariants = cva(
 var Label2 = React49.forwardRef(
   ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
     children,
-    required && /* @__PURE__ */ jsx("span", { className: cn(INPUT_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
+    required && /* @__PURE__ */ jsx("span", { className: cn(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
   ] })
 );
 Label2.displayName = LabelPrimitive.Root.displayName;
@@ -9312,7 +10073,7 @@ var ToastRoot = React49.forwardRef(
                 altText: toast.action.label,
                 onClick: toast.action.onClick,
                 className: cn(
-                  "inline-flex shrink-0 items-center justify-center rounded-md border bg-transparent font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                  "inline-flex shrink-0 items-center justify-center rounded-md border bg-transparent font-medium transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                   TOAST_TOKENS.action.height,
                   TOAST_TOKENS.action.padding,
                   TOAST_TOKENS.action.fontSize
@@ -9370,7 +10131,7 @@ var ToastAction = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex shrink-0 items-center justify-center rounded-md border bg-transparent font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex shrink-0 items-center justify-center rounded-md border bg-transparent font-medium transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
       TOAST_TOKENS.action.height,
       TOAST_TOKENS.action.padding,
       TOAST_TOKENS.action.fontSize,
@@ -9810,7 +10571,7 @@ var NotificationCenterItem = React49.forwardRef(
               size: "icon",
               onClick: handleDismiss,
               "aria-label": "Dismiss notification",
-              className: "absolute right-xs top-xs h-6 w-6 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100",
+              className: "absolute right-xs top-xs h-6 w-6 opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 group-hover:opacity-100",
               children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
             }
           )
@@ -10371,7 +11132,7 @@ var PopoverArrow = React49.forwardRef(
 );
 PopoverArrow.displayName = "PopoverArrow";
 
-// node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
 var max = Math.max;
 var round = Math.round;
@@ -10502,7 +11263,7 @@ function rectToClientRect(rect) {
   };
 }
 
-// node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+// node_modules/.pnpm/@floating-ui+core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -10947,7 +11708,7 @@ var shift = function(options) {
   };
 };
 
-// node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function hasWindow() {
   return typeof window !== "undefined";
 }
@@ -11100,7 +11861,7 @@ function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
 
-// node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+// node_modules/.pnpm/@floating-ui+dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
   const css = getComputedStyle2(element);
   let width = parseFloat(css.width) || 0;
@@ -11954,7 +12715,7 @@ function usePositioning({
       return offsetValue;
     }
     const baseOffset = getBaseValue(offsetValue);
-    return baseOffset ? getSpacingPx(baseOffset) : 4;
+    return baseOffset ? getSpacingPx(baseOffset) : getSpacingPx(1);
   }, [offsetValue]);
   React49.useEffect(() => {
     setMounted(true);
@@ -11965,7 +12726,7 @@ function usePositioning({
       middlewareArray.push(flip3());
     }
     if (enableShift) {
-      middlewareArray.push(shift3({ padding: 8 }));
+      middlewareArray.push(shift3({ padding: getSpacingPx(2) }));
     }
     return middlewareArray;
   }, [offsetPx, enableFlip, enableShift]);
@@ -12324,7 +13085,7 @@ var DropdownMenuItem = React49.forwardRef(
           MENU_TOKENS.item.padding.md,
           MENU_TOKENS.item.radius.md,
           inset && "pl-8",
-          !disabled && "focus:bg-accent focus:text-accent-foreground",
+          !disabled && "focus-visible:bg-accent focus-visible:text-accent-foreground",
           selected && "bg-accent/50",
           disabled && "pointer-events-none opacity-50",
           className
@@ -12807,9 +13568,9 @@ var CONTEXT_MENU_TOKENS = {
     radius: "rounded-sm",
     // 4px (0.25rem)
     focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
+      background: "focus-visible:bg-[hsl(var(--accent))]",
       // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
+      text: "focus-visible:text-[hsl(var(--accent-foreground))]"
       // Focus text using CSS var
     },
     disabled: {
@@ -13197,7 +13958,7 @@ var Skeleton = React49.forwardRef(
 Skeleton.displayName = "Skeleton";
 var EmptyStateAction = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-2", className), ...props, children });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(EMPTY_STATE_TOKENS.spacing.action, className), ...props, children });
   }
 );
 EmptyStateAction.displayName = "EmptyStateAction";
@@ -13208,9 +13969,10 @@ var EmptyStateDescription = React49.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.emptyState.typography.description.fontSize,
-          DATA_TOKENS.emptyState.typography.description.fontWeight,
-          "max-w-md text-muted-foreground",
+          EMPTY_STATE_TOKENS.typography.description.fontSize,
+          EMPTY_STATE_TOKENS.typography.description.fontWeight,
+          EMPTY_STATE_TOKENS.typography.description.color,
+          EMPTY_STATE_TOKENS.typography.description.maxWidth,
           className
         ),
         ...props,
@@ -13222,16 +13984,12 @@ var EmptyStateDescription = React49.forwardRef(
 EmptyStateDescription.displayName = "EmptyStateDescription";
 var EmptyStateIcon = React49.forwardRef(
   ({ children, size: size3 = "md", className, ...props }, ref) => {
-    const iconSizeClass = DATA_TOKENS.emptyState.iconSize[size3];
+    const iconSizeClass = EMPTY_STATE_TOKENS.icon.size[size3];
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn(
-          "flex items-center justify-center text-muted-foreground",
-          iconSizeClass,
-          className
-        ),
+        className: cn(EMPTY_STATE_TOKENS.icon.container, iconSizeClass, className),
         ...props,
         children
       }
@@ -13246,9 +14004,9 @@ var EmptyStateTitle = React49.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.emptyState.typography.title.fontSize,
-          DATA_TOKENS.emptyState.typography.title.fontWeight,
-          "text-foreground",
+          EMPTY_STATE_TOKENS.typography.title.fontSize,
+          EMPTY_STATE_TOKENS.typography.title.fontWeight,
+          EMPTY_STATE_TOKENS.typography.title.color,
           className
         ),
         ...props,
@@ -13269,7 +14027,7 @@ var EmptyState = React49.forwardRef(
         variant: "flat",
         radius: "xl",
         p: "lg",
-        className: cn("text-center", className),
+        className: cn(EMPTY_STATE_TOKENS.alignment.center, className),
         id: emptyStateId,
         ...props,
         children: /* @__PURE__ */ jsx(Stack, { gap: "md", align: "center", justify: "center", children })
@@ -13286,14 +14044,16 @@ var DataListItem = React49.forwardRef(
   ({ padding = "md", className, children, ...props }, ref) => {
     const paddingValue = getBaseValue(padding);
     const paddingKey = paddingValue && ["sm", "md", "lg"].includes(String(paddingValue)) ? String(paddingValue) : "md";
-    const paddingClass = DATA_TOKENS.dataList.rowPadding[paddingKey];
+    const paddingClass = DATA_LIST_TOKENS.rowPadding[paddingKey];
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(
           paddingClass,
-          "flex flex-col border-b border-border last:border-0 md:flex-row md:items-center",
+          DATA_LIST_TOKENS.item.layout.mobile,
+          DATA_LIST_TOKENS.item.layout.desktop,
+          DATA_LIST_TOKENS.item.border,
           className
         ),
         ...props,
@@ -13310,9 +14070,9 @@ var DataListLabel = React49.forwardRef(
       {
         ref,
         className: cn(
-          "mb-1 font-semibold text-foreground md:mb-0",
-          "md:w-32",
-          // Default md width from tokens
+          DATA_LIST_TOKENS.label.mobile,
+          DATA_LIST_TOKENS.label.desktop,
+          DATA_LIST_TOKENS.labelWidth.md,
           className
         ),
         ...props,
@@ -13324,13 +14084,21 @@ var DataListLabel = React49.forwardRef(
 DataListLabel.displayName = "DataListLabel";
 var DataListValue = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("dd", { ref, className: cn("flex-1 text-muted-foreground", className), ...props, children });
+    return /* @__PURE__ */ jsx(
+      "dd",
+      {
+        ref,
+        className: cn(DATA_LIST_TOKENS.value.flex, DATA_LIST_TOKENS.value.color, className),
+        ...props,
+        children
+      }
+    );
   }
 );
 DataListValue.displayName = "DataListValue";
 var DataListRoot = React49.forwardRef(
   ({ labelWidth: _labelWidth = "md", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("dl", { ref, className: cn(DATA_TOKENS.dataList.spacing.gap, className), ...props, children });
+    return /* @__PURE__ */ jsx("dl", { ref, className: cn(DATA_LIST_TOKENS.spacing.gap, className), ...props, children });
   }
 );
 DataListRoot.displayName = "DataListRoot";
@@ -13345,9 +14113,9 @@ var TableBody = React49.forwardRef(
 TableBody.displayName = "TableBody";
 var TableCell = React49.forwardRef(
   ({ align = "left", size: size3 = "md", className, ...props }, ref) => {
-    const paddingClass = DATA_TOKENS.table.padding.cell[size3];
-    const typographyClass = DATA_TOKENS.table.typography.cell.fontSize;
-    const fontWeightClass = DATA_TOKENS.table.typography.cell.fontWeight;
+    const paddingClass = TABLE_TOKENS.padding.cell[size3];
+    const typographyClass = TABLE_TOKENS.typography.cell.fontSize;
+    const fontWeightClass = TABLE_TOKENS.typography.cell.fontWeight;
     const alignmentClasses = {
       left: "text-left",
       center: "text-center",
@@ -13373,7 +14141,7 @@ var TableCell = React49.forwardRef(
 TableCell.displayName = "TableCell";
 var TableEmpty = React49.forwardRef(
   ({ colSpan, message = "No data available", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsx("td", { colSpan, className: "p-8", children: /* @__PURE__ */ jsxs(EmptyState, { children: [
+    return /* @__PURE__ */ jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsx("td", { colSpan, className: TABLE_TOKENS.empty.padding, children: /* @__PURE__ */ jsxs(EmptyState, { children: [
       /* @__PURE__ */ jsx(EmptyStateIcon, { children: "\u{1F4ED}" }),
       /* @__PURE__ */ jsx(EmptyStateTitle, { children: message })
     ] }) }) });
@@ -13388,13 +14156,22 @@ var TableExpandableContent = React49.forwardRef(
         ref,
         colSpan,
         className: cn(
-          "p-0",
-          "overflow-hidden transition-all duration-normal ease-in-out",
-          expanded ? "max-h-[100vh] opacity-100" : "max-h-0 opacity-0",
+          TABLE_TOKENS.expandable.container,
+          TABLE_TOKENS.expandable.transition,
+          expanded ? TABLE_TOKENS.expandable.expanded : TABLE_TOKENS.expandable.collapsed,
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx("div", { className: cn("p-md", expanded ? "block" : "hidden"), children })
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              TABLE_TOKENS.expandable.padding,
+              expanded ? TABLE_TOKENS.expandable.content.expanded : TABLE_TOKENS.expandable.content.collapsed
+            ),
+            children
+          }
+        )
       }
     );
   }
@@ -13407,9 +14184,9 @@ var TableSortIcon = React49.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex size-4 items-center text-muted-foreground transition-transform",
-          direction === "desc" && "rotate-180",
-          !direction && "opacity-30",
+          TABLE_TOKENS.sortable.icon.base,
+          direction === "desc" && TABLE_TOKENS.sortable.icon.rotated,
+          !direction && TABLE_TOKENS.sortable.icon.inactive,
           className
         ),
         "aria-hidden": "true",
@@ -13456,9 +14233,9 @@ var TableHead = React49.forwardRef(
         direction: nextDirection
       });
     }, [sortable, columnKey, sortState, setSortState]);
-    const paddingClass = DATA_TOKENS.table.padding.header[size3];
-    const typographyClass = DATA_TOKENS.table.typography.header.fontSize;
-    const fontWeightClass = DATA_TOKENS.table.typography.header.fontWeight;
+    const paddingClass = TABLE_TOKENS.padding.header[size3];
+    const typographyClass = TABLE_TOKENS.typography.header.fontSize;
+    const fontWeightClass = TABLE_TOKENS.typography.header.fontWeight;
     const alignmentClasses = {
       left: "text-left",
       center: "text-center",
@@ -13475,9 +14252,10 @@ var TableHead = React49.forwardRef(
           typographyClass,
           fontWeightClass,
           alignmentClasses[align],
-          DATA_TOKENS.table.colors.border,
-          "border-b",
-          sortable && "cursor-pointer select-none hover:bg-muted/50",
+          TABLE_TOKENS.colors.border,
+          TABLE_TOKENS.border.bottom,
+          sortable && TABLE_TOKENS.sortable.cursor,
+          sortable && TABLE_TOKENS.sortable.hover,
           className
         ),
         onClick: handleSort,
@@ -13489,7 +14267,7 @@ var TableHead = React49.forwardRef(
         })(),
         role: "columnheader",
         ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: cn(TABLE_TOKENS.sortable.container, TABLE_TOKENS.sortable.gap), children: [
           children,
           sortable && /* @__PURE__ */ jsx(TableSortIcon, { direction: sortDirection })
         ] })
@@ -13504,7 +14282,7 @@ var TableHeader = React49.forwardRef(
       "thead",
       {
         ref,
-        className: cn(sticky && "sticky top-0 z-10 bg-background", className),
+        className: cn(sticky && TABLE_TOKENS.sticky.header, className),
         role: "rowgroup",
         ...props
       }
@@ -13514,7 +14292,7 @@ var TableHeader = React49.forwardRef(
 TableHeader.displayName = "TableHeader";
 var TableLoadingState = React49.forwardRef(
   ({ colSpan, rows = 5, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index2) => /* @__PURE__ */ jsx("tr", { ref: index2 === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsx("td", { className: "p-sm", children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", className: "w-full" }) }, cellIndex)) }, index2)) });
+    return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index2) => /* @__PURE__ */ jsx("tr", { ref: index2 === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsx("td", { className: TABLE_TOKENS.loading.cellPadding, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", className: TABLE_TOKENS.loading.skeletonWidth }) }, cellIndex)) }, index2)) });
   }
 );
 TableLoadingState.displayName = "TableLoadingState";
@@ -13532,11 +14310,11 @@ var TableRow = React49.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.table.colors.border,
-          "border-b",
-          DATA_TOKENS.table.colors.rowHover,
-          selected && DATA_TOKENS.table.colors.rowSelected,
-          expandable && "cursor-pointer",
+          TABLE_TOKENS.colors.border,
+          TABLE_TOKENS.border.bottom,
+          TABLE_TOKENS.colors.rowHover,
+          selected && TABLE_TOKENS.colors.rowSelected,
+          expandable && TABLE_TOKENS.expandable.cursor,
           className
         ),
         "aria-expanded": expandable ? expanded : void 0,
@@ -13597,13 +14375,13 @@ function TableRoot({
     }),
     [sortState, expandedRows, toggleRow, expandable, renderExpandableContent]
   );
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: TABLE_TOKENS.layout.overflow, children: /* @__PURE__ */ jsx(
     "table",
     {
       className: cn(
-        "w-full border-collapse",
-        DATA_TOKENS.table.radius.default,
-        DATA_TOKENS.table.shadow.subtle,
+        TABLE_TOKENS.layout.table,
+        TABLE_TOKENS.radius.default,
+        TABLE_TOKENS.shadow.subtle,
         className
       ),
       role: "table",
@@ -15170,8 +15948,8 @@ var artistCardGenresVariants = cva(
   }
 );
 var artistCardFooterBorderVariants = cva(
-  // Base classes - border top, spacing
-  "border-t border-border",
+  // Base classes - border top from ARTIST_TOKENS, spacing from DOMAIN_TOKENS
+  ARTIST_TOKENS.footer.border.top,
   {
     variants: {
       size: {
@@ -15231,37 +16009,49 @@ var ArtistCard = React49.forwardRef(
         ...props,
         children: [
           featured && popularBadgeText && /* @__PURE__ */ jsx("div", { className: artistCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: artistCardBadgeSurfaceVariants({ size: size3, variant: "featured" }), children: popularBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-muted to-muted/50", children: [
-            imageUrl ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: name,
-                className: cn("h-full w-full", artistCardImageTransformVariants({ size: size3 }))
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: artistCardImageOverlayVariants({ size: size3 }) })
-          ] }) }),
+          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                ARTIST_TOKENS.image.container.layout,
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: name,
+                    className: cn(
+                      ARTIST_TOKENS.image.sizing.full,
+                      artistCardImageTransformVariants({ size: size3 })
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: ARTIST_TOKENS.image.placeholder.container, children: /* @__PURE__ */ jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: artistCardImageOverlayVariants({ size: size3 }) })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   MOTION_TOKENS.transition.colors,
-                  "group-hover:text-primary",
+                  DOMAIN_TOKENS.text.hover.primary,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: href ? /* @__PURE__ */ jsx(Link, { href, variant: "ghost", children: name }) : name
@@ -15273,7 +16063,7 @@ var ArtistCard = React49.forwardRef(
                 size: "sm",
                 variant: "muted",
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: description
@@ -15335,16 +16125,16 @@ var ArtistCard = React49.forwardRef(
   }
 );
 ArtistCard.displayName = "ArtistCard";
-var eventCardBadgeVariants = cva(
+var categoryCardBadgeVariants = cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
   {
     variants: {
       size: {
         default: DOMAIN_TOKENS.badges.position.default,
-        // Default positioning - maps to semanticSpacing.md (12px)
+        // Default positioning - references semanticSpacing.md (16px)
         compact: DOMAIN_TOKENS.badges.position.compact
-        // Compact positioning - maps to semanticSpacing.sm (8px)
+        // Compact positioning - references semanticSpacing.sm (8px)
       }
     },
     defaultVariants: {
@@ -15352,9 +16142,10 @@ var eventCardBadgeVariants = cva(
     }
   }
 );
-var eventCardBadgeSurfaceVariants = cva(
+var categoryCardBadgeSurfaceVariants = cva(
   // Base classes - flex layout, items center, badge styling
-  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} font-semibold`,
+  // Uses DOMAIN_TOKENS for badge-specific styles, TEXT_TOKENS for typography
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
   {
     variants: {
       variant: {
@@ -15367,130 +16158,14 @@ var eventCardBadgeSurfaceVariants = cva(
     }
   }
 );
-var eventCardMetadataVariants = cva(
-  // Base classes - flex column, metadata spacing
-  `flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardMetadataItemVariants = cva(
-  // Base classes - flex items center, metadata spacing and text
-  `flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardMetadataIconVariants = cva(
-  // Base classes - icon size and color
-  `${ICON_TOKENS.sizes.md} ${ICON_TOKENS.colors.muted}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardFooterVariants = cva(
-  // Base classes - border top, spacing
-  "border-t border-border",
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
-        // Default padding top - references semanticSpacing.sm (8px) via Tailwind
-        compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
-        // Compact padding top - references semanticSpacing.xs (4px) via Tailwind
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardTicketButtonVariants = cva(
-  // Base classes - flex layout, badge gradient, motion
-  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} font-semibold transform`,
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.spacing.button.paddingDefault,
-        // Default padding - references semanticSpacing.md (16px) horizontal, xs (4px) vertical via Tailwind
-        compact: DOMAIN_TOKENS.spacing.button.paddingCompact
-        // Compact padding - references semanticSpacing.sm (8px) horizontal, xs (4px) vertical via Tailwind
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardTicketButtonIconVariants = cva(
-  // Base classes - icon size and spacing
-  `${ICON_TOKENS.sizes.md} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardPriceVariants = cva(
-  // Base classes - price gradient text
-  `bg-gradient-to-r from-accent-500 to-primary-600 bg-clip-text text-transparent`,
-  {
-    variants: {
-      size: {
-        default: TEXT_TOKENS.fontSize.lg,
-        // Default size
-        compact: TEXT_TOKENS.fontSize.md
-        // Compact size
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var EventCard = React49.forwardRef(
+var CategoryCard = React49.forwardRef(
   ({
     title,
     description,
-    date,
-    venueName,
-    price,
     imageUrl,
     href,
-    ticketUrl,
     featured = false,
     showImage = true,
-    getTicketsLabel,
     featuredBadgeText,
     size: size3 = "default",
     variant,
@@ -15513,46 +16188,57 @@ var EventCard = React49.forwardRef(
         className: cn("group relative", className),
         ...props,
         children: [
-          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: eventCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
-            imageUrl ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: title,
-                className: cn(
-                  "h-full w-full object-cover",
-                  DOMAIN_TOKENS.motion.hover.transition,
-                  DOMAIN_TOKENS.motion.hover.scale
-                )
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-0 opacity-0 transition-opacity duration-normal group-hover:opacity-100",
-                  DOMAIN_TOKENS.image.overlay.gradient
+          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: categoryCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: categoryCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
+          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full overflow-hidden",
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn(
+                      "h-full w-full object-cover",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.motion.hover.scale
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    className: cn(ICON_TOKENS.sizes["4xl"], ICON_TOKENS.colors.muted),
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 opacity-0 group-hover:opacity-100",
+                      MOTION_TOKENS.transition.opacity,
+                      MOTION_TOKENS.duration.normal,
+                      DOMAIN_TOKENS.image.overlay.gradient
+                    )
+                  }
                 )
-              }
-            )
-          ] }) }),
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2 transition-colors group-hover:text-primary",
+                  DOMAIN_TOKENS.text.lineClamp.two,
+                  MOTION_TOKENS.transition.colors,
+                  DOMAIN_TOKENS.text.hover.primary,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   DOMAIN_TOKENS.spacing.section.titleToSubtitle
@@ -15564,47 +16250,21 @@ var EventCard = React49.forwardRef(
               Text,
               {
                 size: "sm",
-                muted: true,
+                variant: "muted",
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: description
               }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: eventCardMetadataVariants({ size: size3 }), children: [
-              date && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), children: [
-                /* @__PURE__ */ jsx(IconCalendar, { className: eventCardMetadataIconVariants({ size: size3 }) }),
-                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, children: date })
-              ] }),
-              venueName && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), children: [
-                /* @__PURE__ */ jsx(IconLocation, { className: eventCardMetadataIconVariants({ size: size3 }) }),
-                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: venueName })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size: size3 })), children: [
-            ticketUrl && /* @__PURE__ */ jsxs(
-              Link,
-              {
-                href: ticketUrl,
-                className: cn("w-full", eventCardTicketButtonVariants({ size: size3 })),
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: [
-                  getTicketsLabel,
-                  /* @__PURE__ */ jsx(IconArrowRight, { className: eventCardTicketButtonIconVariants({ size: size3 }) })
-                ]
-              }
-            ),
-            !ticketUrl && price && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsx("span", { className: eventCardPriceVariants({ size: size3 }), children: price }) }) })
-          ] }) })
+            )
+          ] })
         ]
       }
     ) });
   }
 );
-EventCard.displayName = "EventCard";
+CategoryCard.displayName = "CategoryCard";
 var promoCardBadgeVariants = cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
@@ -15638,14 +16298,14 @@ var promoCardBadgeSurfaceVariants = cva(
   }
 );
 var promoCardCtaButtonVariants = cva(
-  // Base classes - flex layout, button tokens, motion
-  `inline-flex items-center justify-center ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.variant.primary.background} ${BUTTON_TOKENS.variant.primary.text} ${BUTTON_TOKENS.shadow.primary} ${BUTTON_TOKENS.variant.primary.hover} ${BUTTON_TOKENS.transition.colors} font-semibold`,
+  // Base classes - flex layout, CTA button tokens, motion
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.cta.button.radius} ${DOMAIN_TOKENS.cta.button.variant.primary.background} ${DOMAIN_TOKENS.cta.button.variant.primary.text} ${DOMAIN_TOKENS.cta.button.shadow.primary} ${DOMAIN_TOKENS.cta.button.variant.primary.hover} ${DOMAIN_TOKENS.cta.button.transition.colors} font-semibold`,
   {
     variants: {
       size: {
-        default: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.md}`,
+        default: `${DOMAIN_TOKENS.cta.button.height.md} ${DOMAIN_TOKENS.cta.button.padding.horizontal.md} ${DOMAIN_TOKENS.cta.button.padding.vertical.sm} ${DOMAIN_TOKENS.cta.button.fontSize.md}`,
         // Default size - uses md height and padding
-        compact: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm}`
+        compact: `${DOMAIN_TOKENS.cta.button.height.sm} ${DOMAIN_TOKENS.cta.button.padding.horizontal.sm} ${DOMAIN_TOKENS.cta.button.padding.vertical.sm} ${DOMAIN_TOKENS.cta.button.fontSize.sm}`
         // Compact size - uses sm height and padding
       }
     },
@@ -15777,6 +16437,22 @@ var PromoCard = React49.forwardRef(
   }
 );
 PromoCard.displayName = "PromoCard";
+var ticketCardVariants = cva("group relative", {
+  variants: {
+    size: {
+      default: "",
+      compact: ""
+    },
+    variant: {
+      default: "",
+      featured: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  }
+});
 var ticketCardBadgeVariants = cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
@@ -15784,7 +16460,7 @@ var ticketCardBadgeVariants = cva(
     variants: {
       size: {
         default: DOMAIN_TOKENS.badges.position.default,
-        // Default positioning - maps to semanticSpacing.md (12px)
+        // Default positioning - maps to semanticSpacing.md (16px)
         compact: DOMAIN_TOKENS.badges.position.compact
         // Compact positioning - maps to semanticSpacing.sm (8px)
       }
@@ -15796,7 +16472,7 @@ var ticketCardBadgeVariants = cva(
 );
 var ticketCardBadgeSurfaceVariants = cva(
   // Base classes - flex layout, items center, badge styling
-  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} font-semibold`,
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
   {
     variants: {
       variant: {
@@ -15813,6 +16489,45 @@ var ticketCardBadgeSurfaceVariants = cva(
     }
   }
 );
+var ticketCardTitleVariants = cva(
+  `${TEXT_TOKENS.fontSize.lg} ${TEXT_TOKENS.fontWeight.bold} ${MOTION_TOKENS.transition.colors} ${DOMAIN_TOKENS.text.hover.primary} ${DOMAIN_TOKENS.text.lineClamp.two}`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.section.subtitleToMetadata,
+        compact: DOMAIN_TOKENS.spacing.section.titleToSubtitle
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardDateVariants = cva(
+  `${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.sm} ${MOTION_TOKENS.transition.colors}`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.section.titleToSubtitle,
+        compact: `${DOMAIN_TOKENS.spacing.section.titleToSubtitle} ${TEXT_TOKENS.fontSize.xs}`
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardDescriptionVariants = cva(`${DOMAIN_TOKENS.text.lineClamp.two}`, {
+  variants: {
+    size: {
+      default: DOMAIN_TOKENS.spacing.section.subtitleToMetadata,
+      compact: DOMAIN_TOKENS.spacing.section.titleToSubtitle
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
 var ticketCardPriceCapacityContainerVariants = cva(
   // Base classes - flex layout, price/capacity spacing
   `flex items-center ${DOMAIN_TOKENS.priceCapacity.spacing}`,
@@ -15830,7 +16545,7 @@ var ticketCardPriceCapacityContainerVariants = cva(
 );
 var ticketCardPriceVariants = cva(
   // Base classes - price text color
-  `${DOMAIN_TOKENS.priceCapacity.text.primary} font-bold`,
+  `${DOMAIN_TOKENS.priceCapacity.text.primary} ${TEXT_TOKENS.fontWeight.bold}`,
   {
     variants: {
       size: {
@@ -15864,7 +16579,7 @@ var ticketCardCapacityVariants = cva(
 );
 var ticketCardAvailabilityVariants = cva(
   // Base classes - availability indicator styling
-  `inline-flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${TEXT_TOKENS.fontSize.xs} font-medium`,
+  `inline-flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.medium}`,
   {
     variants: {
       availability: {
@@ -15897,7 +16612,7 @@ var ticketCardFooterVariants = cva(
 );
 var ticketCardPurchaseButtonVariants = cva(
   // Base classes - flex layout, badge gradient, motion
-  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} font-semibold transform`,
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} ${TEXT_TOKENS.fontWeight.semibold} transform`,
   {
     variants: {
       size: {
@@ -15932,9 +16647,38 @@ var ticketCardPurchaseButtonIconVariants = cva(
     }
   }
 );
+var ticketCardImageOverlayVariants = cva(
+  `absolute inset-0 ${DOMAIN_TOKENS.image.overlay.gradient} opacity-0 ${MOTION_TOKENS.transition.opacity} ${MOTION_TOKENS.duration.normal} group-hover:opacity-100`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardImageTransformVariants = cva(
+  `object-cover ${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.slow} ${DOMAIN_TOKENS.motion.hover.scale}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
 var TicketCard = React49.forwardRef(
   ({
     title,
+    date,
     description,
     price,
     capacity,
@@ -15981,57 +16725,368 @@ var TicketCard = React49.forwardRef(
       }
     };
     const availabilityLabel = getAvailabilityLabel();
+    const formattedDate = date ? formatDate(date) : null;
+    const dateTimeValue = (() => {
+      if (!date) return null;
+      if (typeof date === "string") {
+        return new Date(date).toISOString();
+      }
+      if (date instanceof Date) {
+        return date.toISOString();
+      }
+      return new Date(date).toISOString();
+    })();
     return /* @__PURE__ */ jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxs(
       CardBase,
       {
         ref,
         size: size3,
         variant: cardVariant,
-        className: cn("group relative", className),
+        className: cn(ticketCardVariants({ size: size3, variant: cardVariant }), className),
         ...props,
         children: [
           featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: ticketCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
           vipBadgeText && /* @__PURE__ */ jsx("div", { className: cn(ticketCardBadgeVariants({ size: size3 }), getVipBadgePosition()), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "vip" }), children: vipBadgeText }) }),
           discountBadgeText && /* @__PURE__ */ jsx("div", { className: cn(ticketCardBadgeVariants({ size: size3 }), getDiscountBadgePosition()), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "discount" }), children: discountBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
-            imageUrl ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: title,
-                className: cn(
-                  "h-full w-full object-cover",
-                  DOMAIN_TOKENS.motion.hover.transition,
-                  DOMAIN_TOKENS.motion.hover.scale
-                )
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
-              Icon2,
+          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full overflow-hidden",
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn("h-full w-full", ticketCardImageTransformVariants({ size: size3 }))
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: ticketCardImageOverlayVariants({ size: size3 }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size: size3, children: [
+            /* @__PURE__ */ jsx(Heading, { level: 3, className: ticketCardTitleVariants({ size: size3 }), children: href ? /* @__PURE__ */ jsx(Link, { href, variant: "ghost", children: title }) : title }),
+            formattedDate && dateTimeValue && /* @__PURE__ */ jsx("time", { dateTime: dateTimeValue, className: ticketCardDateVariants({ size: size3 }), children: formattedDate }),
+            description && /* @__PURE__ */ jsx(Text, { size: "sm", variant: "muted", className: ticketCardDescriptionVariants({ size: size3 }), children: description }),
+            (price || capacity) && /* @__PURE__ */ jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size: size3 }), children: [
+              price && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: size3 === "compact" ? "md" : "lg",
+                  weight: "bold",
+                  className: ticketCardPriceVariants({ size: size3 }),
+                  children: price
+                }
+              ),
+              capacity && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: size3 === "compact" ? "xs" : "sm",
+                  variant: "muted",
+                  className: ticketCardCapacityVariants({ size: size3 }),
+                  children: capacity
+                }
+              )
+            ] }),
+            availabilityLabel && /* @__PURE__ */ jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
+          ] }),
+          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size: size3 })), children: [
+            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxs(
+              Link,
               {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
+                href: purchaseUrl,
+                className: cn(
+                  "w-full",
+                  ticketCardPurchaseButtonVariants({ size: size3, disabled: false })
+                ),
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: [
+                  purchaseLabel,
+                  /* @__PURE__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                ]
               }
-            ) }),
-            /* @__PURE__ */ jsx(
+            ),
+            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxs(
               "div",
               {
                 className: cn(
-                  "absolute inset-0 opacity-0 transition-opacity duration-normal group-hover:opacity-100",
-                  DOMAIN_TOKENS.image.overlay.gradient
-                )
+                  "w-full",
+                  ticketCardPurchaseButtonVariants({ size: size3, disabled: isPurchaseDisabled })
+                ),
+                children: [
+                  purchaseLabel,
+                  /* @__PURE__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                ]
               }
             )
-          ] }) }),
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
+TicketCard.displayName = "TicketCard";
+var eventCardVariants = cva(
+  // Base classes - surface, border, radius, shadow, motion from tokens
+  `${DOMAIN_TOKENS.surface.bg.default} ${DOMAIN_TOKENS.surface.border.default} ${DOMAIN_TOKENS.surface.radius.default} ${DOMAIN_TOKENS.surface.shadow.default} ${DOMAIN_TOKENS.surface.bg.hover} ${DOMAIN_TOKENS.surface.border.hover} ${DOMAIN_TOKENS.surface.elevation.hover} ${DOMAIN_TOKENS.motion.hover.transition} overflow-hidden`,
+  {
+    variants: {
+      size: {
+        default: `${CARD_TOKENS.size.md.padding} ${DOMAIN_TOKENS.layout.gap.default}`,
+        compact: `${CARD_TOKENS.size.sm.padding} ${DOMAIN_TOKENS.layout.gap.compact}`
+      },
+      layout: {
+        vertical: "flex flex-col"
+      },
+      variant: {
+        default: "",
+        featured: `${DOMAIN_TOKENS.badges.surface.featured}`
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      layout: "vertical",
+      variant: "default"
+    }
+  }
+);
+var eventCardBadgeVariants = cva(
+  // Base classes - absolute positioning, z-index
+  "absolute z-10",
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.badges.position.default,
+        compact: DOMAIN_TOKENS.badges.position.compact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardBadgeSurfaceVariants = cva(
+  // Base classes - flex layout, items center, badge styling from tokens
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
+  {
+    variants: {
+      variant: {
+        default: DOMAIN_TOKENS.badges.surface.default,
+        featured: DOMAIN_TOKENS.badges.surface.featured
+      }
+    },
+    defaultVariants: {
+      variant: "featured"
+    }
+  }
+);
+var eventCardMetadataVariants = cva(
+  // Base classes - flex column, metadata spacing from tokens
+  `flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardMetadataItemVariants = cva(
+  // Base classes - flex items center, metadata spacing and text from tokens
+  `flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardMetadataIconVariants = cva(
+  // Base classes - icon size and color from tokens
+  `${DOMAIN_TOKENS.metadata.icon.sizeSm} ${DOMAIN_TOKENS.metadata.icon.default}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardFooterVariants = cva(
+  // Base classes - border top, spacing from tokens
+  "border-t border-border",
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
+        compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardTicketButtonVariants = cva(
+  // Base classes - flex layout, badge gradient, motion from tokens
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} ${TEXT_TOKENS.fontWeight.semibold} transform`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.button.paddingDefault,
+        compact: DOMAIN_TOKENS.spacing.button.paddingCompact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardTicketButtonIconVariants = cva(
+  // Base classes - icon size and spacing from tokens
+  `${DOMAIN_TOKENS.metadata.icon.sizeSm} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardPriceVariants = cva(
+  // Base classes - price gradient text from tokens
+  `bg-gradient-to-r from-accent-500 to-primary-600 bg-clip-text text-transparent`,
+  {
+    variants: {
+      size: {
+        default: TEXT_TOKENS.fontSize.lg,
+        compact: TEXT_TOKENS.fontSize.md
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var EventCard = React49.forwardRef(
+  ({
+    title,
+    description,
+    date,
+    venueName,
+    price,
+    imageUrl,
+    href,
+    ticketUrl,
+    featured = false,
+    showImage = true,
+    getTicketsLabel,
+    featuredBadgeText,
+    size: size3 = "default",
+    layout = "vertical",
+    variant,
+    className,
+    animation,
+    ...props
+  }, ref) => {
+    const animationProps = resolveComponentAnimations({
+      animation: animation?.animation || "fadeInUp",
+      hoverAnimation: animation?.hoverAnimation || "hoverLift",
+      animationProps: animation?.animationProps
+    });
+    const cardVariant = variant || (featured ? "featured" : "default");
+    return /* @__PURE__ */ jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxs(
+      CardBase,
+      {
+        ref,
+        size: size3,
+        variant: cardVariant,
+        className: cn(
+          eventCardVariants({ size: size3, layout, variant: cardVariant }),
+          "group relative",
+          className
+        ),
+        ...props,
+        children: [
+          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: eventCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
+          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("relative w-full overflow-hidden", DOMAIN_TOKENS.surface.bg.default),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn(
+                      "h-full w-full object-cover",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.motion.hover.scale
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 opacity-0 group-hover:opacity-100",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.image.overlay.gradient
+                    )
+                  }
+                )
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2 transition-colors group-hover:text-primary",
+                  "line-clamp-2 group-hover:text-primary",
+                  DOMAIN_TOKENS.motion.hover.transition,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   DOMAIN_TOKENS.spacing.section.titleToSubtitle
@@ -16043,7 +17098,7 @@ var TicketCard = React49.forwardRef(
               Text,
               {
                 size: "sm",
-                variant: "muted",
+                muted: true,
                 className: cn(
                   "line-clamp-2",
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
@@ -16051,48 +17106,56 @@ var TicketCard = React49.forwardRef(
                 children: description
               }
             ),
-            (price || capacity) && /* @__PURE__ */ jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size: size3 }), children: [
-              price && /* @__PURE__ */ jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsx("span", { className: ticketCardPriceVariants({ size: size3 }), children: price }) }),
-              capacity && /* @__PURE__ */ jsx(Text, { size: size3 === "compact" ? "xs" : "sm", children: /* @__PURE__ */ jsx("span", { className: ticketCardCapacityVariants({ size: size3 }), children: capacity }) })
-            ] }),
-            availabilityLabel && /* @__PURE__ */ jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
+            /* @__PURE__ */ jsxs("div", { className: eventCardMetadataVariants({ size: size3 }), children: [
+              date && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), role: "text", children: [
+                /* @__PURE__ */ jsx(
+                  IconCalendar,
+                  {
+                    className: eventCardMetadataIconVariants({ size: size3 }),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, children: /* @__PURE__ */ jsx("time", { dateTime: date, children: date }) })
+              ] }),
+              venueName && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), role: "text", children: [
+                /* @__PURE__ */ jsx(
+                  IconLocation,
+                  {
+                    className: eventCardMetadataIconVariants({ size: size3 }),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: /* @__PURE__ */ jsx("address", { children: venueName }) })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size: size3 })), children: [
-            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size: size3 })), children: [
+            ticketUrl && /* @__PURE__ */ jsxs(
               Link,
               {
-                href: purchaseUrl,
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size: size3, disabled: false })
-                ),
+                href: ticketUrl,
+                className: cn("w-full", eventCardTicketButtonVariants({ size: size3 })),
                 target: "_blank",
                 rel: "noopener noreferrer",
                 children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                  getTicketsLabel,
+                  /* @__PURE__ */ jsx(
+                    IconArrowRight,
+                    {
+                      className: eventCardTicketButtonIconVariants({ size: size3 }),
+                      "aria-hidden": true
+                    }
+                  )
                 ]
               }
             ),
-            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size: size3, disabled: isPurchaseDisabled })
-                ),
-                children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
-                ]
-              }
-            )
+            !ticketUrl && price && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsx("span", { className: eventCardPriceVariants({ size: size3 }), children: price }) }) })
           ] }) })
         ]
       }
     ) });
   }
 );
-TicketCard.displayName = "TicketCard";
+EventCard.displayName = "EventCard";
 
-export { ALERT_TOKENS, Alert, ArtistCard, BUTTON_TOKENS, Backdrop, Body, Box, Breadcrumbs, Button, CARD_TOKENS, CHECKBOX_TOKENS, Caption, Card, CardBody, CardFooter, CardHeader, Checkbox, Code, Column, Container, Surface2 as ContainerSurface, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, DataListRoot as DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, Display, DropdownMenuCheckItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, EventCard, FieldRoot as Field, Flex, Grid, Heading, HoverCardContent, HoverCardRoot, HoverCardTrigger, ICONS_MAP, ICON_TOKENS, INPUT_TOKENS, Icon2 as Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, IconError, IconInfo, IconLocation, IconMenu, IconSearch, IconSuccess, IconWarning, Input, Label2 as Label, Lead, MENU_TOKENS, MOTION_TOKENS, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, ModalTrigger, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, NotificationCenter, NotificationCenterDismissAll, NotificationCenterGroupHeader, NotificationCenterItem, NotificationCenterList, NotificationCenterPanel, NotificationCenterProvider, NotificationCenterTrigger, OVERLAY_TOKENS, POPOVER_TOKENS, Pagination, PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger, Portal3 as Portal, PromoCard, RADIO_TOKENS, Radio, RadioGroup, Row, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, Section, SegmentedControl, Select, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Skeleton, Stack, Stepper, Surface, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, TableRoot as Table, TableBody, TableCell, TableEmpty, TableExpandableContent, TableHead, TableHeader, TableLoadingState, TableRoot, TableRow, TableSortIcon, Tabs, Text, Textarea, TicketCard, Toast, ToastProvider, ToastViewport, UI_COLORS, accentColoredShadows, accentColors, alertVariants, allCSSVariables, allCSSVariablesCSS, animations, baseColors, bodyVariants, borderRadius, buttonVariants, captionVariants, chartColors, checkboxVariants, codeVariants, colorCSSVariables, componentRadius, componentShadowMapping, surfaceVariants2 as containerSurfaceVariants, cssVariableColorTokens, displayVariants, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, headingVariants, iconVariants, inputVariants, keyframes, labelVariants, layoutSpacing, leadVariants, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, popoverContentVariants, primaryColoredShadows, primaryColors, radioVariants, radiusCSSVariables, reducedMotion, secondaryColors, segmentedControlItemVariants, segmentedControlRootVariants, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, skeletonVariants, spacing, spacingCSSVariables, springs, surfaceColors, surfaceVariants, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, textVariants, textareaVariants, tokenSystemSummary, transitions, typographyCSSVariables, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };
+export { ALERT_TOKENS, Alert, ArtistCard, BUTTON_TOKENS, Backdrop, Body, Box, Breadcrumbs, Button, CARD_TOKENS, CHECKBOX_TOKENS, Caption, Card, CardBody, CardFooter, CardHeader, CategoryCard, Checkbox, Code, Column, Container, Surface2 as ContainerSurface, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, DataListRoot as DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, Display, DropdownMenuCheckItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, EventCard, FieldRoot as Field, Flex, Grid, Heading, HoverCardContent, HoverCardRoot, HoverCardTrigger, ICONS_MAP, ICON_TOKENS, INPUT_TOKENS, Icon2 as Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, IconError, IconInfo, IconLocation, IconMenu, IconSearch, IconSuccess, IconWarning, Input, Label2 as Label, Lead, MENU_TOKENS, MOTION_TOKENS, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, ModalTrigger, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, NotificationCenter, NotificationCenterDismissAll, NotificationCenterGroupHeader, NotificationCenterItem, NotificationCenterList, NotificationCenterPanel, NotificationCenterProvider, NotificationCenterTrigger, OVERLAY_TOKENS, POPOVER_TOKENS, Pagination, PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger, Portal3 as Portal, PromoCard, RADIO_TOKENS, Radio, RadioGroup, Row, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, Section, SegmentedControl, Select, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Skeleton, Stack, Stepper, Surface, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, TableRoot as Table, TableBody, TableCell, TableEmpty, TableExpandableContent, TableHead, TableHeader, TableLoadingState, TableRoot, TableRow, TableSortIcon, Tabs, Text, Textarea, TicketCard, Toast, ToastProvider, ToastViewport, UI_COLORS, accentColoredShadows, accentColors, alertVariants, allCSSVariables, allCSSVariablesCSS, animations, baseColors, bodyVariants, borderRadius, buttonVariants, captionVariants, chartColors, checkboxVariants, codeVariants, colorCSSVariables, componentRadius, componentShadowMapping, surfaceVariants2 as containerSurfaceVariants, cssVariableColorTokens, displayVariants, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, headingVariants, iconVariants, inputVariants, keyframes, labelVariants, layoutSpacing, leadVariants, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, popoverContentVariants, primaryColoredShadows, primaryColors, radioVariants, radiusCSSVariables, reducedMotion, secondaryColors, segmentedControlItemVariants, segmentedControlRootVariants, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, skeletonVariants, spacing, spacingCSSVariables, springs, surfaceColors, surfaceVariants, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, textVariants, textareaVariants, tokenSystemSummary, transitions, typographyCSSVariables, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };