@ovotech/element-native 3.5.0 → 3.6.0-canary-f98cc8f-173

package/dist/components/ActionCard/ActionCard.js

@@ -49,7 +49,9 @@ var CloseIconShape_1 = require("./CloseIconShape");
 var IndicatorIconShape_1 = require("./IndicatorIconShape");
 var StyledCard = styled_native_1.default.Pressable(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
-    return "\n      border-radius: ".concat(inline ? core.space[6] : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding-bottom: ").concat(reducedBottomPadding ? core.space[1] : core.space[4], ";\n      padding: ").concat(core.space[4], ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+    var paddingVal = inline ? core.space[4] : core.space[6];
+    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return "\n      border-radius: ".concat(inline ? core.space[6] : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(paddingVal, ";\n      padding-bottom: ").concat(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal, ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
 });
 var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
     var semantic = _a.theme.semantic, inverted = _a.inverted;
@@ -64,21 +66,21 @@ var ActionCard = function (_a) {
         }
     }, []);
     var Heading = inline ? __1.Heading3 : __1.Heading2;
+    var cardPadding = parseInt(core.space[inline ? 4 : 6]);
+    var negativeMarginAdjustment = -cardPadding;
     return ((0, jsx_runtime_1.jsx)(StyledCard, __assign({ onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card") }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flex: 1 } }, { children: (0, jsx_runtime_1.jsxs)(__1.Stack, __assign({ spaceBetween: 2 }, { children: [(0, jsx_runtime_1.jsx)(Heading, __assign({ style: {
                                     color: inverted
                                         ? semantic.inverted.message.link
                                         : semantic.message.branded,
-                                    paddingRight: image || !onPressCloseButton ? 0 : parseInt(core.space[6]),
+                                    paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                 }, testID: "".concat(testID, "-heading") }, { children: title })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: {
-                                            paddingRight: !image && !title && onPressCloseButton
-                                                ? parseInt(core.space[6])
-                                                : 0,
+                                            paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
                                         } }, { children: (0, jsx_runtime_1.jsx)(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 2 }, { children: (0, jsx_runtime_1.jsx)(__1.Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle })) }))) : ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 4 }, { children: (0, jsx_runtime_1.jsx)(__1.CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, __assign({ style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',
-                        marginTop: -16,
-                        marginRight: -16,
+                        marginTop: negativeMarginAdjustment,
+                        marginRight: negativeMarginAdjustment,
                     }, maskElement: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                             width: '100%',
                             height: 165,
@@ -96,16 +98,16 @@ var ActionCard = function (_a) {
                             right: 0,
                         }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) }))) : null, onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, __assign({ style: {
                         position: 'absolute',
-                        right: -16,
-                        bottom: -16,
+                        right: negativeMarginAdjustment,
+                        bottom: negativeMarginAdjustment,
                     }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button") }, { children: [(0, jsx_runtime_1.jsx)(IndicatorIconShape_1.IndicatorIconShape, {}), (0, jsx_runtime_1.jsx)(__1.Icon, { size: 14, style: {
                                 position: 'absolute',
                                 right: inline ? 8 : 6,
                                 bottom: 16,
                             }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] }))) : null, onPressCloseButton && !onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, __assign({ style: {
                         position: 'absolute',
-                        right: -16,
-                        top: -16,
+                        right: negativeMarginAdjustment,
+                        top: negativeMarginAdjustment,
                     }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button") }, { children: [(0, jsx_runtime_1.jsx)(CloseIconShape_1.CloseIconShape, {}), (0, jsx_runtime_1.jsx)(__1.Icon, { size: 14, style: {
                                 position: 'absolute',
                                 top: inline ? 14 : 12,

package/dist/components/CTALink/CTALink.d.ts

@@ -4,7 +4,7 @@ import { CTAButton } from '../CTAButton';
 declare type CTALinkProps = Omit<ComponentProps<typeof CTAButton>, 'ref'> & {
     ref: Ref<TouchableOpacity>;
 };
-declare const CTALink: import("react").ForwardRefExoticComponent<Pick<CTALinkProps, "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps | "variant"> & import("react").RefAttributes<TouchableOpacity>>;
+declare const CTALink: import("react").ForwardRefExoticComponent<Pick<CTALinkProps, "fullWidth" | "variant" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
 declare type CTAProps = Omit<ComponentProps<typeof CTALink>, 'variant'>;
 declare const PrimaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
 declare const SecondaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;

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

@@ -1,245 +1,237 @@
 import { PropsWithChildren } from 'react';
-import { View, ViewProps } from 'react-native';
-export declare const Dl: import("react").ForwardRefExoticComponent<Pick<Omit<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: {
-        core: {
-            radius: Record<"small" | "medium" | "large" | "max", string>;
-            borderWidth: Record<"small" | "medium" | "large", string>;
-            breakpoint: Record<"small" | "medium" | "large", string | number>;
-            mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-            transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-                lightest: string;
-                lighter: string;
-                light: string;
-                base: string;
-                dark: string;
-                darker: string;
-                darkest: string;
-            }> & {
-                brand: Record<string, string>;
-            };
-            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-                native: string;
-                web: string;
-            }>;
-            fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-        };
-        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;
+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>;
+    };
+    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;
             };
-            warning: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+            lineHeight: {
+                small: string | number;
+                large: string | number;
             };
-            error: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+        };
+        heading2: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                small: string | number;
+                large: string | number;
             };
-            info: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
+            lineHeight: {
+                small: string | number;
+                large: string | number;
             };
-            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;
-                };
+        heading3: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                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;
-                };
+            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;
             };
-            heading4: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    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;
-                };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: string | number;
+            fontSize: {
+                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;
-                };
+            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;
-                };
+        };
+        body: {
+            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;
+        };
+        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;
                 };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
+                red: {
+                    foreground: string;
+                    background: string;
                 };
-            };
-            cta: {
-                primary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
+                orange: {
+                    foreground: string;
+                    background: string;
                 };
-                secondary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
+                yellow: {
+                    foreground: string;
+                    background: string;
                 };
-                destructive: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
+                green: {
+                    foreground: string;
+                    background: 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;
-                    };
+                blue: {
+                    foreground: string;
+                    background: string;
                 };
             };
         };
-    } | undefined;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<View>>;
+    };
+}, Breakpoints, never>;
 export declare const Dt: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;
 export declare const Dd: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;

package/dist/components/DescriptionList/styled.js

@@ -54,8 +54,10 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
-var List_1 = require("../List/List");
-exports.Dl = List_1.ListWrapper;
+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");
+});
 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);

package/dist/components/ErrorSummaryNotification/ErrorSummaryNotification.js

@@ -28,6 +28,7 @@ var react_1 = require("react");
 var react_native_1 = require("react-native");
 var List_1 = require("../List");
 var Notification_1 = require("../Notification");
+var P_1 = require("../P");
 var ErrorSummaryNotification = function (_a) {
     var errors = _a.errors, scrollViewRef = _a.scrollViewRef, _b = _a.scrollPos, scrollPos = _b === void 0 ? { x: 0, y: 0 } : _b, rest = __rest(_a, ["errors", "scrollViewRef", "scrollPos"]);
     var ref = (0, react_1.createRef)();
@@ -45,7 +46,7 @@ var ErrorSummaryNotification = function (_a) {
     }, [errors, scrollViewRef.current, ref.current]);
     return ((0, jsx_runtime_1.jsx)(Notification_1.ErrorNotification, __assign({ ref: ref }, rest, { children: errors.length === 0 ? null : ((0, jsx_runtime_1.jsx)(List_1.Ul, { children: errors.map(function (_a) {
                 var message = _a.message, fieldId = _a.id;
-                return ((0, jsx_runtime_1.jsx)(List_1.Li, { children: message }, fieldId));
+                return ((0, jsx_runtime_1.jsx)(List_1.Li, { children: (0, jsx_runtime_1.jsx)(P_1.P, { children: message }) }, fieldId));
             }) })) })));
 };
 exports.ErrorSummaryNotification = ErrorSummaryNotification;