@ovotech/element-native 3.8.0 → 3.8.1-canary-dff71b6-233

package/dist/components/ActionList/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Theme } from '@ovotech/element-core';
+import { SpaceKey } from '@ovotech/element-core';
 import { FullWidthOptions } from '../../hooks';
 export declare const StyledActionList: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: string]: any;
@@ -8,172 +8,351 @@ export declare const StyledActionList: import("react").ForwardRefExoticComponent
 } & {
     theme?: {
         core: {
-            radius: Record<"small" | "medium" | "large" | "max", string>;
-            borderWidth: Record<"small" | "medium" | "large", string>;
-            breakpoint: Record<"small" | "medium" | "large", string | number>;
-            mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-            transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-                lightest: string;
-                lighter: string;
-                light: string;
-                base: string;
-                dark: string;
-                darker: string;
-                darkest: string;
-            }> & {
-                brand: Record<string, string>;
+            color: {
+                brand: {
+                    midnight: string;
+                    midnightTint: string;
+                    forest: string;
+                    forestTint: string;
+                    ovo: string;
+                    ovoTint: string;
+                    leaf: string;
+                    leafTint: string;
+                    energised: string;
+                    energisedTint: string;
+                    offwhite: string;
+                    white: string;
+                    black: string;
+                };
+                neutral: {
+                    darkest: string;
+                    darker: string;
+                    dark: string;
+                    base: string;
+                    light: string;
+                    lighter: string;
+                    lightest: string;
+                };
+                red: {
+                    darkest: string;
+                    darker: string;
+                    dark: string;
+                    base: string;
+                    light: string;
+                    lighter: string;
+                    lightest: string;
+                };
+                orange: {
+                    darkest: string;
+                    darker: string;
+                    dark: string;
+                    base: string;
+                    light: string;
+                    lighter: string;
+                    lightest: string;
+                };
+                yellow: {
+                    darkest: string;
+                    darker: string;
+                    dark: string;
+                    base: string;
+                    light: string;
+                    lighter: string;
+                    lightest: string;
+                };
+                green: {
+                    darkest: string;
+                    darker: string;
+                    dark: string;
+                    base: string;
+                    light: string;
+                    lighter: string;
+                    lightest: string;
+                };
+                blue: {
+                    darkest: string;
+                    darker: string;
+                    dark: string;
+                    base: string;
+                    light: string;
+                    lighter: string;
+                    lightest: string;
+                };
+            };
+            fontFamily: {
+                mono: {
+                    native: string;
+                    web: string;
+                };
+                heading: {
+                    native: string;
+                    web: string;
+                };
+                body: {
+                    native: string;
+                    web: string;
+                };
+                bodyBold: {
+                    native: string;
+                    web: string;
+                };
+            };
+            fontWeight: {
+                book: number;
+                bold: number;
+                black: number;
+            };
+            fontSize: {
+                heading1: {
+                    small: number;
+                    large: number;
+                };
+                heading2: {
+                    small: number;
+                    large: number;
+                };
+                heading3: {
+                    small: number;
+                    large: number;
+                };
+                heading4: {
+                    small: number;
+                    large: number;
+                };
+                lead: {
+                    small: number;
+                    large: number;
+                };
+                body: {
+                    small: number;
+                    large: number;
+                };
+                small: {
+                    small: number;
+                    large: number;
+                };
+                label: {
+                    small: number;
+                    large: number;
+                };
+            };
+            letterSpacing: {
+                base: number;
+                compressed: number;
+                extraCompressed: number;
+            };
+            lineHeight: {
+                heading1: {
+                    small: number;
+                    large: number;
+                };
+                heading2: {
+                    small: number;
+                    large: number;
+                };
+                heading3: {
+                    small: number;
+                    large: number;
+                };
+                heading4: {
+                    small: number;
+                    large: number;
+                };
+                lead: {
+                    small: number;
+                    large: number;
+                };
+                body: {
+                    small: number;
+                    large: number;
+                };
+                small: {
+                    small: number;
+                    large: number;
+                };
+                label: {
+                    small: number;
+                    large: number;
+                };
+            };
+            borderWidth: {
+                small: number;
+                medium: number;
+                large: number;
+            };
+            breakpoint: {
+                small: number;
+                medium: number;
+                large: number;
+            };
+            mediaQuery: {
+                small: number;
+                medium: number;
+                large: number;
+            };
+            customMediaQuery: {
+                'small-and-up': number;
+                'medium-and-up': number;
+                'large-and-up': number;
+            };
+            opacity: {
+                solid: number;
+                translucent: number;
+                transparent: number;
+            };
+            radius: {
+                small: number;
+                medium: number;
+                large: number;
+                max: number;
+            };
+            space: {
+                '0': number;
+                '1': number;
+                '2': number;
+                '3': number;
+                '4': number;
+                '5': number;
+                '6': number;
+                '7': number;
+                '8': number;
+                '9': number;
+                '10': number;
+                '11': number;
+                '12': number;
+                '13': number;
+                '14': number;
+                '15': number;
+            };
+            transition: {
+                slow: number;
+                medium: number;
+                fast: number;
             };
-            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-                native: string;
-                web: string;
-            }>;
-            fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
         };
         semantic: {
-            surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-            border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"surface" | "border", string> & {
-                message: Record<"base" | "link" | "secondary" | "branded", string>;
+            border: {
+                graphic: string;
+                differentiated: string;
+                functional: string;
             };
-            success: {
-                border: string;
+            branded: {
                 surface: string;
+                message: string;
+                heading: string;
+            };
+            neutral: {
+                surface: string;
+                message: string;
                 surfaceEmphasis: string;
+                messageOnEmphasis: string;
+                border: string;
+            };
+            success: {
+                surface: string;
                 message: string;
+                surfaceEmphasis: string;
                 messageOnEmphasis: string;
+                border: string;
             };
             warning: {
-                border: string;
                 surface: string;
-                surfaceEmphasis: string;
                 message: string;
+                surfaceEmphasis: string;
                 messageOnEmphasis: string;
+                border: string;
             };
             error: {
-                border: string;
                 surface: string;
-                surfaceEmphasis: string;
                 message: string;
+                surfaceEmphasis: string;
                 messageOnEmphasis: string;
+                border: string;
             };
             info: {
-                border: string;
                 surface: string;
-                surfaceEmphasis: string;
                 message: string;
+                surfaceEmphasis: string;
                 messageOnEmphasis: string;
+                border: string;
             };
-            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-        };
-        component: {
-            heading1: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading2: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
+            data: {
+                branded: {
+                    '1': string;
+                    '2': string;
+                    '3': string;
+                    '4': string;
                 };
-            };
-            heading3: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
+                electric: {
+                    '1': string;
+                    '2': string;
+                    '3': string;
+                    '4': string;
                 };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
+                gas: {
+                    '1': string;
+                    '2': string;
+                    '3': string;
+                    '4': string;
                 };
             };
-            heading4: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
+            focus: {
+                outline: string;
+                hover: string;
+                surface: string;
             };
-            lead: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
+            inverted: {
+                surface: string;
+                surfaceAlt: string;
+                border: string;
+                borderAlt: string;
+                message: {
+                    branded: string;
+                    base: string;
+                    secondary: string;
+                    link: string;
                 };
             };
-            body: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
+            message: {
+                base: string;
+                secondary: string;
+                link: string;
+                error: string;
+                branded: string;
             };
-            small: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
+            surface: {
+                base: string;
+                cutout: string;
+                elevated: string;
             };
-            label: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
+        };
+        component: {
+            badge: {
+                variants: {
+                    neutral: {
+                        background: string;
+                        foreground: string;
+                    };
+                    red: {
+                        background: string;
+                        foreground: string;
+                    };
+                    orange: {
+                        background: string;
+                        foreground: string;
+                    };
+                    yellow: {
+                        background: string;
+                        foreground: string;
+                    };
+                    green: {
+                        background: string;
+                        foreground: string;
+                    };
+                    blue: {
+                        background: string;
+                        foreground: string;
+                    };
                 };
             };
             cta: {
@@ -208,32 +387,100 @@ export declare const StyledActionList: import("react").ForwardRefExoticComponent
                     backgroundFocused: string;
                 };
             };
-            badge: {
-                variants: {
-                    neutral: {
-                        foreground: string;
-                        background: string;
-                    };
-                    red: {
-                        foreground: string;
-                        background: string;
-                    };
-                    orange: {
-                        foreground: string;
-                        background: string;
-                    };
-                    yellow: {
-                        foreground: string;
-                        background: string;
-                    };
-                    green: {
-                        foreground: string;
-                        background: string;
-                    };
-                    blue: {
-                        foreground: string;
-                        background: string;
-                    };
+            heading1: {
+                fontFamily: string;
+                fontWeight: number;
+                lineHeight: {
+                    small: number;
+                    large: number;
+                };
+                fontSize: {
+                    small: number;
+                    large: number;
+                };
+            };
+            heading2: {
+                fontFamily: string;
+                fontWeight: number;
+                lineHeight: {
+                    small: number;
+                    large: number;
+                };
+                fontSize: {
+                    small: number;
+                    large: number;
+                };
+            };
+            heading3: {
+                fontFamily: string;
+                fontWeight: number;
+                lineHeight: {
+                    small: number;
+                    large: number;
+                };
+                fontSize: {
+                    small: number;
+                    large: number;
+                };
+            };
+            heading4: {
+                fontFamily: string;
+                fontWeight: number;
+                lineHeight: {
+                    small: number;
+                    large: number;
+                };
+                fontSize: {
+                    small: number;
+                    large: number;
+                };
+            };
+            lead: {
+                fontFamily: string;
+                fontWeight: number;
+                lineHeight: {
+                    small: number;
+                    large: number;
+                };
+                fontSize: {
+                    small: number;
+                    large: number;
+                };
+            };
+            body: {
+                fontFamily: string;
+                fontWeight: number;
+                lineHeight: {
+                    small: number;
+                    large: number;
+                };
+                fontSize: {
+                    small: number;
+                    large: number;
+                };
+            };
+            small: {
+                fontFamily: string;
+                fontWeight: number;
+                lineHeight: {
+                    small: number;
+                    large: number;
+                };
+                fontSize: {
+                    small: number;
+                    large: number;
+                };
+            };
+            label: {
+                fontFamily: string;
+                fontWeight: number;
+                lineHeight: {
+                    small: number;
+                    large: number;
+                };
+                fontSize: {
+                    small: number;
+                    large: number;
                 };
             };
         };
@@ -244,172 +491,351 @@ export declare const StyledActionList: import("react").ForwardRefExoticComponent
 }, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<import("react-native/types").View>>;
 export declare const StyledActionWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
-        radius: Record<"small" | "medium" | "large" | "max", string>;
-        borderWidth: Record<"small" | "medium" | "large", string>;
-        breakpoint: Record<"small" | "medium" | "large", string | number>;
-        mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-        transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-            lightest: string;
-            lighter: string;
-            light: string;
-            base: string;
-            dark: string;
-            darker: string;
-            darkest: string;
-        }> & {
-            brand: Record<string, string>;
-        };
-        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-            native: string;
-            web: string;
-        }>;
-        fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-    };
-    semantic: {
-        surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-        border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
-            message: Record<"base" | "link" | "secondary" | "branded", string>;
-        };
-        success: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        warning: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        error: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        info: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-    };
-    component: {
-        heading1: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
+        color: {
+            brand: {
+                midnight: string;
+                midnightTint: string;
+                forest: string;
+                forestTint: string;
+                ovo: string;
+                ovoTint: string;
+                leaf: string;
+                leafTint: string;
+                energised: string;
+                energisedTint: string;
+                offwhite: string;
+                white: string;
+                black: string;
+            };
+            neutral: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+            red: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
             };
-        };
-        heading2: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
+            orange: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+            yellow: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
             };
-        };
-        heading3: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
+            green: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+            blue: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
             };
         };
-        heading4: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
+        fontFamily: {
+            mono: {
+                native: string;
+                web: string;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+            heading: {
+                native: string;
+                web: string;
             };
-        };
-        lead: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
+            body: {
+                native: string;
+                web: string;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+            bodyBold: {
+                native: string;
+                web: string;
             };
         };
-        body: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
+        fontWeight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+        fontSize: {
+            heading1: {
+                small: number;
+                large: number;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
             };
         };
-        small: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
+        letterSpacing: {
+            base: number;
+            compressed: number;
+            extraCompressed: number;
+        };
+        lineHeight: {
+            heading1: {
+                small: number;
+                large: number;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
             };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        borderWidth: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        breakpoint: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        mediaQuery: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        customMediaQuery: {
+            'small-and-up': number;
+            'medium-and-up': number;
+            'large-and-up': number;
+        };
+        opacity: {
+            solid: number;
+            translucent: number;
+            transparent: number;
+        };
+        radius: {
+            small: number;
+            medium: number;
+            large: number;
+            max: number;
+        };
+        space: {
+            '0': number;
+            '1': number;
+            '2': number;
+            '3': number;
+            '4': number;
+            '5': number;
+            '6': number;
+            '7': number;
+            '8': number;
+            '9': number;
+            '10': number;
+            '11': number;
+            '12': number;
+            '13': number;
+            '14': number;
+            '15': number;
+        };
+        transition: {
+            slow: number;
+            medium: number;
+            fast: number;
         };
-        label: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
+    };
+    semantic: {
+        border: {
+            graphic: string;
+            differentiated: string;
+            functional: string;
+        };
+        branded: {
+            surface: string;
+            message: string;
+            heading: string;
+        };
+        neutral: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        success: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        warning: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        error: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        info: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        data: {
+            branded: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            electric: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            gas: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+        };
+        focus: {
+            outline: string;
+            hover: string;
+            surface: string;
+        };
+        inverted: {
+            surface: string;
+            surfaceAlt: string;
+            border: string;
+            borderAlt: string;
+            message: {
+                branded: string;
+                base: string;
+                secondary: string;
+                link: string;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+        };
+        message: {
+            base: string;
+            secondary: string;
+            link: string;
+            error: string;
+            branded: string;
+        };
+        surface: {
+            base: string;
+            cutout: string;
+            elevated: string;
+        };
+    };
+    component: {
+        badge: {
+            variants: {
+                neutral: {
+                    background: string;
+                    foreground: string;
+                };
+                red: {
+                    background: string;
+                    foreground: string;
+                };
+                orange: {
+                    background: string;
+                    foreground: string;
+                };
+                yellow: {
+                    background: string;
+                    foreground: string;
+                };
+                green: {
+                    background: string;
+                    foreground: string;
+                };
+                blue: {
+                    background: string;
+                    foreground: string;
+                };
             };
         };
         cta: {
@@ -444,207 +870,454 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                neutral: {
-                    foreground: string;
-                    background: string;
-                };
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
+        heading1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
-    };
-}, {
-    hasBorder?: boolean | undefined;
-    inverted?: boolean | undefined;
-}, never>;
-export declare const StyledActionInner: import("styled-components").StyledComponent<typeof import("react-native").View, {
-    core: {
-        radius: Record<"small" | "medium" | "large" | "max", string>;
-        borderWidth: Record<"small" | "medium" | "large", string>;
-        breakpoint: Record<"small" | "medium" | "large", string | number>;
-        mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-        transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-            lightest: string;
-            lighter: string;
-            light: string;
-            base: string;
-            dark: string;
-            darker: string;
-            darkest: string;
-        }> & {
-            brand: Record<string, string>;
-        };
-        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-            native: string;
-            web: string;
-        }>;
-        fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-    };
-    semantic: {
-        surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-        border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
-            message: Record<"base" | "link" | "secondary" | "branded", string>;
+        heading2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
         };
-        success: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        warning: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        error: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        info: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-    };
-    component: {
-        heading1: {
+        heading3: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
             };
-        };
-        heading2: {
-            fontFamily: string;
-            fontWeight: string | number;
             fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
             };
         };
-        heading3: {
+        heading4: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
             };
-        };
-        heading4: {
-            fontFamily: string;
-            fontWeight: string | number;
             fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
             };
         };
         lead: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         body: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         small: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         label: {
             fontFamily: string;
-            fontWeight: string | number;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
             fontSize: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+        };
+    };
+}, {
+    hasBorder?: boolean | undefined;
+    inverted?: boolean | undefined;
+}, never>;
+export declare const StyledActionInner: import("styled-components").StyledComponent<typeof import("react-native").View, {
+    core: {
+        color: {
+            brand: {
+                midnight: string;
+                midnightTint: string;
+                forest: string;
+                forestTint: string;
+                ovo: string;
+                ovoTint: string;
+                leaf: string;
+                leafTint: string;
+                energised: string;
+                energisedTint: string;
+                offwhite: string;
+                white: string;
+                black: string;
+            };
+            neutral: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            red: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            orange: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            yellow: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            green: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            blue: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+        };
+        fontFamily: {
+            mono: {
+                native: string;
+                web: string;
+            };
+            heading: {
+                native: string;
+                web: string;
+            };
+            body: {
+                native: string;
+                web: string;
+            };
+            bodyBold: {
+                native: string;
+                web: string;
+            };
+        };
+        fontWeight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+        fontSize: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        letterSpacing: {
+            base: number;
+            compressed: number;
+            extraCompressed: number;
+        };
+        lineHeight: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        borderWidth: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        breakpoint: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        mediaQuery: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        customMediaQuery: {
+            'small-and-up': number;
+            'medium-and-up': number;
+            'large-and-up': number;
+        };
+        opacity: {
+            solid: number;
+            translucent: number;
+            transparent: number;
+        };
+        radius: {
+            small: number;
+            medium: number;
+            large: number;
+            max: number;
+        };
+        space: {
+            '0': number;
+            '1': number;
+            '2': number;
+            '3': number;
+            '4': number;
+            '5': number;
+            '6': number;
+            '7': number;
+            '8': number;
+            '9': number;
+            '10': number;
+            '11': number;
+            '12': number;
+            '13': number;
+            '14': number;
+            '15': number;
+        };
+        transition: {
+            slow: number;
+            medium: number;
+            fast: number;
+        };
+    };
+    semantic: {
+        border: {
+            graphic: string;
+            differentiated: string;
+            functional: string;
+        };
+        branded: {
+            surface: string;
+            message: string;
+            heading: string;
+        };
+        neutral: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        success: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        warning: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        error: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        info: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        data: {
+            branded: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            electric: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            gas: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+        };
+        focus: {
+            outline: string;
+            hover: string;
+            surface: string;
+        };
+        inverted: {
+            surface: string;
+            surfaceAlt: string;
+            border: string;
+            borderAlt: string;
+            message: {
+                branded: string;
+                base: string;
+                secondary: string;
+                link: string;
+            };
+        };
+        message: {
+            base: string;
+            secondary: string;
+            link: string;
+            error: string;
+            branded: string;
+        };
+        surface: {
+            base: string;
+            cutout: string;
+            elevated: string;
+        };
+    };
+    component: {
+        badge: {
+            variants: {
+                neutral: {
+                    background: string;
+                    foreground: string;
+                };
+                red: {
+                    background: string;
+                    foreground: string;
+                };
+                orange: {
+                    background: string;
+                    foreground: string;
+                };
+                yellow: {
+                    background: string;
+                    foreground: string;
+                };
+                green: {
+                    background: string;
+                    foreground: string;
+                };
+                blue: {
+                    background: string;
+                    foreground: string;
+                };
             };
         };
         cta: {
@@ -679,443 +1352,1419 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                neutral: {
-                    foreground: string;
-                    background: string;
-                };
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
+        heading1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+    };
+}, {
+    fullWidth?: FullWidthOptions | undefined;
+    inline?: boolean | undefined;
+}, never>;
+export declare const StyledActionText: import("styled-components").StyledComponent<typeof import("react-native").Text, {
+    core: {
+        color: {
+            brand: {
+                midnight: string;
+                midnightTint: string;
+                forest: string;
+                forestTint: string;
+                ovo: string;
+                ovoTint: string;
+                leaf: string;
+                leafTint: string;
+                energised: string;
+                energisedTint: string;
+                offwhite: string;
+                white: string;
+                black: string;
+            };
+            neutral: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            red: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            orange: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            yellow: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            green: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            blue: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+        };
+        fontFamily: {
+            mono: {
+                native: string;
+                web: string;
+            };
+            heading: {
+                native: string;
+                web: string;
+            };
+            body: {
+                native: string;
+                web: string;
+            };
+            bodyBold: {
+                native: string;
+                web: string;
+            };
+        };
+        fontWeight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+        fontSize: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        letterSpacing: {
+            base: number;
+            compressed: number;
+            extraCompressed: number;
+        };
+        lineHeight: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        borderWidth: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        breakpoint: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        mediaQuery: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        customMediaQuery: {
+            'small-and-up': number;
+            'medium-and-up': number;
+            'large-and-up': number;
+        };
+        opacity: {
+            solid: number;
+            translucent: number;
+            transparent: number;
+        };
+        radius: {
+            small: number;
+            medium: number;
+            large: number;
+            max: number;
+        };
+        space: {
+            '0': number;
+            '1': number;
+            '2': number;
+            '3': number;
+            '4': number;
+            '5': number;
+            '6': number;
+            '7': number;
+            '8': number;
+            '9': number;
+            '10': number;
+            '11': number;
+            '12': number;
+            '13': number;
+            '14': number;
+            '15': number;
+        };
+        transition: {
+            slow: number;
+            medium: number;
+            fast: number;
+        };
+    };
+    semantic: {
+        border: {
+            graphic: string;
+            differentiated: string;
+            functional: string;
+        };
+        branded: {
+            surface: string;
+            message: string;
+            heading: string;
+        };
+        neutral: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        success: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        warning: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        error: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        info: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        data: {
+            branded: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            electric: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            gas: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+        };
+        focus: {
+            outline: string;
+            hover: string;
+            surface: string;
+        };
+        inverted: {
+            surface: string;
+            surfaceAlt: string;
+            border: string;
+            borderAlt: string;
+            message: {
+                branded: string;
+                base: string;
+                secondary: string;
+                link: string;
+            };
+        };
+        message: {
+            base: string;
+            secondary: string;
+            link: string;
+            error: string;
+            branded: string;
+        };
+        surface: {
+            base: string;
+            cutout: string;
+            elevated: string;
+        };
+    };
+    component: {
+        badge: {
+            variants: {
+                neutral: {
+                    background: string;
                     foreground: string;
+                };
+                red: {
                     background: string;
+                    foreground: string;
                 };
-                yellow: {
+                orange: {
+                    background: string;
                     foreground: string;
+                };
+                yellow: {
                     background: string;
+                    foreground: string;
                 };
                 green: {
-                    foreground: string;
                     background: string;
+                    foreground: string;
                 };
                 blue: {
-                    foreground: string;
                     background: string;
+                    foreground: string;
                 };
             };
         };
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+        };
+        heading1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
     };
 }, {
-    fullWidth?: FullWidthOptions | undefined;
-    inline?: boolean | undefined;
+    smallAndUp: boolean;
+    inverted?: boolean | undefined;
+    inList?: boolean | undefined;
 }, never>;
-export declare const StyledActionText: import("styled-components").StyledComponent<typeof import("react-native").Text, {
+export declare const StyledRightIcon: import("styled-components").StyledComponent<({ name, size, color, testID, ...rest }: import("../Icon/Icon").IconProps) => JSX.Element | null, {
     core: {
-        radius: Record<"small" | "medium" | "large" | "max", string>;
-        borderWidth: Record<"small" | "medium" | "large", string>;
-        breakpoint: Record<"small" | "medium" | "large", string | number>;
-        mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-        transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-            lightest: string;
-            lighter: string;
-            light: string;
-            base: string;
-            dark: string;
-            darker: string;
-            darkest: string;
-        }> & {
-            brand: Record<string, string>;
-        };
-        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-            native: string;
-            web: string;
-        }>;
-        fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+        color: {
+            brand: {
+                midnight: string;
+                midnightTint: string;
+                forest: string;
+                forestTint: string;
+                ovo: string;
+                ovoTint: string;
+                leaf: string;
+                leafTint: string;
+                energised: string;
+                energisedTint: string;
+                offwhite: string;
+                white: string;
+                black: string;
+            };
+            neutral: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            red: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            orange: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            yellow: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            green: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            blue: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+        };
+        fontFamily: {
+            mono: {
+                native: string;
+                web: string;
+            };
+            heading: {
+                native: string;
+                web: string;
+            };
+            body: {
+                native: string;
+                web: string;
+            };
+            bodyBold: {
+                native: string;
+                web: string;
+            };
+        };
+        fontWeight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+        fontSize: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        letterSpacing: {
+            base: number;
+            compressed: number;
+            extraCompressed: number;
+        };
+        lineHeight: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        borderWidth: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        breakpoint: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        mediaQuery: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        customMediaQuery: {
+            'small-and-up': number;
+            'medium-and-up': number;
+            'large-and-up': number;
+        };
+        opacity: {
+            solid: number;
+            translucent: number;
+            transparent: number;
+        };
+        radius: {
+            small: number;
+            medium: number;
+            large: number;
+            max: number;
+        };
+        space: {
+            '0': number;
+            '1': number;
+            '2': number;
+            '3': number;
+            '4': number;
+            '5': number;
+            '6': number;
+            '7': number;
+            '8': number;
+            '9': number;
+            '10': number;
+            '11': number;
+            '12': number;
+            '13': number;
+            '14': number;
+            '15': number;
+        };
+        transition: {
+            slow: number;
+            medium: number;
+            fast: number;
+        };
     };
     semantic: {
-        surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-        border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
-            message: Record<"base" | "link" | "secondary" | "branded", string>;
+        border: {
+            graphic: string;
+            differentiated: string;
+            functional: string;
         };
-        success: {
-            border: string;
+        branded: {
             surface: string;
+            message: string;
+            heading: string;
+        };
+        neutral: {
+            surface: string;
+            message: string;
             surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        success: {
+            surface: string;
             message: string;
+            surfaceEmphasis: string;
             messageOnEmphasis: string;
+            border: string;
         };
         warning: {
-            border: string;
             surface: string;
-            surfaceEmphasis: string;
             message: string;
+            surfaceEmphasis: string;
             messageOnEmphasis: string;
+            border: string;
         };
         error: {
-            border: string;
             surface: string;
+            message: string;
             surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        info: {
+            surface: string;
             message: string;
+            surfaceEmphasis: string;
             messageOnEmphasis: string;
+            border: string;
+        };
+        data: {
+            branded: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            electric: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            gas: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+        };
+        focus: {
+            outline: string;
+            hover: string;
+            surface: string;
+        };
+        inverted: {
+            surface: string;
+            surfaceAlt: string;
+            border: string;
+            borderAlt: string;
+            message: {
+                branded: string;
+                base: string;
+                secondary: string;
+                link: string;
+            };
+        };
+        message: {
+            base: string;
+            secondary: string;
+            link: string;
+            error: string;
+            branded: string;
+        };
+        surface: {
+            base: string;
+            cutout: string;
+            elevated: string;
+        };
+    };
+    component: {
+        badge: {
+            variants: {
+                neutral: {
+                    background: string;
+                    foreground: string;
+                };
+                red: {
+                    background: string;
+                    foreground: string;
+                };
+                orange: {
+                    background: string;
+                    foreground: string;
+                };
+                yellow: {
+                    background: string;
+                    foreground: string;
+                };
+                green: {
+                    background: string;
+                    foreground: string;
+                };
+                blue: {
+                    background: string;
+                    foreground: string;
+                };
+            };
         };
-        info: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
         };
-        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-    };
-    component: {
         heading1: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         heading2: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         heading3: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         heading4: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         lead: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         body: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         small: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         label: {
             fontFamily: string;
-            fontWeight: string | number;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
             fontSize: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
             };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+        };
+    };
+}, {
+    inverted?: boolean | undefined;
+    marginTop: SpaceKey;
+}, never>;
+export declare const StyledLeftIcon: import("styled-components").StyledComponent<({ name, size, color, testID, ...rest }: import("../Icon/Icon").IconProps) => JSX.Element | null, {
+    core: {
+        color: {
+            brand: {
+                midnight: string;
+                midnightTint: string;
+                forest: string;
+                forestTint: string;
+                ovo: string;
+                ovoTint: string;
+                leaf: string;
+                leafTint: string;
+                energised: string;
+                energisedTint: string;
+                offwhite: string;
+                white: string;
+                black: string;
+            };
+            neutral: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            red: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            orange: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            yellow: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            green: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            blue: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
             };
         };
-        cta: {
-            primary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
+        fontFamily: {
+            mono: {
+                native: string;
+                web: string;
             };
-            secondary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
+            heading: {
+                native: string;
+                web: string;
             };
-            destructive: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
+            body: {
+                native: string;
+                web: string;
+            };
+            bodyBold: {
+                native: string;
+                web: string;
             };
         };
-        badge: {
-            variants: {
-                neutral: {
-                    foreground: string;
-                    background: string;
-                };
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
+        fontWeight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+        fontSize: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
             };
         };
-    };
-}, {
-    smallAndUp: boolean;
-    inverted?: boolean | undefined;
-    inList?: boolean | undefined;
-}, never>;
-export declare const StyledRightIcon: import("styled-components").StyledComponent<({ name, size, color, testID, ...rest }: import("../Icon/Icon").IconProps) => JSX.Element | null, {
-    core: {
-        radius: Record<"small" | "medium" | "large" | "max", string>;
-        borderWidth: Record<"small" | "medium" | "large", string>;
-        breakpoint: Record<"small" | "medium" | "large", string | number>;
-        mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-        transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-            lightest: string;
-            lighter: string;
-            light: string;
-            base: string;
-            dark: string;
-            darker: string;
-            darkest: string;
-        }> & {
-            brand: Record<string, string>;
-        };
-        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-            native: string;
-            web: string;
-        }>;
-        fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+        letterSpacing: {
+            base: number;
+            compressed: number;
+            extraCompressed: number;
+        };
+        lineHeight: {
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        borderWidth: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        breakpoint: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        mediaQuery: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        customMediaQuery: {
+            'small-and-up': number;
+            'medium-and-up': number;
+            'large-and-up': number;
+        };
+        opacity: {
+            solid: number;
+            translucent: number;
+            transparent: number;
+        };
+        radius: {
+            small: number;
+            medium: number;
+            large: number;
+            max: number;
+        };
+        space: {
+            '0': number;
+            '1': number;
+            '2': number;
+            '3': number;
+            '4': number;
+            '5': number;
+            '6': number;
+            '7': number;
+            '8': number;
+            '9': number;
+            '10': number;
+            '11': number;
+            '12': number;
+            '13': number;
+            '14': number;
+            '15': number;
+        };
+        transition: {
+            slow: number;
+            medium: number;
+            fast: number;
+        };
     };
     semantic: {
-        surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-        border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
-            message: Record<"base" | "link" | "secondary" | "branded", string>;
+        border: {
+            graphic: string;
+            differentiated: string;
+            functional: string;
         };
-        success: {
-            border: string;
+        branded: {
+            surface: string;
+            message: string;
+            heading: string;
+        };
+        neutral: {
             surface: string;
+            message: string;
             surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        success: {
+            surface: string;
             message: string;
+            surfaceEmphasis: string;
             messageOnEmphasis: string;
+            border: string;
         };
         warning: {
-            border: string;
             surface: string;
-            surfaceEmphasis: string;
             message: string;
+            surfaceEmphasis: string;
             messageOnEmphasis: string;
+            border: string;
         };
         error: {
-            border: string;
             surface: string;
-            surfaceEmphasis: string;
             message: string;
+            surfaceEmphasis: string;
             messageOnEmphasis: string;
+            border: string;
         };
         info: {
-            border: string;
             surface: string;
-            surfaceEmphasis: string;
             message: string;
+            surfaceEmphasis: string;
             messageOnEmphasis: string;
+            border: string;
         };
-        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-    };
-    component: {
-        heading1: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading2: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading3: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading4: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
+        data: {
+            branded: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            electric: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+            gas: {
+                '1': string;
+                '2': string;
+                '3': string;
+                '4': string;
+            };
+        };
+        focus: {
+            outline: string;
+            hover: string;
+            surface: string;
         };
-        lead: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+        inverted: {
+            surface: string;
+            surfaceAlt: string;
+            border: string;
+            borderAlt: string;
+            message: {
+                branded: string;
+                base: string;
+                secondary: string;
+                link: string;
             };
         };
-        body: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
+        message: {
+            base: string;
+            secondary: string;
+            link: string;
+            error: string;
+            branded: string;
         };
-        small: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
+        surface: {
+            base: string;
+            cutout: string;
+            elevated: string;
         };
-        label: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
+    };
+    component: {
+        badge: {
+            variants: {
+                neutral: {
+                    background: string;
+                    foreground: string;
+                };
+                red: {
+                    background: string;
+                    foreground: string;
+                };
+                orange: {
+                    background: string;
+                    foreground: string;
+                };
+                yellow: {
+                    background: string;
+                    foreground: string;
+                };
+                green: {
+                    background: string;
+                    foreground: string;
+                };
+                blue: {
+                    background: string;
+                    foreground: string;
+                };
             };
         };
         cta: {
@@ -1150,267 +2799,100 @@ export declare const StyledRightIcon: import("styled-components").StyledComponen
                 backgroundFocused: string;
             };
         };
-        badge: {
-            variants: {
-                neutral: {
-                    foreground: string;
-                    background: string;
-                };
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
-            };
-        };
-    };
-}, {
-    inverted?: boolean | undefined;
-    marginTop: keyof Theme['core']['space'];
-}, never>;
-export declare const StyledLeftIcon: import("styled-components").StyledComponent<({ name, size, color, testID, ...rest }: import("../Icon/Icon").IconProps) => JSX.Element | null, {
-    core: {
-        radius: Record<"small" | "medium" | "large" | "max", string>;
-        borderWidth: Record<"small" | "medium" | "large", string>;
-        breakpoint: Record<"small" | "medium" | "large", string | number>;
-        mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-        transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-            lightest: string;
-            lighter: string;
-            light: string;
-            base: string;
-            dark: string;
-            darker: string;
-            darkest: string;
-        }> & {
-            brand: Record<string, string>;
-        };
-        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-            native: string;
-            web: string;
-        }>;
-        fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-    };
-    semantic: {
-        surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-        border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
-            message: Record<"base" | "link" | "secondary" | "branded", string>;
-        };
-        success: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        warning: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        error: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        info: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-    };
-    component: {
         heading1: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         heading2: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         heading3: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         heading4: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         lead: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         body: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         small: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
         label: {
             fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
+            fontWeight: number;
             lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        cta: {
-            primary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-            secondary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-            destructive: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
+                small: number;
+                large: number;
             };
-        };
-        badge: {
-            variants: {
-                neutral: {
-                    foreground: string;
-                    background: string;
-                };
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
+            fontSize: {
+                small: number;
+                large: number;
             };
         };
     };