@yahoo/uds 3.59.0-beta.1 → 3.59.0-beta.2

package/src/styles/variants.ts

@@ -1,1351 +0,0 @@
-import { autoVariants } from '../../generated/autoVariants';
-import {
-  DARK_COLOR_MODE_CLASSNAME,
-  LARGE_SCALE_MODE_CLASSNAME,
-  LIGHT_COLOR_MODE_CLASSNAME,
-  MEDIUM_SCALE_MODE_CLASSNAME,
-  SMALL_SCALE_MODE_CLASSNAME,
-  XLARGE_SCALE_MODE_CLASSNAME,
-  XSMALL_SCALE_MODE_CLASSNAME,
-  XXLARGE_SCALE_MODE_CLASSNAME,
-  XXXLARGE_SCALE_MODE_CLASSNAME,
-} from '../tokens/consts/cssTokens';
-import type { StylePropsVariants } from './stylerTypes';
-
-export const variants = {
-  color: {
-    accent: 'text-accent',
-    alert: 'text-alert',
-    'alert-secondary': 'text-alert-secondary',
-    black: 'text-black',
-    brand: 'text-brand',
-    'brand-secondary': 'text-brand-secondary',
-    positive: 'text-positive',
-    'positive-secondary': 'text-positive-secondary',
-    warning: 'text-warning',
-    'warning-secondary': 'text-warning-secondary',
-    info: 'text-info',
-    'info-secondary': 'text-info-secondary',
-    white: 'text-white',
-    transparent: 'text-transparent',
-    muted: 'text-muted',
-    'on-color': 'text-on-color',
-    primary: 'text-primary',
-    secondary: 'text-secondary',
-    tertiary: 'text-tertiary',
-    current: 'text-current',
-  },
-  placeholderColor: {
-    accent: 'placeholder:text-accent',
-    alert: 'placeholder:text-alert',
-    'alert-secondary': 'placeholder:text-alert-secondary',
-    black: 'placeholder:text-black',
-    brand: 'placeholder:text-brand',
-    'brand-secondary': 'placeholder:text-brand-secondary',
-    positive: 'placeholder:text-positive',
-    'positive-secondary': 'placeholder:text-positive-secondary',
-    warning: 'placeholder:text-warning',
-    'warning-secondary': 'placeholder:text-warning-secondary',
-    info: 'placeholder:text-info',
-    'info-secondary': 'placeholder:text-info-secondary',
-    white: 'placeholder:text-white',
-    transparent: 'placeholder:text-transparent',
-    muted: 'placeholder:text-muted',
-    'on-color': 'placeholder:text-on-color',
-    primary: 'placeholder:text-primary',
-    secondary: 'placeholder:text-secondary',
-    tertiary: 'placeholder:text-tertiary',
-    current: 'placeholder:text-current',
-  },
-  fontFamily: {
-    sans: 'font-sans',
-    'sans-alt': 'font-sans-alt',
-    serif: 'font-serif',
-    'serif-alt': 'font-serif-alt',
-    mono: 'font-mono',
-    display1: 'font-display1',
-    display2: 'font-display2',
-    display3: 'font-display3',
-    title1: 'font-title1',
-    title2: 'font-title2',
-    title3: 'font-title3',
-    title4: 'font-title4',
-    headline1: 'font-headline1',
-    body1: 'font-body1',
-    label1: 'font-label1',
-    label2: 'font-label2',
-    label3: 'font-label3',
-    label4: 'font-label4',
-    caption1: 'font-caption1',
-    caption2: 'font-caption2',
-    legal1: 'font-legal1',
-    'display1/emphasized': 'font-display1-emphasized',
-    'display2/emphasized': 'font-display2-emphasized',
-    'display3/emphasized': 'font-display3-emphasized',
-    'title1/emphasized': 'font-title1-emphasized',
-    'title2/emphasized': 'font-title2-emphasized',
-    'title3/emphasized': 'font-title3-emphasized',
-    'title4/emphasized': 'font-title4-emphasized',
-    'headline1/emphasized': 'font-headline1-emphasized',
-    'body1/emphasized': 'font-body1-emphasized',
-    'label1/emphasized': 'font-label1-emphasized',
-    'label2/emphasized': 'font-label2-emphasized',
-    'label3/emphasized': 'font-label3-emphasized',
-    'label4/emphasized': 'font-label4-emphasized',
-    'caption1/emphasized': 'font-caption1-emphasized',
-    'caption2/emphasized': 'font-caption2-emphasized',
-    'legal1/emphasized': 'font-legal1-emphasized',
-    ui1: 'font-ui1',
-    ui2: 'font-ui2',
-    ui3: 'font-ui3',
-    ui4: 'font-ui4',
-    ui5: 'font-ui5',
-    ui6: 'font-ui6',
-    'ui1/emphasized': 'font-ui1-emphasized',
-    'ui2/emphasized': 'font-ui2-emphasized',
-    'ui3/emphasized': 'font-ui3-emphasized',
-    'ui4/emphasized': 'font-ui4-emphasized',
-    'ui5/emphasized': 'font-ui5-emphasized',
-    'ui6/emphasized': 'font-ui6-emphasized',
-  },
-  fontSize: {
-    display1: 'font-size-display1',
-    display2: 'font-size-display2',
-    display3: 'font-size-display3',
-    title1: 'font-size-title1',
-    title2: 'font-size-title2',
-    title3: 'font-size-title3',
-    title4: 'font-size-title4',
-    headline1: 'font-size-headline1',
-    body1: 'font-size-body1',
-    label1: 'font-size-label1',
-    label2: 'font-size-label2',
-    label3: 'font-size-label3',
-    label4: 'font-size-label4',
-    caption1: 'font-size-caption1',
-    caption2: 'font-size-caption2',
-    legal1: 'font-size-legal1',
-    'display1/emphasized': 'font-size-display1-emphasized',
-    'display2/emphasized': 'font-size-display2-emphasized',
-    'display3/emphasized': 'font-size-display3-emphasized',
-    'title1/emphasized': 'font-size-title1-emphasized',
-    'title2/emphasized': 'font-size-title2-emphasized',
-    'title3/emphasized': 'font-size-title3-emphasized',
-    'title4/emphasized': 'font-size-title4-emphasized',
-    'headline1/emphasized': 'font-size-headline1-emphasized',
-    'body1/emphasized': 'font-size-body1-emphasized',
-    'label1/emphasized': 'font-size-label1-emphasized',
-    'label2/emphasized': 'font-size-label2-emphasized',
-    'label3/emphasized': 'font-size-label3-emphasized',
-    'label4/emphasized': 'font-size-label4-emphasized',
-    'caption1/emphasized': 'font-size-caption1-emphasized',
-    'caption2/emphasized': 'font-size-caption2-emphasized',
-    'legal1/emphasized': 'font-size-legal1-emphasized',
-    ui1: 'font-size-ui1',
-    ui2: 'font-size-ui2',
-    ui3: 'font-size-ui3',
-    ui4: 'font-size-ui4',
-    ui5: 'font-size-ui5',
-    ui6: 'font-size-ui6',
-    'ui1/emphasized': 'font-size-ui1-emphasized',
-    'ui2/emphasized': 'font-size-ui2-emphasized',
-    'ui3/emphasized': 'font-size-ui3-emphasized',
-    'ui4/emphasized': 'font-size-ui4-emphasized',
-    'ui5/emphasized': 'font-size-ui5-emphasized',
-    'ui6/emphasized': 'font-size-ui6-emphasized',
-  },
-  fontWeight: {
-    thin: 'font-weight-thin',
-    extralight: 'font-weight-extralight',
-    light: 'font-weight-light',
-    regular: 'font-weight-regular',
-    medium: 'font-weight-medium',
-    semibold: 'font-weight-semibold',
-    bold: 'font-weight-bold',
-    extrabold: 'font-weight-extrabold',
-    black: 'font-weight-black',
-    display1: 'font-weight-display1',
-    display2: 'font-weight-display2',
-    display3: 'font-weight-display3',
-    title1: 'font-weight-title1',
-    title2: 'font-weight-title2',
-    title3: 'font-weight-title3',
-    title4: 'font-weight-title4',
-    headline1: 'font-weight-headline1',
-    body1: 'font-weight-body1',
-    label1: 'font-weight-label1',
-    label2: 'font-weight-label2',
-    label3: 'font-weight-label3',
-    label4: 'font-weight-label4',
-    caption1: 'font-weight-caption1',
-    caption2: 'font-weight-caption2',
-    legal1: 'font-weight-legal1',
-    'display1/emphasized': 'font-weight-display1-emphasized',
-    'display2/emphasized': 'font-weight-display2-emphasized',
-    'display3/emphasized': 'font-weight-display3-emphasized',
-    'title1/emphasized': 'font-weight-title1-emphasized',
-    'title2/emphasized': 'font-weight-title2-emphasized',
-    'title3/emphasized': 'font-weight-title3-emphasized',
-    'title4/emphasized': 'font-weight-title4-emphasized',
-    'headline1/emphasized': 'font-weight-headline1-emphasized',
-    'body1/emphasized': 'font-weight-body1-emphasized',
-    'label1/emphasized': 'font-weight-label1-emphasized',
-    'label2/emphasized': 'font-weight-label2-emphasized',
-    'label3/emphasized': 'font-weight-label3-emphasized',
-    'label4/emphasized': 'font-weight-label4-emphasized',
-    'caption1/emphasized': 'font-weight-caption1-emphasized',
-    'caption2/emphasized': 'font-weight-caption2-emphasized',
-    'legal1/emphasized': 'font-weight-legal1-emphasized',
-    ui1: 'font-weight-ui1',
-    ui2: 'font-weight-ui2',
-    ui3: 'font-weight-ui3',
-    ui4: 'font-weight-ui4',
-    ui5: 'font-weight-ui5',
-    ui6: 'font-weight-ui6',
-    'ui1/emphasized': 'font-weight-ui1-emphasized',
-    'ui2/emphasized': 'font-weight-ui2-emphasized',
-    'ui3/emphasized': 'font-weight-ui3-emphasized',
-    'ui4/emphasized': 'font-weight-ui4-emphasized',
-    'ui5/emphasized': 'font-weight-ui5-emphasized',
-    'ui6/emphasized': 'font-weight-ui6-emphasized',
-  },
-  lineHeight: {
-    display1: 'leading-display1',
-    display2: 'leading-display2',
-    display3: 'leading-display3',
-    title1: 'leading-title1',
-    title2: 'leading-title2',
-    title3: 'leading-title3',
-    title4: 'leading-title4',
-    headline1: 'leading-headline1',
-    body1: 'leading-body1',
-    label1: 'leading-label1',
-    label2: 'leading-label2',
-    label3: 'leading-label3',
-    label4: 'leading-label4',
-    caption1: 'leading-caption1',
-    caption2: 'leading-caption2',
-    legal1: 'leading-legal1',
-    'display1/emphasized': 'leading-display1-emphasized',
-    'display2/emphasized': 'leading-display2-emphasized',
-    'display3/emphasized': 'leading-display3-emphasized',
-    'title1/emphasized': 'leading-title1-emphasized',
-    'title2/emphasized': 'leading-title2-emphasized',
-    'title3/emphasized': 'leading-title3-emphasized',
-    'title4/emphasized': 'leading-title4-emphasized',
-    'headline1/emphasized': 'leading-headline1-emphasized',
-    'body1/emphasized': 'leading-body1-emphasized',
-    'label1/emphasized': 'leading-label1-emphasized',
-    'label2/emphasized': 'leading-label2-emphasized',
-    'label3/emphasized': 'leading-label3-emphasized',
-    'label4/emphasized': 'leading-label4-emphasized',
-    'caption1/emphasized': 'leading-caption1-emphasized',
-    'caption2/emphasized': 'leading-caption2-emphasized',
-    'legal1/emphasized': 'leading-legal1-emphasized',
-    ui1: 'leading-ui1',
-    ui2: 'leading-ui2',
-    ui3: 'leading-ui3',
-    ui4: 'leading-ui4',
-    ui5: 'leading-ui5',
-    ui6: 'leading-ui6',
-    'ui1/emphasized': 'leading-ui1-emphasized',
-    'ui2/emphasized': 'leading-ui2-emphasized',
-    'ui3/emphasized': 'leading-ui3-emphasized',
-    'ui4/emphasized': 'leading-ui4-emphasized',
-    'ui5/emphasized': 'leading-ui5-emphasized',
-    'ui6/emphasized': 'leading-ui6-emphasized',
-  },
-  textAlign: {
-    center: 'text-center',
-    justify: 'text-justify',
-    start: 'text-start',
-    end: 'text-end',
-  },
-  textTransform: {
-    display1: 'case-display1',
-    display2: 'case-display2',
-    display3: 'case-display3',
-    title1: 'case-title1',
-    title2: 'case-title2',
-    title3: 'case-title3',
-    title4: 'case-title4',
-    headline1: 'case-headline1',
-    body1: 'case-body1',
-    label1: 'case-label1',
-    label2: 'case-label2',
-    label3: 'case-label3',
-    label4: 'case-label4',
-    caption1: 'case-caption1',
-    caption2: 'case-caption2',
-    legal1: 'case-legal1',
-    'display1/emphasized': 'case-display1-emphasized',
-    'display2/emphasized': 'case-display2-emphasized',
-    'display3/emphasized': 'case-display3-emphasized',
-    'title1/emphasized': 'case-title1-emphasized',
-    'title2/emphasized': 'case-title2-emphasized',
-    'title3/emphasized': 'case-title3-emphasized',
-    'title4/emphasized': 'case-title4-emphasized',
-    'headline1/emphasized': 'case-headline1-emphasized',
-    'body1/emphasized': 'case-body1-emphasized',
-    'label1/emphasized': 'case-label1-emphasized',
-    'label2/emphasized': 'case-label2-emphasized',
-    'label3/emphasized': 'case-label3-emphasized',
-    'label4/emphasized': 'case-label4-emphasized',
-    'caption1/emphasized': 'case-caption1-emphasized',
-    'caption2/emphasized': 'case-caption2-emphasized',
-    'legal1/emphasized': 'case-legal1-emphasized',
-    ui1: 'case-ui1',
-    ui2: 'case-ui2',
-    ui3: 'case-ui3',
-    ui4: 'case-ui4',
-    ui5: 'case-ui5',
-    ui6: 'case-ui6',
-    'ui1/emphasized': 'case-ui1-emphasized',
-    'ui2/emphasized': 'case-ui2-emphasized',
-    'ui3/emphasized': 'case-ui3-emphasized',
-    'ui4/emphasized': 'case-ui4-emphasized',
-    'ui5/emphasized': 'case-ui5-emphasized',
-    'ui6/emphasized': 'case-ui6-emphasized',
-    none: 'normal-case',
-    uppercase: 'uppercase',
-    lowercase: 'lowercase',
-    capitalize: 'capitalize',
-  },
-  spacing: {
-    '0': 'p-0',
-    px: 'p-px',
-    '0.5': 'p-0.5',
-    '1': 'p-1',
-    '1.5': 'p-1.5',
-    '2': 'p-2',
-    '2.5': 'p-2.5',
-    '3': 'p-3',
-    '3.5': 'p-3.5',
-    '4': 'p-4',
-    '4.5': 'p-4.5',
-    '5': 'p-5',
-    '5.5': 'p-5.5',
-    '6': 'p-6',
-    '7': 'p-7',
-    '8': 'p-8',
-    '9': 'p-9',
-    '10': 'p-10',
-    '11': 'p-11',
-    '12': 'p-12',
-    '14': 'p-14',
-    '16': 'p-16',
-    '20': 'p-20',
-    '24': 'p-24',
-    '28': 'p-28',
-    '32': 'p-32',
-    '36': 'p-36',
-    '40': 'p-40',
-    '44': 'p-44',
-    '48': 'p-48',
-    '52': 'p-52',
-    '56': 'p-56',
-    '60': 'p-60',
-    '64': 'p-64',
-    '72': 'p-72',
-    '80': 'p-80',
-    '96': 'p-96',
-  },
-  spacingHorizontal: {
-    '0': 'px-0',
-    px: 'px-px',
-    '0.5': 'px-0.5',
-    '1': 'px-1',
-    '1.5': 'px-1.5',
-    '2': 'px-2',
-    '2.5': 'px-2.5',
-    '3': 'px-3',
-    '3.5': 'px-3.5',
-    '4': 'px-4',
-    '4.5': 'px-4.5',
-    '5': 'px-5',
-    '5.5': 'px-5.5',
-    '6': 'px-6',
-    '7': 'px-7',
-    '8': 'px-8',
-    '9': 'px-9',
-    '10': 'px-10',
-    '11': 'px-11',
-    '12': 'px-12',
-    '14': 'px-14',
-    '16': 'px-16',
-    '20': 'px-20',
-    '24': 'px-24',
-    '28': 'px-28',
-    '32': 'px-32',
-    '36': 'px-36',
-    '40': 'px-40',
-    '44': 'px-44',
-    '48': 'px-48',
-    '52': 'px-52',
-    '56': 'px-56',
-    '60': 'px-60',
-    '64': 'px-64',
-    '72': 'px-72',
-    '80': 'px-80',
-    '96': 'px-96',
-  },
-  spacingVertical: {
-    '0': 'py-0',
-    px: 'py-px',
-    '0.5': 'py-0.5',
-    '1': 'py-1',
-    '1.5': 'py-1.5',
-    '2': 'py-2',
-    '2.5': 'py-2.5',
-    '3': 'py-3',
-    '3.5': 'py-3.5',
-    '4': 'py-4',
-    '4.5': 'py-4.5',
-    '5': 'py-5',
-    '5.5': 'py-5.5',
-    '6': 'py-6',
-    '7': 'py-7',
-    '8': 'py-8',
-    '9': 'py-9',
-    '10': 'py-10',
-    '11': 'py-11',
-    '12': 'py-12',
-    '14': 'py-14',
-    '16': 'py-16',
-    '20': 'py-20',
-    '24': 'py-24',
-    '28': 'py-28',
-    '32': 'py-32',
-    '36': 'py-36',
-    '40': 'py-40',
-    '44': 'py-44',
-    '48': 'py-48',
-    '52': 'py-52',
-    '56': 'py-56',
-    '60': 'py-60',
-    '64': 'py-64',
-    '72': 'py-72',
-    '80': 'py-80',
-    '96': 'py-96',
-  },
-  spacingBottom: {
-    '0': 'pb-0',
-    px: 'pb-px',
-    '0.5': 'pb-0.5',
-    '1': 'pb-1',
-    '1.5': 'pb-1.5',
-    '2': 'pb-2',
-    '2.5': 'pb-2.5',
-    '3': 'pb-3',
-    '3.5': 'pb-3.5',
-    '4': 'pb-4',
-    '4.5': 'pb-4.5',
-    '5': 'pb-5',
-    '5.5': 'pb-5.5',
-    '6': 'pb-6',
-    '7': 'pb-7',
-    '8': 'pb-8',
-    '9': 'pb-9',
-    '10': 'pb-10',
-    '11': 'pb-11',
-    '12': 'pb-12',
-    '14': 'pb-14',
-    '16': 'pb-16',
-    '20': 'pb-20',
-    '24': 'pb-24',
-    '28': 'pb-28',
-    '32': 'pb-32',
-    '36': 'pb-36',
-    '40': 'pb-40',
-    '44': 'pb-44',
-    '48': 'pb-48',
-    '52': 'pb-52',
-    '56': 'pb-56',
-    '60': 'pb-60',
-    '64': 'pb-64',
-    '72': 'pb-72',
-    '80': 'pb-80',
-    '96': 'pb-96',
-  },
-  spacingEnd: {
-    '0': 'pe-0',
-    px: 'pe-px',
-    '0.5': 'pe-0.5',
-    '1': 'pe-1',
-    '1.5': 'pe-1.5',
-    '2': 'pe-2',
-    '2.5': 'pe-2.5',
-    '3': 'pe-3',
-    '3.5': 'pe-3.5',
-    '4': 'pe-4',
-    '4.5': 'pe-4.5',
-    '5': 'pe-5',
-    '5.5': 'pe-5.5',
-    '6': 'pe-6',
-    '7': 'pe-7',
-    '8': 'pe-8',
-    '9': 'pe-9',
-    '10': 'pe-10',
-    '11': 'pe-11',
-    '12': 'pe-12',
-    '14': 'pe-14',
-    '16': 'pe-16',
-    '20': 'pe-20',
-    '24': 'pe-24',
-    '28': 'pe-28',
-    '32': 'pe-32',
-    '36': 'pe-36',
-    '40': 'pe-40',
-    '44': 'pe-44',
-    '48': 'pe-48',
-    '52': 'pe-52',
-    '56': 'pe-56',
-    '60': 'pe-60',
-    '64': 'pe-64',
-    '72': 'pe-72',
-    '80': 'pe-80',
-    '96': 'pe-96',
-  },
-  spacingStart: {
-    '0': 'ps-0',
-    px: 'ps-px',
-    '0.5': 'ps-0.5',
-    '1': 'ps-1',
-    '1.5': 'ps-1.5',
-    '2': 'ps-2',
-    '2.5': 'ps-2.5',
-    '3': 'ps-3',
-    '3.5': 'ps-3.5',
-    '4': 'ps-4',
-    '4.5': 'ps-4.5',
-    '5': 'ps-5',
-    '5.5': 'ps-5.5',
-    '6': 'ps-6',
-    '7': 'ps-7',
-    '8': 'ps-8',
-    '9': 'ps-9',
-    '10': 'ps-10',
-    '11': 'ps-11',
-    '12': 'ps-12',
-    '14': 'ps-14',
-    '16': 'ps-16',
-    '20': 'ps-20',
-    '24': 'ps-24',
-    '28': 'ps-28',
-    '32': 'ps-32',
-    '36': 'ps-36',
-    '40': 'ps-40',
-    '44': 'ps-44',
-    '48': 'ps-48',
-    '52': 'ps-52',
-    '56': 'ps-56',
-    '60': 'ps-60',
-    '64': 'ps-64',
-    '72': 'ps-72',
-    '80': 'ps-80',
-    '96': 'ps-96',
-  },
-  spacingTop: {
-    '0': 'pt-0',
-    px: 'pt-px',
-    '0.5': 'pt-0.5',
-    '1': 'pt-1',
-    '1.5': 'pt-1.5',
-    '2': 'pt-2',
-    '2.5': 'pt-2.5',
-    '3': 'pt-3',
-    '3.5': 'pt-3.5',
-    '4': 'pt-4',
-    '4.5': 'pt-4.5',
-    '5': 'pt-5',
-    '5.5': 'pt-5.5',
-    '6': 'pt-6',
-    '7': 'pt-7',
-    '8': 'pt-8',
-    '9': 'pt-9',
-    '10': 'pt-10',
-    '11': 'pt-11',
-    '12': 'pt-12',
-    '14': 'pt-14',
-    '16': 'pt-16',
-    '20': 'pt-20',
-    '24': 'pt-24',
-    '28': 'pt-28',
-    '32': 'pt-32',
-    '36': 'pt-36',
-    '40': 'pt-40',
-    '44': 'pt-44',
-    '48': 'pt-48',
-    '52': 'pt-52',
-    '56': 'pt-56',
-    '60': 'pt-60',
-    '64': 'pt-64',
-    '72': 'pt-72',
-    '80': 'pt-80',
-    '96': 'pt-96',
-  },
-  offset: {
-    '0': '-m-0',
-    px: '-m-px',
-    '0.5': '-m-0.5',
-    '1': '-m-1',
-    '1.5': '-m-1.5',
-    '2': '-m-2',
-    '2.5': '-m-2.5',
-    '3': '-m-3',
-    '3.5': '-m-3.5',
-    '4': '-m-4',
-    '4.5': '-m-4.5',
-    '5': '-m-5',
-    '5.5': '-m-5.5',
-    '6': '-m-6',
-    '7': '-m-7',
-    '8': '-m-8',
-    '9': '-m-9',
-    '10': '-m-10',
-    '11': '-m-11',
-    '12': '-m-12',
-    '14': '-m-14',
-    '16': '-m-16',
-    '20': '-m-20',
-    '24': '-m-24',
-    '28': '-m-28',
-    '32': '-m-32',
-    '36': '-m-36',
-    '40': '-m-40',
-    '44': '-m-44',
-    '48': '-m-48',
-    '52': '-m-52',
-    '56': '-m-56',
-    '60': '-m-60',
-    '64': '-m-64',
-    '72': '-m-72',
-    '80': '-m-80',
-    '96': '-m-96',
-  },
-  offsetVertical: {
-    '0': '-my-0',
-    px: '-my-px',
-    '0.5': '-my-0.5',
-    '1': '-my-1',
-    '1.5': '-my-1.5',
-    '2': '-my-2',
-    '2.5': '-my-2.5',
-    '3': '-my-3',
-    '3.5': '-my-3.5',
-    '4': '-my-4',
-    '4.5': '-my-4.5',
-    '5': '-my-5',
-    '5.5': '-my-5.5',
-    '6': '-my-6',
-    '7': '-my-7',
-    '8': '-my-8',
-    '9': '-my-9',
-    '10': '-my-10',
-    '11': '-my-11',
-    '12': '-my-12',
-    '14': '-my-14',
-    '16': '-my-16',
-    '20': '-my-20',
-    '24': '-my-24',
-    '28': '-my-28',
-    '32': '-my-32',
-    '36': '-my-36',
-    '40': '-my-40',
-    '44': '-my-44',
-    '48': '-my-48',
-    '52': '-my-52',
-    '56': '-my-56',
-    '60': '-my-60',
-    '64': '-my-64',
-    '72': '-my-72',
-    '80': '-my-80',
-    '96': '-my-96',
-  },
-  offsetHorizontal: {
-    '0': '-mx-0',
-    px: '-mx-px',
-    '0.5': '-mx-0.5',
-    '1': '-mx-1',
-    '1.5': '-mx-1.5',
-    '2': '-mx-2',
-    '2.5': '-mx-2.5',
-    '3': '-mx-3',
-    '3.5': '-mx-3.5',
-    '4': '-mx-4',
-    '4.5': '-mx-4.5',
-    '5': '-mx-5',
-    '5.5': '-mx-5.5',
-    '6': '-mx-6',
-    '7': '-mx-7',
-    '8': '-mx-8',
-    '9': '-mx-9',
-    '10': '-mx-10',
-    '11': '-mx-11',
-    '12': '-mx-12',
-    '14': '-mx-14',
-    '16': '-mx-16',
-    '20': '-mx-20',
-    '24': '-mx-24',
-    '28': '-mx-28',
-    '32': '-mx-32',
-    '36': '-mx-36',
-    '40': '-mx-40',
-    '44': '-mx-44',
-    '48': '-mx-48',
-    '52': '-mx-52',
-    '56': '-mx-56',
-    '60': '-mx-60',
-    '64': '-mx-64',
-    '72': '-mx-72',
-    '80': '-mx-80',
-    '96': '-mx-96',
-  },
-  offsetBottom: {
-    '0': '-mb-0',
-    px: '-mb-px',
-    '0.5': '-mb-0.5',
-    '1': '-mb-1',
-    '1.5': '-mb-1.5',
-    '2': '-mb-2',
-    '2.5': '-mb-2.5',
-    '3': '-mb-3',
-    '3.5': '-mb-3.5',
-    '4': '-mb-4',
-    '4.5': '-mb-4.5',
-    '5': '-mb-5',
-    '5.5': '-mb-5.5',
-    '6': '-mb-6',
-    '7': '-mb-7',
-    '8': '-mb-8',
-    '9': '-mb-9',
-    '10': '-mb-10',
-    '11': '-mb-11',
-    '12': '-mb-12',
-    '14': '-mb-14',
-    '16': '-mb-16',
-    '20': '-mb-20',
-    '24': '-mb-24',
-    '28': '-mb-28',
-    '32': '-mb-32',
-    '36': '-mb-36',
-    '40': '-mb-40',
-    '44': '-mb-44',
-    '48': '-mb-48',
-    '52': '-mb-52',
-    '56': '-mb-56',
-    '60': '-mb-60',
-    '64': '-mb-64',
-    '72': '-mb-72',
-    '80': '-mb-80',
-    '96': '-mb-96',
-  },
-  offsetEnd: {
-    '0': '-me-0',
-    px: '-me-px',
-    '0.5': '-me-0.5',
-    '1': '-me-1',
-    '1.5': '-me-1.5',
-    '2': '-me-2',
-    '2.5': '-me-2.5',
-    '3': '-me-3',
-    '3.5': '-me-3.5',
-    '4': '-me-4',
-    '4.5': '-me-4.5',
-    '5': '-me-5',
-    '5.5': '-me-5.5',
-    '6': '-me-6',
-    '7': '-me-7',
-    '8': '-me-8',
-    '9': '-me-9',
-    '10': '-me-10',
-    '11': '-me-11',
-    '12': '-me-12',
-    '14': '-me-14',
-    '16': '-me-16',
-    '20': '-me-20',
-    '24': '-me-24',
-    '28': '-me-28',
-    '32': '-me-32',
-    '36': '-me-36',
-    '40': '-me-40',
-    '44': '-me-44',
-    '48': '-me-48',
-    '52': '-me-52',
-    '56': '-me-56',
-    '60': '-me-60',
-    '64': '-me-64',
-    '72': '-me-72',
-    '80': '-me-80',
-    '96': '-me-96',
-  },
-  offsetStart: {
-    '0': '-ms-0',
-    px: '-ms-px',
-    '0.5': '-ms-0.5',
-    '1': '-ms-1',
-    '1.5': '-ms-1.5',
-    '2': '-ms-2',
-    '2.5': '-ms-2.5',
-    '3': '-ms-3',
-    '3.5': '-ms-3.5',
-    '4': '-ms-4',
-    '4.5': '-ms-4.5',
-    '5': '-ms-5',
-    '5.5': '-ms-5.5',
-    '6': '-ms-6',
-    '7': '-ms-7',
-    '8': '-ms-8',
-    '9': '-ms-9',
-    '10': '-ms-10',
-    '11': '-ms-11',
-    '12': '-ms-12',
-    '14': '-ms-14',
-    '16': '-ms-16',
-    '20': '-ms-20',
-    '24': '-ms-24',
-    '28': '-ms-28',
-    '32': '-ms-32',
-    '36': '-ms-36',
-    '40': '-ms-40',
-    '44': '-ms-44',
-    '48': '-ms-48',
-    '52': '-ms-52',
-    '56': '-ms-56',
-    '60': '-ms-60',
-    '64': '-ms-64',
-    '72': '-ms-72',
-    '80': '-ms-80',
-    '96': '-ms-96',
-  },
-  offsetTop: {
-    '0': '-mt-0',
-    px: '-mt-px',
-    '0.5': '-mt-0.5',
-    '1': '-mt-1',
-    '1.5': '-mt-1.5',
-    '2': '-mt-2',
-    '2.5': '-mt-2.5',
-    '3': '-mt-3',
-    '3.5': '-mt-3.5',
-    '4': '-mt-4',
-    '4.5': '-mt-4.5',
-    '5': '-mt-5',
-    '5.5': '-mt-5.5',
-    '6': '-mt-6',
-    '7': '-mt-7',
-    '8': '-mt-8',
-    '9': '-mt-9',
-    '10': '-mt-10',
-    '11': '-mt-11',
-    '12': '-mt-12',
-    '14': '-mt-14',
-    '16': '-mt-16',
-    '20': '-mt-20',
-    '24': '-mt-24',
-    '28': '-mt-28',
-    '32': '-mt-32',
-    '36': '-mt-36',
-    '40': '-mt-40',
-    '44': '-mt-44',
-    '48': '-mt-48',
-    '52': '-mt-52',
-    '56': '-mt-56',
-    '60': '-mt-60',
-    '64': '-mt-64',
-    '72': '-mt-72',
-    '80': '-mt-80',
-    '96': '-mt-96',
-  },
-  columnGap: {
-    '0': 'gap-x-0',
-    px: 'gap-x-px',
-    '0.5': 'gap-x-0.5',
-    '1': 'gap-x-1',
-    '1.5': 'gap-x-1.5',
-    '2': 'gap-x-2',
-    '2.5': 'gap-x-2.5',
-    '3': 'gap-x-3',
-    '3.5': 'gap-x-3.5',
-    '4': 'gap-x-4',
-    '4.5': 'gap-x-4.5',
-    '5': 'gap-x-5',
-    '5.5': 'gap-x-5.5',
-    '6': 'gap-x-6',
-    '7': 'gap-x-7',
-    '8': 'gap-x-8',
-    '9': 'gap-x-9',
-    '10': 'gap-x-10',
-    '11': 'gap-x-11',
-    '12': 'gap-x-12',
-    '14': 'gap-x-14',
-    '16': 'gap-x-16',
-    '20': 'gap-x-20',
-    '24': 'gap-x-24',
-    '28': 'gap-x-28',
-    '32': 'gap-x-32',
-    '36': 'gap-x-36',
-    '40': 'gap-x-40',
-    '44': 'gap-x-44',
-    '48': 'gap-x-48',
-    '52': 'gap-x-52',
-    '56': 'gap-x-56',
-    '60': 'gap-x-60',
-    '64': 'gap-x-64',
-    '72': 'gap-x-72',
-    '80': 'gap-x-80',
-    '96': 'gap-x-96',
-  },
-  rowGap: {
-    '0': 'gap-y-0',
-    px: 'gap-y-px',
-    '0.5': 'gap-y-0.5',
-    '1': 'gap-y-1',
-    '1.5': 'gap-y-1.5',
-    '2': 'gap-y-2',
-    '2.5': 'gap-y-2.5',
-    '3': 'gap-y-3',
-    '3.5': 'gap-y-3.5',
-    '4': 'gap-y-4',
-    '4.5': 'gap-y-4.5',
-    '5': 'gap-y-5',
-    '5.5': 'gap-y-5.5',
-    '6': 'gap-y-6',
-    '7': 'gap-y-7',
-    '8': 'gap-y-8',
-    '9': 'gap-y-9',
-    '10': 'gap-y-10',
-    '11': 'gap-y-11',
-    '12': 'gap-y-12',
-    '14': 'gap-y-14',
-    '16': 'gap-y-16',
-    '20': 'gap-y-20',
-    '24': 'gap-y-24',
-    '28': 'gap-y-28',
-    '32': 'gap-y-32',
-    '36': 'gap-y-36',
-    '40': 'gap-y-40',
-    '44': 'gap-y-44',
-    '48': 'gap-y-48',
-    '52': 'gap-y-52',
-    '56': 'gap-y-56',
-    '60': 'gap-y-60',
-    '64': 'gap-y-64',
-    '72': 'gap-y-72',
-    '80': 'gap-y-80',
-    '96': 'gap-y-96',
-  },
-  backgroundColor: {
-    accent: 'bg-accent',
-    alert: 'bg-alert',
-    brand: 'bg-brand',
-    positive: 'bg-positive',
-    warning: 'bg-warning',
-    info: 'bg-info',
-    'alert-secondary': 'bg-alert-secondary',
-    'brand-secondary': 'bg-brand-secondary',
-    'positive-secondary': 'bg-positive-secondary',
-    'warning-secondary': 'bg-warning-secondary',
-    'info-secondary': 'bg-info-secondary',
-    primary: 'bg-primary',
-    secondary: 'bg-secondary',
-    white: 'bg-white',
-    black: 'bg-black',
-    transparent: 'bg-transparent',
-    current: 'bg-current',
-  },
-  borderColor: {
-    accent: 'border-accent',
-    black: 'border-black',
-    brand: 'border-brand',
-    alert: 'border-alert',
-    positive: 'border-positive',
-    warning: 'border-warning',
-    info: 'border-info',
-    'brand-secondary': 'border-brand-secondary',
-    'alert-secondary': 'border-alert-secondary',
-    'positive-secondary': 'border-positive-secondary',
-    'warning-secondary': 'border-warning-secondary',
-    'info-secondary': 'border-info-secondary',
-    white: 'border-white',
-    transparent: 'border-transparent',
-    muted: 'border-muted',
-    primary: 'border-primary',
-    secondary: 'border-secondary',
-    tertiary: 'border-tertiary',
-    current: 'border-current',
-  },
-  borderStartColor: {
-    accent: 'border-s-accent',
-    alert: 'border-s-alert',
-    brand: 'border-s-brand',
-    positive: 'border-s-positive',
-    warning: 'border-s-warning',
-    info: 'border-s-info',
-    'alert-secondary': 'border-s-alert-secondary',
-    'brand-secondary': 'border-s-brand-secondary',
-    'positive-secondary': 'border-s-positive-secondary',
-    'warning-secondary': 'border-s-warning-secondary',
-    'info-secondary': 'border-s-info-secondary',
-    black: 'border-s-black',
-    white: 'border-s-white',
-    transparent: 'border-s-transparent',
-    muted: 'border-s-muted',
-    primary: 'border-s-primary',
-    secondary: 'border-s-secondary',
-    tertiary: 'border-s-tertiary',
-    current: 'border-s-current',
-  },
-  borderEndColor: {
-    accent: 'border-e-accent',
-    alert: 'border-e-alert',
-    black: 'border-e-black',
-    brand: 'border-e-brand',
-    positive: 'border-e-positive',
-    warning: 'border-e-warning',
-    info: 'border-e-info',
-    'alert-secondary': 'border-e-alert-secondary',
-    'brand-secondary': 'border-e-brand-secondary',
-    'positive-secondary': 'border-e-positive-secondary',
-    'warning-secondary': 'border-e-warning-secondary',
-    'info-secondary': 'border-e-info-secondary',
-    white: 'border-e-white',
-    transparent: 'border-e-transparent',
-    muted: 'border-e-muted',
-    primary: 'border-e-primary',
-    secondary: 'border-e-secondary',
-    tertiary: 'border-e-tertiary',
-    current: 'border-e-current',
-  },
-  borderBottomColor: {
-    accent: 'border-b-accent',
-    alert: 'border-b-alert',
-    black: 'border-b-black',
-    brand: 'border-b-brand',
-    positive: 'border-b-positive',
-    warning: 'border-b-warning',
-    info: 'border-b-info',
-    'alert-secondary': 'border-b-alert-secondary',
-    'brand-secondary': 'border-b-brand-secondary',
-    'positive-secondary': 'border-b-positive-secondary',
-    'warning-secondary': 'border-b-warning-secondary',
-    'info-secondary': 'border-b-info-secondary',
-    white: 'border-b-white',
-    transparent: 'border-b-transparent',
-    muted: 'border-b-muted',
-    primary: 'border-b-primary',
-    secondary: 'border-b-secondary',
-    tertiary: 'border-b-tertiary',
-    current: 'border-b-current',
-  },
-  borderTopColor: {
-    accent: 'border-t-accent',
-    alert: 'border-t-alert',
-    black: 'border-t-black',
-    brand: 'border-t-brand',
-    positive: 'border-t-positive',
-    warning: 'border-t-warning',
-    info: 'border-t-info',
-    'alert-secondary': 'border-t-alert-secondary',
-    'brand-secondary': 'border-t-brand-secondary',
-    'positive-secondary': 'border-t-positive-secondary',
-    'warning-secondary': 'border-t-warning-secondary',
-    'info-secondary': 'border-t-info-secondary',
-    white: 'border-t-white',
-    transparent: 'border-t-transparent',
-    muted: 'border-t-muted',
-    primary: 'border-t-primary',
-    secondary: 'border-t-secondary',
-    tertiary: 'border-t-tertiary',
-    current: 'border-t-current',
-  },
-  borderRadius: {
-    none: 'rounded-none',
-    xs: 'rounded-sm',
-    sm: 'rounded',
-    md: 'rounded-md',
-    lg: 'rounded-lg',
-    xl: 'rounded-xl',
-    full: 'rounded-full',
-  },
-  borderTopStartRadius: {
-    none: 'rounded-ss-none',
-    xs: 'rounded-ss-xs',
-    sm: 'rounded-ss-sm',
-    md: 'rounded-ss-md',
-    lg: 'rounded-ss-lg',
-    xl: 'rounded-ss-xl',
-    full: 'rounded-ss-full',
-  },
-  borderTopEndRadius: {
-    none: 'rounded-se-none',
-    xs: 'rounded-se-xs',
-    sm: 'rounded-se-sm',
-    md: 'rounded-se-md',
-    lg: 'rounded-se-lg',
-    xl: 'rounded-se-xl',
-    full: 'rounded-se-full',
-  },
-  borderBottomStartRadius: {
-    none: 'rounded-es-none',
-    xs: 'rounded-es-xs',
-    sm: 'rounded-es-sm',
-    md: 'rounded-es-md',
-    lg: 'rounded-es-lg',
-    xl: 'rounded-es-xl',
-    full: 'rounded-es-full',
-  },
-  borderBottomEndRadius: {
-    none: 'rounded-ee-none',
-    xs: 'rounded-ee-xs',
-    sm: 'rounded-ee-sm',
-    md: 'rounded-ee-md',
-    lg: 'rounded-ee-lg',
-    xl: 'rounded-ee-xl',
-    full: 'rounded-ee-full',
-  },
-  borderWidth: {
-    none: 'border-none',
-    thin: 'border-thin',
-    medium: 'border-medium',
-    thick: 'border-thick',
-  },
-  borderVerticalWidth: {
-    none: 'border-y-none',
-    thin: 'border-y-thin',
-    medium: 'border-y-medium',
-    thick: 'border-y-thick',
-  },
-  borderHorizontalWidth: {
-    none: 'border-x-none',
-    thin: 'border-x-thin',
-    medium: 'border-x-medium',
-    thick: 'border-x-thick',
-  },
-  borderStartWidth: {
-    none: 'border-s-none',
-    thin: 'border-s-thin',
-    medium: 'border-s-medium',
-    thick: 'border-s-thick',
-  },
-  borderEndWidth: {
-    none: 'border-e-none',
-    thin: 'border-e-thin',
-    medium: 'border-e-medium',
-    thick: 'border-e-thick',
-  },
-  borderTopWidth: {
-    none: 'border-t-none',
-    thin: 'border-t-thin',
-    medium: 'border-t-medium',
-    thick: 'border-t-thick',
-  },
-  borderBottomWidth: {
-    none: 'border-b-none',
-    thin: 'border-b-thin',
-    medium: 'border-b-medium',
-    thick: 'border-b-thick',
-  },
-  avatarSize: {
-    xs: 'avatarSize-xs',
-    sm: 'avatarSize-sm',
-    md: 'avatarSize-md',
-    lg: 'avatarSize-lg',
-    xl: 'avatarSize-xl',
-  },
-  iconSize: {
-    xs: 'iconSize-xs leading-none',
-    sm: 'iconSize-sm leading-none',
-    md: 'iconSize-md leading-none',
-    lg: 'iconSize-lg leading-none',
-  },
-  alignContent: {
-    'flex-start': 'content-start',
-    'flex-end': 'content-end',
-    center: 'content-center',
-    stretch: 'content-stretch',
-    'space-between': 'content-between',
-    'space-around': 'content-around',
-  },
-  alignItems: {
-    'flex-start': 'items-start',
-    'flex-end': 'items-end',
-    center: 'items-center',
-    stretch: 'items-stretch',
-    baseline: 'items-baseline',
-  },
-  alignSelf: {
-    auto: 'self-auto',
-    'flex-start': 'self-start',
-    'flex-end': 'self-end',
-    center: 'self-center',
-    stretch: 'self-stretch',
-    baseline: 'self-baseline',
-  },
-  flex: {
-    '1': 'flex-1',
-    auto: 'flex-auto',
-    initial: 'flex-initial',
-    none: 'flex-none',
-  },
-  flexDirection: {
-    row: 'flex-row',
-    column: 'flex-col',
-    'row-reverse': 'flex-row-reverse',
-    'column-reverse': 'flex-col-reverse',
-  },
-  flexGrow: {
-    '0': 'grow-0',
-    '1': 'grow',
-    '2': 'grow-[2]',
-    '3': 'grow-[3]',
-  },
-  flexShrink: {
-    '0': 'shrink-0',
-    '1': 'shrink',
-  },
-  flexWrap: {
-    wrap: 'flex-wrap',
-    'wrap-reverse': 'flex-wrap-reverse',
-    nowrap: 'flex-nowrap',
-  },
-  justifyContent: {
-    'flex-start': 'justify-start',
-    'flex-end': 'justify-end',
-    center: 'justify-center',
-    'space-between': 'justify-between',
-    'space-around': 'justify-around',
-    'space-evenly': 'justify-evenly',
-  },
-  flexBasis: {
-    'min-content': 'basis-[min-content]',
-  },
-  display: {
-    block: 'block',
-    'inline-block': 'inline-block',
-    inline: 'inline',
-    flex: 'flex',
-    'inline-flex': 'inline-flex',
-    table: 'table',
-    'inline-table': 'inline-table',
-    'table-caption': 'table-caption',
-    'table-cell': 'table-cell',
-    'table-column': 'table-column',
-    'table-column-group': 'table-column-group',
-    'table-footer-group': 'table-footer-group',
-    'table-header-group': 'table-header-group',
-    'table-row-group': 'table-row-group',
-    'table-row': 'table-row',
-    'flow-root': 'flow-root',
-    grid: 'grid',
-    contents: 'contents',
-  },
-  overflow: {
-    auto: 'overflow-auto',
-    hidden: 'overflow-hidden',
-    clip: 'overflow-clip',
-    visible: 'overflow-visible',
-    scroll: 'overflow-scroll',
-  },
-  overflowX: {
-    auto: 'overflow-x-auto',
-    hidden: 'overflow-x-hidden',
-    clip: 'overflow-x-clip',
-    visible: 'overflow-x-visible',
-    scroll: 'overflow-x-scroll',
-  },
-  overflowY: {
-    auto: 'overflow-y-auto',
-    hidden: 'overflow-y-hidden',
-    clip: 'overflow-y-clip',
-    visible: 'overflow-y-visible',
-    scroll: 'overflow-y-scroll',
-  },
-  position: {
-    static: 'static',
-    fixed: 'fixed',
-    absolute: 'absolute',
-    relative: 'relative',
-    sticky: 'sticky',
-  },
-  contentFit: {
-    contain: 'object-contain',
-    cover: 'object-cover',
-    fill: 'object-fill',
-    none: 'object-none',
-    'scale-down': 'object-scale-down',
-  },
-  colorMode: {
-    dark: DARK_COLOR_MODE_CLASSNAME,
-    light: LIGHT_COLOR_MODE_CLASSNAME,
-  },
-  scaleMode: {
-    xSmall: XSMALL_SCALE_MODE_CLASSNAME,
-    small: SMALL_SCALE_MODE_CLASSNAME,
-    medium: MEDIUM_SCALE_MODE_CLASSNAME,
-    large: LARGE_SCALE_MODE_CLASSNAME,
-    xLarge: XLARGE_SCALE_MODE_CLASSNAME,
-    xxxLarge: XXXLARGE_SCALE_MODE_CLASSNAME,
-    xxLarge: XXLARGE_SCALE_MODE_CLASSNAME,
-  },
-  buttonPalette: {
-    accent: 'uds-button-accent',
-    brand: 'uds-button-brand',
-    alert: 'uds-button-alert',
-    positive: 'uds-button-positive',
-    warning: 'uds-button-warning',
-    info: 'uds-button-info',
-  },
-  buttonVariant: {
-    primary: 'uds-button-primary',
-    secondary: 'uds-button-secondary',
-    tertiary: 'uds-button-tertiary',
-  },
-  buttonSize: {
-    sm: 'uds-button-sm',
-    md: 'uds-button-md',
-    lg: 'uds-button-lg',
-  },
-  iconButtonSize: {
-    xs: 'uds-icon-button-xs',
-    sm: 'uds-icon-button-sm',
-    md: 'uds-icon-button-md',
-    lg: 'uds-icon-button-lg',
-    xl: 'uds-icon-button-xl',
-  },
-  width: {
-    full: 'w-full',
-    fit: 'w-fit',
-    screen: 'w-screen',
-  },
-  height: {
-    full: 'h-full',
-    fit: 'h-fit',
-    screen: 'h-screen',
-  },
-  dropShadow: {
-    none: 'uds-drop-shadow-none',
-    xs: 'uds-drop-shadow-xs',
-    sm: 'uds-drop-shadow-sm',
-    md: 'uds-drop-shadow-md',
-    lg: 'uds-drop-shadow-lg',
-    xl: 'uds-drop-shadow-xl',
-    '2xl': 'uds-drop-shadow-2xl',
-  },
-  insetShadow: {
-    none: 'uds-inset-shadow-none',
-    xs: 'uds-inset-shadow-xs',
-    sm: 'uds-inset-shadow-sm',
-    md: 'uds-inset-shadow-md',
-    lg: 'uds-inset-shadow-lg',
-    xl: 'uds-inset-shadow-xl',
-    '2xl': 'uds-inset-shadow-2xl',
-    'xs-invert': 'uds-inset-shadow-xs-invert',
-    'sm-invert': 'uds-inset-shadow-sm-invert',
-    'md-invert': 'uds-inset-shadow-md-invert',
-    'lg-invert': 'uds-inset-shadow-lg-invert',
-    'xl-invert': 'uds-inset-shadow-xl-invert',
-    '2xl-invert': 'uds-inset-shadow-2xl-invert',
-  },
-  ...autoVariants,
-} satisfies StylePropsVariants<string>;