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

package/dist/components/Grid/Col.d.ts

@@ -6,172 +6,351 @@ declare const Col: 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: {
@@ -206,32 +385,100 @@ declare const Col: 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/Grid/Col.js

@@ -28,13 +28,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Col = void 0;
+var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
-var utils_2 = require("../../utils/utils");
 var StyledCol = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, _b = _a.span, span = _b === void 0 ? 12 : _b, small = _a.small, medium = _a.medium, large = _a.large, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
     var gutter = [core.space[4], core.space[8]];
-    var halfGutter = gutter.map(function (g) { return (0, utils_2.pxToNumber)(g) / 2 + 'px'; });
+    var halfGutter = gutter.map(function (g) { return g / 2; });
     var smallScreen = !smallAndUp;
     var percentage = (span / 12) * 100;
     var smallPercentage = small ? (small / 12) * 100 : percentage;
@@ -52,7 +52,7 @@ var StyledCol = styled_native_1.default.View(function (_a) {
             ? mediumPercentage
             : smallAndUp
                 ? smallPercentage
-                : percentage, smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? halfGutter[0] : halfGutter[1], smallScreen ? gutter[0] : gutter[1]);
+                : percentage, (0, element_core_1.numToPx)(smallScreen ? halfGutter[0] : halfGutter[1]), (0, element_core_1.numToPx)(smallScreen ? halfGutter[0] : halfGutter[1]), (0, element_core_1.numToPx)(smallScreen ? gutter[0] : gutter[1]));
 });
 var Col = (0, utils_1.styledComponentWithBreakpoints)(StyledCol);
 exports.Col = Col;