@tenerife.music/ui 1.2.1 → 2.0.0

package/dist/tokens/index.mjs

@@ -412,6 +412,12 @@ var ALERT_TOKENS = {
    */
   radius: "rounded-lg",
   // 8px (0.5rem) - maps to borderRadius.lg
+  /**
+   * Border token
+   * Base border style
+   */
+  border: "border",
+  // Base border
   /**
    * Icon size within alerts
    */
@@ -419,45 +425,48 @@ var ALERT_TOKENS = {
   // 16px (1rem) - standard icon size
   /**
    * Variant-based token structure
-   * Organized by variant for future extensibility
+   * Organized by variant for token-driven styling
    */
   variant: {
     default: {
-      padding: "p-md",
-      radius: "rounded-lg"
+      background: "bg-muted",
+      // Muted background using CSS var
+      border: "border-border",
+      // Border using CSS var
+      text: "text-foreground"
+      // Foreground text using CSS var
     },
     primary: {
-      padding: "p-md",
-      radius: "rounded-lg"
+      background: "bg-primary/10",
+      // Primary background with opacity
+      border: "border-primary/20",
+      // Primary border with opacity
+      text: "text-primary-foreground"
+      // Primary text using CSS var
     },
     secondary: {
-      padding: "p-md",
-      radius: "rounded-lg"
+      background: "bg-secondary/10",
+      // Secondary background with opacity
+      border: "border-secondary/20",
+      // Secondary border with opacity
+      text: "text-secondary-foreground"
+      // Secondary text using CSS var
     },
     accent: {
-      padding: "p-md",
-      radius: "rounded-lg"
+      background: "bg-accent/10",
+      // Accent background with opacity
+      border: "border-accent/20",
+      // Accent border with opacity
+      text: "text-accent-foreground"
+      // Accent text using CSS var
     },
     destructive: {
-      padding: "p-md",
-      radius: "rounded-lg"
-    },
-    // Legacy semantic variants (mapped to canonical)
-    success: {
-      padding: "p-md",
-      radius: "rounded-lg"
-    },
-    warning: {
-      padding: "p-md",
-      radius: "rounded-lg"
-    },
-    danger: {
-      padding: "p-md",
-      radius: "rounded-lg"
-    },
-    info: {
-      padding: "p-md",
-      radius: "rounded-lg"
+      background: "bg-destructive/10",
+      // Destructive background with opacity
+      border: "border-destructive/20",
+      // Destructive border with opacity
+      text: "text-destructive-foreground"
+      // Destructive text using CSS var
     }
   }
 };
@@ -606,10 +615,8 @@ var BUTTON_TOKENS = {
     // 32px (2rem)
     md: "h-9",
     // 36px (2.25rem)
-    lg: "h-10",
+    lg: "h-10"
     // 40px (2.5rem)
-    icon: "h-9"
-    // 36px (2.25rem) - same as md
   },
   /**
    * Button padding by size
@@ -665,18 +672,28 @@ var BUTTON_TOKENS = {
     // 14px (0.875rem) - smaller icon for small buttons
     md: "[&_svg]:w-4 [&_svg]:h-4",
     // 16px (1rem) - medium icon for medium buttons
-    lg: "[&_svg]:w-5 [&_svg]:h-5",
+    lg: "[&_svg]:w-5 [&_svg]:h-5"
     // 20px (1.25rem) - larger icon for large buttons
-    icon: "[&_svg]:w-4 [&_svg]:h-4"
-    // 16px (1rem) - medium icon for icon-only buttons
   },
   /**
    * Width tokens
+   * Used for icon-only buttons (square buttons with equal width and height)
    */
   width: {
-    icon: "w-9"
-    // 36px width for icon buttons
+    sm: "w-8",
+    // 32px (2rem) - matches height.sm for square icon-only buttons
+    md: "w-9",
+    // 36px (2.25rem) - matches height.md for square icon-only buttons
+    lg: "w-10"
+    // 40px (2.5rem) - matches height.lg for square icon-only buttons
   },
+  /**
+   * Padding token for icon-only buttons
+   * Zero padding required for square dimensions (icon-only buttons have no text, so no padding needed)
+   * Uses p-0 which is a standard Tailwind class for zero spacing (spacing[0])
+   */
+  paddingIconOnly: "p-0",
+  // Zero padding for icon-only buttons (required for square dimensions) - standard Tailwind class
   /**
    * Font sizes by button size
    * References foundation typography fontSize tokens from Typography Authority
@@ -1081,6 +1098,42 @@ var ARTIST_TOKENS = {
   }
 };
 
+// src/FOUNDATION/tokens/gradients.ts
+var GRADIENT_TOKENS = {
+  /**
+   * Brand gradient tokens
+   * Used for brand identity elements, hero sections, and featured content
+   */
+  brand: {
+    /**
+     * Featured brand gradient: accent-500 → primary-600
+     * Used for featured badges and premium content indicators
+     */
+    featured: "bg-gradient-to-r from-accent-500 to-primary-600"
+  },
+  /**
+   * Surface gradient tokens
+   * Used for surface elevation effects and placeholders
+   */
+  surface: {
+    /**
+     * Muted surface gradient: muted → muted/50
+     * Used for placeholder backgrounds and subtle surface effects
+     */
+    muted: "bg-gradient-to-br from-muted to-muted/50"
+  },
+  /**
+   * Overlay gradient tokens
+   * Used for image overlays and hover effects
+   */
+  overlay: {
+    /**
+     * Dark overlay gradient: black/60 → transparent
+     * Used for image hover states and text readability overlays
+     */
+    dark: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
+  }};
+
 // src/FOUNDATION/tokens/spacing.ts
 var spacing = {
   // Zero spacing
@@ -1638,17 +1691,19 @@ var DOMAIN_TOKENS = {
     /**
      * Overlay gradient tokens for image overlays
      * Used for hover states and text readability
+     * References GRADIENT_TOKENS.overlay.dark
      */
     overlay: {
-      gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
+      gradient: GRADIENT_TOKENS.overlay.dark
       // Gradient overlay for image hover states
     },
     /**
      * Placeholder gradient tokens for image placeholders
      * Used when no image URL is provided
+     * References GRADIENT_TOKENS.surface.muted
      */
     placeholder: {
-      gradient: "bg-gradient-to-br from-muted to-muted/50"
+      gradient: GRADIENT_TOKENS.surface.muted
       // Placeholder gradient background
     }
   },
@@ -1759,11 +1814,12 @@ var DOMAIN_TOKENS = {
     /**
      * Badge surface (background) tokens
      * Maps to semantic color tokens
+     * References GRADIENT_TOKENS.brand.featured for featured badges
      */
     surface: {
       default: "bg-primary",
       // Default badge background - maps to semantic primary color
-      featured: "bg-gradient-to-r from-accent-500 to-primary-600"
+      featured: GRADIENT_TOKENS.brand.featured
       // Featured badge gradient
     },
     /**
@@ -1993,19 +2049,15 @@ var DOMAIN_TOKENS = {
 var INPUT_TOKENS = {
   /**
    * Input heights by size
-   * Supports xs, sm, md, lg, xl sizes
+   * Supports sm, md, lg sizes (canonical interactive size scale)
    */
   height: {
-    xs: "h-7",
-    // 28px (1.75rem)
     sm: "h-8",
     // 32px (2rem)
     md: "h-9",
     // 36px (2.25rem) - default
-    lg: "h-10",
+    lg: "h-10"
     // 40px (2.5rem)
-    xl: "h-11"
-    // 44px (2.75rem)
   },
   /**
    * Input padding by size
@@ -2013,60 +2065,44 @@ var INPUT_TOKENS = {
    */
   padding: {
     horizontal: {
-      xs: "px-xs",
-      // 4px (0.25rem)
       sm: "px-sm",
       // 8px (0.5rem)
       md: "px-sm",
       // 8px (0.5rem) - default
-      lg: "px-md",
+      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",
+      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",
+    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",
+    lg: "text-base"
     // Maps to fontSize.base[0]
-    xl: "text-lg"
-    // Maps to fontSize.lg[0]
   },
   /**
    * Responsive font size (md breakpoint)
@@ -2248,16 +2284,6 @@ var INPUT_TOKENS = {
    * Organized by size for easy access
    */
   size: {
-    xs: {
-      height: "h-7",
-      padding: {
-        horizontal: "px-xs",
-        vertical: "py-xs"
-      },
-      radius: "rounded-sm",
-      fontSize: "text-xs",
-      shadow: "shadow-sm"
-    },
     sm: {
       height: "h-8",
       padding: {
@@ -2288,16 +2314,6 @@ var INPUT_TOKENS = {
       radius: "rounded-md",
       fontSize: "text-base",
       shadow: "shadow-sm"
-    },
-    xl: {
-      height: "h-11",
-      padding: {
-        horizontal: "px-lg",
-        vertical: "py-md"
-      },
-      radius: "rounded-lg",
-      fontSize: "text-lg",
-      shadow: "shadow-sm"
     }
   }
 };
@@ -2306,20 +2322,13 @@ var INPUT_TOKENS = {
 var CHECKBOX_TOKENS = {
   /**
    * Checkbox sizes by size variant
-   * Supports xs, sm, md, lg, xl sizes
+   * Supports sm, md, lg sizes (canonical interactive scale)
    * Checkboxes are typically square and smaller than input fields
+   *
+   * NOTE: Size scale restricted to sm|md|lg per canonical interactive size scale (FOUNDATION_LOCK.md).
+   * xs and xl sizes removed to comply with Button-defined canonical scale.
    */
   size: {
-    xs: {
-      width: "w-3.5",
-      // 14px (0.875rem)
-      height: "h-3.5",
-      // 14px (0.875rem)
-      radius: "rounded-sm",
-      // 4px (0.25rem)
-      iconSize: "size-2.5"
-      // 10px (0.625rem)
-    },
     sm: {
       width: "w-4",
       // 16px (1rem)
@@ -2349,16 +2358,6 @@ var CHECKBOX_TOKENS = {
       // 6px (0.375rem)
       iconSize: "size-4"
       // 16px (1rem)
-    },
-    xl: {
-      width: "w-6",
-      // 24px (1.5rem)
-      height: "h-6",
-      // 24px (1.5rem)
-      radius: "rounded-md",
-      // 6px (0.375rem)
-      iconSize: "size-5"
-      // 20px (1.25rem)
     }
   },
   /**
@@ -2464,19 +2463,16 @@ var CHECKBOX_TOKENS = {
   /**
    * Icon tokens
    * Size and styling for checkmark icon within checkbox
+   * NOTE: Icon sizes restricted to sm|md|lg per canonical interactive size scale
    */
   icon: {
     size: {
-      xs: "size-2.5",
-      // 10px (0.625rem)
       sm: "size-3",
       // 12px (0.75rem)
       md: "size-3.5",
       // 14px (0.875rem) - default
-      lg: "size-4",
+      lg: "size-4"
       // 16px (1rem)
-      xl: "size-5"
-      // 20px (1.25rem)
     },
     stroke: "stroke-2",
     // 2px stroke width for checkmark
@@ -2508,9 +2504,10 @@ var CHECKBOX_TOKENS = {
   /**
    * Transition tokens
    * Smooth transitions for state changes
+   * Uses MOTION_TOKENS for canonical motion values
    */
-  transition: "transition-all duration-200 ease-in-out"
-  // Smooth transitions
+  transition: MOTION_TOKENS.transitionPreset.normal
+  // Smooth transitions - Motion Authority compliant
 };
 
 // src/FOUNDATION/tokens/components/switch.ts
@@ -2756,15 +2753,15 @@ var SWITCH_TOKENS = {
   /**
    * Transition tokens
    * Smooth transitions for handle animation and state changes
-   * Uses motion tokens for duration and easing
+   * Uses MOTION_TOKENS for canonical motion values
    */
   transition: {
-    handle: "transition-transform duration-300 ease-in-out",
-    // Handle slide animation
-    track: "transition-colors duration-300 ease-in-out",
-    // Track color transition
-    combined: "transition-all duration-300 ease-in-out"
-    // Combined transitions
+    handle: `${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.normal} ${MOTION_TOKENS.easing["in-out"]}`,
+    // Handle slide animation - Motion Authority compliant
+    track: `${MOTION_TOKENS.transition.colors} ${MOTION_TOKENS.duration.normal} ${MOTION_TOKENS.easing["in-out"]}`,
+    // Track color transition - Motion Authority compliant
+    combined: MOTION_TOKENS.transitionPreset.normal
+    // Combined transitions - Motion Authority compliant
   },
   /**
    * Shadow token
@@ -2968,9 +2965,10 @@ var RADIO_TOKENS = {
   /**
    * Transition tokens
    * Smooth transitions for state changes
+   * Uses MOTION_TOKENS for canonical motion values
    */
-  transition: "transition-all duration-200 ease-in-out"
-  // Smooth transitions
+  transition: MOTION_TOKENS.transitionPreset.normal
+  // Smooth transitions - Motion Authority compliant
 };
 
 // src/FOUNDATION/tokens/components/surface.ts
@@ -3005,51 +3003,53 @@ var SURFACE_TOKENS = {
   /**
    * Shadow tokens by surface variant
    * Maps to foundation elevation shadow tokens
+   * Uses canonical SurfaceVariant names
    */
   shadow: {
-    flat: "shadow-none",
+    default: "shadow-none",
     // No shadow - maps to elevationShadows.none
-    raised: "shadow-sm",
+    elevated: "shadow-sm",
     // Small shadow - maps to elevationShadows.sm
-    sunken: "shadow-none",
-    // No shadow - maps to elevationShadows.none
-    outline: "shadow-none",
+    outlined: "shadow-none",
     // No shadow - border-focused variant
+    filled: "shadow-none",
+    // No shadow - maps to elevationShadows.none
     subtle: "shadow-none"
     // No shadow - minimal background difference
   },
   /**
    * Variant-based token structure
    * Organized by variant for easy access
+   * Uses canonical SurfaceVariant names: default, elevated, outlined, filled, subtle
    */
   variant: {
-    flat: {
+    default: {
       padding: "p-md",
       radius: "rounded-md",
       shadow: "shadow-none",
       bg: "bg-background",
       border: "border border-border"
     },
-    raised: {
+    elevated: {
       padding: "p-md",
       radius: "rounded-md",
       shadow: "shadow-sm",
       bg: "bg-card",
       border: "border border-border"
     },
-    sunken: {
+    outlined: {
       padding: "p-md",
       radius: "rounded-md",
       shadow: "shadow-none",
-      bg: "bg-muted",
-      border: "border border-border"
+      bg: "bg-transparent",
+      border: "border-2 border-border"
     },
-    outline: {
+    filled: {
       padding: "p-md",
       radius: "rounded-md",
       shadow: "shadow-none",
-      bg: "bg-transparent",
-      border: "border-2 border-border"
+      bg: "bg-muted",
+      border: "border border-border"
     },
     subtle: {
       padding: "p-md",
@@ -4402,10 +4402,10 @@ var SELECT_TOKENS = {
     // Text color using CSS var
     border: "border border-[hsl(var(--border))]",
     // Border color using CSS var
-    maxHeight: "max-h-[384px]",
-    // Maximum height for scrollable content (24rem = 384px)
-    minWidth: "min-w-[128px]"
-    // Minimum width (8rem = 128px)
+    maxHeight: "max-h-96",
+    // Maximum height for scrollable content (24rem = 384px) - maps to spacing[96]
+    minWidth: "min-w-32"
+    // Minimum width (8rem = 128px) - maps to spacing[32]
   },
   /**
    * Select item tokens
@@ -4793,8 +4793,246 @@ var SELECT_TOKENS = {
   }
 };
 
+// src/FOUNDATION/tokens/components/simple-table.ts
+var SIMPLETABLE_TOKENS = {
+  /**
+   * Cell padding by size
+   * Maps to semanticSpacing tokens
+   */
+  padding: {
+    cell: {
+      sm: "p-xs",
+      // 4px - maps to semanticSpacing.xs
+      md: "p-sm",
+      // 8px - maps to semanticSpacing.sm
+      lg: "p-md"
+      // 16px - maps to semanticSpacing.md
+    },
+    header: {
+      sm: "px-xs py-xs",
+      // 4px horizontal, 4px vertical
+      md: "px-sm py-sm",
+      // 8px horizontal, 8px vertical
+      lg: "px-md py-md"
+      // 16px horizontal, 16px vertical
+    }
+  },
+  /**
+   * Typography tokens for table headers and cells by size
+   * Maps to fontSize and fontWeight tokens
+   */
+  typography: {
+    header: {
+      sm: "text-xs font-medium text-muted-foreground",
+      // Maps to fontSize.xs, fontWeight.medium
+      md: "text-sm font-medium text-muted-foreground",
+      // Maps to fontSize.sm, fontWeight.medium
+      lg: "text-base font-medium text-muted-foreground"
+      // Maps to fontSize.base, fontWeight.medium
+    },
+    cell: {
+      sm: "text-xs",
+      // Maps to fontSize.xs
+      md: "text-sm",
+      // Maps to fontSize.sm
+      lg: "text-base"
+      // Maps to fontSize.base
+    }
+  },
+  /**
+   * Layout tokens for table container and base styles
+   */
+  layout: {
+    overflow: "overflow-x-auto",
+    // Table container overflow
+    table: "w-full border-collapse"
+    // Table base styles
+  },
+  /**
+   * Border tokens for table
+   */
+  border: {
+    bottom: "border-b",
+    // Border bottom for rows and headers
+    color: "border-border"
+    // Border color
+  },
+  /**
+   * State tokens for table rows
+   */
+  state: {
+    rowHover: "hover:bg-muted/50"
+    // Row hover background
+  },
+  /**
+   * Text alignment tokens
+   */
+  alignment: {
+    left: "text-left"
+    // Left alignment
+  }
+};
+
+// src/FOUNDATION/tokens/components/data-list.ts
+var DATA_LIST_TOKENS = {
+  /**
+   * Spacing tokens for DataList
+   * Maps to semantic spacing tokens
+   */
+  spacing: {
+    gap: "gap-md",
+    // 16px (1rem) - gap between items - maps to semanticSpacing.md
+    padding: "p-md"
+    // 16px (1rem) - container padding - maps to semanticSpacing.md
+  },
+  /**
+   * Label width tokens (for desktop horizontal layout)
+   * Maps to Tailwind width utilities
+   */
+  labelWidth: {
+    sm: "w-24",
+    // 96px (6rem) - small label width
+    md: "w-32",
+    // 128px (8rem) - default label width
+    lg: "w-40"
+    // 160px (10rem) - large label width
+  },
+  /**
+   * Row padding tokens
+   * Maps to semantic spacing tokens
+   */
+  rowPadding: {
+    sm: "py-xs",
+    // 4px (0.25rem) - maps to semanticSpacing.xs
+    md: "py-sm",
+    // 8px (0.5rem) - maps to semanticSpacing.sm
+    lg: "py-md"
+    // 16px (1rem) - maps to semanticSpacing.md
+  },
+  /**
+   * Item tokens
+   * For individual DataList item styling
+   */
+  item: {
+    /**
+     * Border tokens for items
+     */
+    border: "border-b border-border last:border-0",
+    // Item borders
+    /**
+     * Responsive layout tokens
+     */
+    layout: {
+      mobile: "flex flex-col",
+      // Mobile layout - vertical
+      desktop: "md:flex-row md:items-center"
+      // Desktop layout - horizontal
+    }
+  },
+  /**
+   * Label tokens
+   * For DataList label styling
+   */
+  label: {
+    mobile: "mb-1 font-semibold text-foreground",
+    // Mobile label styles
+    desktop: "md:mb-0"
+    // Desktop label margin override
+  },
+  /**
+   * Value tokens
+   * For DataList value styling
+   */
+  value: {
+    color: "text-muted-foreground",
+    // Value text color
+    flex: "flex-1"
+    // Value flex grow
+  }
+};
+
+// src/FOUNDATION/tokens/components/list.ts
+var LIST_TOKENS = {
+  /**
+   * Spacing tokens for List container
+   * Maps to semantic spacing tokens
+   */
+  spacing: {
+    gap: "space-y-sm"
+    // 8px (0.5rem) - gap between list items - maps to semanticSpacing.sm
+  },
+  /**
+   * List item tokens
+   * For individual list item styling
+   */
+  item: {
+    /**
+     * Padding tokens for item container
+     * Maps to semantic spacing tokens
+     */
+    padding: "p-md",
+    // 16px (1rem) - item padding - maps to semanticSpacing.md
+    /**
+     * Border radius tokens for item container
+     * Maps to foundation radius tokens
+     */
+    radius: "rounded-lg",
+    // 8px (0.5rem) - item border radius - maps to borderRadius.lg
+    /**
+     * Border token
+     */
+    border: "border",
+    // Standard border
+    /**
+     * Transition token
+     */
+    transition: "transition-colors",
+    // Color transitions
+    /**
+     * Hover state tokens
+     */
+    hover: {
+      background: "hover:bg-muted/50"
+      // Hover background - maps to muted color with 50% opacity
+    }
+  },
+  /**
+   * Title tokens
+   * For list item title styling
+   */
+  title: {
+    fontWeight: "font-medium",
+    // Medium font weight
+    color: "text-foreground"
+    // Foreground text color
+  },
+  /**
+   * Description tokens
+   * For list item description styling
+   */
+  description: {
+    /**
+     * Margin top token
+     * Maps to semantic spacing tokens
+     */
+    marginTop: "mt-xs",
+    // 4px (0.25rem) - margin top - maps to semanticSpacing.xs
+    /**
+     * Font size token
+     * Maps to foundation typography tokens
+     */
+    fontSize: "text-sm",
+    // Small font size - maps to fontSize.sm
+    /**
+     * Text color token
+     */
+    color: "text-muted-foreground"
+    // Muted foreground text color
+  }
+};
+
 // src/FOUNDATION/tokens/motion/v2.ts
-var motionV2Durations = {
+var motionDurations = {
   fast: "150ms",
   // Quick interactions
   normal: "250ms",
@@ -4804,7 +5042,7 @@ var motionV2Durations = {
   reduced: "0ms"
   // For prefers-reduced-motion
 };
-var motionV2Easings = {
+var motionEasings = {
   soft: "cubic-bezier(0.22, 1, 0.36, 1)",
   // Gentle, smooth
   standard: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -4812,526 +5050,201 @@ var motionV2Easings = {
   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 motionTransitions = {
+  fast: `${motionDurations.fast} ${motionEasings.standard}`,
+  normal: `${motionDurations.normal} ${motionEasings.standard}`,
+  slow: `${motionDurations.slow} ${motionEasings.emphasized}`,
+  soft: `${motionDurations.normal} ${motionEasings.soft}`,
+  reduced: `${motionDurations.reduced} linear`
 };
-var motionV2Fade = {
+var motionFade = {
   in: {
-    from: { opacity: 0 },
-    to: { opacity: 1 }
+    from: { opacity: "0" },
+    to: { opacity: "1" }
   },
   out: {
-    from: { opacity: 1 },
-    to: { opacity: 0 }
+    from: { opacity: "1" },
+    to: { opacity: "0" }
   }
 };
-var motionV2Scale = {
+var motionScale = {
   in: {
-    from: { transform: "scale(0.95)", opacity: 0 },
-    to: { transform: "scale(1)", opacity: 1 }
+    from: { transform: "scale(0.95)", opacity: "0" },
+    to: { transform: "scale(1)", opacity: "1" }
   },
   out: {
-    from: { transform: "scale(1)", opacity: 1 },
-    to: { transform: "scale(0.95)", opacity: 0 }
+    from: { transform: "scale(1)", opacity: "1" },
+    to: { transform: "scale(0.95)", opacity: "0" }
   }
 };
-var motionV2Slide = {
+var motionSlide = {
   up: {
     in: {
-      from: { transform: "translateY(100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+      from: { transform: "translateY(100%)", opacity: "0" },
+      to: { transform: "translateY(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(100%)", opacity: 0 }
+      from: { transform: "translateY(0)", opacity: "1" },
+      to: { transform: "translateY(100%)", opacity: "0" }
     }
   },
   down: {
     in: {
-      from: { transform: "translateY(-100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+      from: { transform: "translateY(-100%)", opacity: "0" },
+      to: { transform: "translateY(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(-100%)", opacity: 0 }
+      from: { transform: "translateY(0)", opacity: "1" },
+      to: { transform: "translateY(-100%)", opacity: "0" }
     }
   },
   left: {
     in: {
-      from: { transform: "translateX(100%)", opacity: 0 },
-      to: { transform: "translateX(0)", opacity: 1 }
+      from: { transform: "translateX(100%)", opacity: "0" },
+      to: { transform: "translateX(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateX(0)", opacity: 1 },
-      to: { transform: "translateX(100%)", opacity: 0 }
+      from: { transform: "translateX(0)", opacity: "1" },
+      to: { transform: "translateX(100%)", opacity: "0" }
     }
   },
   right: {
     in: {
-      from: { transform: "translateX(-100%)", opacity: 0 },
-      to: { transform: "translateX(0)", opacity: 1 }
+      from: { transform: "translateX(-100%)", opacity: "0" },
+      to: { transform: "translateX(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateX(0)", opacity: 1 },
-      to: { transform: "translateX(-100%)", opacity: 0 }
+      from: { transform: "translateX(0)", opacity: "1" },
+      to: { transform: "translateX(-100%)", opacity: "0" }
     }
   }
 };
-var motionV2Combined = {
+var motionCombined = {
   fadeScale: {
     in: {
-      from: { transform: "scale(0.95)", opacity: 0 },
-      to: { transform: "scale(1)", opacity: 1 }
+      from: { transform: "scale(0.95)", opacity: "0" },
+      to: { transform: "scale(1)", opacity: "1" }
     },
     out: {
-      from: { transform: "scale(1)", opacity: 1 },
-      to: { transform: "scale(0.95)", opacity: 0 }
+      from: { transform: "scale(1)", opacity: "1" },
+      to: { transform: "scale(0.95)", opacity: "0" }
     }
   },
   fadeSlideUp: {
     in: {
-      from: { transform: "translateY(100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+      from: { transform: "translateY(100%)", opacity: "0" },
+      to: { transform: "translateY(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(100%)", opacity: 0 }
+      from: { transform: "translateY(0)", opacity: "1" },
+      to: { transform: "translateY(100%)", opacity: "0" }
     }
   },
   fadeSlideDown: {
     in: {
-      from: { transform: "translateY(-100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+      from: { transform: "translateY(-100%)", opacity: "0" },
+      to: { transform: "translateY(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(-100%)", opacity: 0 }
+      from: { transform: "translateY(0)", opacity: "1" },
+      to: { transform: "translateY(-100%)", opacity: "0" }
     }
   },
   fadeSlideLeft: {
     in: {
-      from: { transform: "translateX(100%)", opacity: 0 },
-      to: { transform: "translateX(0)", opacity: 1 }
+      from: { transform: "translateX(100%)", opacity: "0" },
+      to: { transform: "translateX(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateX(0)", opacity: 1 },
-      to: { transform: "translateX(100%)", opacity: 0 }
+      from: { transform: "translateX(0)", opacity: "1" },
+      to: { transform: "translateX(100%)", opacity: "0" }
     }
   },
   fadeSlideRight: {
     in: {
-      from: { transform: "translateX(-100%)", opacity: 0 },
-      to: { transform: "translateX(0)", opacity: 1 }
+      from: { transform: "translateX(-100%)", opacity: "0" },
+      to: { transform: "translateX(0)", opacity: "1" }
     },
     out: {
-      from: { transform: "translateX(0)", opacity: 1 },
-      to: { transform: "translateX(-100%)", opacity: 0 }
+      from: { transform: "translateX(0)", opacity: "1" },
+      to: { transform: "translateX(-100%)", opacity: "0" }
     }
   }
 };
-var motionV2CSSVariables = {
+var motionCSSVariables = {
   // Durations
-  "--motion-duration-fast": motionV2Durations.fast,
-  "--motion-duration-normal": motionV2Durations.normal,
-  "--motion-duration-slow": motionV2Durations.slow,
-  "--motion-duration-reduced": motionV2Durations.reduced,
+  "--motion-duration-fast": motionDurations.fast,
+  "--motion-duration-normal": motionDurations.normal,
+  "--motion-duration-slow": motionDurations.slow,
+  "--motion-duration-reduced": motionDurations.reduced,
   // Easings
-  "--motion-easing-soft": motionV2Easings.soft,
-  "--motion-easing-standard": motionV2Easings.standard,
-  "--motion-easing-emphasized": motionV2Easings.emphasized,
+  "--motion-easing-soft": motionEasings.soft,
+  "--motion-easing-standard": motionEasings.standard,
+  "--motion-easing-emphasized": motionEasings.emphasized,
   // Transitions
-  "--motion-transition-fast": motionV2Transitions.fast,
-  "--motion-transition-normal": motionV2Transitions.normal,
-  "--motion-transition-slow": motionV2Transitions.slow,
-  "--motion-transition-soft": motionV2Transitions.soft,
-  "--motion-transition-reduced": motionV2Transitions.reduced
+  "--motion-transition-fast": motionTransitions.fast,
+  "--motion-transition-normal": motionTransitions.normal,
+  "--motion-transition-slow": motionTransitions.slow,
+  "--motion-transition-soft": motionTransitions.soft,
+  "--motion-transition-reduced": motionTransitions.reduced
+};
+var motionTransitionProperty = {
+  DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+  colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
+  opacity: "opacity",
+  shadow: "box-shadow",
+  transform: "transform",
+  all: "all",
+  none: "none"
 };
-var motionV2TailwindConfig = {
+var motionTailwindConfig = {
   transitionDuration: {
-    ...motionV2Durations
+    ...motionDurations
   },
   transitionTimingFunction: {
-    ...motionV2Easings
+    ...motionEasings
+  },
+  transitionProperty: {
+    ...motionTransitionProperty
   },
   keyframes: {
     // Fade
-    "fade-in": motionV2Fade.in,
-    "fade-out": motionV2Fade.out,
+    "fade-in": motionFade.in,
+    "fade-out": motionFade.out,
     // Scale
-    "scale-in": motionV2Scale.in,
-    "scale-out": motionV2Scale.out,
+    "scale-in": motionScale.in,
+    "scale-out": motionScale.out,
     // Slide
-    "slide-up-in": motionV2Slide.up.in,
-    "slide-up-out": motionV2Slide.up.out,
-    "slide-down-in": motionV2Slide.down.in,
-    "slide-down-out": motionV2Slide.down.out,
-    "slide-left-in": motionV2Slide.left.in,
-    "slide-left-out": motionV2Slide.left.out,
-    "slide-right-in": motionV2Slide.right.in,
-    "slide-right-out": motionV2Slide.right.out,
+    "slide-up-in": motionSlide.up.in,
+    "slide-up-out": motionSlide.up.out,
+    "slide-down-in": motionSlide.down.in,
+    "slide-down-out": motionSlide.down.out,
+    "slide-left-in": motionSlide.left.in,
+    "slide-left-out": motionSlide.left.out,
+    "slide-right-in": motionSlide.right.in,
+    "slide-right-out": motionSlide.right.out,
     // Combined
-    "fade-scale-in": motionV2Combined.fadeScale.in,
-    "fade-scale-out": motionV2Combined.fadeScale.out,
-    "fade-slide-up-in": motionV2Combined.fadeSlideUp.in,
-    "fade-slide-up-out": motionV2Combined.fadeSlideUp.out,
-    "fade-slide-down-in": motionV2Combined.fadeSlideDown.in,
-    "fade-slide-down-out": motionV2Combined.fadeSlideDown.out,
-    "fade-slide-left-in": motionV2Combined.fadeSlideLeft.in,
-    "fade-slide-left-out": motionV2Combined.fadeSlideLeft.out,
-    "fade-slide-right-in": motionV2Combined.fadeSlideRight.in,
-    "fade-slide-right-out": motionV2Combined.fadeSlideRight.out
+    "fade-scale-in": motionCombined.fadeScale.in,
+    "fade-scale-out": motionCombined.fadeScale.out,
+    "fade-slide-up-in": motionCombined.fadeSlideUp.in,
+    "fade-slide-up-out": motionCombined.fadeSlideUp.out,
+    "fade-slide-down-in": motionCombined.fadeSlideDown.in,
+    "fade-slide-down-out": motionCombined.fadeSlideDown.out,
+    "fade-slide-left-in": motionCombined.fadeSlideLeft.in,
+    "fade-slide-left-out": motionCombined.fadeSlideLeft.out,
+    "fade-slide-right-in": motionCombined.fadeSlideRight.in,
+    "fade-slide-right-out": motionCombined.fadeSlideRight.out
   }
 };
-
-// src/FOUNDATION/tokens/motion.ts
-var durations = {
-  instant: "0ms",
-  fast: "150ms",
-  // 1.5 × base (quick interactions)
-  normal: "300ms",
-  // 3 × base (default)
-  slow: "500ms",
-  // 5 × base (emphasized)
-  slower: "700ms",
-  // 7 × base (very emphasized)
-  slowest: "1000ms",
-  // 10 × base (maximum emphasis)
-  // Additional granular durations
-  "75": "75ms",
-  // Ultra-fast
-  "100": "100ms",
-  // Base unit
-  "200": "200ms",
-  // Fast-normal
-  "250": "250ms",
-  // Between fast and normal
-  "400": "400ms",
-  // Between normal and slow
-  "600": "600ms",
-  // Between slow and slower
-  "800": "800ms"
-  // Between slower and slowest
-};
-var easings = {
-  // Linear (no easing)
-  linear: "linear",
-  // Ease-in (accelerate) - cubic-bezier
-  "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-  // Ease-out (decelerate) - recommended for most UI - cubic-bezier
-  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
-  // Ease-in-out (accelerate and decelerate)
-  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
-  // Standard easing functions
-  ease: "ease",
-  // Advanced easing functions
-  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  // Material Design easing
-  "ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
-  "ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
-  "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)"
-};
-var transitions = {
-  // Fast transitions (quick interactions)
-  fast: `${durations.fast} ${easings["ease-out"]}`,
-  "fast-in": `${durations.fast} ${easings["ease-in"]}`,
-  "fast-out": `${durations.fast} ${easings["ease-out"]}`,
-  "fast-in-out": `${durations.fast} ${easings["ease-in-out"]}`,
-  // Normal transitions (default)
-  normal: `${durations.normal} ${easings["ease-in-out"]}`,
-  "normal-in": `${durations.normal} ${easings["ease-in"]}`,
-  "normal-out": `${durations.normal} ${easings["ease-out"]}`,
-  "normal-in-out": `${durations.normal} ${easings["ease-in-out"]}`,
-  // Slow transitions (emphasized)
-  slow: `${durations.slow} ${easings["ease-in-out"]}`,
-  "slow-in": `${durations.slow} ${easings["ease-in"]}`,
-  "slow-out": `${durations.slow} ${easings["ease-out"]}`,
-  "slow-in-out": `${durations.slow} ${easings["ease-in-out"]}`,
-  // Special transitions
-  bounce: `${durations.normal} ${easings.bounce}`,
-  elastic: `${durations.slow} ${easings.elastic}`,
-  // Default (normal)
-  DEFAULT: `${durations.normal} ${easings["ease-in-out"]}`
-};
-var keyframes = {
-  // Fade animations
-  fadeIn: {
-    from: { opacity: "0" },
-    to: { opacity: "1" }
-  },
-  fadeOut: {
-    from: { opacity: "1" },
-    to: { opacity: "0" }
-  },
-  // Slide animations
-  slideInUp: {
-    from: { transform: "translateY(100%)", opacity: "0" },
-    to: { transform: "translateY(0)", opacity: "1" }
-  },
-  slideInDown: {
-    from: { transform: "translateY(-100%)", opacity: "0" },
-    to: { transform: "translateY(0)", opacity: "1" }
-  },
-  slideInLeft: {
-    from: { transform: "translateX(-100%)", opacity: "0" },
-    to: { transform: "translateX(0)", opacity: "1" }
-  },
-  slideInRight: {
-    from: { transform: "translateX(100%)", opacity: "0" },
-    to: { transform: "translateX(0)", opacity: "1" }
-  },
-  slideOutUp: {
-    from: { transform: "translateY(0)", opacity: "1" },
-    to: { transform: "translateY(-100%)", opacity: "0" }
-  },
-  slideOutDown: {
-    from: { transform: "translateY(0)", opacity: "1" },
-    to: { transform: "translateY(100%)", opacity: "0" }
-  },
-  slideOutLeft: {
-    from: { transform: "translateX(0)", opacity: "1" },
-    to: { transform: "translateX(-100%)", opacity: "0" }
-  },
-  slideOutRight: {
-    from: { transform: "translateX(0)", opacity: "1" },
-    to: { transform: "translateX(100%)", opacity: "0" }
-  },
-  // Scale animations
-  scaleIn: {
-    from: { transform: "scale(0.95)", opacity: "0" },
-    to: { transform: "scale(1)", opacity: "1" }
-  },
-  scaleOut: {
-    from: { transform: "scale(1)", opacity: "1" },
-    to: { transform: "scale(0.95)", opacity: "0" }
-  },
-  scaleUp: {
-    from: { transform: "scale(1)" },
-    to: { transform: "scale(1.05)" }
-  },
-  scaleDown: {
-    from: { transform: "scale(1.05)" },
-    to: { transform: "scale(1)" }
-  },
-  // Rotation animations
-  spin: {
-    from: { transform: "rotate(0deg)" },
-    to: { transform: "rotate(360deg)" }
-  },
-  spinReverse: {
-    from: { transform: "rotate(360deg)" },
-    to: { transform: "rotate(0deg)" }
-  },
-  // Pulse and bounce
-  pulse: {
-    "0%, 100%": { opacity: "1" },
-    "50%": { opacity: "0.5" }
-  },
-  bounce: {
-    "0%, 100%": {
-      transform: "translateY(-25%)",
-      animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)"
-    },
-    "50%": {
-      transform: "translateY(0)",
-      animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
-    }
-  },
-  // Shake animation
-  shake: {
-    "0%, 100%": { transform: "translateX(0)" },
-    "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-4px)" },
-    "20%, 40%, 60%, 80%": { transform: "translateX(4px)" }
-  },
-  // Ping animation
-  ping: {
-    "75%, 100%": {
-      transform: "scale(2)",
-      opacity: "0"
-    }
-  },
-  // Accordion animations (for Radix UI)
-  "accordion-down": {
-    from: { height: "0" },
-    to: { height: "var(--radix-accordion-content-height)" }
-  },
-  "accordion-up": {
-    from: { height: "var(--radix-accordion-content-height)" },
-    to: { height: "0" }
-  }
-};
-var animations = {
-  // Fade animations
-  fadeIn: `fadeIn ${durations.normal} ${easings["ease-out"]}`,
-  fadeOut: `fadeOut ${durations.fast} ${easings["ease-in"]}`,
-  // Slide animations
-  slideInUp: `slideInUp ${durations.normal} ${easings["ease-out"]}`,
-  slideInDown: `slideInDown ${durations.normal} ${easings["ease-out"]}`,
-  slideInLeft: `slideInLeft ${durations.normal} ${easings["ease-out"]}`,
-  slideInRight: `slideInRight ${durations.normal} ${easings["ease-out"]}`,
-  slideOutUp: `slideOutUp ${durations.fast} ${easings["ease-in"]}`,
-  slideOutDown: `slideOutDown ${durations.fast} ${easings["ease-in"]}`,
-  slideOutLeft: `slideOutLeft ${durations.fast} ${easings["ease-in"]}`,
-  slideOutRight: `slideOutRight ${durations.fast} ${easings["ease-in"]}`,
-  // Scale animations
-  scaleIn: `scaleIn ${durations.normal} ${easings["ease-out"]}`,
-  scaleOut: `scaleOut ${durations.fast} ${easings["ease-in"]}`,
-  // Continuous animations
-  spin: `spin 1s ${easings.linear} infinite`,
-  pulse: `pulse 2s ${easings["ease-in-out"]} infinite`,
-  bounce: `bounce 1s ${easings.linear} infinite`,
-  ping: `ping 1s ${easings["ease-out"]} cubic-bezier(0, 0, 0.2, 1) infinite`,
-  shake: `shake 0.5s ${easings["ease-in-out"]}`,
-  // Accordion animations
-  "accordion-down": `accordion-down ${durations.normal} ${easings["ease-out"]}`,
-  "accordion-up": `accordion-up ${durations.normal} ${easings["ease-out"]}`
-};
-var springs = {
-  // Gentle spring (subtle, smooth)
-  gentle: {
-    type: "spring",
-    stiffness: 120,
-    damping: 14,
-    mass: 1
-  },
-  // Default spring (balanced)
-  default: {
-    type: "spring",
-    stiffness: 300,
-    damping: 30,
-    mass: 1
-  },
-  // Wobbly spring (bouncy, playful)
-  wobbly: {
-    type: "spring",
-    stiffness: 180,
-    damping: 12,
-    mass: 1
-  },
-  // Stiff spring (quick, precise)
-  stiff: {
-    type: "spring",
-    stiffness: 400,
-    damping: 30,
-    mass: 1
-  },
-  // Slow spring (smooth, deliberate)
-  slow: {
-    type: "spring",
-    stiffness: 200,
-    damping: 25,
-    mass: 1
-  },
-  // Bouncy spring (energetic, fun)
-  bouncy: {
-    type: "spring",
-    stiffness: 400,
-    damping: 10,
-    mass: 1
-  },
-  // No bounce (damped, controlled)
-  noBounce: {
-    type: "spring",
-    stiffness: 300,
-    damping: 35,
-    mass: 1
-  }
-};
-var reducedMotion = {
-  // Reduced motion duration (instant or minimal)
+var motionReducedMotion = {
+  /** Reduced motion duration (instant, no animation) */
   duration: "0ms",
-  // Reduced motion easing (linear for instant)
+  /** Reduced motion easing (linear for instant) */
   easing: "linear",
-  // Reduced motion transition (instant)
+  /** Reduced motion transition (instant) */
   transition: "0ms linear",
-  // CSS media query for reduced motion
-  mediaQuery: "@media (prefers-reduced-motion: reduce)",
-  // Utility class to disable animations
-  disableAnimations: "animation: none !important; transition: none !important;",
-  // Reduced motion spring (instant, no animation)
-  spring: {
-    type: "spring",
-    stiffness: 1e3,
-    damping: 100,
-    mass: 1
-  }
-};
-var motionCSSVariables = {
-  // Durations
-  "--duration-instant": durations.instant,
-  "--duration-fast": durations.fast,
-  "--duration-normal": durations.normal,
-  "--duration-slow": durations.slow,
-  "--duration-slower": durations.slower,
-  "--duration-slowest": durations.slowest,
-  // Additional granular durations
-  "--duration-75": durations["75"],
-  "--duration-100": durations["100"],
-  "--duration-200": durations["200"],
-  "--duration-250": durations["250"],
-  "--duration-400": durations["400"],
-  "--duration-600": durations["600"],
-  "--duration-800": durations["800"],
-  // Easings
-  "--ease-linear": easings.linear,
-  "--ease-in": easings["ease-in"],
-  "--ease-out": easings["ease-out"],
-  "--ease-in-out": easings["ease-in-out"],
-  "--ease-bounce": easings.bounce,
-  "--ease-elastic": easings.elastic,
-  "--ease-out-cubic": easings["ease-out-cubic"],
-  "--ease-in-cubic": easings["ease-in-cubic"],
-  "--ease-in-out-cubic": easings["ease-in-out-cubic"],
-  // Transitions
-  "--transition-fast": transitions.fast,
-  "--transition-normal": transitions.normal,
-  "--transition-slow": transitions.slow,
-  "--transition-default": transitions.DEFAULT,
-  "--transition-fast-in": transitions["fast-in"],
-  "--transition-fast-out": transitions["fast-out"],
-  "--transition-fast-in-out": transitions["fast-in-out"],
-  "--transition-normal-in": transitions["normal-in"],
-  "--transition-normal-out": transitions["normal-out"],
-  "--transition-normal-in-out": transitions["normal-in-out"],
-  "--transition-slow-in": transitions["slow-in"],
-  "--transition-slow-out": transitions["slow-out"],
-  "--transition-slow-in-out": transitions["slow-in-out"],
-  "--transition-bounce": transitions.bounce,
-  "--transition-elastic": transitions.elastic
-};
-var tailwindMotionConfig = {
-  transitionDuration: {
-    ...durations
-  },
-  transitionTimingFunction: {
-    ...easings
-  },
-  transitionProperty: {
-    DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-    colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
-    opacity: "opacity",
-    shadow: "box-shadow",
-    transform: "transform",
-    all: "all",
-    none: "none"
-  },
-  keyframes: {
-    ...keyframes
-  },
-  animation: {
-    ...animations,
-    // Additional animation utilities
-    none: "none",
-    spin: animations.spin,
-    pulse: animations.pulse,
-    bounce: animations.bounce,
-    ping: animations.ping,
-    shake: animations.shake
-  }
+  /** CSS media query for reduced motion */
+  mediaQuery: "@media (prefers-reduced-motion: reduce)"
 };
 
 // src/FOUNDATION/tokens/radius.ts
@@ -6111,4 +6024,4 @@ var tokenSystemSummary = {
 // src/FOUNDATION/tokens/theme.ts
 var UI_COLORS = tailwindThemeColors;
 
-export { ALERT_TOKENS, ARTIST_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };
+export { ALERT_TOKENS, ARTIST_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_LIST_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, ICON_TOKENS, INPUT_TOKENS, LIST_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SIMPLETABLE_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionCombined, motionDurations, motionEasings, motionFade, motionReducedMotion, motionScale, motionSlide, motionTailwindConfig, motionTransitionProperty, motionTransitions, primaryColoredShadows, primaryColors, radiusCSSVariables, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, surfaceColors, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, typographyCSSVariables };