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

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

@@ -3,172 +3,351 @@ import { ViewProps } from 'react-native';
 import { Breakpoints } from '../../hooks';
 export declare const Dl: 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>;
+        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: {
@@ -203,32 +382,100 @@ export declare const Dl: import("styled-components").StyledComponent<typeof impo
                 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/DescriptionList/styled.js

@@ -51,21 +51,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dd = exports.Dt = exports.Dl = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 exports.Dl = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return "\n  flex-direction: column;\n  flex: 1;\n  margin-vertical: ".concat(smallAndUp ? core.space[3] : core.space[2], ";\n");
+    return "\n  flex-direction: column;\n  flex: 1;\n  margin-vertical: ".concat(smallAndUp ? (0, element_core_1.numToPx)(core.space[3]) : (0, element_core_1.numToPx)(core.space[2]), ";\n");
 });
 var StyledDtText = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "])), core.fontFamily.bodyBold.native, core.lineHeight.body.small, core.fontSize.body.small, semantic.message.base);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "])), core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), (0, element_core_1.numToPx)(core.fontSize.body.small), semantic.message.base);
 });
 var DtText = (0, utils_1.styledComponentWithBreakpoints)(StyledDtText);
 var StyledDtItem = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: ", ";\n    flex-direction: row;\n  "], ["\n    margin-top: ", ";\n    flex-direction: row;\n  "])), core.space[smallAndUp ? 4 : 3]);
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: ", ";\n    flex-direction: row;\n  "], ["\n    margin-top: ", ";\n    flex-direction: row;\n  "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 4 : 3]));
 });
 var DtItem = (0, utils_1.styledComponentWithBreakpoints)(StyledDtItem);
 var Dt = function (_a) {
@@ -75,7 +76,7 @@ var Dt = function (_a) {
 exports.Dt = Dt;
 var StyledDdText = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "])), core.fontFamily.body.native, core.lineHeight.body.small, semantic.message.secondary, core.fontSize.body.small);
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), semantic.message.secondary, (0, element_core_1.numToPx)(core.fontSize.body.small));
 });
 var Dd = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);

package/dist/components/Disclosure/Disclosure.js

@@ -51,6 +51,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Disclosure = 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"));
@@ -58,15 +59,15 @@ var Icon_1 = require("../Icon");
 var DisclosureButton = styled_native_1.default.TouchableOpacity(function () { return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "]))); });
 var DisclosureButtonIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, expanded = _a.expanded, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', core.space[smallAndUp ? 2 : 1], semantic.message.link);
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', (0, element_core_1.numToPx)(core.space[smallAndUp ? 2 : 1]), semantic.message.link);
 });
 var DisclosureButtonText = 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_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.link, semantic.message.link);
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(core.fontSize.body[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.lineHeight.body[smallAndUp ? 'large' : 'small']), semantic.message.link, semantic.message.link);
 });
 var DisclosurePanel = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), core.space[smallAndUp ? 3 : 2], core.space[smallAndUp ? 2 : 1]);
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[smallAndUp ? 2 : 1]));
 });
 exports.Disclosure = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, title = _a.title, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onToggle = _a.onToggle, rest = __rest(_a, ["children", "title", "expanded", "onToggle"]);