@ovotech/element-native 2.1.0 → 2.2.0-canary-ea79e4d-74

package/dist/components/List/List.js

@@ -49,7 +49,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dd = exports.Dt = exports.Dl = exports.Li = exports.Ol = exports.Ul = void 0;
+exports.ListWrapper = exports.Dd = exports.Dt = exports.Dl = exports.Li = exports.Ol = exports.Ul = void 0;
 var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
@@ -72,7 +72,7 @@ var StyledBullet = styled_native_1.default.Text(function (_a) {
     var lineHeight = smallAndUp
         ? list.listItem.lineHeight[1]
         : list.listItem.lineHeight[0];
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), text.fontFamily, lineHeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
 });
 var StyledUlItem = styled_native_1.default.View(function () { return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n  "]))); });
 var Bullet = (0, utils_1.styledComponentWithBreakpoints)(StyledBullet);
@@ -93,6 +93,7 @@ var StyledList = styled_native_1.default.View(function (_a) {
     return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? list.marginTop[1] : list.marginTop[0], smallAndUp ? list.marginBottom[1] : list.marginBottom[0]);
 });
 var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
+exports.ListWrapper = ListWrapper;
 var Ul = function (_a) {
     var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
     var list = (0, react_1.useContext)(styled_native_1.ThemeContext).list;
@@ -115,10 +116,14 @@ var StyledLi = styled_native_1.default.Text(function (_a) {
     var lineHeight = smallAndUp
         ? list.listItem.lineHeight[1]
         : list.listItem.lineHeight[0];
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __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    "])), text.fontFamily, lineHeight, text.color, fontSize);
 });
 var Li = (0, utils_1.styledComponentWithBreakpoints)(StyledLi);
 exports.Li = Li;
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the DescriptionList component instead.
+ * */
 var Dl = ListWrapper;
 exports.Dl = Dl;
 var StyledDtText = styled_native_1.default.Text(function (_a) {
@@ -129,7 +134,7 @@ var StyledDtText = styled_native_1.default.Text(function (_a) {
     var lineHeight = smallAndUp
         ? list.listItem.lineHeight[1]
         : list.listItem.lineHeight[0];
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), list.descriptionTerm.fontFamily, list.descriptionTerm.fontWeight, lineHeight, list.descriptionTerm.color, fontSize);
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __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    "])), list.descriptionTerm.fontFamily, lineHeight, list.descriptionTerm.color, fontSize);
 });
 var DtText = (0, utils_1.styledComponentWithBreakpoints)(StyledDtText);
 var StyledDtItem = styled_native_1.default.View(function (_a) {
@@ -143,6 +148,10 @@ var StyledDtItem = styled_native_1.default.View(function (_a) {
     return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "])), marginTop, marginBottom);
 });
 var DtItem = (0, utils_1.styledComponentWithBreakpoints)(StyledDtItem);
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the DescriptionList component instead.
+ * */
 var Dt = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     return (react_1.default.createElement(DtItem, __assign({}, rest),
@@ -157,8 +166,12 @@ var StyledDdText = styled_native_1.default.Text(function (_a) {
     var lineHeight = smallAndUp
         ? list.listItem.lineHeight[1]
         : list.listItem.lineHeight[0];
-    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
+    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __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    "])), text.fontFamily, lineHeight, text.color, fontSize);
 });
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the DescriptionList component instead.
+ * */
 var Dd = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();

package/dist/components/Margin/Margin.d.ts

@@ -12,7 +12,234 @@ declare type MProps = {
     all?: SpaceKey | SpaceKey[];
     breakpoints: Breakpoints;
 };
-declare const StyledMargin: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme, MProps, never>;
+declare const StyledMargin: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").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 | 6 | 7 | 8 | 9 | 10 | 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<"heading" | "body" | "mono" | "bodyBold", {
+            native: string;
+            web: string;
+        }>;
+        fontWeight: Record<"bold" | "book" | "black", string | number>;
+        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            small: string | number;
+            large: string | number;
+        }>;
+        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<"surface" | "outline" | "hover", string>;
+        inverted: Record<"border" | "surface", 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<"gas" | "branded" | "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: {
+                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;
+                };
+            };
+        };
+    };
+}, MProps, never>;
 declare type Props = Omit<ComponentProps<typeof StyledMargin>, 'mTop' | 'mBottom' | 'mLeft' | 'mRight' | 'breakpoints'> & {
     top?: SpaceKey | SpaceKey[];
     bottom?: SpaceKey | SpaceKey[];

package/dist/components/NavHeader/NavHeader.js

@@ -42,8 +42,8 @@ var BackIcon = function () {
         react_1.default.createElement(react_native_svg_1.Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" })));
 };
 var StyledText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontWeights = _b.fontWeights, fontSizes = _b.fontSizes;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n  "])), colors.primaryContrast, fontSizes[1], fontWeights.normal, fonts.body);
+    var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontSizes = _b.fontSizes;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n  "])), colors.primaryContrast, fontSizes[1], fonts.body);
 });
 var LeftHeaderText = (0, styled_native_1.default)(StyledText)(function (_a) {
     var space = _a.theme.space;
@@ -62,8 +62,8 @@ var StyledView = (0, styled_native_1.default)(react_native_reanimated_1.default.
     return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
 });
 var StyledHeading4 = (0, styled_native_1.default)(Heading_1.Heading4)(function (_a) {
-    var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, colors = _b.colors, textAlign = _a.textAlign;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, fontWeights.bold, colors.primaryContrast, textAlign);
+    var _b = _a.theme, fonts = _b.fonts, colors = _b.colors, textAlign = _a.textAlign;
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, colors.primaryContrast, textAlign);
 });
 var StyledHeading3 = (0, styled_native_1.default)(Heading_1.Heading3)(function (_a) {
     var colors = _a.theme.colors;