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

package/dist/components/SkeletonCTA/SkeletonCTA.js

@@ -27,12 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonCTA = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var P_1 = require("../P");
 var SkeletonAnimation_1 = require("../SkeletonAnimation");
 var StyledSkeletonCTA = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n    height: ").concat(core.space[12], ";\n  ");
+    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n    height: ").concat((0, element_core_1.numToPx)(core.space[12]), ";\n  ");
 });
 var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);

package/dist/components/SkeletonCircle/SkeletonCircle.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonCircle = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importDefault(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var SkeletonAnimation_1 = require("../SkeletonAnimation");
 var StyledSkeletonCircleWrapper = styled_native_1.default.View(function (_a) {
     var size = _a.size;
@@ -36,7 +36,7 @@ var StyledSkeletonCircleWrapper = styled_native_1.default.View(function (_a) {
 });
 var StyledSkeletonCircle = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat((0, utils_1.pxToNumber)(size) / 2, "px;\n  ");
+    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat((0, element_core_1.pxToNumber)(size) / 2, "px;\n  ");
 });
 var SkeletonCircle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);

package/dist/components/SkeletonText/SkeletonText.js

@@ -27,13 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonText = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var P_1 = require("../P");
 var SkeletonAnimation_1 = require("../SkeletonAnimation");
 var StyledSkeletonText = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(core.space[2], ";\n    height: ").concat(aboveSmallBreakpoint ? core.fontSize.body.large : core.fontSize.body.small, ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat((0, element_core_1.numToPx)(core.space[2]), ";\n    height: ").concat(aboveSmallBreakpoint
+        ? (0, element_core_1.numToPx)(core.fontSize.body.large)
+        : (0, element_core_1.numToPx)(core.fontSize.body.small), ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });
 var SkeletonText = function (_a) {
     var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);

package/dist/components/Small/Small.d.ts

@@ -7,172 +7,351 @@ export declare const Small: 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 @@ export declare const Small: 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;
                 };
             };
         };