@ovotech/element-native 4.1.9 → 4.2.0-canary-265b0a7-290

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -102,6 +102,22 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
                 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;
@@ -141,6 +157,22 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
                 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;
@@ -392,6 +424,54 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
                     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/TextField/TextField.d.ts

@@ -4,7 +4,7 @@ import { FieldProps } from '../Field';
 export declare const TextField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<NativeTextInput>>;

package/dist/components/TextInput/TextInput.d.ts

@@ -3,8 +3,8 @@ import { TextInput as RNTextInput } from 'react-native';
 declare const TextInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & import("react").RefAttributes<RNTextInput>>;
 export { TextInput };

package/dist/components/TextareaField/TextareaField.d.ts

@@ -4,8 +4,8 @@ import { FieldProps } from '../Field';
 export declare const TextareaField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     rows?: number | undefined;

package/dist/components/TextareaInput/TextareaInput.d.ts

@@ -7,8 +7,8 @@ type TextareaInputProps = InputProps & {
 declare const TextareaInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: string | undefined;
-    iconRight?: string | undefined;
+    iconLeft?: import("../../providers").IconNameExtended | undefined;
+    iconRight?: import("../../providers").IconNameExtended | undefined;
     rightSlot?: import("react").ReactNode;
 } & {
     rows?: number | undefined;

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

@@ -97,6 +97,22 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
             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;
@@ -136,6 +152,22 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
             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;
@@ -387,6 +419,54 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
                 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;
@@ -586,6 +666,22 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
             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;
@@ -625,6 +721,22 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
             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;
@@ -876,6 +988,54 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
                 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;
@@ -1073,6 +1233,22 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
             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;
@@ -1112,6 +1288,22 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
             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;
@@ -1363,6 +1555,54 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
                 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;
@@ -1560,6 +1800,22 @@ export declare const StyledToggleDot: 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;
@@ -1599,6 +1855,22 @@ export declare const StyledToggleDot: 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;
@@ -1850,6 +2122,54 @@ export declare const StyledToggleDot: 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/index.d.ts

@@ -12,6 +12,10 @@ export * from './DataTable';
 export * from './DateField';
 export * from './DescriptionList';
 export * from './Disclosure';
+export * from './Display0';
+export * from './Display1';
+export * from './Display2';
+export * from './Display3';
 export * from './Divider';
 export * from './Em';
 export * from './EmailField';

package/dist/components/index.js

@@ -28,6 +28,10 @@ __exportStar(require("./DataTable"), exports);
 __exportStar(require("./DateField"), exports);
 __exportStar(require("./DescriptionList"), exports);
 __exportStar(require("./Disclosure"), exports);
+__exportStar(require("./Display0"), exports);
+__exportStar(require("./Display1"), exports);
+__exportStar(require("./Display2"), exports);
+__exportStar(require("./Display3"), exports);
 __exportStar(require("./Divider"), exports);
 __exportStar(require("./Em"), exports);
 __exportStar(require("./EmailField"), exports);

package/dist/esm/components/ActionCard/ActionCard.js

@@ -6,7 +6,6 @@ import { Image, Pressable, View } from 'react-native';
 import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../';
 import styled, { ThemeContext } from '../../styled.native';
 import { P } from '../P';
-import { CloseIconShape } from './CloseIconShape';
 import { IndicatorIconShape } from './IndicatorIconShape';
 var StyledCard = styled.Pressable(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
@@ -18,6 +17,10 @@ var StyledP = styled(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.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return "\n    padding: ".concat(numToPx(core.space[2]), ";\n    background-color: ").concat(semantic.surface.elevated, ";\n    border-radius: ").concat(numToPx(core.space[6]), ";\n");
+});
 export 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 = useContext(ThemeContext), core = _f.core, semantic = _f.semantic;
@@ -34,49 +37,45 @@ export var ActionCard = function (_a) {
     var Heading = inline ? Heading3 : Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    return (_jsx(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: _jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
-                                    color: inverted
-                                        ? semantic.inverted.message.link
-                                        : semantic.message.branded,
-                                    paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
-                                }, testID: "".concat(testID, "-heading"), children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
-                                            paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                        }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
-                        flex: 1,
-                        flexDirection: 'row',
-                        height: '100%',
-                        marginTop: negativeMarginAdjustment,
-                        marginRight: negativeMarginAdjustment,
-                    }, maskElement: _jsx(View, { style: {
-                            width: '100%',
-                            height: 165,
-                            backgroundColor: 'olive',
-                            transform: [
-                                { rotate: '-16deg' },
-                                { translateX: 40 },
-                                { translateY: 25 },
-                            ],
-                        } }), children: _jsx(Image, { resizeMode: "cover", source: image, style: {
-                            width: '100%',
-                            height: 200,
-                            position: 'absolute',
-                            top: 0,
-                            right: 0,
-                        }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? (_jsxs(Pressable, { style: {
-                        position: 'absolute',
-                        right: negativeMarginAdjustment,
-                        bottom: negativeMarginAdjustment,
-                    }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button"), children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
+    return (_jsxs(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+                                        color: inverted
+                                            ? semantic.inverted.message.link
+                                            : semantic.message.branded,
+                                        paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
+                                    }, testID: "".concat(testID, "-heading"), children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
+                                                paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
+                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
+                            flex: 1,
+                            flexDirection: 'row',
+                            height: '100%',
+                            marginTop: negativeMarginAdjustment,
+                            marginRight: negativeMarginAdjustment,
+                        }, maskElement: _jsx(View, { style: {
+                                width: '100%',
+                                height: 165,
+                                backgroundColor: 'olive',
+                                transform: [
+                                    { rotate: '-16deg' },
+                                    { translateX: 40 },
+                                    { translateY: 25 },
+                                ],
+                            } }), children: _jsx(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 ? (_jsxs(Pressable, { style: {
-                        position: 'absolute',
-                        right: negativeMarginAdjustment,
-                        top: negativeMarginAdjustment,
-                    }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: [_jsx(CloseIconShape, {}), _jsx(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 ? (_jsxs(Pressable, { style: {
+                            position: 'absolute',
+                            right: negativeMarginAdjustment,
+                            bottom: negativeMarginAdjustment,
+                        }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button"), children: [_jsx(IndicatorIconShape, {}), _jsx(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 ? (_jsx(Pressable, { style: {
+                    position: 'absolute',
+                    right: core.space[2],
+                    top: core.space[2],
+                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
 };