@ovotech/element-native 5.4.2 → 5.4.3-canary-faec600-428

package/dist/{src → esm}/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 ? 172 : undefined,
+    minHeight: isSmall ? SmallCardHeight : undefined,
 }));
-export const HeadingContainer = styled(View)({
+export const HeadingContainer = styled(View)(({ theme }) => ({
     marginBottom: theme.space[350],
-});
+}));
 export const ValuesWrapper = styled(View)(({ theme }) => ({
     flexDirection: 'row',
     gap: theme.space[300],
 }));
-export const ValueContainer = styled(View)(({ isSmall }) => ({
+export const ValueContainer = styled(View)(({ isSmall, theme }) => ({
     width: isSmall ? undefined : '50%',
     gap: theme.space[100],
 }));
@@ -23,6 +23,12 @@ 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/esm/{src/components → components}/Cards/IconTextCard/IconTextCard.js

@@ -2,15 +2,11 @@ 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)
@@ -19,11 +15,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, index) => (_jsx(HeadingComponent, { style: {
+        return (_jsx(_Fragment, { children: title.map(segment => (_jsx(HeadingComponent, { style: {
                     color: resolveColor(segment.color),
                     lineHeight: titleLineHeight,
                     marginRight: isSmall ? 3 : 4,
-                }, children: segment.text }, index))) }));
+                }, children: segment.text }, segment.text))) }));
     };
     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/{src → esm}/components/Cards/IconTextCard/IconTextCard.styles.js

@@ -2,8 +2,9 @@ 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,
+import { SmallCardHeight } from '../shared';
+export const CardWithIconText = styled(Card)(({ isSmall, theme }) => ({
+    minHeight: isSmall ? SmallCardHeight : undefined,
     gap: theme.space[600],
 }));
 export const TextContainer = styled(View)(({ isSmall }) => ({

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

@@ -2,12 +2,14 @@ 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%' } }) })] }));
+    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
+                        : {
+                            uri: 'https://www.ovobyus.com/transform/eed55bf8-f059-4acb-a043-2d0a6d12537f/homepage-supporting-house-image',
+                        }, resizeMode: "contain", style: { width: '100%', height: '100%' } }) })] }));
     if (!hasBadge) {
         return CardContent;
     }

package/dist/esm/components/Cards/ProgressBarCard/ProgressBar/EPCBar.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { EPCBarMarkerLayer, EPCBarSegment, ProgressBarContainer, ProgressBarWrapper, } from '../ProgressBarCard.styles';
+import { Marker1, Marker2 } from './EPCMarkers';
+const EPC_BANDS = [
+    { letter: 'G', min: 0, max: 20, color: '#E21D38' },
+    { letter: 'F', min: 21, max: 38, color: '#E55B2B' },
+    { letter: 'E', min: 39, max: 54, color: '#EA7E24' },
+    { letter: 'D', min: 55, max: 68, color: '#F0C119' },
+    { letter: 'C', min: 69, max: 80, color: '#85BB41' },
+    { letter: 'B', min: 81, max: 91, color: '#12A652' },
+    { letter: 'A', min: 92, max: 100, color: '#007D55' },
+];
+const MIN_SCORE = EPC_BANDS[0].min;
+const MAX_SCORE = EPC_BANDS[EPC_BANDS.length - 1].max;
+const BAND_WIDTH = 100 / EPC_BANDS.length;
+const scoreToPositionPercent = (rawScore) => {
+    if (Number.isNaN(rawScore) || rawScore < MIN_SCORE || rawScore > MAX_SCORE) {
+        return null;
+    }
+    const bandIndex = EPC_BANDS.findIndex(band => rawScore >= band.min && rawScore <= band.max);
+    const band = EPC_BANDS[bandIndex];
+    let fractionWithinBand;
+    if (band.max === band.min) {
+        fractionWithinBand = 1;
+    }
+    else {
+        const denom = band.max - band.min;
+        fractionWithinBand = (rawScore - band.min) / denom;
+    }
+    return (bandIndex + fractionWithinBand) * BAND_WIDTH;
+};
+const positionMarker = (score, translate) => {
+    const position = scoreToPositionPercent(score);
+    if (position === null)
+        return null;
+    return {
+        position: 'absolute',
+        left: `${position}%`,
+        top: '50%',
+        transform: [{ translateX: -translate }, { translateY: -translate }],
+    };
+};
+export const EPCBar = ({ marker1, marker2 }) => {
+    const marker1Style = positionMarker(marker1.value, 4);
+    const marker2Style = marker2 ? positionMarker(marker2.value, 5) : null;
+    return (_jsxs(ProgressBarWrapper, { children: [_jsx(ProgressBarContainer, { children: EPC_BANDS.map(band => (_jsx(EPCBarSegment, { style: { flex: 1, backgroundColor: band.color } }, band.letter))) }), _jsxs(EPCBarMarkerLayer, { children: [marker1Style && (_jsx(View, { style: marker1Style, children: _jsx(Marker1, {}) })), marker2 && marker2Style && (_jsx(View, { style: marker2Style, children: _jsx(Marker2, {}) }))] })] }));
+};

package/dist/esm/components/Cards/ProgressBarCard/ProgressBar/EPCMarkers.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Circle, ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
+import { useTheme } from '../../../../styled.native';
+export const Marker1 = () => {
+    const theme = useTheme();
+    return (_jsx(Svg, { width: theme.space[200], height: theme.space[200], viewBox: "0 0 8 8", fill: "none", children: _jsx(Circle, { cx: "4", cy: "4", r: "4", fill: theme.color.green[80] }) }));
+};
+export const Marker2 = () => {
+    const theme = useTheme();
+    return (_jsxs(Svg, { width: theme.space[250], height: theme.space[250], viewBox: "0 0 10 10", fill: "none", children: [_jsx(G, { clipPath: "url(#clip0_23708_1077)", children: _jsx(Path, { d: "M8.92 5.78L9.9 5.97C9.96 5.65 10 5.33 10 5H8C8 5.2 7.98 5.4 7.94 5.59L8.92 5.78ZM7.22 8.33L7.78 9.16C8.32 8.8 8.79 8.33 9.16 7.78L8.33 7.22L7.5 6.66C7.28 6.99 7 7.27 6.67 7.49L7.23 8.32L7.22 8.33ZM5 9V10C5.33 10 5.66 9.97 5.97 9.9L5.78 8.92L5.59 7.94C5.4 7.98 5.21 8 5 8V9ZM4.22 8.92L4.03 9.9C4.35 9.96 4.67 10 5 10V8C4.8 8 4.6 7.98 4.41 7.94L4.22 8.92ZM1.67 7.22L0.84 7.78C1.2 8.32 1.67 8.79 2.22 9.16L2.78 8.33L3.34 7.5C3.01 7.28 2.73 7 2.51 6.67L1.68 7.23L1.67 7.22ZM1 5H0C0 5.33 0.03 5.66 0.1 5.97L1.08 5.78L2.06 5.59C2.02 5.4 2 5.21 2 5H1ZM1.08 4.22L0.1 4.03C0.04 4.35 0 4.67 0 5H2C2 4.8 2.02 4.6 2.06 4.41L1.08 4.22ZM2.78 1.67L2.22 0.84C1.68 1.2 1.21 1.67 0.84 2.22L1.67 2.78L2.5 3.34C2.72 3.01 3 2.73 3.33 2.51L2.77 1.68L2.78 1.67ZM5 1V0C4.67 0 4.34 0.03 4.03 0.1L4.22 1.08L4.41 2.06C4.6 2.02 4.79 2 5 2V1ZM5.78 1.08L5.97 0.1C5.65 0.04 5.33 0 5 0V2C5.2 2 5.4 2.02 5.59 2.06L5.78 1.08ZM8.33 2.78L9.16 2.22C8.8 1.68 8.33 1.21 7.78 0.84L7.22 1.67L6.66 2.5C6.99 2.72 7.27 3 7.49 3.33L8.32 2.77L8.33 2.78ZM9 5H10C10 4.67 9.97 4.34 9.9 4.03L8.92 4.22L7.94 4.41C7.98 4.6 8 4.79 8 5H9Z", fill: theme.color.green[80] }) }), _jsx(Defs, { children: _jsx(ClipPath, { id: "clip0_23708_1077", children: _jsx(Rect, { width: "10", height: "10", fill: "white" }) }) })] }));
+};

package/dist/esm/components/Cards/ProgressBarCard/ProgressBar/ValueBar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { useTheme } from '../../../../styled.native';
+import { ProgressBarContainer, ProgressBarWrapper, ValueBarRemainder, } from '../ProgressBarCard.styles';
+const clampToNonNegative = (n) => Math.max(0, n);
+export const ValueBar = ({ value1, value2 }) => {
+    const theme = useTheme();
+    const hasSecond = !!value2;
+    const value1Flex = clampToNonNegative(value1 ?? 0);
+    const value2Flex = hasSecond ? clampToNonNegative(value2) : 0;
+    if (hasSecond && value1Flex + value2Flex > 0) {
+        return (_jsx(ProgressBarWrapper, { children: _jsxs(ProgressBarContainer, { children: [_jsx(View, { style: {
+                            flex: value1Flex,
+                            backgroundColor: theme.color.brand.brand,
+                        } }), _jsx(View, { style: {
+                            flex: value2Flex,
+                            backgroundColor: theme.color.surface.onSurface,
+                        } })] }) }));
+    }
+    return (_jsx(ProgressBarWrapper, { children: _jsxs(ProgressBarContainer, { children: [_jsx(View, { style: {
+                        flex: value1Flex,
+                        backgroundColor: theme.color.brand.brand,
+                    } }), _jsx(ValueBarRemainder, { style: { flex: 100 - value1Flex } })] }) }));
+};

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { Heading2, Heading4, P, Strong } from '../..';
+import { useTheme } from '../../../styled.native';
+import { resolveColor } from '../shared';
+import { EPCBar } from './ProgressBar/EPCBar';
+import { Marker1, Marker2 } from './ProgressBar/EPCMarkers';
+import { ValueBar } from './ProgressBar/ValueBar';
+import { CardWithProgressBar, HeadingContainer, StyledP, ValueBlockWrapper, ValuesContainer, ValueTextContainer, ValueWrapper, } from './ProgressBarCard.styles';
+const ValueText1 = ({ text }) => {
+    if (!text)
+        return null;
+    if (typeof text === 'string') {
+        return _jsx(Heading2, { children: text });
+    }
+    return (_jsx(_Fragment, { children: text.map((segment, index) => (_jsx(Heading2, { style: { color: resolveColor(segment.color) }, children: segment.text }, `${index}-${segment.text}`))) }));
+};
+const ValueText2 = ({ text2, hasEPCBar }) => {
+    if (!text2)
+        return null;
+    const { text, color } = typeof text2 === 'string'
+        ? { text: text2, color: 'default' }
+        : { text: text2.text, color: text2.color };
+    const resolvedColor = resolveColor(color);
+    return (_jsx(ValueTextContainer, { children: _jsxs(Heading4, { style: { color: resolvedColor }, children: ["(", text, hasEPCBar && ' points', ")"] }) }));
+};
+const ValueBlockComponent = ({ value, value2, size, hasEPCBar, markerType, }) => {
+    const showMarker = value.subtext && hasEPCBar;
+    const isSmall = size === 'small';
+    const theme = useTheme();
+    return (_jsxs(ValueWrapper, { isSmall: isSmall, hasValue2: !!value2, children: [_jsxs(ValuesContainer, { children: [_jsx(ValueText1, { text: value.text }), _jsx(ValueText2, { text2: value.text2, hasEPCBar: hasEPCBar })] }), _jsxs(View, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: theme.space[150],
+                }, children: [showMarker && markerType === 'marker1' && _jsx(Marker1, {}), showMarker && markerType === 'marker2' && _jsx(Marker2, {}), value.subtext && _jsx(P, { children: value.subtext })] })] }));
+};
+const ValueBlock = React.memo(ValueBlockComponent);
+export const ProgressBarCard = ({ heading, subheading, progressBar, value, value2, size, }) => {
+    const isSmall = size === 'small';
+    const isEpc = progressBar.variant === 'epc';
+    const isValueBar = progressBar.variant === 'value';
+    return (_jsxs(CardWithProgressBar, { isSmall: isSmall, children: [_jsxs(HeadingContainer, { children: [_jsx(StyledP, { children: _jsx(Strong, { children: heading }) }), _jsx(P, { size: "sm", children: subheading })] }), _jsxs(View, { children: [isEpc && (_jsx(EPCBar, { marker1: { value: progressBar.data }, marker2: progressBar.data2 ? { value: progressBar.data2 } : undefined })), isValueBar && (_jsx(ValueBar, { value1: progressBar.data, value2: progressBar.data2 })), _jsxs(ValueBlockWrapper, { children: [_jsx(ValueBlock, { value: value, value2: value2, hasEPCBar: isEpc, markerType: "marker1", size: size }), value2 && !isSmall && (_jsx(ValueBlock, { value: value2, hasEPCBar: isEpc, markerType: "marker2" }))] })] })] }));
+};

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

@@ -0,0 +1,58 @@
+import { View } from 'react-native';
+import { Card } from '../..';
+import styled from '../../../styled.native';
+import { P } from '../../P';
+import { SmallCardHeight } from '../shared';
+export const CardWithProgressBar = styled(Card)(({ isSmall }) => ({
+    minHeight: isSmall ? SmallCardHeight : undefined,
+    justifyContent: 'space-between',
+}));
+export const HeadingContainer = styled(View)(({ theme }) => ({
+    marginBottom: theme.space[350],
+}));
+export const ValueBlockWrapper = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+}));
+export const ValueWrapper = styled(View)(({ isSmall, hasValue2, theme }) => ({
+    width: isSmall || !hasValue2 ? undefined : '50%',
+    gap: theme.space[100],
+}));
+export const ValuesContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: theme.space[100],
+}));
+export const ValueTextContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: theme.space[25],
+}));
+export const StyledP = styled(P)(({ theme }) => ({
+    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
+}));
+// EPC/Value Bar styles
+export const ProgressBarWrapper = styled(View)(({ theme }) => ({
+    width: '100%',
+    height: theme.space[800],
+    justifyContent: 'center',
+}));
+export const ProgressBarContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    height: theme.space[100],
+    borderRadius: theme.border.radius.sm,
+    overflow: 'hidden',
+}));
+export const EPCBarMarkerLayer = styled(View)({
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+});
+export const EPCBarSegment = styled(View)({
+    flex: 1,
+});
+export const ValueBarRemainder = styled(View)(({ theme }) => ({
+    backgroundColor: theme.color.surface.dim,
+}));

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { useTheme } from '../../styled.native';
+export const SmallCardHeight = 172;
+export const resolveColor = (colorKey = 'default') => {
+    const theme = useTheme();
+    if (colorKey === 'default' || !colorKey) {
+        return theme.color.brand.brand;
+    }
+    if (colorKey === 'onSurface') {
+        return theme.color.surface.onSurface;
+    }
+    return colorKey;
+};

package/dist/providers/icons-types.js

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

package/dist/providers/pictograms-types.js

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

package/dist/{src/styled.native.d.ts → styled.native.d.ts}

@@ -511,7 +511,9 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1083,7 +1085,9 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1655,7 +1659,9 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2227,7 +2233,9 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2799,7 +2807,9 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3371,7 +3381,9 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.4.2",
+  "version": "5.4.3-canary-faec600-428",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.14.0",
+    "@ovotech/element-core": "4.2.0-canary-faec600-428",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
     "react-native-error-boundary": "^3.0.0",
     "react-native-reanimated-carousel": "^3.5.1",
-    "react-native-svg": "^15.12.1",
-    "@ovotech/element-core": "4.2.0"
+    "react-native-svg": "^15.12.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -72,7 +72,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsc --project tsconfig.build.json && tsc --project tsconfig.build.json --module ES6 --outDir dist/esm --declaration false",
+    "build": "rm -rf dist &&tsc --project tsconfig.build.json && tsc --project tsconfig.build.json --module ES6 --outDir dist/esm --declaration false --rootDir src",
     "quickbuild": "tsc --project tsconfig.build.json --module ES6 --outDir dist/esm --declaration false",
     "test": "jest --maxWorkers 4",
     "typecheck": "tsc --noEmit",

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/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 })) })] }) }));
-};