@ovotech/element-native 3.4.1 → 3.5.0-canary-8ac6eb7-155

package/dist/components/DataTable/styles.d.ts

@@ -203,6 +203,10 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -431,6 +435,10 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -661,6 +669,10 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -889,6 +901,10 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1117,6 +1133,10 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1345,6 +1365,10 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1573,6 +1597,10 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1803,6 +1831,10 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -2031,6 +2063,10 @@ export declare const TableBody: import("styled-components").StyledComponent<type
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -2259,6 +2295,10 @@ export declare const TableCell: import("styled-components").StyledComponent<type
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -2489,6 +2529,10 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -2515,3 +2559,469 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
 }, {
     cellWidth: string;
 } & Breakpoints, never>;
+export declare const StyledSeparatorRow: 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>;
+    };
+    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>;
+        };
+        success: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        warning: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        error: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        info: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: 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;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                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;
+                };
+            };
+        };
+    };
+}, {
+    width?: number | undefined;
+}, never>;
+export declare const SeparatorRowText: import("styled-components").StyledComponent<typeof import("react-native").Text, {
+    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>;
+    };
+    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>;
+        };
+        success: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        warning: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        error: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
+        info: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: 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;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
+            };
+            lineHeight: {
+                small: string | number;
+                large: string | number;
+            };
+        };
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                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;
+                };
+            };
+        };
+    };
+}, Breakpoints, never>;

package/dist/components/DataTable/styles.js

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowHeading = exports.TableCell = exports.TableBody = exports.TableRowHeading = exports.TableRow = exports.TableCaption = exports.CellText = exports.TableCaptionText = exports.TableHeaderText = exports.TableHeader = exports.StyledTableContainer = void 0;
+exports.SeparatorRowText = exports.StyledSeparatorRow = exports.RowHeading = exports.TableCell = exports.TableBody = exports.TableRowHeading = exports.TableRow = exports.TableCaption = exports.CellText = exports.TableCaptionText = exports.TableHeaderText = exports.TableHeader = exports.StyledTableContainer = void 0;
 var styled_native_1 = __importStar(require("../../styled.native"));
 exports.StyledTableContainer = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
@@ -47,11 +47,11 @@ exports.TableCaptionText = styled_native_1.default.Text(function (_a) {
 });
 exports.CellText = styled_native_1.default.Text(function (_a) {
     var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n\n    font-size: ", ";\n  "])), core.fontFamily.body.native, core.lineHeight.body.large, core.fontSize.body[smallAndUp ? 'large' : 'small']);
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), core.fontFamily.body.native, core.lineHeight.body.large, core.fontSize.body[smallAndUp ? 'large' : 'small']);
 });
 exports.TableCaption = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), core.space[4], core.space[1]);
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), core.space[4], core.space[2]);
 });
 exports.TableRow = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, stripe = _a.stripe;
@@ -68,10 +68,21 @@ exports.TableRowHeading = styled_native_1.default.View(function (_a) {
 exports.TableBody = styled_native_1.default.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
 exports.TableCell = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[1], cellWidth, cellWidth === 'auto' ? 1 : 0);
+    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[2], cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 exports.RowHeading = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[1], cellWidth, cellWidth === 'auto' ? 1 : 0);
+    return (0, styled_native_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding: ", " ", ";\n      width: ", ";\n      flex: ", ";\n    "])), core.space[smallAndUp ? 3 : 2], core.space[2], cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+exports.StyledSeparatorRow = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, width = _a.width;
+    var minWidth = width
+        ? "".concat(width - parseInt(core.space[2]) * 2, "px")
+        : '100%';
+    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(semantic.surface.elevated, ";\n      padding: ").concat(core.space[1], " ").concat(core.space[2], ";\n    ");
+});
+exports.SeparatorRowText = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return "\n  flex: 1;\n  font-family: ".concat(core.fontFamily.body.native, ";\n  font-size: ").concat(core.fontSize.small[smallAndUp ? 'large' : 'small'], ";\n  line-height: ").concat(core.lineHeight.small[smallAndUp ? 'large' : 'small'], ";\n  color: ").concat(semantic.message.secondary, ";\n");
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/DataTable/types.d.ts

@@ -1,7 +1,12 @@
 import { ReactNode, Ref } from 'react';
 import { View } from 'react-native';
+export declare type SeparatorRow = {
+    content: string;
+    isSeparator: boolean;
+};
+declare type Item = ReactNode | SeparatorRow;
 export declare type TableProps = {
-    items: ReactNode[][];
+    items: Item[][];
     columnHeadings?: ReactNode[];
     caption?: ReactNode;
     rowHeadings?: boolean;
@@ -10,6 +15,7 @@ export declare type TableProps = {
     ref: Ref<View>;
 };
 export declare type TableRowProps = Pick<TableProps, 'rowHeadings' | 'striped' | 'columnWidths'> & {
-    data: ReactNode[];
+    data: Item[];
     index: number;
 };
+export {};

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

@@ -209,6 +209,10 @@ export declare const Dl: import("react").ForwardRefExoticComponent<Pick<Omit<{
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;

package/dist/components/Em/Em.d.ts

@@ -202,6 +202,10 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/ErrorText/ErrorText.d.ts

@@ -209,6 +209,10 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             };
             badge: {
                 variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
                     red: {
                         foreground: string;
                         background: string;