@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

package/dist/components/LabelText/LabelText.d.ts

@@ -11,10 +11,10 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-            color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
                 lightest: string;
                 lighter: string;
                 light: string;
@@ -30,71 +30,53 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
             message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"outline" | "surface", string>;
-            inverted: Record<"surface" | "border", string> & {
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"border" | "surface", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             warning: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             error: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             info: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            electricity: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            gas: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
+            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -225,6 +207,30 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                     backgroundFocused: string;
                 };
             };
+            badge: {
+                variants: {
+                    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;
+                    };
+                };
+            };
         };
     }) | undefined;
 } & {

package/dist/components/LabelText/LabelText.js

@@ -29,12 +29,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabelText = void 0;
 var styled_native_1 = __importStar(require("../../styled.native"));
-var theme_1 = require("../../theme");
 var utils_1 = require("../../utils");
 var StyledLabelText = styled_native_1.default.Text(function (_a) {
-    var field = _a.theme.field, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
-    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    "])), field.label.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.label.color, fontSize);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    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.bodyBold.native, core.lineHeight.body.small, semantic.message.base, fontSize);
 });
 var LabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledLabelText);
 exports.LabelText = LabelText;

package/dist/components/List/List.d.ts

@@ -1,6 +1,6 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { Text, View, ViewProps } from 'react-native';
-declare const ListWrapper: React.ForwardRefExoticComponent<Pick<Omit<{
+declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -11,10 +11,10 @@ declare const ListWrapper: React.ForwardRefExoticComponent<Pick<Omit<{
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-            color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
                 lightest: string;
                 lighter: string;
                 light: string;
@@ -30,71 +30,53 @@ declare const ListWrapper: React.ForwardRefExoticComponent<Pick<Omit<{
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
             message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"outline" | "surface", string>;
-            inverted: Record<"surface" | "border", string> & {
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"border" | "surface", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             warning: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             error: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             info: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            electricity: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            gas: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
+            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -225,17 +207,41 @@ declare const ListWrapper: React.ForwardRefExoticComponent<Pick<Omit<{
                     backgroundFocused: string;
                 };
             };
+            badge: {
+                variants: {
+                    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;
+                    };
+                };
+            };
         };
     }) | undefined;
 } & {
-    as?: string | React.ComponentType<any> | undefined;
-    forwardedAs?: string | React.ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & React.RefAttributes<View>>;
-declare const Ul: ({ children, showBullets, ...rest }: React.PropsWithChildren<ViewProps & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<View>>;
+declare const Ul: ({ children, showBullets, ...rest }: PropsWithChildren<ViewProps & {
     showBullets?: boolean | undefined;
 }>) => JSX.Element;
 declare const Ol: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;
-declare const Li: React.ForwardRefExoticComponent<Pick<Omit<{
+declare const Li: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -246,10 +252,10 @@ declare const Li: React.ForwardRefExoticComponent<Pick<Omit<{
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-            color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
                 lightest: string;
                 lighter: string;
                 light: string;
@@ -265,71 +271,53 @@ declare const Li: React.ForwardRefExoticComponent<Pick<Omit<{
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
             message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"outline" | "surface", string>;
-            inverted: Record<"surface" | "border", string> & {
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"border" | "surface", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             warning: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             error: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             info: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            electricity: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            gas: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
+            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -460,17 +448,41 @@ declare const Li: React.ForwardRefExoticComponent<Pick<Omit<{
                     backgroundFocused: string;
                 };
             };
+            badge: {
+                variants: {
+                    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;
+                    };
+                };
+            };
         };
     }) | undefined;
 } & {
-    as?: string | React.ComponentType<any> | undefined;
-    forwardedAs?: string | React.ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & React.RefAttributes<Text>>;
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
 /**
  * @deprecated This component has been deprecated and will be removed in a future release.
  * Please use the DescriptionList component instead.
  * */
-declare const Dl: React.ForwardRefExoticComponent<Pick<Omit<{
+declare const Dl: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -481,10 +493,10 @@ declare const Dl: React.ForwardRefExoticComponent<Pick<Omit<{
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-            color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
                 lightest: string;
                 lighter: string;
                 light: string;
@@ -500,71 +512,53 @@ declare const Dl: React.ForwardRefExoticComponent<Pick<Omit<{
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
                 small: string | number;
                 large: string | number;
             }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
             message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"outline" | "surface", string>;
-            inverted: Record<"surface" | "border", string> & {
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"border" | "surface", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             warning: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             error: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
             info: {
                 border: string;
                 surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            electricity: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
-            };
-            gas: {
-                border: string;
-                surface: string;
-                message: {
-                    base: string;
-                    secondary: string;
-                };
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
             };
+            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -695,12 +689,36 @@ declare const Dl: React.ForwardRefExoticComponent<Pick<Omit<{
                     backgroundFocused: string;
                 };
             };
+            badge: {
+                variants: {
+                    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;
+                    };
+                };
+            };
         };
     }) | undefined;
 } & {
-    as?: string | React.ComponentType<any> | undefined;
-    forwardedAs?: string | React.ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & React.RefAttributes<View>>;
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<View>>;
 /**
  * @deprecated This component has been deprecated and will be removed in a future release.
  * Please use the DescriptionList component instead.