@lookiero/checkout 0.2.23 → 0.2.25

package/dist/infrastructure/ui/shared/components/atoms/input/Input.js

@@ -4,7 +4,7 @@ import { theme } from "../../../../theme/theme";
 import { style } from "./Input.style";
 const DEFAULT_HEIGHT = 56;
 const { colorGrayscaleL } = theme();
-const Input = ({ minHeight = DEFAULT_HEIGHT, style: customStyle, onChange, onContentSizeChange, ...restOfProps }) => {
+const Input = ({ minHeight = DEFAULT_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, ...restOfProps }) => {
     const [height, setHeight] = useState(minHeight);
     // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
     const handleOnContentSizeChange = useCallback((event) => {
@@ -24,6 +24,6 @@ const Input = ({ minHeight = DEFAULT_HEIGHT, style: customStyle, onChange, onCon
             element.style.height = `${Math.max(minHeight, element.scrollHeight)}px`;
         });
     }, [minHeight, onChange]);
-    return (React.createElement(TextInput, { ...restOfProps, style: [style.input, customStyle, { height }], placeholderTextColor: colorGrayscaleL, textAlignVertical: "top", onContentSizeChange: handleOnContentSizeChange, onChange: handleOnChange, testID: "input" }));
+    return (React.createElement(TextInput, { ...restOfProps, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", onChange: handleOnChange, onContentSizeChange: handleOnContentSizeChange }));
 };
 export { Input };

package/dist/infrastructure/ui/shared/components/atoms/input/Input.style.d.ts

@@ -1,18 +1,18 @@
 declare const style: {
     input: {
         lineHeight?: number | undefined;
-        paddingHorizontal: number;
-        paddingTop: number;
-        paddingBottom: number;
         borderWidth: number;
         color: string;
         fontFamily: string;
         fontSize: number;
         letterSpacing: number;
         outlineStyle: string;
-        whiteSpace: string;
         overflow: "hidden";
+        paddingBottom: number;
+        paddingHorizontal: number;
+        paddingTop: number;
         textOverflow: string;
+        whiteSpace: string;
     };
 };
 export { style };

package/dist/infrastructure/ui/shared/components/atoms/input/Input.style.js

@@ -1,21 +1,21 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
 const { borderSize, colorContent, fontBodySize3, fontBodyHeight3, fontBodyLetterSpacing3, fontMap, spaceM } = theme();
+// paddingVertical not working in multiline mode
 const style = StyleSheet.create({
     input: {
-        // paddingVertical not working in multiline mode
-        paddingHorizontal: spaceM,
-        paddingTop: spaceM,
-        paddingBottom: spaceM,
         borderWidth: borderSize,
         color: colorContent,
         fontFamily: fontMap.Body,
         fontSize: fontBodySize3,
         letterSpacing: fontBodyLetterSpacing3,
         outlineStyle: "none",
-        whiteSpace: "nowrap",
         overflow: "hidden",
+        paddingBottom: spaceM,
+        paddingHorizontal: spaceM,
+        paddingTop: spaceM,
         textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
         ...Platform.select({
             web: {
                 lineHeight: fontBodyHeight3,

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.js

@@ -4,5 +4,5 @@ import { theme } from "../../../../theme/theme";
 import { style } from "./Spinner.style";
 const { colorPrimary } = theme();
 const Spinner = () => (React.createElement(View, { style: style.container },
-    React.createElement(ActivityIndicator, { size: "large", color: colorPrimary })));
+    React.createElement(ActivityIndicator, { color: colorPrimary, size: "large" })));
 export { Spinner };

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.style.d.ts

@@ -1,8 +1,8 @@
 declare const style: {
     container: {
+        alignItems: "center";
         display: "flex";
         flex: number;
-        alignItems: "center";
         justifyContent: "center";
     };
 };

package/dist/infrastructure/ui/shared/components/atoms/spinner/Spinner.style.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
 const style = StyleSheet.create({
     container: {
+        alignItems: "center",
         display: "flex",
         flex: 1,
-        alignItems: "center",
         justifyContent: "center",
     },
 });

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.d.ts

@@ -9,6 +9,7 @@ interface ModalProps {
     readonly onClose?: () => void;
     readonly header?: ReactNode;
     readonly portalHostName?: string;
+    readonly scroll?: boolean;
     readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
     readonly style?: Partial<Record<ModalStyle, ViewProps>>;
 }

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.js

@@ -1,14 +1,14 @@
 import { Portal } from "@gorhom/portal";
 import { animated, useTransition } from "@react-spring/native";
-import React, { useCallback, useState } from "react";
-import { Dimensions, Platform, TouchableWithoutFeedback, View } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import { Dimensions, Platform, ScrollView, TouchableWithoutFeedback, View, } from "react-native";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 import { useScreenSize } from "../../../hooks/useScreenSize";
 import { ButtonIcon } from "../../molecules/buttonIcon/ButtonIcon";
 import { Row } from "../row/Row";
 import { style } from "./Modal.style";
 const TRANSITION_MODAL_SCALE = 0.9;
-const Modal = ({ children, visible, header, portalHostName, onClose, size = { M: "2/3", L: "1/3" }, style: customStyle, }) => {
+const Modal = ({ children, visible, header, portalHostName, onClose, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
     const { height: screenHeight } = Dimensions.get("screen");
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     const screenSizeWithoutInsets = screenHeight - safeAreaInsetTop;
@@ -37,12 +37,13 @@ const Modal = ({ children, visible, header, portalHostName, onClose, size = { M:
             : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
         unique: true,
     });
-    return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { style: style.container, pointerEvents: visible ? "auto" : "none", testID: "modal" },
+    const ModalContentView = useMemo(() => (scroll ? ScrollView : View), [scroll]);
+    return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { pointerEvents: visible ? "auto" : "none", style: style.container, testID: "modal" },
         React.createElement(TouchableWithoutFeedback, { onPress: visible ? onClose : undefined },
             React.createElement(animated.View, { style: [style.overlay, { opacity: overlayOpacity }, customStyle?.overlay] })),
-        React.createElement(SafeAreaView, { edges: ["right", "top", "left"], style: style.safeArea, pointerEvents: "box-none" },
-            React.createElement(Row, { style: [style.row, isSmallDevice && style.rowSmall, customStyle?.row], pointerEvents: "box-none" },
-                React.createElement(animated.View, { style: [
+        React.createElement(SafeAreaView, { edges: ["right", "top", "left"], pointerEvents: "box-none", style: style.safeArea },
+            React.createElement(Row, { pointerEvents: "box-none", style: [style.row, isSmallDevice && style.rowSmall, customStyle?.row] },
+                React.createElement(animated.View, { pointerEvents: visible ? "auto" : "none", style: [
                         style.modal,
                         columnSizeForScreenSize && style.modal[columnSizeForScreenSize],
                         {
@@ -51,10 +52,11 @@ const Modal = ({ children, visible, header, portalHostName, onClose, size = { M:
                             maxHeight: screenSizeWithoutInsets,
                         },
                         customStyle?.modal,
-                    ], onLayout: handleOnModalLayout, pointerEvents: visible ? "auto" : "none" },
+                    ], onLayout: handleOnModalLayout },
                     (header || onClose) && (React.createElement(View, { style: [style.header, customStyle?.header] },
                         React.createElement(View, null, header),
-                        onClose && (React.createElement(ButtonIcon, { style: { button: [style.closeButton, customStyle?.closeButton] }, name: "close", onPress: onClose })))),
-                    children))))))));
+                        onClose && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
+                    React.createElement(ModalContentView, null,
+                        React.createElement(View, { style: { paddingBottom: safeAreaInsetBottom } }, children))))))))));
 };
 export { Modal };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.d.ts

@@ -1,30 +1,16 @@
 import { ViewStyle } from "react-native";
 declare const style: {
     container: {
-        position: "absolute";
-        width: string;
         height: string;
         overflow: "hidden";
-    };
-    overlay: {
-        zIndex: number;
-        backgroundColor: string;
         position: "absolute";
         width: string;
-        height: string;
-        cursor: string;
-    };
-    safeArea: {
-        flex: number;
-        zIndex: number;
     };
-    row: {
-        flex: number;
-        alignContent: "center";
-        justifyContent: "center";
-    };
-    rowSmall: {
-        justifyContent: "flex-end";
+    header: {
+        alignItems: "center";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        padding: number;
     };
     modal: {
         "1/4": ViewStyle;
@@ -36,14 +22,25 @@ declare const style: {
         width: string;
         zIndex: number;
     };
-    header: {
-        alignItems: "center";
-        justifyContent: "space-between";
-        padding: number;
-        flexDirection: "row";
+    overlay: {
+        backgroundColor: string;
+        cursor: string;
+        height: string;
+        position: "absolute";
+        width: string;
+        zIndex: number;
     };
-    closeButton: {
-        alignSelf: "flex-end";
+    row: {
+        alignContent: "center";
+        flex: number;
+        justifyContent: "center";
+    };
+    rowSmall: {
+        justifyContent: "flex-end";
+    };
+    safeArea: {
+        flex: number;
+        zIndex: number;
     };
 };
 export { style };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.js

@@ -17,46 +17,43 @@ const modalStylesForColumSize = {
 };
 const style = StyleSheet.create({
     container: {
-        position: "absolute",
-        width: "100%",
         height: "100%",
         overflow: "hidden",
+        position: "absolute",
+        width: "100%",
+    },
+    header: {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        padding: spaceM,
+    },
+    modal: {
+        backgroundColor: colorBase,
+        position: "absolute",
+        width: "100%",
+        zIndex: 3,
+        ...modalStylesForColumSize,
     },
     overlay: {
-        zIndex: 1,
         backgroundColor: colorOverlay,
+        cursor: "pointer",
+        height: "100%",
         position: "absolute",
         width: "100%",
-        height: "100%",
-        cursor: "pointer",
-    },
-    safeArea: {
-        flex: 1,
-        zIndex: 2,
+        zIndex: 1,
     },
     row: {
-        flex: 1,
         alignContent: "center",
+        flex: 1,
         justifyContent: "center",
     },
     rowSmall: {
         justifyContent: "flex-end",
     },
-    modal: {
-        backgroundColor: colorBase,
-        position: "absolute",
-        width: "100%",
-        zIndex: 3,
-        ...modalStylesForColumSize,
-    },
-    header: {
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: spaceM,
-        flexDirection: "row",
-    },
-    closeButton: {
-        alignSelf: "flex-end",
+    safeArea: {
+        flex: 1,
+        zIndex: 2,
     },
 });
 export { style };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.style.d.ts

@@ -1,10 +1,10 @@
 declare const style: {
     row: {
+        alignItems: "center";
         flexWrap: "wrap";
+        marginHorizontal: string;
         maxWidth: number;
         width: string;
-        alignItems: "center";
-        marginHorizontal: string;
     };
     rowLarge: {
         maxWidth: number;

package/dist/infrastructure/ui/shared/components/layouts/row/Row.style.js

@@ -4,11 +4,11 @@ const { spaceXXL, layoutMaxWidth } = theme();
 const rowLargeMaxWidth = layoutMaxWidth - 2 * spaceXXL;
 const style = StyleSheet.create({
     row: {
+        alignItems: "center",
         flexWrap: "wrap",
+        marginHorizontal: "auto",
         maxWidth: layoutMaxWidth,
         width: "100%",
-        alignItems: "center",
-        marginHorizontal: "auto",
     },
     rowLarge: {
         maxWidth: rowLargeMaxWidth,

package/dist/infrastructure/ui/shared/components/layouts/slider/Pagination.js

@@ -2,10 +2,10 @@ import React from "react";
 import { Pressable, View } from "react-native";
 import { style } from "./Pagination.style";
 const Pagination = ({ touchable = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, count = 0, activeIndex = 0, renderItem, onChange, }) => (React.createElement(View, { style: [style.paginationWrapper, paginationStyle], testID: "slider-pagination" }, Array.from(Array(count).keys()).map((index) => (React.createElement(View, { key: index, style: style.paginationContainer },
-    React.createElement(Pressable, { onPress: !touchable ? undefined : () => onChange(index), style: [
+    React.createElement(Pressable, { testID: "slider-pagination-item", style: [
             style.paginationItem,
             activeIndex === index && style.active,
             paginationItemStyle,
             activeIndex === index && paginationActiveItemStyle,
-        ], testID: "slider-pagination-item" }, renderItem?.(index)))))));
+        ], onPress: !touchable ? undefined : () => onChange(index) }, renderItem?.(index)))))));
 export { Pagination };

package/dist/infrastructure/ui/shared/components/layouts/slider/Pagination.style.d.ts

@@ -1,23 +1,23 @@
 declare const style: {
-    paginationWrapper: {
-        alignItems: "center";
-        bottom: number;
-        flexDirection: "row";
-        justifyContent: "center";
-        position: "absolute";
-        width: string;
+    active: {
+        backgroundColor: string;
     };
     paginationContainer: {
         margin: number;
     };
     paginationItem: {
-        width: number;
-        height: number;
-        borderRadius: number;
         backgroundColor: string;
+        borderRadius: number;
+        height: number;
+        width: number;
     };
-    active: {
-        backgroundColor: string;
+    paginationWrapper: {
+        alignItems: "center";
+        bottom: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        position: "absolute";
+        width: string;
     };
 };
 export { style };

package/dist/infrastructure/ui/shared/components/layouts/slider/Pagination.style.js

@@ -3,25 +3,25 @@ import { theme } from "../../../../theme/theme";
 const { colorGrayscaleS, colorGrayscaleXL } = theme();
 const DOT_SIZE = 8;
 const style = StyleSheet.create({
-    paginationWrapper: {
-        alignItems: "center",
-        bottom: 10,
-        flexDirection: "row",
-        justifyContent: "center",
-        position: "absolute",
-        width: "100%",
+    active: {
+        backgroundColor: colorGrayscaleXL,
     },
     paginationContainer: {
         margin: 3,
     },
     paginationItem: {
-        width: DOT_SIZE,
-        height: DOT_SIZE,
-        borderRadius: DOT_SIZE / 2,
         backgroundColor: colorGrayscaleS,
+        borderRadius: DOT_SIZE / 2,
+        height: DOT_SIZE,
+        width: DOT_SIZE,
     },
-    active: {
-        backgroundColor: colorGrayscaleXL,
+    paginationWrapper: {
+        alignItems: "center",
+        bottom: 10,
+        flexDirection: "row",
+        justifyContent: "center",
+        position: "absolute",
+        width: "100%",
     },
 });
 export { style };

package/dist/infrastructure/ui/shared/components/layouts/slider/Slider.js

@@ -120,13 +120,13 @@ const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5,
         widthRef.current = width;
         fixState();
     }, [fixState]);
-    return (React.createElement(View, { style: style.container, onLayout: onLayoutWrapper, testID: "slider" },
+    return (React.createElement(View, { style: style.container, testID: "slider", onLayout: onLayoutWrapper },
         React.createElement(Animated.View, { style: StyleSheet.flatten([
                 {
                     transform: [{ translateX: pan.x }, { translateY: pan.y }],
                 },
                 style.sliderAreaStyle,
             ]), ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width }, testID: "slider-child" }, child)))),
-        paginationEnabled && (React.createElement(Pagination, { count: count, activeIndex: getActiveIndex(), onChange: (index) => goTo(index), paginationStyle: paginationStyle, paginationItemStyle: paginationItemStyle, paginationActiveItemStyle: paginationActiveItemStyle, renderItem: paginationRenderItem }))));
+        paginationEnabled && (React.createElement(Pagination, { activeIndex: getActiveIndex(), count: count, paginationActiveItemStyle: paginationActiveItemStyle, paginationItemStyle: paginationItemStyle, paginationStyle: paginationStyle, renderItem: paginationRenderItem, onChange: (index) => goTo(index) }))));
 };
 export { Slider };

package/dist/infrastructure/ui/shared/components/molecules/buttonIcon/ButtonIcon.d.ts

@@ -1,14 +1,16 @@
 import { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, TouchableHighlightProps, ViewStyle } from "react-native";
 import { IconName, IconStyle } from "../../atoms/icon/Icon";
 interface ButtonIconStyle {
     readonly button: StyleProp<ViewStyle>;
     readonly icon: IconStyle;
 }
-interface ButtonIconProps {
+interface ButtonIconBaseProps {
     readonly name: IconName;
+    readonly testID?: string;
     readonly style?: Partial<ButtonIconStyle>;
-    readonly onPress: () => void;
+}
+interface ButtonIconProps extends Omit<TouchableHighlightProps, keyof ButtonIconBaseProps>, ButtonIconBaseProps {
 }
 declare const ButtonIcon: FC<ButtonIconProps>;
 export { ButtonIcon };

package/dist/infrastructure/ui/shared/components/molecules/buttonIcon/ButtonIcon.js

@@ -2,6 +2,6 @@ import React from "react";
 import { TouchableHighlight } from "react-native";
 import { Icon } from "../../atoms/icon/Icon";
 import { buttonIconUnderlayColor, style } from "./ButtonIcon.style";
-const ButtonIcon = ({ name, style: customStyle, onPress }) => (React.createElement(TouchableHighlight, { style: [style.buttonIcon, customStyle?.button], onPress: onPress, underlayColor: buttonIconUnderlayColor, testID: "button-icon" },
+const ButtonIcon = ({ name, style: customStyle, testID = "button-icon", onPress, ...restProps }) => (React.createElement(TouchableHighlight, { style: [style.buttonIcon, customStyle?.button], testID: testID, underlayColor: buttonIconUnderlayColor, onPress: onPress, ...restProps },
     React.createElement(Icon, { name: name, style: customStyle?.icon })));
 export { ButtonIcon };

package/dist/infrastructure/ui/shared/components/molecules/inputField/InputField.js

@@ -6,7 +6,7 @@ import { Field } from "../../atoms/field/Field";
 import { Icon } from "../../atoms/icon/Icon";
 import { Input } from "../../atoms/input/Input";
 import { style } from "./InputField.style";
-const { colorContent, colorGrayscaleL, colorPrimary, spaceM, iconSize } = theme();
+const { colorBase, colorContent, colorGrayscaleL, colorPrimary, spaceM, iconSize } = theme();
 const inputPaddingRightWithIcon = iconSize + spaceM * 2;
 const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange = () => void 0, icon, ...inputRestProps }) => {
     const [isFocused, setIsFocused] = useState(false);
@@ -15,14 +15,14 @@ const InputField = ({ label, placeholder, value, multiline = false, minHeight, e
     const handleOnFocus = useCallback(() => setIsFocused(true), []);
     const color = error ? colorPrimary : isFocused ? colorContent : colorGrayscaleL;
     return (React.createElement(View, { style: customStyle?.inputField, testID: "input-field" },
-        React.createElement(Field, { label: label, isFocused: isFocused || !!value, style: {
+        React.createElement(Field, { isFocused: isFocused || !!value, label: label, style: {
                 field: { ...style.field, ...customStyle?.field },
                 fieldText: {
                     color,
                     ...customStyle?.fieldText,
                 },
             } }),
-        React.createElement(Input, { value: value, placeholder: placeholder, multiline: multiline, minHeight: minHeight, onChangeText: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, style: [!!icon ? { paddingRight: inputPaddingRightWithIcon } : {}, { borderColor: color }, customStyle?.input], ...inputRestProps }),
+        React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorGrayscaleL : colorBase, style: [!!icon ? { paddingRight: inputPaddingRightWithIcon } : {}, { borderColor: color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
         !!icon && React.createElement(Icon, { name: icon, style: [style.icon, { color }, customStyle?.icon] }),
         !!error && React.createElement(Error, { error: error, style: [style.error, customStyle?.error] })));
 };

package/dist/infrastructure/ui/shared/components/molecules/inputField/InputField.style.d.ts

@@ -1,12 +1,12 @@
 declare const style: {
+    error: {
+        marginLeft: number;
+        marginTop: number;
+    };
     field: {
         position: "absolute";
         zIndex: number;
     };
-    error: {
-        marginTop: number;
-        marginLeft: number;
-    };
     icon: {
         position: "absolute";
         right: number;

package/dist/infrastructure/ui/shared/components/molecules/inputField/InputField.style.js

@@ -2,14 +2,14 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
 const { spaceXS, spaceM, spaceL } = theme();
 const style = StyleSheet.create({
+    error: {
+        marginLeft: spaceL,
+        marginTop: spaceXS,
+    },
     field: {
         position: "absolute",
         zIndex: 4,
     },
-    error: {
-        marginTop: spaceXS,
-        marginLeft: spaceL,
-    },
     icon: {
         position: "absolute",
         right: spaceM,

package/dist/infrastructure/ui/views/intro/Intro.js

@@ -14,7 +14,7 @@ import { Spinner } from "../../shared/components/atoms/spinner/Spinner";
 import { style } from "./Intro.style";
 const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
     React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),
-    React.createElement(Text, { detail: true, level: 2 }, text)));
+    React.createElement(Text, { level: 2, detail: true }, text)));
 const Intro = ({ customerId }) => {
     const titleText = useI18nMessage({ id: I18nMessages.INTRO_TITLE });
     const subTitleText = useI18nMessage({ id: I18nMessages.INTRO_SUBTITLE });
@@ -34,15 +34,15 @@ const Intro = ({ customerId }) => {
         React.createElement(Body, null,
             React.createElement(View, { style: style.container },
                 React.createElement(View, { style: style.content },
-                    React.createElement(Text, { heading: true, level: 3, style: style.title }, titleText),
-                    React.createElement(Text, { body: true, level: 3, style: style.subtitle }, subTitleText),
+                    React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                    React.createElement(Text, { level: 3, style: style.subtitle, body: true }, subTitleText),
                     React.createElement(View, { style: style.discountContainer },
                         React.createElement(View, { style: style.discount },
-                            React.createElement(Text, { heading: true, level: 2 },
+                            React.createElement(Text, { level: 2, heading: true },
                                 "- ",
                                 fiveItemsDiscount),
-                            React.createElement(Text, { heading: true, level: 3, style: style.percentage }, "%")),
-                        React.createElement(Text, { body: true, level: 3 }, discountText)),
+                            React.createElement(Text, { level: 3, style: style.percentage, heading: true }, "%")),
+                        React.createElement(Text, { level: 3, body: true }, discountText)),
                     React.createElement(View, { style: style.description },
                         React.createElement(Bullet, { text: bulletOneText }),
                         React.createElement(Bullet, { text: bulletTwoText }),

package/dist/infrastructure/ui/views/intro/Intro.style.d.ts

@@ -1,4 +1,9 @@
 declare const style: {
+    bullet: {
+        alignItems: "center";
+        flexDirection: "row";
+        marginVertical: number;
+    };
     container: {
         flex: number;
         justifyContent: "space-between";
@@ -6,12 +11,17 @@ declare const style: {
     content: {
         alignItems: "center";
     };
-    title: {
+    description: {
+        borderWidth: number;
         marginBottom: number;
-        textAlign: "center";
+        padding: number;
+        width: string;
     };
-    subtitle: {
-        textAlign: "center";
+    discount: {
+        alignItems: "flex-end";
+        flexDirection: "row";
+        justifyContent: "center";
+        marginBottom: number;
     };
     discountContainer: {
         alignItems: "center";
@@ -21,28 +31,18 @@ declare const style: {
         textAlign: "center";
         width: string;
     };
-    discount: {
-        alignItems: "flex-end";
-        flexDirection: "row";
-        justifyContent: "center";
-        marginBottom: number;
-    };
     percentage: {
         marginLeft: number;
     };
-    description: {
-        borderWidth: number;
-        marginBottom: number;
-        padding: number;
-        width: string;
-    };
-    bullet: {
-        alignItems: "center";
-        flexDirection: "row";
-        marginVertical: number;
+    subtitle: {
+        textAlign: "center";
     };
     tickIcon: {
         marginRight: number;
     };
+    title: {
+        marginBottom: number;
+        textAlign: "center";
+    };
 };
 export { style };