@tenerife.music/ui 1.1.0 → 1.1.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
-import * as React48 from 'react';
+import * as React49 from 'react';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -612,6 +612,162 @@ var MOTION_TOKENS = {
   }
 };
 
+// src/FOUNDATION/tokens/components/badge.ts
+var BADGE_TOKENS = {
+  /**
+   * Layout tokens
+   * Base layout utilities for badge component
+   */
+  layout: "inline-flex items-center",
+  // Base layout for badge container
+  /**
+   * Badge padding
+   * Uses semantic spacing tokens
+   */
+  padding: {
+    horizontal: "px-xs",
+    // 4px (0.25rem) - maps to semanticSpacing.xs
+    vertical: "py-xs"
+    // 4px (0.25rem) - maps to semanticSpacing.xs
+  },
+  /**
+   * Border radius for badges
+   * Uses fully rounded (pill shape) - maps to borderRadius.full
+   *
+   * @rule References borderRadius.full (9999px) from Radius Authority
+   * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
+   */
+  radius: "rounded-full",
+  // References borderRadius.full (9999px) - Radius Authority compliant
+  /**
+   * Font size for badges
+   * References foundation typography fontSize tokens from Typography Authority
+   *
+   * @rule All fontSize values reference Typography Authority tokens
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
+   */
+  fontSize: "text-xs",
+  // References fontSize.xs[0] from Typography Authority (~12px)
+  /**
+   * Font weight for badges
+   */
+  fontWeight: "font-semibold",
+  // Semibold weight (600)
+  /**
+   * Border token
+   * Base border style
+   */
+  border: "border",
+  // Base border
+  /**
+   * Underline offset for link variant
+   * Uses spacing token (xs = 4px) which matches underline-offset-4
+   */
+  underlineOffset: "underline-offset-4",
+  // 4px (0.25rem) - matches semanticSpacing.xs
+  /**
+   * Transition tokens
+   * References Motion Authority tokens for consistent motion behavior
+   *
+   * @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: MOTION_TOKENS.transitionPreset.colors
+    // "transition-colors duration-normal ease-out" - Motion Authority compliant
+  },
+  /**
+   * Focus state tokens
+   * Focus ring for keyboard navigation
+   *
+   * @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
+   * @rule Focus MUST be blocked when disabled={true}
+   */
+  focus: {
+    ring: "focus-visible:ring-2 focus-visible:ring-ring",
+    // Focus ring using semantic ring color
+    outline: "focus-visible:outline-none",
+    // Remove default outline (replaced by ring)
+    offset: "focus-visible:ring-offset-2"
+    // Ring offset
+  },
+  /**
+   * Color tokens for badge variants
+   * Uses semantic color tokens that map to CSS variables
+   */
+  variant: {
+    primary: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-primary",
+      // Primary background using CSS var
+      text: "text-primary-foreground",
+      // Primary text using CSS var
+      hover: "hover:bg-primary/80"
+      // Primary hover background
+    },
+    secondary: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-secondary",
+      // Secondary background using CSS var
+      text: "text-secondary-foreground",
+      // Secondary text using CSS var
+      hover: "hover:bg-secondary/80"
+      // Secondary hover background
+    },
+    accent: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-accent",
+      // Accent background using CSS var
+      text: "text-accent-foreground",
+      // Accent text using CSS var
+      hover: "hover:bg-accent/80"
+      // Accent hover background
+    },
+    outline: {
+      border: "border-border",
+      // No background
+      text: "text-foreground"
+      // Foreground text using CSS var
+    },
+    ghost: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-foreground",
+      // Foreground text using CSS var
+      hover: "hover:bg-accent/10"
+      // Ghost hover background
+    },
+    link: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-primary",
+      // Primary text using CSS var
+      hover: "hover:text-primary/80",
+      // Primary hover text
+      underline: "hover:underline"
+      // Underline on hover
+    },
+    destructive: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-destructive",
+      // Destructive background using CSS var
+      text: "text-destructive-foreground",
+      // Destructive text using CSS var
+      hover: "hover:bg-destructive/80"
+      // Destructive hover background
+    }
+  }
+};
+
 // src/FOUNDATION/tokens/components/button.ts
 var BUTTON_TOKENS = {
   /**
@@ -1035,68 +1191,6 @@ var CARD_TOKENS = {
   }
 };
 
-// src/FOUNDATION/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/FOUNDATION/tokens/spacing.ts
 var spacing = {
   // Zero spacing
@@ -1483,609 +1577,87 @@ var ICON_TOKENS = {
   }
 };
 
-// src/FOUNDATION/tokens/components/domain.ts
-var DOMAIN_TOKENS = {
+// src/FOUNDATION/tokens/components/input.ts
+var INPUT_TOKENS = {
   /**
-   * Surface tokens for card containers
-   * Defines background, border, radius, and shadow for card surfaces
+   * Input heights by size
+   * Supports xs, sm, md, lg, xl sizes
    */
-  surface: {
-    /**
-     * Background colors
-     * Maps to semantic color tokens
-     */
-    bg: {
-      default: "bg-card",
-      // Default card background - maps to semantic color tokens
-      hover: "hover:bg-card/95"
-      // Hover state background with 95% opacity
-    },
-    /**
-     * Border styles
-     * Maps to semantic border tokens
-     */
-    border: {
-      default: "border border-border",
-      // Default border - maps to semantic border tokens
-      hover: "hover:border-primary/20"
-      // Hover state border with primary color at 20% opacity
-    },
-    /**
-     * Border radius
-     * References borderRadius.xl (0.75rem / 12px)
-     * Using Tailwind class "rounded-xl" which maps to borderRadius.xl
-     */
-    radius: {
-      default: "rounded-xl"
-      // References borderRadius.xl (0.75rem / 12px) via Tailwind
-    },
-    /**
-     * Shadow (elevation) tokens
-     * References elevationShadows.md
-     * Using Tailwind class "shadow-md" which maps to elevationShadows.md
-     */
-    shadow: {
-      default: "shadow-md"
-      // References elevationShadows.md via Tailwind
-    },
-    /**
-     * Elevation change on hover
-     * References elevationShadows.xl
-     * Using Tailwind class "hover:shadow-xl" which maps to elevationShadows.xl
-     */
-    elevation: {
-      hover: "hover:shadow-xl"
-      // References elevationShadows.xl via Tailwind
-    }
+  height: {
+    xs: "h-7",
+    // 28px (1.75rem)
+    sm: "h-8",
+    // 32px (2rem)
+    md: "h-9",
+    // 36px (2.25rem) - default
+    lg: "h-10",
+    // 40px (2.5rem)
+    xl: "h-11"
+    // 44px (2.75rem)
   },
   /**
-   * Spacing tokens for card component spacing
-   * References semanticSpacing tokens
-   * Note: Tailwind classes are used for component className application
+   * Input padding by size
+   * Horizontal and vertical padding values
    */
-  spacing: {
-    /**
-     * Section spacing - vertical spacing between card sections
-     */
-    section: {
-      titleToSubtitle: "mb-xs",
-      // Spacing between title and subtitle/description - references semanticSpacing.xs (4px) via Tailwind
-      subtitleToMetadata: "mb-sm"
-      // Spacing between description and metadata - references semanticSpacing.sm (8px) via Tailwind
-    },
-    /**
-     * Badge spacing offsets
-     */
-    badges: {
-      offsetX: semanticSpacing.md,
-      // Horizontal offset for badges (16px)
-      offsetY: semanticSpacing.md
-      // Vertical offset for badges (16px)
-    },
-    /**
-     * Image spacing
-     */
-    image: {
-      bottomMargin: semanticSpacing.none
-      // Margin below image (0px)
-    },
-    /**
-     * Card vertical gap
-     */
-    card: {
-      verticalGap: semanticSpacing.md
-      // Vertical gap in card content (16px)
-    },
-    /**
-     * Metadata item gap
-     */
-    metadata: {
-      itemGap: semanticSpacing.xs
-      // Gap between metadata items (4px)
-    },
-    /**
-     * Footer spacing
-     */
-    footer: {
-      paddingTopDefault: "pt-sm",
-      // Footer padding top default - references semanticSpacing.sm (8px) via Tailwind
-      paddingTopCompact: "pt-xs"
-      // Footer padding top compact - references semanticSpacing.xs (4px) via Tailwind
+  padding: {
+    horizontal: {
+      xs: "px-xs",
+      // 4px (0.25rem)
+      sm: "px-sm",
+      // 8px (0.5rem)
+      md: "px-sm",
+      // 8px (0.5rem) - default
+      lg: "px-md",
+      // 16px (1rem)
+      xl: "px-lg"
+      // 24px (1.5rem)
     },
-    /**
-     * Button spacing
-     */
-    button: {
-      paddingDefault: "px-md py-xs",
-      // Button padding default - references semanticSpacing.md (16px) horizontal, xs (4px) vertical via Tailwind
-      paddingCompact: "px-sm py-xs",
-      // Button padding compact - references semanticSpacing.sm (8px) horizontal, xs (4px) vertical via Tailwind
-      iconMarginLeft: "ml-xs"
-      // Icon margin left - references semanticSpacing.xs (4px) via Tailwind
+    vertical: {
+      xs: "py-xs",
+      // 4px (0.25rem)
+      sm: "py-xs",
+      // 4px (0.25rem)
+      md: "py-xs",
+      // 4px (0.25rem) - default
+      lg: "py-sm",
+      // 8px (0.5rem)
+      xl: "py-md"
+      // 16px (1rem)
     }
   },
   /**
-   * Layout tokens for card spacing and gaps
-   * References semanticSpacing tokens
-   * Note: Tailwind utilities are used for component className application
+   * Border radius by size
    */
-  layout: {
-    /**
-     * Padding tokens
-     * References semanticSpacing (md = 16px, sm = 8px)
-     * Note: "p-md" and "p-sm" are Tailwind utilities that apply semanticSpacing values
-     */
-    padding: {
-      default: "p-md",
-      // Default padding - references semanticSpacing.md (16px)
-      compact: "p-sm"
-      // Compact variant padding - references semanticSpacing.sm (8px)
-    },
-    /**
-     * Gap tokens for spacing between card elements
-     * References semanticSpacing (md = 16px, xs = 4px)
-     * Note: "gap-md" and "gap-xs" are Tailwind utilities that apply semanticSpacing values
-     */
-    gap: {
-      default: "gap-md",
-      // Default gap - references semanticSpacing.md (16px)
-      compact: "gap-xs"
-      // Compact variant gap - references semanticSpacing.xs (4px)
-    }
+  radius: {
+    xs: "rounded-sm",
+    // 4px (0.25rem)
+    sm: "rounded-md",
+    // 6px (0.375rem)
+    md: "rounded-md",
+    // 6px (0.375rem) - default
+    lg: "rounded-md",
+    // 6px (0.375rem)
+    xl: "rounded-lg"
+    // 8px (0.5rem)
   },
   /**
-   * Image tokens for card media
-   * Defines aspect ratio, radius, overlay styles, and placeholder gradients
+   * Font sizes by size variant
+   * Maps to foundation typography fontSize tokens
    */
-  image: {
-    /**
-     * Aspect ratio for card images
-     * Standard 16:9 aspect ratio for card images
-     */
-    aspectRatio: "aspect-video",
-    // 16:9 aspect ratio - standard for card images
-    /**
-     * Border radius for images
-     * References borderRadius.xl (0.75rem / 12px) for top corners only
-     * Using Tailwind class "rounded-t-xl" which maps to borderRadius.xl
-     */
-    radius: "rounded-t-xl",
-    // References borderRadius.xl (0.75rem / 12px) via Tailwind
-    /**
-     * Overlay gradient tokens for image overlays
-     * Used for hover states and text readability
-     */
-    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
-    }
+  fontSize: {
+    xs: "text-xs",
+    // Maps to fontSize.xs[0]
+    sm: "text-sm",
+    // Maps to fontSize.sm[0]
+    md: "text-base",
+    // Maps to fontSize.base[0] - default
+    lg: "text-base",
+    // Maps to fontSize.base[0]
+    xl: "text-lg"
+    // Maps to fontSize.lg[0]
   },
   /**
-   * 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
-    }
-  },
-  /**
-   * Metadata tokens for card information displays
-   * Used for date/time, location, and other metadata patterns
-   * Maps to TEXT_TOKENS, ICON_TOKENS, and semanticSpacing
-   */
-  metadata: {
-    /**
-     * Text color tokens
-     * Maps to semantic text color tokens
-     */
-    text: {
-      primary: "text-foreground",
-      // Primary metadata text - maps to semantic text color
-      secondary: "text-muted-foreground"
-      // Secondary metadata text - maps to semantic muted text color
-    },
-    /**
-     * Icon tokens
-     * Maps to ICON_TOKENS for sizes and colors
-     */
-    icon: {
-      default: "text-muted-foreground",
-      // Default icon color - maps to ICON_TOKENS.colors.muted
-      sizeSm: ICON_TOKENS.sizes.md
-      // Small icon size - references ICON_TOKENS.sizes.md (16px)
-    },
-    /**
-     * Spacing tokens for metadata layouts
-     * References semanticSpacing (xs = 4px, sm = 8px)
-     * Using Tailwind classes which map to semanticSpacing values
-     */
-    spacing: {
-      vertical: "gap-xs",
-      // References semanticSpacing.xs (4px) via Tailwind
-      horizontal: "gap-sm"
-      // References semanticSpacing.sm (8px) via Tailwind
-    }
-  },
-  /**
-   * Badge tokens for featured/popular badges
-   * References semanticSpacing, borderRadius, and elevationShadows
-   */
-  badges: {
-    /**
-     * Badge size tokens (padding)
-     * References semanticSpacing for padding values
-     * Using Tailwind classes which map to semanticSpacing values
-     */
-    size: {
-      sm: "px-xs py-xs",
-      // References semanticSpacing.xs (4px) for both horizontal and vertical via Tailwind
-      md: "px-sm py-xs"
-      // References semanticSpacing.sm (8px) horizontal, semanticSpacing.xs (4px) vertical via Tailwind
-    },
-    /**
-     * Badge positioning tokens
-     * References semanticSpacing for absolute positioning
-     * Using Tailwind classes which map to semanticSpacing values
-     */
-    position: {
-      default: "right-md top-md",
-      // References semanticSpacing.md (16px) for both right and top via Tailwind
-      compact: "right-sm top-sm"
-      // References semanticSpacing.sm (8px) for both right and top via Tailwind
-    },
-    /**
-     * Additional vertical positioning tokens for multi-badge scenarios
-     * References semanticSpacing for top positioning
-     * Using Tailwind classes which map to semanticSpacing values
-     */
-    positionY: {
-      xl: "top-xl",
-      // References semanticSpacing.xl (32px) via Tailwind
-      "2xl": "top-2xl",
-      // References semanticSpacing["2xl"] (48px) via Tailwind
-      "3xl": "top-3xl"
-      // References semanticSpacing["3xl"] (64px) via Tailwind
-    },
-    /**
-     * Badge surface (background) tokens
-     * Maps to semantic color tokens
-     */
-    surface: {
-      default: "bg-primary",
-      // Default badge background - maps to semantic primary color
-      featured: "bg-gradient-to-r from-accent-500 to-primary-600"
-      // Featured badge gradient
-    },
-    /**
-     * Badge text color
-     * White for contrast on colored backgrounds
-     */
-    text: {
-      color: "text-white"
-      // Badge text color - white for contrast on colored backgrounds
-    },
-    /**
-     * Badge border radius
-     * References borderRadius.full (pill shape)
-     * Using Tailwind class "rounded-full" which maps to borderRadius.full
-     */
-    radius: "rounded-full",
-    // References borderRadius.full via Tailwind
-    /**
-     * Badge shadow
-     * References elevationShadows.lg
-     * Using Tailwind class "shadow-lg" which maps to elevationShadows.lg
-     */
-    shadow: "shadow-lg"
-    // References elevationShadows.lg via Tailwind
-  },
-  /**
-   * Price/Capacity tokens for displaying price and capacity information
-   * Maps to semantic text color tokens and semanticSpacing
-   */
-  priceCapacity: {
-    /**
-     * Text color tokens
-     * Maps to semantic text color tokens
-     */
-    text: {
-      primary: "text-foreground",
-      // Primary price/capacity text - maps to semantic text color
-      secondary: "text-muted-foreground"
-      // Secondary price/capacity text - maps to semantic muted text color
-    },
-    /**
-     * Spacing between price and capacity elements
-     * References semanticSpacing.sm (8px)
-     * Using Tailwind class "gap-sm" which maps to semanticSpacing.sm
-     */
-    spacing: "gap-sm"
-    // References semanticSpacing.sm (8px) via Tailwind
-  },
-  /**
-   * Motion tokens for hover and interaction states
-   * References MOTION_TOKENS for transitions and animations
-   */
-  motion: {
-    /**
-     * Hover state tokens
-     * References MOTION_TOKENS and elevationShadows
-     */
-    hover: {
-      transition: MOTION_TOKENS.transitionPreset.normal,
-      // References MOTION_TOKENS.transitionPreset.normal
-      scale: "hover:scale-110",
-      // Hover scale transform (110% scale) - domain-specific value
-      elevation: "hover:shadow-xl"
-      // References elevationShadows.xl via Tailwind
-    }
-  },
-  /**
-   * Skeleton tokens for loading states
-   * References DATA_TOKENS.skeleton for skeleton patterns and semanticSpacing for dimensions
-   */
-  skeleton: {
-    /**
-     * Base skeleton wrapper tokens
-     * Default styling for skeleton wrapper components
-     */
-    base: {
-      /**
-       * Default border radius for skeleton wrapper
-       * References DATA_TOKENS.skeleton.radius.text
-       */
-      radius: DATA_TOKENS.skeleton.radius.text,
-      /**
-       * Default animation for skeleton wrapper
-       * References DATA_TOKENS.skeleton.animation.pulse
-       */
-      animation: DATA_TOKENS.skeleton.animation.pulse,
-      /**
-       * Default background for skeleton wrapper
-       * References DATA_TOKENS.skeleton.background.default
-       */
-      background: DATA_TOKENS.skeleton.background.default
-    },
-    /**
-     * Image skeleton height
-     * Domain-specific: card images need 192px (spacing[48] = 12rem)
-     * Note: DATA_TOKENS.skeleton.height.card is 128px, but card images need 192px
-     * Using Tailwind class "h-48" which maps to spacing[48] (12rem / 192px)
-     */
-    image: {
-      height: "h-48"
-      // References spacing[48] (12rem / 192px) via Tailwind
-    },
-    /**
-     * Content gap for skeleton elements
-     * References semanticSpacing.md (16px)
-     * Using Tailwind class "gap-md" which maps to semanticSpacing.md
-     */
-    content: {
-      gap: "gap-md",
-      // References semanticSpacing.md (16px) via Tailwind
-      /**
-       * Content width tokens for skeleton elements
-       * References DATA_TOKENS where available, uses Tailwind fraction classes for domain-specific values
-       */
-      width: {
-        full: DATA_TOKENS.skeleton.width.full,
-        // References DATA_TOKENS.skeleton.width.full
-        threeQuarters: "w-3/4",
-        // Three quarters width (75%) - domain-specific, using Tailwind fraction
-        half: "w-1/2"
-        // Half width (50%) - domain-specific, using Tailwind fraction
-      }
-    },
-    /**
-     * Badge skeleton dimensions
-     * Domain-specific values for badge skeleton sizing
-     * References spacing values via Tailwind classes
-     */
-    badge: {
-      width: "w-20",
-      // References spacing[20] (5rem / 80px) via Tailwind
-      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/FOUNDATION/tokens/components/input.ts
-var INPUT_TOKENS = {
-  /**
-   * Input heights by size
-   * Supports xs, sm, md, lg, xl sizes
-   */
-  height: {
-    xs: "h-7",
-    // 28px (1.75rem)
-    sm: "h-8",
-    // 32px (2rem)
-    md: "h-9",
-    // 36px (2.25rem) - default
-    lg: "h-10",
-    // 40px (2.5rem)
-    xl: "h-11"
-    // 44px (2.75rem)
-  },
-  /**
-   * Input padding by size
-   * Horizontal and vertical padding values
-   */
-  padding: {
-    horizontal: {
-      xs: "px-xs",
-      // 4px (0.25rem)
-      sm: "px-sm",
-      // 8px (0.5rem)
-      md: "px-sm",
-      // 8px (0.5rem) - default
-      lg: "px-md",
-      // 16px (1rem)
-      xl: "px-lg"
-      // 24px (1.5rem)
-    },
-    vertical: {
-      xs: "py-xs",
-      // 4px (0.25rem)
-      sm: "py-xs",
-      // 4px (0.25rem)
-      md: "py-xs",
-      // 4px (0.25rem) - default
-      lg: "py-sm",
-      // 8px (0.5rem)
-      xl: "py-md"
-      // 16px (1rem)
-    }
-  },
-  /**
-   * Border radius by size
-   */
-  radius: {
-    xs: "rounded-sm",
-    // 4px (0.25rem)
-    sm: "rounded-md",
-    // 6px (0.375rem)
-    md: "rounded-md",
-    // 6px (0.375rem) - default
-    lg: "rounded-md",
-    // 6px (0.375rem)
-    xl: "rounded-lg"
-    // 8px (0.5rem)
-  },
-  /**
-   * Font sizes by size variant
-   * Maps to foundation typography fontSize tokens
-   */
-  fontSize: {
-    xs: "text-xs",
-    // Maps to fontSize.xs[0]
-    sm: "text-sm",
-    // Maps to fontSize.sm[0]
-    md: "text-base",
-    // Maps to fontSize.base[0] - default
-    lg: "text-base",
-    // Maps to fontSize.base[0]
-    xl: "text-lg"
-    // Maps to fontSize.lg[0]
-  },
-  /**
-   * Responsive font size (md breakpoint)
+   * Responsive font size (md breakpoint)
    */
   fontSizeResponsive: {
     md: "md:text-sm"
@@ -5502,41 +5074,246 @@ var EMPTY_STATE_TOKENS = {
     center: "text-center"}
 };
 
-// src/FOUNDATION/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}`,
-  soft: `${motionV2Durations.normal} ${motionV2Easings.soft}`,
-  reduced: `${motionV2Durations.reduced} linear`
-};
-var motionV2Fade = {
-  in: {
-    from: { opacity: 0 },
-    to: { opacity: 1 }
+// src/FOUNDATION/tokens/components/link.ts
+var LINK_TOKENS = {
+  /**
+   * Link heights by size
+   * Maps to Tailwind height utilities
+   */
+  height: {
+    xs: "h-7",
+    // 28px (1.75rem)
+    sm: "h-8",
+    // 32px (2rem)
+    md: "h-9",
+    // 36px (2.25rem)
+    lg: "h-10",
+    // 40px (2.5rem)
+    xl: "h-11"
+    // 44px (2.75rem)
   },
-  out: {
-    from: { opacity: 1 },
-    to: { opacity: 0 }
-  }
+  /**
+   * Link padding by size
+   * Horizontal and vertical padding values
+   */
+  padding: {
+    horizontal: {
+      xs: "px-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      sm: "px-sm",
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+      md: "px-md",
+      // 16px (1rem) - maps to semanticSpacing.md
+      lg: "px-lg",
+      // 24px (1.5rem) - maps to semanticSpacing.lg
+      xl: "px-xl"
+      // 32px (2rem) - maps to semanticSpacing.xl
+    },
+    vertical: {
+      xs: "py-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      sm: "py-sm",
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+      md: "py-md"
+      // 16px (1rem) - maps to semanticSpacing.md
+    }
+  },
+  /**
+   * Layout tokens
+   * Base layout utilities for link component
+   */
+  layout: "inline-flex items-center justify-center whitespace-nowrap",
+  // Base layout for link container
+  /**
+   * Font weight token
+   * References foundation typography fontWeight tokens from Typography Authority
+   *
+   * @rule References fontWeight.medium (500) from Typography Authority
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
+   */
+  fontWeight: "font-medium",
+  // References fontWeight.medium (500) - Typography Authority compliant
+  /**
+   * Icon wrapper layout
+   * Layout utilities for icon containers
+   */
+  iconWrapper: "inline-flex items-center",
+  // Layout for left/right icon wrappers
+  /**
+   * Font sizes by link size
+   * References foundation typography fontSize tokens from Typography Authority
+   *
+   * @rule All fontSize values reference Typography Authority tokens
+   * @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
+   */
+  fontSize: {
+    xs: "text-xs",
+    // References fontSize.xs[0] from Typography Authority (~12px)
+    sm: "text-xs",
+    // References fontSize.xs[0] from Typography Authority (~12px)
+    md: "text-sm",
+    // References fontSize.sm[0] from Typography Authority (~14px)
+    lg: "text-sm",
+    // References fontSize.sm[0] from Typography Authority (~14px)
+    xl: "text-base"
+    // References fontSize.base[0] from Typography Authority (~16px)
+  },
+  /**
+   * Border radius for outline and ghost variants
+   * References componentRadius from Radius Authority
+   *
+   * @rule References borderRadius.md (6px / 0.375rem) from Radius Authority
+   * @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
+   */
+  radius: "rounded-md",
+  // References borderRadius.md (6px / 0.375rem) - Radius Authority compliant
+  /**
+   * Underline offset for text decoration
+   * Uses spacing token (xs = 4px) which matches underline-offset-4
+   */
+  underlineOffset: "underline-offset-4",
+  // 4px (0.25rem) - matches semanticSpacing.xs
+  /**
+   * Transition tokens
+   * References Motion Authority tokens for consistent motion behavior
+   *
+   * @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: MOTION_TOKENS.transitionPreset.colors
+    // "transition-colors duration-normal ease-out" - Motion Authority compliant
+  },
+  /**
+   * Focus state tokens
+   * Focus ring for keyboard navigation
+   *
+   * @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
+   * @rule Focus MUST be blocked when disabled={true}
+   */
+  focus: {
+    ring: "focus-visible:ring-2 focus-visible:ring-ring",
+    // Focus ring using semantic ring color
+    outline: "focus-visible:outline-none",
+    // Remove default outline (replaced by ring)
+    offset: "focus-visible:ring-offset-2"
+    // Ring offset
+  },
+  /**
+   * Disabled state tokens
+   */
+  state: {
+    disabled: {
+      pointerEvents: "disabled:pointer-events-none",
+      // Disable pointer events
+      opacity: "disabled:opacity-50"
+      // Disabled opacity
+    }
+  },
+  /**
+   * Color tokens for link variants
+   * Uses semantic color tokens that map to CSS variables
+   */
+  variant: {
+    primary: {
+      text: "text-primary",
+      // Primary text using CSS var
+      hover: "hover:text-primary/80",
+      // Primary hover text
+      underline: "hover:underline"
+      // Underline on hover
+    },
+    secondary: {
+      text: "text-secondary-foreground",
+      // Secondary text using CSS var
+      hover: "hover:underline"
+      // Underline on hover
+    },
+    accent: {
+      text: "text-accent-foreground",
+      // Accent text using CSS var
+      hover: "hover:text-accent-foreground/80",
+      // Accent hover text
+      underline: "hover:underline"
+      // Underline on hover
+    },
+    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",
+        // Hover background
+        text: "hover:text-accent-foreground"
+        // Hover text
+      }
+    },
+    ghost: {
+      text: "text-foreground",
+      // Foreground text using CSS var
+      hover: {
+        background: "hover:bg-accent",
+        // Hover background
+        text: "hover:text-accent-foreground"
+        // Hover text
+      }
+    },
+    link: {
+      text: "text-primary",
+      // Primary text using CSS var
+      hover: "hover:underline"
+      // Underline on hover
+    },
+    destructive: {
+      text: "text-destructive",
+      // Destructive text using CSS var
+      hover: "hover:text-destructive/80",
+      // Destructive hover text
+      underline: "hover:underline"
+      // Underline on hover
+    }
+  }
+};
+
+// src/FOUNDATION/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}`,
+  soft: `${motionV2Durations.normal} ${motionV2Easings.soft}`,
+  reduced: `${motionV2Durations.reduced} linear`
+};
+var motionV2Fade = {
+  in: {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  out: {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  }
 };
 var motionV2Scale = {
   in: {
@@ -6899,13 +6676,6 @@ function tokenCVA(config) {
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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: {
@@ -6929,7 +6699,7 @@ var buttonVariants = tokenCVA({
     size: "md"
   }
 });
-var Button = React48.forwardRef(
+var Button = React49.forwardRef(
   ({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const finalClassName = cn(buttonVariants({ variant, size, className }));
@@ -7035,7 +6805,7 @@ var textVariants = cva("text-foreground", {
     muted: false
   }
 });
-var Text = React48.forwardRef(
+var Text = React49.forwardRef(
   ({ className, size, weight, muted, variant, ...props }, ref) => {
     const isMuted = muted !== void 0 ? muted : variant === "muted";
     return /* @__PURE__ */ jsx(
@@ -7069,7 +6839,7 @@ var alertVariants = cva(`${ALERT_TOKENS.radius} border ${ALERT_TOKENS.padding}`,
     variant: "default"
   }
 });
-var Alert = React48.forwardRef(
+var Alert = React49.forwardRef(
   ({ className, variant, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -7083,6 +6853,81 @@ var Alert = React48.forwardRef(
   }
 );
 Alert.displayName = "Alert";
+var LINK_VARIANTS = [
+  "primary",
+  "secondary",
+  "accent",
+  "outline",
+  "ghost",
+  "link",
+  "destructive"
+];
+var LINK_SIZES = ["xs", "sm", "md", "lg", "xl"];
+var linkVariants = tokenCVA({
+  base: `${LINK_TOKENS.layout} ${LINK_TOKENS.fontWeight} ${LINK_TOKENS.transition.colors} ${LINK_TOKENS.focus.outline} ${LINK_TOKENS.focus.ring} ${LINK_TOKENS.focus.offset} ${LINK_TOKENS.state.disabled.pointerEvents} ${LINK_TOKENS.state.disabled.opacity}`,
+  variants: {
+    variant: {
+      primary: `${LINK_TOKENS.variant.primary.text} ${LINK_TOKENS.variant.primary.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.primary.underline}`,
+      secondary: `${LINK_TOKENS.variant.secondary.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.secondary.hover}`,
+      accent: `${LINK_TOKENS.variant.accent.text} ${LINK_TOKENS.variant.accent.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.accent.underline}`,
+      outline: `${LINK_TOKENS.variant.outline.border} ${LINK_TOKENS.variant.outline.background} ${LINK_TOKENS.variant.outline.text} ${LINK_TOKENS.radius} ${LINK_TOKENS.variant.outline.hover.background} ${LINK_TOKENS.variant.outline.hover.text}`,
+      ghost: `${LINK_TOKENS.variant.ghost.text} ${LINK_TOKENS.variant.ghost.hover.background} ${LINK_TOKENS.variant.ghost.hover.text} ${LINK_TOKENS.radius}`,
+      link: `${LINK_TOKENS.variant.link.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.link.hover}`,
+      destructive: `${LINK_TOKENS.variant.destructive.text} ${LINK_TOKENS.variant.destructive.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.destructive.underline}`
+    },
+    size: {
+      xs: `${LINK_TOKENS.height.xs} ${LINK_TOKENS.fontSize.xs} ${LINK_TOKENS.padding.horizontal.xs} ${LINK_TOKENS.padding.vertical.xs}`,
+      sm: `${LINK_TOKENS.height.sm} ${LINK_TOKENS.fontSize.sm} ${LINK_TOKENS.padding.horizontal.sm} ${LINK_TOKENS.padding.vertical.xs}`,
+      md: `${LINK_TOKENS.height.md} ${LINK_TOKENS.fontSize.md} ${LINK_TOKENS.padding.horizontal.md} ${LINK_TOKENS.padding.vertical.sm}`,
+      lg: `${LINK_TOKENS.height.lg} ${LINK_TOKENS.fontSize.lg} ${LINK_TOKENS.padding.horizontal.lg} ${LINK_TOKENS.padding.vertical.sm}`,
+      xl: `${LINK_TOKENS.height.xl} ${LINK_TOKENS.fontSize.xl} ${LINK_TOKENS.padding.horizontal.xl} ${LINK_TOKENS.padding.vertical.md}`
+    }
+  },
+  defaultVariants: {
+    variant: "link",
+    size: "md"
+  }
+});
+var Link = React49.forwardRef(
+  ({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsxs(Comp, { className: cn(linkVariants({ variant, size, className })), ref, ...props, children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { className: LINK_TOKENS.iconWrapper, children: leftIcon }),
+      children,
+      rightIcon && /* @__PURE__ */ jsx("span", { className: LINK_TOKENS.iconWrapper, children: rightIcon })
+    ] });
+  }
+);
+Link.displayName = "Link";
+var BADGE_VARIANTS = [
+  "primary",
+  "secondary",
+  "accent",
+  "outline",
+  "ghost",
+  "link",
+  "destructive"
+];
+var badgeVariants = tokenCVA({
+  base: `${BADGE_TOKENS.layout} ${BADGE_TOKENS.radius} ${BADGE_TOKENS.border} ${BADGE_TOKENS.padding.horizontal} ${BADGE_TOKENS.padding.vertical} ${BADGE_TOKENS.fontSize} ${BADGE_TOKENS.fontWeight} ${BADGE_TOKENS.transition.colors} ${BADGE_TOKENS.focus.outline} ${BADGE_TOKENS.focus.ring} ${BADGE_TOKENS.focus.offset}`,
+  variants: {
+    variant: {
+      primary: `${BADGE_TOKENS.variant.primary.border} ${BADGE_TOKENS.variant.primary.background} ${BADGE_TOKENS.variant.primary.text} ${BADGE_TOKENS.variant.primary.hover}`,
+      secondary: `${BADGE_TOKENS.variant.secondary.border} ${BADGE_TOKENS.variant.secondary.background} ${BADGE_TOKENS.variant.secondary.text} ${BADGE_TOKENS.variant.secondary.hover}`,
+      accent: `${BADGE_TOKENS.variant.accent.border} ${BADGE_TOKENS.variant.accent.background} ${BADGE_TOKENS.variant.accent.text} ${BADGE_TOKENS.variant.accent.hover}`,
+      outline: `${BADGE_TOKENS.variant.outline.border} ${BADGE_TOKENS.variant.outline.text}`,
+      ghost: `${BADGE_TOKENS.variant.ghost.border} ${BADGE_TOKENS.variant.ghost.background} ${BADGE_TOKENS.variant.ghost.text} ${BADGE_TOKENS.variant.ghost.hover}`,
+      link: `${BADGE_TOKENS.variant.link.border} ${BADGE_TOKENS.variant.link.background} ${BADGE_TOKENS.variant.link.text} ${BADGE_TOKENS.variant.link.hover} ${BADGE_TOKENS.underlineOffset} ${BADGE_TOKENS.variant.link.underline}`,
+      destructive: `${BADGE_TOKENS.variant.destructive.border} ${BADGE_TOKENS.variant.destructive.background} ${BADGE_TOKENS.variant.destructive.text} ${BADGE_TOKENS.variant.destructive.hover}`
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
 var levelConfig = {
   1: [
     TEXT_TOKENS.fontSize["5xl"],
@@ -7169,7 +7014,7 @@ var headingVariants = cva("font-display text-foreground", {
     muted: false
   }
 });
-var Heading = React48.forwardRef(
+var Heading = React49.forwardRef(
   ({ className, level = 1, weight, muted, as, children, ...props }, ref) => {
     const Component = as || `h${level}`;
     return /* @__PURE__ */ jsx(
@@ -7368,7 +7213,7 @@ var SelectRoot = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(SelectPrimitive.Root, { ...props, children });
 };
 SelectRoot.displayName = SelectPrimitive.Root.displayName;
-var SelectTrigger = React48.forwardRef(
+var SelectTrigger = React49.forwardRef(
   ({ className, size, variant, width, ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
     const baseVariant = variant ?? "outline";
@@ -7395,13 +7240,13 @@ var SelectTrigger = React48.forwardRef(
   }
 );
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectValue = React48.forwardRef(
+var SelectValue = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(SelectPrimitive.Value, { ref, className: cn("truncate", className), ...props });
   }
 );
 SelectValue.displayName = SelectPrimitive.Value.displayName;
-var SelectIcon = React48.forwardRef(
+var SelectIcon = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(SelectPrimitive.Icon, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(
       ChevronDown,
@@ -7421,14 +7266,14 @@ var SelectIcon = React48.forwardRef(
   }
 );
 SelectIcon.displayName = SelectPrimitive.Icon.displayName;
-var SelectContent = React48.forwardRef(
+var SelectContent = React49.forwardRef(
   ({ className, size, sideOffset, alignOffset, position = "popper", ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
-    const sideOffsetPx = React48.useMemo(() => {
+    const sideOffsetPx = React49.useMemo(() => {
       const baseOffset = getBaseValue(sideOffset);
       return baseOffset ? getSpacingPx(baseOffset) : getSpacingPx("xs");
     }, [sideOffset]);
-    const alignOffsetPx = React48.useMemo(() => {
+    const alignOffsetPx = React49.useMemo(() => {
       const baseOffset = getBaseValue(alignOffset);
       return baseOffset ? getSpacingPx(baseOffset) : void 0;
     }, [alignOffset]);
@@ -7453,7 +7298,7 @@ var SelectContent = React48.forwardRef(
   }
 );
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectViewport = React48.forwardRef(
+var SelectViewport = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       SelectPrimitive.Viewport,
@@ -7470,7 +7315,7 @@ var SelectViewport = React48.forwardRef(
   }
 );
 SelectViewport.displayName = SelectPrimitive.Viewport.displayName;
-var SelectItem = React48.forwardRef(
+var SelectItem = React49.forwardRef(
   ({ className, size, children, ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
     return /* @__PURE__ */ jsxs(
@@ -7502,19 +7347,19 @@ var SelectItem = React48.forwardRef(
   }
 );
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectItemText = React48.forwardRef(
+var SelectItemText = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { ref, className, ...props });
   }
 );
 SelectItemText.displayName = SelectPrimitive.ItemText.displayName;
-var SelectItemIndicator = React48.forwardRef(
+var SelectItemIndicator = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { ref, className, ...props, children: /* @__PURE__ */ jsx(Check, { className: cn(SELECT_TOKENS.item.indicator.size) }) });
   }
 );
 SelectItemIndicator.displayName = SelectPrimitive.ItemIndicator.displayName;
-var SelectSeparator = React48.forwardRef(
+var SelectSeparator = React49.forwardRef(
   ({ className, size, ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
     const marginHorizontal = baseSize === "xs" || baseSize === "sm" || baseSize === "md" ? SELECT_TOKENS.separator.margin.horizontal.md : SELECT_TOKENS.separator.margin.horizontal.lg;
@@ -7536,13 +7381,13 @@ var SelectSeparator = React48.forwardRef(
   }
 );
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var SelectGroup = React48.forwardRef(
+var SelectGroup = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(SelectPrimitive.Group, { ref, className, ...props });
   }
 );
 SelectGroup.displayName = SelectPrimitive.Group.displayName;
-var SelectLabel = React48.forwardRef(
+var SelectLabel = React49.forwardRef(
   ({ className, size, ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
     const paddingHorizontal = SELECT_TOKENS.label.padding.horizontal[baseSize];
@@ -7614,14 +7459,14 @@ var ModalRoot = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props, children });
 };
 ModalRoot.displayName = DialogPrimitive.Root.displayName;
-var ModalTrigger = React48.forwardRef(
+var ModalTrigger = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, className, ...props });
   }
 );
 ModalTrigger.displayName = DialogPrimitive.Trigger.displayName;
 DialogPrimitive.Portal.displayName;
-var ModalOverlay = React48.forwardRef(
+var ModalOverlay = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       DialogPrimitive.Overlay,
@@ -7634,7 +7479,7 @@ var ModalOverlay = React48.forwardRef(
   }
 );
 ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var ModalContent = React48.forwardRef(
+var ModalContent = React49.forwardRef(
   ({ className, size = "md", width, height, padding, radius, surface, children, ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
     const baseWidth = width ? getBaseValue(width) : void 0;
@@ -7672,7 +7517,7 @@ var ModalContent = React48.forwardRef(
   }
 );
 ModalContent.displayName = DialogPrimitive.Content.displayName;
-var ModalHeader = React48.forwardRef(
+var ModalHeader = React49.forwardRef(
   ({ className, gap, ...props }, ref) => {
     const baseGap = gap ? getBaseValue(gap) : "md";
     const gapClass = getSpacingClass("gap", baseGap) ?? MODAL_TOKENS.header.gap.md;
@@ -7687,7 +7532,7 @@ var ModalHeader = React48.forwardRef(
   }
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = React48.forwardRef(
+var ModalTitle = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       DialogPrimitive.Title,
@@ -7706,7 +7551,7 @@ var ModalTitle = React48.forwardRef(
   }
 );
 ModalTitle.displayName = DialogPrimitive.Title.displayName;
-var ModalDescription = React48.forwardRef(
+var ModalDescription = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       DialogPrimitive.Description,
@@ -7723,7 +7568,7 @@ var ModalDescription = React48.forwardRef(
   }
 );
 ModalDescription.displayName = DialogPrimitive.Description.displayName;
-var ModalFooter = React48.forwardRef(
+var ModalFooter = React49.forwardRef(
   ({ className, gap, align = "right", ...props }, ref) => {
     const baseGap = gap ? getBaseValue(gap) : "md";
     const gapClass = getSpacingClass("gap", baseGap) ?? MODAL_TOKENS.footer.gap.md;
@@ -7745,7 +7590,7 @@ var ModalFooter = React48.forwardRef(
   }
 );
 ModalFooter.displayName = "ModalFooter";
-var ModalClose = React48.forwardRef(
+var ModalClose = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       DialogPrimitive.Close,
@@ -8158,7 +8003,7 @@ var checkboxVariants = cva(
     }
   }
 );
-var Checkbox = React48.forwardRef(
+var Checkbox = React49.forwardRef(
   ({
     className,
     variant,
@@ -8177,23 +8022,23 @@ var Checkbox = React48.forwardRef(
     onKeyDown,
     ...props
   }, ref) => {
-    const [uncontrolledChecked, setUncontrolledChecked] = React48.useState(false);
+    const [uncontrolledChecked, setUncontrolledChecked] = React49.useState(false);
     const isControlled = controlledChecked !== void 0;
     const checked = isControlled ? controlledChecked : uncontrolledChecked;
     const isDisabled = disabled || state === "disabled";
     const isError = state === "error";
-    const effectiveState = React48.useMemo(() => {
+    const effectiveState = React49.useMemo(() => {
       if (isDisabled) return "disabled";
       if (isError) return "error";
       if (indeterminate) return "indeterminate";
       if (checked) return "checked";
       return "default";
     }, [isDisabled, isError, indeterminate, checked]);
-    const ariaChecked = React48.useMemo(() => {
+    const ariaChecked = React49.useMemo(() => {
       if (indeterminate) return "mixed";
       return checked ? "true" : "false";
     }, [indeterminate, checked]);
-    const handleClick = React48.useCallback(
+    const handleClick = React49.useCallback(
       (event) => {
         if (isDisabled) {
           event.preventDefault();
@@ -8207,7 +8052,7 @@ var Checkbox = React48.forwardRef(
       },
       [isDisabled, isControlled, checked, onCheckedChange, onClick]
     );
-    const handleKeyDown = React48.useCallback(
+    const handleKeyDown = React49.useCallback(
       (event) => {
         if (isDisabled) return;
         if (event.key === " " || event.key === "Spacebar") {
@@ -8293,7 +8138,7 @@ function shadowToClass(value) {
   if (!value || value === "none") return void 0;
   return `shadow-${value}`;
 }
-var Box = React48.forwardRef(
+var Box = React49.forwardRef(
   ({
     as: Component = "div",
     p,
@@ -8394,7 +8239,7 @@ function justifyToClass(value) {
   if (value === "evenly") return "justify-evenly";
   return void 0;
 }
-var Stack = React48.forwardRef(
+var Stack = React49.forwardRef(
   ({ direction = "vertical", spacing: spacing2, gap, align, justify, className, style, ...props }, ref) => {
     const gapValue = spacing2 ?? gap;
     const gapBaseValue = getBaseValue(gapValue);
@@ -8454,7 +8299,7 @@ function getMaxWidthValue(value) {
   }
   return getSpacingCSSVar(stringValue);
 }
-var Container = React48.forwardRef(
+var Container = React49.forwardRef(
   ({ maxWidth, padding, center = true, className, style, ...props }, ref) => {
     const maxWidthValue = maxWidth ? getBaseValue(maxWidth) : void 0;
     const paddingValue = getBaseValue(
@@ -8569,7 +8414,7 @@ function shrinkToClass(value) {
   if (value === true || value === 1) return "shrink";
   return void 0;
 }
-var Flex = React48.forwardRef(
+var Flex = React49.forwardRef(
   ({ direction, wrap, grow, shrink, basis, align, justify, gap, className, style, ...props }, ref) => {
     const directionValue = getFlexBaseValue(
       direction
@@ -8672,7 +8517,7 @@ function justifyToClass3(value) {
   if (value === "evenly") return "justify-evenly";
   return void 0;
 }
-var Grid = React48.forwardRef(
+var Grid = React49.forwardRef(
   ({
     cols,
     sm,
@@ -8774,7 +8619,7 @@ var Grid = React48.forwardRef(
   }
 );
 Grid.displayName = "Grid";
-var Row = React48.forwardRef((props, ref) => {
+var Row = React49.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Stack, { ref, direction: "horizontal", ...props });
 });
 Row.displayName = "Row";
@@ -8792,7 +8637,7 @@ var surfaceVariants = cva("", {
     variant: "flat"
   }
 });
-var Surface = React48.forwardRef(
+var Surface = React49.forwardRef(
   ({ variant = "flat", p, radius, className, ...props }, ref) => {
     const variantPadding = SURFACE_TOKENS.variant[variant].padding;
     const defaultPadding = variantPadding.replace("p-", "");
@@ -8813,7 +8658,7 @@ var Surface = React48.forwardRef(
   }
 );
 Surface.displayName = "Surface";
-var Card = React48.forwardRef(
+var Card = React49.forwardRef(
   ({ size = "md", radius, shadow, p, className, ...props }, ref) => {
     const sizeTokens = CARD_TOKENS.size[size];
     const radiusValue = radius ?? sizeTokens.radius.replace("rounded-", "");
@@ -8835,7 +8680,7 @@ var Card = React48.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React48.forwardRef(
+var CardHeader = React49.forwardRef(
   ({ size = "md", p, className, ...props }, ref) => {
     const sizeTokens = CARD_TOKENS.size[size];
     const paddingValue = p ?? sizeTokens.padding.replace("p-", "");
@@ -8844,7 +8689,7 @@ var CardHeader = React48.forwardRef(
   }
 );
 CardHeader.displayName = "CardHeader";
-var CardBody = React48.forwardRef(
+var CardBody = React49.forwardRef(
   ({ size = "md", p, className, ...props }, ref) => {
     const sizeTokens = CARD_TOKENS.size[size];
     const paddingValue = p ?? sizeTokens.padding.replace("p-", "");
@@ -8852,7 +8697,7 @@ var CardBody = React48.forwardRef(
   }
 );
 CardBody.displayName = "CardBody";
-var CardFooter = React48.forwardRef(
+var CardFooter = React49.forwardRef(
   ({ size = "md", p, className, ...props }, ref) => {
     const sizeTokens = CARD_TOKENS.size[size];
     const paddingValue = p ?? sizeTokens.padding.replace("p-", "");
@@ -8863,7 +8708,7 @@ CardFooter.displayName = "CardFooter";
 Card.Header = CardHeader;
 Card.Body = CardBody;
 Card.Footer = CardFooter;
-var Section = React48.forwardRef(
+var Section = React49.forwardRef(
   ({ padding = "md", gap, className, as, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Stack,
@@ -8882,38 +8727,38 @@ Section.displayName = "Section";
 var labelVariants = cva(
   `${TEXT_TOKENS.fontSize.sm} ${TEXT_TOKENS.fontWeight.medium} ${TEXT_TOKENS.lineHeight.none} peer-disabled:cursor-not-allowed peer-disabled:opacity-70`
 );
-var Label2 = React48.forwardRef(
+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(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
   ] })
 );
 Label2.displayName = LabelPrimitive.Root.displayName;
-var Field = React48.forwardRef(
+var Field = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Stack, { ref, gap: "sm", className: cn(className), ...props, children });
   }
 );
 Field.displayName = "Field";
-var FieldLabel = React48.forwardRef(
+var FieldLabel = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Label2, { ref, className, ...props });
   }
 );
 FieldLabel.displayName = "FieldLabel";
-var FieldControl = React48.forwardRef(
+var FieldControl = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...props, children });
   }
 );
 FieldControl.displayName = "FieldControl";
-var FieldDescription = React48.forwardRef(
+var FieldDescription = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Text, { ref, size: "sm", muted: true, className: cn(className), ...props });
   }
 );
 FieldDescription.displayName = "FieldDescription";
-var FieldError = React48.forwardRef(
+var FieldError = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Text, { ref, size: "sm", className: cn("text-destructive", className), ...props });
   }
@@ -8961,7 +8806,7 @@ var inputVariants = cva(
     }
   }
 );
-var Input = React48.forwardRef(
+var Input = React49.forwardRef(
   ({
     className,
     type = "text",
@@ -8979,8 +8824,8 @@ var Input = React48.forwardRef(
     const isError = state === "error" || ariaInvalid === true;
     const isDisabled = disabled || state === "disabled";
     const ariaInvalidValue = isError ? true : ariaInvalid;
-    const inputId = React48.useId();
-    const [describedById] = React48.useState(() => {
+    const inputId = React49.useId();
+    const [describedById] = React49.useState(() => {
       if (ariaDescribedBy) return ariaDescribedBy;
       if (state === "error" || state === "success") {
         return `input-${inputId}-message`;
@@ -9083,8 +8928,8 @@ var radioVariants = cva(
     }
   }
 );
-var RadioGroupContext = React48.createContext(void 0);
-var RadioGroup = React48.forwardRef(
+var RadioGroupContext = React49.createContext(void 0);
+var RadioGroup = React49.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -9096,17 +8941,17 @@ var RadioGroup = React48.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React48.useState(defaultValue || "");
+    const [internalValue, setInternalValue] = React49.useState(defaultValue || "");
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const name = React48.useMemo(() => {
+    const name = React49.useMemo(() => {
       if (propName) return propName;
       if (typeof document !== "undefined") {
         return `radio-group-${Math.random().toString(36).substr(2, 9)}`;
       }
       return "radio-group";
     }, [propName]);
-    const handleValueChange = React48.useCallback(
+    const handleValueChange = React49.useCallback(
       (newValue) => {
         if (!isControlled) {
           setInternalValue(newValue);
@@ -9115,7 +8960,7 @@ var RadioGroup = React48.forwardRef(
       },
       [isControlled, onValueChange]
     );
-    const contextValue = React48.useMemo(
+    const contextValue = React49.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
@@ -9142,7 +8987,7 @@ var RadioGroup = React48.forwardRef(
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var Radio = React48.forwardRef(
+var Radio = React49.forwardRef(
   ({
     className,
     variant,
@@ -9160,11 +9005,11 @@ var Radio = React48.forwardRef(
     onKeyDown,
     ...props
   }, ref) => {
-    const radioGroupContext = React48.useContext(RadioGroupContext);
+    const radioGroupContext = React49.useContext(RadioGroupContext);
     const isControlled = controlledChecked !== void 0;
     const isGroupControlled = radioGroupContext !== void 0;
     const checkedInGroup = isGroupControlled && value !== void 0 && radioGroupContext ? radioGroupContext.value === value : false;
-    const [uncontrolledChecked, setUncontrolledChecked] = React48.useState(false);
+    const [uncontrolledChecked, setUncontrolledChecked] = React49.useState(false);
     const finalChecked = (() => {
       if (isControlled) return controlledChecked;
       if (isGroupControlled) return checkedInGroup;
@@ -9173,19 +9018,19 @@ var Radio = React48.forwardRef(
     const effectiveSize = size || radioGroupContext?.size || "md";
     const isDisabled = disabled || state === "disabled";
     const isError = state === "error";
-    const effectiveState = React48.useMemo(() => {
+    const effectiveState = React49.useMemo(() => {
       if (isDisabled) return "disabled";
       if (isError) return "error";
       if (finalChecked) return "checked";
       return "default";
     }, [isDisabled, isError, finalChecked]);
-    const tabIndex = React48.useMemo(() => {
+    const tabIndex = React49.useMemo(() => {
       if (isGroupControlled) {
         return finalChecked ? 0 : -1;
       }
       return 0;
     }, [isGroupControlled, finalChecked]);
-    const handleClick = React48.useCallback(
+    const handleClick = React49.useCallback(
       (event) => {
         if (isDisabled) {
           event.preventDefault();
@@ -9209,7 +9054,7 @@ var Radio = React48.forwardRef(
         onClick
       ]
     );
-    const handleKeyDown = React48.useCallback(
+    const handleKeyDown = React49.useCallback(
       (event) => {
         if (isDisabled) return;
         if (event.key === " " || event.key === "Spacebar") {
@@ -9364,7 +9209,7 @@ var textareaVariants = cva(
     }
   }
 );
-var Textarea = React48.forwardRef(
+var Textarea = React49.forwardRef(
   ({
     className,
     variant,
@@ -9383,8 +9228,8 @@ var Textarea = React48.forwardRef(
     const isError = state === "error" || ariaInvalid === true;
     const isDisabled = disabled || state === "disabled";
     const ariaInvalidValue = isError ? true : ariaInvalid;
-    const generatedId = React48.useId();
-    const [describedById] = React48.useState(() => {
+    const generatedId = React49.useId();
+    const [describedById] = React49.useState(() => {
       if (ariaDescribedBy) return ariaDescribedBy;
       if (state === "error" || state === "success") {
         return `textarea-${generatedId}-message`;
@@ -9448,16 +9293,6 @@ var Textarea = React48.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Progress = ({ value, max = 100, className }) => {
-  const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsx("div", { className: cn("h-2 w-full rounded-full bg-secondary", className), children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "h-2 rounded-full bg-primary transition-[width] duration-normal",
-      style: { width: `${percentage}%` }
-    }
-  ) });
-};
 var skeletonVariants = cva(
   `${DATA_TOKENS.skeleton.background.default} ${DATA_TOKENS.skeleton.animation.pulse}`,
   {
@@ -9475,7 +9310,7 @@ var skeletonVariants = cva(
     }
   }
 );
-var Skeleton = React48.forwardRef(
+var Skeleton = React49.forwardRef(
   ({ className, variant, "aria-hidden": ariaHidden = true, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -9489,10 +9324,10 @@ var Skeleton = React48.forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
-var Portal3 = React48.forwardRef(
+var Portal3 = React49.forwardRef(
   ({ children, container, className, style }, ref) => {
-    const [mounted, setMounted] = React48.useState(false);
-    React48.useEffect(() => {
+    const [mounted, setMounted] = React49.useState(false);
+    React49.useEffect(() => {
       setMounted(true);
     }, []);
     if (!mounted || typeof window === "undefined") {
@@ -9521,7 +9356,7 @@ var backdropVariants = cva("fixed inset-0 z-40 transition-opacity", {
     variant: "default"
   }
 });
-var Backdrop = React48.forwardRef(
+var Backdrop = React49.forwardRef(
   ({ variant = "default", isVisible = true, onClick, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -9541,14 +9376,14 @@ var Backdrop = React48.forwardRef(
 );
 Backdrop.displayName = "Backdrop";
 var DialogRoot = ({ titleId, descriptionId, children, ...props }) => {
-  const titleIdRef = React48.useId();
-  const descriptionIdRef = React48.useId();
+  const titleIdRef = React49.useId();
+  const descriptionIdRef = React49.useId();
   const finalTitleId = titleId || titleIdRef;
   const finalDescriptionId = descriptionId || descriptionIdRef;
   return /* @__PURE__ */ jsx(Modal.Root, { ...props, children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
-    React48.Children.map(children, (child) => {
-      if (React48.isValidElement(child)) {
-        return React48.cloneElement(child, {
+    React49.Children.map(children, (child) => {
+      if (React49.isValidElement(child)) {
+        return React49.cloneElement(child, {
           titleId: finalTitleId,
           descriptionId: finalDescriptionId
         });
@@ -9559,7 +9394,7 @@ var DialogRoot = ({ titleId, descriptionId, children, ...props }) => {
   ] }) });
 };
 DialogRoot.displayName = "DialogRoot";
-var DialogHeader = React48.forwardRef(
+var DialogHeader = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -9577,7 +9412,7 @@ var DialogHeader = React48.forwardRef(
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React48.forwardRef(
+var DialogTitle = React49.forwardRef(
   ({ titleId, className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Heading,
@@ -9595,7 +9430,7 @@ var DialogTitle = React48.forwardRef(
   }
 );
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React48.forwardRef(
+var DialogDescription = React49.forwardRef(
   ({ descriptionId, className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "p",
@@ -9610,7 +9445,7 @@ var DialogDescription = React48.forwardRef(
   }
 );
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = React48.forwardRef(
+var DialogBody = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -9623,7 +9458,7 @@ var DialogBody = React48.forwardRef(
   }
 );
 DialogBody.displayName = "DialogBody";
-var DialogFooter = React48.forwardRef(
+var DialogFooter = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Row,
@@ -9663,7 +9498,7 @@ var toastVariants = cva(
     }
   }
 );
-var ToastRoot = React48.forwardRef(
+var ToastRoot = React49.forwardRef(
   ({ toast, variant, className, ...props }, ref) => {
     const toastVariant = variant || toast.variant || "default";
     const durationMs = toast.duration ? getDelayMs(toast.duration, 5e3) : 5e3;
@@ -9731,7 +9566,7 @@ var ToastRoot = React48.forwardRef(
   }
 );
 ToastRoot.displayName = ToastPrimitives.Root.displayName;
-var ToastTitle = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Title,
   {
     ref,
@@ -9740,7 +9575,7 @@ var ToastTitle = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
-var ToastDescription = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Description,
   {
     ref,
@@ -9749,7 +9584,7 @@ var ToastDescription = React48.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
-var ToastAction = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastAction = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Action,
   {
     ref,
@@ -9764,7 +9599,7 @@ var ToastAction = React48.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-var ToastClose = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToastClose = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Close,
   {
     ref,
@@ -9797,7 +9632,7 @@ var positionClasses = {
   "bottom-center": `fixed ${TOAST_TOKENS.position.spacing.bottom} inset-x-0 z-[100] flex flex-col-reverse items-center ${TOAST_TOKENS.spacing.gap}`,
   "bottom-right": `fixed ${TOAST_TOKENS.position.spacing.bottom} ${TOAST_TOKENS.position.spacing.right} z-[100] flex flex-col-reverse ${TOAST_TOKENS.spacing.gap}`
 };
-var ToastViewport = React48.forwardRef(
+var ToastViewport = React49.forwardRef(
   ({ position = "top-right", className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       ToastPrimitives.Viewport,
@@ -9814,16 +9649,16 @@ var ToastViewport = React48.forwardRef(
   }
 );
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var ToastContext = React48.createContext(void 0);
+var ToastContext = React49.createContext(void 0);
 function ToastProvider({
   children,
   position = "top-right",
   swipeDirection = "right",
   duration = 5e3
 }) {
-  const [toasts, setToasts] = React48.useState([]);
-  const [openStates, setOpenStates] = React48.useState({});
-  const toast = React48.useCallback((options) => {
+  const [toasts, setToasts] = React49.useState([]);
+  const [openStates, setOpenStates] = React49.useState({});
+  const toast = React49.useCallback((options) => {
     const id = Math.random().toString(36).substr(2, 9);
     const newToast = {
       id,
@@ -9834,7 +9669,7 @@ function ToastProvider({
     setOpenStates((prev) => ({ ...prev, [id]: true }));
     return id;
   }, []);
-  const dismiss = React48.useCallback((id) => {
+  const dismiss = React49.useCallback((id) => {
     setOpenStates((prev) => ({ ...prev, [id]: false }));
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -9845,7 +9680,7 @@ function ToastProvider({
       });
     }, 300);
   }, []);
-  const dismissAll = React48.useCallback(() => {
+  const dismissAll = React49.useCallback(() => {
     setOpenStates((prev) => {
       const next = { ...prev };
       Object.keys(next).forEach((id) => {
@@ -9858,7 +9693,7 @@ function ToastProvider({
       setOpenStates({});
     }, 300);
   }, []);
-  const contextValue = React48.useMemo(
+  const contextValue = React49.useMemo(
     () => ({
       toast,
       dismiss,
@@ -9889,7 +9724,7 @@ function ToastProvider({
   ] }) });
 }
 function useToast() {
-  const context = React48.useContext(ToastContext);
+  const context = React49.useContext(ToastContext);
   if (context === void 0) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -9902,7 +9737,7 @@ function notifyListeners() {
 }
 function useGlobalToast() {
   const [toasts, setToasts] = useState(globalToasts);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     const listener = () => {
       setToasts([...globalToasts]);
     };
@@ -9985,8 +9820,8 @@ function useFocusLock({
   returnFocusRef,
   additionalFocusableElements = []
 }) {
-  const previousActiveElementRef = React48.useRef(null);
-  React48.useEffect(() => {
+  const previousActiveElementRef = React49.useRef(null);
+  React49.useEffect(() => {
     if (!enabled || !containerRef.current) {
       return;
     }
@@ -10233,9 +10068,9 @@ var CONTEXT_MENU_TOKENS = {
   indicator: {
     size: "size-4"}
 };
-var ContextMenuSizeContext = React48.createContext(void 0);
+var ContextMenuSizeContext = React49.createContext(void 0);
 function useContextMenuSize(providedSize) {
-  const contextSize = React48.useContext(ContextMenuSizeContext);
+  const contextSize = React49.useContext(ContextMenuSizeContext);
   const baseSize = providedSize ? getBaseValue(providedSize) : void 0;
   return baseSize ?? contextSize ?? "md";
 }
@@ -10302,11 +10137,11 @@ var ContextMenuRoot = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.Root, { ...props, children });
 };
 ContextMenuRoot.displayName = ContextMenuPrimitive.Root.displayName;
-var ContextMenuTrigger = React48.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuTrigger = React49.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.Trigger, { ref, className: cn(className), ...props });
 });
 ContextMenuTrigger.displayName = ContextMenuPrimitive.Trigger.displayName;
-var ContextMenuContent = React48.forwardRef(({ className, size = "md", width, padding, radius, surface, ...props }, ref) => {
+var ContextMenuContent = React49.forwardRef(({ className, size = "md", width, padding, radius, surface, ...props }, ref) => {
   const baseSize = getBaseValue(size) ?? "md";
   const baseWidth = width ? getBaseValue(width) : void 0;
   const basePadding = padding ? getBaseValue(padding) : void 0;
@@ -10335,7 +10170,7 @@ var ContextMenuContent = React48.forwardRef(({ className, size = "md", width, pa
   ) }) });
 });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React48.forwardRef(({ className, size, tone = "neutral", gap, inset, ...props }, ref) => {
+var ContextMenuItem = React49.forwardRef(({ className, size, tone = "neutral", gap, inset, ...props }, ref) => {
   const baseSize = useContextMenuSize(size);
   const baseGap = gap ? getBaseValue(gap) : void 0;
   const gapClass = getSpacingClass2("gap", baseGap);
@@ -10357,7 +10192,7 @@ var ContextMenuItem = React48.forwardRef(({ className, size, tone = "neutral", g
   );
 });
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React48.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
+var ContextMenuCheckboxItem = React49.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
   const baseSize = useContextMenuSize(size);
   const baseGap = gap ? getBaseValue(gap) : void 0;
   const gapClass = getSpacingClass2("gap", baseGap);
@@ -10382,11 +10217,11 @@ var ContextMenuCheckboxItem = React48.forwardRef(({ className, size, tone = "neu
   );
 });
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioGroup = React48.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuRadioGroup = React49.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.RadioGroup, { ref, className: cn(className), ...props });
 });
 ContextMenuRadioGroup.displayName = ContextMenuPrimitive.RadioGroup.displayName;
-var ContextMenuRadioItem = React48.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
+var ContextMenuRadioItem = React49.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
   const baseSize = useContextMenuSize(size);
   const baseGap = gap ? getBaseValue(gap) : void 0;
   const gapClass = getSpacingClass2("gap", baseGap);
@@ -10411,7 +10246,7 @@ var ContextMenuRadioItem = React48.forwardRef(({ className, size, tone = "neutra
   );
 });
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuSeparator = React48.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuSeparator = React49.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ContextMenuPrimitive.Separator,
     {
@@ -10425,7 +10260,7 @@ var ContextMenuSeparator = React48.forwardRef(({ className, ...props }, ref) =>
   );
 });
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-var ContextMenuLabel = React48.forwardRef(({ className, padding, ...props }, ref) => {
+var ContextMenuLabel = React49.forwardRef(({ className, padding, ...props }, ref) => {
   const basePadding = padding ? getBaseValue(padding) : void 0;
   const paddingClass = getSpacingClass2("p", basePadding);
   return /* @__PURE__ */ jsx(
@@ -10447,7 +10282,7 @@ var ContextMenuSub = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.Sub, { ...props, children });
 };
 ContextMenuSub.displayName = ContextMenuPrimitive.Sub.displayName;
-var ContextMenuSubTrigger = React48.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
+var ContextMenuSubTrigger = React49.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
   const baseSize = useContextMenuSize(size);
   const baseGap = gap ? getBaseValue(gap) : void 0;
   const gapClass = getSpacingClass2("gap", baseGap);
@@ -10472,8 +10307,8 @@ var ContextMenuSubTrigger = React48.forwardRef(({ className, size, tone = "neutr
   );
 });
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React48.forwardRef(({ className, size, width, padding, radius, surface, ...props }, ref) => {
-  const contextSize = React48.useContext(ContextMenuSizeContext);
+var ContextMenuSubContent = React49.forwardRef(({ className, size, width, padding, radius, surface, ...props }, ref) => {
+  const contextSize = React49.useContext(ContextMenuSizeContext);
   const baseSize = size ? getBaseValue(size) : contextSize ?? "md";
   const baseWidth = width ? getBaseValue(width) : void 0;
   const basePadding = padding ? getBaseValue(padding) : void 0;
@@ -10516,18 +10351,18 @@ var ContextMenu = {
   SubTrigger: ContextMenuSubTrigger,
   SubContent: ContextMenuSubContent
 };
-var NotificationContext = React48.createContext(void 0);
+var NotificationContext = React49.createContext(void 0);
 function NotificationCenterProvider({
   children,
   maxHistory = 100,
   persistent = true
 }) {
-  const [notifications, setNotifications] = React48.useState([]);
-  const [history, setHistory] = React48.useState([]);
-  const remove = React48.useCallback((id) => {
+  const [notifications, setNotifications] = React49.useState([]);
+  const [history, setHistory] = React49.useState([]);
+  const remove = React49.useCallback((id) => {
     setNotifications((prev) => prev.filter((n) => n.id !== id));
   }, []);
-  const push = React48.useCallback(
+  const push = React49.useCallback(
     (options) => {
       const id = Math.random().toString(36).substr(2, 9);
       const timestamp = Date.now();
@@ -10572,13 +10407,13 @@ function NotificationCenterProvider({
     },
     [maxHistory, persistent]
   );
-  const clearAll = React48.useCallback(() => {
+  const clearAll = React49.useCallback(() => {
     setNotifications([]);
   }, []);
-  const clearChannel = React48.useCallback((channel) => {
+  const clearChannel = React49.useCallback((channel) => {
     setNotifications((prev) => prev.filter((n) => n.channel !== channel));
   }, []);
-  const groupBy = React48.useCallback(
+  const groupBy = React49.useCallback(
     (fn) => {
       return notifications.reduce(
         (acc, notification) => {
@@ -10594,30 +10429,30 @@ function NotificationCenterProvider({
     },
     [notifications]
   );
-  const getHistory = React48.useCallback(() => {
+  const getHistory = React49.useCallback(() => {
     return history;
   }, [history]);
-  const getByChannel = React48.useCallback(
+  const getByChannel = React49.useCallback(
     (channel) => {
       return notifications.filter((n) => n.channel === channel);
     },
     [notifications]
   );
-  const getAll = React48.useCallback(() => {
+  const getAll = React49.useCallback(() => {
     return notifications;
   }, [notifications]);
-  const markAsRead = React48.useCallback((id) => {
+  const markAsRead = React49.useCallback((id) => {
     setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
     setHistory((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
   }, []);
-  const markAllAsRead = React48.useCallback(() => {
+  const markAllAsRead = React49.useCallback(() => {
     setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
     setHistory((prev) => prev.map((n) => ({ ...n, read: true })));
   }, []);
-  const getUnreadCount = React48.useCallback(() => {
+  const getUnreadCount = React49.useCallback(() => {
     return notifications.filter((n) => !n.read).length;
   }, [notifications]);
-  const contextValue = React48.useMemo(
+  const contextValue = React49.useMemo(
     () => ({
       push,
       remove,
@@ -10648,7 +10483,7 @@ function NotificationCenterProvider({
   return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: contextValue, children });
 }
 function useNotificationCenterContext() {
-  const context = React48.useContext(NotificationContext);
+  const context = React49.useContext(NotificationContext);
   if (context === void 0) {
     throw new Error(
       "useNotificationCenterContext must be used within a NotificationCenterProvider"
@@ -10656,7 +10491,7 @@ function useNotificationCenterContext() {
   }
   return context;
 }
-var NotificationCenterDismissAll = React48.forwardRef(({ confirm = false, confirmMessage = "Clear all notifications?", className, ...props }, ref) => {
+var NotificationCenterDismissAll = React49.forwardRef(({ confirm = false, confirmMessage = "Clear all notifications?", className, ...props }, ref) => {
   const { clearAll, getAll } = useNotificationCenterContext();
   const notifications = getAll();
   const handleClick = () => {
@@ -10687,7 +10522,7 @@ var NotificationCenterDismissAll = React48.forwardRef(({ confirm = false, confir
   );
 });
 NotificationCenterDismissAll.displayName = "NotificationCenter.DismissAll";
-var NotificationCenterGroupHeader = React48.forwardRef(
+var NotificationCenterGroupHeader = React49.forwardRef(
   ({ label, collapsed = false, onToggleCollapse, collapsible = false, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -10750,7 +10585,7 @@ function formatRelativeTime(timestamp) {
   if (days < 7) return `${days}d ago`;
   return new Date(timestamp).toLocaleDateString();
 }
-var NotificationCenterItem = React48.forwardRef(
+var NotificationCenterItem = React49.forwardRef(
   ({ notification, onDismiss, onClick, expandable: _expandable = false, className, ...props }, ref) => {
     const variant = notification.variant || "default";
     const Icon3 = getNotificationIcon(variant);
@@ -10825,7 +10660,7 @@ var NotificationCenterItem = React48.forwardRef(
   }
 );
 NotificationCenterItem.displayName = "NotificationCenter.Item";
-var NotificationCenterList = React48.forwardRef(({ children, className, "aria-label": ariaLabel, ...props }, ref) => {
+var NotificationCenterList = React49.forwardRef(({ children, className, "aria-label": ariaLabel, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Stack,
     {
@@ -10982,11 +10817,11 @@ function groupByDate(notification) {
   if (days < 30) return "This Month";
   return "Older";
 }
-var NotificationCenterPanel = React48.forwardRef(
+var NotificationCenterPanel = React49.forwardRef(
   ({ isOpen, onClose, groupBy = groupByDate, width = "md", autoCollapse = true, returnFocusRef }, ref) => {
-    const panelRef = React48.useRef(null);
+    const panelRef = React49.useRef(null);
     const { getAll, markAsRead } = useNotificationCenterContext();
-    const [collapsedGroups, setCollapsedGroups] = React48.useState(/* @__PURE__ */ new Set());
+    const [collapsedGroups, setCollapsedGroups] = React49.useState(/* @__PURE__ */ new Set());
     const { handlers: swipeHandlers } = useSwipe({
       directions: ["right"],
       threshold: 100,
@@ -10996,7 +10831,7 @@ var NotificationCenterPanel = React48.forwardRef(
       enabled: isOpen
     });
     const notifications = getAll();
-    const grouped = React48.useMemo(() => {
+    const grouped = React49.useMemo(() => {
       return groupBy ? notifications.reduce(
         (acc, notification) => {
           const key = groupBy(notification);
@@ -11009,7 +10844,7 @@ var NotificationCenterPanel = React48.forwardRef(
         {}
       ) : { default: notifications };
     }, [notifications, groupBy]);
-    React48.useEffect(() => {
+    React49.useEffect(() => {
       if (autoCollapse && isOpen) {
         const groups = Object.keys(grouped);
         const olderGroups = groups.filter((g) => g !== "Today" && g !== "Yesterday");
@@ -11021,7 +10856,7 @@ var NotificationCenterPanel = React48.forwardRef(
       enabled: isOpen,
       returnFocusRef
     });
-    React48.useEffect(() => {
+    React49.useEffect(() => {
       if (!isOpen) return;
       function handleKeyDown(event) {
         if (event.key === "Escape") {
@@ -11033,7 +10868,7 @@ var NotificationCenterPanel = React48.forwardRef(
         document.removeEventListener("keydown", handleKeyDown);
       };
     }, [isOpen, onClose]);
-    React48.useEffect(() => {
+    React49.useEffect(() => {
       if (isOpen) {
         notifications.forEach((n) => {
           if (!n.read) {
@@ -11042,7 +10877,7 @@ var NotificationCenterPanel = React48.forwardRef(
         });
       }
     }, [isOpen, notifications, markAsRead]);
-    React48.useEffect(() => {
+    React49.useEffect(() => {
       if (isOpen && typeof window !== "undefined") {
         document.body.style.overflow = "hidden";
         return () => {
@@ -11157,7 +10992,7 @@ var NotificationCenterPanel = React48.forwardRef(
   }
 );
 NotificationCenterPanel.displayName = "NotificationCenter.Panel";
-var NotificationCenterTrigger = React48.forwardRef(({ onClick, showBadge = true, className, ...props }, ref) => {
+var NotificationCenterTrigger = React49.forwardRef(({ onClick, showBadge = true, className, ...props }, ref) => {
   const { getUnreadCount } = useNotificationCenterContext();
   const unreadCount = getUnreadCount();
   return /* @__PURE__ */ jsxs(
@@ -11189,7 +11024,7 @@ var NotificationCenterTrigger = React48.forwardRef(({ onClick, showBadge = true,
 NotificationCenterTrigger.displayName = "NotificationCenter.Trigger";
 function useNotificationCenter() {
   const context = useNotificationCenterContext();
-  const success = React48.useCallback(
+  const success = React49.useCallback(
     (message, options) => {
       return context.push({
         ...options,
@@ -11200,7 +11035,7 @@ function useNotificationCenter() {
     },
     [context]
   );
-  const error = React48.useCallback(
+  const error = React49.useCallback(
     (message, options) => {
       return context.push({
         ...options,
@@ -11211,7 +11046,7 @@ function useNotificationCenter() {
     },
     [context]
   );
-  const info = React48.useCallback(
+  const info = React49.useCallback(
     (message, options) => {
       return context.push({
         ...options,
@@ -11222,7 +11057,7 @@ function useNotificationCenter() {
     },
     [context]
   );
-  const warning = React48.useCallback(
+  const warning = React49.useCallback(
     (message, options) => {
       return context.push({
         ...options,
@@ -11233,7 +11068,7 @@ function useNotificationCenter() {
     },
     [context]
   );
-  const system = React48.useCallback(
+  const system = React49.useCallback(
     (message, options) => {
       return context.push({
         ...options,
@@ -11244,7 +11079,7 @@ function useNotificationCenter() {
     },
     [context]
   );
-  const log = React48.useCallback(
+  const log = React49.useCallback(
     (message, options) => {
       return context.push({
         ...options,
@@ -11255,7 +11090,7 @@ function useNotificationCenter() {
     },
     [context]
   );
-  return React48.useMemo(
+  return React49.useMemo(
     () => ({
       success,
       error,
@@ -11310,12 +11145,12 @@ var popoverContentVariants = cva(
     }
   }
 );
-var PopoverContent = React48.forwardRef(({ className, variant, size, align = "center", sideOffset, alignOffset, ...props }, ref) => {
-  const sideOffsetPx = React48.useMemo(() => {
+var PopoverContent = React49.forwardRef(({ className, variant, size, align = "center", sideOffset, alignOffset, ...props }, ref) => {
+  const sideOffsetPx = React49.useMemo(() => {
     const baseOffset = getBaseValue(sideOffset);
     return baseOffset ? getSpacingPx(baseOffset) : 4;
   }, [sideOffset]);
-  const alignOffsetPx = React48.useMemo(() => {
+  const alignOffsetPx = React49.useMemo(() => {
     const baseOffset = getBaseValue(alignOffset);
     return baseOffset ? getSpacingPx(baseOffset) : void 0;
   }, [alignOffset]);
@@ -11333,9 +11168,9 @@ var PopoverContent = React48.forwardRef(({ className, variant, size, align = "ce
   ) });
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var HoverCardContext = React48.createContext(null);
+var HoverCardContext = React49.createContext(null);
 function useHoverCardContext() {
-  const context = React48.useContext(HoverCardContext);
+  const context = React49.useContext(HoverCardContext);
   if (!context) {
     throw new Error("HoverCard components must be used within HoverCardRoot");
   }
@@ -11350,20 +11185,20 @@ function HoverCardRoot({
   modal = false,
   ...props
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React48.useState(defaultOpen);
-  const openTimeoutRef = React48.useRef(null);
-  const closeTimeoutRef = React48.useRef(null);
-  const openDelayMs = React48.useMemo(() => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React49.useState(defaultOpen);
+  const openTimeoutRef = React49.useRef(null);
+  const closeTimeoutRef = React49.useRef(null);
+  const openDelayMs = React49.useMemo(() => {
     const baseDelay = getBaseValue(openDelay);
     return baseDelay ? getDurationMs(baseDelay) : 0;
   }, [openDelay]);
-  const closeDelayMs = React48.useMemo(() => {
+  const closeDelayMs = React49.useMemo(() => {
     const baseDelay = getBaseValue(closeDelay);
     return baseDelay ? getDurationMs(baseDelay) : 300;
   }, [closeDelay]);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const handleOpenChange = React48.useCallback(
+  const handleOpenChange = React49.useCallback(
     (newOpen) => {
       if (openTimeoutRef.current) {
         clearTimeout(openTimeoutRef.current);
@@ -11403,7 +11238,7 @@ function HoverCardRoot({
     },
     [openDelayMs, closeDelayMs, isControlled, controlledOnOpenChange]
   );
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     return () => {
       if (openTimeoutRef.current) {
         clearTimeout(openTimeoutRef.current);
@@ -11413,7 +11248,7 @@ function HoverCardRoot({
       }
     };
   }, []);
-  const contextValue = React48.useMemo(
+  const contextValue = React49.useMemo(
     () => ({
       onOpenChange: handleOpenChange
     }),
@@ -11422,17 +11257,17 @@ function HoverCardRoot({
   return /* @__PURE__ */ jsx(HoverCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Popover, { open, onOpenChange: handleOpenChange, defaultOpen, modal, children: props.children }) });
 }
 HoverCardRoot.displayName = "HoverCardRoot";
-var HoverCardContent = React48.forwardRef(
+var HoverCardContent = React49.forwardRef(
   ({ onMouseEnter, onMouseLeave, ...props }, ref) => {
     const { onOpenChange } = useHoverCardContext();
-    const handleMouseEnter = React48.useCallback(
+    const handleMouseEnter = React49.useCallback(
       (event) => {
         onOpenChange(true);
         onMouseEnter?.(event);
       },
       [onOpenChange, onMouseEnter]
     );
-    const handleMouseLeave = React48.useCallback(
+    const handleMouseLeave = React49.useCallback(
       (event) => {
         onOpenChange(false);
         onMouseLeave?.(event);
@@ -11452,31 +11287,31 @@ var HoverCardContent = React48.forwardRef(
   }
 );
 HoverCardContent.displayName = "HoverCardContent";
-var HoverCardTrigger = React48.forwardRef(
+var HoverCardTrigger = React49.forwardRef(
   ({ onMouseEnter, onMouseLeave, onFocus, onBlur, asChild = false, ...props }, ref) => {
     const { onOpenChange } = useHoverCardContext();
-    const handleMouseEnter = React48.useCallback(
+    const handleMouseEnter = React49.useCallback(
       (event) => {
         onOpenChange(true);
         onMouseEnter?.(event);
       },
       [onOpenChange, onMouseEnter]
     );
-    const handleMouseLeave = React48.useCallback(
+    const handleMouseLeave = React49.useCallback(
       (event) => {
         onOpenChange(false);
         onMouseLeave?.(event);
       },
       [onOpenChange, onMouseLeave]
     );
-    const handleFocus = React48.useCallback(
+    const handleFocus = React49.useCallback(
       (event) => {
         onOpenChange(true);
         onFocus?.(event);
       },
       [onOpenChange, onFocus]
     );
-    const handleBlur = React48.useCallback(
+    const handleBlur = React49.useCallback(
       (event) => {
         onOpenChange(false);
         onBlur?.(event);
@@ -11500,7 +11335,7 @@ var HoverCardTrigger = React48.forwardRef(
   }
 );
 HoverCardTrigger.displayName = "HoverCardTrigger";
-var DataListItem = React48.forwardRef(
+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";
@@ -11523,7 +11358,7 @@ var DataListItem = React48.forwardRef(
   }
 );
 DataListItem.displayName = "DataListItem";
-var DataListLabel = React48.forwardRef(
+var DataListLabel = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "dt",
@@ -11542,7 +11377,7 @@ var DataListLabel = React48.forwardRef(
   }
 );
 DataListLabel.displayName = "DataListLabel";
-var DataListValue = React48.forwardRef(
+var DataListValue = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "dd",
@@ -11556,7 +11391,7 @@ var DataListValue = React48.forwardRef(
   }
 );
 DataListValue.displayName = "DataListValue";
-var DataListRoot = React48.forwardRef(
+var DataListRoot = React49.forwardRef(
   ({ labelWidth: _labelWidth = "md", className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx("dl", { ref, className: cn(DATA_LIST_TOKENS.spacing.gap, className), ...props, children });
   }
@@ -11691,7 +11526,7 @@ var TabsRoot = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ...props, children });
 };
 TabsRoot.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React48.forwardRef(
+var TabsList = React49.forwardRef(
   ({ className, size, variant, ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
     const baseVariant = variant ?? "underline";
@@ -11712,7 +11547,7 @@ var TabsList = React48.forwardRef(
   }
 );
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React48.forwardRef(
+var TabsTrigger = React49.forwardRef(
   ({ className, size, variant, tone, leadingIcon, trailingIcon, icon, children, ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
     const baseVariant = variant ?? "underline";
@@ -11761,7 +11596,7 @@ var TabsTrigger = React48.forwardRef(
   }
 );
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React48.forwardRef(
+var TabsContent = React49.forwardRef(
   ({ className, size, ...props }, ref) => {
     const baseSize = getBaseValue(size) ?? "md";
     return /* @__PURE__ */ jsx(
@@ -11826,17 +11661,17 @@ var segmentedControlItemVariants = cva(
     }
   }
 );
-var SegmentedControlContext = React48.createContext(
+var SegmentedControlContext = React49.createContext(
   void 0
 );
 function useSegmentedControlContext() {
-  const context = React48.useContext(SegmentedControlContext);
+  const context = React49.useContext(SegmentedControlContext);
   if (!context) {
     throw new Error("SegmentedControl components must be used within SegmentedControl.Root");
   }
   return context;
 }
-var SegmentedControlRoot = React48.forwardRef(
+var SegmentedControlRoot = React49.forwardRef(
   ({
     value: controlledValue,
     defaultValue,
@@ -11848,17 +11683,17 @@ var SegmentedControlRoot = React48.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React48.useState(defaultValue || "");
+    const [internalValue, setInternalValue] = React49.useState(defaultValue || "");
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : internalValue;
-    const name = React48.useMemo(() => {
+    const name = React49.useMemo(() => {
       if (propName) return propName;
       if (typeof document !== "undefined") {
         return `segmented-control-${Math.random().toString(36).substr(2, 9)}`;
       }
       return "segmented-control";
     }, [propName]);
-    const handleValueChange = React48.useCallback(
+    const handleValueChange = React49.useCallback(
       (newValue) => {
         if (!isControlled) {
           setInternalValue(newValue);
@@ -11867,7 +11702,7 @@ var SegmentedControlRoot = React48.forwardRef(
       },
       [isControlled, onValueChange]
     );
-    const contextValue = React48.useMemo(
+    const contextValue = React49.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
@@ -11891,15 +11726,15 @@ var SegmentedControlRoot = React48.forwardRef(
   }
 );
 SegmentedControlRoot.displayName = "SegmentedControl.Root";
-var SegmentedControlItem = React48.forwardRef(
+var SegmentedControlItem = React49.forwardRef(
   ({ className, value, disabled, size, children, ...props }, ref) => {
     const context = useSegmentedControlContext();
     const isSelected = context.value === value;
     const effectiveSize = size || context.size || "md";
-    const itemRef = React48.useRef(null);
-    React48.useImperativeHandle(ref, () => itemRef.current);
+    const itemRef = React49.useRef(null);
+    React49.useImperativeHandle(ref, () => itemRef.current);
     const tabIndex = isSelected ? 0 : -1;
-    const handleKeyDown = React48.useCallback(
+    const handleKeyDown = React49.useCallback(
       (event) => {
         if (disabled) return;
         const items = Array.from(
@@ -11983,7 +11818,7 @@ var SegmentedControl = Object.assign(SegmentedControlRoot, {
   Root: SegmentedControlRoot,
   Item: SegmentedControlItem
 });
-var BreadcrumbsRoot = React48.forwardRef(
+var BreadcrumbsRoot = React49.forwardRef(
   ({ items, separator, ariaLabel = "Breadcrumb", className, children, ...props }, ref) => {
     const lastIndex = items.length - 1;
     const defaultSeparator = /* @__PURE__ */ jsx(
@@ -12044,13 +11879,13 @@ var BreadcrumbsRoot = React48.forwardRef(
   }
 );
 BreadcrumbsRoot.displayName = "Breadcrumbs.Root";
-var BreadcrumbsItem = React48.forwardRef(
+var BreadcrumbsItem = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx("li", { ref, className: cn("flex items-center", className), ...props, children });
   }
 );
 BreadcrumbsItem.displayName = "Breadcrumbs.Item";
-var BreadcrumbsSeparator = React48.forwardRef(
+var BreadcrumbsSeparator = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
@@ -12099,7 +11934,7 @@ function getVisiblePages(currentPage, totalPages, delta = 2) {
   }
   return rangeWithDots;
 }
-var PaginationRoot = React48.forwardRef(
+var PaginationRoot = React49.forwardRef(
   ({
     currentPage,
     totalPages,
@@ -12112,7 +11947,7 @@ var PaginationRoot = React48.forwardRef(
   }, ref) => {
     const safeTotalPages = Math.max(1, totalPages);
     const safeCurrentPage = Math.min(Math.max(1, currentPage), safeTotalPages);
-    const handlePageChange = React48.useCallback(
+    const handlePageChange = React49.useCallback(
       (page) => {
         const clamped = Math.min(Math.max(page, 1), safeTotalPages);
         if (clamped !== safeCurrentPage) {
@@ -12121,7 +11956,7 @@ var PaginationRoot = React48.forwardRef(
       },
       [safeCurrentPage, safeTotalPages, onPageChange]
     );
-    const visiblePages = React48.useMemo(
+    const visiblePages = React49.useMemo(
       () => getVisiblePages(safeCurrentPage, safeTotalPages, delta),
       [safeCurrentPage, safeTotalPages, delta]
     );
@@ -12140,7 +11975,7 @@ var PaginationRoot = React48.forwardRef(
               onClick: () => handlePageChange(safeCurrentPage - 1)
             }
           ),
-          visiblePages.map((page, index) => /* @__PURE__ */ jsx(React48.Fragment, { children: page === "..." ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(
+          visiblePages.map((page, index) => /* @__PURE__ */ jsx(React49.Fragment, { children: page === "..." ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(
             PaginationItem,
             {
               page,
@@ -12162,7 +11997,7 @@ var PaginationRoot = React48.forwardRef(
   }
 );
 PaginationRoot.displayName = "Pagination.Root";
-var PaginationItem = React48.forwardRef(
+var PaginationItem = React49.forwardRef(
   ({ className, page, isCurrent, disabled, onClick, ...props }, ref) => {
     if (page === "...") {
       return null;
@@ -12198,7 +12033,7 @@ var PaginationItem = React48.forwardRef(
   }
 );
 PaginationItem.displayName = "Pagination.Item";
-var PaginationPrev = React48.forwardRef(
+var PaginationPrev = React49.forwardRef(
   ({ className, disabled, onClick, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "button",
@@ -12232,7 +12067,7 @@ var PaginationPrev = React48.forwardRef(
   }
 );
 PaginationPrev.displayName = "Pagination.Prev";
-var PaginationNext = React48.forwardRef(
+var PaginationNext = React49.forwardRef(
   ({ className, disabled, onClick, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "button",
@@ -12266,7 +12101,7 @@ var PaginationNext = React48.forwardRef(
   }
 );
 PaginationNext.displayName = "Pagination.Next";
-var PaginationEllipsis = React48.forwardRef(
+var PaginationEllipsis = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
@@ -12294,7 +12129,7 @@ var Pagination = Object.assign(PaginationRoot, {
   Next: PaginationNext,
   Ellipsis: PaginationEllipsis
 });
-var StepperRoot = React48.forwardRef(
+var StepperRoot = React49.forwardRef(
   ({
     steps,
     activeStep,
@@ -12340,7 +12175,7 @@ var StepperRoot = React48.forwardRef(
   }
 );
 StepperRoot.displayName = "Stepper.Root";
-var StepperItem = React48.forwardRef(
+var StepperItem = React49.forwardRef(
   ({
     className,
     step,
@@ -12381,7 +12216,7 @@ var StepperItem = React48.forwardRef(
   }
 );
 StepperItem.displayName = "Stepper.Item";
-var StepperIndicator = React48.forwardRef(
+var StepperIndicator = React49.forwardRef(
   ({ className, index, isActive, isCompleted, disabled, icon, showNumber = true, ...props }, ref) => {
     const baseClasses = cn(
       NAVIGATION_TOKENS.sizes.sm.height,
@@ -12442,7 +12277,7 @@ var StepperIndicator = React48.forwardRef(
   }
 );
 StepperIndicator.displayName = "Stepper.Indicator";
-var StepperLabel = React48.forwardRef(
+var StepperLabel = React49.forwardRef(
   ({ className, label, description, isActive, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -12479,7 +12314,7 @@ var StepperLabel = React48.forwardRef(
   }
 );
 StepperLabel.displayName = "Stepper.Label";
-var StepperContent = React48.forwardRef(
+var StepperContent = React49.forwardRef(
   ({ className, isActive, children, ...props }, ref) => {
     if (!isActive) {
       return null;
@@ -12503,13 +12338,13 @@ var Stepper = Object.assign(StepperRoot, {
   Label: StepperLabel,
   Content: StepperContent
 });
-var EmptyStateAction = React48.forwardRef(
+var EmptyStateAction = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx("div", { ref, className: cn(EMPTY_STATE_TOKENS.spacing.action, className), ...props, children });
   }
 );
 EmptyStateAction.displayName = "EmptyStateAction";
-var EmptyStateDescription = React48.forwardRef(
+var EmptyStateDescription = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "p",
@@ -12529,7 +12364,7 @@ var EmptyStateDescription = React48.forwardRef(
   }
 );
 EmptyStateDescription.displayName = "EmptyStateDescription";
-var EmptyStateIcon = React48.forwardRef(
+var EmptyStateIcon = React49.forwardRef(
   ({ children, size = "md", className, ...props }, ref) => {
     const iconSizeClass = EMPTY_STATE_TOKENS.icon.size[size];
     return /* @__PURE__ */ jsx(
@@ -12544,7 +12379,7 @@ var EmptyStateIcon = React48.forwardRef(
   }
 );
 EmptyStateIcon.displayName = "EmptyStateIcon";
-var EmptyStateTitle = React48.forwardRef(
+var EmptyStateTitle = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "h3",
@@ -12563,9 +12398,9 @@ var EmptyStateTitle = React48.forwardRef(
   }
 );
 EmptyStateTitle.displayName = "EmptyStateTitle";
-var EmptyState = React48.forwardRef(
+var EmptyState = React49.forwardRef(
   ({ id, className, children, ...props }, ref) => {
-    const generatedId = React48.useId();
+    const generatedId = React49.useId();
     const emptyStateId = id || `empty-state-${generatedId}`;
     return /* @__PURE__ */ jsx(
       Surface,
@@ -12587,13 +12422,13 @@ EmptyState.Icon = EmptyStateIcon;
 EmptyState.Title = EmptyStateTitle;
 EmptyState.Description = EmptyStateDescription;
 EmptyState.Action = EmptyStateAction;
-var TableBody = React48.forwardRef(
+var TableBody = React49.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx("tbody", { ref, className: cn(className), role: "rowgroup", ...props });
   }
 );
 TableBody.displayName = "TableBody";
-var TableCell = React48.forwardRef(
+var TableCell = React49.forwardRef(
   ({ align = "left", size = "md", className, ...props }, ref) => {
     const paddingClass = TABLE_TOKENS.padding.cell[size];
     const typographyClass = TABLE_TOKENS.typography.cell.fontSize;
@@ -12621,7 +12456,7 @@ var TableCell = React48.forwardRef(
   }
 );
 TableCell.displayName = "TableCell";
-var TableEmpty = React48.forwardRef(
+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: TABLE_TOKENS.empty.padding, children: /* @__PURE__ */ jsxs(EmptyState, { children: [
       /* @__PURE__ */ jsx(EmptyStateIcon, { children: "\u{1F4ED}" }),
@@ -12630,7 +12465,7 @@ var TableEmpty = React48.forwardRef(
   }
 );
 TableEmpty.displayName = "TableEmpty";
-var TableExpandableContent = React48.forwardRef(
+var TableExpandableContent = React49.forwardRef(
   ({ colSpan, expanded, children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "td",
@@ -12659,7 +12494,7 @@ var TableExpandableContent = React48.forwardRef(
   }
 );
 TableExpandableContent.displayName = "TableExpandableContent";
-var TableSortIcon = React48.forwardRef(
+var TableSortIcon = React49.forwardRef(
   ({ direction, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
@@ -12696,10 +12531,10 @@ var TableSortIcon = React48.forwardRef(
   }
 );
 TableSortIcon.displayName = "TableSortIcon";
-var TableHead = React48.forwardRef(
+var TableHead = React49.forwardRef(
   ({ align = "left", sortable = false, columnKey, size = "md", className, children, ...props }, ref) => {
     const { sortState, setSortState } = useTableContext();
-    const handleSort = React48.useCallback(() => {
+    const handleSort = React49.useCallback(() => {
       if (!sortable || !columnKey) return;
       const currentDirection = sortState.column === columnKey ? sortState.direction : null;
       let nextDirection = null;
@@ -12758,7 +12593,7 @@ var TableHead = React48.forwardRef(
   }
 );
 TableHead.displayName = "TableHead";
-var TableHeader = React48.forwardRef(
+var TableHeader = React49.forwardRef(
   ({ sticky = false, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "thead",
@@ -12772,13 +12607,13 @@ var TableHeader = React48.forwardRef(
   }
 );
 TableHeader.displayName = "TableHeader";
-var TableLoadingState = React48.forwardRef(
+var TableLoadingState = React49.forwardRef(
   ({ colSpan, rows = 5, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx("tr", { ref: index === 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)) }, index)) });
   }
 );
 TableLoadingState.displayName = "TableLoadingState";
-var TableRow = React48.forwardRef(
+var TableRow = React49.forwardRef(
   ({
     selected = false,
     expandable = false,
@@ -12807,9 +12642,9 @@ var TableRow = React48.forwardRef(
   }
 );
 TableRow.displayName = "TableRow";
-var TableContext = React48.createContext(null);
+var TableContext = React49.createContext(null);
 function useTableContext() {
-  const context = React48.useContext(TableContext);
+  const context = React49.useContext(TableContext);
   if (!context) {
     throw new Error("Table components must be used within Table.Root");
   }
@@ -12830,12 +12665,12 @@ function TableRoot({
   children,
   ...props
 }) {
-  const [sortState, setSortState] = React48.useState({
+  const [sortState, setSortState] = React49.useState({
     column: null,
     direction: null
   });
-  const [expandedRows, setExpandedRows] = React48.useState(/* @__PURE__ */ new Set());
-  const toggleRow = React48.useCallback((key) => {
+  const [expandedRows, setExpandedRows] = React49.useState(/* @__PURE__ */ new Set());
+  const toggleRow = React49.useCallback((key) => {
     setExpandedRows((prev) => {
       const next = new Set(prev);
       if (next.has(key)) {
@@ -12846,7 +12681,7 @@ function TableRoot({
       return next;
     });
   }, []);
-  const contextValue = React48.useMemo(
+  const contextValue = React49.useMemo(
     () => ({
       sortState,
       setSortState,
@@ -12910,7 +12745,7 @@ var iconVariants = cva("shrink-0", {
     stroke: "normal"
   }
 });
-var Icon2 = React48.forwardRef(
+var Icon2 = React49.forwardRef(
   ({ name, size, color, stroke, className, asChild = false, ...props }, ref) => {
     const IconComponent = ICONS_MAP[name] || ICONS_MAP.error;
     if (!IconComponent) {
@@ -12940,1766 +12775,4 @@ var Icon2 = React48.forwardRef(
 );
 Icon2.displayName = "Icon";
 
-// src/COMPOSITION/motion/animation/tas.ts
-function shouldReduceMotion(override) {
-  if (override === true) return true;
-  if (override === false) return false;
-  if (typeof window === "undefined") return false;
-  try {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    return mediaQuery.matches;
-  } catch {
-    return false;
-  }
-}
-
-// src/COMPOSITION/motion/animation/presets.ts
-var fadePresets = {
-  /**
-   * Fade in animation
-   */
-  fadeIn: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-in"
-    };
-  },
-  /**
-   * Fade out animation
-   */
-  fadeOut: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-out"
-    };
-  },
-  /**
-   * Fade in from top
-   */
-  fadeInUp: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-slide-up"
-    };
-  },
-  /**
-   * Fade in from bottom
-   */
-  fadeInDown: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-slide-down"
-    };
-  },
-  /**
-   * Fade in from left
-   */
-  fadeInLeft: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-slide-left"
-    };
-  },
-  /**
-   * Fade in from right
-   */
-  fadeInRight: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-slide-right"
-    };
-  }
-};
-var slidePresets = {
-  /**
-   * Slide in from bottom
-   */
-  slideInUp: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-slide-up"
-    };
-  },
-  /**
-   * Slide in from top
-   */
-  slideInDown: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-slide-down"
-    };
-  },
-  /**
-   * Slide in from left
-   */
-  slideInLeft: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-slide-left"
-    };
-  },
-  /**
-   * Slide in from right
-   */
-  slideInRight: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-slide-right"
-    };
-  },
-  /**
-   * Slide out to top
-   */
-  slideOutUp: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-slide-up-out"
-    };
-  },
-  /**
-   * Slide out to bottom
-   */
-  slideOutDown: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-slide-down-out"
-    };
-  },
-  /**
-   * Slide out to left
-   */
-  slideOutLeft: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-slide-left-out"
-    };
-  },
-  /**
-   * Slide out to right
-   */
-  slideOutRight: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-fade-slide-right-out"
-    };
-  }
-};
-var scalePresets = {
-  /**
-   * Scale in animation
-   */
-  scaleIn: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-scale-in"
-    };
-  },
-  /**
-   * Scale out animation
-   */
-  scaleOut: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-scale-out"
-    };
-  },
-  /**
-   * Scale up on hover
-   */
-  scaleUp: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-hover-scale"
-    };
-  },
-  /**
-   * Scale down on tap
-   */
-  scaleDown: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-tap-scale"
-    };
-  }
-};
-var hoverPresets = {
-  /**
-   * Lift up on hover (combines scale and y translation)
-   */
-  hoverLift: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-hover-lift"
-    };
-  },
-  /**
-   * Scale up on hover
-   */
-  hoverScale: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-hover-scale"
-    };
-  },
-  /**
-   * Scale down on tap
-   */
-  tapScale: (config) => {
-    const reduceMotion = shouldReduceMotion(config?.reducedMotion);
-    return {
-      className: reduceMotion ? "" : "tm-motion-tap-scale"
-    };
-  }
-};
-
-// src/COMPOSITION/motion/animation/utils.ts
-function resolveAnimationPreset(preset) {
-  if (!preset) return void 0;
-  if (typeof preset === "string") ; else {
-    const baseValue = getBaseValue(preset);
-    if (baseValue && typeof baseValue === "string") {
-      return resolveAnimationPreset(baseValue);
-    }
-    return void 0;
-  }
-  switch (preset) {
-    case "fadeIn":
-      return fadePresets.fadeIn();
-    case "fadeInUp":
-      return fadePresets.fadeInUp();
-    case "fadeInDown":
-      return fadePresets.fadeInDown();
-    case "fadeInLeft":
-      return fadePresets.fadeInLeft();
-    case "fadeInRight":
-      return fadePresets.fadeInRight();
-    case "slideInUp":
-      return slidePresets.slideInUp();
-    case "slideInDown":
-      return slidePresets.slideInDown();
-    case "slideInLeft":
-      return slidePresets.slideInLeft();
-    case "slideInRight":
-      return slidePresets.slideInRight();
-    case "scaleIn":
-      return scalePresets.scaleIn();
-    default:
-      return void 0;
-  }
-}
-function resolveHoverAnimationPreset(preset) {
-  if (!preset) return void 0;
-  if (typeof preset === "object") {
-    return preset;
-  }
-  switch (preset) {
-    case "hoverLift":
-      return hoverPresets.hoverLift();
-    case "hoverScale":
-      return hoverPresets.hoverScale();
-    case "tapScale":
-      return hoverPresets.tapScale();
-    default:
-      return void 0;
-  }
-}
-function resolveComponentAnimations(config) {
-  if (!config) return {};
-  const animation = resolveAnimationPreset(config.animation);
-  const hoverAnimation = resolveHoverAnimationPreset(config.hoverAnimation);
-  const customProps = config.animationProps || {};
-  return {
-    ...animation,
-    ...hoverAnimation,
-    ...customProps
-  };
-}
-var cardBaseVariants = cva(
-  // Base classes - surface, border, radius, shadow, motion
-  `${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: `${DOMAIN_TOKENS.layout.padding.default} ${DOMAIN_TOKENS.layout.gap.default}`,
-        compact: `${DOMAIN_TOKENS.layout.padding.compact} ${DOMAIN_TOKENS.layout.gap.compact}`
-      },
-      variant: {
-        default: "",
-        featured: `${DOMAIN_TOKENS.badges.surface.featured}`
-      }
-    },
-    defaultVariants: {
-      size: "default",
-      variant: "default"
-    }
-  }
-);
-var cardBaseImageVariants = cva(
-  // Base classes - aspect ratio, radius, overflow
-  `${DOMAIN_TOKENS.image.aspectRatio} ${DOMAIN_TOKENS.image.radius} overflow-hidden`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var cardBaseContentVariants = cva(
-  // Base classes - flex column layout
-  "flex flex-col",
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var cardBaseFooterVariants = cva(
-  // Base classes - flex layout
-  "flex",
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var CardBase = React48.forwardRef(
-  ({ size = "default", variant = "default", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(cardBaseVariants({ size, variant }), className), ...props, children });
-  }
-);
-CardBase.displayName = "CardBase";
-var CardBaseImageWrapper = React48.forwardRef(
-  ({ size = "default", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(cardBaseImageVariants({ size }), className), ...props, children });
-  }
-);
-CardBaseImageWrapper.displayName = "CardBaseImageWrapper";
-var CardBaseContentWrapper = React48.forwardRef(
-  ({ size = "default", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Stack,
-      {
-        ref,
-        direction: "vertical",
-        className: cn(cardBaseContentVariants({ size }), className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-CardBaseContentWrapper.displayName = "CardBaseContentWrapper";
-var CardBaseFooterWrapper = React48.forwardRef(
-  ({ size = "default", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(cardBaseFooterVariants({ size }), className), ...props, children });
-  }
-);
-CardBaseFooterWrapper.displayName = "CardBaseFooterWrapper";
-var linkVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        primary: "text-primary hover:text-primary/80 underline-offset-4 hover:underline",
-        secondary: "text-secondary-foreground underline-offset-4 hover:underline",
-        accent: "text-accent-foreground hover:text-accent-foreground/80 underline-offset-4 hover:underline",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-md px-md py-sm",
-        ghost: "text-foreground hover:text-accent-foreground hover:bg-accent rounded-md px-sm py-sm",
-        link: "text-primary underline-offset-4 hover:underline",
-        destructive: "text-destructive hover:text-destructive/80 underline-offset-4 hover:underline"
-      },
-      size: {
-        xs: "h-7 text-xs px-xs py-xs",
-        sm: "h-8 text-xs px-sm py-xs",
-        md: "h-9 text-sm px-md py-sm",
-        lg: "h-10 text-sm px-lg py-sm",
-        xl: "h-11 text-base px-xl py-md"
-      }
-    },
-    defaultVariants: {
-      variant: "link",
-      size: "md"
-    }
-  }
-);
-var Link = React48.forwardRef(
-  ({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : "a";
-    return /* @__PURE__ */ jsxs(Comp, { className: cn(linkVariants({ variant, size, className })), ref, ...props, children: [
-      leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: leftIcon }),
-      children,
-      rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
-    ] });
-  }
-);
-Link.displayName = "Link";
-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 = React48.forwardRef(
-  ({
-    title,
-    description,
-    date,
-    venueName,
-    price,
-    imageUrl,
-    href,
-    ticketUrl,
-    featured = false,
-    showImage = true,
-    getTicketsLabel,
-    featuredBadgeText,
-    size = "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,
-        variant: cardVariant,
-        className: cn(
-          eventCardVariants({ size, layout, variant: cardVariant }),
-          "group relative",
-          className
-        ),
-        ...props,
-        children: [
-          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: eventCardBadgeVariants({ size }), children: /* @__PURE__ */ jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size, 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, children: [
-            /* @__PURE__ */ jsx(
-              Heading,
-              {
-                level: 3,
-                className: cn(
-                  "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
-                ),
-                children: href ? /* @__PURE__ */ jsx(Link, { href, variant: "ghost", children: title }) : title
-              }
-            ),
-            description && /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "sm",
-                muted: true,
-                className: cn(
-                  "line-clamp-2",
-                  size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
-                ),
-                children: description
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: eventCardMetadataVariants({ size }), children: [
-              date && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size }), role: "text", children: [
-                /* @__PURE__ */ jsx(
-                  IconCalendar,
-                  {
-                    className: eventCardMetadataIconVariants({ size }),
-                    "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 }), role: "text", children: [
-                /* @__PURE__ */ jsx(
-                  IconLocation,
-                  {
-                    className: eventCardMetadataIconVariants({ size }),
-                    "aria-hidden": true
-                  }
-                ),
-                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: /* @__PURE__ */ jsx("address", { children: venueName }) })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size })), children: [
-            ticketUrl && /* @__PURE__ */ jsxs(
-              Link,
-              {
-                href: ticketUrl,
-                className: cn("w-full", eventCardTicketButtonVariants({ size })),
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: [
-                  getTicketsLabel,
-                  /* @__PURE__ */ jsx(
-                    IconArrowRight,
-                    {
-                      className: eventCardTicketButtonIconVariants({ size }),
-                      "aria-hidden": true
-                    }
-                  )
-                ]
-              }
-            ),
-            !ticketUrl && price && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: size === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsx("span", { className: eventCardPriceVariants({ size }), children: price }) }) })
-          ] }) })
-        ]
-      }
-    ) });
-  }
-);
-EventCard.displayName = "EventCard";
-var artistCardVariants = cva("group relative", {
-  variants: {
-    size: {
-      default: "",
-      compact: ""
-    },
-    variant: {
-      default: "",
-      featured: ""
-    }
-  },
-  defaultVariants: {
-    size: "default",
-    variant: "default"
-  }
-});
-var artistCardBadgeVariants = 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)
-        compact: DOMAIN_TOKENS.badges.position.compact
-        // Compact positioning - maps to semanticSpacing.sm (8px)
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var artistCardBadgeSurfaceVariants = cva(
-  // Base classes - flex layout, items center, badge styling
-  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.badges.size.md,
-        compact: DOMAIN_TOKENS.badges.size.sm
-      },
-      variant: {
-        default: DOMAIN_TOKENS.badges.surface.default,
-        featured: DOMAIN_TOKENS.badges.surface.featured
-      }
-    },
-    defaultVariants: {
-      size: "default",
-      variant: "featured"
-    }
-  }
-);
-var artistCardImageOverlayVariants = 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 artistCardImageTransformVariants = cva(
-  `object-cover ${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.slow} ${DOMAIN_TOKENS.motion.hover.scale}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var artistCardMetadataVariants = cva(
-  // Base classes - flex column, metadata spacing
-  `flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var artistCardMetadataItemVariants = 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 artistCardMetadataIconVariants = cva(
-  // Base classes - icon size and color
-  `${ICON_TOKENS.sizes.md} ${ICON_TOKENS.colors.muted}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var artistCardGenresVariants = cva(
-  // Base classes - genres text styling
-  `${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var artistCardFooterBorderVariants = cva(
-  // Base classes - border top from ARTIST_TOKENS, spacing from DOMAIN_TOKENS
-  ARTIST_TOKENS.footer.border.top,
-  {
-    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 ArtistCard = React48.forwardRef(
-  ({
-    name,
-    description,
-    genres,
-    followers,
-    plays,
-    imageUrl,
-    href,
-    featured = false,
-    showImage = true,
-    popularBadgeText,
-    followersLabel,
-    playsLabel,
-    size = "default",
-    variant,
-    className,
-    animation,
-    ...props
-  }, ref) => {
-    if (!name || name.trim() === "") {
-      throw new Error('ArtistCard: "name" prop is required and cannot be empty');
-    }
-    if (!followersLabel || followersLabel.trim() === "") {
-      throw new Error('ArtistCard: "followersLabel" prop is required and cannot be empty');
-    }
-    if (!playsLabel || playsLabel.trim() === "") {
-      throw new Error('ArtistCard: "playsLabel" prop is required and cannot be empty');
-    }
-    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,
-        variant: cardVariant,
-        className: cn(artistCardVariants({ size, variant }), className),
-        ...props,
-        children: [
-          featured && popularBadgeText && /* @__PURE__ */ jsx("div", { className: artistCardBadgeVariants({ size }), children: /* @__PURE__ */ jsx("span", { className: artistCardBadgeSurfaceVariants({ size, variant: "featured" }), children: popularBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size, 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 })
-                    )
-                  }
-                ) : /* @__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 }) })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size, children: [
-            /* @__PURE__ */ jsx(
-              Heading,
-              {
-                level: 3,
-                className: cn(
-                  DOMAIN_TOKENS.text.lineClamp.two,
-                  TEXT_TOKENS.fontSize.lg,
-                  TEXT_TOKENS.fontWeight.bold,
-                  MOTION_TOKENS.transition.colors,
-                  DOMAIN_TOKENS.text.hover.primary,
-                  size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
-                ),
-                children: href ? /* @__PURE__ */ jsx(Link, { href, variant: "ghost", children: name }) : name
-              }
-            ),
-            description && /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "sm",
-                variant: "muted",
-                className: cn(
-                  DOMAIN_TOKENS.text.lineClamp.two,
-                  size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
-                ),
-                children: description
-              }
-            ),
-            genres && /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "xs",
-                variant: "muted",
-                className: cn(
-                  artistCardGenresVariants({ size }),
-                  size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
-                ),
-                children: genres
-              }
-            ),
-            (followers !== void 0 || plays !== void 0) && /* @__PURE__ */ jsxs("div", { className: artistCardMetadataVariants({ size }), children: [
-              followers !== void 0 && /* @__PURE__ */ jsxs("div", { className: artistCardMetadataItemVariants({ size }), children: [
-                /* @__PURE__ */ jsx(
-                  Icon2,
-                  {
-                    name: "info",
-                    size: "sm",
-                    color: "muted",
-                    className: artistCardMetadataIconVariants({ size }),
-                    "aria-hidden": "true"
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Text, { size: "xs", variant: "muted", children: [
-                  followers.toLocaleString(),
-                  " ",
-                  followersLabel
-                ] })
-              ] }),
-              plays !== void 0 && /* @__PURE__ */ jsxs("div", { className: artistCardMetadataItemVariants({ size }), children: [
-                /* @__PURE__ */ jsx(
-                  Icon2,
-                  {
-                    name: "info",
-                    size: "sm",
-                    color: "muted",
-                    className: artistCardMetadataIconVariants({ size }),
-                    "aria-hidden": "true"
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Text, { size: "xs", variant: "muted", children: [
-                  plays.toLocaleString(),
-                  " ",
-                  playsLabel
-                ] })
-              ] })
-            ] })
-          ] }),
-          (followers !== void 0 || plays !== void 0) && /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size, children: /* @__PURE__ */ jsx("div", { className: artistCardFooterBorderVariants({ size }) }) })
-        ]
-      }
-    ) });
-  }
-);
-ArtistCard.displayName = "ArtistCard";
-var categoryCardBadgeVariants = cva(
-  // Base classes - absolute positioning, z-index
-  "absolute z-10",
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.badges.position.default,
-        // Default positioning - references semanticSpacing.md (16px)
-        compact: DOMAIN_TOKENS.badges.position.compact
-        // Compact positioning - references semanticSpacing.sm (8px)
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var categoryCardBadgeSurfaceVariants = cva(
-  // Base classes - flex layout, items center, badge styling
-  // 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: {
-        default: DOMAIN_TOKENS.badges.surface.default,
-        featured: DOMAIN_TOKENS.badges.surface.featured
-      }
-    },
-    defaultVariants: {
-      variant: "featured"
-    }
-  }
-);
-var CategoryCard = React48.forwardRef(
-  ({
-    title,
-    description,
-    imageUrl,
-    href,
-    featured = false,
-    showImage = true,
-    featuredBadgeText,
-    size = "default",
-    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,
-        variant: cardVariant,
-        className: cn("group relative", className),
-        ...props,
-        children: [
-          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: categoryCardBadgeVariants({ size }), children: /* @__PURE__ */ jsx("span", { className: categoryCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size, 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, children: [
-            /* @__PURE__ */ jsx(
-              Heading,
-              {
-                level: 3,
-                className: cn(
-                  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
-                ),
-                children: href ? /* @__PURE__ */ jsx(Link, { href, variant: "ghost", children: title }) : title
-              }
-            ),
-            description && /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "sm",
-                variant: "muted",
-                className: cn(
-                  DOMAIN_TOKENS.text.lineClamp.two,
-                  size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
-                ),
-                children: description
-              }
-            )
-          ] })
-        ]
-      }
-    ) });
-  }
-);
-CategoryCard.displayName = "CategoryCard";
-var promoCardBadgeVariants = 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)
-        compact: DOMAIN_TOKENS.badges.position.compact
-        // Compact positioning - maps to semanticSpacing.sm (8px)
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var promoCardBadgeSurfaceVariants = 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`,
-  {
-    variants: {
-      variant: {
-        default: DOMAIN_TOKENS.badges.surface.default,
-        featured: DOMAIN_TOKENS.badges.surface.featured
-      }
-    },
-    defaultVariants: {
-      variant: "featured"
-    }
-  }
-);
-var promoCardCtaButtonVariants = cva(
-  // 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: `${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: `${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
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var promoCardCtaButtonIconVariants = cva(
-  // Base classes - icon size and spacing
-  `${ICON_TOKENS.sizes.md} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var PromoCard = React48.forwardRef(
-  ({
-    title,
-    description,
-    imageUrl,
-    href,
-    ctaUrl,
-    ctaLabel,
-    featured = false,
-    showImage = true,
-    featuredBadgeText,
-    size = "default",
-    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,
-        variant: cardVariant,
-        className: cn("group relative", className),
-        ...props,
-        children: [
-          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: promoCardBadgeVariants({ size }), children: /* @__PURE__ */ jsx("span", { className: promoCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size, 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
-                )
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size, children: [
-            /* @__PURE__ */ jsx(
-              Heading,
-              {
-                level: 3,
-                className: cn(
-                  "line-clamp-2 transition-colors group-hover:text-primary",
-                  TEXT_TOKENS.fontSize.lg,
-                  TEXT_TOKENS.fontWeight.bold,
-                  DOMAIN_TOKENS.spacing.section.titleToSubtitle
-                ),
-                children: href ? /* @__PURE__ */ jsx(Link, { href, variant: "ghost", children: title }) : title
-              }
-            ),
-            description && /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "sm",
-                variant: "muted",
-                className: cn(
-                  "line-clamp-2",
-                  size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
-                ),
-                children: description
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size, children: /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-            ctaUrl && /* @__PURE__ */ jsxs(Link, { href: ctaUrl, className: cn("w-full", promoCardCtaButtonVariants({ size })), children: [
-              ctaLabel,
-              /* @__PURE__ */ jsx(IconArrowRight, { className: promoCardCtaButtonIconVariants({ size }) })
-            ] }),
-            !ctaUrl && /* @__PURE__ */ jsxs("div", { className: cn("w-full", promoCardCtaButtonVariants({ size })), children: [
-              ctaLabel,
-              /* @__PURE__ */ jsx(IconArrowRight, { className: promoCardCtaButtonIconVariants({ size }) })
-            ] })
-          ] }) })
-        ]
-      }
-    ) });
-  }
-);
-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",
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.badges.position.default,
-        // Default positioning - maps to semanticSpacing.md (16px)
-        compact: DOMAIN_TOKENS.badges.position.compact
-        // Compact positioning - maps to semanticSpacing.sm (8px)
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-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} ${TEXT_TOKENS.fontWeight.semibold}`,
-  {
-    variants: {
-      variant: {
-        default: DOMAIN_TOKENS.badges.surface.default,
-        featured: DOMAIN_TOKENS.badges.surface.featured,
-        vip: DOMAIN_TOKENS.badges.surface.featured,
-        // VIP uses featured gradient
-        discount: DOMAIN_TOKENS.badges.surface.default
-        // Discount badge - using default badge surface
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-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}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var ticketCardPriceVariants = cva(
-  // Base classes - price text color
-  `${DOMAIN_TOKENS.priceCapacity.text.primary} ${TEXT_TOKENS.fontWeight.bold}`,
-  {
-    variants: {
-      size: {
-        default: TEXT_TOKENS.fontSize.lg,
-        // Default size
-        compact: TEXT_TOKENS.fontSize.md
-        // Compact size
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var ticketCardCapacityVariants = cva(
-  // Base classes - capacity text color
-  `${DOMAIN_TOKENS.priceCapacity.text.secondary}`,
-  {
-    variants: {
-      size: {
-        default: TEXT_TOKENS.fontSize.sm,
-        // Default size
-        compact: TEXT_TOKENS.fontSize.xs
-        // Compact size
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var ticketCardAvailabilityVariants = cva(
-  // Base classes - availability indicator styling
-  `inline-flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.medium}`,
-  {
-    variants: {
-      availability: {
-        available: `${DOMAIN_TOKENS.metadata.text.primary}`,
-        sold_out: `${DOMAIN_TOKENS.metadata.text.secondary} opacity-60`,
-        available_soon: `${DOMAIN_TOKENS.metadata.text.secondary}`
-      }
-    },
-    defaultVariants: {
-      availability: "available"
-    }
-  }
-);
-var ticketCardFooterVariants = 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 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} ${TEXT_TOKENS.fontWeight.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
-      },
-      disabled: {
-        true: "opacity-50 cursor-not-allowed",
-        false: "hover:scale-105 hover:from-accent-600 hover:to-primary-700"
-      }
-    },
-    defaultVariants: {
-      size: "default",
-      disabled: false
-    }
-  }
-);
-var ticketCardPurchaseButtonIconVariants = cva(
-  // Base classes - icon size and spacing
-  `${ICON_TOKENS.sizes.md} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-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 = React48.forwardRef(
-  ({
-    title,
-    date,
-    description,
-    price,
-    capacity,
-    availability = "available",
-    imageUrl,
-    href,
-    purchaseUrl,
-    purchaseLabel,
-    vipBadgeText,
-    discountBadgeText,
-    featured = false,
-    featuredBadgeText,
-    showImage = true,
-    size = "default",
-    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");
-    const isPurchaseDisabled = availability === "sold_out" || availability === "available_soon";
-    const getVipBadgePosition = () => {
-      if (!featured || !featuredBadgeText) return "";
-      return size === "compact" ? `${DOMAIN_TOKENS.badges.position.compact} ${DOMAIN_TOKENS.badges.positionY.xl}` : `${DOMAIN_TOKENS.badges.position.default} ${DOMAIN_TOKENS.badges.positionY["2xl"]}`;
-    };
-    const getDiscountBadgePosition = () => {
-      if (!(featured && featuredBadgeText) && !vipBadgeText) return "";
-      return size === "compact" ? `${DOMAIN_TOKENS.badges.position.compact} ${DOMAIN_TOKENS.badges.positionY["2xl"]}` : `${DOMAIN_TOKENS.badges.position.default} ${DOMAIN_TOKENS.badges.positionY["3xl"]}`;
-    };
-    const getAvailabilityLabel = () => {
-      switch (availability) {
-        case "sold_out":
-          return "Sold Out";
-        case "available_soon":
-          return "Available Soon";
-        case "available":
-        default:
-          return null;
-      }
-    };
-    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,
-        variant: cardVariant,
-        className: cn(ticketCardVariants({ size, variant: cardVariant }), className),
-        ...props,
-        children: [
-          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: ticketCardBadgeVariants({ size }), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
-          vipBadgeText && /* @__PURE__ */ jsx("div", { className: cn(ticketCardBadgeVariants({ size }), getVipBadgePosition()), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "vip" }), children: vipBadgeText }) }),
-          discountBadgeText && /* @__PURE__ */ jsx("div", { className: cn(ticketCardBadgeVariants({ size }), getDiscountBadgePosition()), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "discount" }), children: discountBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size, 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 }))
-                  }
-                ) : /* @__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 }) })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size, children: [
-            /* @__PURE__ */ jsx(Heading, { level: 3, className: ticketCardTitleVariants({ size }), children: href ? /* @__PURE__ */ jsx(Link, { href, variant: "ghost", children: title }) : title }),
-            formattedDate && dateTimeValue && /* @__PURE__ */ jsx("time", { dateTime: dateTimeValue, className: ticketCardDateVariants({ size }), children: formattedDate }),
-            description && /* @__PURE__ */ jsx(Text, { size: "sm", variant: "muted", className: ticketCardDescriptionVariants({ size }), children: description }),
-            (price || capacity) && /* @__PURE__ */ jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size }), children: [
-              price && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: size === "compact" ? "md" : "lg",
-                  weight: "bold",
-                  className: ticketCardPriceVariants({ size }),
-                  children: price
-                }
-              ),
-              capacity && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: size === "compact" ? "xs" : "sm",
-                  variant: "muted",
-                  className: ticketCardCapacityVariants({ size }),
-                  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, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size })), children: [
-            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxs(
-              Link,
-              {
-                href: purchaseUrl,
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size, disabled: false })
-                ),
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size }) })
-                ]
-              }
-            ),
-            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size, disabled: isPurchaseDisabled })
-                ),
-                children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size }) })
-                ]
-              }
-            )
-          ] }) })
-        ]
-      }
-    ) });
-  }
-);
-TicketCard.displayName = "TicketCard";
-
-export { ALERT_TOKENS, Alert, ArtistCard, BUTTON_TOKENS, Backdrop, Box, Breadcrumbs, Button, CARD_TOKENS, CHECKBOX_TOKENS, Card, CardBody, CardFooter, CardHeader, CategoryCard, Checkbox, Column, Container, Surface as ContainerSurface, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATA_TOKENS, DOMAIN_TOKENS, DataListRoot as DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, 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, 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, Portal3 as Portal, Progress, 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, Toaster, UI_COLORS, accentColoredShadows, accentColors, alertVariants, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, buttonVariants, chartColors, checkboxVariants, colorCSSVariables, componentRadius, componentShadowMapping, surfaceVariants as containerSurfaceVariants, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, headingVariants, iconVariants, inputVariants, keyframes, labelVariants, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, 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, BADGE_VARIANTS, BUTTON_TOKENS, Backdrop, Badge, Box, Breadcrumbs, Button, CARD_TOKENS, CHECKBOX_TOKENS, Card, CardBody, CardFooter, CardHeader, Checkbox, Column, Container, Surface as ContainerSurface, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATA_TOKENS, DataListRoot as DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, 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, LINK_SIZES, LINK_VARIANTS, Label2 as Label, Link, 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, Portal3 as Portal, 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, Toast, ToastProvider, ToastViewport, Toaster, UI_COLORS, accentColoredShadows, accentColors, alertVariants, allCSSVariables, allCSSVariablesCSS, animations, badgeVariants, baseColors, borderRadius, buttonVariants, chartColors, checkboxVariants, colorCSSVariables, componentRadius, componentShadowMapping, surfaceVariants as containerSurfaceVariants, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, headingVariants, iconVariants, inputVariants, keyframes, labelVariants, layoutSpacing, letterSpacing, lineHeight, linkVariants, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, 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 };