@ovotech/element-native 5.4.3 → 5.5.0

package/dist/components/Card/Card.js

@@ -1,10 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { Animated } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import { useTheme } from '../../styled.native';
-import { AnimatedStyledCard, BackgroundImage, TappableWrapper, } from './Card.styles';
-export const getCardFlags = (props) => {
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = exports.getCardFlags = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../hooks");
+const styled_native_1 = require("../../styled.native");
+const Card_styles_1 = require("./Card.styles");
+const getCardFlags = (props) => {
     const { background, onPress, displayStyle } = props;
     const hasBgImage = !!background && typeof background !== 'string';
     const tappable = Boolean(onPress);
@@ -12,10 +26,11 @@ export const getCardFlags = (props) => {
     const isOutline = displayStyle === 'outline';
     return { hasBgImage, tappable, isDefault, isOutline };
 };
+exports.getCardFlags = getCardFlags;
 function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
-    const borderAnim = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        Animated.timing(borderAnim, {
+    const borderAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(borderAnim, {
             toValue: isSelected ? 1 : 0,
             duration,
             useNativeDriver: false,
@@ -26,12 +41,13 @@ function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
         outputRange: [baseColor, selectedColor],
     });
 }
-export const Card = ({ children, displayStyle = 'default', background, onPress, ...rest }) => {
-    const theme = useTheme();
-    const [isFocused, setFocused] = useState(false);
-    const [isSelected, setSelected] = useState(false);
-    const { largeAndUp } = useBreakpoint();
-    const { hasBgImage, tappable, isDefault, isOutline } = getCardFlags({
+const Card = (_a) => {
+    var { children, displayStyle = 'default', background, onPress } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress"]);
+    const theme = (0, styled_native_1.useTheme)();
+    const [isFocused, setFocused] = (0, react_1.useState)(false);
+    const [isSelected, setSelected] = (0, react_1.useState)(false);
+    const { largeAndUp } = (0, hooks_1.useBreakpoint)();
+    const { hasBgImage, tappable, isDefault, isOutline } = (0, exports.getCardFlags)({
         background,
         onPress,
         displayStyle,
@@ -52,12 +68,13 @@ export const Card = ({ children, displayStyle = 'default', background, onPress,
     const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, isSelected, theme.transition.duration.fast);
     const handlePress = () => {
         setSelected(prev => !prev);
-        onPress?.();
+        onPress === null || onPress === void 0 ? void 0 : onPress();
     };
-    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] }));
+    const CardContent = ((0, jsx_runtime_1.jsxs)(Card_styles_1.AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp }, rest, { style: [rest === null || rest === void 0 ? void 0 : rest.style, { borderColor: animatedBorderColor }], children: [hasBgImage && ((0, jsx_runtime_1.jsx)(Card_styles_1.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 }) => ({
+    return ((0, jsx_runtime_1.jsx)(Card_styles_1.TappableWrapper, { onPress: handlePress, onFocus: () => setFocused(true), onBlur: () => setFocused(false), accessibilityRole: "button", focused: isFocused, largeAndUp: largeAndUp, style: ({ pressed }) => ({
             opacity: pressed ? 0.9 : 1,
         }), children: CardContent }));
 };
+exports.Card = Card;

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

@@ -1,9 +1,15 @@
-import { Animated, ImageBackground, Pressable, 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({
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TappableWrapper = exports.BackgroundImage = exports.AnimatedStyledCard = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const utils_1 = require("../../utils");
+const Card_1 = require("./Card");
+const StyledCardBase = (0, styled_native_1.default)(react_native_1.View)(({ theme, displayStyle, background, onPress, largeAndUp, size, }) => {
+    const { hasBgImage, tappable, isDefault } = (0, Card_1.getCardFlags)({
         background,
         onPress,
         displayStyle,
@@ -15,20 +21,11 @@ const StyledCardBase = styled(View)(({ theme, displayStyle, background, onPress,
             : isDefault || tappable
                 ? 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', borderWidth: theme.border.width.md, borderStyle: 'solid', borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'], overflow: 'hidden', backgroundColor });
 });
-const CardBase = styledComponentWithBreakpoints(StyledCardBase);
-export const AnimatedStyledCard = Animated.createAnimatedComponent(CardBase);
-export const BackgroundImage = styled(ImageBackground)(({ theme, largeAndUp }) => ({
+const CardBase = (0, utils_1.styledComponentWithBreakpoints)(StyledCardBase);
+exports.AnimatedStyledCard = react_native_1.Animated.createAnimatedComponent(CardBase);
+exports.BackgroundImage = (0, styled_native_1.default)(react_native_1.ImageBackground)(({ theme, largeAndUp }) => ({
     position: 'absolute',
     top: 0,
     right: 0,
@@ -37,15 +34,15 @@ export const BackgroundImage = styled(ImageBackground)(({ theme, largeAndUp }) =
     borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
     overflow: 'hidden',
 }));
-export const TappableWrapper = styled(Pressable)(({ theme, focused, largeAndUp }) => ({
+exports.TappableWrapper = (0, styled_native_1.default)(react_native_1.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,
+    padding: theme.space[50],
     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],
 }));

package/dist/components/Card/index.js

@@ -1 +1,5 @@
-export { Card } from './Card';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+var Card_1 = require("./Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });

package/dist/components/Cards/AccountCard/AccountCard.d.ts

@@ -4,9 +4,9 @@ type Props = {
     isBeyond?: boolean;
     avatar?: ImageSourcePropType;
     onSwitch?: () => void;
-    title: string;
     accNumber: string | number;
-    bodyText?: string;
+    customerName: string;
+    customerAddress?: string;
 };
 export declare const AccountCard: React.FC<Props>;
 export {};

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

@@ -1,17 +1,21 @@
-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';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const __1 = require("../..");
+const styled_native_1 = require("../../../styled.native");
+const AccountCard_styles_1 = require("./AccountCard.styles");
 const Beyond = () => {
-    const theme = useContext(ThemeContext);
-    return _jsx(P, { style: { color: theme.color.brand.bold }, children: "Beyond" });
+    const theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    return (0, jsx_runtime_1.jsx)(__1.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
+const AccountCard = ({ isBeyond, avatar, onSwitch, accNumber, customerName, customerAddress, }) => {
+    const theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    return ((0, jsx_runtime_1.jsx)(__1.Card, { background: isBeyond ? theme.color.brand.dim : theme.color.brand.brand, children: (0, jsx_runtime_1.jsxs)(AccountCard_styles_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(AccountCard_styles_1.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' }), (0, jsx_runtime_1.jsxs)(AccountCard_styles_1.TextContent, { children: [(0, jsx_runtime_1.jsx)(AccountCard_styles_1.TitleContent, { children: (0, jsx_runtime_1.jsxs)(AccountCard_styles_1.Title, { children: [(0, jsx_runtime_1.jsx)(__1.Strong, { children: customerName }), " ", isBeyond && (0, jsx_runtime_1.jsx)(Beyond, {})] }) }), (0, jsx_runtime_1.jsxs)(AccountCard_styles_1.BodyContent, { children: [(0, jsx_runtime_1.jsxs)(AccountCard_styles_1.Body, { size: "sm", children: ["Account Number: ", accNumber] }), (0, jsx_runtime_1.jsx)(AccountCard_styles_1.Body, { size: "sm", isBeyond: isBeyond, children: customerAddress })] })] }), (0, jsx_runtime_1.jsx)(AccountCard_styles_1.ButtonContainer, { children: onSwitch && ((0, jsx_runtime_1.jsx)(__1.Button, { size: "small", inverted: isBeyond, iconRight: "switch", onPress: onSwitch })) })] }) }));
 };
+exports.AccountCard = AccountCard;

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

@@ -1,7 +1,13 @@
-import { ImageBackground, View } from 'react-native';
-import styled from '../../../styled.native';
-import { P } from '../../P';
-export const CardContent = styled(View)(({ theme }) => ({
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonContainer = exports.Body = exports.BodyContent = exports.Title = exports.TitleContent = exports.TextContent = exports.Avatar = exports.CardContent = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const P_1 = require("../../P");
+exports.CardContent = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     gap: theme.space[200],
@@ -9,7 +15,7 @@ export const CardContent = styled(View)(({ theme }) => ({
     flexWrap: 'nowrap',
     alignItems: 'center',
 }));
-export const Avatar = styled(ImageBackground)(({ theme }) => ({
+exports.Avatar = (0, styled_native_1.default)(react_native_1.ImageBackground)(({ theme }) => ({
     borderRadius: theme.border.radius['2xl'],
     backgroundColor: theme.color.surface.bright,
     borderWidth: theme.border.width.sm,
@@ -20,35 +26,28 @@ export const Avatar = styled(ImageBackground)(({ theme }) => ({
     flexShrink: 0,
     overflow: 'hidden',
 }));
-export const TextContent = styled(View)(({ theme }) => ({
+exports.TextContent = (0, styled_native_1.default)(react_native_1.View)({
     flex: 1,
     flexShrink: 1,
     flexGrow: 1,
-    fontColor: theme.color.surface.bright,
-}));
-export const TitleContent = styled(View)(({ theme }) => ({
+});
+exports.TitleContent = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     gap: theme.space[100],
 }));
-export const Title = styled(P)(({ theme }) => ({
+exports.Title = (0, styled_native_1.default)(P_1.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 }) => ({
+exports.BodyContent = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.space[200],
 }));
-export const Body = styled(P)(({ theme, isBeyond }) => ({
+exports.Body = (0, styled_native_1.default)(P_1.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)({
+exports.ButtonContainer = (0, styled_native_1.default)(react_native_1.View)({
     justifyContent: 'center',
     alignSelf: 'stretch',
     width: '32px',

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

@@ -1 +1,17 @@
-export * from './AccountCard';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AccountCard"), exports);

package/dist/components/Cards/BalanceCard/BalanceCard.d.ts

@@ -1,15 +1,24 @@
 import React, { ReactNode } from 'react';
-import { ImageSourcePropType } from 'react-native';
 import { IconName } from '../../../providers';
-export type Props = {
-    popOutImage?: ImageSourcePropType;
-    eyebrowText?: string;
-    eyebrowIcon?: IconName;
-    title: ReactNode;
-    bodyText: string;
+import { IMAGE_SOURCES } from './Components';
+export type BalanceProps = {
+    amountInPence: number;
+    onBalancePress?: () => void;
+};
+type Props = {
+    image?: keyof typeof IMAGE_SOURCES;
+    eyebrow: {
+        text: string;
+        icon?: IconName;
+        onEyebrowPress?: () => void;
+    };
+    balance: BalanceProps;
+    bodyText: ReactNode | string;
     ctaBanner?: {
         text: string;
         onPress: () => void;
     };
+    loading?: boolean;
 };
 export declare const BalanceCard: React.FC<Props>;
+export {};

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

@@ -1,24 +1,17 @@
-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 })] }) }))] }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BalanceCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const BalanceCard_styles_1 = require("./BalanceCard.styles");
+const Components_1 = require("./Components");
+const BalanceCard = ({ image = 'home', eyebrow, balance, bodyText, ctaBanner, loading = false, }) => {
+    const wholeCardIsPressable = Boolean(ctaBanner);
+    const isUtility = image !== 'home';
+    const showContent = !loading;
+    return ((0, jsx_runtime_1.jsxs)(Components_1.OuterBalanceCard, { image: image, ctaBanner: ctaBanner, children: [loading && (0, jsx_runtime_1.jsx)(Components_1.LoadingDisplay, {}), showContent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(BalanceCard_styles_1.EyebrowContainer, { accessible: true, accessibilityRole: wholeCardIsPressable ? 'text' : 'button', pointerEvents: wholeCardIsPressable ? 'none' : 'auto', onPress: !wholeCardIsPressable && eyebrow.onEyebrowPress
+                            ? eyebrow.onEyebrowPress
+                            : undefined, children: [(0, jsx_runtime_1.jsx)(__1.P, { size: "lg", children: (0, jsx_runtime_1.jsx)(__1.Strong, { children: eyebrow.text }) }), eyebrow.icon && (0, jsx_runtime_1.jsx)(__1.Icon, { size: 20, name: eyebrow.icon })] }), (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessible: true, accessibilityRole: wholeCardIsPressable ? 'text' : 'button', pointerEvents: wholeCardIsPressable ? 'none' : 'auto', onPress: !wholeCardIsPressable ? balance === null || balance === void 0 ? void 0 : balance.onBalancePress : undefined, children: [(0, jsx_runtime_1.jsxs)(BalanceCard_styles_1.BalanceContainer, { children: [(0, jsx_runtime_1.jsx)(Components_1.BalanceDisplay, { amountInPence: balance.amountInPence, isPayM: !isUtility }), (0, jsx_runtime_1.jsx)(react_native_1.View, { children: !isUtility && balance.amountInPence !== 0 && ((0, jsx_runtime_1.jsx)(BalanceCard_styles_1.BadgeContainer, { children: (0, jsx_runtime_1.jsx)(__1.Badge, { children: balance.amountInPence > 0 ? 'In credit' : 'In debit' }) })) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { children: isUtility ? ((0, jsx_runtime_1.jsx)(BalanceCard_styles_1.PayGText, { children: bodyText })) : ((0, jsx_runtime_1.jsx)(BalanceCard_styles_1.PayMText, { children: bodyText })) })] })] }))] }));
 };
+exports.BalanceCard = BalanceCard;