@ovotech/element-native 4.1.9 → 4.2.0-canary-7a84545-291

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

@@ -96,6 +96,22 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
             black: number;
         };
         fontSize: {
+            display0: {
+                small: number;
+                large: number;
+            };
+            display1: {
+                small: number;
+                large: number;
+            };
+            display2: {
+                small: number;
+                large: number;
+            };
+            display3: {
+                small: number;
+                large: number;
+            };
             heading1: {
                 small: number;
                 large: number;
@@ -135,6 +151,22 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
             extraCompressed: number;
         };
         lineHeight: {
+            display0: {
+                small: number;
+                large: number;
+            };
+            display1: {
+                small: number;
+                large: number;
+            };
+            display2: {
+                small: number;
+                large: number;
+            };
+            display3: {
+                small: number;
+                large: number;
+            };
             heading1: {
                 small: number;
                 large: number;
@@ -386,6 +418,54 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
                 surfaceInverted: string;
             };
         };
+        display0: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display3: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
         heading1: {
             fontFamily: string;
             fontWeight: number;
@@ -585,6 +665,22 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
             black: number;
         };
         fontSize: {
+            display0: {
+                small: number;
+                large: number;
+            };
+            display1: {
+                small: number;
+                large: number;
+            };
+            display2: {
+                small: number;
+                large: number;
+            };
+            display3: {
+                small: number;
+                large: number;
+            };
             heading1: {
                 small: number;
                 large: number;
@@ -624,6 +720,22 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
             extraCompressed: number;
         };
         lineHeight: {
+            display0: {
+                small: number;
+                large: number;
+            };
+            display1: {
+                small: number;
+                large: number;
+            };
+            display2: {
+                small: number;
+                large: number;
+            };
+            display3: {
+                small: number;
+                large: number;
+            };
             heading1: {
                 small: number;
                 large: number;
@@ -875,6 +987,54 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
                 surfaceInverted: string;
             };
         };
+        display0: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display3: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
         heading1: {
             fontFamily: string;
             fontWeight: number;
@@ -1070,6 +1230,22 @@ export declare const StyledContainer: import("styled-components").StyledComponen
             black: number;
         };
         fontSize: {
+            display0: {
+                small: number;
+                large: number;
+            };
+            display1: {
+                small: number;
+                large: number;
+            };
+            display2: {
+                small: number;
+                large: number;
+            };
+            display3: {
+                small: number;
+                large: number;
+            };
             heading1: {
                 small: number;
                 large: number;
@@ -1109,6 +1285,22 @@ export declare const StyledContainer: import("styled-components").StyledComponen
             extraCompressed: number;
         };
         lineHeight: {
+            display0: {
+                small: number;
+                large: number;
+            };
+            display1: {
+                small: number;
+                large: number;
+            };
+            display2: {
+                small: number;
+                large: number;
+            };
+            display3: {
+                small: number;
+                large: number;
+            };
             heading1: {
                 small: number;
                 large: number;
@@ -1360,6 +1552,54 @@ export declare const StyledContainer: import("styled-components").StyledComponen
                 surfaceInverted: string;
             };
         };
+        display0: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display3: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
         heading1: {
             fontFamily: string;
             fontWeight: number;

package/dist/components/ActionCard/ActionCard.js

@@ -35,7 +35,6 @@ var react_native_1 = require("react-native");
 var __1 = require("../");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var P_1 = require("../P");
-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;
@@ -47,6 +46,10 @@ var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
     var semantic = _a.theme.semantic, inverted = _a.inverted;
     return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
 });
+var CloseIconWrapper = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return "\n    padding: ".concat((0, element_core_1.numToPx)(core.space[2]), ";\n    background-color: ").concat(semantic.surface.elevated, ";\n    border-radius: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n");
+});
 var ActionCard = function (_a) {
     var _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.actionIconName, actionIconName = _c === void 0 ? 'chevron-right-small' : _c, body = _a.body, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, _d = _a.inline, inline = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onMount = _a.onMount, onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, testID = _a.testID, title = _a.title;
     var _f = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _f.core, semantic = _f.semantic;
@@ -63,50 +66,46 @@ var ActionCard = function (_a) {
     var Heading = inline ? __1.Heading3 : __1.Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    return ((0, jsx_runtime_1.jsx)(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
-                                    color: inverted
-                                        ? semantic.inverted.message.link
-                                        : semantic.message.branded,
-                                    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, { style: {
-                                            paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                        }, children: (0, jsx_runtime_1.jsx)(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(__1.Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 4, children: (0, jsx_runtime_1.jsx)(__1.CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, { style: {
-                        flex: 1,
-                        flexDirection: 'row',
-                        height: '100%',
-                        marginTop: negativeMarginAdjustment,
-                        marginRight: negativeMarginAdjustment,
-                    }, maskElement: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
-                            width: '100%',
-                            height: 165,
-                            backgroundColor: 'olive',
-                            transform: [
-                                { rotate: '-16deg' },
-                                { translateX: 40 },
-                                { translateY: 25 },
-                            ],
-                        } }), children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { resizeMode: "cover", source: image, style: {
-                            width: '100%',
-                            height: 200,
-                            position: 'absolute',
-                            top: 0,
-                            right: 0,
-                        }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: {
-                        position: 'absolute',
-                        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: {
+    return ((0, jsx_runtime_1.jsxs)(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
+                                        color: inverted
+                                            ? semantic.inverted.message.link
+                                            : semantic.message.branded,
+                                        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, { style: {
+                                                paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
+                                            }, children: (0, jsx_runtime_1.jsx)(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(__1.Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 4, children: (0, jsx_runtime_1.jsx)(__1.CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, { style: {
+                            flex: 1,
+                            flexDirection: 'row',
+                            height: '100%',
+                            marginTop: negativeMarginAdjustment,
+                            marginRight: negativeMarginAdjustment,
+                        }, maskElement: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                                width: '100%',
+                                height: 165,
+                                backgroundColor: 'olive',
+                                transform: [
+                                    { rotate: '-16deg' },
+                                    { translateX: 40 },
+                                    { translateY: 25 },
+                                ],
+                            } }), children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { resizeMode: "cover", source: image, style: {
+                                width: '100%',
+                                height: 200,
                                 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, { style: {
-                        position: 'absolute',
-                        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,
-                                right: inline ? 14 : 12,
-                            }, color: semantic.surface.elevated, name: "cross", accessibilityLabel: "close" })] })) : null] }) }));
+                                top: 0,
+                                right: 0,
+                            }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: {
+                            position: 'absolute',
+                            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.jsx)(react_native_1.Pressable, { style: {
+                    position: 'absolute',
+                    right: core.space[2],
+                    top: core.space[2],
+                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: (0, jsx_runtime_1.jsx)(CloseIconWrapper, { inverted: inverted, children: (0, jsx_runtime_1.jsx)(__1.Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
 };
 exports.ActionCard = ActionCard;

package/dist/components/ActionList/ActionList.js

@@ -48,7 +48,7 @@ var ActionList = function (_a) {
 exports.ActionList = ActionList;
 var ActionWrapper = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
 });
 var Action = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);