@ovotech/element-native 5.4.3 → 5.6.0

package/dist/esm/components/ActionList/components/ActionListHeading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { Icon } from '../../Icon';
+import { P } from '../../P';
+import { Strong } from '../../Strong';
+import { GraphicContainer, InfoRowWrapper } from '../styled';
+export const ActionListHeading = ({ iconName, iconColor = 'surface.surface', heading, subheading, }) => (_jsxs(InfoRowWrapper, { children: [iconName && (_jsx(GraphicContainer, { children: _jsx(Icon, { name: iconName, size: 24, color: iconColor }) })), _jsxs(View, { children: [heading && (_jsx(P, { size: "xl", children: _jsx(Strong, { children: heading }) })), subheading && _jsx(P, { children: subheading })] })] }));

package/dist/esm/components/ActionList/index.js

@@ -1 +1,6 @@
-export { Action, ActionList } from './ActionList';
+export { Action } from './Action';
+export { ActionList } from './ActionList';
+export { DataListItem } from './ActionListItems/DataListItem';
+export { EditableListItem } from './ActionListItems/EditableListItem';
+export { NavigationListItem } from './ActionListItems/NavigationListItem';
+export { ToggleListItem } from './ActionListItems/ToggleListItem';

package/dist/esm/components/ActionList/styled.js

@@ -1,23 +1,22 @@
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
+import { Card } from '../Card';
 import { HintText } from '../HintText';
 import { Icon } from '../Icon';
-const StyledList = styled.View(({ theme, smallAndUp }) => css `
+const StyledList = styled(Card)(({ theme, smallAndUp, inverted }) => css `
     flex-direction: column;
+    padding-top: ${numToPx(theme.space[0])};
+    padding-bottom: ${numToPx(theme.space[0])};
     margin-top: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
     margin-bottom: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
+    background-color: ${inverted && theme.color.neutral.black};
   `);
 export const StyledActionList = styledComponentWithBreakpoints(StyledList);
-export const StyledActionWrapper = styled.View(({ theme, hasBorder, inverted, inList, hint, badgeText }) => css `
+export const StyledActionWrapper = styled.View(({ theme }) => css `
     width: 100%;
     align-self: flex-start;
-    border-bottom-width: ${hasBorder ? numToPx(theme.border.width.sm) : 0};
-    border-bottom-style: solid;
-    border-bottom-color: ${inverted
-    ? theme.color.surface.dim
-    : theme.color.brand.fixed.onBrand};
-    padding: ${inList && (hint || badgeText) ? numToPx(theme.space[200]) : 0} 0;
+    padding: ${numToPx(theme.space[400])} 0 ${numToPx(theme.space[400])} 0;
   `);
 export const StyledActionInner = styled.View(({ fullWidth, standalone }) => css `
     flex-direction: row;
@@ -72,3 +71,19 @@ export const StyledHintText = styled(HintText)(({ theme, inverted = false }) =>
         : theme.color.surface.onSurfaceVariant};
   `;
 });
+// Action List Heading
+export const GraphicContainer = styled.View(({ theme }) => css `
+    width: ${numToPx(theme.unit[1100])};
+    height: ${numToPx(theme.unit[1100])};
+    background-color: ${theme.color.surface.bright};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+    padding: ${numToPx(theme.space[200])};
+  `);
+export const InfoRowWrapper = styled.View(({ theme }) => css `
+    flex-direction: row;
+    align-items: center;
+    gap: ${numToPx(theme.space[300])};
+  `);

package/dist/esm/components/Badge/Badge.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import styled, { css, useTheme } from '../../styled.native';
@@ -15,7 +26,8 @@ const StyledBadgeText = styled.Text(({ inverted, theme, $surface, $message }) =>
     color: ${inverted ? $surface : $message};
     font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
   `);
-export const Badge = ({ children, variant = 'neutral', inverted = false, customVariant, ...rest }) => {
+export const Badge = (_a) => {
+    var { children, variant = 'neutral', inverted = false, customVariant } = _a, rest = __rest(_a, ["children", "variant", "inverted", "customVariant"]);
     const theme = useTheme();
     // check if variant is primitive, otherwise use alert colours
     const isPrimitive = Object.keys(theme.color).includes(variant);
@@ -29,10 +41,10 @@ export const Badge = ({ children, variant = 'neutral', inverted = false, customV
             theme.color[variant]['20']
         : // @ts-ignore we're checking the variants above...
             theme.color.alert[`${variant}Tint`];
-    if (customVariant?.backgroundColor !== undefined &&
-        customVariant?.color !== undefined) {
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor) !== undefined &&
+        (customVariant === null || customVariant === void 0 ? void 0 : customVariant.color) !== undefined) {
         message = customVariant.color;
         surface = customVariant.backgroundColor;
     }
-    return (_jsx(StyledBadge, { inverted: inverted, "$surface": surface, "$message": message, ...rest, children: _jsx(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) }));
+    return (_jsx(StyledBadge, Object.assign({ inverted: inverted, "$surface": surface, "$message": message }, rest, { children: _jsx(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) })));
 };

package/dist/esm/components/Button/Button.js

@@ -1,17 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useBreakpoint } from '../../hooks';
 import { StyledButtonIcon, StyledButtonText, StyledButtonWrapper, StyledInner, } from './Button.styles';
 export const DEFAULT_BUTTON_VARIANT = 'surface';
-const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = DEFAULT_BUTTON_VARIANT, inverted = false, size = 'default', accessibilityRole = 'button', activeOpacity = 0.8, ref, ...rest }) => {
+const Button = (_a) => {
+    var { iconLeft, iconRight, children, fullWidth = false, variant = DEFAULT_BUTTON_VARIANT, inverted = false, size = 'default', accessibilityRole = 'button', activeOpacity = 0.8, ref } = _a, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant", "inverted", "size", "accessibilityRole", "activeOpacity", "ref"]);
     const { smallAndUp } = useBreakpoint();
     const isIconOnly = !children;
     const iconSizes = {
-        small: 14,
+        small: 16,
         default: 16,
         large: 20,
     };
     const iconSize = iconSizes[size];
-    return (_jsx(StyledButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, ref: ref, children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && (_jsx(StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: iconSize })), children ? (_jsx(StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && (_jsx(StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: iconSize }))] }) }));
+    return (_jsx(StyledButtonWrapper, Object.assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { ref: ref, children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && (_jsx(StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: iconSize })), children ? (_jsx(StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && (_jsx(StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: iconSize }))] }) })));
 };
-const ButtonDestructive = (props) => (_jsx(Button, { variant: "destructive", ...props }));
+const ButtonDestructive = (props) => (_jsx(Button, Object.assign({ variant: "destructive" }, props)));
 export { Button, ButtonDestructive };

package/dist/esm/components/Button/Button.styles.js

@@ -15,7 +15,7 @@ export const StyledInner = styled.View(({ theme, fullWidth, inverted, variant, s
         small: theme.space[800],
         large: theme.border.radius['3xl'] * 2 - theme.border.width.sm * 2,
     };
-    const minHeight = minHeights[size];
+    const minHeight = numToPx(minHeights[size]);
     let top, right, bottom, left;
     if (size === 'default') {
         top = numToPx(theme.space[100]);

package/dist/esm/components/Card/Card.js

@@ -1,16 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Animated } from 'react-native';
+import { Animated, Pressable, View, } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import { useTheme } from '../../styled.native';
 import { AnimatedStyledCard, BackgroundImage, TappableWrapper, } from './Card.styles';
 export const getCardFlags = (props) => {
-    const { background, onPress, displayStyle } = props;
-    const hasBgImage = !!background && typeof background !== 'string';
-    const tappable = Boolean(onPress);
+    const { background, onPress, onSelect, displayStyle } = props;
+    const hasBackground = !!background;
+    const hasBgImage = hasBackground && typeof background !== 'string';
+    const selectable = Boolean(onSelect) && !onPress;
+    const pressable = Boolean(onPress) && !onSelect;
     const isDefault = displayStyle === 'default';
     const isOutline = displayStyle === 'outline';
-    return { hasBgImage, tappable, isDefault, isOutline };
+    return {
+        hasBackground,
+        hasBgImage,
+        pressable,
+        selectable,
+        isDefault,
+        isOutline,
+    };
 };
 function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
     const borderAnim = useRef(new Animated.Value(0)).current;
@@ -20,44 +40,58 @@ function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
             duration,
             useNativeDriver: false,
         }).start();
-    }, [isSelected, duration]);
+    }, [isSelected, duration, borderAnim]);
     return borderAnim.interpolate({
         inputRange: [0, 1],
         outputRange: [baseColor, selectedColor],
     });
 }
-export const Card = ({ children, displayStyle = 'default', background, onPress, ...rest }) => {
+export const Card = (_a) => {
+    var { children, displayStyle = 'default', background, onPress, onSelect } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress", "onSelect"]);
     const theme = useTheme();
     const [isFocused, setFocused] = useState(false);
     const [isSelected, setSelected] = useState(false);
     const { largeAndUp } = useBreakpoint();
-    const { hasBgImage, tappable, isDefault, isOutline } = getCardFlags({
+    const { hasBackground, hasBgImage, pressable, selectable, isDefault, isOutline, } = getCardFlags({
         background,
         onPress,
         displayStyle,
+        onSelect,
     });
     let baseBorderColor = theme.color.surface.bright;
-    if (isOutline) {
-        baseBorderColor = theme.color.surface.bright;
-    }
-    else if (isDefault) {
-        if (hasBgImage)
+    if (isDefault) {
+        if (hasBgImage) {
             baseBorderColor = 'transparent';
-        else if (typeof background === 'string')
+        }
+        else if (typeof background === 'string') {
             baseBorderColor = background;
-        else
-            baseBorderColor = theme.color.surface.bright;
+        }
     }
     const selectedBorderColor = theme.color.surface.onSurface;
-    const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, isSelected, theme.transition.duration.fast);
+    const shouldHideBorder = hasBackground && !isOutline && !pressable && !selectable;
+    const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, selectable && isSelected, theme.transition.duration.fast);
     const handlePress = () => {
+        onPress === null || onPress === void 0 ? void 0 : onPress();
+    };
+    const handleSelect = () => {
         setSelected(prev => !prev);
-        onPress?.();
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
-    const CardContent = (_jsxs(AnimatedStyledCard, { displayStyle: displayStyle, background: background, largeAndUp: largeAndUp, ...rest, style: [rest?.style, { borderColor: animatedBorderColor }], children: [hasBgImage && (_jsx(BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] }));
-    if (!tappable)
-        return CardContent;
-    return (_jsx(TappableWrapper, { onPress: handlePress, onFocus: () => setFocused(true), onBlur: () => setFocused(false), accessibilityRole: "button", focused: isFocused, largeAndUp: largeAndUp, style: ({ pressed }) => ({
+    const CardContent = (_jsxs(AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp, onPress: onPress, onSelect: onSelect }, rest, { style: [
+            {
+                borderWidth: shouldHideBorder ? 0 : theme.border.width.md,
+                borderColor: animatedBorderColor,
+            },
+            rest === null || rest === void 0 ? void 0 : rest.style,
+        ], children: [hasBgImage && (_jsx(BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] })));
+    const isInteractive = pressable || selectable;
+    return (_jsx(TappableWrapper, Object.assign({ as: isInteractive ? Pressable : View, largeAndUp: largeAndUp, tappable: isInteractive, focused: isInteractive ? isFocused : false }, (isInteractive && {
+        onPress: pressable ? handlePress : handleSelect,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        accessibilityRole: 'button',
+        style: ({ pressed }) => ({
             opacity: pressed ? 0.9 : 1,
-        }), children: CardContent }));
+        }),
+    }), { children: CardContent })));
 };

package/dist/esm/components/Card/Card.styles.js

@@ -1,30 +1,22 @@
-import { Animated, ImageBackground, Pressable, View } from 'react-native';
+import { Animated, ImageBackground, View } from 'react-native';
 import styled from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 import { getCardFlags } from './Card';
-const StyledCardBase = styled(View)(({ theme, displayStyle, background, onPress, largeAndUp, size, }) => {
-    const { hasBgImage, tappable, isDefault } = getCardFlags({
+const StyledCardBase = styled(View)(({ theme, displayStyle, background, onPress, onSelect, largeAndUp, size, }) => {
+    const { hasBgImage, pressable, selectable, isDefault } = getCardFlags({
         background,
         onPress,
+        onSelect,
         displayStyle,
     });
     const backgroundColor = hasBgImage
         ? 'transparent'
         : typeof background === 'string'
             ? background
-            : isDefault || tappable
+            : isDefault || pressable || selectable
                 ? theme.color.surface.bright
                 : 'transparent';
-    return {
-        ...(size || {}),
-        padding: theme.space[400],
-        position: 'relative',
-        borderWidth: theme.border.width.md,
-        borderStyle: 'solid',
-        borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
-        overflow: 'hidden',
-        backgroundColor,
-    };
+    return Object.assign(Object.assign({}, (size || {})), { padding: theme.space[400], position: 'relative', borderStyle: 'solid', borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'], overflow: 'hidden', backgroundColor });
 });
 const CardBase = styledComponentWithBreakpoints(StyledCardBase);
 export const AnimatedStyledCard = Animated.createAnimatedComponent(CardBase);
@@ -37,15 +29,10 @@ export const BackgroundImage = styled(ImageBackground)(({ theme, largeAndUp }) =
     borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
     overflow: 'hidden',
 }));
-export const TappableWrapper = styled(Pressable)(({ theme, focused, largeAndUp }) => ({
-    backgroundColor: 'transparent',
-    borderColor: focused ? theme.color.outline.outer : 'transparent',
-    borderWidth: theme.border.width.md,
-    borderRadius: largeAndUp ? 26 : theme.border.radius.xl,
-    padding: 2,
+export const TappableWrapper = styled(View)(({ theme, focused, tappable, largeAndUp }) => (Object.assign(Object.assign({}, (tappable && {
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
+    shadowOffset: { width: 0, height: theme.space[100] },
     shadowOpacity: 0.1,
-    shadowRadius: 10,
-    elevation: 6,
-}));
+    shadowRadius: theme.space[250],
+    elevation: theme.space[150],
+})), { backgroundColor: 'transparent', borderColor: focused ? theme.color.outline.outer : 'transparent', borderWidth: theme.border.width.md, borderRadius: largeAndUp ? 26 : theme.border.radius.xl, padding: theme.space[50] })));

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

@@ -7,11 +7,11 @@ 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, }) => {
+export const AccountCard = ({ isBeyond, avatar, onSwitch, accNumber, customerName, customerAddress, }) => {
     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 })) })] }) }));
+                        }, resizeMode: "cover", accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Account Card Image' }), _jsxs(TextContent, { children: [_jsx(TitleContent, { children: _jsxs(Title, { children: [_jsx(Strong, { children: customerName }), " ", isBeyond && _jsx(Beyond, {})] }) }), _jsxs(BodyContent, { children: [_jsxs(Body, { size: "sm", children: ["Account Number: ", accNumber] }), _jsx(Body, { size: "sm", isBeyond: isBeyond, children: customerAddress })] })] }), _jsx(ButtonContainer, { children: onSwitch && (_jsx(Button, { size: "small", inverted: isBeyond, iconRight: "switch", onPress: onSwitch })) })] }) }));
 };

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

@@ -20,12 +20,11 @@ export const Avatar = styled(ImageBackground)(({ theme }) => ({
     flexShrink: 0,
     overflow: 'hidden',
 }));
-export const TextContent = styled(View)(({ theme }) => ({
+export const TextContent = styled(View)({
     flex: 1,
     flexShrink: 1,
     flexGrow: 1,
-    fontColor: theme.color.surface.bright,
-}));
+});
 export const TitleContent = styled(View)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
@@ -33,9 +32,6 @@ export const TitleContent = styled(View)(({ theme }) => ({
 }));
 export const Title = styled(P)(({ theme }) => ({
     color: theme.color.brand.onBrand,
-    fontSize: theme.font.size.md.mediaQuery.sm,
-    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
-    fontWeight: 700,
 }));
 export const BodyContent = styled(View)(({ theme }) => ({
     display: 'flex',
@@ -44,9 +40,6 @@ export const BodyContent = styled(View)(({ theme }) => ({
 }));
 export const Body = styled(P)(({ theme, isBeyond }) => ({
     color: isBeyond ? theme.color.brand.bright : theme.color.surface.bright,
-    fontSize: theme.font.size.sm.mediaQuery.lg,
-    fontWeight: 450,
-    lineHeight: theme.font.lineHeight.sm.mediaQuery.lg,
 }));
 export const ButtonContainer = styled(View)({
     justifyContent: 'center',

package/dist/esm/components/Cards/BalanceCard/BalanceCard.js

@@ -1,24 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-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';
-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, accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Balance Card Image', style: {
-                        height: 100,
-                        aspectRatio: ((popOutImage && Image.resolveAssetSource(popOutImage)?.width) ??
-                            1) /
-                            ((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
-                    ? {
-                        onPress: ctaBanner.onPress,
-                        accessibilityRole: 'button',
-                        accessibilityLabel: ctaBanner.text,
-                    }
-                    : {}), style: { flex: 1, paddingHorizontal: 4 }, children: _jsxs(CtaBar, { children: [_jsx(Strong, { style: { color: theme.color.brand.onBrand }, children: ctaBanner?.text }), _jsx(Icon, { name: "chevron-right", color: theme.color.brand.onBrand })] }) }))] }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Pressable, View } from 'react-native';
+import { Badge, Icon, P, Strong } from '../..';
+import { BadgeContainer, BalanceContainer, EyebrowContainer, PayGText, PayMText, } from './BalanceCard.styles';
+import { BalanceDisplay, LoadingDisplay, OuterBalanceCard, } from './Components';
+export const BalanceCard = ({ image = 'home', eyebrow, balance, bodyText, ctaBanner, loading = false, }) => {
+    const wholeCardIsPressable = Boolean(ctaBanner);
+    const isUtility = image !== 'home';
+    const showContent = !loading;
+    return (_jsxs(OuterBalanceCard, { image: image, ctaBanner: ctaBanner, children: [loading && _jsx(LoadingDisplay, {}), showContent && (_jsxs(_Fragment, { children: [_jsxs(EyebrowContainer, { accessible: true, accessibilityRole: wholeCardIsPressable ? 'text' : 'button', pointerEvents: wholeCardIsPressable ? 'none' : 'auto', onPress: !wholeCardIsPressable && eyebrow.onEyebrowPress
+                            ? eyebrow.onEyebrowPress
+                            : undefined, children: [_jsx(P, { size: "lg", children: _jsx(Strong, { children: eyebrow.text }) }), eyebrow.icon && _jsx(Icon, { size: 20, name: eyebrow.icon })] }), _jsxs(Pressable, { accessible: true, accessibilityRole: wholeCardIsPressable ? 'text' : 'button', pointerEvents: wholeCardIsPressable ? 'none' : 'auto', onPress: !wholeCardIsPressable ? balance === null || balance === void 0 ? void 0 : balance.onBalancePress : undefined, children: [_jsxs(BalanceContainer, { children: [_jsx(BalanceDisplay, { amountInPence: balance.amountInPence, isPayM: !isUtility }), _jsx(View, { children: !isUtility && balance.amountInPence !== 0 && (_jsx(BadgeContainer, { children: _jsx(Badge, { children: balance.amountInPence > 0 ? 'In credit' : 'In debit' }) })) })] }), _jsx(View, { children: isUtility ? (_jsx(PayGText, { children: bodyText })) : (_jsx(PayMText, { children: bodyText })) })] })] }))] }));
 };

package/dist/esm/components/Cards/BalanceCard/BalanceCard.styles.js

@@ -1,6 +1,8 @@
-import { View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import styled from '../../../styled.native';
-import { Card } from '../../Card/Card';
+import { Card } from '../../Card';
+import { Display4 } from '../../Display';
+import { Heading1 } from '../../Heading';
 import { P } from '../../P';
 export const CardWithBalance = styled(Card)(({ theme, hasCta }) => ({
     paddingTop: theme.space[500],
@@ -8,16 +10,51 @@ export const CardWithBalance = styled(Card)(({ theme, hasCta }) => ({
     borderBottomLeftRadius: hasCta ? 0 : undefined,
     borderBottomRightRadius: hasCta ? 0 : undefined,
 }));
-export const ImageContainer = styled(View)(({ theme }) => ({
+export const CardWrapper = styled(View)(({ theme, hasNoCta }) => hasNoCta
+    ? {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: theme.space[100] },
+        shadowOpacity: 0.1,
+        shadowRadius: theme.space[250],
+        elevation: theme.space[150],
+    }
+    : {});
+export const ImageWrapper = styled(View)(({ theme, isUtility }) => ({
     position: 'absolute',
-    top: -15,
+    top: isUtility ? -16 : -26,
     right: theme.space[200],
-    zIndex: 2,
+    zIndex: 1,
 }));
-export const CtaBar = styled(View)(({ theme, largeAndUp = false }) => ({
-    minHeight: theme.space[1000],
+export const EyebrowContainer = styled(Pressable)(({ theme }) => ({
+    width: '65%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.space[100],
+    flexWrap: 'wrap',
+    marginBottom: theme.space[300],
+}));
+export const BalanceContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: theme.space[100],
+}));
+export const BadgeContainer = styled(View)(({ theme }) => ({
+    marginLeft: theme.space[200],
+    marginBottom: theme.space[200],
+}));
+export const PayGText = styled(P)(({ theme }) => ({
+    color: theme.color.surface.onSurface,
+}));
+export const PayMText = styled(P)(({ theme }) => ({
+    color: theme.color.surface.onSurfaceVariant,
+}));
+export const CtaBarContainer = styled(View)(({ theme }) => ({
+    paddingHorizontal: theme.space[100],
+}));
+export const CtaBar = styled(Pressable)(({ theme, largeAndUp = false }) => ({
+    height: theme.space[1200],
     width: '100%',
-    background: theme.color.surface.onSurface,
+    backgroundColor: theme.color.surface.onSurface,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -28,21 +65,22 @@ export const CtaBar = styled(View)(({ theme, largeAndUp = false }) => ({
     borderBottomLeftRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
     borderBottomRightRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
 }));
-export const TopContent = styled(View)(({ theme }) => ({
-    width: '64%',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.space[100],
+// Components
+export const CreditContainer = styled(View)(({ theme }) => ({
+    paddingBottom: theme.space[200],
 }));
-export const EyebrowContainer = styled(View)(({ theme }) => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.space[100],
-    flexWrap: 'wrap',
+export const StyledDisplay4 = styled(Display4)(({ theme }) => ({
+    lineHeight: `${theme.font.lineHeight.d3.mediaQuery.sm}px`,
+}));
+export const StyledHeading1 = styled(Heading1)(({ theme }) => ({
+    lineHeight: `${theme.font.lineHeight.d4.mediaQuery.sm}px`,
+}));
+export const ErrorContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'column',
+    width: '65%',
+    marginBottom: theme.space[100],
 }));
-export const Text = styled(P)(({ theme }) => ({
-    color: theme.color.brand.dim,
-    fontSize: theme.font.size.md.mediaQuery.sm,
-    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
-    fontWeight: 450,
+export const LoadingTextContainer = styled(View)(({ theme }) => ({
+    height: theme.space[500],
+    marginBottom: theme.space[300],
 }));

package/dist/esm/components/Cards/BalanceCard/BalanceCardErrorFallback.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading2 } from '../../Heading';
+import { ErrorContainer, PayGText, PayMText } from './BalanceCard.styles';
+import { OuterBalanceCard } from './Components';
+export const BalanceCardErrorFallback = ({ image = 'home', errorHeading, errorBodyText, ctaBanner }) => {
+    return (_jsxs(OuterBalanceCard, { image: image, ctaBanner: ctaBanner, children: [_jsx(ErrorContainer, { children: _jsx(Heading2, { children: errorHeading ? errorHeading : 'We couldn’t load your balance' }) }), image !== 'home' ? (_jsx(PayGText, { children: errorBodyText
+                    ? errorBodyText
+                    : 'We’re fixing it and it’ll be back soon.' })) : (_jsx(PayMText, { children: errorBodyText
+                    ? errorBodyText
+                    : 'We’re fixing it and it’ll be back soon.' }))] }));
+};