@ovotech/element-native 5.4.2 → 5.4.3-canary-faec600-428

package/dist/{src/components → components}/Accordion/styles.d.ts

@@ -509,7 +509,9 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1087,7 +1089,9 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1660,7 +1664,9 @@ export declare const StyledContainer: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{src/components → components}/ActionList/styled.d.ts

@@ -514,7 +514,9 @@ export declare const StyledActionList: (props: Omit<{
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;
@@ -1091,7 +1093,9 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1670,7 +1674,9 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2246,7 +2252,9 @@ export declare const StyledActionText: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2822,7 +2830,9 @@ export declare const StyledActionNodeWrapper: import("styled-components").Styled
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3395,7 +3405,9 @@ export declare const StyledRightIcon: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3970,7 +3982,9 @@ export declare const StyledLeftIcon: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -4545,7 +4559,9 @@ export declare const StyledTextWrapper: import("styled-components").StyledCompon
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -5123,7 +5139,9 @@ export declare const StyledHintText: import("styled-components").StyledComponent
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;
@@ -5699,7 +5717,9 @@ export declare const StyledHintText: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{src/components → components}/Badge/Badge.d.ts

@@ -525,7 +525,9 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{src/components → components}/Button/Button.styles.d.ts

@@ -511,7 +511,9 @@ export declare const StyledButtonWrapper: import("styled-components").StyledComp
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1084,7 +1086,9 @@ export declare const StyledInner: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1665,7 +1669,9 @@ export declare const StyledButtonIcon: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2245,7 +2251,9 @@ export declare const StyledButtonText: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{src/components → components}/Card/Card.styles.d.ts

@@ -515,7 +515,9 @@ export declare const AnimatedStyledCard: Animated.AnimatedComponent<(props: Omit
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;
@@ -1092,7 +1094,9 @@ export declare const BackgroundImage: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1667,7 +1671,9 @@ export declare const TappableWrapper: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{src/components → components}/Cards/AccountCard/AccountCard.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ImageSourcePropType } from 'react-native';
-export type Props = {
+type Props = {
     isBeyond?: boolean;
     avatar?: ImageSourcePropType;
     onSwitch?: () => void;
@@ -9,3 +9,4 @@ export type Props = {
     bodyText?: string;
 };
 export declare const AccountCard: React.FC<Props>;
+export {};

package/dist/components/Cards/AccountCard/AccountCard.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Button, Card, P, Strong } from '../..';
+import { ThemeContext } from '../../../styled.native';
+import { Avatar, Body, BodyContent, ButtonContainer, CardContent, TextContent, Title, TitleContent, } from './AccountCard.styles';
+const Beyond = () => {
+    const theme = useContext(ThemeContext);
+    return _jsx(P, { style: { color: theme.color.brand.bold }, children: "Beyond" });
+};
+export const AccountCard = ({ isBeyond, avatar, onSwitch, title, accNumber, bodyText, }) => {
+    const theme = useContext(ThemeContext);
+    return (_jsx(Card, { background: isBeyond ? theme.color.brand.dim : theme.color.brand.brand, children: _jsxs(CardContent, { children: [_jsx(Avatar, { source: avatar
+                        ? avatar
+                        : {
+                            uri: 'https://www.ovobyus.com/transform/4724f63c-77b0-433f-ab0c-11cdb842aab6/OVO_Detached_Day',
+                        }, resizeMode: "cover", accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Account Card Image' }), _jsxs(TextContent, { children: [_jsx(TitleContent, { children: _jsxs(Title, { children: [_jsx(Strong, { children: title }), " ", isBeyond && _jsx(Beyond, {})] }) }), _jsxs(BodyContent, { children: [_jsxs(Body, { children: ["Account Number: ", accNumber] }), _jsx(Body, { isBeyond: isBeyond, children: bodyText })] })] }), _jsx(ButtonContainer, { children: onSwitch && (_jsx(Button, { size: "small", inverted: isBeyond, iconRight: "switch", onPress: onSwitch })) })] }) }));
+};

package/dist/{src/components → components}/Cards/AccountCard/AccountCard.styles.d.ts

@@ -510,7 +510,9 @@ export declare const CardContent: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1083,7 +1085,9 @@ export declare const Avatar: import("styled-components").StyledComponent<typeof
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1656,7 +1660,9 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2229,7 +2235,9 @@ export declare const TitleContent: import("styled-components").StyledComponent<t
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2806,7 +2814,9 @@ export declare const Title: import("styled-components").StyledComponent<(props:
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3379,7 +3389,9 @@ export declare const BodyContent: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3956,7 +3968,9 @@ export declare const Body: import("styled-components").StyledComponent<(props: i
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -4531,7 +4545,9 @@ export declare const ButtonContainer: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{esm/src/components → components}/Cards/BalanceCard/BalanceCard.js

@@ -4,17 +4,15 @@ import { Image, Pressable, View } from 'react-native';
 import { Icon, P, Strong } from '../..';
 import { ThemeContext } from '../../../styled.native';
 import { CardWithBalance, CtaBar, EyebrowContainer, ImageContainer, Text, TopContent, } from './BalanceCard.styles';
-// @ts-ignore
-import BalanceImage from './balance-card-image.png';
 export const BalanceCard = ({ popOutImage, eyebrowText, eyebrowIcon, title, bodyText, ctaBanner, }) => {
     const theme = useContext(ThemeContext);
     const hasCta = Boolean(ctaBanner);
     const Wrapper = hasCta ? Pressable : View;
-    return (_jsxs(View, { children: [_jsx(ImageContainer, { children: _jsx(Image, { source: popOutImage ? popOutImage : BalanceImage, accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Balance Card Image', style: {
+    return (_jsxs(View, { children: [_jsx(ImageContainer, { children: _jsx(Image, { source: popOutImage, accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Balance Card Image', style: {
                         height: 100,
-                        aspectRatio: (Image.resolveAssetSource(popOutImage || BalanceImage)?.width ??
+                        aspectRatio: ((popOutImage && Image.resolveAssetSource(popOutImage)?.width) ??
                             1) /
-                            (Image.resolveAssetSource(popOutImage || BalanceImage)?.height ??
+                            ((popOutImage && Image.resolveAssetSource(popOutImage)?.height) ??
                                 1),
                     } }) }), _jsxs(CardWithBalance, { onPress: ctaBanner?.onPress, hasCta: hasCta, children: [_jsxs(TopContent, { children: [_jsxs(EyebrowContainer, { children: [_jsx(P, { children: _jsx(Strong, { children: eyebrowText }) }), _jsx(Icon, { name: eyebrowIcon })] }), title] }), _jsx(View, { children: _jsx(Text, { children: bodyText }) })] }), hasCta && (_jsx(Wrapper, { ...(hasCta
                     ? {

package/dist/{src/components → components}/Cards/BalanceCard/BalanceCard.styles.d.ts

@@ -510,7 +510,9 @@ export declare const CardWithBalance: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1085,7 +1087,9 @@ export declare const ImageContainer: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1658,7 +1662,9 @@ export declare const CtaBar: import("styled-components").StyledComponent<typeof
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2233,7 +2239,9 @@ export declare const TopContent: import("styled-components").StyledComponent<typ
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2806,7 +2814,9 @@ export declare const EyebrowContainer: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3383,7 +3393,9 @@ export declare const Text: import("styled-components").StyledComponent<(props: i
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{src/components → components}/Cards/IconDataCard/IconDataCard.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconNameExtended } from '../../../providers';
-export type Props = {
+type Props = {
     heading: string;
     timeframe?: string;
     value: {
@@ -22,3 +22,4 @@ export type Props = {
     size?: 'default' | 'small';
 };
 export declare const IconDataCard: React.FC<Props>;
+export {};

package/dist/{src/components → components}/Cards/IconDataCard/IconDataCard.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading2, Icon, P, Strong } from '../..';
 import { useTheme } from '../../../styled.native';
-import { CardWithIconData, HeadingContainer, IconContainer, Metric, MetricsContainer, StyledP, SubMetric, ValueContainer, ValuesWrapper, } from './IconDataCard.styles';
+import { CardWithIconData, HeadingContainer, IconContainer, Metric, MetricsContainer, StyledP, SubMetric, SubMetricsContainer, ValueContainer, ValuesWrapper, } from './IconDataCard.styles';
 const ValueBlock = ({ data, isSmall }) => {
     const theme = useTheme();
     const resolvedColor = data.iconColor ?? theme.color.brand.brand;
-    return (_jsxs(ValueContainer, { isSmall: isSmall, children: [_jsx(IconContainer, { children: _jsx(Icon, { name: data.icon, size: 16, color: resolvedColor }) }), _jsxs(MetricsContainer, { children: [_jsx(Metric, { children: data.metric }), data.metric2 && _jsx(Heading2, { children: data.metric2 }), data.subMetric && _jsx(SubMetric, { children: data.subMetric })] }), data.subtext && _jsx(P, { children: data.subtext })] }));
+    return (_jsxs(ValueContainer, { isSmall: isSmall, children: [_jsx(IconContainer, { children: _jsx(Icon, { name: data.icon, size: 16, color: resolvedColor }) }), _jsxs(MetricsContainer, { children: [_jsx(Metric, { children: data.metric }), data.metric2 && _jsx(Heading2, { children: data.metric2 }), data.subMetric && (_jsx(SubMetricsContainer, { children: _jsx(SubMetric, { children: data.subMetric }) }))] }), data.subtext && _jsx(P, { children: data.subtext })] }));
 };
 export const IconDataCard = ({ heading, timeframe, value, value2, size, }) => {
     const isSmall = size === 'small';