@ovotech/element-native 5.5.0 → 5.6.0

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { Stack } from '../..';
+import { useBreakpoint } from '../../../hooks';
+import { useTheme } from '../../../styled.native';
+import { P } from '../../P';
+import { ContainerWithCardBadge, ResponsiveHeading } from '../components';
+import { TitleContainer } from '../shared.styles';
+import { checkIsSmall } from '../utils';
+import { CardWithHeroImage, OverlayContentContainer, OverlayWrapper, } from './HeroImageCard.styles';
+const GradientBlock = ({ children }) => {
+    const theme = useTheme();
+    const { largeAndUp } = useBreakpoint();
+    return (_jsxs(OverlayWrapper, { largeAndUp: largeAndUp, children: [_jsxs(Svg, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: "grad", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.brand.fixed.dark, stopOpacity: 0 }), _jsx(Stop, { offset: "1", stopColor: theme.color.brand.fixed.dark, stopOpacity: 1 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: "url(#grad)" })] }), _jsx(OverlayContentContainer, { children: children })] }));
+};
+export const HeroImageCard = ({ image, badgeText, heading, subHeading, size = 'default', isSquare = false, }) => {
+    const theme = useTheme();
+    const hasBadge = !!badgeText;
+    const CardContent = (_jsx(CardWithHeroImage, { background: image
+            ? typeof image === 'string'
+                ? { uri: image }
+                : image
+            : theme.color.brand.dim, isSmall: true, isSquare: isSquare, children: _jsx(GradientBlock, { children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(TitleContainer, { children: _jsx(ResponsiveHeading, { heading: heading, size: size }) }), !checkIsSmall(size) && _jsx(P, { inverted: true, children: subHeading })] }) }) }));
+    if (!hasBadge)
+        return CardContent;
+    return (_jsx(ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
+};

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

@@ -0,0 +1,21 @@
+import { View } from 'react-native';
+import styled from '../../../styled.native';
+import { CardWithMinHeight } from '../shared.styles';
+export const CardWithHeroImage = styled(CardWithMinHeight)(({ theme, isSquare }) => (Object.assign({ paddingTop: theme.space[900], justifyContent: 'flex-end' }, (isSquare && {
+    aspectRatio: '1 / 1',
+    height: 'auto',
+}))));
+export const OverlayWrapper = styled(View)(({ theme, largeAndUp }) => ({
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderBottomLeftRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
+    borderBottomRightRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
+    overflow: 'hidden',
+}));
+export const OverlayContentContainer = styled(View)(({ theme }) => ({
+    paddingHorizontal: theme.space[400],
+    paddingBottom: theme.space[400],
+    marginTop: theme.space[1100],
+}));

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

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

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

@@ -1,23 +1,10 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '../../Icon';
 import { P } from '../../P';
-import { checkIsSmall, resolveColor } from '../utils';
-import { CardWithIconText, SubHeading, TextContainer, TitleContainer, } from './IconTextCard.styles';
-const ResponsiveHeading = ({ heading, size = 'default' }) => {
-    const theme = useTheme();
-    const HeadingComponent = checkIsSmall(size) ? Heading4 : Heading2;
-    const lineHeight = theme.font.lineHeight[checkIsSmall(size) ? 'lg' : '3xl'].mediaQuery.sm;
-    if (typeof heading === 'string') {
-        return (_jsx(HeadingComponent, { style: { lineHeight }, children: heading }));
-    }
-    return (_jsx(_Fragment, { children: heading.map(segment => (_jsx(HeadingComponent, { style: {
-                color: resolveColor(segment.color),
-                lineHeight,
-                marginRight: theme.space[100],
-            }, children: segment.text }, segment.text))) }));
-};
+import { ResponsiveHeading } from '../components';
+import { TitleContainer } from '../shared.styles';
+import { checkIsSmall } from '../utils';
+import { CardWithIconText, SubHeading, TextContainer, } from './IconTextCard.styles';
 export const IconTextCard = ({ icon, heading, subHeading, size = 'default', }) => {
     return (_jsxs(CardWithIconText, { isSmall: checkIsSmall(size), children: [_jsx(Icon, { name: icon, size: 24 }), _jsxs(TextContainer, { isSmall: checkIsSmall(size), children: [_jsx(TitleContainer, { children: _jsx(ResponsiveHeading, { heading: heading, size: size }) }), !checkIsSmall(size) && subHeading && (_jsx(SubHeading, { children: _jsx(P, { children: subHeading }) }))] })] }));
 };

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

@@ -8,11 +8,6 @@ export const TextContainer = styled(View)(({ isSmall }) => ({
     flex: isSmall ? 1 : undefined,
     justifyContent: 'flex-end',
 }));
-export const TitleContainer = styled(View)(({ theme }) => ({
-    marginRight: theme.space[50],
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-}));
 export const SubHeading = styled(View)(({ theme }) => ({
     marginTop: theme.space[200],
 }));

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { useTheme } from '../../../styled.native';
+import { P } from '../../P';
+import { ContainerWithCardBadge, ResponsiveHeading } from '../components';
+import { checkIsSmall } from '../utils';
+import { CardImage, CardWithIllustrationText, HeadingContainer, ImageContent, TextContent, } from './IllustrationTextCard.styles';
+export const IllustrationTextCard = ({ badgeText, illustration, heading, subHeading, size = 'default', backgroundColor, onPress, }) => {
+    const theme = useTheme();
+    const hasBadge = !!badgeText;
+    const CardContent = (_jsxs(CardWithIllustrationText, { isSmall: checkIsSmall(size), hasBadge: hasBadge, onPress: onPress, background: backgroundColor
+            ? backgroundColor === 'brand'
+                ? theme.color.brand.accessible
+                : undefined
+            : undefined, children: [_jsxs(TextContent, { isSmall: checkIsSmall(size), children: [_jsx(HeadingContainer, { isSmall: checkIsSmall(size), children: _jsx(ResponsiveHeading, { heading: heading, size: size }) }), !checkIsSmall(size) && subHeading && (_jsx(View, { children: _jsx(P, { inverted: backgroundColor === 'brand', children: subHeading }) }))] }), _jsx(ImageContent, { hasBadge: hasBadge, isSmall: checkIsSmall(size), children: _jsx(CardImage, { source: typeof illustration === 'string'
+                        ? { uri: illustration }
+                        : illustration, resizeMode: "contain" }) })] }));
+    if (!hasBadge) {
+        return CardContent;
+    }
+    return (_jsx(ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
+};

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

@@ -0,0 +1,28 @@
+import { Image, View } from 'react-native';
+import styled from '../../../styled.native';
+import { CardWithMinHeight } from '../shared.styles';
+export const CardWithIllustrationText = styled(CardWithMinHeight)(({ theme, isSmall, hasBadge }) => ({
+    paddingTop: hasBadge ? theme.space[800] : theme.space[400],
+    display: 'flex',
+    flexDirection: isSmall ? 'column-reverse' : 'row',
+}));
+export const TextContent = styled(View)(({ isSmall, theme }) => ({
+    flex: isSmall ? undefined : 1,
+    paddingRight: isSmall ? 0 : theme.space[100],
+    alignSelf: isSmall ? undefined : 'flex-end',
+}));
+export const HeadingContainer = styled(View)(({ theme, isSmall }) => ({
+    marginBottom: isSmall ? 0 : theme.space[200],
+}));
+export const ImageContent = styled(View)(({ theme, isSmall, hasBadge }) => ({
+    width: isSmall ? theme.space[1600] : theme.space[3000],
+    height: isSmall ? theme.space[1600] : theme.space[3000],
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: isSmall ? undefined : 'center',
+    marginTop: hasBadge && !isSmall ? -theme.space[400] : 0,
+}));
+export const CardImage = styled(Image)({
+    width: '100%',
+    height: '100%',
+});

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

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

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

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
-import { P, Strong } from '../..';
-import { CardBadge } from '../shared.styles';
+import { P } from '../../P';
+import { Strong } from '../../Strong';
+import { ContainerWithCardBadge } from '../components';
 import { checkIsSmall } from '../utils';
 import { CardImage, CardWithLinkText, Heading, ImageContent, TextContent, } from './LinkTextCard.styles';
-export const LinkTextCard = ({ image, badge, heading, subHeading, size, onPress, }) => {
-    const hasBadge = !!badge;
-    const CardContent = (_jsxs(CardWithLinkText, { isSmall: checkIsSmall(size), hasBadge: hasBadge, onPress: onPress, children: [_jsxs(TextContent, { isSmall: checkIsSmall(size), children: [_jsx(View, { children: _jsx(Heading, { isSmall: checkIsSmall(size), children: _jsx(Strong, { children: heading }) }) }), !checkIsSmall(size) && (_jsx(View, { children: _jsx(P, { children: subHeading }) }))] }), _jsx(ImageContent, { children: _jsx(CardImage, { source: image
+export const LinkTextCard = ({ image, badgeText, heading, subHeading, size, onPress, }) => {
+    const hasBadge = !!badgeText;
+    const CardContent = (_jsxs(CardWithLinkText, { isSmall: checkIsSmall(size), hasBadge: hasBadge, onPress: onPress, children: [_jsxs(TextContent, { isSmall: checkIsSmall(size), children: [_jsx(View, { children: _jsx(Heading, { isSmall: checkIsSmall(size), children: _jsx(Strong, { children: heading }) }) }), !checkIsSmall(size) && !!subHeading && (_jsx(View, { children: _jsx(P, { children: subHeading }) }))] }), _jsx(ImageContent, { isSmall: checkIsSmall(size), hasBadge: hasBadge, children: _jsx(CardImage, { source: image
                         ? image
                         : {
                             uri: 'https://www.ovobyus.com/transform/eed55bf8-f059-4acb-a043-2d0a6d12537f/homepage-supporting-house-image',
@@ -14,5 +15,5 @@ export const LinkTextCard = ({ image, badge, heading, subHeading, size, onPress,
     if (!hasBadge) {
         return CardContent;
     }
-    return (_jsxs(View, { style: { position: 'relative' }, children: [_jsx(CardBadge, { variant: "success", children: badge }), CardContent] }));
+    return (_jsx(ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
 };

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

@@ -7,16 +7,19 @@ export const CardWithLinkText = styled(Card)(({ theme, isSmall, hasBadge }) => (
     display: 'flex',
     flexDirection: isSmall ? 'column-reverse' : 'row',
 }));
-export const TextContent = styled(View)(({ isSmall }) => ({
+export const TextContent = styled(View)(({ isSmall, theme }) => ({
     flex: isSmall ? undefined : 1,
-    paddingRight: isSmall ? 0 : 5,
+    paddingRight: isSmall ? 0 : theme.space[100],
+    alignSelf: isSmall ? undefined : 'flex-end',
 }));
-export const ImageContent = styled(View)({
-    width: 80,
-    height: 80,
+export const ImageContent = styled(View)(({ theme, isSmall, hasBadge }) => ({
+    width: isSmall ? theme.space[1600] : theme.space[2000],
+    height: isSmall ? theme.space[1600] : theme.space[2000],
     justifyContent: 'center',
     alignItems: 'center',
-});
+    alignSelf: isSmall ? undefined : 'center',
+    marginTop: hasBadge && !isSmall ? -theme.space[400] : 0,
+}));
 export const CardImage = styled(Image)({
     width: '100%',
     height: '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, 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

@@ -3,7 +3,10 @@ import styled from '../../styled.native';
 import { Badge } from '../Badge';
 import { Card } from '../Card';
 export const SMALL_CARD_HEIGHT = 172;
-export const CardBadge = styled(Badge)(({ theme }) => ({
+export const BadgeContainer = styled(View)({
+    position: 'relative',
+});
+export const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
     top: theme.space[100],
     left: theme.space[500],
@@ -16,6 +19,11 @@ export const CardBadge = styled(Badge)(({ theme }) => ({
     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,
 }));
@@ -31,3 +39,11 @@ export const WrappedContainer = styled(View)(({ theme }) => ({
     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

@@ -1,3 +1,4 @@
+import { Alert } from 'react-native';
 import { useTheme } from '../../styled.native';
 export const checkIsSmall = (size) => size === 'small';
 export const resolveColor = (colorKey = 'default') => {
@@ -8,5 +9,15 @@ export const resolveColor = (colorKey = 'default') => {
     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

@@ -10,59 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     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, Object.assign({ 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};
-    `;
-});
+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 = (_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;

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/CurrencyInput/CurrencyInput.js

@@ -9,15 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+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';
+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, Object.assign({ 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/Divider/Divider.js

@@ -5,7 +5,9 @@ const StyledDivider = styled.View(({ theme, type = 'default', width = '100%' })
       height: 1px;
       background: ${type === 'default'
         ? theme.color.surface.border
-        : theme.color.surface.borderDim};
+        : type === 'brand'
+            ? theme.color.green[70]
+            : theme.color.surface.borderDim};
       width: ${width};
     `;
 });

package/dist/esm/components/EmailInput/EmailInput.js

@@ -10,9 +10,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { Input } from '../Input/Input';
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const EmailInput = (_a) => {
-    var { ref } = _a, rest = __rest(_a, ["ref"]);
-    return (_jsx(Input, Object.assign({ keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }, rest)));
+    var { onChangeText, onSubmitEditing, value, invalid, onValidityChange } = _a, rest = __rest(_a, ["onChangeText", "onSubmitEditing", "value", "invalid", "onValidityChange"]);
+    const textValue = typeof value === 'string' ? value : '';
+    const isValid = useMemo(() => textValue.length > 0 && EMAIL_REGEX.test(textValue), [textValue]);
+    const [hasUserInput, setHasUserInput] = useState(false);
+    useEffect(() => {
+        onValidityChange === null || onValidityChange === void 0 ? void 0 : onValidityChange(isValid);
+    }, [isValid, onValidityChange]);
+    return (_jsx(Input, Object.assign({ keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, value: value, invalid: invalid !== null && invalid !== void 0 ? invalid : (hasUserInput && !isValid), onChangeText: text => {
+            if (!hasUserInput)
+                setHasUserInput(true);
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+        }, onSubmitEditing: e => {
+            if (!isValid)
+                return;
+            onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(e);
+        } }, rest)));
 };
 export { EmailInput };