@ovotech/element-native 5.4.3 → 5.5.0

package/dist/components/index.js

@@ -1,57 +1,73 @@
-export * from './Accordion';
-export * from './ActionCard';
-export * from './ActionList';
-export * from './Badge';
-export * from './Button';
-export * from './Card';
-export * from './Cards';
-export * from './Checkbox';
-export * from './CurrencyField';
-export * from './CurrencyInput';
-export * from './DataTable';
-export * from './DateField';
-export * from './Disclosure';
-export * from './Display';
-export * from './Divider';
-export * from './Em';
-export * from './EmailField';
-export * from './EmailInput';
-export * from './Field';
-export * from './Grid';
-export * from './Heading';
-export * from './Icon';
-export * from './LineThrough';
-export * from './Link';
-export * from './List';
-export * from './Margin';
-export * from './NavHeader';
-export * from './NavIcon';
-export * from './Notification';
-export * from './NumberField';
-export * from './NumberInput';
-export * from './P';
-export * from './PasswordField';
-export * from './PasswordInput';
-export * from './PhoneField';
-export * from './PhoneInput';
-export * from './Pictogram';
-export * from './Radio';
-export * from './RadioCard';
-export * from './ScreenView';
-export * from './RemoteImage';
-export * from './SegmentedControls';
-export * from './SelectField';
-export * from './SkeletonButton';
-export * from './SkeletonCircle';
-export * from './SkeletonHeading';
-export * from './SkeletonText';
-export * from './Spinner';
-export * from './Stack';
-export * from './Strong';
-export * from './Tabs';
-export * from './TextareaField';
-export * from './TextareaInput';
-export * from './TextField';
-export * from './TextInput';
-export * from './Toast';
-export * from './Toggle';
+"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("./Accordion"), exports);
+__exportStar(require("./ActionCard"), exports);
+__exportStar(require("./ActionList"), exports);
+__exportStar(require("./Badge"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Card"), exports);
+__exportStar(require("./Cards"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./CurrencyField"), exports);
+__exportStar(require("./CurrencyInput"), exports);
+__exportStar(require("./DataTable"), exports);
+__exportStar(require("./DateField"), exports);
+__exportStar(require("./Disclosure"), exports);
+__exportStar(require("./Display"), exports);
+__exportStar(require("./Divider"), exports);
+__exportStar(require("./Em"), exports);
+__exportStar(require("./EmailField"), exports);
+__exportStar(require("./EmailInput"), exports);
+__exportStar(require("./Field"), exports);
+__exportStar(require("./Grid"), exports);
+__exportStar(require("./Heading"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./LineThrough"), exports);
+__exportStar(require("./Link"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./Margin"), exports);
+__exportStar(require("./NavHeader"), exports);
+__exportStar(require("./NavIcon"), exports);
+__exportStar(require("./Notification"), exports);
+__exportStar(require("./NumberField"), exports);
+__exportStar(require("./NumberInput"), exports);
+__exportStar(require("./P"), exports);
+__exportStar(require("./PasswordField"), exports);
+__exportStar(require("./PasswordInput"), exports);
+__exportStar(require("./PhoneField"), exports);
+__exportStar(require("./PhoneInput"), exports);
+__exportStar(require("./Pictogram"), exports);
+__exportStar(require("./Radio"), exports);
+__exportStar(require("./RadioCard"), exports);
+__exportStar(require("./RemoteImage"), exports);
+__exportStar(require("./ScreenView"), exports);
+__exportStar(require("./SegmentedControls"), exports);
+__exportStar(require("./SelectField"), exports);
+__exportStar(require("./SkeletonButton"), exports);
+__exportStar(require("./SkeletonCircle"), exports);
+__exportStar(require("./SkeletonHeading"), exports);
+__exportStar(require("./SkeletonText"), exports);
+__exportStar(require("./Spinner"), exports);
+__exportStar(require("./Stack"), exports);
+__exportStar(require("./Strong"), exports);
+__exportStar(require("./Tabs"), exports);
+__exportStar(require("./TextareaField"), exports);
+__exportStar(require("./TextareaInput"), exports);
+__exportStar(require("./TextField"), exports);
+__exportStar(require("./TextInput"), exports);
+__exportStar(require("./Toast"), exports);
+__exportStar(require("./Toggle"), exports);

package/dist/esm/components/Accordion/Accordion.js

@@ -12,7 +12,7 @@ export function withAnimated(WrappedComponent) {
     // eslint-disable-next-line react/prefer-stateless-function
     class WithAnimated extends Component {
         render() {
-            return _jsx(WrappedComponent, { ...this.props });
+            return _jsx(WrappedComponent, Object.assign({}, this.props));
         }
     }
     WithAnimated.displayName = `WithAnimated(${displayName})`;
@@ -22,7 +22,7 @@ export function withAnimated(WrappedComponent) {
 export const Accordion = ({ expanded = false, first, last, title, children, onToggle, variant = 'default', }) => {
     const theme = useTheme();
     const { Header } = useContext(AccordionGroupContext);
-    const AccordionHeading = Header ?? Heading4;
+    const AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4;
     const AnimatedHeading = useMemo(() => withAnimated(AccordionHeading), [AccordionHeading]);
     const [layout, onLayout] = useLayout(0);
     const [open, setOpen] = useState(expanded);
@@ -46,7 +46,7 @@ export const Accordion = ({ expanded = false, first, last, title, children, onTo
         height: size.value * progress.value + 1,
     }), [progress, size]);
     const toggleOpen = useCallback(() => {
-        onToggle?.(!open);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
         if (size.value === 0) {
             size.value = handleHeightContent;
         }

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

@@ -59,7 +59,7 @@ export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'che
     const Heading = inline ? Heading3 : Heading2;
     const cardPadding = theme.space[inline ? 400 : 600];
     const negativeMarginAdjustment = -cardPadding;
-    return (_jsxs(RootContainer, { ...(cardAction ? { onPress: cardAction } : {}), inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: `${testID}-card`, accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+    return (_jsxs(RootContainer, Object.assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: `${testID}-card`, accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
                                         color: inverted
                                             ? theme.color.surface.bright
                                             : theme.color.brand.brand,
@@ -99,5 +99,5 @@ export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'che
                     position: 'absolute',
                     right: theme.space[200],
                     top: theme.space[200],
-                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] }));
+                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] })));
 };

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

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Svg, { ClipPath, Defs, Path } from 'react-native-svg';
 import styled from '../../styled.native';
 const StyledPath = styled(Path)(({ theme, color }) => `
-  fill: ${color ?? theme.color.brand.brand}
+  fill: ${color !== null && color !== void 0 ? color : theme.color.brand.brand}
 `);
 export const CloseIconShape = ({ color }) => (_jsxs(Svg, { width: 44, height: 44, children: [_jsx(StyledPath, { color: color, d: "M11.632 44 0 0h44v35.402L11.632 44Z" }), _jsx(Defs, { children: _jsx(ClipPath, { id: "a", children: _jsx(Path, { fill: "#fff", d: "M16 16h12v12H16z" }) }) })] }));

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Svg, { Path } from 'react-native-svg';
 import styled from '../../styled.native';
 const StyledPath = styled(Path)(({ theme, color }) => `
-  fill: ${color ?? theme.color.brand.brand}
+  fill: ${color !== null && color !== void 0 ? color : theme.color.brand.brand}
 `);
 export const IndicatorIconShape = ({ color }) => (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));

package/dist/esm/components/ActionList/ActionList.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, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, } from 'react';
 import { TouchableOpacity, View, } from 'react-native';
@@ -5,21 +16,29 @@ import { useBreakpoint } from '../../hooks';
 import { getValidChildren } from '../../utils';
 import { Badge } from '../Badge';
 import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
-const ActionList = ({ children, inverted, borderBottom, ...rest }) => {
+const ActionList = (_a) => {
+    var { children, inverted, borderBottom } = _a, rest = __rest(_a, ["children", "inverted", "borderBottom"]);
     const validChildren = getValidChildren(children);
     const childCount = Children.count(validChildren);
-    return (_jsx(StyledActionList, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
-            fullWidth: true,
-            index,
-            hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
-            inverted: child.props.inverted ?? inverted, // prioritise child prop
-            inList: true,
-            iconRight: child.props.iconRight ?? 'chevron-right-small',
-        })) }));
+    return (_jsx(StyledActionList, Object.assign({}, rest, { children: Children.map(validChildren, (child, index) => {
+            var _a, _b;
+            return cloneElement(child, {
+                fullWidth: true,
+                index,
+                hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
+                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
+                inList: true,
+                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
+            });
+        }) })));
+};
+const ActionWrapper = (_a) => {
+    var { children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref } = _a, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone", "ref"]);
+    return (_jsx(StyledActionWrapper, Object.assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
 };
-const ActionWrapper = ({ children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref, ...rest }) => (_jsx(StyledActionWrapper, { ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList, ...rest, children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) }));
-const Action = ({ accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref, ...rest }) => {
+const Action = (_a) => {
+    var { accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref } = _a, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint", "ref"]);
     const { smallAndUp } = useBreakpoint();
-    return (_jsxs(ActionWrapper, { ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText, ...rest, children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] }));
+    return (_jsxs(ActionWrapper, Object.assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 };
 export { Action, ActionList };

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,8 +1,20 @@
+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 = {
@@ -11,7 +23,7 @@ const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = DE
         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,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, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { Animated } from 'react-native';
@@ -26,7 +37,8 @@ function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
         outputRange: [baseColor, selectedColor],
     });
 }
-export const Card = ({ children, displayStyle = 'default', background, onPress, ...rest }) => {
+export const Card = (_a) => {
+    var { children, displayStyle = 'default', background, onPress } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress"]);
     const theme = useTheme();
     const [isFocused, setFocused] = useState(false);
     const [isSelected, setSelected] = useState(false);
@@ -52,9 +64,9 @@ 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 = (_jsxs(AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp }, rest, { style: [rest === null || rest === void 0 ? void 0 : 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 }) => ({

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

@@ -15,16 +15,7 @@ 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);
@@ -42,10 +33,10 @@ export const TappableWrapper = styled(Pressable)(({ theme, focused, largeAndUp }
     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/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,
+}));
+export const StyledHeading1 = styled(Heading1)(({ theme }) => ({
+    lineHeight: theme.font.lineHeight.d4.mediaQuery.sm,
+}));
+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],
 }));