@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/src/tokens/types.ts

@@ -1,1882 +0,0 @@
-import type { IconSize, IconVariant, SvgIcon } from '@yahoo/uds-icons/types';
-import type { Spring } from 'motion/react';
-import type {
-  CSSProperties,
-  ElementType,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-  ReactNode,
-  Ref,
-} from 'react';
-import type { IntRange } from 'type-fest';
-
-import type { UniversalTokensConfigAuto } from '../../generated/universalTokensConfigAuto';
-import type { alwaysPalette } from './configs/palette';
-import type {
-  BUTTON_CSS_VAR_MAP,
-  ICON_BUTTON_CSS_VAR_MAP,
-  MOTION_PREFIX,
-  UDS_PREFIX,
-} from './consts/cssTokens';
-import type { FONT_DECLARATIONS_MAP } from './consts/fontDeclarationsMap';
-
-/* -------------------------------------------------------------------------- */
-/*                                    UTILS                                   */
-/* -------------------------------------------------------------------------- */
-type ClassNameWithoutDot<T extends string> = T extends `.${infer U}` ? U : never;
-type ExtractUrlFromFontFaceRule<T extends string> = T extends `url('${infer U}') format('woff2')`
-  ? U
-  : never;
-type UnjoinClassNames<T extends string> = T extends `${infer U}.${infer V}` ? U | V : T;
-/** Ensure an array has a max length of N */
-type MaxLengthArray<T, N extends number, A extends T[] = []> = A['length'] extends N
-  ? A
-  : T[] extends A
-    ? T[]
-    : A | MaxLengthArray<T, N, [...A, T]>;
-
-/* -------------------------------------------------------------------------- */
-/*                                    COLOR                                   */
-/* -------------------------------------------------------------------------- */
-
-type PaletteType = keyof PaletteConfig;
-type PaletteValue = { hue: Hue; step: HueStep; opacity?: OpacityStep };
-type Palette = { [key in PaletteType]: keyof PaletteConfig[key] };
-
-type Hue =
-  | 'gray'
-  | 'purple'
-  | 'indigo'
-  | 'blue'
-  | 'cyan'
-  | 'teal'
-  | 'mint'
-  | 'green'
-  | 'lime'
-  | 'citron'
-  | 'yellow'
-  | 'brown'
-  | 'nude'
-  | 'orange'
-  | 'sunset'
-  | 'red'
-  | 'rose'
-  | 'pink'
-  | 'magenta'
-  | 'carbon';
-
-type HueStep =
-  | '0'
-  | '1'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '7'
-  | '8'
-  | '9'
-  | '10'
-  | '11'
-  | '12'
-  | '13'
-  | '14'
-  | '15';
-
-type SpectrumColor = `${Hue}-${HueStep}`;
-
-type SharedPrimaryPaletteAlias = 'brand' | 'alert' | 'positive' | 'warning' | 'info';
-type SharedSecondaryPaletteAlias = `${SharedPrimaryPaletteAlias}-secondary`;
-type SharedPaletteAlias = SharedPrimaryPaletteAlias | SharedSecondaryPaletteAlias;
-type DeprecatedAccentAlias = 'accent';
-
-type OpacityStep = `${Percentage}`;
-
-/* ------------------------------- BACKGROUND ------------------------------- */
-type BackgroundPaletteAlias = 'primary' | 'secondary' | DeprecatedAccentAlias | SharedPaletteAlias;
-type BackgroundPalette = Record<BackgroundPaletteAlias, PaletteValue>;
-
-/* ------------------------------- FOREGROUND ------------------------------- */
-type ForegroundPaletteAlias =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'muted'
-  | 'on-color'
-  | DeprecatedAccentAlias
-  | SharedPaletteAlias;
-type ForegroundPalette = Record<ForegroundPaletteAlias, PaletteValue>;
-
-/* ---------------------------------- LINE ---------------------------------- */
-type LinePaletteAlias =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'muted'
-  | DeprecatedAccentAlias
-  | SharedPaletteAlias;
-type LinePalette = Record<LinePaletteAlias, PaletteValue>;
-
-/* --------------------------------- SHADOW --------------------------------- */
-type ShadowPaletteAlias = 'primary' | 'secondary';
-type ShadowPalette = Record<ShadowPaletteAlias, PaletteValue>;
-
-/* --------------------------------- ALWAYS --------------------------------- */
-type AlwaysPalette = typeof alwaysPalette;
-type AlwaysPaletteAlias = keyof AlwaysPalette;
-
-/* -------------------------- COLOR PROPERTY VALUES ------------------------- */
-type ForegroundColor = ForegroundPaletteAlias | AlwaysPaletteAlias;
-type LineColor = LinePaletteAlias | AlwaysPaletteAlias;
-type BackgroundColor = BackgroundPaletteAlias | AlwaysPaletteAlias;
-type ShadowColor = ShadowPaletteAlias | SpectrumColor | AlwaysPaletteAlias;
-
-type PropertyToPaletteAliasMap = {
-  backgroundColor: BackgroundColor;
-  borderColor: LineColor;
-  color: ForegroundColor;
-};
-
-/* -------------------------------------------------------------------------- */
-/*                                SHADOW TYPES                                */
-/* -------------------------------------------------------------------------- */
-type ShadowSpectrumColor = { type: 'spectrum'; value: SpectrumColor };
-type ShadowPaletteColor = { type: 'palette'; value: ShadowColor };
-type ShadowAlwaysColor = { type: 'always'; value: AlwaysPaletteAlias };
-type ShadowColorConfig = ShadowPaletteColor | ShadowSpectrumColor | ShadowAlwaysColor;
-
-type ShadowOffset = `-${Exclude<SpacingAlias, '0'>}` | SpacingAlias;
-type ShadowOpacity = `${IntRange<0, 101>}`;
-type ShadowSpreadRadius = `-${Exclude<SpacingAlias, '0'>}` | SpacingAlias;
-
-type ShadowPreset = {
-  offsetX: ShadowOffset;
-  offsetY: ShadowOffset;
-  blur: SpacingAlias;
-  spread: ShadowSpreadRadius;
-  color: ShadowColorConfig;
-  opacity: ShadowOpacity;
-};
-
-type ShadowVariant = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-type ShadowVariantInvert = `${Exclude<ShadowVariant, 'none'>}-invert`;
-type ShadowVariantWithInvert = ShadowVariant | ShadowVariantInvert;
-type ShadowVariantConfig = MaxLengthArray<ShadowPreset, 3>;
-type ShadowType = 'drop' | 'inset';
-type ShadowTypeConfig = Record<ShadowVariant, ShadowVariantConfig>;
-
-type ShadowConfig = {
-  drop: Record<ShadowVariant, ShadowVariantConfig>;
-  inset: Record<ShadowVariant | ShadowVariantInvert, ShadowVariantConfig>;
-};
-
-/* -------------------------------------------------------------------------- */
-/*                                    UNITS                                   */
-/* -------------------------------------------------------------------------- */
-
-type Percentage = IntRange<0, 101>;
-
-type PixelsUnit = { value: number; type: 'px' };
-type RemsUnit = { value: number; type: 'rem' };
-type UnitlessUnit = { value: number; type: 'unitless' };
-type PercentageUnit = { value: Percentage; type: 'percentage' };
-
-/* -------------------------------------------------------------------------- */
-/*                                 BREAKPOINTS                                */
-/* -------------------------------------------------------------------------- */
-
-type BreakpointValue = PixelsUnit;
-
-type BreakpointsConfig = {
-  sm: BreakpointValue;
-  md: BreakpointValue;
-  lg: BreakpointValue;
-  xl: BreakpointValue;
-  '2xl': BreakpointValue;
-};
-
-type Breakpoint = keyof BreakpointsConfig;
-type BreakpointWithBase = Breakpoint | 'base';
-
-/* -------------------------------------------------------------------------- */
-/*                                 TYPOGRAPHY                                 */
-/* -------------------------------------------------------------------------- */
-type TextVariantTypography =
-  | 'display1'
-  | 'display2'
-  | 'display3'
-  | 'title1'
-  | 'title2'
-  | 'title3'
-  | 'title4'
-  | 'headline1'
-  | 'body1'
-  | 'label1'
-  | 'label2'
-  | 'label3'
-  | 'label4'
-  | 'caption1'
-  | 'caption2'
-  | 'legal1';
-
-type TextVariantUi = 'ui1' | 'ui2' | 'ui3' | 'ui4' | 'ui5' | 'ui6';
-type TextVariantWithoutEmphasized = TextVariantTypography | TextVariantUi;
-type TextVariant = TextVariantWithoutEmphasized | `${TextVariantWithoutEmphasized}/emphasized`;
-
-type FontAlias = 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono';
-type FontType = 'sans' | 'serif' | 'mono';
-type FontID = keyof typeof FONT_DECLARATIONS_MAP;
-type FontDeclaration = (typeof FONT_DECLARATIONS_MAP)[FontID]['declarations'][number];
-type FontFamilyCDNUrl = ExtractUrlFromFontFaceRule<FontDeclaration['src']>;
-type FontConfig = Record<FontAlias, FontID>;
-type FontCssVar = `--${typeof UDS_PREFIX}-font-${FontAlias}`;
-
-type FontWeightNumeric = `${IntRange<100, 901, 100>}`;
-type FontWeightDescriptive =
-  | 'thin'
-  | 'extralight'
-  | 'light'
-  | 'regular'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold'
-  | 'black';
-
-type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
-type TextDecorationLine = 'none' | 'underline';
-type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
-type LineClampAlias = `${IntRange<1, 7>}`;
-type LineHeight = number;
-type FontSize = number;
-
-type TextTransformConfig = Record<TextVariantWithoutEmphasized, TextTransform>;
-type FontSizeConfig = Record<TextVariantWithoutEmphasized, FontSize>;
-type FontFamilyConfig = Record<TextVariantWithoutEmphasized, FontAlias>;
-type FontWeightConfig = Record<TextVariantWithoutEmphasized, number>;
-type FontSlantConfig = Record<TextVariantWithoutEmphasized, number>;
-type FontWidthConfig = Record<TextVariantWithoutEmphasized, number>;
-type LineHeightConfig = Record<TextVariantWithoutEmphasized, LineHeight>;
-type TextProperty = 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'textTransform';
-
-/**
- * Defines a structured CSS value, separating the raw value from its unit type.
- * 'unitless' is for unitless values like line-height or font-weight.
- */
-type TypographyUnitValue = PixelsUnit | UnitlessUnit;
-
-/**
- * Defines the structure for a single, responsive CSS property.
- * The value can now be a simple string (for properties like fontFamily)
- * or a structured CssValue object (for properties like fontSize).
- */
-type TypographyResponsiveProperty<T> = {
-  /**
-   * The base value for the property, applying from 0px up to the 'sm' breakpoint.
-   */
-  base: T;
-  /**
-   * Responsive overrides for each breakpoint. If this key is present, it must
-   * contain a value for every defined breakpoint.
-   */
-  breakpoints: Record<Breakpoint, T>;
-};
-
-type TypographyStyleProperty =
-  | 'fontFamily'
-  | 'fontSize'
-  | 'fontWeight'
-  | 'lineHeight'
-  | 'textTransform'
-  | 'fontSlant'
-  | 'fontWidth';
-
-type TypographyStyle = {
-  fontFamily: TypographyResponsiveProperty<FontAlias>;
-  textTransform: TypographyResponsiveProperty<TextTransform>;
-  fontSize: TypographyResponsiveProperty<TypographyUnitValue>;
-  fontWeight: TypographyResponsiveProperty<TypographyUnitValue>;
-  lineHeight: TypographyResponsiveProperty<TypographyUnitValue>;
-  fontSlant: TypographyResponsiveProperty<TypographyUnitValue>;
-  fontWidth: TypographyResponsiveProperty<TypographyUnitValue>;
-};
-
-type TypographyConfig = Record<TextVariant, TypographyStyle>;
-
-type GlobalDefaultsConfig = {
-  breakpoint: Breakpoint | 'base';
-  enableResponsiveType: boolean;
-};
-
-/* -------------------------------------------------------------------------- */
-/*                                   SIZING                                   */
-/* -------------------------------------------------------------------------- */
-// TODO - ensure we have a consistent naming convention for these types, and carry the same
-// convention across the entire design system (primary | secondary, fill | outline, etc)
-type TShirtSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-type TShirtSizeCommon = Extract<TShirtSize, 'sm' | 'md' | 'lg'>;
-
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type AvatarSizeConfig = Record<AvatarSize, number>;
-type AvatarShape = BorderRadius;
-
-type IconSizeConfig = Record<IconSize, number>;
-
-/* -------------------------------------------------------------------------- */
-/*                                   LAYOUT                                   */
-/* -------------------------------------------------------------------------- */
-
-type SpacingAlias =
-  | '0'
-  | 'px'
-  | '0.5'
-  | '1'
-  | '1.5'
-  | '2'
-  | '2.5'
-  | '3'
-  | '3.5'
-  | '4'
-  | '4.5'
-  | '5'
-  | '5.5'
-  | '6'
-  | '7'
-  | '8'
-  | '9'
-  | '10'
-  | '11'
-  | '12'
-  | '14'
-  | '16'
-  | '20'
-  | '24'
-  | '28'
-  | '32'
-  | '36'
-  | '40'
-  | '44'
-  | '48'
-  | '52'
-  | '56'
-  | '60'
-  | '64'
-  | '72'
-  | '80'
-  | '96';
-
-type SpacingConfig = Record<SpacingAlias, number>;
-
-/* -------------------------------------------------------------------------- */
-/*                                OTHER TOKENS                                */
-/* -------------------------------------------------------------------------- */
-
-type BorderRadius = TShirtSize;
-type BorderRadiusConfig = Record<BorderRadius, number>;
-
-type BorderWidth = 'none' | 'thin' | 'medium' | 'thick';
-type BorderWidthConfig = Record<BorderWidth, number>;
-
-/* -------------------------------------------------------------------------- */
-/*                                MODE CONFIGS                                */
-/* -------------------------------------------------------------------------- */
-type ColorModeConfig = Record<ColorMode, ColorsConfig>;
-
-type ColorsConfig = {
-  palette: PaletteConfig;
-  spectrum: SpectrumConfig;
-};
-
-type SpectrumValue = Record<HueStep, string>;
-type SpectrumConfig = Record<Hue, SpectrumValue>;
-
-type PaletteConfig = {
-  background: BackgroundPalette;
-  foreground: ForegroundPalette;
-  line: LinePalette;
-  shadow: ShadowPalette;
-};
-
-type ScaleConfig = {
-  avatarSizes: AvatarSizeConfig;
-  iconSizes: IconSizeConfig;
-  borderRadius: BorderRadiusConfig;
-  borderWidth: BorderWidthConfig;
-};
-
-type ScaleModeConfig = Record<ScaleMode, ScaleConfig>;
-
-/* -------------------------------------------------------------------------- */
-/*                                BUTTON CONFIG                               */
-/* -------------------------------------------------------------------------- */
-
-type ButtonSize = TShirtSizeCommon;
-type ButtonPalette = 'brand' | 'accent' | 'alert' | 'positive' | 'warning' | 'info';
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-type ButtonState = 'hover' | 'pressed';
-type ButtonKind = 'fill' | 'outline' | 'ghost';
-type ButtonMotionProperty = 'scale';
-type ButtonMotionEffect = 'up' | 'down' | 'none';
-type ButtonColorEffect = 'none' | 'custom';
-type ButtonColorProperty = 'backgroundColor' | 'borderColor' | 'color';
-type ButtonSizeProperty = keyof ButtonSizeConfig;
-
-// TODO: Temporary solution for collapsing palette and variant
-type ButtonVariantFlat =
-  // primary, secondary, tertiary (formerly "accent" palette)
-  | ButtonVariant
-  // brand, alert, positive, warning
-  | `${Exclude<ButtonPalette, 'accent'>}`
-  // brand-secondary, brand-tertiary, etc..
-  | `${Exclude<ButtonPalette, 'accent'>}-${Exclude<ButtonVariant, 'primary'>}`;
-
-type ButtonColorEffectConfig = {
-  options: ButtonColorEffect[];
-  value: ButtonColorEffect;
-};
-
-type ButtonMotionEffectConfig = {
-  options: ButtonMotionEffect[];
-  value: ButtonMotionEffect;
-};
-
-type ButtonSpectrumColor = {
-  type: 'spectrum';
-  value: SpectrumColor;
-};
-type ButtonPaletteColor<T> = {
-  type: 'palette';
-  value: T;
-};
-type AlwaysPaletteColor<T> = {
-  type: 'always';
-  value: T;
-};
-
-type ButtonColorConfig<Property extends ButtonColorProperty> =
-  | ButtonPaletteColor<PropertyToPaletteAliasMap[Property]>
-  | ButtonSpectrumColor;
-
-type ButtonColorPropertyConfig = {
-  [key in ButtonColorProperty]: ButtonColorConfig<key>;
-};
-
-type ButtonMotionPropertyConfig = {
-  [key in ButtonMotionProperty]: ButtonMotionEffect;
-};
-
-type ConfigurableShadowField<T> = {
-  value: T | 'custom';
-  config: ShadowVariantConfig | null;
-};
-
-type ConfigurableDropShadowValues = ConfigurableShadowField<ShadowVariant>['value'];
-type ConfigurableInsetShadowValues = ConfigurableShadowField<ShadowVariantWithInvert>['value'];
-
-type ButtonShadowPropertyConfig = {
-  dropShadow: ConfigurableShadowField<ShadowVariant>;
-  insetShadow: ConfigurableShadowField<ShadowVariantWithInvert>;
-};
-
-type ButtonBaseConfig = {
-  borderWidth: BorderWidth;
-  borderRadius: BorderRadius;
-} & ButtonColorPropertyConfig &
-  ButtonMotionPropertyConfig &
-  ButtonShadowPropertyConfig;
-
-type ButtonSizeConfig = {
-  spacingHorizontal: SpacingAlias;
-  spacingVertical: SpacingAlias;
-  gap: SpacingAlias;
-  iconSize: IconSize;
-  textVariant: TextVariant;
-};
-
-type ButtonVariantConfig = {
-  kind: ButtonKind;
-  base: ButtonBaseConfig;
-  effect: ButtonStateEffectConfig;
-  state: ButtonStateConfig;
-};
-
-type ButtonPaletteConfig = {
-  [variant in ButtonVariant]: ButtonVariantConfig;
-};
-
-type ButtonStateConfig = {
-  [state in ButtonState]: ButtonColorPropertyConfig &
-    ButtonMotionPropertyConfig &
-    ButtonShadowPropertyConfig;
-};
-
-type ButtonColorEffectConfigMap = {
-  [property in ButtonColorProperty]: ButtonColorEffectConfig;
-};
-
-type ButtonMotionEffectConfigMap = {
-  [property in ButtonMotionProperty]: ButtonMotionEffectConfig;
-};
-
-type ButtonStateEffectConfig = {
-  [state in ButtonState]: ButtonColorEffectConfigMap & ButtonMotionEffectConfigMap;
-};
-
-type ButtonDefaultsConfig = {
-  palette: ButtonPalette;
-  variant: ButtonVariant;
-  size: ButtonSize;
-};
-
-interface ButtonConfig {
-  defaults: ButtonDefaultsConfig;
-  size: {
-    [size in ButtonSize]: ButtonSizeConfig;
-  };
-  palette: {
-    [palette in ButtonPalette]: ButtonPaletteConfig;
-  };
-}
-
-type ButtonCssVarMap = typeof BUTTON_CSS_VAR_MAP;
-type ButtonCssVar = ButtonCssVarMap[keyof ButtonCssVarMap];
-type ButtonStateCssProperty = keyof Omit<ButtonBaseConfig, 'scale'>;
-type ButtonSizeCssProperty = keyof Pick<
-  ButtonCssVarMap,
-  'padding' | 'columnGap' | 'fontWeight' | 'fontSize' | 'lineHeight' | 'textTransform' | 'iconSize'
->;
-
-type ButtonStateCssVar = Pick<ButtonCssVarMap, ButtonStateCssProperty>[ButtonStateCssProperty];
-type ButtonSizeCssVar = Pick<ButtonCssVarMap, ButtonSizeCssProperty>[ButtonSizeCssProperty];
-type ButtonStateVarsMap = Record<ButtonStateCssVar, string>;
-type ButtonSizeVarsMap = Record<ButtonSizeCssVar, string>;
-
-type ButtonPseudoStyles<ClassName extends string> = {
-  [key in `.${ButtonState}`]: Record<ClassName, ButtonStateVarsMap>;
-};
-
-type ButtonStateVarsWithPseudoStyles<T extends string> = Record<T, ButtonStateVarsMap> &
-  ButtonPseudoStyles<T>;
-
-/* -------------------------------------------------------------------------- */
-/*                                 BUTTON CSS                                 */
-/* -------------------------------------------------------------------------- */
-
-type ButtonClassMap = {
-  '.uds-button': {
-    /** Hardcoded in tailwind plugin */
-    display: CSSProperties['display'];
-    alignItems: CSSProperties['alignItems'];
-    whiteSpace: CSSProperties['whiteSpace'];
-    /** Driven by css variables */
-    borderRadius: string;
-    color: string;
-    backgroundColor: string;
-    boxShadow: string;
-    padding: string;
-    columnGap: string;
-    fontFamily: string;
-    fontWeight: string;
-    fontSize: string;
-    lineHeight: string;
-    textTransform: string;
-  };
-} & ButtonStateVarsWithPseudoStyles<
-  | `.uds-button-${ButtonPalette}`
-  | `.uds-button-${ButtonVariant}`
-  | `.uds-button-${ButtonPalette}.uds-button-${ButtonVariant}`
-> &
-  Record<`.uds-button-${ButtonSize}`, ButtonSizeVarsMap> &
-  ButtonPseudoStyles<'.uds-button'>;
-
-type ButtonClassName = UnjoinClassNames<
-  ClassNameWithoutDot<Exclude<keyof ButtonClassMap, `.${ButtonState}`>>
->;
-
-/* -------------------------------------------------------------------------- */
-/*                                 ICON BUTTON                                */
-/* -------------------------------------------------------------------------- */
-type IconButtonSize = Extract<TShirtSize, 'xs' | TShirtSizeCommon | 'xl'>;
-
-interface IconButtonSizeConfig {
-  spacing: SpacingAlias;
-  iconSize: IconSize;
-}
-
-interface IconButtonDefaultsConfig extends Omit<ButtonDefaultsConfig, 'size'> {
-  size: IconButtonSize; // New size property specific to IconButtonDefaultsConfig
-}
-
-interface IconButtonConfig {
-  defaults: IconButtonDefaultsConfig;
-  size: {
-    [size in IconButtonSize]: IconButtonSizeConfig;
-  };
-}
-
-type IconButtonCssVarMap = typeof ICON_BUTTON_CSS_VAR_MAP;
-type IconButtonCssVar = IconButtonCssVarMap[keyof IconButtonCssVarMap];
-type IconButtonSizeCssVar = IconButtonCssVarMap[keyof IconButtonCssVarMap];
-type IconButtonSizeVarsMap = Record<IconButtonSizeCssVar, string>;
-/* -------------------------------------------------------------------------- */
-/*                               ICON BUTTON CSS                              */
-/* -------------------------------------------------------------------------- */
-
-type IconButtonClassMap = {
-  '.uds-icon-button': {
-    /** Hardcoded in tailwind plugin */
-    display: CSSProperties['display'];
-    alignItems: CSSProperties['alignItems'];
-    padding: string;
-  };
-} & Record<`.uds-icon-button-${IconButtonSize}`, IconButtonSizeVarsMap>;
-
-type IconButtonClassName = UnjoinClassNames<ClassNameWithoutDot<keyof IconButtonClassMap>>;
-
-/* -------------------------------------------------------------------------- */
-/*                                 TEXT INPUT                                 */
-/* -------------------------------------------------------------------------- */
-type InputSize = Extract<TShirtSizeCommon, 'md' | 'lg'>;
-
-/* -------------------------------------------------------------------------- */
-/*                             FULL TOKENS CONFIG                             */
-
-/* -------------------------------------------------------------------------- */
-
-interface UniversalTokensConfig extends UniversalTokensConfigAuto {
-  version: string;
-  colorMode: ColorModeConfig;
-  scaleMode: ScaleModeConfig;
-  font: FontConfig;
-  button: ButtonConfig;
-  iconButton: IconButtonConfig;
-  motion: MotionConfig;
-  shadow: ShadowConfig;
-  breakpoints: BreakpointsConfig;
-  typography: TypographyConfig;
-  globalDefaults: GlobalDefaultsConfig;
-}
-
-/* -------------------------------------------------------------------------- */
-/*                                CSS VARIABLES                               */
-/* -------------------------------------------------------------------------- */
-type UdsCssVar = FontCssVar | ButtonCssVar | IconButtonCssVar;
-
-/* -------------------------------------------------------------------------- */
-/*                                    MODES                                   */
-/* -------------------------------------------------------------------------- */
-type PlatformMode = 'web' | 'ios' | 'android';
-type ColorMode = 'light' | 'dark';
-type ColorModeForApp = ColorMode | 'system';
-type ScaleMode = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
-type ScaleModeForApp = ScaleMode | 'system';
-type HighContrastMode = boolean;
-type RegionMode = '🇺🇸 US' | '🇩🇪 DE' | '🇫🇷 FR' | '🇨🇳 CN';
-
-interface Modes {
-  colorMode: ColorMode;
-  scaleMode: ScaleMode;
-}
-
-/* -------------------------------------------------------------------------- */
-/*                                   MOTION                                   */
-/* -------------------------------------------------------------------------- */
-type Animation = 'none' | 'spin' | 'ping' | 'pulse' | 'bounce';
-type TransitionDelay = '0' | '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000';
-type TransitionDuration = '0' | '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000';
-type TransitionTiming = 'linear' | 'in' | 'out' | 'in-out';
-
-/* -------------------------- Spring motion configs ------------------------- */
-type MotionVariant = 'damped' | 'smooth' | 'subtle' | 'bouncy' | 'veryBouncy';
-type MotionVariantSpeed = '1' | '2' | '3' | '4';
-type MotionSpringConfigOptions = 'damping' | 'stiffness';
-type MotionSpringConfig = Required<Pick<Spring, MotionSpringConfigOptions>>;
-type MotionCssVar =
-  `--${typeof MOTION_PREFIX}-${MotionVariant}-${MotionVariantSpeed}-${keyof MotionSpringConfig}`;
-type MotionVariantValues = {
-  [key in MotionVariantSpeed]: MotionSpringConfig;
-};
-type MotionConfig = Record<MotionVariant, MotionVariantValues>;
-
-/* -------------------------------------------------------------------------- */
-/*                                    MISC                                    */
-/* -------------------------------------------------------------------------- */
-type AriaAttribute =
-  | 'busy'
-  | 'checked'
-  | 'disabled'
-  | 'expanded'
-  | 'hidden'
-  | 'pressed'
-  | 'readonly'
-  | 'required'
-  | 'selected'
-  | 'invalid';
-
-type DataAttribute =
-  | 'active'
-  | 'active-item'
-  | 'autofill'
-  | 'backdrop'
-  | 'enter'
-  | 'leave'
-  | 'focus-visible';
-
-/* -------------------------------------------------------------------------- */
-/*                                    FLEX                                    */
-/* -------------------------------------------------------------------------- */
-type Flex = '1' | 'auto' | 'initial' | 'none';
-type FlexGrow = '0' | '1' | '2' | '3';
-type FlexShrink = '0' | '1';
-type FlexAlignContent =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'stretch'
-  | 'space-between'
-  | 'space-around';
-type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-type FlexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-type FlexJustifyContent =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
-type FlexBasis = 'min-content';
-
-/* -------------------------------------------------------------------------- */
-/*                                   LAYOUT                                   */
-/* -------------------------------------------------------------------------- */
-type Display =
-  | 'block'
-  | 'inline-block'
-  | 'inline'
-  | 'flex'
-  | 'inline-flex'
-  | 'table'
-  | 'inline-table'
-  | 'table-caption'
-  | 'table-cell'
-  | 'table-column'
-  | 'table-column-group'
-  | 'table-footer-group'
-  | 'table-header-group'
-  | 'table-row-group'
-  | 'table-row'
-  | 'flow-root'
-  | 'grid'
-  | 'contents';
-type Overflow = 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
-type Position = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
-
-/* -------------------------------------------------------------------------- */
-/*                                Motion props                                */
-/* -------------------------------------------------------------------------- */
-type ScaleEffectMap = {
-  none: {
-    [key in Exclude<TShirtSize, 'none' | 'full'>]: '1';
-  };
-  down: {
-    xs: '0.9875';
-    sm: '0.97';
-    md: '0.875';
-    lg: '0.75';
-    xl: '0.5';
-  };
-  up: {
-    xs: '1.0125';
-    sm: '1.03';
-    md: '1.125';
-    lg: '1.25';
-    xl: '2';
-  };
-};
-
-/* -------------------------------------------------------------------------- */
-/*                                 STYLE PROPS                                */
-/* -------------------------------------------------------------------------- */
-type ImageStyleProps = {
-  /**
-   * Determines how the image should be resized to fit its container.
-   */
-  contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-};
-
-interface BorderStyleProps {
-  /** Add a border radius to all corners of the box. */
-  borderRadius?: BorderRadius;
-  /** Add a border radius to top left corner of the box. */
-  borderTopStartRadius?: BorderRadius;
-  /** Add a border radius to top right corner of the box. */
-  borderTopEndRadius?: BorderRadius;
-  /** Add a border radius to bottom left corner of the box. */
-  borderBottomStartRadius?: BorderRadius;
-  /** Add a border radius to bottom right corner of the box. */
-  borderBottomEndRadius?: BorderRadius;
-  /** Adds a custom border color from the palette */
-  borderColor?: LineColor;
-  /** Start border color */
-  borderStartColor?: LineColor;
-  /** End border color */
-  borderEndColor?: LineColor;
-  /** Top border color */
-  borderTopColor?: LineColor;
-  /** Bottom border color */
-  borderBottomColor?: LineColor;
-  /** Shorthand property to the width of an element's border. */
-  borderWidth?: BorderWidth;
-  /** Sets the width of the top and bottom border of an element. */
-  borderVerticalWidth?: BorderWidth;
-  /** Sets the width of the start (left) and end (right) border of an element. */
-  borderHorizontalWidth?: BorderWidth;
-  /** Sets the width of the start (left) border of an element. */
-  borderStartWidth?: BorderWidth;
-  /** Sets the width of the end (right) border of an element. */
-  borderEndWidth?: BorderWidth;
-  /** Sets the width of the top border of an element. */
-  borderTopWidth?: BorderWidth;
-  /** Sets the width of the bottom border of an element. */
-  borderBottomWidth?: BorderWidth;
-}
-
-interface ShadowStyleProps {
-  /** Sets the variant of the shadow. */
-  dropShadow?: ShadowVariant;
-  /** Sets the variant of the inset shadow. */
-  insetShadow?: ShadowVariant | ShadowVariantInvert;
-}
-
-interface LayoutStyleProps {
-  /** Sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
-  display?: Display;
-  /** Shorthand property which sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction. */
-  overflow?: Overflow;
-  /** Sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */
-  overflowX?: Overflow;
-  /** sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */
-  overflowY?: Overflow;
-  /** Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
-  position?: Position;
-}
-
-interface SpacingStyleProps {
-  /** Apply inner spacing on all sides. */
-  spacing?: SpacingAlias;
-  /** Apply inner spacing on the leading and trailing sides. */
-  spacingHorizontal?: SpacingAlias;
-  /** Apply inner spacing on the top and bottom sides. */
-  spacingVertical?: SpacingAlias;
-  /** Apply inner spacing on the bottom side. */
-  spacingBottom?: SpacingAlias;
-  /** Apply inner spacing on the trailing side. */
-  spacingEnd?: SpacingAlias;
-  /** Apply inner spacing on the leading side. */
-  spacingStart?: SpacingAlias;
-  /** Apply inner spacing on the top side. */
-  spacingTop?: SpacingAlias;
-  /** Apply negative outer spacing on all sides. */
-  offset?: SpacingAlias;
-  /** Apply negative outer spacing on the top and bottom sides. */
-  offsetVertical?: SpacingAlias;
-  /** Apply negative outer spacing on the leading and trailing sides. */
-  offsetHorizontal?: SpacingAlias;
-  /** Apply negative outer spacing on the bottom side. */
-  offsetBottom?: SpacingAlias;
-  /** Apply negative outer spacing on the trailing side. */
-  offsetEnd?: SpacingAlias;
-  /** Apply negative outer spacing on the leading side. */
-  offsetStart?: SpacingAlias;
-  /** Apply negative outer spacing on the top side. */
-  offsetTop?: SpacingAlias;
-  /** Control the horizontal gutters between grid and flexbox items. */
-  columnGap?: SpacingAlias;
-  /** Control the vertical gutters between grid and flexbox items. */
-  rowGap?: SpacingAlias;
-}
-
-interface FlexStyleProps {
-  /** Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. */
-  alignContent?: FlexAlignContent;
-  /** Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. */
-  alignItems?: FlexAlignItems;
-  /** Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. */
-  alignSelf?: FlexAlignSelf;
-  /** Sets how a flex item will grow or shrink to fit the space available in its flex container. */
-  flex?: Flex;
-  /** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
-  flexDirection?: FlexDirection;
-  /** Sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size. */
-  flexGrow?: FlexGrow;
-  /** Sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. */
-  flexShrink?: FlexShrink;
-  /** Sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. */
-  flexWrap?: FlexWrap;
-  /** Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. */
-  justifyContent?: FlexJustifyContent;
-  /** Sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis */
-  flexBasis?: FlexBasis;
-}
-
-interface StateStyleProps {
-  interactable?: boolean;
-  focusable?: boolean;
-}
-
-interface TextStyleProps {
-  /** Color of a Text or Icon element */
-  color?: ForegroundColor;
-  /** Color of placeholder text */
-  placeholderColor?: ForegroundColor;
-  /** Font family for the text */
-  fontFamily?: TextVariant | FontAlias;
-  /** Font size of the text */
-  fontSize?: TextVariant;
-  /**
-   * Font weight of the text
-   *
-   * @deprecated Consider using an `emphasized` text variant instead. For example: `display1/emphasized`
-   */
-  fontWeight?: TextVariant | FontWeightDescriptive;
-  /** Line height of the text */
-  lineHeight?: TextVariant;
-  /** Text alignment of the text */
-  textAlign?: 'center' | 'justify' | 'start' | 'end';
-  /** Sets the text transform for the text  */
-  textTransform?: TextVariant | TextTransform;
-}
-
-interface BackgroundStyleProps {
-  /** Sets the background color. */
-  backgroundColor?: BackgroundColor;
-}
-
-type CustomSizingStyleProps = {
-  iconSize?: IconSize;
-  avatarSize?: AvatarSize;
-};
-
-interface SizeStyleProps {
-  /** Sets the width of an element. */
-  width?: 'full' | 'fit' | 'screen';
-  /** Sets the height of an element. */
-  height?: 'full' | 'fit' | 'screen';
-}
-
-type StyleProps = BackgroundStyleProps &
-  BorderStyleProps &
-  LayoutStyleProps &
-  FlexStyleProps &
-  SpacingStyleProps &
-  TextStyleProps &
-  ImageStyleProps &
-  CustomSizingStyleProps &
-  ShadowStyleProps &
-  SizeStyleProps;
-
-/* -------------------------------------------------------------------------- */
-/*                          UNIVERSAL COMPONENT PROPS                         */
-
-/* -------------------------------------------------------------------------- */
-interface UniversalBoxProps
-  extends PropsWithChildren,
-    BackgroundStyleProps,
-    BorderStyleProps,
-    FlexStyleProps,
-    LayoutStyleProps,
-    SpacingStyleProps,
-    SizeStyleProps,
-    ShadowStyleProps {
-  /**
-   * When asChild is set to true, the component's child will be cloned and passed
-   * the props and behavior required to make it functional.
-   */
-  asChild?: boolean;
-  /**
-   * Customize tag name.
-   */
-  as?: ElementType;
-}
-
-interface UniversalStackProps extends Omit<UniversalBoxProps, 'flexDirection'> {
-  gap?: SpacingAlias;
-  separator?: ReactNode | ((index: number) => ReactNode);
-}
-
-interface UniversalTextProps extends PropsWithChildren, TextStyleProps, UniversalBoxProps {
-  /** Style of text. */
-  variant?: TextVariant;
-  /** Color of the text. */
-  color?: ForegroundColor;
-}
-
-interface UniversalIconProps {
-  /** Icon to render from the icons package. */
-  name: SvgIcon;
-  /** Size of the icon. */
-  size?: IconSize;
-  /** Variant for icon. Either fill or outline. */
-  variant?: IconVariant;
-  /** Color of the icon. */
-  color?: ForegroundColor;
-}
-
-type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
-
-interface IconPropsWithSVGProps extends UniversalIconProps, SVGElementProps {}
-
-type IconSlotRenderProps = Omit<IconPropsWithSVGProps, 'name'>;
-
-/**
- * We are changing the slot prop from ReactNode to ReactElement to avoid
- * confusing and useless options like number and string, however,
- * there are cases where folks are using null/undefined to dynamically opt-out
- * of rendering the icon. We want to still allow that.
- */
-type BackwardsCompatibleReactElement = null | undefined | ReactElement;
-
-/**
- * Used anywhere we offer an icon which can be customized.
- *
- * Passing an SvgIcon is the happy path.
- *
- * @example
- * import { Calendar } from "@yahoo/uds-icons"
- * <IconSlot icon={Calendar} />
- */
-type UniversalIconSlot =
-  // Pass an svg by reference
-  | SvgIcon
-  // Customize the icon <Icon name={Arrow} />, <IconButton />, <Pressable />
-  | BackwardsCompatibleReactElement
-  // Given the default props (like variant and color), render something that needed to know those defaults
-  | ((iconProps: IconSlotRenderProps) => BackwardsCompatibleReactElement);
-
-interface UniversalPressableProps extends Omit<UniversalBoxProps, 'as'> {
-  onPress?: () => void;
-}
-
-interface UniversalIconButtonProps {
-  /**
-   * The variant of the button
-   * @default is assigned in the configurator
-   */
-  variant?: ButtonVariantFlat;
-  /** The size of the button. */
-  size?: IconButtonSize;
-  /** The icon variant
-   * @default 'outline'
-   */
-  iconVariant?: IconVariant;
-  /** Icon to render from the icons package. */
-  name: SvgIcon;
-  /** Allows setting the HTML `name` attribute on `button` because we are using `name` for an `SVGIcon` instead. */
-  htmlName?: string;
-  /** Render the button with a loading state. */
-  loading?: boolean;
-  /** Disable any motion effects configured in the configurator */
-  disableEffects?: boolean;
-}
-
-interface UniversalButtonProps extends Pick<SizeStyleProps, 'width'> {
-  /**
-   * The variant of the button
-   * @default is assigned in the configurator
-   */
-  variant?: ButtonVariantFlat;
-
-  /**
-   * The size of the button
-   * @default is assigned in the configurator
-   */
-  size?: ButtonSize;
-  /** The icon variant for start and end icons
-   * @default 'outline'
-   */
-  iconVariant?: IconVariant;
-  /** The icon to render at the start of the button. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */
-  startIcon?: UniversalIconSlot;
-  /** The icon to render at the end of the button. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */
-  endIcon?: UniversalIconSlot;
-  /** Render the button with a loading state. */
-  loading?: boolean;
-  /** Disable any motion effects configured in the configurator */
-  disableEffects?: boolean;
-  /**
-   * When asChild is set to true, the component's child will be cloned and passed
-   * the props and behavior required to make it functional.
-   */
-  asChild?: boolean;
-}
-
-interface UniversalImageProps extends Omit<UniversalBoxProps, 'width' | 'height'>, ImageStyleProps {
-  /** The source URL of the image. */
-  src: string;
-  /**  Provides fallback (alternate) text to display when the image specified by the Image element is not loaded. */
-  alt?: string;
-  /** Width of the image in px. */
-  width?: number;
-  /** Height of the image in pixel. */
-  height?: number;
-}
-
-type ImgElementProps = Omit<
-  React.ImgHTMLAttributes<HTMLImageElement>,
-  'size' | 'color' | 'height' | 'width' | 'alt' | 'src'
->;
-
-interface ImagePropsWithImgProps extends UniversalImageProps, ImgElementProps {}
-
-interface UniversalFormLabelProps extends Omit<UniversalTextProps, 'variant' | 'color'> {
-  /**
-   * Customize tag name.
-   */
-  as?: ElementType;
-
-  /** The style of text. @default 'label2' */
-  variant?: UniversalTextProps['variant'] | 'inherit';
-
-  /** If true, renders a red asterisk to indicate the field is required. */
-  required?: boolean;
-
-  /**
-   * Sets the color of the label text.
-   * @default muted
-   */
-  color?: ForegroundColor | 'inherit';
-
-  /** If true, the required * is styled with an alert color if the input is required. */
-  hasError?: boolean;
-
-  /** Whether to show an asterisk on required labels. @default false */
-  showRequiredAsterisk?: boolean;
-
-  /** The contents of the label. If missing, uses children. **/
-  label?: string | ReactNode | (() => ReactNode);
-}
-
-interface UniversalInputProps extends Pick<UniversalBoxProps, 'width'> {
-  /** Label text to associate with the input. */
-  label?: string | ReactNode | (() => ReactNode);
-  /** If true, the input is disabled and non-interactive. */
-  disabled?: boolean;
-  /** If true, the `label` is displayed as required and the input element is required. */
-  required?: boolean;
-  /** Description or error message */
-  helpText?: string | ReactNode | (() => ReactNode);
-  /**  Helper text icon */
-  helperTextIcon?: UniversalIconSlot;
-  /** If true, the input displays its error state styling, which includes styling the startIcon.  */
-  hasError?: boolean;
-  /**
-   * The size of the input.
-   * @default 'md'
-   */
-  size?: InputSize;
-  /** An icon to be displayed at the start of the input. */
-  startIcon?: UniversalIconSlot;
-  /** An icon to be displayed at the end of the input. */
-  endIcon?: UniversalIconSlot;
-  /** If true, forces reduced motion. Otherwise, respects the user's setting. */
-  reduceMotion?: boolean;
-}
-
-type DividerVariant = 'primary' | 'secondary' | 'tertiary' | 'muted';
-
-interface UniversalDividerProps {
-  /**
-   * Use a pre-defined variant.
-   * @default 'primary'
-   */
-  variant?: DividerVariant;
-
-  /**
-   * Set to true to scale the divider vertically.
-   */
-  vertical?: boolean;
-
-  /** When there are children, where are they placed?
-   * @default 'center'
-   */
-  contentPosition?: 'start' | 'center' | 'end';
-}
-
-interface UniversalLinkProps {
-  /** Text style */
-  textVariant?: TextVariantWithoutEmphasized;
-  /** The color style of the link. */
-  variant?: Extract<ForegroundPaletteAlias, 'primary' | 'secondary' | 'tertiary' | 'on-color'>;
-  /** An icon to be displayed at the start of the component. */
-  startIcon?: UniversalIconSlot;
-  /** An icon to be displayed at the end of the component. */
-  endIcon?: UniversalIconSlot;
-}
-
-type CheckboxValue = boolean | 'indeterminate';
-type CheckboxVariant = 'primary' | 'secondary';
-type CheckboxSize = 'sm' | 'md';
-
-interface UniversalCheckboxProps {
-  /**
-   * Variant of the checkbox.
-   * @default 'primary'
-   */
-  variant?: CheckboxVariant;
-
-  /**
-   * Size of the checkbox.
-   * @default 'md'
-   */
-  size?: CheckboxSize;
-
-  /**
-   * The label of the checkbox. Can be a ReactNode for rich html labels.
-   * Will not be labelled if omitted. User MUST then use `aria-label` attribute,
-   * wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.
-   */
-  label?: string | ReactNode | (() => ReactNode);
-
-  /**
-   * Controlled value of the checkbox. Will be an uncontrolled input if not present.
-   */
-  checked?: CheckboxValue;
-
-  /**
-   * If true, the checkbox displays its error state.
-   */
-  hasError?: boolean;
-
-  /**
-   * Disables animations when true.
-   */
-  reduceMotion?: boolean;
-
-  /**
-   * On which side of the input is the label displayed.
-   * @default 'start'
-   */
-  labelPosition?: 'start' | 'end';
-}
-
-type RadioValue = boolean;
-type RadioVariant = 'primary' | 'secondary';
-type RadioSize = 'sm' | 'md';
-
-interface UniversalRadioProps {
-  /**
-   * Variant of the radio.
-   * @default 'primary'
-   */
-  variant?: RadioVariant;
-
-  /**
-   * Size of the radio.
-   * @default 'md'
-   */
-  size?: RadioSize;
-
-  /**
-   * The label of the radio. Can be a ReactNode for rich html labels.
-   * Will not be labelled if omitted. User MUST then use `aria-label` attribute,
-   * wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.
-   */
-  label?: string | ReactNode | (() => ReactNode);
-
-  /**
-   * The value of the radio.
-   * @default ''
-   */
-  value?: string;
-
-  /**
-   * Whether the radio is checked.
-   */
-  checked?: boolean;
-
-  /**
-   * If true, the radio displays its error state.
-   */
-  hasError?: boolean;
-
-  /**
-   * Disables animations when true.
-   */
-  reduceMotion?: boolean;
-
-  /**
-   * On which side of the input is the label displayed.
-   * @default 'start'
-   */
-  labelPosition?: 'start' | 'end';
-}
-
-interface UniversalRadioGroupProps {
-  /**
-   * The name used for all radio inputs in the group.
-   */
-  name?: string;
-
-  /**
-   * The value of the selected radio item.
-   */
-  value?: string;
-
-  /**
-   * The default value of the selected radio item for uncontrolled radio groups.
-   */
-  defaultValue?: string;
-
-  /** Callback when the user interacts to select a different radio item. */
-  onChange?: (value: string | undefined) => void;
-
-  /**
-   * When asChild is set to true, the component's child will be cloned and passed
-   * the props and behavior required to make it functional.
-   */
-  asChild?: boolean;
-}
-
-type SwitchSize = 'sm' | 'md';
-
-interface UniversalSwitchProps {
-  /**
-   * Size of the switch.
-   * @default 'md'
-   */
-  size?: SwitchSize;
-
-  /**
-   * The label of the switch. Can be a ReactNode for rich html labels.
-   * Will not be labelled if omitted. User MUST then use `aria-label` attribute,
-   * wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.
-   */
-  label?: string | ReactNode | (() => ReactNode);
-
-  /**
-   * Controlled value of the switch. Will be an uncontrolled input if not present.
-   */
-  isOn?: boolean;
-
-  /**
-   * Set the initial value to default when uncontrolled.
-   */
-  defaultIsOn?: boolean;
-
-  /** An icon to be displayed on the on state of the input. */
-  onIcon?: UniversalIconSlot;
-
-  /** An icon to be displayed on the off state of the input. */
-  offIcon?: UniversalIconSlot;
-
-  /**
-   * Disables animations when true.
-   */
-  reduceMotion?: boolean;
-
-  /**
-   * On which side of the input is the label displayed.
-   * @default 'start'
-   */
-  labelPosition?: 'start' | 'end';
-}
-
-type ChipVariant = 'primary' | 'secondary' | 'brand' | 'brand-secondary';
-type ChipSize = 'sm' | 'md';
-
-interface UniversalChipBaseProps extends PropsWithChildren {
-  /**
-   * Controls the foreground and background contrast.
-   * @default "primary"
-   */
-  variant?: ChipVariant;
-
-  /**
-   * Adjusts padding and font size.
-   * @default "md"
-   */
-  size?: ChipSize;
-
-  /**
-   * Optional icon displayed at the start of the chip.
-   */
-  startIcon?: UniversalIconSlot;
-
-  /**
-   * Optional icon displayed at the end of the chip.
-   */
-  endIcon?: UniversalIconSlot;
-
-  /**
-   * Optional minimum width of the chip before label is truncated.
-   */
-  minWidth?: number;
-
-  /**
-   * Maximum width of the chip before label is truncated.
-   */
-  maxWidth?: number;
-
-  /**
-   * Customize tag name.
-   */
-  as?: ElementType;
-
-  /** If true, forces reduced motion. Otherwise, respects the user's setting. */
-  reduceMotion?: boolean;
-
-  /** Whether the chip is disabled. @default false */
-  disabled?: boolean;
-}
-
-interface UniversalChipDismissibleProps
-  extends Omit<UniversalChipBaseProps, 'endIcon' | 'asChild' | 'layerClassNames'> {
-  /**
-   * Handler for dismiss action (e.g., closing the chip).
-   */
-  onDismiss?: () => void;
-
-  /**
-   * Provide an accessible label for the dismiss button.
-   */
-  dismissButtonAriaLabel?: string;
-
-  /**
-   * Custom icon to use for the dismiss button.
-   */
-  dismissIcon?: UniversalIconSlot;
-}
-
-interface UniversalChipToggleProps
-  extends Omit<UniversalChipBaseProps, 'asChild' | 'layerClassNames'> {
-  isToggled?: boolean;
-
-  /**
-   * Handler for toggle action.
-   */
-  onToggle?: (isToggled: boolean) => void;
-}
-
-type UniversalChipButtonProps = Omit<
-  UniversalChipToggleProps,
-  'isToggled' | 'onToggle' | 'asChild'
->;
-
-interface UniversalChipLinkProps extends Omit<UniversalChipBaseProps, 'layerClassNames'> {
-  href?: string;
-}
-
-interface UniversalChipProps
-  extends UniversalChipToggleProps,
-    UniversalChipLinkProps,
-    UniversalChipButtonProps,
-    UniversalChipDismissibleProps {
-  // @deprecated Use `slotProps.anchor` instead
-  linkProps?: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
-}
-
-type BadgeVariant =
-  | 'primary'
-  | 'secondary'
-  | 'brand'
-  | 'brand-secondary'
-  | 'alert'
-  | 'alert-secondary'
-  | 'positive'
-  | 'positive-secondary'
-  | 'warning'
-  | 'warning-secondary'
-  | 'info'
-  | 'info-secondary';
-type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
-
-interface UniversalBadgeProps extends PropsWithChildren {
-  /**
-   * Customize tag name.
-   */
-  as?: ElementType;
-
-  /**
-   * Controls the foreground and background contrast.
-   * @default "primary"
-   */
-  variant?: BadgeVariant;
-
-  /**
-   * Adjusts padding and font size.
-   * @default "md"
-   */
-  size?: BadgeSize;
-
-  /**
-   * CSS color override of the background. Defaults to variant definition.
-   */
-  backgroundColor?: string;
-
-  /**
-   * CSS color override of the text. Defaults to variant definition.
-   */
-  color?: string;
-
-  /**
-   * CSS color override of the icon. Defaults to variant definition.
-   */
-  iconColor?: string;
-
-  /**
-   * CSS color override of the border. Defaults to variant definition.
-   */
-  borderColor?: string;
-
-  /**
-   * Optional icon displayed at the start of the badge.
-   */
-  startIcon?: UniversalIconSlot;
-
-  /**
-   * Optional icon displayed at the end of the badge.
-   */
-  endIcon?: UniversalIconSlot;
-
-  /**
-   * Optional minium width of the badge.
-   */
-  minWidth?: number;
-
-  /**
-   * Maximum width of the badge before label is truncated.
-   */
-  maxWidth?: number | 'full';
-}
-
-type AvatarVariant = 'primary' | 'secondary';
-
-type AvatarAbbreviationStrategy =
-  | 'first'
-  | 'last'
-  | 'firstAndLast'
-  | 'firstTwo'
-  | 'firstThree'
-  | 'firstOfEach'
-  | ((name: string) => string);
-
-/** Props common to all Avatar variants */
-interface UniversalAvatarBaseProps {
-  /** Avatar size key. @default "md" */
-  size?: AvatarSize;
-  /** Avatar variant. @default "primary" */
-  variant?: 'primary' | 'secondary';
-  /** Custom size in pixels */
-  customSize?: number;
-  /** Abbreviation strategy for text variant. @default "firstAndLast" */
-  abbreviationStrategy?: AvatarAbbreviationStrategy;
-  /** Alt text for the image */
-  alt?: string;
-  /** Custom class name */
-  className?: string;
-}
-
-/** Props for Avatar image variant */
-interface UniversalAvatarImageProps extends UniversalAvatarBaseProps {
-  /** Source URL for the image */
-  src: string;
-  /** Optional srcSet for responsive images */
-  srcSet?: string;
-  /**
-   * Additional properties for the img element,
-   * excluding controlled attributes.
-   * @deprecated Use slotProps.image instead
-   */
-  imageProps?: Omit<
-    ImagePropsWithImgProps,
-    'src' | 'srcSet' | 'alt' | 'className' | 'height' | 'width'
-  >;
-  /** Fallback text if image fails to load */
-  fallback?: string;
-}
-
-/** Props for Avatar text variant */
-interface UniversalAvatarTextProps extends UniversalAvatarBaseProps {
-  /** Name for generating initials */
-  name?: string;
-  /** Predefined initials */
-  initials?: string;
-}
-
-/** Props for Avatar icon variant */
-interface UniversalAvatarIconProps extends Omit<UniversalAvatarBaseProps, 'abbreviationStrategy'> {
-  /** Optional icon override */
-  icon?: UniversalIconSlot;
-}
-
-/** Combined Avatar component props */
-type UniversalAvatarProps = UniversalAvatarImageProps;
-
-/* -------------------------------------------------------------------------- */
-/*                                 MENU PROPS                                 */
-
-/* -------------------------------------------------------------------------- */
-
-interface UniversalMenuItemProps
-  extends Omit<UniversalPressableProps, 'asChild'>,
-    PropsWithChildren {
-  /** The icon to show at the end */
-  endIcon?: UniversalIconSlot;
-  /** The icon to show at the start */
-  startIcon?: UniversalIconSlot;
-  /**
-   * The variant of text to use.
-   * @default label2 (label1 if checked)
-   */
-  textVariant?: TextVariant;
-  /** HTML name attribute */
-  name?: string;
-  /** Whether the item is in a checked/active state */
-  active?: boolean;
-  /** Whether the item is disabled */
-  disabled?: boolean;
-
-  /** Slots to customize the rendering */
-  slots?: {
-    // Root is a `AriakitMenuItem`
-    root?: (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      props: HTMLAttributes<any> & {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ref?: Ref<any>;
-      },
-    ) => ReactNode;
-  };
-}
-
-export type {
-  AlwaysPalette,
-  AlwaysPaletteAlias,
-  AlwaysPaletteColor,
-  Animation,
-  AriaAttribute,
-  AvatarAbbreviationStrategy,
-  AvatarShape,
-  AvatarSize,
-  AvatarSizeConfig,
-  AvatarVariant,
-  BackgroundColor,
-  BackgroundPalette,
-  BackgroundPaletteAlias,
-  BackgroundStyleProps,
-  BadgeSize,
-  BadgeVariant,
-  BorderRadius,
-  BorderRadiusConfig,
-  BorderStyleProps,
-  BorderWidth,
-  BorderWidthConfig,
-  Breakpoint,
-  BreakpointsConfig,
-  BreakpointWithBase,
-  ButtonBaseConfig,
-  ButtonClassMap,
-  ButtonClassName,
-  ButtonColorConfig,
-  ButtonColorEffect,
-  ButtonColorEffectConfig,
-  ButtonColorProperty,
-  ButtonColorPropertyConfig,
-  ButtonConfig,
-  ButtonKind,
-  ButtonMotionEffect,
-  ButtonMotionProperty,
-  ButtonMotionPropertyConfig,
-  ButtonPalette,
-  ButtonPaletteColor,
-  ButtonPaletteConfig,
-  ButtonShadowPropertyConfig,
-  ButtonSize,
-  ButtonSizeConfig,
-  ButtonSizeProperty,
-  ButtonSpectrumColor,
-  ButtonState,
-  ButtonStateConfig,
-  ButtonStateEffectConfig,
-  ButtonVariant,
-  ButtonVariantConfig,
-  ButtonVariantFlat,
-  CheckboxSize,
-  CheckboxValue,
-  CheckboxVariant,
-  ChipSize,
-  ChipVariant,
-  ColorMode,
-  ColorModeConfig,
-  ColorModeForApp,
-  ColorsConfig,
-  ConfigurableDropShadowValues,
-  ConfigurableInsetShadowValues,
-  CustomSizingStyleProps,
-  DataAttribute,
-  Display,
-  DividerVariant,
-  Flex,
-  FlexAlignContent,
-  FlexAlignItems,
-  FlexAlignSelf,
-  FlexBasis,
-  FlexDirection,
-  FlexGrow,
-  FlexJustifyContent,
-  FlexShrink,
-  FlexStyleProps,
-  FlexWrap,
-  FontAlias,
-  FontConfig,
-  FontCssVar,
-  FontFamilyCDNUrl,
-  FontFamilyConfig,
-  FontID,
-  FontSize,
-  FontSizeConfig,
-  FontSlantConfig,
-  FontType,
-  FontWeightConfig,
-  FontWeightDescriptive,
-  FontWeightNumeric,
-  FontWidthConfig,
-  ForegroundColor,
-  ForegroundPalette,
-  ForegroundPaletteAlias,
-  GlobalDefaultsConfig,
-  HighContrastMode,
-  Hue,
-  HueStep,
-  IconButtonClassMap,
-  IconButtonClassName,
-  IconButtonConfig,
-  IconButtonDefaultsConfig,
-  IconButtonSize,
-  IconPropsWithSVGProps,
-  IconSize,
-  IconSizeConfig,
-  IconSlotRenderProps,
-  IconVariant,
-  ImagePropsWithImgProps,
-  ImageStyleProps,
-  InputSize,
-  LayoutStyleProps,
-  LetterSpacing,
-  LineClampAlias,
-  LineColor,
-  LineHeight,
-  LineHeightConfig,
-  LinePalette,
-  LinePaletteAlias,
-  Modes,
-  MotionConfig,
-  MotionCssVar,
-  MotionSpringConfig,
-  MotionSpringConfigOptions,
-  MotionVariant,
-  MotionVariantSpeed,
-  MotionVariantValues,
-  OpacityStep,
-  Overflow,
-  Palette,
-  PaletteConfig,
-  PaletteType,
-  PaletteValue,
-  Percentage,
-  PercentageUnit,
-  PixelsUnit,
-  PlatformMode,
-  Position,
-  PropertyToPaletteAliasMap,
-  RadioSize,
-  RadioValue,
-  RadioVariant,
-  RegionMode,
-  RemsUnit,
-  ScaleConfig,
-  ScaleEffectMap,
-  ScaleMode,
-  ScaleModeConfig,
-  ScaleModeForApp,
-  ShadowColor,
-  ShadowColorConfig,
-  ShadowConfig,
-  ShadowOffset,
-  ShadowOpacity,
-  ShadowPalette,
-  ShadowPaletteAlias,
-  ShadowPreset,
-  ShadowSpreadRadius,
-  ShadowStyleProps,
-  ShadowType,
-  ShadowTypeConfig,
-  ShadowVariant,
-  ShadowVariantConfig,
-  ShadowVariantInvert,
-  ShadowVariantWithInvert,
-  SharedPaletteAlias,
-  SpacingAlias,
-  SpacingConfig,
-  SpacingStyleProps,
-  SpectrumColor,
-  SpectrumConfig,
-  StateStyleProps,
-  StyleProps,
-  SwitchSize,
-  TextDecorationLine,
-  TextProperty,
-  TextStyleProps,
-  TextTransform,
-  TextTransformConfig,
-  TextVariant,
-  TextVariantTypography,
-  TextVariantUi,
-  TextVariantWithoutEmphasized,
-  TransitionDelay,
-  TransitionDuration,
-  TransitionTiming,
-  TShirtSize,
-  TShirtSizeCommon,
-  TypographyConfig,
-  TypographyResponsiveProperty,
-  TypographyStyle,
-  TypographyStyleProperty,
-  TypographyUnitValue,
-  UdsCssVar,
-  UnitlessUnit,
-  UniversalAvatarIconProps,
-  UniversalAvatarImageProps,
-  UniversalAvatarProps,
-  UniversalAvatarTextProps,
-  UniversalBadgeProps,
-  UniversalBoxProps,
-  UniversalButtonProps,
-  UniversalCheckboxProps,
-  UniversalChipBaseProps,
-  UniversalChipButtonProps,
-  UniversalChipDismissibleProps,
-  UniversalChipLinkProps,
-  UniversalChipProps,
-  UniversalChipToggleProps,
-  UniversalDividerProps,
-  UniversalFormLabelProps,
-  UniversalIconButtonProps,
-  UniversalIconProps,
-  UniversalIconSlot,
-  UniversalImageProps,
-  UniversalInputProps,
-  UniversalLinkProps,
-  UniversalMenuItemProps,
-  UniversalPressableProps,
-  UniversalRadioGroupProps,
-  UniversalRadioProps,
-  UniversalStackProps,
-  UniversalSwitchProps,
-  UniversalTextProps,
-  UniversalTokensConfig,
-  UniversalTokensConfigAuto,
-};