@ovotech/element-native 5.4.2-canary-5808439-426 → 5.4.2

package/dist/esm/{components → src/components}/Cards/AccountCard/AccountCard.js

@@ -3,6 +3,7 @@ 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);

package/dist/{components → esm/src/components}/Cards/BalanceCard/BalanceCard.js

@@ -4,6 +4,7 @@ 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);

package/dist/{components → esm/src/components}/Cards/IconDataCard/IconDataCard.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading2, Icon, P, Strong } from '../..';
 import { useTheme } from '../../../styled.native';
-import { CardWithIconData, HeadingContainer, IconContainer, Metric, MetricsContainer, StyledP, SubMetric, SubMetricsContainer, ValueContainer, ValuesWrapper, } from './IconDataCard.styles';
+import { CardWithIconData, HeadingContainer, IconContainer, Metric, MetricsContainer, StyledP, SubMetric, ValueContainer, ValuesWrapper, } from './IconDataCard.styles';
 const ValueBlock = ({ data, isSmall }) => {
     const theme = useTheme();
     const resolvedColor = data.iconColor ?? theme.color.brand.brand;
-    return (_jsxs(ValueContainer, { isSmall: isSmall, children: [_jsx(IconContainer, { children: _jsx(Icon, { name: data.icon, size: 16, color: resolvedColor }) }), _jsxs(MetricsContainer, { children: [_jsx(Metric, { children: data.metric }), data.metric2 && _jsx(Heading2, { children: data.metric2 }), data.subMetric && (_jsx(SubMetricsContainer, { children: _jsx(SubMetric, { children: data.subMetric }) }))] }), data.subtext && _jsx(P, { children: data.subtext })] }));
+    return (_jsxs(ValueContainer, { isSmall: isSmall, children: [_jsx(IconContainer, { children: _jsx(Icon, { name: data.icon, size: 16, color: resolvedColor }) }), _jsxs(MetricsContainer, { children: [_jsx(Metric, { children: data.metric }), data.metric2 && _jsx(Heading2, { children: data.metric2 }), data.subMetric && _jsx(SubMetric, { children: data.subMetric })] }), data.subtext && _jsx(P, { children: data.subtext })] }));
 };
 export const IconDataCard = ({ heading, timeframe, value, value2, size, }) => {
     const isSmall = size === 'small';

package/dist/esm/{components → src/components}/Cards/IconDataCard/IconDataCard.styles.js

@@ -1,20 +1,20 @@
+import { theme } from '@ovotech/element-core';
 import { View } from 'react-native';
 import styled from '../../../styled.native';
 import { Card } from '../../Card';
 import { Heading2, Heading4 } from '../../Heading';
 import { P } from '../../P';
-import { SmallCardHeight } from '../shared';
 export const CardWithIconData = styled(Card)(({ isSmall }) => ({
-    minHeight: isSmall ? SmallCardHeight : undefined,
+    minHeight: isSmall ? 172 : undefined,
 }));
-export const HeadingContainer = styled(View)(({ theme }) => ({
+export const HeadingContainer = styled(View)({
     marginBottom: theme.space[350],
-}));
+});
 export const ValuesWrapper = styled(View)(({ theme }) => ({
     flexDirection: 'row',
     gap: theme.space[300],
 }));
-export const ValueContainer = styled(View)(({ isSmall, theme }) => ({
+export const ValueContainer = styled(View)(({ isSmall }) => ({
     width: isSmall ? undefined : '50%',
     gap: theme.space[100],
 }));
@@ -23,12 +23,6 @@ export const MetricsContainer = styled(View)(({ theme }) => ({
     flexWrap: 'wrap',
     gap: theme.space[100],
 }));
-export const SubMetricsContainer = styled(View)(({ theme }) => ({
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    marginBottom: theme.space[25],
-    gap: theme.space[100],
-}));
 export const IconContainer = styled(View)(({ theme }) => ({
     borderRadius: theme.border.radius['2xl'],
     backgroundColor: theme.color.surface.surface,

package/dist/{components → esm/src/components}/Cards/IconTextCard/IconTextCard.js

@@ -2,11 +2,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useTheme } from '../../../styled.native';
 import { Heading2, Heading4 } from '../../Heading';
 import { Icon } from '../../Icon';
-import { resolveColor } from '../shared';
 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)
@@ -15,11 +19,11 @@ export const IconTextCard = ({ icon, title, subTitle, size = 'default', }) => {
         if (typeof title === 'string') {
             return (_jsx(HeadingComponent, { style: { lineHeight: titleLineHeight }, children: title }));
         }
-        return (_jsx(_Fragment, { children: title.map(segment => (_jsx(HeadingComponent, { style: {
+        return (_jsx(_Fragment, { children: title.map((segment, index) => (_jsx(HeadingComponent, { style: {
                     color: resolveColor(segment.color),
                     lineHeight: titleLineHeight,
                     marginRight: isSmall ? 3 : 4,
-                }, children: segment.text }, segment.text))) }));
+                }, 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/{components → src/components}/Cards/IconTextCard/IconTextCard.styles.js

@@ -2,9 +2,8 @@ import { View } from 'react-native';
 import styled from '../../../styled.native';
 import { Card } from '../../Card/Card';
 import { P } from '../../P';
-import { SmallCardHeight } from '../shared';
-export const CardWithIconText = styled(Card)(({ isSmall, theme }) => ({
-    minHeight: isSmall ? SmallCardHeight : undefined,
+export const CardWithIconText = styled(Card)(({ theme, isSmall }) => ({
+    minHeight: isSmall ? 172 : undefined,
     gap: theme.space[600],
 }));
 export const TextContainer = styled(View)(({ isSmall }) => ({

package/dist/{components → esm/src/components}/Cards/LinkTextCard/LinkTextCard.js

@@ -2,6 +2,7 @@ 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';

package/dist/{components → esm/src/components}/Cards/index.js

@@ -3,4 +3,3 @@ export { BalanceCard } from './BalanceCard';
 export { IconDataCard } from './IconDataCard';
 export { IconTextCard } from './IconTextCard';
 export { LinkTextCard } from './LinkTextCard';
-export { ProgressBarCard } from './ProgressBarCard';

package/dist/{components → src/components}/Accordion/styles.d.ts

@@ -509,9 +509,7 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1089,9 +1087,7 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1664,9 +1660,7 @@ export declare const StyledContainer: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{components → src/components}/ActionList/styled.d.ts

@@ -514,9 +514,7 @@ export declare const StyledActionList: (props: Omit<{
             "25": number;
             "50": number;
             "100": number;
-            "150": number;
             "200": number;
-            "250": number;
             "300": number;
             "350": number;
             "400": number;
@@ -1093,9 +1091,7 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1674,9 +1670,7 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2252,9 +2246,7 @@ export declare const StyledActionText: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2830,9 +2822,7 @@ export declare const StyledActionNodeWrapper: import("styled-components").Styled
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3405,9 +3395,7 @@ export declare const StyledRightIcon: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3982,9 +3970,7 @@ export declare const StyledLeftIcon: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -4559,9 +4545,7 @@ export declare const StyledTextWrapper: import("styled-components").StyledCompon
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -5139,9 +5123,7 @@ export declare const StyledHintText: import("styled-components").StyledComponent
             "25": number;
             "50": number;
             "100": number;
-            "150": number;
             "200": number;
-            "250": number;
             "300": number;
             "350": number;
             "400": number;
@@ -5717,9 +5699,7 @@ export declare const StyledHintText: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{components → src/components}/Badge/Badge.d.ts

@@ -525,9 +525,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{components → src/components}/Button/Button.styles.d.ts

@@ -511,9 +511,7 @@ export declare const StyledButtonWrapper: import("styled-components").StyledComp
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1086,9 +1084,7 @@ export declare const StyledInner: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1669,9 +1665,7 @@ export declare const StyledButtonIcon: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2251,9 +2245,7 @@ export declare const StyledButtonText: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{components → src/components}/Card/Card.styles.d.ts

@@ -515,9 +515,7 @@ export declare const AnimatedStyledCard: Animated.AnimatedComponent<(props: Omit
             "25": number;
             "50": number;
             "100": number;
-            "150": number;
             "200": number;
-            "250": number;
             "300": number;
             "350": number;
             "400": number;
@@ -1094,9 +1092,7 @@ export declare const BackgroundImage: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1671,9 +1667,7 @@ export declare const TappableWrapper: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{components → src/components}/Cards/AccountCard/AccountCard.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ImageSourcePropType } from 'react-native';
-type Props = {
+export type Props = {
     isBeyond?: boolean;
     avatar?: ImageSourcePropType;
     onSwitch?: () => void;
@@ -9,4 +9,3 @@ type Props = {
     bodyText?: string;
 };
 export declare const AccountCard: React.FC<Props>;
-export {};

package/dist/{components → src/components}/Cards/AccountCard/AccountCard.js

@@ -3,6 +3,7 @@ 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);

package/dist/{components → src/components}/Cards/AccountCard/AccountCard.styles.d.ts

@@ -510,9 +510,7 @@ export declare const CardContent: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1085,9 +1083,7 @@ export declare const Avatar: import("styled-components").StyledComponent<typeof
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1660,9 +1656,7 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2235,9 +2229,7 @@ export declare const TitleContent: import("styled-components").StyledComponent<t
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2814,9 +2806,7 @@ export declare const Title: import("styled-components").StyledComponent<(props:
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3389,9 +3379,7 @@ export declare const BodyContent: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3968,9 +3956,7 @@ export declare const Body: import("styled-components").StyledComponent<(props: i
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -4545,9 +4531,7 @@ export declare const ButtonContainer: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{esm → src}/components/Cards/BalanceCard/BalanceCard.js

@@ -4,6 +4,7 @@ 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);

package/dist/{components → src/components}/Cards/BalanceCard/BalanceCard.styles.d.ts

@@ -510,9 +510,7 @@ export declare const CardWithBalance: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1087,9 +1085,7 @@ export declare const ImageContainer: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1662,9 +1658,7 @@ export declare const CtaBar: import("styled-components").StyledComponent<typeof
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2239,9 +2233,7 @@ export declare const TopContent: import("styled-components").StyledComponent<typ
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2814,9 +2806,7 @@ export declare const EyebrowContainer: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3393,9 +3383,7 @@ export declare const Text: import("styled-components").StyledComponent<(props: i
         "25": number;
         "50": number;
         "100": number;
-        "150": number;
         "200": number;
-        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{components → src/components}/Cards/IconDataCard/IconDataCard.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconNameExtended } from '../../../providers';
-type Props = {
+export type Props = {
     heading: string;
     timeframe?: string;
     value: {
@@ -22,4 +22,3 @@ type Props = {
     size?: 'default' | 'small';
 };
 export declare const IconDataCard: React.FC<Props>;
-export {};

package/dist/{esm → src}/components/Cards/IconDataCard/IconDataCard.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading2, Icon, P, Strong } from '../..';
 import { useTheme } from '../../../styled.native';
-import { CardWithIconData, HeadingContainer, IconContainer, Metric, MetricsContainer, StyledP, SubMetric, SubMetricsContainer, ValueContainer, ValuesWrapper, } from './IconDataCard.styles';
+import { CardWithIconData, HeadingContainer, IconContainer, Metric, MetricsContainer, StyledP, SubMetric, ValueContainer, ValuesWrapper, } from './IconDataCard.styles';
 const ValueBlock = ({ data, isSmall }) => {
     const theme = useTheme();
     const resolvedColor = data.iconColor ?? theme.color.brand.brand;
-    return (_jsxs(ValueContainer, { isSmall: isSmall, children: [_jsx(IconContainer, { children: _jsx(Icon, { name: data.icon, size: 16, color: resolvedColor }) }), _jsxs(MetricsContainer, { children: [_jsx(Metric, { children: data.metric }), data.metric2 && _jsx(Heading2, { children: data.metric2 }), data.subMetric && (_jsx(SubMetricsContainer, { children: _jsx(SubMetric, { children: data.subMetric }) }))] }), data.subtext && _jsx(P, { children: data.subtext })] }));
+    return (_jsxs(ValueContainer, { isSmall: isSmall, children: [_jsx(IconContainer, { children: _jsx(Icon, { name: data.icon, size: 16, color: resolvedColor }) }), _jsxs(MetricsContainer, { children: [_jsx(Metric, { children: data.metric }), data.metric2 && _jsx(Heading2, { children: data.metric2 }), data.subMetric && _jsx(SubMetric, { children: data.subMetric })] }), data.subtext && _jsx(P, { children: data.subtext })] }));
 };
 export const IconDataCard = ({ heading, timeframe, value, value2, size, }) => {
     const isSmall = size === 'small';