@ovotech/element-native 5.5.0 → 5.7.0

package/dist/esm/components/BottomActionBar/OverlayProvider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import styled from '../../styled.native';
+const OverlayContext = React.createContext(null);
+const StyledView = styled.View({
+    flex: 1,
+});
+export const BottomActionBarOverlayProvider = ({ children }) => {
+    const [entries, setEntries] = React.useState([]);
+    const api = React.useMemo(() => ({
+        mount: (key, node) => {
+            setEntries(prev => {
+                const next = prev.filter(e => e.key !== key);
+                next.push({ key, node });
+                return next;
+            });
+        },
+        unmount: key => {
+            setEntries(prev => prev.filter(e => e.key !== key));
+        },
+    }), []);
+    return (_jsx(OverlayContext.Provider, { value: api, children: _jsxs(StyledView, { children: [children, _jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: entries.map(e => (_jsx(React.Fragment, { children: e.node }, e.key))) })] }) }));
+};
+export const useOverlayContext = () => {
+    const ctx = React.useContext(OverlayContext);
+    if (!ctx)
+        throw new Error('BottomActionOverlayProvider is missing above in the tree');
+    return ctx;
+};

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

@@ -0,0 +1,2 @@
+export { BottomActionBar } from './BottomActionBar';
+export { BottomActionBarOverlayProvider } from './OverlayProvider';

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

@@ -18,7 +18,7 @@ const Button = (_a) => {
     const { smallAndUp } = useBreakpoint();
     const isIconOnly = !children;
     const iconSizes = {
-        small: 14,
+        small: 16,
         default: 16,
         large: 20,
     };

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

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

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

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

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

@@ -70,10 +70,10 @@ export const CreditContainer = styled(View)(({ theme }) => ({
     paddingBottom: theme.space[200],
 }));
 export const StyledDisplay4 = styled(Display4)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight.d3.mediaQuery.sm,
+    lineHeight: `${theme.font.lineHeight.d3.mediaQuery.sm}px`,
 }));
 export const StyledHeading1 = styled(Heading1)(({ theme }) => ({
-    lineHeight: theme.font.lineHeight.d4.mediaQuery.sm,
+    lineHeight: `${theme.font.lineHeight.d4.mediaQuery.sm}px`,
 }));
 export const ErrorContainer = styled(View)(({ theme }) => ({
     flexDirection: 'column',

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Heading2, Heading3, Icon, P, Stack } from '../..';
+import { useTheme } from '../../../styled.native';
+import { checkIsSmall } from '../utils';
+import { CardDisruptive } from './DisruptiveCard.styles';
+const CARD_ICONS = {
+    success: 'check-circle',
+    info: 'info',
+    warning: 'info',
+};
+const getVariantStyles = (variant, theme) => {
+    switch (variant) {
+        case 'success':
+            return {
+                iconTextColor: theme.color.alert.success,
+                background: theme.color.brand.bright,
+            };
+        case 'info':
+            return {
+                iconTextColor: theme.color.alert.info,
+                background: theme.color.alert.infoTint,
+            };
+        case 'warning':
+        default:
+            return {
+                iconTextColor: theme.color.alert.warning,
+                background: theme.color.alert.warningTint,
+            };
+    }
+};
+const DisruptiveHeading = ({ heading, size = 'default', color, }) => {
+    const HeadingComponent = checkIsSmall(size) ? Heading3 : Heading2;
+    const headingStyle = useMemo(() => ({ color }), [color]);
+    return _jsx(HeadingComponent, { style: headingStyle, children: heading });
+};
+export const DisruptiveCard = ({ variant = 'success', icon, heading, subHeading, size = 'default', }) => {
+    const theme = useTheme();
+    const { iconTextColor, background } = getVariantStyles(variant, theme);
+    return (_jsx(CardDisruptive, { background: background, isSmall: true, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsx(Icon, { name: icon !== null && icon !== void 0 ? icon : CARD_ICONS[variant], size: 32, color: iconTextColor }), _jsx(DisruptiveHeading, { color: iconTextColor, heading: heading, size: size }), subHeading && !checkIsSmall(size) && (_jsx(P, { style: { color: iconTextColor }, children: subHeading }))] }) }));
+};

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

@@ -0,0 +1,5 @@
+import styled from '../../../styled.native';
+import { CardWithMinHeight } from '../shared.styles';
+export const CardDisruptive = styled(CardWithMinHeight)({
+    justifyContent: 'flex-end',
+});

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

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

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,27 @@
+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',
+    justifyContent: 'space-between',
+}));
+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],
+    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/OfferCard/OfferCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { useTheme } from '../../../styled.native';
+import { Icon } from '../../Icon';
+import { P } from '../../P';
+import { ContainerWithCardBadge } from '../components';
+import { checkIsSmall } from '../utils';
+import { CardImage, CardWithOffer, EyebrowContainer, EyebrowText, HeadingText, IllustrationContainer, ImageContainer, SubHeadingContainer, TextContent, } from './OfferCard.styles';
+const GraphicContent = ({ graphic }) => {
+    if (!graphic) {
+        return null;
+    }
+    const resizeMode = graphic.type === 'image' ? 'cover' : 'contain';
+    return (_jsx(CardImage, { source: typeof graphic.source === 'string'
+            ? { uri: graphic.source }
+            : graphic.source, resizeMode: resizeMode }));
+};
+export const OfferCard = ({ badgeText, graphic, eyebrowText, eyebrowIcon, heading, subHeading, size = 'default', onPress, }) => {
+    const theme = useTheme();
+    const hasBadge = !!badgeText;
+    const isSmall = checkIsSmall(size);
+    const [cardHeight, setCardHeight] = useState(0);
+    const onLayout = useCallback((e) => {
+        const { height: layoutHeight } = e.nativeEvent.layout;
+        setCardHeight(layoutHeight);
+    }, []);
+    const CardContent = (_jsxs(CardWithOffer, { isSmall: isSmall, onPress: onPress, onLayout: onLayout, children: [_jsxs(TextContent, { isSmall: isSmall, hasBadge: hasBadge, children: [(eyebrowIcon || eyebrowText) && (_jsxs(EyebrowContainer, { children: [eyebrowIcon && (_jsx(Icon, { name: eyebrowIcon, color: theme.color.brand.dim })), eyebrowText && _jsx(EyebrowText, { size: "sm", children: eyebrowText })] })), _jsx(HeadingText, { isSmall: isSmall, children: heading }), subHeading && (_jsx(SubHeadingContainer, { children: _jsx(P, { size: "sm", children: subHeading }) }))] }), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'illustration' && (_jsx(IllustrationContainer, { hasBadge: hasBadge, isSmall: isSmall, children: _jsx(GraphicContent, { graphic: graphic }) })), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'image' && (_jsx(ImageContainer, { isSmall: isSmall, cardHeight: cardHeight, children: _jsx(GraphicContent, { graphic: graphic }) }))] }));
+    if (!hasBadge) {
+        return CardContent;
+    }
+    return (_jsx(ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
+};

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

@@ -0,0 +1,55 @@
+import { Image, View } from 'react-native';
+import { Heading4, P } from '../..';
+import styled from '../../../styled.native';
+import { CardWithMinHeight, SMALL_CARD_HEIGHT } from '../shared.styles';
+export const CardWithOffer = styled(CardWithMinHeight)(({ isSmall }) => ({
+    padding: 0,
+    display: 'flex',
+    flexDirection: isSmall ? 'column-reverse' : 'row',
+    borderWidth: 0,
+    justifyContent: 'space-between',
+}));
+export const TextContent = styled(View)(({ isSmall, hasBadge, theme }) => ({
+    flex: isSmall ? undefined : 1,
+    paddingHorizontal: theme.space[400],
+    paddingTop: !isSmall && hasBadge ? theme.space[800] : theme.space[400],
+    paddingBottom: theme.space[400],
+    alignSelf: isSmall ? undefined : 'flex-end',
+}));
+export const EyebrowContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[50],
+    marginBottom: theme.space[100],
+}));
+export const EyebrowText = styled(P)(({ theme }) => ({
+    color: theme.color.brand.dim,
+}));
+export const HeadingText = styled(Heading4)(({ isSmall, theme }) => ({
+    color: theme.color.surface.onSurface,
+    fontSize: isSmall ? theme.font.size.md.mediaQuery.sm : undefined,
+    lineHeight: isSmall ? theme.font.lineHeight.md.mediaQuery.sm : undefined,
+}));
+export const SubHeadingContainer = styled(View)(({ theme }) => ({
+    marginTop: theme.space[100],
+}));
+export const IllustrationContainer = styled(View)(({ theme, isSmall, hasBadge }) => ({
+    width: isSmall ? theme.space[1600] : theme.space[3000],
+    height: isSmall ? theme.space[1600] : theme.space[3000],
+    alignSelf: isSmall ? undefined : 'center',
+    marginBottom: isSmall ? 0 : theme.space[400],
+    marginTop: hasBadge ? theme.space[800] : theme.space[400],
+    marginLeft: isSmall ? theme.space[400] : 0,
+}));
+export const ImageContainer = styled(View)(({ theme, isSmall, cardHeight = 0 }) => ({
+    height: isSmall
+        ? theme.space[2400]
+        : cardHeight > 0
+            ? cardHeight
+            : SMALL_CARD_HEIGHT,
+    width: !isSmall ? theme.space[3500] : undefined,
+    flexShrink: 0,
+}));
+export const CardImage = styled(Image)({
+    width: '100%',
+    height: '100%',
+});

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

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

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';