@ovotech/element-native 3.8.0 → 3.8.1-canary-a8563d8-232

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -7,172 +7,351 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
 } & {
     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>;
-            };
-            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;
-                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;
+            data: {
+                branded: {
+                    '1': string;
+                    '2': string;
+                    '3': string;
+                    '4': string;
                 };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
+                electric: {
+                    '1': string;
+                    '2': string;
+                    '3': string;
+                    '4': string;
                 };
-            };
-            heading3: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                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: {
@@ -207,32 +386,100 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
                     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;
                 };
             };
         };

package/dist/components/SubLabelText/SubLabelText.js

@@ -28,6 +28,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubLabelText = void 0;
+var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var StyledSubLabelText = styled_native_1.default.Text(function (_a) {
@@ -35,7 +36,7 @@ var StyledSubLabelText = styled_native_1.default.Text(function (_a) {
     var fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.body.native, core.lineHeight.body.small, semantic.message.secondary, fontSize);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), semantic.message.secondary, (0, element_core_1.numToPx)(fontSize));
 });
 var SubLabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledSubLabelText);
 exports.SubLabelText = SubLabelText;

package/dist/components/Tabs/Tab.js

@@ -51,22 +51,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tab = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var TabText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, core.space[3], core.space[smallAndUp ? 3 : 2]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.active, active = _c === void 0 ? false : _c;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), (0, element_core_1.numToPx)(core.fontSize.body.small), core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), active ? semantic.focus.outline : semantic.message.base, (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[2]));
 });
 var TabTouchable = styled_native_1.default.TouchableOpacity(function (_a) {
     var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, core = _f.core, semantic = _f.semantic, inline = _a.inline;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), stretch ? 1 : 0, core.borderWidth.small, semantic.border.differentiated, active
-        ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "], ["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "])), semantic.message.branded, core.borderWidth.medium) : '', !inline
-        ? (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "], ["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "]))) : '', last && inline
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    flex-grow: ", ";\n    border: ", " solid\n      ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    flex-grow: ", ";\n    border: ", " solid\n      ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), stretch ? 1 : 0, (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated, active
+        ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "], ["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "])), semantic.focus.outline, (0, element_core_1.numToPx)(core.borderWidth.medium)) : '', !inline
+        ? (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-top-color: transparent;\n          border-top-width: 0;\n        "], ["\n          border-top-color: transparent;\n          border-top-width: 0;\n        "]))) : '', last && inline
         ? ''
-        : (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "], ["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "]))), first && inline
+        : (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          border-right-color: transparent;\n          border-right-width: 0;\n        "], ["\n          border-right-color: transparent;\n          border-right-width: 0;\n        "]))), first && inline
         ? ''
-        : (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "], ["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "]))));
+        : (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          border-left-color: transparent;\n          border-left-width: 0;\n        "], ["\n          border-left-color: transparent;\n          border-left-width: 0;\n        "]))));
 });
 exports.Tab = (0, react_1.forwardRef)(function (_a, ref) {
     var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);