@ovotech/element-native 5.4.3 → 5.6.0

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

@@ -1,36 +1,23 @@
 import { View } from 'react-native';
-import { Card } from '../..';
 import styled from '../../../styled.native';
-import { P } from '../../P';
-import { SmallCardHeight } from '../shared';
-export const CardWithProgressBar = styled(Card)(({ isSmall }) => ({
-    minHeight: isSmall ? SmallCardHeight : undefined,
+import { CardWithMinHeight } from '../shared.styles';
+export const CardWithProgressBar = styled(CardWithMinHeight)({
     justifyContent: 'space-between',
-}));
-export const HeadingContainer = styled(View)(({ theme }) => ({
-    marginBottom: theme.space[350],
-}));
-export const ValueBlockWrapper = styled(View)(({ theme }) => ({
+});
+export const MarkerContainer = styled(View)(({ theme }) => ({
     flexDirection: 'row',
-    gap: theme.space[300],
+    alignItems: 'center',
+    gap: theme.space[150],
 }));
 export const ValueWrapper = styled(View)(({ isSmall, hasValue2, theme }) => ({
     width: isSmall || !hasValue2 ? undefined : '50%',
     gap: theme.space[100],
 }));
-export const ValuesContainer = styled(View)(({ theme }) => ({
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: theme.space[100],
-}));
 export const ValueTextContainer = styled(View)(({ theme }) => ({
     flexDirection: 'row',
     alignItems: 'flex-end',
     marginBottom: theme.space[25],
 }));
-export const StyledP = styled(P)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
-}));
 // EPC/Value Bar styles
 export const ProgressBarWrapper = styled(View)(({ theme }) => ({
     width: '100%',

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

@@ -0,0 +1,23 @@
+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 { View } from 'react-native';
+import { SkeletonCircle, SkeletonText, Strong } from '../..';
+import { checkIsSmall } from '../utils';
+import { CardWithQuickLink, HeadingText, Illustration, ImageContent, ImageSkeletonContainer, } from './QuickLinkCard.styles';
+export const QuickLinkCard = (_a) => {
+    var { heading, illustration, onPress, size = 'default', loading = false } = _a, rest = __rest(_a, ["heading", "illustration", "onPress", "size", "loading"]);
+    const showContent = !loading;
+    return (_jsxs(CardWithQuickLink, Object.assign({ onPress: onPress }, rest, { children: [_jsxs(View, { children: [loading && _jsx(SkeletonText, { lines: 2 }), showContent && (_jsx(HeadingText, { children: _jsx(Strong, { children: heading }) }))] }), loading && (_jsx(ImageSkeletonContainer, { children: _jsx(SkeletonCircle, {}) })), showContent && illustration && (_jsx(ImageContent, { children: _jsx(Illustration, { isSmall: checkIsSmall(size), source: typeof illustration === 'string'
+                        ? { uri: illustration }
+                        : illustration, resizeMode: "contain" }) }))] })));
+};

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

@@ -0,0 +1,25 @@
+import { Image, View } from 'react-native';
+import { Card } from '../..';
+import styled from '../../../styled.native';
+import { P } from '../../P';
+export const CardWithQuickLink = styled(Card)(({ theme }) => ({
+    padding: theme.space[300],
+    minHeight: theme.space[2400],
+    minWidth: theme.space[3500],
+}));
+export const HeadingText = styled(P)(({ theme }) => ({
+    marginBottom: theme.space[900],
+}));
+export const ImageContent = styled(View)(({ theme }) => ({
+    position: 'absolute',
+    bottom: theme.space[300],
+    right: theme.space[300],
+}));
+export const Illustration = styled(Image)(({ isSmall, theme }) => ({
+    width: isSmall ? theme.space[1000] : theme.space[1600],
+    height: isSmall ? theme.space[1000] : theme.space[1600],
+}));
+export const ImageSkeletonContainer = styled(View)(({ theme }) => ({
+    alignSelf: 'flex-end',
+    width: theme.space[1000],
+}));

package/dist/esm/components/Cards/QuickLinkCard/index.js

@@ -0,0 +1 @@
+export * from './QuickLinkCard';

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { P } from '../../P';
+import { ContainerWithCardBadge, ResponsiveHeading } from '../components';
+import { SMALL_CARD_HEIGHT } from '../shared.styles';
+import { CardImage, CardWithServicesImage, HeadingContainer, ImageContent, TextContent, } from './ServicesImageCard.styles';
+export const ServicesImageCard = ({ badgeText, image, heading, subHeading, onPress, }) => {
+    const hasBadge = !!badgeText;
+    const [cardHeight, setCardHeight] = useState(0);
+    const onLayout = useCallback((e) => {
+        const { height: layoutHeight } = e.nativeEvent.layout;
+        setCardHeight(layoutHeight);
+    }, []);
+    const pushImage = useMemo(() => cardHeight > SMALL_CARD_HEIGHT, [cardHeight]);
+    const content = (_jsxs(CardWithServicesImage, { isSmall: true, onPress: onPress, onLayout: onLayout, children: [_jsxs(TextContent, { hasBadge: hasBadge, pushImage: pushImage, children: [_jsx(HeadingContainer, { subHeading: !!subHeading, children: _jsx(ResponsiveHeading, { heading: heading }) }), !!subHeading && (_jsx(View, { children: _jsx(P, { children: subHeading }) }))] }), _jsx(ImageContent, { pushImage: pushImage, children: _jsx(CardImage, { pushImage: pushImage, source: typeof image === 'string' ? { uri: image } : image, resizeMode: "cover" }) })] }));
+    if (!hasBadge)
+        return content;
+    return (_jsx(ContainerWithCardBadge, { badgeText: badgeText, children: content }));
+};

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

@@ -0,0 +1,32 @@
+import { Image, View } from 'react-native';
+import styled from '../../../styled.native';
+import { CardWithMinHeight, SMALL_CARD_HEIGHT } from '../shared.styles';
+const IMAGE_OUTSIDE = SMALL_CARD_HEIGHT * 0.45;
+export const CardWithServicesImage = styled(CardWithMinHeight)({
+    paddingTop: 0,
+    flexDirection: 'row',
+    borderColor: 'transparent',
+});
+export const TextContent = styled(View)(({ hasBadge, theme, pushImage }) => ({
+    paddingTop: hasBadge ? theme.space[800] : theme.space[400],
+    paddingRight: pushImage ? IMAGE_OUTSIDE : SMALL_CARD_HEIGHT - IMAGE_OUTSIDE,
+    flex: 1,
+    alignSelf: 'flex-end',
+}));
+export const HeadingContainer = styled(View)(({ theme, subHeading }) => ({
+    marginBottom: subHeading ? theme.space[200] : 0,
+}));
+export const ImageContent = styled(View)(({ theme, pushImage }) => ({
+    position: 'absolute',
+    top: pushImage ? theme.space[50] : theme.space[250],
+    bottom: 0,
+    width: SMALL_CARD_HEIGHT,
+    right: -(pushImage ? IMAGE_OUTSIDE * 1.45 : IMAGE_OUTSIDE),
+    transform: 'rotate(-15deg)',
+    overflow: 'hidden',
+}));
+export const CardImage = styled(Image)(({ pushImage }) => ({
+    width: '100%',
+    height: '100%',
+    transform: `rotate(15deg) scale(${pushImage ? 1.35 : 1.2})`,
+}));

package/dist/esm/components/Cards/ServicesImageCard/index.js

@@ -0,0 +1 @@
+export * from './ServicesImageCard';

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../../styled.native';
+import { Heading2, Heading4 } from '../Heading';
+import { BadgeContainer, StyledBadge } from './shared.styles';
+import { checkIsSmall, resolveColor } from './utils';
+export const ResponsiveHeading = ({ heading, size = 'default', }) => {
+    const theme = useTheme();
+    const HeadingComponent = checkIsSmall(size) ? Heading4 : Heading2;
+    if (typeof heading === 'string') {
+        return _jsx(HeadingComponent, { children: heading });
+    }
+    return (_jsx(_Fragment, { children: heading.map((segment, index) => (_jsx(HeadingComponent, { style: {
+                color: resolveColor(segment.color),
+                marginRight: theme.space[150],
+            }, children: segment.text }, `${segment.text}-${index}`))) }));
+};
+export const ContainerWithCardBadge = ({ badgeText, variant = 'success', children }) => {
+    return (_jsxs(BadgeContainer, { children: [_jsx(StyledBadge, { variant: variant, children: badgeText }), children] }));
+};

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

@@ -1,6 +1,11 @@
 export { AccountCard } from './AccountCard';
-export { BalanceCard } from './BalanceCard';
+export { BalanceCard, BalanceCardErrorFallback } from './BalanceCard';
+export { DisruptiveCard } from './DisruptiveCard';
+export { HeroImageCard } from './HeroImageCard';
 export { IconDataCard } from './IconDataCard';
 export { IconTextCard } from './IconTextCard';
+export { IllustrationTextCard } from './IllustrationTextCard';
 export { LinkTextCard } from './LinkTextCard';
 export { ProgressBarCard } from './ProgressBarCard';
+export { QuickLinkCard } from './QuickLinkCard';
+export { ServicesImageCard } from './ServicesImageCard';

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

@@ -0,0 +1,49 @@
+import { View } from 'react-native';
+import styled from '../../styled.native';
+import { Badge } from '../Badge';
+import { Card } from '../Card';
+export const SMALL_CARD_HEIGHT = 172;
+export const BadgeContainer = styled(View)({
+    position: 'relative',
+});
+export const StyledBadge = styled(Badge)(({ theme }) => ({
+    position: 'absolute',
+    top: theme.space[100],
+    left: theme.space[500],
+    borderWidth: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: theme.border.radius.md,
+    borderBottomRightRadius: theme.border.radius.md,
+    paddingBottom: theme.space[50],
+    paddingTop: 0,
+    zIndex: 1,
+}));
+export const TitleContainer = styled(View)(({ theme }) => ({
+    marginRight: theme.space[50],
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+}));
+export const CardWithMinHeight = styled(Card)(({ isSmall }) => ({
+    minHeight: isSmall ? SMALL_CARD_HEIGHT : undefined,
+}));
+export const HeadingContainer = styled(View)(({ theme }) => ({
+    marginBottom: theme.space[350],
+}));
+export const ContainerWithGap = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+}));
+export const WrappedContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: theme.space[100],
+}));
+// Styles for stories
+export const StyleWrapper = styled.View({
+    padding: 10,
+    gap: 15,
+});
+export const SmallCardContainer = styled.View({
+    maxWidth: 180,
+});

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

@@ -0,0 +1,23 @@
+import { Alert } from 'react-native';
+import { useTheme } from '../../styled.native';
+export const checkIsSmall = (size) => size === 'small';
+export const resolveColor = (colorKey = 'default') => {
+    const theme = useTheme();
+    if (colorKey === 'default' || !colorKey) {
+        return theme.color.brand.brand;
+    }
+    if (colorKey === 'onSurface') {
+        return theme.color.surface.onSurface;
+    }
+    if (colorKey === 'brandBold') {
+        return theme.color.brand.bold;
+    }
+    if (colorKey === 'onBrand') {
+        return theme.color.brand.onBrand;
+    }
+    return colorKey;
+};
+// Used for stories
+export const handlePress = () => {
+    Alert.alert('Card pressed');
+};

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,58 +1,28 @@
+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 { numToPx } from '@ovotech/element-core';
-import { TouchableOpacity, View, } from 'react-native';
-import styled from '../../styled.native';
+import { TouchableOpacity, View } from 'react-native';
 import { ErrorText } from '../ErrorText';
 import { FormGroup } from '../FormGroup';
 import { HintText } from '../HintText';
-import { Icon } from '../Icon/Icon';
-import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
-const StyledCheckboxInputWrapper = styled.View(({ theme }) => {
-    const checkboxSize = theme.space[600];
-    const gap = theme.space[200];
-    return `
-      width: ${numToPx(checkboxSize + gap)};
-      height: ${numToPx(theme.space[1100])};
-    `;
-});
-const StyledCheckboxInput = styled.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      border: ${numToPx(theme.border.width.md)} solid;
-      margin-top: 10px;
-      border-radius: ${numToPx(theme.border.radius.xs)};
-      border-color: ${invalid
-        ? theme.input.color.borderError
-        : checked
-            ? theme.input.color.selected
-            : theme.input.color.border};
-      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
-    `;
-});
-const CheckboxCheck = (props) => {
-    return _jsx(Icon, { name: "check", size: 16, ...props });
-};
-const StyledCheckboxInputCheck = styled(CheckboxCheck)(({ theme, checked, }) => {
-    return `
-      margin-top: ${numToPx(theme.space[50])};
-      margin-left: ${numToPx(theme.space[50])};
-      color: ${theme.color.alert.info};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
-const Input = ({ checked, invalid, testID, ...rest }) => {
-    return (_jsx(StyledCheckboxInputWrapper, { ...rest, children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) }));
+import { CheckLabelText, StyledCheckboxInput, StyledCheckboxInputCheck, StyledCheckboxInputWrapper, StyledWrapper, } from './styled';
+const Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return (_jsx(StyledCheckboxInputWrapper, Object.assign({}, rest, { children: _jsx(StyledCheckboxInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledCheckboxInputCheck, { checked: checked }) }) })));
 };
-const CheckLabelText = styled(LabelText)(({ theme }) => `
-    padding-top: ${numToPx(theme.space[300])};
-  `);
-const StyledWrapper = styled.View `
-  flex-direction: row;
-`;
-const Checkbox = ({ label, hint, error, checked, optional, invalid, activeOpacity = 0.8, testID, ref, ...rest }) => {
+const Checkbox = (_a) => {
+    var { label, hint, error, checked, optional, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID", "ref"]);
     const hasError = !!error;
-    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, ...rest, children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsxs(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null] })] }) })] }) }));
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsxs(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null] })] }) }))] }) }));
 };
 export { Checkbox };

package/dist/esm/components/Checkbox/CheckboxField.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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, } from 'react';
 import { View } from 'react-native';
@@ -7,11 +18,12 @@ import { FormGroup } from '../FormGroup';
 import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
-const CheckboxField = ({ label, hint, error, children, optional = false, ...rest }) => {
+const CheckboxField = (_a) => {
+    var { label, hint, error, children, optional = false } = _a, rest = __rest(_a, ["label", "hint", "error", "children", "optional"]);
     const hasError = !!error;
     const validChildren = getValidChildren(children);
-    return (_jsx(FormGroup, { ...rest, error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { children: Children.map(validChildren, (child) => cloneElement(child, {
+    return (_jsx(FormGroup, Object.assign({}, rest, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { children: Children.map(validChildren, (child) => cloneElement(child, {
                         invalid: hasError ? true : child.props.invalid,
-                    })) })] }) }));
+                    })) })] }) })));
 };
 export { CheckboxField };

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { Icon } from '../Icon';
+import { LabelText } from '../LabelText';
+const CheckboxCheck = (props) => {
+    return _jsx(Icon, Object.assign({ name: "check", size: 16 }, props));
+};
+export const StyledCheckboxInputWrapper = styled.View(({ theme }) => {
+    const checkboxSize = theme.space[600];
+    const gap = theme.space[200];
+    return `
+      width: ${numToPx(checkboxSize + gap)};
+      height: ${numToPx(theme.space[1100])};
+    `;
+});
+export const StyledCheckboxInput = styled.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      border: ${numToPx(theme.border.width.md)} solid;
+      margin-top: 10px;
+      border-radius: ${numToPx(theme.border.radius.xs)};
+      border-color: ${invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border};
+      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
+    `;
+});
+export const StyledCheckboxInputCheck = styled(CheckboxCheck)(({ theme, checked }) => {
+    return `
+      margin-top: ${numToPx(theme.space[50])};
+      margin-left: ${numToPx(theme.space[50])};
+      color: ${theme.color.alert.info};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+export const CheckLabelText = styled(LabelText)(({ theme }) => `
+    padding-top: ${numToPx(theme.space[300])};
+    font-family: ${theme.native.font.family.book};
+  `);
+export const StyledWrapper = styled.View `
+  flex-direction: row;
+`;

package/dist/esm/components/Checkbox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/CurrencyField/CurrencyField.js

@@ -1,6 +1,18 @@
+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 { CurrencyInput } from '../CurrencyInput';
 import { Field } from '../Field';
-export const CurrencyField = ({ ref, ...props }) => {
-    return (_jsx(Field, { affixWidth: 40, ...props, children: _jsx(CurrencyInput, { ref: ref }) }));
+export const CurrencyField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return (_jsx(Field, Object.assign({ affixWidth: 40 }, props, { children: _jsx(CurrencyInput, { ref: ref }) })));
 };

package/dist/esm/components/CurrencyInput/CurrencyInput.js

@@ -1,11 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 { createRef } from 'react';
+import { useBreakpoint } from '../../hooks';
 import { mergeRefs } from '../../utils';
-import { NumberInput } from '../NumberInput';
-const CurrencyInput = ({ currency = 'GBP', invalid, accessibilityLabel = '', ref, ...rest }) => {
+import { CurrencyInputWrapper, StyledCurrencyInput, StyledCurrencySymbol, StyledCurrencySymbolWrapper, } from './styled';
+const currecySymbolMap = {
+    GBP: '£',
+    EUR: '€',
+    AUD: '$',
+    USD: '$',
+};
+const CurrencyInput = (_a) => {
+    var { currency = 'GBP', invalid, accessibilityLabel = '', ref } = _a, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel", "ref"]);
     const inputRef = createRef();
-    const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar'}`.trim();
-    const iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
-    return (_jsx(NumberInput, { accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, iconLeft: iconName, ref: mergeRefs(ref, inputRef), ...rest }));
+    const breakpoints = useBreakpoint();
+    const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euros' : 'dollars'}`.trim();
+    return (_jsxs(CurrencyInputWrapper, { children: [_jsx(StyledCurrencyInput, Object.assign({ accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, ref: mergeRefs(ref, inputRef) }, breakpoints, rest)), _jsx(StyledCurrencySymbolWrapper, { testID: `element-currency-input-${currency}`, accessible: false, children: _jsx(StyledCurrencySymbol, Object.assign({}, breakpoints, { children: currecySymbolMap[currency] })) })] }));
 };
 export { CurrencyInput };

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

@@ -0,0 +1,33 @@
+import { View } from 'react-native';
+import styled from '../../styled.native';
+import { numToPx } from '../../theme';
+import { NumberInput } from '../NumberInput';
+import { P } from '../P';
+export const CurrencyInputWrapper = styled(View) `
+  position: relative;
+`;
+export const StyledCurrencyInput = styled(NumberInput)(({ theme, smallAndUp }) => `
+  padding-left: ${numToPx(theme.space[800])};
+  padding-bottom: ${numToPx(theme.space[100])};
+  font-family: ${theme.native.font.family.black};
+  font-size: ${numToPx(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${numToPx(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  letter-spacing: ${numToPx(theme.font.letterSpacing['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`);
+export const StyledCurrencySymbolWrapper = styled(View)(({ theme }) => {
+    return `
+  position: absolute;
+  width: ${numToPx(theme.space[700])};
+  height: ${numToPx(theme.space[700])};
+  top: 50%;
+  margin-top: -${numToPx(theme.space[350])};
+  left: ${numToPx(theme.space[400])};
+`;
+});
+export const StyledCurrencySymbol = styled(P)(({ theme, smallAndUp, }) => {
+    return `
+  font-family: ${theme.native.font.family.bold};
+  font-size: ${numToPx(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${numToPx(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`;
+});

package/dist/esm/components/DataTable/DataTable.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 { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isElement as isReactElement } from 'react-is';
@@ -6,7 +17,8 @@ import { useBreakpoint } from '../../hooks';
 import { getText } from '../../utils';
 import { TableRow } from './TableRow';
 import { StyledTableContainer, TableBody, TableCaption, TableCaptionText, TableHeader, TableHeaderText, TableRowHeading, } from './styles';
-export const DataTable = ({ items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref, ...rest }) => {
+export const DataTable = (_a) => {
+    var { items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref } = _a, rest = __rest(_a, ["items", "columnHeadings", "caption", "rowHeadings", "columnWidths", "striped", "ref"]);
     const breakpoints = useBreakpoint();
     const columnLabel = columnHeadings
         ? ` ${columnHeadings.length} columns,`
@@ -15,5 +27,5 @@ export const DataTable = ({ items, columnHeadings, caption, rowHeadings, columnW
         ? getText(caption)
         : caption;
     const accessibilityLabel = `data table,${columnLabel} ${items.length} rows, ${accessibilityLabelText}`;
-    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, { ...rest, ref: ref, children: [caption ? (_jsx(TableCaption, { ...breakpoints, children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, { ...breakpoints, accessibilityLabel: accessibilityLabel, children: caption })) })) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map((columnHeading, index) => (_createElement(TableHeader, { ...breakpoints, key: index, cellWidth: columnWidths[index] }, isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, { ...breakpoints, children: columnHeading }))))) })) : null, _jsx(TableBody, { children: items.map((rowData, index) => (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index))) })] }) }));
+    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, Object.assign({}, rest, { ref: ref, children: [caption ? (_jsx(TableCaption, Object.assign({}, breakpoints, { children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, Object.assign({}, breakpoints, { accessibilityLabel: accessibilityLabel, children: caption }))) }))) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map((columnHeading, index) => (_createElement(TableHeader, Object.assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }), isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, Object.assign({}, breakpoints, { children: columnHeading })))))) })) : null, _jsx(TableBody, { children: items.map((rowData, index) => (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index))) })] })) }));
 };

package/dist/esm/components/DataTable/TableRow.js

@@ -8,14 +8,14 @@ export const TableRow = ({ data, index, striped, rowHeadings, columnWidths, }) =
     const breakpoints = useBreakpoint();
     const cells = data.map((cellData, i) => {
         if (typeof cellData === 'object' &&
-            cellData?.hasOwnProperty('isSeparator') &&
-            cellData?.hasOwnProperty('content')) {
-            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, { ...breakpoints, children: cellData?.content }) }, i));
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('isSeparator')) &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('content'))) {
+            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, Object.assign({}, breakpoints, { children: cellData === null || cellData === void 0 ? void 0 : cellData.content })) }, i));
         }
         if (rowHeadings && i === 0) {
-            return (_createElement(RowHeading, { ...breakpoints, key: i, testID: "rowHeader", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, { ...breakpoints, children: cellData }))));
+            return (_createElement(RowHeading, Object.assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, Object.assign({}, breakpoints, { children: cellData })))));
         }
-        return (_createElement(TableCell, { ...breakpoints, key: i, testID: "cell", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(CellText, { ...breakpoints, children: cellData }))));
+        return (_createElement(TableCell, Object.assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(CellText, Object.assign({}, breakpoints, { children: cellData })))));
     });
     return (_jsx(StyledTableRow, { stripe: striped && index % 2 === 0, children: cells }));
 };

package/dist/esm/components/DateField/DateField.js

@@ -47,10 +47,7 @@ export const DateField = ({ label, hint, error, optional = false, fullWidth = fa
     };
     const handleChange = (key) => (datePartValue) => {
         onChange &&
-            onChange({
-                ...value,
-                [key]: datePartValue,
-            });
+            onChange(Object.assign(Object.assign({}, value), { [key]: datePartValue }));
         if (key !== 'year' && autoFocusNext) {
             const nextField = nextFieldRef[key].current;
             if (nextField && datePartValue.length === 2) {

package/dist/esm/components/Disclosure/Disclosure.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, Fragment as _Fragment } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { useState } from 'react';
@@ -27,11 +38,12 @@ const DisclosurePanel = styled.View(({ theme }) => css `
     margin-top: ${numToPx(theme.space[300])};
     padding-left: ${numToPx(theme.space[600])};
   `);
-export const Disclosure = ({ children, title, expanded = false, onToggle, ref, ...rest }) => {
+export const Disclosure = (_a) => {
+    var { children, title, expanded = false, onToggle, ref } = _a, rest = __rest(_a, ["children", "title", "expanded", "onToggle", "ref"]);
     const [isExpanded, setIsExpanded] = useState(expanded);
     const breakpoints = useBreakpoint();
-    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, { onPress: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, Object.assign({ onPress: () => {
                     setIsExpanded(!isExpanded);
                     onToggle && onToggle(!isExpanded);
-                }, ref: ref, accessibilityState: { expanded: isExpanded }, ...rest, children: [_jsx(DisclosureButtonIcon, { name: "caret-arrow-down", ...breakpoints, size: 14, expanded: isExpanded }), _jsx(DisclosureButtonText, { ...breakpoints, children: title })] }), isExpanded && (_jsx(DisclosurePanel, { ...breakpoints, children: children }))] }));
+                }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest, { children: [_jsx(DisclosureButtonIcon, Object.assign({ name: "caret-arrow-down" }, breakpoints, { size: 14, expanded: isExpanded })), _jsx(DisclosureButtonText, Object.assign({}, breakpoints, { children: title }))] })), isExpanded && (_jsx(DisclosurePanel, Object.assign({}, breakpoints, { children: children })))] }));
 };