@ovotech/element-native 5.2.1-canary-2120912-411 → 5.2.1

package/dist/esm/src/components/ActionList/styled.js

@@ -1,74 +0,0 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-import { HintText } from '../HintText';
-import { Icon } from '../Icon';
-const StyledList = styled.View(({ theme, smallAndUp }) => css `
-    flex-direction: column;
-    margin-top: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
-    margin-bottom: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
-  `);
-export const StyledActionList = styledComponentWithBreakpoints(StyledList);
-export const StyledActionWrapper = styled.View(({ theme, hasBorder, inverted, inList, hint, badgeText }) => css `
-    width: 100%;
-    align-self: flex-start;
-    border-bottom-width: ${hasBorder ? numToPx(theme.border.width.sm) : 0};
-    border-bottom-style: solid;
-    border-bottom-color: ${inverted
-    ? theme.color.surface.dim
-    : theme.color.brand.fixed.onBrand};
-    padding: ${inList && (hint || badgeText) ? numToPx(theme.space[200]) : 0} 0;
-  `);
-export const StyledActionInner = styled.View(({ fullWidth, standalone }) => css `
-    flex-direction: row;
-    justify-content: ${fullWidth ? 'space-between' : 'flex-start'};
-    align-items: center;
-    min-height: ${standalone ? '' : '44px'};
-  `);
-export const StyledActionText = styled.Text(({ theme, smallAndUp, inverted = false }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    return css `
-    color: ${inverted
-        ? theme.color.surface.bright
-        : theme.color.surface.onSurface};
-    font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(fontSize)};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
-  `;
-});
-export const StyledActionNodeWrapper = styled.View `
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-`;
-export const StyledRightIcon = styled(Icon)(({ theme, inverted }) => {
-    return css `
-    color: ${inverted
-        ? theme.color.surface.bright
-        : theme.color.surface.onSurface};
-    margin-left: ${numToPx(theme.space[100])};
-    margin-top: 2px; /* compensation for the line-height of the text */
-  `;
-});
-export const StyledLeftIcon = styled(Icon)(({ theme, inverted, }) => {
-    return css `
-    color: ${inverted
-        ? theme.color.surface.bright
-        : theme.color.surface.onSurface};
-    margin-right: ${numToPx(theme.space[100])};
-  `;
-});
-export const StyledTextWrapper = styled.View(({ theme }) => css `
-    flex-direction: row;
-    align-items: center;
-    gap: ${numToPx(theme.space[200])};
-  `);
-export const StyledHintText = styled(HintText)(({ theme, inverted = false }) => {
-    return css `
-    color: ${inverted
-        ? theme.color.surface.bright
-        : theme.color.surface.onSurfaceVariant};
-  `;
-});

package/dist/esm/src/components/Badge/Badge.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import styled, { css, useTheme } from '../../styled.native';
-const StyledBadge = styled.View(({ inverted, theme, $surface, $message }) => css `
-    padding: ${numToPx(theme.space[50])} ${numToPx(theme.space[200])}
-      ${numToPx(theme.space[100])} ${numToPx(theme.space[200])};
-    border-radius: 16px;
-    border: ${numToPx(theme.border.width.md)} solid ${theme.color.brand.onBrand};
-    background-color: ${inverted ? $message : $surface};
-    align-self: flex-start;
-  `);
-const StyledBadgeText = styled.Text(({ inverted, theme, $surface, $message }) => css `
-    font-family: ${theme.native.font.family.bold};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
-    color: ${inverted ? $surface : $message};
-    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
-  `);
-export const Badge = ({ children, variant = 'neutral', inverted = false, customVariant, ...rest }) => {
-    const theme = useTheme();
-    // check if variant is primitive, otherwise use alert colours
-    const isPrimitive = Object.keys(theme.color).includes(variant);
-    let message = isPrimitive
-        ? // @ts-ignore we're checking the variants above...
-            theme.color[variant]['70']
-        : // @ts-ignore we're checking the variants above...
-            theme.color.alert[variant];
-    let surface = isPrimitive
-        ? // @ts-ignore we're checking the variants above...
-            theme.color[variant]['20']
-        : // @ts-ignore we're checking the variants above...
-            theme.color.alert[`${variant}Tint`];
-    if (customVariant?.backgroundColor !== undefined &&
-        customVariant?.color !== undefined) {
-        message = customVariant.color;
-        surface = customVariant.backgroundColor;
-    }
-    return (_jsx(StyledBadge, { inverted: inverted, "$surface": surface, "$message": message, ...rest, children: _jsx(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) }));
-};

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

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useBreakpoint } from '../../hooks';
-import { StyledButtonIcon, StyledButtonText, StyledButtonWrapper, StyledInner, } from './Button.styles';
-const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = 'surface', inverted = false, size = 'default', accessibilityRole = 'button', activeOpacity = 0.8, ref, ...rest }) => {
-    const { smallAndUp } = useBreakpoint();
-    const isIconOnly = !children;
-    const iconSizes = {
-        small: 14,
-        default: 16,
-        large: 20,
-    };
-    const iconSize = iconSizes[size];
-    return (_jsx(StyledButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, ref: ref, children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && (_jsx(StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: iconSize })), children ? (_jsx(StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && (_jsx(StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: iconSize }))] }) }));
-};
-const ButtonDestructive = (props) => (_jsx(Button, { variant: "destructive", ...props }));
-export { Button, ButtonDestructive };

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

@@ -1,112 +0,0 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon/Icon';
-export const StyledButtonWrapper = styled.TouchableOpacity `
-  align-self: flex-start;
-  flex-direction: row;
-  align-items: flex-start;
-`;
-export const StyledInner = styled.View(({ theme, fullWidth, inverted, variant, size, iconOnly, iconRight, iconLeft, }) => {
-    const borderRadius = numToPx(theme.border.radius['3xl']);
-    const backgroundColor = getBackgroundColor(theme, variant, inverted);
-    const borderColor = getBorderColor(theme, variant, inverted);
-    const minHeights = {
-        default: theme.space[1100],
-        small: theme.space[800],
-        large: theme.border.radius['3xl'] * 2 - theme.border.width.sm * 2,
-    };
-    const minHeight = minHeights[size];
-    let top, right, bottom, left;
-    if (size === 'default') {
-        top = numToPx(theme.space[100]);
-        bottom = numToPx(theme.space[100]);
-        right = numToPx(theme.space[iconRight ? 300 : 500]);
-        left = numToPx(theme.space[iconLeft ? 300 : 500]);
-    }
-    else if (size === 'small') {
-        top = numToPx(theme.space[50]);
-        bottom = numToPx(theme.space[50]);
-        right = numToPx(theme.space[iconRight ? 200 : 300]);
-        left = numToPx(theme.space[iconLeft ? 200 : 300]);
-    }
-    else {
-        top = numToPx(theme.space[200]);
-        bottom = numToPx(theme.space[200]);
-        right = numToPx(theme.space[iconRight ? 500 : 800]);
-        left = numToPx(theme.space[iconLeft ? 500 : 800]);
-    }
-    const padding = `${top} ${right} ${bottom} ${left}`;
-    return css `
-      padding: ${iconOnly ? '0' : padding};
-      background-color: ${backgroundColor};
-      border-radius: ${borderRadius};
-      min-height: ${minHeight};
-      border-style: solid;
-      border-width: ${numToPx(theme.border.width.md)};
-      border-color: ${borderColor};
-      justify-content: center;
-      align-items: center;
-      flex-direction: row;
-      flex-grow: ${fullWidth ? '1' : '0'};
-      min-width: ${iconOnly ? minHeight : 'auto'};
-    `;
-});
-export const StyledButtonIcon = styled(Icon)(({ theme, inverted, variant, iconLeft, iconRight, iconOnly }) => {
-    const color = getIconColor(theme, inverted, variant);
-    return css `
-    margin-left: ${iconRight && !iconOnly ? numToPx(theme.space[100]) : '0'};
-    margin-right: ${iconLeft && !iconOnly ? numToPx(theme.space[100]) : '0'};
-    color: ${color};
-  `;
-});
-export const StyledButtonText = styled.Text(({ theme, smallAndUp, inverted, variant, size }) => {
-    const fontSizes = {
-        default: smallAndUp
-            ? theme.font.size.lg.mediaQuery.sm
-            : theme.font.size.md.mediaQuery.sm,
-        small: theme.font.size.sm.mediaQuery.lg,
-        large: theme.font.size.lg.mediaQuery.sm,
-    };
-    const fontSize = fontSizes[size];
-    const color = getTextColor(theme, inverted, variant);
-    return css `
-    color: ${color};
-    font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(fontSize)};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
-    text-align: center;
-    flex-shrink: 2;
-  `;
-});
-// Helper functions
-const getBackgroundColor = (theme, variant, inverted) => {
-    const button = theme.button;
-    if (variant === 'outline' || variant === 'outline-variant') {
-        return 'transparent';
-    }
-    return inverted ? button.surface.color.bgInverted : button[variant].color.bg;
-};
-const getBorderColor = (theme, variant, inverted) => {
-    const button = theme.button;
-    if (variant === 'outline') {
-        return inverted ? button.surface.color.bgVariant : button.surface.color.bg;
-    }
-    if (variant === 'outline-variant') {
-        return button.surface.color.bgVariant;
-    }
-    return inverted ? button.surface.color.bgInverted : button[variant].color.bg;
-};
-const getIconColor = (theme, inverted, variant) => {
-    const button = theme.button;
-    if (variant === 'outline' || variant === 'outline-variant') {
-        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
-    }
-    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
-};
-const getTextColor = (theme, inverted, variant) => {
-    const button = theme.button;
-    if (variant === 'outline' || variant === 'outline-variant') {
-        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
-    }
-    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
-};

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

@@ -1,63 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { Animated } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import { useTheme } from '../../styled.native';
-import { AnimatedStyledCard, BackgroundImage, TappableWrapper, } from './Card.styles';
-export const getCardFlags = (props) => {
-    const { background, onPress, displayStyle } = props;
-    const hasBgImage = !!background && typeof background !== 'string';
-    const tappable = Boolean(onPress);
-    const isDefault = displayStyle === 'default';
-    const isOutline = displayStyle === 'outline';
-    return { hasBgImage, tappable, isDefault, isOutline };
-};
-function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
-    const borderAnim = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        Animated.timing(borderAnim, {
-            toValue: isSelected ? 1 : 0,
-            duration,
-            useNativeDriver: false,
-        }).start();
-    }, [isSelected, duration]);
-    return borderAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [baseColor, selectedColor],
-    });
-}
-export const Card = ({ children, displayStyle = 'default', background, onPress, ...rest }) => {
-    const theme = useTheme();
-    const [isFocused, setFocused] = useState(false);
-    const [isSelected, setSelected] = useState(false);
-    const { largeAndUp } = useBreakpoint();
-    const { hasBgImage, tappable, isDefault, isOutline } = getCardFlags({
-        background,
-        onPress,
-        displayStyle,
-    });
-    let baseBorderColor = theme.color.surface.bright;
-    if (isOutline) {
-        baseBorderColor = theme.color.surface.bright;
-    }
-    else if (isDefault) {
-        if (hasBgImage)
-            baseBorderColor = 'transparent';
-        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 handlePress = () => {
-        setSelected(prev => !prev);
-        onPress?.();
-    };
-    const CardContent = (_jsxs(AnimatedStyledCard, { displayStyle: displayStyle, background: background, largeAndUp: largeAndUp, ...rest, style: [rest?.style, { borderColor: animatedBorderColor }], children: [hasBgImage && (_jsx(BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] }));
-    if (!tappable)
-        return CardContent;
-    return (_jsx(TappableWrapper, { onPress: handlePress, onFocus: () => setFocused(true), onBlur: () => setFocused(false), accessibilityRole: "button", focused: isFocused, largeAndUp: largeAndUp, style: ({ pressed }) => ({
-            opacity: pressed ? 0.9 : 1,
-        }), children: CardContent }));
-};

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

@@ -1,51 +0,0 @@
-import { Animated, ImageBackground, Pressable, View } from 'react-native';
-import styled from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-import { getCardFlags } from './Card';
-const StyledCardBase = styled(View)(({ theme, displayStyle, background, onPress, largeAndUp, size, }) => {
-    const { hasBgImage, tappable, isDefault } = getCardFlags({
-        background,
-        onPress,
-        displayStyle,
-    });
-    const backgroundColor = hasBgImage
-        ? 'transparent'
-        : typeof background === 'string'
-            ? background
-            : isDefault || tappable
-                ? theme.color.surface.bright
-                : 'transparent';
-    return {
-        ...(size || {}),
-        padding: theme.space[400],
-        position: 'relative',
-        borderWidth: theme.border.width.md,
-        borderStyle: 'solid',
-        borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
-        overflow: 'hidden',
-        backgroundColor,
-    };
-});
-const CardBase = styledComponentWithBreakpoints(StyledCardBase);
-export const AnimatedStyledCard = Animated.createAnimatedComponent(CardBase);
-export const BackgroundImage = styled(ImageBackground)(({ theme, largeAndUp }) => ({
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    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: 2,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.1,
-    shadowRadius: 10,
-    elevation: 6,
-}));

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

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { Button, Card, P, Strong } from '../..';
-import { ThemeContext } from '../../../styled.native';
-import { Avatar, Body, BodyContent, ButtonContainer, CardContent, TextContent, Title, TitleContent, } from './AccountCard.styles';
-//@ts-ignore
-import AccountImage from './account-card-image.jpg';
-const Beyond = () => {
-    const theme = useContext(ThemeContext);
-    return _jsx(P, { style: { color: theme.color.brand.bold }, children: "Beyond" });
-};
-export const AccountCard = ({ isBeyond, avatar, onSwitch, title, accNumber, bodyText, }) => {
-    const theme = useContext(ThemeContext);
-    return (_jsx(Card, { background: isBeyond ? theme.color.brand.dim : theme.color.brand.brand, children: _jsxs(CardContent, { children: [_jsx(Avatar, { source: avatar ? avatar : AccountImage, resizeMode: "cover", accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Account Card Image' }), _jsxs(TextContent, { children: [_jsx(TitleContent, { children: _jsxs(Title, { children: [_jsx(Strong, { children: title }), " ", isBeyond && _jsx(Beyond, {})] }) }), _jsxs(BodyContent, { children: [_jsxs(Body, { children: ["Account Number: ", accNumber] }), _jsx(Body, { isBeyond: isBeyond, children: bodyText })] })] }), _jsx(ButtonContainer, { children: onSwitch && (_jsx(Button, { size: "small", inverted: isBeyond, iconRight: "switch", onPress: onSwitch })) })] }) }));
-};

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

@@ -1,56 +0,0 @@
-import { ImageBackground, View } from 'react-native';
-import styled from '../../../styled.native';
-import { P } from '../../P';
-export const CardContent = styled(View)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.space[200],
-    width: '100%',
-    flexWrap: 'nowrap',
-    alignItems: 'center',
-}));
-export const Avatar = styled(ImageBackground)(({ theme }) => ({
-    borderRadius: theme.border.radius['2xl'],
-    backgroundColor: theme.color.surface.bright,
-    borderWidth: theme.border.width.sm,
-    borderColor: theme.color.surface.bright,
-    padding: '8px',
-    width: '44px',
-    height: '44px',
-    flexShrink: 0,
-    overflow: 'hidden',
-}));
-export const TextContent = styled(View)(({ theme }) => ({
-    flex: 1,
-    flexShrink: 1,
-    flexGrow: 1,
-    fontColor: theme.color.surface.bright,
-}));
-export const TitleContent = styled(View)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.space[100],
-}));
-export const Title = styled(P)(({ theme }) => ({
-    color: theme.color.brand.onBrand,
-    fontSize: theme.font.size.md.mediaQuery.sm,
-    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
-    fontWeight: 700,
-}));
-export const BodyContent = styled(View)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.space[200],
-}));
-export const Body = styled(P)(({ theme, isBeyond }) => ({
-    color: isBeyond ? theme.color.brand.bright : theme.color.surface.bright,
-    fontSize: theme.font.size.sm.mediaQuery.lg,
-    fontWeight: 450,
-    lineHeight: theme.font.lineHeight.sm.mediaQuery.lg,
-}));
-export const ButtonContainer = styled(View)({
-    justifyContent: 'center',
-    alignSelf: 'stretch',
-    width: '32px',
-    margin: '6px',
-});

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

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

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { Image, Pressable, View } from 'react-native';
-import { Icon, P, Strong } from '../..';
-import { ThemeContext } from '../../../styled.native';
-import { CardWithBalance, CtaBar, EyebrowContainer, ImageContainer, Text, TopContent, } from './BalanceCard.styles';
-// @ts-ignore
-import BalanceImage from './balance-card-image.png';
-export const BalanceCard = ({ popOutImage, eyebrowText, eyebrowIcon, title, bodyText, ctaBanner, }) => {
-    const theme = useContext(ThemeContext);
-    const hasCta = Boolean(ctaBanner);
-    const Wrapper = hasCta ? Pressable : View;
-    return (_jsxs(View, { children: [_jsx(ImageContainer, { children: _jsx(Image, { source: popOutImage ? popOutImage : BalanceImage, accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Balance Card Image', style: {
-                        height: 100,
-                        aspectRatio: (Image.resolveAssetSource(popOutImage || BalanceImage)?.width ??
-                            1) /
-                            (Image.resolveAssetSource(popOutImage || BalanceImage)?.height ??
-                                1),
-                    } }) }), _jsxs(CardWithBalance, { onPress: ctaBanner?.onPress, hasCta: hasCta, children: [_jsxs(TopContent, { children: [_jsxs(EyebrowContainer, { children: [_jsx(P, { children: _jsx(Strong, { children: eyebrowText }) }), _jsx(Icon, { name: eyebrowIcon })] }), title] }), _jsx(View, { children: _jsx(Text, { children: bodyText }) })] }), hasCta && (_jsx(Wrapper, { ...(hasCta
-                    ? {
-                        onPress: ctaBanner.onPress,
-                        accessibilityRole: 'button',
-                        accessibilityLabel: ctaBanner.text,
-                    }
-                    : {}), style: { flex: 1, paddingHorizontal: 4 }, children: _jsxs(CtaBar, { children: [_jsx(Strong, { style: { color: theme.color.brand.onBrand }, children: ctaBanner?.text }), _jsx(Icon, { name: "chevron-right", color: theme.color.brand.onBrand })] }) }))] }));
-};

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

@@ -1,48 +0,0 @@
-import { View } from 'react-native';
-import styled from '../../../styled.native';
-import { Card } from '../../Card/Card';
-import { P } from '../../P';
-export const CardWithBalance = styled(Card)(({ theme, hasCta }) => ({
-    paddingTop: theme.space[500],
-    paddingBottom: theme.space[500],
-    borderBottomLeftRadius: hasCta ? 0 : undefined,
-    borderBottomRightRadius: hasCta ? 0 : undefined,
-}));
-export const ImageContainer = styled(View)(({ theme }) => ({
-    position: 'absolute',
-    top: -15,
-    right: theme.space[200],
-    zIndex: 2,
-}));
-export const CtaBar = styled(View)(({ theme, largeAndUp = false }) => ({
-    minHeight: theme.space[1000],
-    width: '100%',
-    background: theme.color.surface.onSurface,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    top: -6,
-    paddingLeft: theme.space[400],
-    paddingRight: theme.space[400],
-    borderBottomLeftRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
-    borderBottomRightRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
-}));
-export const TopContent = styled(View)(({ theme }) => ({
-    width: '64%',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.space[100],
-}));
-export const EyebrowContainer = styled(View)(({ theme }) => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.space[100],
-    flexWrap: 'wrap',
-}));
-export const Text = styled(P)(({ theme }) => ({
-    color: theme.color.brand.dim,
-    fontSize: theme.font.size.md.mediaQuery.sm,
-    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
-    fontWeight: 450,
-}));

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

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

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

@@ -1,29 +0,0 @@
-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 { Icon } from '../../Icon';
-import { CardWithIconText, Subtitle, TextContainer, TitleContainer, } from './IconTextCard.styles';
-export const IconTextCard = ({ icon, title, subTitle, size = 'default', }) => {
-    const isSmall = size === 'small';
-    const theme = useTheme();
-    const resolveColor = (colorKey) => {
-        if (colorKey === 'onSurface')
-            return theme.color.surface.onSurface;
-        return theme.color.brand.brand;
-    };
-    const titleLineHeight = theme.font.lineHeight[isSmall ? 'lg' : '3xl'].mediaQuery.sm;
-    const renderTitle = () => {
-        if (!title)
-            return null;
-        const HeadingComponent = isSmall ? Heading4 : Heading2;
-        if (typeof title === 'string') {
-            return (_jsx(HeadingComponent, { style: { lineHeight: titleLineHeight }, children: title }));
-        }
-        return (_jsx(_Fragment, { children: title.map((segment, index) => (_jsx(HeadingComponent, { style: {
-                    color: resolveColor(segment.color),
-                    lineHeight: titleLineHeight,
-                    marginRight: isSmall ? 3 : 4,
-                }, children: segment.text }, index))) }));
-    };
-    return (_jsxs(CardWithIconText, { isSmall: isSmall, children: [_jsx(Icon, { name: icon, size: 24 }), _jsxs(TextContainer, { isSmall: isSmall, children: [_jsx(TitleContainer, { children: renderTitle() }), !isSmall && subTitle && _jsx(Subtitle, { children: subTitle })] })] }));
-};

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

@@ -1,24 +0,0 @@
-import { View } from 'react-native';
-import styled from '../../../styled.native';
-import { Card } from '../../Card/Card';
-import { P } from '../../P';
-export const CardWithIconText = styled(Card)(({ theme, isSmall }) => ({
-    minHeight: isSmall ? 172 : undefined,
-    gap: theme.space[600],
-}));
-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 Subtitle = styled(P)(({ theme }) => ({
-    color: theme.color.surface.onSurface,
-    fontSize: theme.font.size.md.mediaQuery.lg,
-    lineHeight: theme.font.lineHeight.md.mediaQuery.lg,
-    fontWeight: 450,
-    marginTop: '8px',
-}));

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

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

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

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Image, View } from 'react-native';
-import { Strong } from '../..';
-import { CardBadge, CardWithLinkText, ImageContent, Subtitle, TextContent, Title, } from './LinkTextCard.styles';
-//@ts-ignore
-import Illustration from './link-text-image.png';
-export const LinkTextCard = ({ image, badge, title, subtitle, size, onPress, }) => {
-    const isSmall = size === 'small';
-    const hasBadge = !!badge;
-    const CardContent = (_jsxs(CardWithLinkText, { isSmall: isSmall, hasBadge: hasBadge, onPress: onPress, children: [_jsxs(TextContent, { isSmall: isSmall, children: [_jsx(View, { children: _jsx(Title, { isSmall: isSmall, children: _jsx(Strong, { children: title }) }) }), !isSmall && (_jsx(View, { children: _jsx(Subtitle, { children: subtitle }) }))] }), _jsx(ImageContent, { children: _jsx(Image, { source: image ? image : Illustration, resizeMode: "contain", style: { width: '100%', height: '100%' } }) })] }));
-    if (!hasBadge) {
-        return CardContent;
-    }
-    return (_jsxs(View, { style: { position: 'relative' }, children: [_jsx(CardBadge, { variant: "success", children: badge }), CardContent] }));
-};

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

@@ -1,47 +0,0 @@
-import { View } from 'react-native';
-import styled from '../../../styled.native';
-import { Badge } from '../../Badge';
-import { Card } from '../../Card';
-import { Heading3 } from '../../Heading';
-import { P } from '../../P';
-export const CardWithLinkText = styled(Card)(({ theme, isSmall, hasBadge }) => ({
-    paddingTop: hasBadge ? theme.space[800] : theme.space[400],
-    display: 'flex',
-    flexDirection: isSmall ? 'column-reverse' : 'row',
-}));
-export const CardBadge = styled(Badge)(({ theme }) => ({
-    position: 'absolute',
-    top: 4,
-    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 TextContent = styled(View)(({ isSmall }) => ({
-    flex: isSmall ? undefined : 1,
-    paddingRight: isSmall ? 0 : 5,
-}));
-export const ImageContent = styled(View)({
-    width: 80,
-    height: 80,
-    justifyContent: 'center',
-    alignItems: 'center',
-});
-export const Title = styled(Heading3)(({ theme, isSmall }) => ({
-    color: theme.color.surface.onSurface,
-    fontSize: isSmall
-        ? theme.font.size.lg.mediaQuery.lg
-        : theme.font.size['2xl'].mediaQuery.sm,
-    fontWeight: 700,
-    marginBottom: isSmall ? 0 : '8px',
-}));
-export const Subtitle = styled(P)(({ theme }) => ({
-    color: theme.color.surface.onSurface,
-    fontSize: theme.font.size.md.mediaQuery.lg,
-    fontWeight: 450,
-}));

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

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

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

@@ -1,4 +0,0 @@
-export { AccountCard } from './AccountCard';
-export { BalanceCard } from './BalanceCard';
-export { IconTextCard } from './IconTextCard';
-export { LinkTextCard } from './LinkTextCard';