@yahoo/uds-mobile 1.0.0

package/generated/styles.cjs

@@ -0,0 +1,4510 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+// Generated by scripts/generateStyles.ts
+
+const { StyleSheet } = require('react-native-unistyles');
+
+const styles = StyleSheet.create((theme) => ({
+  foundation: {
+    variants: {
+      backgroundColor: {
+        primary: { backgroundColor: theme.colors.background['primary'] },
+        secondary: { backgroundColor: theme.colors.background['secondary'] },
+        accent: { backgroundColor: theme.colors.background['accent'] },
+        brand: { backgroundColor: theme.colors.background['brand'] },
+        alert: { backgroundColor: theme.colors.background['alert'] },
+        positive: { backgroundColor: theme.colors.background['positive'] },
+        warning: { backgroundColor: theme.colors.background['warning'] },
+        info: { backgroundColor: theme.colors.background['info'] },
+        'brand-secondary': { backgroundColor: theme.colors.background['brand-secondary'] },
+        'alert-secondary': { backgroundColor: theme.colors.background['alert-secondary'] },
+        'positive-secondary': { backgroundColor: theme.colors.background['positive-secondary'] },
+        'warning-secondary': { backgroundColor: theme.colors.background['warning-secondary'] },
+        'info-secondary': { backgroundColor: theme.colors.background['info-secondary'] },
+        'always/white': { backgroundColor: theme.colors.background['always/white'] },
+        'always/black': { backgroundColor: theme.colors.background['always/black'] },
+        'always/transparent': { backgroundColor: theme.colors.background['always/transparent'] },
+        'always/brand': { backgroundColor: theme.colors.background['always/brand'] },
+        'always/accent': { backgroundColor: theme.colors.background['always/accent'] },
+        'elevation-0': { backgroundColor: theme.colors.background['elevation-0'] },
+        'elevation-1': { backgroundColor: theme.colors.background['elevation-1'] },
+        'elevation-2': { backgroundColor: theme.colors.background['elevation-2'] },
+        'elevation-3': { backgroundColor: theme.colors.background['elevation-3'] },
+        'elevation-4': { backgroundColor: theme.colors.background['elevation-4'] },
+        'elevation-5': { backgroundColor: theme.colors.background['elevation-5'] },
+      },
+      borderRadius: {
+        none: { borderRadius: theme.borderRadius['none'] },
+        xs: { borderRadius: theme.borderRadius['xs'] },
+        sm: { borderRadius: theme.borderRadius['sm'] },
+        md: { borderRadius: theme.borderRadius['md'] },
+        lg: { borderRadius: theme.borderRadius['lg'] },
+        xl: { borderRadius: theme.borderRadius['xl'] },
+        full: { borderRadius: theme.borderRadius['full'] },
+      },
+      borderTopStartRadius: {
+        none: { borderTopStartRadius: theme.borderRadius['none'] },
+        xs: { borderTopStartRadius: theme.borderRadius['xs'] },
+        sm: { borderTopStartRadius: theme.borderRadius['sm'] },
+        md: { borderTopStartRadius: theme.borderRadius['md'] },
+        lg: { borderTopStartRadius: theme.borderRadius['lg'] },
+        xl: { borderTopStartRadius: theme.borderRadius['xl'] },
+        full: { borderTopStartRadius: theme.borderRadius['full'] },
+      },
+      borderTopEndRadius: {
+        none: { borderTopEndRadius: theme.borderRadius['none'] },
+        xs: { borderTopEndRadius: theme.borderRadius['xs'] },
+        sm: { borderTopEndRadius: theme.borderRadius['sm'] },
+        md: { borderTopEndRadius: theme.borderRadius['md'] },
+        lg: { borderTopEndRadius: theme.borderRadius['lg'] },
+        xl: { borderTopEndRadius: theme.borderRadius['xl'] },
+        full: { borderTopEndRadius: theme.borderRadius['full'] },
+      },
+      borderBottomStartRadius: {
+        none: { borderBottomStartRadius: theme.borderRadius['none'] },
+        xs: { borderBottomStartRadius: theme.borderRadius['xs'] },
+        sm: { borderBottomStartRadius: theme.borderRadius['sm'] },
+        md: { borderBottomStartRadius: theme.borderRadius['md'] },
+        lg: { borderBottomStartRadius: theme.borderRadius['lg'] },
+        xl: { borderBottomStartRadius: theme.borderRadius['xl'] },
+        full: { borderBottomStartRadius: theme.borderRadius['full'] },
+      },
+      borderBottomEndRadius: {
+        none: { borderBottomEndRadius: theme.borderRadius['none'] },
+        xs: { borderBottomEndRadius: theme.borderRadius['xs'] },
+        sm: { borderBottomEndRadius: theme.borderRadius['sm'] },
+        md: { borderBottomEndRadius: theme.borderRadius['md'] },
+        lg: { borderBottomEndRadius: theme.borderRadius['lg'] },
+        xl: { borderBottomEndRadius: theme.borderRadius['xl'] },
+        full: { borderBottomEndRadius: theme.borderRadius['full'] },
+      },
+      borderColor: {
+        primary: { borderColor: theme.colors.line['primary'] },
+        secondary: { borderColor: theme.colors.line['secondary'] },
+        accent: { borderColor: theme.colors.line['accent'] },
+        brand: { borderColor: theme.colors.line['brand'] },
+        alert: { borderColor: theme.colors.line['alert'] },
+        positive: { borderColor: theme.colors.line['positive'] },
+        warning: { borderColor: theme.colors.line['warning'] },
+        info: { borderColor: theme.colors.line['info'] },
+        'brand-secondary': { borderColor: theme.colors.line['brand-secondary'] },
+        'alert-secondary': { borderColor: theme.colors.line['alert-secondary'] },
+        'positive-secondary': { borderColor: theme.colors.line['positive-secondary'] },
+        'warning-secondary': { borderColor: theme.colors.line['warning-secondary'] },
+        'info-secondary': { borderColor: theme.colors.line['info-secondary'] },
+        'always/white': { borderColor: theme.colors.line['always/white'] },
+        'always/black': { borderColor: theme.colors.line['always/black'] },
+        'always/transparent': { borderColor: theme.colors.line['always/transparent'] },
+        'always/brand': { borderColor: theme.colors.line['always/brand'] },
+        'always/accent': { borderColor: theme.colors.line['always/accent'] },
+        'elevation-0': { borderColor: theme.colors.line['elevation-0'] },
+        'elevation-1': { borderColor: theme.colors.line['elevation-1'] },
+        'elevation-2': { borderColor: theme.colors.line['elevation-2'] },
+        'elevation-3': { borderColor: theme.colors.line['elevation-3'] },
+        'elevation-4': { borderColor: theme.colors.line['elevation-4'] },
+        'elevation-5': { borderColor: theme.colors.line['elevation-5'] },
+        tertiary: { borderColor: theme.colors.line['tertiary'] },
+        muted: { borderColor: theme.colors.line['muted'] },
+      },
+      borderStartColor: {
+        primary: { borderStartColor: theme.colors.line['primary'] },
+        secondary: { borderStartColor: theme.colors.line['secondary'] },
+        accent: { borderStartColor: theme.colors.line['accent'] },
+        brand: { borderStartColor: theme.colors.line['brand'] },
+        alert: { borderStartColor: theme.colors.line['alert'] },
+        positive: { borderStartColor: theme.colors.line['positive'] },
+        warning: { borderStartColor: theme.colors.line['warning'] },
+        info: { borderStartColor: theme.colors.line['info'] },
+        'brand-secondary': { borderStartColor: theme.colors.line['brand-secondary'] },
+        'alert-secondary': { borderStartColor: theme.colors.line['alert-secondary'] },
+        'positive-secondary': { borderStartColor: theme.colors.line['positive-secondary'] },
+        'warning-secondary': { borderStartColor: theme.colors.line['warning-secondary'] },
+        'info-secondary': { borderStartColor: theme.colors.line['info-secondary'] },
+        'always/white': { borderStartColor: theme.colors.line['always/white'] },
+        'always/black': { borderStartColor: theme.colors.line['always/black'] },
+        'always/transparent': { borderStartColor: theme.colors.line['always/transparent'] },
+        'always/brand': { borderStartColor: theme.colors.line['always/brand'] },
+        'always/accent': { borderStartColor: theme.colors.line['always/accent'] },
+        'elevation-0': { borderStartColor: theme.colors.line['elevation-0'] },
+        'elevation-1': { borderStartColor: theme.colors.line['elevation-1'] },
+        'elevation-2': { borderStartColor: theme.colors.line['elevation-2'] },
+        'elevation-3': { borderStartColor: theme.colors.line['elevation-3'] },
+        'elevation-4': { borderStartColor: theme.colors.line['elevation-4'] },
+        'elevation-5': { borderStartColor: theme.colors.line['elevation-5'] },
+        tertiary: { borderStartColor: theme.colors.line['tertiary'] },
+        muted: { borderStartColor: theme.colors.line['muted'] },
+      },
+      borderEndColor: {
+        primary: { borderEndColor: theme.colors.line['primary'] },
+        secondary: { borderEndColor: theme.colors.line['secondary'] },
+        accent: { borderEndColor: theme.colors.line['accent'] },
+        brand: { borderEndColor: theme.colors.line['brand'] },
+        alert: { borderEndColor: theme.colors.line['alert'] },
+        positive: { borderEndColor: theme.colors.line['positive'] },
+        warning: { borderEndColor: theme.colors.line['warning'] },
+        info: { borderEndColor: theme.colors.line['info'] },
+        'brand-secondary': { borderEndColor: theme.colors.line['brand-secondary'] },
+        'alert-secondary': { borderEndColor: theme.colors.line['alert-secondary'] },
+        'positive-secondary': { borderEndColor: theme.colors.line['positive-secondary'] },
+        'warning-secondary': { borderEndColor: theme.colors.line['warning-secondary'] },
+        'info-secondary': { borderEndColor: theme.colors.line['info-secondary'] },
+        'always/white': { borderEndColor: theme.colors.line['always/white'] },
+        'always/black': { borderEndColor: theme.colors.line['always/black'] },
+        'always/transparent': { borderEndColor: theme.colors.line['always/transparent'] },
+        'always/brand': { borderEndColor: theme.colors.line['always/brand'] },
+        'always/accent': { borderEndColor: theme.colors.line['always/accent'] },
+        'elevation-0': { borderEndColor: theme.colors.line['elevation-0'] },
+        'elevation-1': { borderEndColor: theme.colors.line['elevation-1'] },
+        'elevation-2': { borderEndColor: theme.colors.line['elevation-2'] },
+        'elevation-3': { borderEndColor: theme.colors.line['elevation-3'] },
+        'elevation-4': { borderEndColor: theme.colors.line['elevation-4'] },
+        'elevation-5': { borderEndColor: theme.colors.line['elevation-5'] },
+        tertiary: { borderEndColor: theme.colors.line['tertiary'] },
+        muted: { borderEndColor: theme.colors.line['muted'] },
+      },
+      borderTopColor: {
+        primary: { borderTopColor: theme.colors.line['primary'] },
+        secondary: { borderTopColor: theme.colors.line['secondary'] },
+        accent: { borderTopColor: theme.colors.line['accent'] },
+        brand: { borderTopColor: theme.colors.line['brand'] },
+        alert: { borderTopColor: theme.colors.line['alert'] },
+        positive: { borderTopColor: theme.colors.line['positive'] },
+        warning: { borderTopColor: theme.colors.line['warning'] },
+        info: { borderTopColor: theme.colors.line['info'] },
+        'brand-secondary': { borderTopColor: theme.colors.line['brand-secondary'] },
+        'alert-secondary': { borderTopColor: theme.colors.line['alert-secondary'] },
+        'positive-secondary': { borderTopColor: theme.colors.line['positive-secondary'] },
+        'warning-secondary': { borderTopColor: theme.colors.line['warning-secondary'] },
+        'info-secondary': { borderTopColor: theme.colors.line['info-secondary'] },
+        'always/white': { borderTopColor: theme.colors.line['always/white'] },
+        'always/black': { borderTopColor: theme.colors.line['always/black'] },
+        'always/transparent': { borderTopColor: theme.colors.line['always/transparent'] },
+        'always/brand': { borderTopColor: theme.colors.line['always/brand'] },
+        'always/accent': { borderTopColor: theme.colors.line['always/accent'] },
+        'elevation-0': { borderTopColor: theme.colors.line['elevation-0'] },
+        'elevation-1': { borderTopColor: theme.colors.line['elevation-1'] },
+        'elevation-2': { borderTopColor: theme.colors.line['elevation-2'] },
+        'elevation-3': { borderTopColor: theme.colors.line['elevation-3'] },
+        'elevation-4': { borderTopColor: theme.colors.line['elevation-4'] },
+        'elevation-5': { borderTopColor: theme.colors.line['elevation-5'] },
+        tertiary: { borderTopColor: theme.colors.line['tertiary'] },
+        muted: { borderTopColor: theme.colors.line['muted'] },
+      },
+      borderBottomColor: {
+        primary: { borderBottomColor: theme.colors.line['primary'] },
+        secondary: { borderBottomColor: theme.colors.line['secondary'] },
+        accent: { borderBottomColor: theme.colors.line['accent'] },
+        brand: { borderBottomColor: theme.colors.line['brand'] },
+        alert: { borderBottomColor: theme.colors.line['alert'] },
+        positive: { borderBottomColor: theme.colors.line['positive'] },
+        warning: { borderBottomColor: theme.colors.line['warning'] },
+        info: { borderBottomColor: theme.colors.line['info'] },
+        'brand-secondary': { borderBottomColor: theme.colors.line['brand-secondary'] },
+        'alert-secondary': { borderBottomColor: theme.colors.line['alert-secondary'] },
+        'positive-secondary': { borderBottomColor: theme.colors.line['positive-secondary'] },
+        'warning-secondary': { borderBottomColor: theme.colors.line['warning-secondary'] },
+        'info-secondary': { borderBottomColor: theme.colors.line['info-secondary'] },
+        'always/white': { borderBottomColor: theme.colors.line['always/white'] },
+        'always/black': { borderBottomColor: theme.colors.line['always/black'] },
+        'always/transparent': { borderBottomColor: theme.colors.line['always/transparent'] },
+        'always/brand': { borderBottomColor: theme.colors.line['always/brand'] },
+        'always/accent': { borderBottomColor: theme.colors.line['always/accent'] },
+        'elevation-0': { borderBottomColor: theme.colors.line['elevation-0'] },
+        'elevation-1': { borderBottomColor: theme.colors.line['elevation-1'] },
+        'elevation-2': { borderBottomColor: theme.colors.line['elevation-2'] },
+        'elevation-3': { borderBottomColor: theme.colors.line['elevation-3'] },
+        'elevation-4': { borderBottomColor: theme.colors.line['elevation-4'] },
+        'elevation-5': { borderBottomColor: theme.colors.line['elevation-5'] },
+        tertiary: { borderBottomColor: theme.colors.line['tertiary'] },
+        muted: { borderBottomColor: theme.colors.line['muted'] },
+      },
+      borderWidth: {
+        none: { borderWidth: theme.borderWidth['none'] },
+        thin: { borderWidth: theme.borderWidth['thin'] },
+        medium: { borderWidth: theme.borderWidth['medium'] },
+        'elevation-0': { borderWidth: theme.borderWidth['elevation-0'] },
+        'elevation-1': { borderWidth: theme.borderWidth['elevation-1'] },
+        'elevation-2': { borderWidth: theme.borderWidth['elevation-2'] },
+        'elevation-3': { borderWidth: theme.borderWidth['elevation-3'] },
+        'elevation-4': { borderWidth: theme.borderWidth['elevation-4'] },
+        'elevation-5': { borderWidth: theme.borderWidth['elevation-5'] },
+        thick: { borderWidth: theme.borderWidth['thick'] },
+      },
+      borderVerticalWidth: {
+        none: {
+          borderTopWidth: theme.borderWidth['none'],
+          borderBottomWidth: theme.borderWidth['none'],
+        },
+        thin: {
+          borderTopWidth: theme.borderWidth['thin'],
+          borderBottomWidth: theme.borderWidth['thin'],
+        },
+        medium: {
+          borderTopWidth: theme.borderWidth['medium'],
+          borderBottomWidth: theme.borderWidth['medium'],
+        },
+        'elevation-0': {
+          borderTopWidth: theme.borderWidth['elevation-0'],
+          borderBottomWidth: theme.borderWidth['elevation-0'],
+        },
+        'elevation-1': {
+          borderTopWidth: theme.borderWidth['elevation-1'],
+          borderBottomWidth: theme.borderWidth['elevation-1'],
+        },
+        'elevation-2': {
+          borderTopWidth: theme.borderWidth['elevation-2'],
+          borderBottomWidth: theme.borderWidth['elevation-2'],
+        },
+        'elevation-3': {
+          borderTopWidth: theme.borderWidth['elevation-3'],
+          borderBottomWidth: theme.borderWidth['elevation-3'],
+        },
+        'elevation-4': {
+          borderTopWidth: theme.borderWidth['elevation-4'],
+          borderBottomWidth: theme.borderWidth['elevation-4'],
+        },
+        'elevation-5': {
+          borderTopWidth: theme.borderWidth['elevation-5'],
+          borderBottomWidth: theme.borderWidth['elevation-5'],
+        },
+        thick: {
+          borderTopWidth: theme.borderWidth['thick'],
+          borderBottomWidth: theme.borderWidth['thick'],
+        },
+      },
+      borderHorizontalWidth: {
+        none: {
+          borderStartWidth: theme.borderWidth['none'],
+          borderEndWidth: theme.borderWidth['none'],
+        },
+        thin: {
+          borderStartWidth: theme.borderWidth['thin'],
+          borderEndWidth: theme.borderWidth['thin'],
+        },
+        medium: {
+          borderStartWidth: theme.borderWidth['medium'],
+          borderEndWidth: theme.borderWidth['medium'],
+        },
+        'elevation-0': {
+          borderStartWidth: theme.borderWidth['elevation-0'],
+          borderEndWidth: theme.borderWidth['elevation-0'],
+        },
+        'elevation-1': {
+          borderStartWidth: theme.borderWidth['elevation-1'],
+          borderEndWidth: theme.borderWidth['elevation-1'],
+        },
+        'elevation-2': {
+          borderStartWidth: theme.borderWidth['elevation-2'],
+          borderEndWidth: theme.borderWidth['elevation-2'],
+        },
+        'elevation-3': {
+          borderStartWidth: theme.borderWidth['elevation-3'],
+          borderEndWidth: theme.borderWidth['elevation-3'],
+        },
+        'elevation-4': {
+          borderStartWidth: theme.borderWidth['elevation-4'],
+          borderEndWidth: theme.borderWidth['elevation-4'],
+        },
+        'elevation-5': {
+          borderStartWidth: theme.borderWidth['elevation-5'],
+          borderEndWidth: theme.borderWidth['elevation-5'],
+        },
+        thick: {
+          borderStartWidth: theme.borderWidth['thick'],
+          borderEndWidth: theme.borderWidth['thick'],
+        },
+      },
+      borderStartWidth: {
+        none: { borderStartWidth: theme.borderWidth['none'] },
+        thin: { borderStartWidth: theme.borderWidth['thin'] },
+        medium: { borderStartWidth: theme.borderWidth['medium'] },
+        'elevation-0': { borderStartWidth: theme.borderWidth['elevation-0'] },
+        'elevation-1': { borderStartWidth: theme.borderWidth['elevation-1'] },
+        'elevation-2': { borderStartWidth: theme.borderWidth['elevation-2'] },
+        'elevation-3': { borderStartWidth: theme.borderWidth['elevation-3'] },
+        'elevation-4': { borderStartWidth: theme.borderWidth['elevation-4'] },
+        'elevation-5': { borderStartWidth: theme.borderWidth['elevation-5'] },
+        thick: { borderStartWidth: theme.borderWidth['thick'] },
+      },
+      borderEndWidth: {
+        none: { borderEndWidth: theme.borderWidth['none'] },
+        thin: { borderEndWidth: theme.borderWidth['thin'] },
+        medium: { borderEndWidth: theme.borderWidth['medium'] },
+        'elevation-0': { borderEndWidth: theme.borderWidth['elevation-0'] },
+        'elevation-1': { borderEndWidth: theme.borderWidth['elevation-1'] },
+        'elevation-2': { borderEndWidth: theme.borderWidth['elevation-2'] },
+        'elevation-3': { borderEndWidth: theme.borderWidth['elevation-3'] },
+        'elevation-4': { borderEndWidth: theme.borderWidth['elevation-4'] },
+        'elevation-5': { borderEndWidth: theme.borderWidth['elevation-5'] },
+        thick: { borderEndWidth: theme.borderWidth['thick'] },
+      },
+      borderTopWidth: {
+        none: { borderTopWidth: theme.borderWidth['none'] },
+        thin: { borderTopWidth: theme.borderWidth['thin'] },
+        medium: { borderTopWidth: theme.borderWidth['medium'] },
+        'elevation-0': { borderTopWidth: theme.borderWidth['elevation-0'] },
+        'elevation-1': { borderTopWidth: theme.borderWidth['elevation-1'] },
+        'elevation-2': { borderTopWidth: theme.borderWidth['elevation-2'] },
+        'elevation-3': { borderTopWidth: theme.borderWidth['elevation-3'] },
+        'elevation-4': { borderTopWidth: theme.borderWidth['elevation-4'] },
+        'elevation-5': { borderTopWidth: theme.borderWidth['elevation-5'] },
+        thick: { borderTopWidth: theme.borderWidth['thick'] },
+      },
+      borderBottomWidth: {
+        none: { borderBottomWidth: theme.borderWidth['none'] },
+        thin: { borderBottomWidth: theme.borderWidth['thin'] },
+        medium: { borderBottomWidth: theme.borderWidth['medium'] },
+        'elevation-0': { borderBottomWidth: theme.borderWidth['elevation-0'] },
+        'elevation-1': { borderBottomWidth: theme.borderWidth['elevation-1'] },
+        'elevation-2': { borderBottomWidth: theme.borderWidth['elevation-2'] },
+        'elevation-3': { borderBottomWidth: theme.borderWidth['elevation-3'] },
+        'elevation-4': { borderBottomWidth: theme.borderWidth['elevation-4'] },
+        'elevation-5': { borderBottomWidth: theme.borderWidth['elevation-5'] },
+        thick: { borderBottomWidth: theme.borderWidth['thick'] },
+      },
+      display: {
+        flex: { display: 'flex' },
+        none: { display: 'none' },
+        contents: { display: 'contents' },
+      },
+      overflow: { visible: { overflow: 'visible' }, hidden: { overflow: 'hidden' } },
+      position: {
+        absolute: { position: 'absolute' },
+        relative: { position: 'relative' },
+        static: { position: 'static' },
+      },
+      alignContent: {
+        'flex-start': { alignContent: 'flex-start' },
+        'flex-end': { alignContent: 'flex-end' },
+        center: { alignContent: 'center' },
+        stretch: { alignContent: 'stretch' },
+        'space-between': { alignContent: 'space-between' },
+        'space-around': { alignContent: 'space-around' },
+      },
+      alignItems: {
+        'flex-start': { alignItems: 'flex-start' },
+        'flex-end': { alignItems: 'flex-end' },
+        center: { alignItems: 'center' },
+        stretch: { alignItems: 'stretch' },
+        baseline: { alignItems: 'baseline' },
+      },
+      alignSelf: {
+        auto: { alignSelf: 'auto' },
+        'flex-start': { alignSelf: 'flex-start' },
+        'flex-end': { alignSelf: 'flex-end' },
+        center: { alignSelf: 'center' },
+        stretch: { alignSelf: 'stretch' },
+        baseline: { alignSelf: 'baseline' },
+      },
+      flex: { '1': { flex: 1 } },
+      flexDirection: {
+        row: { flexDirection: 'row' },
+        column: { flexDirection: 'column' },
+        'row-reverse': { flexDirection: 'row-reverse' },
+        'column-reverse': { flexDirection: 'column-reverse' },
+      },
+      flexGrow: {
+        '0': { flexGrow: 0 },
+        '1': { flexGrow: 1 },
+        '2': { flexGrow: 2 },
+        '3': { flexGrow: 3 },
+      },
+      flexShrink: { '0': { flexShrink: 0 }, '1': { flexShrink: 1 } },
+      flexWrap: {
+        wrap: { flexWrap: 'wrap' },
+        nowrap: { flexWrap: 'nowrap' },
+        'wrap-reverse': { flexWrap: 'wrap-reverse' },
+      },
+      justifyContent: {
+        'flex-start': { justifyContent: 'flex-start' },
+        'flex-end': { justifyContent: 'flex-end' },
+        center: { justifyContent: 'center' },
+        'space-between': { justifyContent: 'space-between' },
+        'space-around': { justifyContent: 'space-around' },
+        'space-evenly': { justifyContent: 'space-evenly' },
+      },
+      spacing: {
+        '0': { padding: theme.spacing['0'] },
+        '1': { padding: theme.spacing['1'] },
+        '2': { padding: theme.spacing['2'] },
+        '3': { padding: theme.spacing['3'] },
+        '4': { padding: theme.spacing['4'] },
+        '5': { padding: theme.spacing['5'] },
+        px: { padding: theme.spacing['px'] },
+        '0.5': { padding: theme.spacing['0.5'] },
+        '1.5': { padding: theme.spacing['1.5'] },
+        '2.5': { padding: theme.spacing['2.5'] },
+        '3.5': { padding: theme.spacing['3.5'] },
+        '4.5': { padding: theme.spacing['4.5'] },
+        '5.5': { padding: theme.spacing['5.5'] },
+        '6': { padding: theme.spacing['6'] },
+        '7': { padding: theme.spacing['7'] },
+        '8': { padding: theme.spacing['8'] },
+        '9': { padding: theme.spacing['9'] },
+        '10': { padding: theme.spacing['10'] },
+        '11': { padding: theme.spacing['11'] },
+        '12': { padding: theme.spacing['12'] },
+        '14': { padding: theme.spacing['14'] },
+        '16': { padding: theme.spacing['16'] },
+        '20': { padding: theme.spacing['20'] },
+        '24': { padding: theme.spacing['24'] },
+        '28': { padding: theme.spacing['28'] },
+        '32': { padding: theme.spacing['32'] },
+        '36': { padding: theme.spacing['36'] },
+        '40': { padding: theme.spacing['40'] },
+        '44': { padding: theme.spacing['44'] },
+        '48': { padding: theme.spacing['48'] },
+        '52': { padding: theme.spacing['52'] },
+        '56': { padding: theme.spacing['56'] },
+        '60': { padding: theme.spacing['60'] },
+        '64': { padding: theme.spacing['64'] },
+        '72': { padding: theme.spacing['72'] },
+        '80': { padding: theme.spacing['80'] },
+        '96': { padding: theme.spacing['96'] },
+      },
+      spacingHorizontal: {
+        '0': { paddingHorizontal: theme.spacing['0'] },
+        '1': { paddingHorizontal: theme.spacing['1'] },
+        '2': { paddingHorizontal: theme.spacing['2'] },
+        '3': { paddingHorizontal: theme.spacing['3'] },
+        '4': { paddingHorizontal: theme.spacing['4'] },
+        '5': { paddingHorizontal: theme.spacing['5'] },
+        px: { paddingHorizontal: theme.spacing['px'] },
+        '0.5': { paddingHorizontal: theme.spacing['0.5'] },
+        '1.5': { paddingHorizontal: theme.spacing['1.5'] },
+        '2.5': { paddingHorizontal: theme.spacing['2.5'] },
+        '3.5': { paddingHorizontal: theme.spacing['3.5'] },
+        '4.5': { paddingHorizontal: theme.spacing['4.5'] },
+        '5.5': { paddingHorizontal: theme.spacing['5.5'] },
+        '6': { paddingHorizontal: theme.spacing['6'] },
+        '7': { paddingHorizontal: theme.spacing['7'] },
+        '8': { paddingHorizontal: theme.spacing['8'] },
+        '9': { paddingHorizontal: theme.spacing['9'] },
+        '10': { paddingHorizontal: theme.spacing['10'] },
+        '11': { paddingHorizontal: theme.spacing['11'] },
+        '12': { paddingHorizontal: theme.spacing['12'] },
+        '14': { paddingHorizontal: theme.spacing['14'] },
+        '16': { paddingHorizontal: theme.spacing['16'] },
+        '20': { paddingHorizontal: theme.spacing['20'] },
+        '24': { paddingHorizontal: theme.spacing['24'] },
+        '28': { paddingHorizontal: theme.spacing['28'] },
+        '32': { paddingHorizontal: theme.spacing['32'] },
+        '36': { paddingHorizontal: theme.spacing['36'] },
+        '40': { paddingHorizontal: theme.spacing['40'] },
+        '44': { paddingHorizontal: theme.spacing['44'] },
+        '48': { paddingHorizontal: theme.spacing['48'] },
+        '52': { paddingHorizontal: theme.spacing['52'] },
+        '56': { paddingHorizontal: theme.spacing['56'] },
+        '60': { paddingHorizontal: theme.spacing['60'] },
+        '64': { paddingHorizontal: theme.spacing['64'] },
+        '72': { paddingHorizontal: theme.spacing['72'] },
+        '80': { paddingHorizontal: theme.spacing['80'] },
+        '96': { paddingHorizontal: theme.spacing['96'] },
+      },
+      spacingVertical: {
+        '0': { paddingVertical: theme.spacing['0'] },
+        '1': { paddingVertical: theme.spacing['1'] },
+        '2': { paddingVertical: theme.spacing['2'] },
+        '3': { paddingVertical: theme.spacing['3'] },
+        '4': { paddingVertical: theme.spacing['4'] },
+        '5': { paddingVertical: theme.spacing['5'] },
+        px: { paddingVertical: theme.spacing['px'] },
+        '0.5': { paddingVertical: theme.spacing['0.5'] },
+        '1.5': { paddingVertical: theme.spacing['1.5'] },
+        '2.5': { paddingVertical: theme.spacing['2.5'] },
+        '3.5': { paddingVertical: theme.spacing['3.5'] },
+        '4.5': { paddingVertical: theme.spacing['4.5'] },
+        '5.5': { paddingVertical: theme.spacing['5.5'] },
+        '6': { paddingVertical: theme.spacing['6'] },
+        '7': { paddingVertical: theme.spacing['7'] },
+        '8': { paddingVertical: theme.spacing['8'] },
+        '9': { paddingVertical: theme.spacing['9'] },
+        '10': { paddingVertical: theme.spacing['10'] },
+        '11': { paddingVertical: theme.spacing['11'] },
+        '12': { paddingVertical: theme.spacing['12'] },
+        '14': { paddingVertical: theme.spacing['14'] },
+        '16': { paddingVertical: theme.spacing['16'] },
+        '20': { paddingVertical: theme.spacing['20'] },
+        '24': { paddingVertical: theme.spacing['24'] },
+        '28': { paddingVertical: theme.spacing['28'] },
+        '32': { paddingVertical: theme.spacing['32'] },
+        '36': { paddingVertical: theme.spacing['36'] },
+        '40': { paddingVertical: theme.spacing['40'] },
+        '44': { paddingVertical: theme.spacing['44'] },
+        '48': { paddingVertical: theme.spacing['48'] },
+        '52': { paddingVertical: theme.spacing['52'] },
+        '56': { paddingVertical: theme.spacing['56'] },
+        '60': { paddingVertical: theme.spacing['60'] },
+        '64': { paddingVertical: theme.spacing['64'] },
+        '72': { paddingVertical: theme.spacing['72'] },
+        '80': { paddingVertical: theme.spacing['80'] },
+        '96': { paddingVertical: theme.spacing['96'] },
+      },
+      spacingBottom: {
+        '0': { paddingBottom: theme.spacing['0'] },
+        '1': { paddingBottom: theme.spacing['1'] },
+        '2': { paddingBottom: theme.spacing['2'] },
+        '3': { paddingBottom: theme.spacing['3'] },
+        '4': { paddingBottom: theme.spacing['4'] },
+        '5': { paddingBottom: theme.spacing['5'] },
+        px: { paddingBottom: theme.spacing['px'] },
+        '0.5': { paddingBottom: theme.spacing['0.5'] },
+        '1.5': { paddingBottom: theme.spacing['1.5'] },
+        '2.5': { paddingBottom: theme.spacing['2.5'] },
+        '3.5': { paddingBottom: theme.spacing['3.5'] },
+        '4.5': { paddingBottom: theme.spacing['4.5'] },
+        '5.5': { paddingBottom: theme.spacing['5.5'] },
+        '6': { paddingBottom: theme.spacing['6'] },
+        '7': { paddingBottom: theme.spacing['7'] },
+        '8': { paddingBottom: theme.spacing['8'] },
+        '9': { paddingBottom: theme.spacing['9'] },
+        '10': { paddingBottom: theme.spacing['10'] },
+        '11': { paddingBottom: theme.spacing['11'] },
+        '12': { paddingBottom: theme.spacing['12'] },
+        '14': { paddingBottom: theme.spacing['14'] },
+        '16': { paddingBottom: theme.spacing['16'] },
+        '20': { paddingBottom: theme.spacing['20'] },
+        '24': { paddingBottom: theme.spacing['24'] },
+        '28': { paddingBottom: theme.spacing['28'] },
+        '32': { paddingBottom: theme.spacing['32'] },
+        '36': { paddingBottom: theme.spacing['36'] },
+        '40': { paddingBottom: theme.spacing['40'] },
+        '44': { paddingBottom: theme.spacing['44'] },
+        '48': { paddingBottom: theme.spacing['48'] },
+        '52': { paddingBottom: theme.spacing['52'] },
+        '56': { paddingBottom: theme.spacing['56'] },
+        '60': { paddingBottom: theme.spacing['60'] },
+        '64': { paddingBottom: theme.spacing['64'] },
+        '72': { paddingBottom: theme.spacing['72'] },
+        '80': { paddingBottom: theme.spacing['80'] },
+        '96': { paddingBottom: theme.spacing['96'] },
+      },
+      spacingEnd: {
+        '0': { paddingEnd: theme.spacing['0'] },
+        '1': { paddingEnd: theme.spacing['1'] },
+        '2': { paddingEnd: theme.spacing['2'] },
+        '3': { paddingEnd: theme.spacing['3'] },
+        '4': { paddingEnd: theme.spacing['4'] },
+        '5': { paddingEnd: theme.spacing['5'] },
+        px: { paddingEnd: theme.spacing['px'] },
+        '0.5': { paddingEnd: theme.spacing['0.5'] },
+        '1.5': { paddingEnd: theme.spacing['1.5'] },
+        '2.5': { paddingEnd: theme.spacing['2.5'] },
+        '3.5': { paddingEnd: theme.spacing['3.5'] },
+        '4.5': { paddingEnd: theme.spacing['4.5'] },
+        '5.5': { paddingEnd: theme.spacing['5.5'] },
+        '6': { paddingEnd: theme.spacing['6'] },
+        '7': { paddingEnd: theme.spacing['7'] },
+        '8': { paddingEnd: theme.spacing['8'] },
+        '9': { paddingEnd: theme.spacing['9'] },
+        '10': { paddingEnd: theme.spacing['10'] },
+        '11': { paddingEnd: theme.spacing['11'] },
+        '12': { paddingEnd: theme.spacing['12'] },
+        '14': { paddingEnd: theme.spacing['14'] },
+        '16': { paddingEnd: theme.spacing['16'] },
+        '20': { paddingEnd: theme.spacing['20'] },
+        '24': { paddingEnd: theme.spacing['24'] },
+        '28': { paddingEnd: theme.spacing['28'] },
+        '32': { paddingEnd: theme.spacing['32'] },
+        '36': { paddingEnd: theme.spacing['36'] },
+        '40': { paddingEnd: theme.spacing['40'] },
+        '44': { paddingEnd: theme.spacing['44'] },
+        '48': { paddingEnd: theme.spacing['48'] },
+        '52': { paddingEnd: theme.spacing['52'] },
+        '56': { paddingEnd: theme.spacing['56'] },
+        '60': { paddingEnd: theme.spacing['60'] },
+        '64': { paddingEnd: theme.spacing['64'] },
+        '72': { paddingEnd: theme.spacing['72'] },
+        '80': { paddingEnd: theme.spacing['80'] },
+        '96': { paddingEnd: theme.spacing['96'] },
+      },
+      spacingStart: {
+        '0': { paddingStart: theme.spacing['0'] },
+        '1': { paddingStart: theme.spacing['1'] },
+        '2': { paddingStart: theme.spacing['2'] },
+        '3': { paddingStart: theme.spacing['3'] },
+        '4': { paddingStart: theme.spacing['4'] },
+        '5': { paddingStart: theme.spacing['5'] },
+        px: { paddingStart: theme.spacing['px'] },
+        '0.5': { paddingStart: theme.spacing['0.5'] },
+        '1.5': { paddingStart: theme.spacing['1.5'] },
+        '2.5': { paddingStart: theme.spacing['2.5'] },
+        '3.5': { paddingStart: theme.spacing['3.5'] },
+        '4.5': { paddingStart: theme.spacing['4.5'] },
+        '5.5': { paddingStart: theme.spacing['5.5'] },
+        '6': { paddingStart: theme.spacing['6'] },
+        '7': { paddingStart: theme.spacing['7'] },
+        '8': { paddingStart: theme.spacing['8'] },
+        '9': { paddingStart: theme.spacing['9'] },
+        '10': { paddingStart: theme.spacing['10'] },
+        '11': { paddingStart: theme.spacing['11'] },
+        '12': { paddingStart: theme.spacing['12'] },
+        '14': { paddingStart: theme.spacing['14'] },
+        '16': { paddingStart: theme.spacing['16'] },
+        '20': { paddingStart: theme.spacing['20'] },
+        '24': { paddingStart: theme.spacing['24'] },
+        '28': { paddingStart: theme.spacing['28'] },
+        '32': { paddingStart: theme.spacing['32'] },
+        '36': { paddingStart: theme.spacing['36'] },
+        '40': { paddingStart: theme.spacing['40'] },
+        '44': { paddingStart: theme.spacing['44'] },
+        '48': { paddingStart: theme.spacing['48'] },
+        '52': { paddingStart: theme.spacing['52'] },
+        '56': { paddingStart: theme.spacing['56'] },
+        '60': { paddingStart: theme.spacing['60'] },
+        '64': { paddingStart: theme.spacing['64'] },
+        '72': { paddingStart: theme.spacing['72'] },
+        '80': { paddingStart: theme.spacing['80'] },
+        '96': { paddingStart: theme.spacing['96'] },
+      },
+      spacingTop: {
+        '0': { paddingTop: theme.spacing['0'] },
+        '1': { paddingTop: theme.spacing['1'] },
+        '2': { paddingTop: theme.spacing['2'] },
+        '3': { paddingTop: theme.spacing['3'] },
+        '4': { paddingTop: theme.spacing['4'] },
+        '5': { paddingTop: theme.spacing['5'] },
+        px: { paddingTop: theme.spacing['px'] },
+        '0.5': { paddingTop: theme.spacing['0.5'] },
+        '1.5': { paddingTop: theme.spacing['1.5'] },
+        '2.5': { paddingTop: theme.spacing['2.5'] },
+        '3.5': { paddingTop: theme.spacing['3.5'] },
+        '4.5': { paddingTop: theme.spacing['4.5'] },
+        '5.5': { paddingTop: theme.spacing['5.5'] },
+        '6': { paddingTop: theme.spacing['6'] },
+        '7': { paddingTop: theme.spacing['7'] },
+        '8': { paddingTop: theme.spacing['8'] },
+        '9': { paddingTop: theme.spacing['9'] },
+        '10': { paddingTop: theme.spacing['10'] },
+        '11': { paddingTop: theme.spacing['11'] },
+        '12': { paddingTop: theme.spacing['12'] },
+        '14': { paddingTop: theme.spacing['14'] },
+        '16': { paddingTop: theme.spacing['16'] },
+        '20': { paddingTop: theme.spacing['20'] },
+        '24': { paddingTop: theme.spacing['24'] },
+        '28': { paddingTop: theme.spacing['28'] },
+        '32': { paddingTop: theme.spacing['32'] },
+        '36': { paddingTop: theme.spacing['36'] },
+        '40': { paddingTop: theme.spacing['40'] },
+        '44': { paddingTop: theme.spacing['44'] },
+        '48': { paddingTop: theme.spacing['48'] },
+        '52': { paddingTop: theme.spacing['52'] },
+        '56': { paddingTop: theme.spacing['56'] },
+        '60': { paddingTop: theme.spacing['60'] },
+        '64': { paddingTop: theme.spacing['64'] },
+        '72': { paddingTop: theme.spacing['72'] },
+        '80': { paddingTop: theme.spacing['80'] },
+        '96': { paddingTop: theme.spacing['96'] },
+      },
+      offset: {
+        '0': { margin: theme.spacing['0'] },
+        '1': { margin: theme.spacing['1'] },
+        '2': { margin: theme.spacing['2'] },
+        '3': { margin: theme.spacing['3'] },
+        '4': { margin: theme.spacing['4'] },
+        '5': { margin: theme.spacing['5'] },
+        px: { margin: theme.spacing['px'] },
+        '0.5': { margin: theme.spacing['0.5'] },
+        '1.5': { margin: theme.spacing['1.5'] },
+        '2.5': { margin: theme.spacing['2.5'] },
+        '3.5': { margin: theme.spacing['3.5'] },
+        '4.5': { margin: theme.spacing['4.5'] },
+        '5.5': { margin: theme.spacing['5.5'] },
+        '6': { margin: theme.spacing['6'] },
+        '7': { margin: theme.spacing['7'] },
+        '8': { margin: theme.spacing['8'] },
+        '9': { margin: theme.spacing['9'] },
+        '10': { margin: theme.spacing['10'] },
+        '11': { margin: theme.spacing['11'] },
+        '12': { margin: theme.spacing['12'] },
+        '14': { margin: theme.spacing['14'] },
+        '16': { margin: theme.spacing['16'] },
+        '20': { margin: theme.spacing['20'] },
+        '24': { margin: theme.spacing['24'] },
+        '28': { margin: theme.spacing['28'] },
+        '32': { margin: theme.spacing['32'] },
+        '36': { margin: theme.spacing['36'] },
+        '40': { margin: theme.spacing['40'] },
+        '44': { margin: theme.spacing['44'] },
+        '48': { margin: theme.spacing['48'] },
+        '52': { margin: theme.spacing['52'] },
+        '56': { margin: theme.spacing['56'] },
+        '60': { margin: theme.spacing['60'] },
+        '64': { margin: theme.spacing['64'] },
+        '72': { margin: theme.spacing['72'] },
+        '80': { margin: theme.spacing['80'] },
+        '96': { margin: theme.spacing['96'] },
+      },
+      offsetVertical: {
+        '0': { marginVertical: theme.spacing['0'] },
+        '1': { marginVertical: theme.spacing['1'] },
+        '2': { marginVertical: theme.spacing['2'] },
+        '3': { marginVertical: theme.spacing['3'] },
+        '4': { marginVertical: theme.spacing['4'] },
+        '5': { marginVertical: theme.spacing['5'] },
+        px: { marginVertical: theme.spacing['px'] },
+        '0.5': { marginVertical: theme.spacing['0.5'] },
+        '1.5': { marginVertical: theme.spacing['1.5'] },
+        '2.5': { marginVertical: theme.spacing['2.5'] },
+        '3.5': { marginVertical: theme.spacing['3.5'] },
+        '4.5': { marginVertical: theme.spacing['4.5'] },
+        '5.5': { marginVertical: theme.spacing['5.5'] },
+        '6': { marginVertical: theme.spacing['6'] },
+        '7': { marginVertical: theme.spacing['7'] },
+        '8': { marginVertical: theme.spacing['8'] },
+        '9': { marginVertical: theme.spacing['9'] },
+        '10': { marginVertical: theme.spacing['10'] },
+        '11': { marginVertical: theme.spacing['11'] },
+        '12': { marginVertical: theme.spacing['12'] },
+        '14': { marginVertical: theme.spacing['14'] },
+        '16': { marginVertical: theme.spacing['16'] },
+        '20': { marginVertical: theme.spacing['20'] },
+        '24': { marginVertical: theme.spacing['24'] },
+        '28': { marginVertical: theme.spacing['28'] },
+        '32': { marginVertical: theme.spacing['32'] },
+        '36': { marginVertical: theme.spacing['36'] },
+        '40': { marginVertical: theme.spacing['40'] },
+        '44': { marginVertical: theme.spacing['44'] },
+        '48': { marginVertical: theme.spacing['48'] },
+        '52': { marginVertical: theme.spacing['52'] },
+        '56': { marginVertical: theme.spacing['56'] },
+        '60': { marginVertical: theme.spacing['60'] },
+        '64': { marginVertical: theme.spacing['64'] },
+        '72': { marginVertical: theme.spacing['72'] },
+        '80': { marginVertical: theme.spacing['80'] },
+        '96': { marginVertical: theme.spacing['96'] },
+      },
+      offsetHorizontal: {
+        '0': { marginHorizontal: theme.spacing['0'] },
+        '1': { marginHorizontal: theme.spacing['1'] },
+        '2': { marginHorizontal: theme.spacing['2'] },
+        '3': { marginHorizontal: theme.spacing['3'] },
+        '4': { marginHorizontal: theme.spacing['4'] },
+        '5': { marginHorizontal: theme.spacing['5'] },
+        px: { marginHorizontal: theme.spacing['px'] },
+        '0.5': { marginHorizontal: theme.spacing['0.5'] },
+        '1.5': { marginHorizontal: theme.spacing['1.5'] },
+        '2.5': { marginHorizontal: theme.spacing['2.5'] },
+        '3.5': { marginHorizontal: theme.spacing['3.5'] },
+        '4.5': { marginHorizontal: theme.spacing['4.5'] },
+        '5.5': { marginHorizontal: theme.spacing['5.5'] },
+        '6': { marginHorizontal: theme.spacing['6'] },
+        '7': { marginHorizontal: theme.spacing['7'] },
+        '8': { marginHorizontal: theme.spacing['8'] },
+        '9': { marginHorizontal: theme.spacing['9'] },
+        '10': { marginHorizontal: theme.spacing['10'] },
+        '11': { marginHorizontal: theme.spacing['11'] },
+        '12': { marginHorizontal: theme.spacing['12'] },
+        '14': { marginHorizontal: theme.spacing['14'] },
+        '16': { marginHorizontal: theme.spacing['16'] },
+        '20': { marginHorizontal: theme.spacing['20'] },
+        '24': { marginHorizontal: theme.spacing['24'] },
+        '28': { marginHorizontal: theme.spacing['28'] },
+        '32': { marginHorizontal: theme.spacing['32'] },
+        '36': { marginHorizontal: theme.spacing['36'] },
+        '40': { marginHorizontal: theme.spacing['40'] },
+        '44': { marginHorizontal: theme.spacing['44'] },
+        '48': { marginHorizontal: theme.spacing['48'] },
+        '52': { marginHorizontal: theme.spacing['52'] },
+        '56': { marginHorizontal: theme.spacing['56'] },
+        '60': { marginHorizontal: theme.spacing['60'] },
+        '64': { marginHorizontal: theme.spacing['64'] },
+        '72': { marginHorizontal: theme.spacing['72'] },
+        '80': { marginHorizontal: theme.spacing['80'] },
+        '96': { marginHorizontal: theme.spacing['96'] },
+      },
+      offsetBottom: {
+        '0': { marginBottom: theme.spacing['0'] },
+        '1': { marginBottom: theme.spacing['1'] },
+        '2': { marginBottom: theme.spacing['2'] },
+        '3': { marginBottom: theme.spacing['3'] },
+        '4': { marginBottom: theme.spacing['4'] },
+        '5': { marginBottom: theme.spacing['5'] },
+        px: { marginBottom: theme.spacing['px'] },
+        '0.5': { marginBottom: theme.spacing['0.5'] },
+        '1.5': { marginBottom: theme.spacing['1.5'] },
+        '2.5': { marginBottom: theme.spacing['2.5'] },
+        '3.5': { marginBottom: theme.spacing['3.5'] },
+        '4.5': { marginBottom: theme.spacing['4.5'] },
+        '5.5': { marginBottom: theme.spacing['5.5'] },
+        '6': { marginBottom: theme.spacing['6'] },
+        '7': { marginBottom: theme.spacing['7'] },
+        '8': { marginBottom: theme.spacing['8'] },
+        '9': { marginBottom: theme.spacing['9'] },
+        '10': { marginBottom: theme.spacing['10'] },
+        '11': { marginBottom: theme.spacing['11'] },
+        '12': { marginBottom: theme.spacing['12'] },
+        '14': { marginBottom: theme.spacing['14'] },
+        '16': { marginBottom: theme.spacing['16'] },
+        '20': { marginBottom: theme.spacing['20'] },
+        '24': { marginBottom: theme.spacing['24'] },
+        '28': { marginBottom: theme.spacing['28'] },
+        '32': { marginBottom: theme.spacing['32'] },
+        '36': { marginBottom: theme.spacing['36'] },
+        '40': { marginBottom: theme.spacing['40'] },
+        '44': { marginBottom: theme.spacing['44'] },
+        '48': { marginBottom: theme.spacing['48'] },
+        '52': { marginBottom: theme.spacing['52'] },
+        '56': { marginBottom: theme.spacing['56'] },
+        '60': { marginBottom: theme.spacing['60'] },
+        '64': { marginBottom: theme.spacing['64'] },
+        '72': { marginBottom: theme.spacing['72'] },
+        '80': { marginBottom: theme.spacing['80'] },
+        '96': { marginBottom: theme.spacing['96'] },
+      },
+      offsetEnd: {
+        '0': { marginEnd: theme.spacing['0'] },
+        '1': { marginEnd: theme.spacing['1'] },
+        '2': { marginEnd: theme.spacing['2'] },
+        '3': { marginEnd: theme.spacing['3'] },
+        '4': { marginEnd: theme.spacing['4'] },
+        '5': { marginEnd: theme.spacing['5'] },
+        px: { marginEnd: theme.spacing['px'] },
+        '0.5': { marginEnd: theme.spacing['0.5'] },
+        '1.5': { marginEnd: theme.spacing['1.5'] },
+        '2.5': { marginEnd: theme.spacing['2.5'] },
+        '3.5': { marginEnd: theme.spacing['3.5'] },
+        '4.5': { marginEnd: theme.spacing['4.5'] },
+        '5.5': { marginEnd: theme.spacing['5.5'] },
+        '6': { marginEnd: theme.spacing['6'] },
+        '7': { marginEnd: theme.spacing['7'] },
+        '8': { marginEnd: theme.spacing['8'] },
+        '9': { marginEnd: theme.spacing['9'] },
+        '10': { marginEnd: theme.spacing['10'] },
+        '11': { marginEnd: theme.spacing['11'] },
+        '12': { marginEnd: theme.spacing['12'] },
+        '14': { marginEnd: theme.spacing['14'] },
+        '16': { marginEnd: theme.spacing['16'] },
+        '20': { marginEnd: theme.spacing['20'] },
+        '24': { marginEnd: theme.spacing['24'] },
+        '28': { marginEnd: theme.spacing['28'] },
+        '32': { marginEnd: theme.spacing['32'] },
+        '36': { marginEnd: theme.spacing['36'] },
+        '40': { marginEnd: theme.spacing['40'] },
+        '44': { marginEnd: theme.spacing['44'] },
+        '48': { marginEnd: theme.spacing['48'] },
+        '52': { marginEnd: theme.spacing['52'] },
+        '56': { marginEnd: theme.spacing['56'] },
+        '60': { marginEnd: theme.spacing['60'] },
+        '64': { marginEnd: theme.spacing['64'] },
+        '72': { marginEnd: theme.spacing['72'] },
+        '80': { marginEnd: theme.spacing['80'] },
+        '96': { marginEnd: theme.spacing['96'] },
+      },
+      offsetStart: {
+        '0': { marginStart: theme.spacing['0'] },
+        '1': { marginStart: theme.spacing['1'] },
+        '2': { marginStart: theme.spacing['2'] },
+        '3': { marginStart: theme.spacing['3'] },
+        '4': { marginStart: theme.spacing['4'] },
+        '5': { marginStart: theme.spacing['5'] },
+        px: { marginStart: theme.spacing['px'] },
+        '0.5': { marginStart: theme.spacing['0.5'] },
+        '1.5': { marginStart: theme.spacing['1.5'] },
+        '2.5': { marginStart: theme.spacing['2.5'] },
+        '3.5': { marginStart: theme.spacing['3.5'] },
+        '4.5': { marginStart: theme.spacing['4.5'] },
+        '5.5': { marginStart: theme.spacing['5.5'] },
+        '6': { marginStart: theme.spacing['6'] },
+        '7': { marginStart: theme.spacing['7'] },
+        '8': { marginStart: theme.spacing['8'] },
+        '9': { marginStart: theme.spacing['9'] },
+        '10': { marginStart: theme.spacing['10'] },
+        '11': { marginStart: theme.spacing['11'] },
+        '12': { marginStart: theme.spacing['12'] },
+        '14': { marginStart: theme.spacing['14'] },
+        '16': { marginStart: theme.spacing['16'] },
+        '20': { marginStart: theme.spacing['20'] },
+        '24': { marginStart: theme.spacing['24'] },
+        '28': { marginStart: theme.spacing['28'] },
+        '32': { marginStart: theme.spacing['32'] },
+        '36': { marginStart: theme.spacing['36'] },
+        '40': { marginStart: theme.spacing['40'] },
+        '44': { marginStart: theme.spacing['44'] },
+        '48': { marginStart: theme.spacing['48'] },
+        '52': { marginStart: theme.spacing['52'] },
+        '56': { marginStart: theme.spacing['56'] },
+        '60': { marginStart: theme.spacing['60'] },
+        '64': { marginStart: theme.spacing['64'] },
+        '72': { marginStart: theme.spacing['72'] },
+        '80': { marginStart: theme.spacing['80'] },
+        '96': { marginStart: theme.spacing['96'] },
+      },
+      offsetTop: {
+        '0': { marginTop: theme.spacing['0'] },
+        '1': { marginTop: theme.spacing['1'] },
+        '2': { marginTop: theme.spacing['2'] },
+        '3': { marginTop: theme.spacing['3'] },
+        '4': { marginTop: theme.spacing['4'] },
+        '5': { marginTop: theme.spacing['5'] },
+        px: { marginTop: theme.spacing['px'] },
+        '0.5': { marginTop: theme.spacing['0.5'] },
+        '1.5': { marginTop: theme.spacing['1.5'] },
+        '2.5': { marginTop: theme.spacing['2.5'] },
+        '3.5': { marginTop: theme.spacing['3.5'] },
+        '4.5': { marginTop: theme.spacing['4.5'] },
+        '5.5': { marginTop: theme.spacing['5.5'] },
+        '6': { marginTop: theme.spacing['6'] },
+        '7': { marginTop: theme.spacing['7'] },
+        '8': { marginTop: theme.spacing['8'] },
+        '9': { marginTop: theme.spacing['9'] },
+        '10': { marginTop: theme.spacing['10'] },
+        '11': { marginTop: theme.spacing['11'] },
+        '12': { marginTop: theme.spacing['12'] },
+        '14': { marginTop: theme.spacing['14'] },
+        '16': { marginTop: theme.spacing['16'] },
+        '20': { marginTop: theme.spacing['20'] },
+        '24': { marginTop: theme.spacing['24'] },
+        '28': { marginTop: theme.spacing['28'] },
+        '32': { marginTop: theme.spacing['32'] },
+        '36': { marginTop: theme.spacing['36'] },
+        '40': { marginTop: theme.spacing['40'] },
+        '44': { marginTop: theme.spacing['44'] },
+        '48': { marginTop: theme.spacing['48'] },
+        '52': { marginTop: theme.spacing['52'] },
+        '56': { marginTop: theme.spacing['56'] },
+        '60': { marginTop: theme.spacing['60'] },
+        '64': { marginTop: theme.spacing['64'] },
+        '72': { marginTop: theme.spacing['72'] },
+        '80': { marginTop: theme.spacing['80'] },
+        '96': { marginTop: theme.spacing['96'] },
+      },
+      columnGap: {
+        '0': { columnGap: theme.spacing['0'] },
+        '1': { columnGap: theme.spacing['1'] },
+        '2': { columnGap: theme.spacing['2'] },
+        '3': { columnGap: theme.spacing['3'] },
+        '4': { columnGap: theme.spacing['4'] },
+        '5': { columnGap: theme.spacing['5'] },
+        px: { columnGap: theme.spacing['px'] },
+        '0.5': { columnGap: theme.spacing['0.5'] },
+        '1.5': { columnGap: theme.spacing['1.5'] },
+        '2.5': { columnGap: theme.spacing['2.5'] },
+        '3.5': { columnGap: theme.spacing['3.5'] },
+        '4.5': { columnGap: theme.spacing['4.5'] },
+        '5.5': { columnGap: theme.spacing['5.5'] },
+        '6': { columnGap: theme.spacing['6'] },
+        '7': { columnGap: theme.spacing['7'] },
+        '8': { columnGap: theme.spacing['8'] },
+        '9': { columnGap: theme.spacing['9'] },
+        '10': { columnGap: theme.spacing['10'] },
+        '11': { columnGap: theme.spacing['11'] },
+        '12': { columnGap: theme.spacing['12'] },
+        '14': { columnGap: theme.spacing['14'] },
+        '16': { columnGap: theme.spacing['16'] },
+        '20': { columnGap: theme.spacing['20'] },
+        '24': { columnGap: theme.spacing['24'] },
+        '28': { columnGap: theme.spacing['28'] },
+        '32': { columnGap: theme.spacing['32'] },
+        '36': { columnGap: theme.spacing['36'] },
+        '40': { columnGap: theme.spacing['40'] },
+        '44': { columnGap: theme.spacing['44'] },
+        '48': { columnGap: theme.spacing['48'] },
+        '52': { columnGap: theme.spacing['52'] },
+        '56': { columnGap: theme.spacing['56'] },
+        '60': { columnGap: theme.spacing['60'] },
+        '64': { columnGap: theme.spacing['64'] },
+        '72': { columnGap: theme.spacing['72'] },
+        '80': { columnGap: theme.spacing['80'] },
+        '96': { columnGap: theme.spacing['96'] },
+      },
+      rowGap: {
+        '0': { rowGap: theme.spacing['0'] },
+        '1': { rowGap: theme.spacing['1'] },
+        '2': { rowGap: theme.spacing['2'] },
+        '3': { rowGap: theme.spacing['3'] },
+        '4': { rowGap: theme.spacing['4'] },
+        '5': { rowGap: theme.spacing['5'] },
+        px: { rowGap: theme.spacing['px'] },
+        '0.5': { rowGap: theme.spacing['0.5'] },
+        '1.5': { rowGap: theme.spacing['1.5'] },
+        '2.5': { rowGap: theme.spacing['2.5'] },
+        '3.5': { rowGap: theme.spacing['3.5'] },
+        '4.5': { rowGap: theme.spacing['4.5'] },
+        '5.5': { rowGap: theme.spacing['5.5'] },
+        '6': { rowGap: theme.spacing['6'] },
+        '7': { rowGap: theme.spacing['7'] },
+        '8': { rowGap: theme.spacing['8'] },
+        '9': { rowGap: theme.spacing['9'] },
+        '10': { rowGap: theme.spacing['10'] },
+        '11': { rowGap: theme.spacing['11'] },
+        '12': { rowGap: theme.spacing['12'] },
+        '14': { rowGap: theme.spacing['14'] },
+        '16': { rowGap: theme.spacing['16'] },
+        '20': { rowGap: theme.spacing['20'] },
+        '24': { rowGap: theme.spacing['24'] },
+        '28': { rowGap: theme.spacing['28'] },
+        '32': { rowGap: theme.spacing['32'] },
+        '36': { rowGap: theme.spacing['36'] },
+        '40': { rowGap: theme.spacing['40'] },
+        '44': { rowGap: theme.spacing['44'] },
+        '48': { rowGap: theme.spacing['48'] },
+        '52': { rowGap: theme.spacing['52'] },
+        '56': { rowGap: theme.spacing['56'] },
+        '60': { rowGap: theme.spacing['60'] },
+        '64': { rowGap: theme.spacing['64'] },
+        '72': { rowGap: theme.spacing['72'] },
+        '80': { rowGap: theme.spacing['80'] },
+        '96': { rowGap: theme.spacing['96'] },
+      },
+      color: {
+        primary: { color: theme.colors.foreground['primary'] },
+        secondary: { color: theme.colors.foreground['secondary'] },
+        accent: { color: theme.colors.foreground['accent'] },
+        brand: { color: theme.colors.foreground['brand'] },
+        alert: { color: theme.colors.foreground['alert'] },
+        positive: { color: theme.colors.foreground['positive'] },
+        warning: { color: theme.colors.foreground['warning'] },
+        info: { color: theme.colors.foreground['info'] },
+        'brand-secondary': { color: theme.colors.foreground['brand-secondary'] },
+        'alert-secondary': { color: theme.colors.foreground['alert-secondary'] },
+        'positive-secondary': { color: theme.colors.foreground['positive-secondary'] },
+        'warning-secondary': { color: theme.colors.foreground['warning-secondary'] },
+        'info-secondary': { color: theme.colors.foreground['info-secondary'] },
+        'always/white': { color: theme.colors.foreground['always/white'] },
+        'always/black': { color: theme.colors.foreground['always/black'] },
+        'always/transparent': { color: theme.colors.foreground['always/transparent'] },
+        'always/brand': { color: theme.colors.foreground['always/brand'] },
+        'always/accent': { color: theme.colors.foreground['always/accent'] },
+        tertiary: { color: theme.colors.foreground['tertiary'] },
+        muted: { color: theme.colors.foreground['muted'] },
+        'on-color': { color: theme.colors.foreground['on-color'] },
+      },
+      fontFamily: {
+        sans: { fontFamily: theme.font['sans'] },
+        'sans-alt': { fontFamily: theme.font['sans-alt'] },
+        serif: { fontFamily: theme.font['serif'] },
+        'serif-alt': { fontFamily: theme.font['serif-alt'] },
+        mono: { fontFamily: theme.font['mono'] },
+        display1: { fontFamily: theme.typography['display1'].fontFamily },
+        display2: { fontFamily: theme.typography['display2'].fontFamily },
+        display3: { fontFamily: theme.typography['display3'].fontFamily },
+        title1: { fontFamily: theme.typography['title1'].fontFamily },
+        title2: { fontFamily: theme.typography['title2'].fontFamily },
+        title3: { fontFamily: theme.typography['title3'].fontFamily },
+        title4: { fontFamily: theme.typography['title4'].fontFamily },
+        headline1: { fontFamily: theme.typography['headline1'].fontFamily },
+        body1: { fontFamily: theme.typography['body1'].fontFamily },
+        label1: { fontFamily: theme.typography['label1'].fontFamily },
+        label2: { fontFamily: theme.typography['label2'].fontFamily },
+        label3: { fontFamily: theme.typography['label3'].fontFamily },
+        label4: { fontFamily: theme.typography['label4'].fontFamily },
+        caption1: { fontFamily: theme.typography['caption1'].fontFamily },
+        caption2: { fontFamily: theme.typography['caption2'].fontFamily },
+        legal1: { fontFamily: theme.typography['legal1'].fontFamily },
+        ui1: { fontFamily: theme.typography['ui1'].fontFamily },
+        ui2: { fontFamily: theme.typography['ui2'].fontFamily },
+        ui3: { fontFamily: theme.typography['ui3'].fontFamily },
+        ui4: { fontFamily: theme.typography['ui4'].fontFamily },
+        ui5: { fontFamily: theme.typography['ui5'].fontFamily },
+        ui6: { fontFamily: theme.typography['ui6'].fontFamily },
+        'display1/emphasized': { fontFamily: theme.typography['display1/emphasized'].fontFamily },
+        'display2/emphasized': { fontFamily: theme.typography['display2/emphasized'].fontFamily },
+        'display3/emphasized': { fontFamily: theme.typography['display3/emphasized'].fontFamily },
+        'title1/emphasized': { fontFamily: theme.typography['title1/emphasized'].fontFamily },
+        'title2/emphasized': { fontFamily: theme.typography['title2/emphasized'].fontFamily },
+        'title3/emphasized': { fontFamily: theme.typography['title3/emphasized'].fontFamily },
+        'title4/emphasized': { fontFamily: theme.typography['title4/emphasized'].fontFamily },
+        'headline1/emphasized': { fontFamily: theme.typography['headline1/emphasized'].fontFamily },
+        'body1/emphasized': { fontFamily: theme.typography['body1/emphasized'].fontFamily },
+        'label1/emphasized': { fontFamily: theme.typography['label1/emphasized'].fontFamily },
+        'label2/emphasized': { fontFamily: theme.typography['label2/emphasized'].fontFamily },
+        'label3/emphasized': { fontFamily: theme.typography['label3/emphasized'].fontFamily },
+        'label4/emphasized': { fontFamily: theme.typography['label4/emphasized'].fontFamily },
+        'caption1/emphasized': { fontFamily: theme.typography['caption1/emphasized'].fontFamily },
+        'caption2/emphasized': { fontFamily: theme.typography['caption2/emphasized'].fontFamily },
+        'legal1/emphasized': { fontFamily: theme.typography['legal1/emphasized'].fontFamily },
+        'ui1/emphasized': { fontFamily: theme.typography['ui1/emphasized'].fontFamily },
+        'ui2/emphasized': { fontFamily: theme.typography['ui2/emphasized'].fontFamily },
+        'ui3/emphasized': { fontFamily: theme.typography['ui3/emphasized'].fontFamily },
+        'ui4/emphasized': { fontFamily: theme.typography['ui4/emphasized'].fontFamily },
+        'ui5/emphasized': { fontFamily: theme.typography['ui5/emphasized'].fontFamily },
+        'ui6/emphasized': { fontFamily: theme.typography['ui6/emphasized'].fontFamily },
+        icons: { fontFamily: theme.font['icons'] },
+      },
+      fontSize: {
+        display1: { fontSize: theme.typography['display1'].fontSize },
+        display2: { fontSize: theme.typography['display2'].fontSize },
+        display3: { fontSize: theme.typography['display3'].fontSize },
+        title1: { fontSize: theme.typography['title1'].fontSize },
+        title2: { fontSize: theme.typography['title2'].fontSize },
+        title3: { fontSize: theme.typography['title3'].fontSize },
+        title4: { fontSize: theme.typography['title4'].fontSize },
+        headline1: { fontSize: theme.typography['headline1'].fontSize },
+        body1: { fontSize: theme.typography['body1'].fontSize },
+        label1: { fontSize: theme.typography['label1'].fontSize },
+        label2: { fontSize: theme.typography['label2'].fontSize },
+        label3: { fontSize: theme.typography['label3'].fontSize },
+        label4: { fontSize: theme.typography['label4'].fontSize },
+        caption1: { fontSize: theme.typography['caption1'].fontSize },
+        caption2: { fontSize: theme.typography['caption2'].fontSize },
+        legal1: { fontSize: theme.typography['legal1'].fontSize },
+        ui1: { fontSize: theme.typography['ui1'].fontSize },
+        ui2: { fontSize: theme.typography['ui2'].fontSize },
+        ui3: { fontSize: theme.typography['ui3'].fontSize },
+        ui4: { fontSize: theme.typography['ui4'].fontSize },
+        ui5: { fontSize: theme.typography['ui5'].fontSize },
+        ui6: { fontSize: theme.typography['ui6'].fontSize },
+        'display1/emphasized': { fontSize: theme.typography['display1/emphasized'].fontSize },
+        'display2/emphasized': { fontSize: theme.typography['display2/emphasized'].fontSize },
+        'display3/emphasized': { fontSize: theme.typography['display3/emphasized'].fontSize },
+        'title1/emphasized': { fontSize: theme.typography['title1/emphasized'].fontSize },
+        'title2/emphasized': { fontSize: theme.typography['title2/emphasized'].fontSize },
+        'title3/emphasized': { fontSize: theme.typography['title3/emphasized'].fontSize },
+        'title4/emphasized': { fontSize: theme.typography['title4/emphasized'].fontSize },
+        'headline1/emphasized': { fontSize: theme.typography['headline1/emphasized'].fontSize },
+        'body1/emphasized': { fontSize: theme.typography['body1/emphasized'].fontSize },
+        'label1/emphasized': { fontSize: theme.typography['label1/emphasized'].fontSize },
+        'label2/emphasized': { fontSize: theme.typography['label2/emphasized'].fontSize },
+        'label3/emphasized': { fontSize: theme.typography['label3/emphasized'].fontSize },
+        'label4/emphasized': { fontSize: theme.typography['label4/emphasized'].fontSize },
+        'caption1/emphasized': { fontSize: theme.typography['caption1/emphasized'].fontSize },
+        'caption2/emphasized': { fontSize: theme.typography['caption2/emphasized'].fontSize },
+        'legal1/emphasized': { fontSize: theme.typography['legal1/emphasized'].fontSize },
+        'ui1/emphasized': { fontSize: theme.typography['ui1/emphasized'].fontSize },
+        'ui2/emphasized': { fontSize: theme.typography['ui2/emphasized'].fontSize },
+        'ui3/emphasized': { fontSize: theme.typography['ui3/emphasized'].fontSize },
+        'ui4/emphasized': { fontSize: theme.typography['ui4/emphasized'].fontSize },
+        'ui5/emphasized': { fontSize: theme.typography['ui5/emphasized'].fontSize },
+        'ui6/emphasized': { fontSize: theme.typography['ui6/emphasized'].fontSize },
+      },
+      letterSpacing: {
+        display1: { letterSpacing: theme.typography['display1'].letterSpacing },
+        display2: { letterSpacing: theme.typography['display2'].letterSpacing },
+        display3: { letterSpacing: theme.typography['display3'].letterSpacing },
+        title1: { letterSpacing: theme.typography['title1'].letterSpacing },
+        title2: { letterSpacing: theme.typography['title2'].letterSpacing },
+        title3: { letterSpacing: theme.typography['title3'].letterSpacing },
+        title4: { letterSpacing: theme.typography['title4'].letterSpacing },
+        headline1: { letterSpacing: theme.typography['headline1'].letterSpacing },
+        body1: { letterSpacing: theme.typography['body1'].letterSpacing },
+        label1: { letterSpacing: theme.typography['label1'].letterSpacing },
+        label2: { letterSpacing: theme.typography['label2'].letterSpacing },
+        label3: { letterSpacing: theme.typography['label3'].letterSpacing },
+        label4: { letterSpacing: theme.typography['label4'].letterSpacing },
+        caption1: { letterSpacing: theme.typography['caption1'].letterSpacing },
+        caption2: { letterSpacing: theme.typography['caption2'].letterSpacing },
+        legal1: { letterSpacing: theme.typography['legal1'].letterSpacing },
+        ui1: { letterSpacing: theme.typography['ui1'].letterSpacing },
+        ui2: { letterSpacing: theme.typography['ui2'].letterSpacing },
+        ui3: { letterSpacing: theme.typography['ui3'].letterSpacing },
+        ui4: { letterSpacing: theme.typography['ui4'].letterSpacing },
+        ui5: { letterSpacing: theme.typography['ui5'].letterSpacing },
+        ui6: { letterSpacing: theme.typography['ui6'].letterSpacing },
+        'display1/emphasized': {
+          letterSpacing: theme.typography['display1/emphasized'].letterSpacing,
+        },
+        'display2/emphasized': {
+          letterSpacing: theme.typography['display2/emphasized'].letterSpacing,
+        },
+        'display3/emphasized': {
+          letterSpacing: theme.typography['display3/emphasized'].letterSpacing,
+        },
+        'title1/emphasized': { letterSpacing: theme.typography['title1/emphasized'].letterSpacing },
+        'title2/emphasized': { letterSpacing: theme.typography['title2/emphasized'].letterSpacing },
+        'title3/emphasized': { letterSpacing: theme.typography['title3/emphasized'].letterSpacing },
+        'title4/emphasized': { letterSpacing: theme.typography['title4/emphasized'].letterSpacing },
+        'headline1/emphasized': {
+          letterSpacing: theme.typography['headline1/emphasized'].letterSpacing,
+        },
+        'body1/emphasized': { letterSpacing: theme.typography['body1/emphasized'].letterSpacing },
+        'label1/emphasized': { letterSpacing: theme.typography['label1/emphasized'].letterSpacing },
+        'label2/emphasized': { letterSpacing: theme.typography['label2/emphasized'].letterSpacing },
+        'label3/emphasized': { letterSpacing: theme.typography['label3/emphasized'].letterSpacing },
+        'label4/emphasized': { letterSpacing: theme.typography['label4/emphasized'].letterSpacing },
+        'caption1/emphasized': {
+          letterSpacing: theme.typography['caption1/emphasized'].letterSpacing,
+        },
+        'caption2/emphasized': {
+          letterSpacing: theme.typography['caption2/emphasized'].letterSpacing,
+        },
+        'legal1/emphasized': { letterSpacing: theme.typography['legal1/emphasized'].letterSpacing },
+        'ui1/emphasized': { letterSpacing: theme.typography['ui1/emphasized'].letterSpacing },
+        'ui2/emphasized': { letterSpacing: theme.typography['ui2/emphasized'].letterSpacing },
+        'ui3/emphasized': { letterSpacing: theme.typography['ui3/emphasized'].letterSpacing },
+        'ui4/emphasized': { letterSpacing: theme.typography['ui4/emphasized'].letterSpacing },
+        'ui5/emphasized': { letterSpacing: theme.typography['ui5/emphasized'].letterSpacing },
+        'ui6/emphasized': { letterSpacing: theme.typography['ui6/emphasized'].letterSpacing },
+      },
+      fontWeight: {
+        bold: { fontWeight: 'bold' },
+        thin: { fontWeight: 'thin' },
+        light: { fontWeight: 'light' },
+        medium: { fontWeight: 'medium' },
+        regular: { fontWeight: 'regular' },
+        semibold: { fontWeight: 'semibold' },
+        black: { fontWeight: 'black' },
+      },
+      lineHeight: {
+        display1: { lineHeight: theme.typography['display1'].lineHeight },
+        display2: { lineHeight: theme.typography['display2'].lineHeight },
+        display3: { lineHeight: theme.typography['display3'].lineHeight },
+        title1: { lineHeight: theme.typography['title1'].lineHeight },
+        title2: { lineHeight: theme.typography['title2'].lineHeight },
+        title3: { lineHeight: theme.typography['title3'].lineHeight },
+        title4: { lineHeight: theme.typography['title4'].lineHeight },
+        headline1: { lineHeight: theme.typography['headline1'].lineHeight },
+        body1: { lineHeight: theme.typography['body1'].lineHeight },
+        label1: { lineHeight: theme.typography['label1'].lineHeight },
+        label2: { lineHeight: theme.typography['label2'].lineHeight },
+        label3: { lineHeight: theme.typography['label3'].lineHeight },
+        label4: { lineHeight: theme.typography['label4'].lineHeight },
+        caption1: { lineHeight: theme.typography['caption1'].lineHeight },
+        caption2: { lineHeight: theme.typography['caption2'].lineHeight },
+        legal1: { lineHeight: theme.typography['legal1'].lineHeight },
+        ui1: { lineHeight: theme.typography['ui1'].lineHeight },
+        ui2: { lineHeight: theme.typography['ui2'].lineHeight },
+        ui3: { lineHeight: theme.typography['ui3'].lineHeight },
+        ui4: { lineHeight: theme.typography['ui4'].lineHeight },
+        ui5: { lineHeight: theme.typography['ui5'].lineHeight },
+        ui6: { lineHeight: theme.typography['ui6'].lineHeight },
+        'display1/emphasized': { lineHeight: theme.typography['display1/emphasized'].lineHeight },
+        'display2/emphasized': { lineHeight: theme.typography['display2/emphasized'].lineHeight },
+        'display3/emphasized': { lineHeight: theme.typography['display3/emphasized'].lineHeight },
+        'title1/emphasized': { lineHeight: theme.typography['title1/emphasized'].lineHeight },
+        'title2/emphasized': { lineHeight: theme.typography['title2/emphasized'].lineHeight },
+        'title3/emphasized': { lineHeight: theme.typography['title3/emphasized'].lineHeight },
+        'title4/emphasized': { lineHeight: theme.typography['title4/emphasized'].lineHeight },
+        'headline1/emphasized': { lineHeight: theme.typography['headline1/emphasized'].lineHeight },
+        'body1/emphasized': { lineHeight: theme.typography['body1/emphasized'].lineHeight },
+        'label1/emphasized': { lineHeight: theme.typography['label1/emphasized'].lineHeight },
+        'label2/emphasized': { lineHeight: theme.typography['label2/emphasized'].lineHeight },
+        'label3/emphasized': { lineHeight: theme.typography['label3/emphasized'].lineHeight },
+        'label4/emphasized': { lineHeight: theme.typography['label4/emphasized'].lineHeight },
+        'caption1/emphasized': { lineHeight: theme.typography['caption1/emphasized'].lineHeight },
+        'caption2/emphasized': { lineHeight: theme.typography['caption2/emphasized'].lineHeight },
+        'legal1/emphasized': { lineHeight: theme.typography['legal1/emphasized'].lineHeight },
+        'ui1/emphasized': { lineHeight: theme.typography['ui1/emphasized'].lineHeight },
+        'ui2/emphasized': { lineHeight: theme.typography['ui2/emphasized'].lineHeight },
+        'ui3/emphasized': { lineHeight: theme.typography['ui3/emphasized'].lineHeight },
+        'ui4/emphasized': { lineHeight: theme.typography['ui4/emphasized'].lineHeight },
+        'ui5/emphasized': { lineHeight: theme.typography['ui5/emphasized'].lineHeight },
+        'ui6/emphasized': { lineHeight: theme.typography['ui6/emphasized'].lineHeight },
+      },
+      textAlign: { center: { textAlign: 'center' }, justify: { textAlign: 'justify' } },
+      textTransform: {
+        none: { textTransform: 'none' },
+        capitalize: { textTransform: 'capitalize' },
+        uppercase: { textTransform: 'uppercase' },
+        lowercase: { textTransform: 'lowercase' },
+      },
+      iconSize: {
+        xs: { width: theme.iconSize['xs'], height: theme.iconSize['xs'] },
+        sm: { width: theme.iconSize['sm'], height: theme.iconSize['sm'] },
+        md: { width: theme.iconSize['md'], height: theme.iconSize['md'] },
+        lg: { width: theme.iconSize['lg'], height: theme.iconSize['lg'] },
+      },
+      avatarSize: {
+        xs: { width: theme.avatarSize['xs'], height: theme.avatarSize['xs'] },
+        sm: { width: theme.avatarSize['sm'], height: theme.avatarSize['sm'] },
+        md: { width: theme.avatarSize['md'], height: theme.avatarSize['md'] },
+        lg: { width: theme.avatarSize['lg'], height: theme.avatarSize['lg'] },
+        xl: { width: theme.avatarSize['xl'], height: theme.avatarSize['xl'] },
+      },
+    },
+  },
+}));
+
+// Component layer-based stylesheets
+/**
+ * Layer-based styles for Avatar.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * avatarStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: avatarStyles.root, avatarStyles.icon, etc.
+ * ```
+ */
+const avatarStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        lg: theme.components['avatar/size/lg/root/rest'],
+        md: theme.components['avatar/size/md/root/rest'],
+        sm: theme.components['avatar/size/sm/root/rest'],
+        xl: theme.components['avatar/size/xl/root/rest'],
+        xs: theme.components['avatar/size/xs/root/rest'],
+      },
+      icon: {
+        primary: theme.components['avatar/icon/variant/primary/root/rest'],
+        secondary: theme.components['avatar/icon/variant/secondary/root/rest'],
+      },
+      image: {
+        primary: theme.components['avatar/image/variant/primary/root/rest'],
+        secondary: theme.components['avatar/image/variant/secondary/root/rest'],
+      },
+      text: {
+        primary: theme.components['avatar/text/variant/primary/root/rest'],
+        secondary: theme.components['avatar/text/variant/secondary/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      size: {
+        lg: theme.components['avatar/size/lg/rootText/rest'],
+        md: theme.components['avatar/size/md/rootText/rest'],
+        sm: theme.components['avatar/size/sm/rootText/rest'],
+        xl: theme.components['avatar/size/xl/rootText/rest'],
+        xs: theme.components['avatar/size/xs/rootText/rest'],
+      },
+      icon: {
+        primary: theme.components['avatar/icon/variant/primary/rootText/rest'],
+        secondary: theme.components['avatar/icon/variant/secondary/rootText/rest'],
+      },
+      text: {
+        primary: theme.components['avatar/text/variant/primary/rootText/rest'],
+        secondary: theme.components['avatar/text/variant/secondary/rootText/rest'],
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: {
+        lg: theme.components['avatar/size/lg/icon/rest'],
+        md: theme.components['avatar/size/md/icon/rest'],
+        sm: theme.components['avatar/size/sm/icon/rest'],
+        xl: theme.components['avatar/size/xl/icon/rest'],
+        xs: theme.components['avatar/size/xs/icon/rest'],
+      },
+    },
+  },
+}));
+
+/**
+ * Layer-based styles for Badge.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * badgeStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: badgeStyles.root, badgeStyles.icon, etc.
+ * ```
+ */
+const badgeStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        lg: theme.components['badge/size/lg/root/rest'],
+        md: theme.components['badge/size/md/root/rest'],
+        sm: theme.components['badge/size/sm/root/rest'],
+        xs: theme.components['badge/size/xs/root/rest'],
+      },
+      variant: {
+        alert: theme.components['badge/variant/alert/root/rest'],
+        'alert-secondary': theme.components['badge/variant/alert-secondary/root/rest'],
+        brand: theme.components['badge/variant/brand/root/rest'],
+        'brand-secondary': theme.components['badge/variant/brand-secondary/root/rest'],
+        info: theme.components['badge/variant/info/root/rest'],
+        'info-secondary': theme.components['badge/variant/info-secondary/root/rest'],
+        positive: theme.components['badge/variant/positive/root/rest'],
+        'positive-secondary': theme.components['badge/variant/positive-secondary/root/rest'],
+        primary: theme.components['badge/variant/primary/root/rest'],
+        secondary: theme.components['badge/variant/secondary/root/rest'],
+        warning: theme.components['badge/variant/warning/root/rest'],
+        'warning-secondary': theme.components['badge/variant/warning-secondary/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      size: {
+        lg: theme.components['badge/size/lg/rootText/rest'],
+        md: theme.components['badge/size/md/rootText/rest'],
+        sm: theme.components['badge/size/sm/rootText/rest'],
+        xs: theme.components['badge/size/xs/rootText/rest'],
+      },
+      variant: {
+        alert: theme.components['badge/variant/alert/rootText/rest'],
+        'alert-secondary': theme.components['badge/variant/alert-secondary/rootText/rest'],
+        brand: theme.components['badge/variant/brand/rootText/rest'],
+        'brand-secondary': theme.components['badge/variant/brand-secondary/rootText/rest'],
+        info: theme.components['badge/variant/info/rootText/rest'],
+        'info-secondary': theme.components['badge/variant/info-secondary/rootText/rest'],
+        positive: theme.components['badge/variant/positive/rootText/rest'],
+        'positive-secondary': theme.components['badge/variant/positive-secondary/rootText/rest'],
+        primary: theme.components['badge/variant/primary/rootText/rest'],
+        secondary: theme.components['badge/variant/secondary/rootText/rest'],
+        warning: theme.components['badge/variant/warning/rootText/rest'],
+        'warning-secondary': theme.components['badge/variant/warning-secondary/rootText/rest'],
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: {
+        lg: theme.components['badge/size/lg/icon/rest'],
+        md: theme.components['badge/size/md/icon/rest'],
+        sm: theme.components['badge/size/sm/icon/rest'],
+        xs: theme.components['badge/size/xs/icon/rest'],
+      },
+      variant: {
+        alert: theme.components['badge/variant/alert/icon/rest'],
+        'alert-secondary': theme.components['badge/variant/alert-secondary/icon/rest'],
+        brand: theme.components['badge/variant/brand/icon/rest'],
+        'brand-secondary': theme.components['badge/variant/brand-secondary/icon/rest'],
+        info: theme.components['badge/variant/info/icon/rest'],
+        'info-secondary': theme.components['badge/variant/info-secondary/icon/rest'],
+        positive: theme.components['badge/variant/positive/icon/rest'],
+        'positive-secondary': theme.components['badge/variant/positive-secondary/icon/rest'],
+        primary: theme.components['badge/variant/primary/icon/rest'],
+        secondary: theme.components['badge/variant/secondary/icon/rest'],
+        warning: theme.components['badge/variant/warning/icon/rest'],
+        'warning-secondary': theme.components['badge/variant/warning-secondary/icon/rest'],
+      },
+    },
+  },
+}));
+
+/**
+ * Layer-based styles for Button.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * buttonStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: buttonStyles.root, buttonStyles.icon, etc.
+ * ```
+ */
+const buttonStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        lg: theme.components['button/size/lg/root/rest'],
+        md: theme.components['button/size/md/root/rest'],
+        sm: theme.components['button/size/sm/root/rest'],
+      },
+      variant: {
+        alert: theme.components['button/variant/alert/root/rest'],
+        'alert-secondary': theme.components['button/variant/alert-secondary/root/rest'],
+        'alert-tertiary': theme.components['button/variant/alert-tertiary/root/rest'],
+        brand: theme.components['button/variant/brand/root/rest'],
+        'brand-secondary': theme.components['button/variant/brand-secondary/root/rest'],
+        'brand-tertiary': theme.components['button/variant/brand-tertiary/root/rest'],
+        info: theme.components['button/variant/info/root/rest'],
+        'info-secondary': theme.components['button/variant/info-secondary/root/rest'],
+        'info-tertiary': theme.components['button/variant/info-tertiary/root/rest'],
+        positive: theme.components['button/variant/positive/root/rest'],
+        'positive-secondary': theme.components['button/variant/positive-secondary/root/rest'],
+        'positive-tertiary': theme.components['button/variant/positive-tertiary/root/rest'],
+        primary: theme.components['button/variant/primary/root/rest'],
+        secondary: theme.components['button/variant/secondary/root/rest'],
+        tertiary: theme.components['button/variant/tertiary/root/rest'],
+        warning: theme.components['button/variant/warning/root/rest'],
+        'warning-secondary': theme.components['button/variant/warning-secondary/root/rest'],
+        'warning-tertiary': theme.components['button/variant/warning-tertiary/root/rest'],
+      },
+      disabled: { true: {} },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/alert-secondary/root/disabled'],
+      },
+      {
+        variant: 'alert-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/alert-secondary/root/pressed'],
+      },
+      {
+        variant: 'alert-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/alert-tertiary/root/disabled'],
+      },
+      {
+        variant: 'alert-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/alert-tertiary/root/pressed'],
+      },
+      {
+        variant: 'alert',
+        disabled: true,
+        styles: theme.components['button/variant/alert/root/disabled'],
+      },
+      {
+        variant: 'alert',
+        pressed: true,
+        styles: theme.components['button/variant/alert/root/pressed'],
+      },
+      {
+        variant: 'brand-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/brand-secondary/root/disabled'],
+      },
+      {
+        variant: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/brand-secondary/root/pressed'],
+      },
+      {
+        variant: 'brand-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/brand-tertiary/root/disabled'],
+      },
+      {
+        variant: 'brand-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/brand-tertiary/root/pressed'],
+      },
+      {
+        variant: 'brand',
+        disabled: true,
+        styles: theme.components['button/variant/brand/root/disabled'],
+      },
+      {
+        variant: 'brand',
+        pressed: true,
+        styles: theme.components['button/variant/brand/root/pressed'],
+      },
+      {
+        variant: 'info-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/info-secondary/root/disabled'],
+      },
+      {
+        variant: 'info-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/info-secondary/root/pressed'],
+      },
+      {
+        variant: 'info-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/info-tertiary/root/disabled'],
+      },
+      {
+        variant: 'info-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/info-tertiary/root/pressed'],
+      },
+      {
+        variant: 'info',
+        disabled: true,
+        styles: theme.components['button/variant/info/root/disabled'],
+      },
+      {
+        variant: 'info',
+        pressed: true,
+        styles: theme.components['button/variant/info/root/pressed'],
+      },
+      {
+        variant: 'positive-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/positive-secondary/root/disabled'],
+      },
+      {
+        variant: 'positive-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/positive-secondary/root/pressed'],
+      },
+      {
+        variant: 'positive-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/positive-tertiary/root/disabled'],
+      },
+      {
+        variant: 'positive-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/positive-tertiary/root/pressed'],
+      },
+      {
+        variant: 'positive',
+        disabled: true,
+        styles: theme.components['button/variant/positive/root/disabled'],
+      },
+      {
+        variant: 'positive',
+        pressed: true,
+        styles: theme.components['button/variant/positive/root/pressed'],
+      },
+      {
+        variant: 'primary',
+        disabled: true,
+        styles: theme.components['button/variant/primary/root/disabled'],
+      },
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['button/variant/primary/root/pressed'],
+      },
+      {
+        variant: 'secondary',
+        disabled: true,
+        styles: theme.components['button/variant/secondary/root/disabled'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['button/variant/secondary/root/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/tertiary/root/disabled'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/tertiary/root/pressed'],
+      },
+      {
+        variant: 'warning-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/warning-secondary/root/disabled'],
+      },
+      {
+        variant: 'warning-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/warning-secondary/root/pressed'],
+      },
+      {
+        variant: 'warning-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/warning-tertiary/root/disabled'],
+      },
+      {
+        variant: 'warning-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/warning-tertiary/root/pressed'],
+      },
+      {
+        variant: 'warning',
+        disabled: true,
+        styles: theme.components['button/variant/warning/root/disabled'],
+      },
+      {
+        variant: 'warning',
+        pressed: true,
+        styles: theme.components['button/variant/warning/root/pressed'],
+      },
+    ],
+  },
+  text: {
+    variants: {
+      size: {
+        lg: theme.components['button/size/lg/rootText/rest'],
+        md: theme.components['button/size/md/rootText/rest'],
+        sm: theme.components['button/size/sm/rootText/rest'],
+      },
+      variant: {
+        alert: theme.components['button/variant/alert/rootText/rest'],
+        'alert-secondary': theme.components['button/variant/alert-secondary/rootText/rest'],
+        'alert-tertiary': theme.components['button/variant/alert-tertiary/rootText/rest'],
+        brand: theme.components['button/variant/brand/rootText/rest'],
+        'brand-secondary': theme.components['button/variant/brand-secondary/rootText/rest'],
+        'brand-tertiary': theme.components['button/variant/brand-tertiary/rootText/rest'],
+        info: theme.components['button/variant/info/rootText/rest'],
+        'info-secondary': theme.components['button/variant/info-secondary/rootText/rest'],
+        'info-tertiary': theme.components['button/variant/info-tertiary/rootText/rest'],
+        positive: theme.components['button/variant/positive/rootText/rest'],
+        'positive-secondary': theme.components['button/variant/positive-secondary/rootText/rest'],
+        'positive-tertiary': theme.components['button/variant/positive-tertiary/rootText/rest'],
+        primary: theme.components['button/variant/primary/rootText/rest'],
+        secondary: theme.components['button/variant/secondary/rootText/rest'],
+        tertiary: theme.components['button/variant/tertiary/rootText/rest'],
+        warning: theme.components['button/variant/warning/rootText/rest'],
+        'warning-secondary': theme.components['button/variant/warning-secondary/rootText/rest'],
+        'warning-tertiary': theme.components['button/variant/warning-tertiary/rootText/rest'],
+      },
+      disabled: { true: {} },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/alert-secondary/rootText/disabled'],
+      },
+      {
+        variant: 'alert-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/alert-secondary/rootText/pressed'],
+      },
+      {
+        variant: 'alert-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/alert-tertiary/rootText/disabled'],
+      },
+      {
+        variant: 'alert-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/alert-tertiary/rootText/pressed'],
+      },
+      {
+        variant: 'alert',
+        disabled: true,
+        styles: theme.components['button/variant/alert/rootText/disabled'],
+      },
+      {
+        variant: 'alert',
+        pressed: true,
+        styles: theme.components['button/variant/alert/rootText/pressed'],
+      },
+      {
+        variant: 'brand-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/brand-secondary/rootText/disabled'],
+      },
+      {
+        variant: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/brand-secondary/rootText/pressed'],
+      },
+      {
+        variant: 'brand-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/brand-tertiary/rootText/disabled'],
+      },
+      {
+        variant: 'brand-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/brand-tertiary/rootText/pressed'],
+      },
+      {
+        variant: 'brand',
+        disabled: true,
+        styles: theme.components['button/variant/brand/rootText/disabled'],
+      },
+      {
+        variant: 'brand',
+        pressed: true,
+        styles: theme.components['button/variant/brand/rootText/pressed'],
+      },
+      {
+        variant: 'info-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/info-secondary/rootText/disabled'],
+      },
+      {
+        variant: 'info-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/info-secondary/rootText/pressed'],
+      },
+      {
+        variant: 'info-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/info-tertiary/rootText/disabled'],
+      },
+      {
+        variant: 'info-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/info-tertiary/rootText/pressed'],
+      },
+      {
+        variant: 'info',
+        disabled: true,
+        styles: theme.components['button/variant/info/rootText/disabled'],
+      },
+      {
+        variant: 'info',
+        pressed: true,
+        styles: theme.components['button/variant/info/rootText/pressed'],
+      },
+      {
+        variant: 'positive-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/positive-secondary/rootText/disabled'],
+      },
+      {
+        variant: 'positive-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/positive-secondary/rootText/pressed'],
+      },
+      {
+        variant: 'positive-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/positive-tertiary/rootText/disabled'],
+      },
+      {
+        variant: 'positive-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/positive-tertiary/rootText/pressed'],
+      },
+      {
+        variant: 'positive',
+        disabled: true,
+        styles: theme.components['button/variant/positive/rootText/disabled'],
+      },
+      {
+        variant: 'positive',
+        pressed: true,
+        styles: theme.components['button/variant/positive/rootText/pressed'],
+      },
+      {
+        variant: 'primary',
+        disabled: true,
+        styles: theme.components['button/variant/primary/rootText/disabled'],
+      },
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['button/variant/primary/rootText/pressed'],
+      },
+      {
+        variant: 'secondary',
+        disabled: true,
+        styles: theme.components['button/variant/secondary/rootText/disabled'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['button/variant/secondary/rootText/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/tertiary/rootText/disabled'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/tertiary/rootText/pressed'],
+      },
+      {
+        variant: 'warning-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/warning-secondary/rootText/disabled'],
+      },
+      {
+        variant: 'warning-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/warning-secondary/rootText/pressed'],
+      },
+      {
+        variant: 'warning-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/warning-tertiary/rootText/disabled'],
+      },
+      {
+        variant: 'warning-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/warning-tertiary/rootText/pressed'],
+      },
+      {
+        variant: 'warning',
+        disabled: true,
+        styles: theme.components['button/variant/warning/rootText/disabled'],
+      },
+      {
+        variant: 'warning',
+        pressed: true,
+        styles: theme.components['button/variant/warning/rootText/pressed'],
+      },
+    ],
+  },
+  icon: {
+    variants: {
+      size: {
+        lg: theme.components['button/size/lg/icon/rest'],
+        md: theme.components['button/size/md/icon/rest'],
+        sm: theme.components['button/size/sm/icon/rest'],
+      },
+      variant: {
+        alert: theme.components['button/variant/alert/icon/rest'],
+        'alert-secondary': theme.components['button/variant/alert-secondary/icon/rest'],
+        'alert-tertiary': theme.components['button/variant/alert-tertiary/icon/rest'],
+        brand: theme.components['button/variant/brand/icon/rest'],
+        'brand-secondary': theme.components['button/variant/brand-secondary/icon/rest'],
+        'brand-tertiary': theme.components['button/variant/brand-tertiary/icon/rest'],
+        info: theme.components['button/variant/info/icon/rest'],
+        'info-secondary': theme.components['button/variant/info-secondary/icon/rest'],
+        'info-tertiary': theme.components['button/variant/info-tertiary/icon/rest'],
+        positive: theme.components['button/variant/positive/icon/rest'],
+        'positive-secondary': theme.components['button/variant/positive-secondary/icon/rest'],
+        'positive-tertiary': theme.components['button/variant/positive-tertiary/icon/rest'],
+        primary: theme.components['button/variant/primary/icon/rest'],
+        secondary: theme.components['button/variant/secondary/icon/rest'],
+        tertiary: theme.components['button/variant/tertiary/icon/rest'],
+        warning: theme.components['button/variant/warning/icon/rest'],
+        'warning-secondary': theme.components['button/variant/warning-secondary/icon/rest'],
+        'warning-tertiary': theme.components['button/variant/warning-tertiary/icon/rest'],
+      },
+      disabled: { true: {} },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/alert-secondary/icon/disabled'],
+      },
+      {
+        variant: 'alert-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/alert-secondary/icon/pressed'],
+      },
+      {
+        variant: 'alert-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/alert-tertiary/icon/disabled'],
+      },
+      {
+        variant: 'alert-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/alert-tertiary/icon/pressed'],
+      },
+      {
+        variant: 'alert',
+        disabled: true,
+        styles: theme.components['button/variant/alert/icon/disabled'],
+      },
+      {
+        variant: 'alert',
+        pressed: true,
+        styles: theme.components['button/variant/alert/icon/pressed'],
+      },
+      {
+        variant: 'brand-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/brand-secondary/icon/disabled'],
+      },
+      {
+        variant: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/brand-secondary/icon/pressed'],
+      },
+      {
+        variant: 'brand-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/brand-tertiary/icon/disabled'],
+      },
+      {
+        variant: 'brand-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/brand-tertiary/icon/pressed'],
+      },
+      {
+        variant: 'brand',
+        disabled: true,
+        styles: theme.components['button/variant/brand/icon/disabled'],
+      },
+      {
+        variant: 'brand',
+        pressed: true,
+        styles: theme.components['button/variant/brand/icon/pressed'],
+      },
+      {
+        variant: 'info-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/info-secondary/icon/disabled'],
+      },
+      {
+        variant: 'info-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/info-secondary/icon/pressed'],
+      },
+      {
+        variant: 'info-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/info-tertiary/icon/disabled'],
+      },
+      {
+        variant: 'info-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/info-tertiary/icon/pressed'],
+      },
+      {
+        variant: 'info',
+        disabled: true,
+        styles: theme.components['button/variant/info/icon/disabled'],
+      },
+      {
+        variant: 'info',
+        pressed: true,
+        styles: theme.components['button/variant/info/icon/pressed'],
+      },
+      {
+        variant: 'positive-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/positive-secondary/icon/disabled'],
+      },
+      {
+        variant: 'positive-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/positive-secondary/icon/pressed'],
+      },
+      {
+        variant: 'positive-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/positive-tertiary/icon/disabled'],
+      },
+      {
+        variant: 'positive-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/positive-tertiary/icon/pressed'],
+      },
+      {
+        variant: 'positive',
+        disabled: true,
+        styles: theme.components['button/variant/positive/icon/disabled'],
+      },
+      {
+        variant: 'positive',
+        pressed: true,
+        styles: theme.components['button/variant/positive/icon/pressed'],
+      },
+      {
+        variant: 'primary',
+        disabled: true,
+        styles: theme.components['button/variant/primary/icon/disabled'],
+      },
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['button/variant/primary/icon/pressed'],
+      },
+      {
+        variant: 'secondary',
+        disabled: true,
+        styles: theme.components['button/variant/secondary/icon/disabled'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['button/variant/secondary/icon/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/tertiary/icon/disabled'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/tertiary/icon/pressed'],
+      },
+      {
+        variant: 'warning-secondary',
+        disabled: true,
+        styles: theme.components['button/variant/warning-secondary/icon/disabled'],
+      },
+      {
+        variant: 'warning-secondary',
+        pressed: true,
+        styles: theme.components['button/variant/warning-secondary/icon/pressed'],
+      },
+      {
+        variant: 'warning-tertiary',
+        disabled: true,
+        styles: theme.components['button/variant/warning-tertiary/icon/disabled'],
+      },
+      {
+        variant: 'warning-tertiary',
+        pressed: true,
+        styles: theme.components['button/variant/warning-tertiary/icon/pressed'],
+      },
+      {
+        variant: 'warning',
+        disabled: true,
+        styles: theme.components['button/variant/warning/icon/disabled'],
+      },
+      {
+        variant: 'warning',
+        pressed: true,
+        styles: theme.components['button/variant/warning/icon/pressed'],
+      },
+    ],
+  },
+}));
+
+/**
+ * Layer-based styles for Checkbox.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * checkboxStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: checkboxStyles.root, checkboxStyles.icon, etc.
+ * ```
+ */
+const checkboxStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        md: theme.components['checkbox/size/md/root/rest'],
+        sm: theme.components['checkbox/size/sm/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      size: {
+        md: theme.components['checkbox/size/md/rootText/rest'],
+        sm: theme.components['checkbox/size/sm/rootText/rest'],
+      },
+      variant: {
+        alert: theme.components['checkbox/variant/alert/value/checked/rootText/rest'],
+        'alert-secondary':
+          theme.components['checkbox/variant/alert-secondary/value/checked/rootText/rest'],
+        primary: theme.components['checkbox/variant/primary/value/checked/rootText/rest'],
+        secondary: theme.components['checkbox/variant/secondary/value/checked/rootText/rest'],
+      },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      value: { checked: {}, indeterminate: {}, unchecked: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/checked/rootText/disabled'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert-secondary/value/checked/rootText/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/alert-secondary/value/checked/rootText/rest'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        disabled: true,
+        styles:
+          theme.components[
+            'checkbox/variant/alert-secondary/value/indeterminate/rootText/disabled'
+          ],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        pressed: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/indeterminate/rootText/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/indeterminate/rootText/rest'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/unchecked/rootText/disabled'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/unchecked/rootText/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/alert-secondary/value/unchecked/rootText/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/alert/value/checked/rootText/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/checked/rootText/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/alert/value/checked/rootText/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        disabled: true,
+        styles: theme.components['checkbox/variant/alert/value/indeterminate/rootText/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/indeterminate/rootText/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        styles: theme.components['checkbox/variant/alert/value/indeterminate/rootText/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/alert/value/unchecked/rootText/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/unchecked/rootText/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/alert/value/unchecked/rootText/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/primary/value/checked/rootText/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/primary/value/checked/rootText/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/primary/value/checked/rootText/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        disabled: true,
+        styles: theme.components['checkbox/variant/primary/value/indeterminate/rootText/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        pressed: true,
+        styles: theme.components['checkbox/variant/primary/value/indeterminate/rootText/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        styles: theme.components['checkbox/variant/primary/value/indeterminate/rootText/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/primary/value/unchecked/rootText/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/primary/value/unchecked/rootText/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/primary/value/unchecked/rootText/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/secondary/value/checked/rootText/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/secondary/value/checked/rootText/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/secondary/value/checked/rootText/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/secondary/value/indeterminate/rootText/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        pressed: true,
+        styles: theme.components['checkbox/variant/secondary/value/indeterminate/rootText/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        styles: theme.components['checkbox/variant/secondary/value/indeterminate/rootText/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/secondary/value/unchecked/rootText/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/secondary/value/unchecked/rootText/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/secondary/value/unchecked/rootText/rest'],
+      },
+    ],
+  },
+  checkbox: {
+    variants: {
+      size: {
+        md: theme.components['checkbox/size/md/checkbox/rest'],
+        sm: theme.components['checkbox/size/sm/checkbox/rest'],
+      },
+      variant: {
+        alert: theme.components['checkbox/variant/alert/value/checked/checkbox/rest'],
+        'alert-secondary':
+          theme.components['checkbox/variant/alert-secondary/value/checked/checkbox/rest'],
+        primary: theme.components['checkbox/variant/primary/value/checked/checkbox/rest'],
+        secondary: theme.components['checkbox/variant/secondary/value/checked/checkbox/rest'],
+      },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      value: { checked: {}, indeterminate: {}, unchecked: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/checked/checkbox/disabled'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert-secondary/value/checked/checkbox/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/alert-secondary/value/checked/checkbox/rest'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        disabled: true,
+        styles:
+          theme.components[
+            'checkbox/variant/alert-secondary/value/indeterminate/checkbox/disabled'
+          ],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        pressed: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/indeterminate/checkbox/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/indeterminate/checkbox/rest'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/unchecked/checkbox/disabled'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/unchecked/checkbox/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/alert-secondary/value/unchecked/checkbox/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/alert/value/checked/checkbox/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/checked/checkbox/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/alert/value/checked/checkbox/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        disabled: true,
+        styles: theme.components['checkbox/variant/alert/value/indeterminate/checkbox/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/indeterminate/checkbox/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        styles: theme.components['checkbox/variant/alert/value/indeterminate/checkbox/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/alert/value/unchecked/checkbox/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/unchecked/checkbox/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/alert/value/unchecked/checkbox/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/primary/value/checked/checkbox/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/primary/value/checked/checkbox/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/primary/value/checked/checkbox/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        disabled: true,
+        styles: theme.components['checkbox/variant/primary/value/indeterminate/checkbox/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        pressed: true,
+        styles: theme.components['checkbox/variant/primary/value/indeterminate/checkbox/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        styles: theme.components['checkbox/variant/primary/value/indeterminate/checkbox/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/primary/value/unchecked/checkbox/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/primary/value/unchecked/checkbox/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/primary/value/unchecked/checkbox/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/secondary/value/checked/checkbox/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/secondary/value/checked/checkbox/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/secondary/value/checked/checkbox/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/secondary/value/indeterminate/checkbox/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        pressed: true,
+        styles: theme.components['checkbox/variant/secondary/value/indeterminate/checkbox/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        styles: theme.components['checkbox/variant/secondary/value/indeterminate/checkbox/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/secondary/value/unchecked/checkbox/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/secondary/value/unchecked/checkbox/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/secondary/value/unchecked/checkbox/rest'],
+      },
+    ],
+  },
+  checkboxIcon: {
+    variants: {
+      variant: {
+        alert: theme.components['checkbox/variant/alert/value/checked/checkboxIcon/rest'],
+        'alert-secondary':
+          theme.components['checkbox/variant/alert-secondary/value/checked/checkboxIcon/rest'],
+        primary: theme.components['checkbox/variant/primary/value/checked/checkboxIcon/rest'],
+        secondary: theme.components['checkbox/variant/secondary/value/checked/checkboxIcon/rest'],
+      },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      value: { checked: {}, indeterminate: {}, unchecked: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/checked/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        pressed: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/checked/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/checked/checkboxIcon/rest'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        disabled: true,
+        styles:
+          theme.components[
+            'checkbox/variant/alert-secondary/value/indeterminate/checkboxIcon/disabled'
+          ],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        pressed: true,
+        styles:
+          theme.components[
+            'checkbox/variant/alert-secondary/value/indeterminate/checkboxIcon/pressed'
+          ],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'indeterminate',
+        styles:
+          theme.components[
+            'checkbox/variant/alert-secondary/value/indeterminate/checkboxIcon/rest'
+          ],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        disabled: true,
+        styles:
+          theme.components[
+            'checkbox/variant/alert-secondary/value/unchecked/checkboxIcon/disabled'
+          ],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/unchecked/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        styles:
+          theme.components['checkbox/variant/alert-secondary/value/unchecked/checkboxIcon/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/alert/value/checked/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/checked/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/alert/value/checked/checkboxIcon/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/alert/value/indeterminate/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/indeterminate/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'indeterminate',
+        styles: theme.components['checkbox/variant/alert/value/indeterminate/checkboxIcon/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/alert/value/unchecked/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/alert/value/unchecked/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/alert/value/unchecked/checkboxIcon/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/primary/value/checked/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/primary/value/checked/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/primary/value/checked/checkboxIcon/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/primary/value/indeterminate/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        pressed: true,
+        styles:
+          theme.components['checkbox/variant/primary/value/indeterminate/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'indeterminate',
+        styles: theme.components['checkbox/variant/primary/value/indeterminate/checkboxIcon/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/primary/value/unchecked/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/primary/value/unchecked/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/primary/value/unchecked/checkboxIcon/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        disabled: true,
+        styles: theme.components['checkbox/variant/secondary/value/checked/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/secondary/value/checked/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        styles: theme.components['checkbox/variant/secondary/value/checked/checkboxIcon/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/secondary/value/indeterminate/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        pressed: true,
+        styles:
+          theme.components['checkbox/variant/secondary/value/indeterminate/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'indeterminate',
+        styles:
+          theme.components['checkbox/variant/secondary/value/indeterminate/checkboxIcon/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        disabled: true,
+        styles:
+          theme.components['checkbox/variant/secondary/value/unchecked/checkboxIcon/disabled'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['checkbox/variant/secondary/value/unchecked/checkboxIcon/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        styles: theme.components['checkbox/variant/secondary/value/unchecked/checkboxIcon/rest'],
+      },
+    ],
+  },
+}));
+
+/**
+ * Layer-based styles for Chip.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * chipStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: chipStyles.root, chipStyles.icon, etc.
+ * ```
+ */
+const chipStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        md: theme.components['chip/size/md/root/rest'],
+        sm: theme.components['chip/size/sm/root/rest'],
+      },
+      pressed: { true: {} },
+      dismissible: {
+        brand: theme.components['chip/dismissible/variant/brand/root/rest'],
+        'brand-secondary': theme.components['chip/dismissible/variant/brand-secondary/root/rest'],
+        primary: theme.components['chip/dismissible/variant/primary/root/rest'],
+        secondary: theme.components['chip/dismissible/variant/secondary/root/rest'],
+      },
+      link: {
+        brand: theme.components['chip/link/variant/brand/root/rest'],
+        'brand-secondary': theme.components['chip/link/variant/brand-secondary/root/rest'],
+        primary: theme.components['chip/link/variant/primary/root/rest'],
+        secondary: theme.components['chip/link/variant/secondary/root/rest'],
+      },
+      toggle: {
+        off: theme.components['chip/toggle/variant/brand-secondary/active/off/root/rest'],
+        on: theme.components['chip/toggle/variant/brand-secondary/active/on/root/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        dismissible: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/brand-secondary/root/pressed'],
+      },
+      {
+        dismissible: 'brand',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/brand/root/pressed'],
+      },
+      {
+        dismissible: 'primary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/primary/root/pressed'],
+      },
+      {
+        dismissible: 'secondary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/secondary/root/pressed'],
+      },
+      {
+        link: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/brand-secondary/root/pressed'],
+      },
+      {
+        link: 'brand',
+        pressed: true,
+        styles: theme.components['chip/link/variant/brand/root/pressed'],
+      },
+      {
+        link: 'primary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/primary/root/pressed'],
+      },
+      {
+        link: 'secondary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/secondary/root/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand-secondary/active/off/root/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand/active/off/root/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/primary/active/off/root/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/secondary/active/off/root/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand-secondary/active/on/root/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand/active/on/root/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/primary/active/on/root/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/secondary/active/on/root/pressed'],
+      },
+    ],
+  },
+  text: {
+    variants: {
+      size: {
+        md: theme.components['chip/size/md/rootText/rest'],
+        sm: theme.components['chip/size/sm/rootText/rest'],
+      },
+      pressed: { true: {} },
+      dismissible: {
+        brand: theme.components['chip/dismissible/variant/brand/rootText/rest'],
+        'brand-secondary':
+          theme.components['chip/dismissible/variant/brand-secondary/rootText/rest'],
+        primary: theme.components['chip/dismissible/variant/primary/rootText/rest'],
+        secondary: theme.components['chip/dismissible/variant/secondary/rootText/rest'],
+      },
+      link: {
+        brand: theme.components['chip/link/variant/brand/rootText/rest'],
+        'brand-secondary': theme.components['chip/link/variant/brand-secondary/rootText/rest'],
+        primary: theme.components['chip/link/variant/primary/rootText/rest'],
+        secondary: theme.components['chip/link/variant/secondary/rootText/rest'],
+      },
+      toggle: {
+        off: theme.components['chip/toggle/variant/brand-secondary/active/off/rootText/rest'],
+        on: theme.components['chip/toggle/variant/brand-secondary/active/on/rootText/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        dismissible: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/brand-secondary/rootText/pressed'],
+      },
+      {
+        dismissible: 'brand',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/brand/rootText/pressed'],
+      },
+      {
+        dismissible: 'primary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/primary/rootText/pressed'],
+      },
+      {
+        dismissible: 'secondary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/secondary/rootText/pressed'],
+      },
+      {
+        link: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/brand-secondary/rootText/pressed'],
+      },
+      {
+        link: 'brand',
+        pressed: true,
+        styles: theme.components['chip/link/variant/brand/rootText/pressed'],
+      },
+      {
+        link: 'primary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/primary/rootText/pressed'],
+      },
+      {
+        link: 'secondary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/secondary/rootText/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand-secondary/active/off/rootText/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand/active/off/rootText/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/primary/active/off/rootText/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/secondary/active/off/rootText/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand-secondary/active/on/rootText/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand/active/on/rootText/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/primary/active/on/rootText/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/secondary/active/on/rootText/pressed'],
+      },
+    ],
+  },
+  icon: {
+    variants: {
+      size: {
+        md: theme.components['chip/size/md/icon/rest'],
+        sm: theme.components['chip/size/sm/icon/rest'],
+      },
+      pressed: { true: {} },
+      dismissible: {
+        brand: theme.components['chip/dismissible/variant/brand/icon/rest'],
+        'brand-secondary': theme.components['chip/dismissible/variant/brand-secondary/icon/rest'],
+        primary: theme.components['chip/dismissible/variant/primary/icon/rest'],
+        secondary: theme.components['chip/dismissible/variant/secondary/icon/rest'],
+      },
+      link: {
+        brand: theme.components['chip/link/variant/brand/icon/rest'],
+        'brand-secondary': theme.components['chip/link/variant/brand-secondary/icon/rest'],
+        primary: theme.components['chip/link/variant/primary/icon/rest'],
+        secondary: theme.components['chip/link/variant/secondary/icon/rest'],
+      },
+      toggle: {
+        off: theme.components['chip/toggle/variant/brand-secondary/active/off/icon/rest'],
+        on: theme.components['chip/toggle/variant/brand-secondary/active/on/icon/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        dismissible: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/brand-secondary/icon/pressed'],
+      },
+      {
+        dismissible: 'brand',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/brand/icon/pressed'],
+      },
+      {
+        dismissible: 'primary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/primary/icon/pressed'],
+      },
+      {
+        dismissible: 'secondary',
+        pressed: true,
+        styles: theme.components['chip/dismissible/variant/secondary/icon/pressed'],
+      },
+      {
+        link: 'brand-secondary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/brand-secondary/icon/pressed'],
+      },
+      {
+        link: 'brand',
+        pressed: true,
+        styles: theme.components['chip/link/variant/brand/icon/pressed'],
+      },
+      {
+        link: 'primary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/primary/icon/pressed'],
+      },
+      {
+        link: 'secondary',
+        pressed: true,
+        styles: theme.components['chip/link/variant/secondary/icon/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand-secondary/active/off/icon/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand/active/off/icon/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/primary/active/off/icon/pressed'],
+      },
+      {
+        toggle: 'off',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/secondary/active/off/icon/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand-secondary/active/on/icon/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/brand/active/on/icon/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/primary/active/on/icon/pressed'],
+      },
+      {
+        toggle: 'on',
+        pressed: true,
+        styles: theme.components['chip/toggle/variant/secondary/active/on/icon/pressed'],
+      },
+    ],
+  },
+}));
+
+/**
+ * Layer-based styles for Divider.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * dividerStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: dividerStyles.root, dividerStyles.icon, etc.
+ * ```
+ */
+const dividerStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      variant: {
+        muted: theme.components['divider/variant/muted/root/rest'],
+        primary: theme.components['divider/variant/primary/root/rest'],
+        secondary: theme.components['divider/variant/secondary/root/rest'],
+        tertiary: theme.components['divider/variant/tertiary/root/rest'],
+      },
+    },
+  },
+  label: {
+    variants: {
+      variant: {
+        muted: theme.components['divider/variant/muted/label/rest'],
+        primary: theme.components['divider/variant/primary/label/rest'],
+        secondary: theme.components['divider/variant/secondary/label/rest'],
+        tertiary: theme.components['divider/variant/tertiary/label/rest'],
+      },
+    },
+  },
+  line: {
+    variants: {
+      variant: {
+        muted: theme.components['divider/variant/muted/line/rest'],
+        primary: theme.components['divider/variant/primary/line/rest'],
+        secondary: theme.components['divider/variant/secondary/line/rest'],
+        tertiary: theme.components['divider/variant/tertiary/line/rest'],
+      },
+    },
+  },
+}));
+
+/**
+ * Layer-based styles for IconButton.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * iconButtonStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: iconButtonStyles.root, iconButtonStyles.icon, etc.
+ * ```
+ */
+const iconButtonStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        lg: theme.components['iconButton/size/lg/root/rest'],
+        md: theme.components['iconButton/size/md/root/rest'],
+        sm: theme.components['iconButton/size/sm/root/rest'],
+        xl: theme.components['iconButton/size/xl/root/rest'],
+        xs: theme.components['iconButton/size/xs/root/rest'],
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: {
+        lg: theme.components['iconButton/size/lg/icon/rest'],
+        md: theme.components['iconButton/size/md/icon/rest'],
+        sm: theme.components['iconButton/size/sm/icon/rest'],
+        xl: theme.components['iconButton/size/xl/icon/rest'],
+        xs: theme.components['iconButton/size/xs/icon/rest'],
+      },
+    },
+  },
+}));
+
+/**
+ * Layer-based styles for Input.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * inputStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: inputStyles.root, inputStyles.icon, etc.
+ * ```
+ */
+const inputStyles = StyleSheet.create((theme) => ({
+  endIcon: {
+    variants: {
+      size: {
+        lg: theme.components['input/size/lg/endIcon/rest'],
+        md: theme.components['input/size/md/endIcon/rest'],
+      },
+      variant: { default: theme.components['input/variant/default/value/empty/endIcon/rest'] },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/endIcon/rest'],
+        filled: theme.components['input/variant/default/value/filled/endIcon/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/endIcon/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/endIcon/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/endIcon/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/endIcon/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/endIcon/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/endIcon/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/endIcon/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/endIcon/readonly'],
+      },
+    ],
+  },
+  helperIcon: {
+    variants: {
+      size: {
+        lg: theme.components['input/size/lg/helperIcon/rest'],
+        md: theme.components['input/size/md/helperIcon/rest'],
+      },
+      variant: { default: theme.components['input/variant/default/value/empty/helperIcon/rest'] },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/helperIcon/rest'],
+        filled: theme.components['input/variant/default/value/filled/helperIcon/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/helperIcon/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/helperIcon/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/helperIcon/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/helperIcon/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/helperIcon/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/helperIcon/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/helperIcon/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/helperIcon/readonly'],
+      },
+    ],
+  },
+  helperText: {
+    variants: {
+      size: {
+        lg: theme.components['input/size/lg/helperText/rest'],
+        md: theme.components['input/size/md/helperText/rest'],
+      },
+      variant: { default: theme.components['input/variant/default/value/empty/helperText/rest'] },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/helperText/rest'],
+        filled: theme.components['input/variant/default/value/filled/helperText/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/helperText/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/helperText/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/helperText/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/helperText/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/helperText/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/helperText/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/helperText/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/helperText/readonly'],
+      },
+    ],
+  },
+  input: {
+    variants: {
+      size: {
+        lg: theme.components['input/size/lg/input/rest'],
+        md: theme.components['input/size/md/input/rest'],
+      },
+      variant: { default: theme.components['input/variant/default/value/empty/input/rest'] },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/input/rest'],
+        filled: theme.components['input/variant/default/value/filled/input/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/input/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/input/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/input/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/input/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/input/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/input/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/input/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/input/readonly'],
+      },
+    ],
+  },
+  inputPlaceholder: {
+    variants: {
+      variant: {
+        default: theme.components['input/variant/default/value/empty/inputPlaceholder/rest'],
+      },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/inputPlaceholder/rest'],
+        filled: theme.components['input/variant/default/value/filled/inputPlaceholder/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/inputPlaceholder/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/inputPlaceholder/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/inputPlaceholder/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/inputPlaceholder/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/inputPlaceholder/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/inputPlaceholder/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/inputPlaceholder/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/inputPlaceholder/readonly'],
+      },
+    ],
+  },
+  inputWrapper: {
+    variants: {
+      size: {
+        lg: theme.components['input/size/lg/inputWrapper/rest'],
+        md: theme.components['input/size/md/inputWrapper/rest'],
+      },
+      variant: { default: theme.components['input/variant/default/value/empty/inputWrapper/rest'] },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/inputWrapper/rest'],
+        filled: theme.components['input/variant/default/value/filled/inputWrapper/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/inputWrapper/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/inputWrapper/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/inputWrapper/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/inputWrapper/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/inputWrapper/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/inputWrapper/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/inputWrapper/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/inputWrapper/readonly'],
+      },
+    ],
+  },
+  label: {
+    variants: {
+      size: {
+        lg: theme.components['input/size/lg/label/rest'],
+        md: theme.components['input/size/md/label/rest'],
+      },
+      variant: { default: theme.components['input/variant/default/value/empty/label/rest'] },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/label/rest'],
+        filled: theme.components['input/variant/default/value/filled/label/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/label/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/label/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/label/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/label/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/label/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/label/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/label/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/label/readonly'],
+      },
+    ],
+  },
+  labelRequired: {
+    variants: {
+      variant: {
+        default: theme.components['input/variant/default/value/empty/labelRequired/rest'],
+      },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/labelRequired/rest'],
+        filled: theme.components['input/variant/default/value/filled/labelRequired/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/labelRequired/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/labelRequired/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/labelRequired/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/labelRequired/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/labelRequired/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/labelRequired/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/labelRequired/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/labelRequired/readonly'],
+      },
+    ],
+  },
+  startIcon: {
+    variants: {
+      size: {
+        lg: theme.components['input/size/lg/startIcon/rest'],
+        md: theme.components['input/size/md/startIcon/rest'],
+      },
+      variant: { default: theme.components['input/variant/default/value/empty/startIcon/rest'] },
+      disabled: { true: {} },
+      pressed: { true: {} },
+      readonly: { true: {} },
+      invalid: { true: {} },
+      value: {
+        empty: theme.components['input/variant/default/value/empty/startIcon/rest'],
+        filled: theme.components['input/variant/default/value/filled/startIcon/rest'],
+      },
+    },
+    compoundVariants: [
+      {
+        value: 'empty',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/empty/startIcon/disabled'],
+      },
+      {
+        value: 'empty',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/empty/startIcon/invalid'],
+      },
+      {
+        value: 'empty',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/empty/startIcon/pressed'],
+      },
+      {
+        value: 'empty',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/empty/startIcon/readonly'],
+      },
+      {
+        value: 'filled',
+        disabled: true,
+        styles: theme.components['input/variant/default/value/filled/startIcon/disabled'],
+      },
+      {
+        value: 'filled',
+        invalid: true,
+        styles: theme.components['input/variant/default/value/filled/startIcon/invalid'],
+      },
+      {
+        value: 'filled',
+        pressed: true,
+        styles: theme.components['input/variant/default/value/filled/startIcon/pressed'],
+      },
+      {
+        value: 'filled',
+        readonly: true,
+        styles: theme.components['input/variant/default/value/filled/startIcon/readonly'],
+      },
+    ],
+  },
+}));
+
+/**
+ * Layer-based styles for Link.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * linkStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: linkStyles.root, linkStyles.icon, etc.
+ * ```
+ */
+const linkStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      textStyle: {
+        body1: theme.components['link/textStyle/body1/root/rest'],
+        caption1: theme.components['link/textStyle/caption1/root/rest'],
+        caption2: theme.components['link/textStyle/caption2/root/rest'],
+        display1: theme.components['link/textStyle/display1/root/rest'],
+        display2: theme.components['link/textStyle/display2/root/rest'],
+        display3: theme.components['link/textStyle/display3/root/rest'],
+        headline1: theme.components['link/textStyle/headline1/root/rest'],
+        label1: theme.components['link/textStyle/label1/root/rest'],
+        label2: theme.components['link/textStyle/label2/root/rest'],
+        label3: theme.components['link/textStyle/label3/root/rest'],
+        label4: theme.components['link/textStyle/label4/root/rest'],
+        legal1: theme.components['link/textStyle/legal1/root/rest'],
+        title1: theme.components['link/textStyle/title1/root/rest'],
+        title2: theme.components['link/textStyle/title2/root/rest'],
+        title3: theme.components['link/textStyle/title3/root/rest'],
+        title4: theme.components['link/textStyle/title4/root/rest'],
+        ui1: theme.components['link/textStyle/ui1/root/rest'],
+        ui2: theme.components['link/textStyle/ui2/root/rest'],
+        ui3: theme.components['link/textStyle/ui3/root/rest'],
+        ui4: theme.components['link/textStyle/ui4/root/rest'],
+        ui5: theme.components['link/textStyle/ui5/root/rest'],
+        ui6: theme.components['link/textStyle/ui6/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      variant: {
+        'on-color': theme.components['link/variant/on-color/rootText/rest'],
+        primary: theme.components['link/variant/primary/rootText/rest'],
+        secondary: theme.components['link/variant/secondary/rootText/rest'],
+        tertiary: theme.components['link/variant/tertiary/rootText/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'on-color',
+        pressed: true,
+        styles: theme.components['link/variant/on-color/rootText/pressed'],
+      },
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['link/variant/primary/rootText/pressed'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['link/variant/secondary/rootText/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['link/variant/tertiary/rootText/pressed'],
+      },
+    ],
+  },
+  icon: {
+    variants: {
+      textStyle: {
+        body1: theme.components['link/textStyle/body1/icon/rest'],
+        caption1: theme.components['link/textStyle/caption1/icon/rest'],
+        caption2: theme.components['link/textStyle/caption2/icon/rest'],
+        display1: theme.components['link/textStyle/display1/icon/rest'],
+        display2: theme.components['link/textStyle/display2/icon/rest'],
+        display3: theme.components['link/textStyle/display3/icon/rest'],
+        headline1: theme.components['link/textStyle/headline1/icon/rest'],
+        label1: theme.components['link/textStyle/label1/icon/rest'],
+        label2: theme.components['link/textStyle/label2/icon/rest'],
+        label3: theme.components['link/textStyle/label3/icon/rest'],
+        label4: theme.components['link/textStyle/label4/icon/rest'],
+        legal1: theme.components['link/textStyle/legal1/icon/rest'],
+        title1: theme.components['link/textStyle/title1/icon/rest'],
+        title2: theme.components['link/textStyle/title2/icon/rest'],
+        title3: theme.components['link/textStyle/title3/icon/rest'],
+        title4: theme.components['link/textStyle/title4/icon/rest'],
+        ui1: theme.components['link/textStyle/ui1/icon/rest'],
+        ui2: theme.components['link/textStyle/ui2/icon/rest'],
+        ui3: theme.components['link/textStyle/ui3/icon/rest'],
+        ui4: theme.components['link/textStyle/ui4/icon/rest'],
+        ui5: theme.components['link/textStyle/ui5/icon/rest'],
+        ui6: theme.components['link/textStyle/ui6/icon/rest'],
+      },
+    },
+  },
+  iconEnd: {
+    variants: {
+      variant: {
+        'on-color': theme.components['link/variant/on-color/iconEnd/rest'],
+        primary: theme.components['link/variant/primary/iconEnd/rest'],
+        secondary: theme.components['link/variant/secondary/iconEnd/rest'],
+        tertiary: theme.components['link/variant/tertiary/iconEnd/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'on-color',
+        pressed: true,
+        styles: theme.components['link/variant/on-color/iconEnd/pressed'],
+      },
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['link/variant/primary/iconEnd/pressed'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['link/variant/secondary/iconEnd/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['link/variant/tertiary/iconEnd/pressed'],
+      },
+    ],
+  },
+  iconStart: {
+    variants: {
+      variant: {
+        'on-color': theme.components['link/variant/on-color/iconStart/rest'],
+        primary: theme.components['link/variant/primary/iconStart/rest'],
+        secondary: theme.components['link/variant/secondary/iconStart/rest'],
+        tertiary: theme.components['link/variant/tertiary/iconStart/rest'],
+      },
+      pressed: { true: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'on-color',
+        pressed: true,
+        styles: theme.components['link/variant/on-color/iconStart/pressed'],
+      },
+      {
+        variant: 'primary',
+        pressed: true,
+        styles: theme.components['link/variant/primary/iconStart/pressed'],
+      },
+      {
+        variant: 'secondary',
+        pressed: true,
+        styles: theme.components['link/variant/secondary/iconStart/pressed'],
+      },
+      {
+        variant: 'tertiary',
+        pressed: true,
+        styles: theme.components['link/variant/tertiary/iconStart/pressed'],
+      },
+    ],
+  },
+}));
+
+/**
+ * Layer-based styles for Menu.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * menuStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: menuStyles.root, menuStyles.icon, etc.
+ * ```
+ */
+const menuStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      item: {
+        off: theme.components['menu/item/variant/default/active/off/root/rest'],
+        on: theme.components['menu/item/variant/default/active/on/root/rest'],
+      },
+      itemCheckbox: {
+        off: theme.components['menu/itemCheckbox/variant/default/active/off/root/rest'],
+        on: theme.components['menu/itemCheckbox/variant/default/active/on/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      divider: { default: theme.components['menu/divider/variant/default/text/rest'] },
+      item: {
+        off: theme.components['menu/item/variant/default/active/off/text/rest'],
+        on: theme.components['menu/item/variant/default/active/on/text/rest'],
+      },
+      itemCheckbox: {
+        off: theme.components['menu/itemCheckbox/variant/default/active/off/text/rest'],
+        on: theme.components['menu/itemCheckbox/variant/default/active/on/text/rest'],
+      },
+    },
+  },
+  icon: {
+    variants: {
+      item: {
+        off: theme.components['menu/item/variant/default/active/off/icon/rest'],
+        on: theme.components['menu/item/variant/default/active/on/icon/rest'],
+      },
+    },
+  },
+  endIcon: {
+    variants: {
+      size: { default: theme.components['menu/size/default/endIcon/rest'] },
+      itemCheckbox: {
+        off: theme.components['menu/itemCheckbox/variant/default/active/off/endIcon/rest'],
+        on: theme.components['menu/itemCheckbox/variant/default/active/on/endIcon/rest'],
+      },
+    },
+  },
+  line: {
+    variants: {
+      divider: { default: theme.components['menu/divider/variant/default/line/rest'] },
+    },
+  },
+  startIcon: {
+    variants: {
+      size: { default: theme.components['menu/size/default/startIcon/rest'] },
+      itemCheckbox: {
+        off: theme.components['menu/itemCheckbox/variant/default/active/off/startIcon/rest'],
+        on: theme.components['menu/itemCheckbox/variant/default/active/on/startIcon/rest'],
+      },
+    },
+  },
+}));
+
+/**
+ * Layer-based styles for Radio.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * radioStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: radioStyles.root, radioStyles.icon, etc.
+ * ```
+ */
+const radioStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        md: theme.components['radio/size/md/root/rest'],
+        sm: theme.components['radio/size/sm/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      size: {
+        md: theme.components['radio/size/md/rootText/rest'],
+        sm: theme.components['radio/size/sm/rootText/rest'],
+      },
+      variant: {
+        alert: theme.components['radio/variant/alert/value/checked/rootText/rest'],
+        'alert-secondary':
+          theme.components['radio/variant/alert-secondary/value/checked/rootText/rest'],
+        primary: theme.components['radio/variant/primary/value/checked/rootText/rest'],
+        secondary: theme.components['radio/variant/secondary/value/checked/rootText/rest'],
+      },
+      pressed: { true: {} },
+      value: { checked: {}, unchecked: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert-secondary/value/checked/rootText/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        styles: theme.components['radio/variant/alert-secondary/value/checked/rootText/rest'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert-secondary/value/unchecked/rootText/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/alert-secondary/value/unchecked/rootText/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert/value/checked/rootText/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        styles: theme.components['radio/variant/alert/value/checked/rootText/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert/value/unchecked/rootText/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/alert/value/unchecked/rootText/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/primary/value/checked/rootText/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        styles: theme.components['radio/variant/primary/value/checked/rootText/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/primary/value/unchecked/rootText/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/primary/value/unchecked/rootText/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/secondary/value/checked/rootText/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        styles: theme.components['radio/variant/secondary/value/checked/rootText/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/secondary/value/unchecked/rootText/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/secondary/value/unchecked/rootText/rest'],
+      },
+    ],
+  },
+  radio: {
+    variants: {
+      size: {
+        md: theme.components['radio/size/md/radio/rest'],
+        sm: theme.components['radio/size/sm/radio/rest'],
+      },
+      variant: {
+        alert: theme.components['radio/variant/alert/value/checked/radio/rest'],
+        'alert-secondary':
+          theme.components['radio/variant/alert-secondary/value/checked/radio/rest'],
+        primary: theme.components['radio/variant/primary/value/checked/radio/rest'],
+        secondary: theme.components['radio/variant/secondary/value/checked/radio/rest'],
+      },
+      pressed: { true: {} },
+      value: { checked: {}, unchecked: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert-secondary/value/checked/radio/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        styles: theme.components['radio/variant/alert-secondary/value/checked/radio/rest'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert-secondary/value/unchecked/radio/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/alert-secondary/value/unchecked/radio/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert/value/checked/radio/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        styles: theme.components['radio/variant/alert/value/checked/radio/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert/value/unchecked/radio/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/alert/value/unchecked/radio/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/primary/value/checked/radio/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        styles: theme.components['radio/variant/primary/value/checked/radio/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/primary/value/unchecked/radio/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/primary/value/unchecked/radio/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/secondary/value/checked/radio/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        styles: theme.components['radio/variant/secondary/value/checked/radio/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/secondary/value/unchecked/radio/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/secondary/value/unchecked/radio/rest'],
+      },
+    ],
+  },
+  radioCircle: {
+    variants: {
+      variant: {
+        alert: theme.components['radio/variant/alert/value/checked/radioCircle/rest'],
+        'alert-secondary':
+          theme.components['radio/variant/alert-secondary/value/checked/radioCircle/rest'],
+        primary: theme.components['radio/variant/primary/value/checked/radioCircle/rest'],
+        secondary: theme.components['radio/variant/secondary/value/checked/radioCircle/rest'],
+      },
+      pressed: { true: {} },
+      value: { checked: {}, unchecked: {} },
+    },
+    compoundVariants: [
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert-secondary/value/checked/radioCircle/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'checked',
+        styles: theme.components['radio/variant/alert-secondary/value/checked/radioCircle/rest'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles:
+          theme.components['radio/variant/alert-secondary/value/unchecked/radioCircle/pressed'],
+      },
+      {
+        variant: 'alert-secondary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/alert-secondary/value/unchecked/radioCircle/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert/value/checked/radioCircle/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'checked',
+        styles: theme.components['radio/variant/alert/value/checked/radioCircle/rest'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/alert/value/unchecked/radioCircle/pressed'],
+      },
+      {
+        variant: 'alert',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/alert/value/unchecked/radioCircle/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/primary/value/checked/radioCircle/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'checked',
+        styles: theme.components['radio/variant/primary/value/checked/radioCircle/rest'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/primary/value/unchecked/radioCircle/pressed'],
+      },
+      {
+        variant: 'primary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/primary/value/unchecked/radioCircle/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        pressed: true,
+        styles: theme.components['radio/variant/secondary/value/checked/radioCircle/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'checked',
+        styles: theme.components['radio/variant/secondary/value/checked/radioCircle/rest'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        pressed: true,
+        styles: theme.components['radio/variant/secondary/value/unchecked/radioCircle/pressed'],
+      },
+      {
+        variant: 'secondary',
+        value: 'unchecked',
+        styles: theme.components['radio/variant/secondary/value/unchecked/radioCircle/rest'],
+      },
+    ],
+  },
+}));
+
+/**
+ * Layer-based styles for Switch.
+ * Uses compound variants for state-specific (disabled/pressed) styles.
+ *
+ * Usage:
+ * ```tsx
+ * switchStyles.useVariants({
+ *   size,
+ *   variant,
+ *   disabled: isDisabled,  // boolean
+ *   pressed: isPressed,    // boolean
+ * });
+ * // Access: switchStyles.root, switchStyles.icon, etc.
+ * ```
+ */
+const switchStyles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      size: {
+        md: theme.components['switch/size/md/root/rest'],
+        sm: theme.components['switch/size/sm/root/rest'],
+      },
+    },
+  },
+  text: {
+    variants: {
+      size: {
+        md: theme.components['switch/size/md/rootText/rest'],
+        sm: theme.components['switch/size/sm/rootText/rest'],
+      },
+    },
+  },
+  handle: {
+    variants: {
+      size: {
+        md: theme.components['switch/size/md/handle/rest'],
+        sm: theme.components['switch/size/sm/handle/rest'],
+      },
+      variant: {
+        off: theme.components['switch/variant/default/active/off/handle/rest'],
+        on: theme.components['switch/variant/default/active/on/handle/rest'],
+      },
+    },
+  },
+  handleIcon: {
+    variants: {
+      size: {
+        md: theme.components['switch/size/md/handleIcon/rest'],
+        sm: theme.components['switch/size/sm/handleIcon/rest'],
+      },
+      variant: {
+        off: theme.components['switch/variant/default/active/off/handleIcon/rest'],
+        on: theme.components['switch/variant/default/active/on/handleIcon/rest'],
+      },
+    },
+  },
+  switch: {
+    variants: {
+      size: {
+        md: theme.components['switch/size/md/switch/rest'],
+        sm: theme.components['switch/size/sm/switch/rest'],
+      },
+      variant: {
+        off: theme.components['switch/variant/default/active/off/switch/rest'],
+        on: theme.components['switch/variant/default/active/on/switch/rest'],
+      },
+    },
+  },
+}));
+
+module.exports = {
+  styles,
+  avatarStyles,
+  badgeStyles,
+  buttonStyles,
+  checkboxStyles,
+  chipStyles,
+  dividerStyles,
+  iconButtonStyles,
+  inputStyles,
+  linkStyles,
+  menuStyles,
+  radioStyles,
+  switchStyles,
+};