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

package/dist/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/components/Cards/ProgressBarCard/index.d.ts

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

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

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

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

@@ -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/src/components → 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/components/Cards/shared.d.ts

@@ -0,0 +1,3 @@
+import { ColorKey } from './types';
+export declare const SmallCardHeight = 172;
+export declare const resolveColor: (colorKey?: ColorKey) => string;

package/dist/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/components/Cards/types.d.ts

@@ -0,0 +1,5 @@
+export type TitleSegment = {
+    color?: 'default' | 'onSurface' | string;
+    text: string;
+};
+export type ColorKey = TitleSegment['color'] | undefined;

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

@@ -510,7 +510,9 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1083,7 +1085,9 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1658,7 +1662,9 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2231,7 +2237,9 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2804,7 +2812,9 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3377,7 +3387,9 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3950,7 +3962,9 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -4525,7 +4539,9 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -5098,7 +5114,9 @@ export declare const TableBody: import("styled-components").StyledComponent<type
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -5671,7 +5689,9 @@ export declare const TableCell: import("styled-components").StyledComponent<type
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -6246,7 +6266,9 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -6821,7 +6843,9 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -7396,7 +7420,9 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

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

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

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

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

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

@@ -514,7 +514,9 @@ declare const ErrorText: (props: Omit<{
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;

package/dist/{src/components → components}/Grid/Col.d.ts

@@ -514,7 +514,9 @@ declare const Col: (props: Omit<{
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;

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

@@ -514,7 +514,9 @@ declare const HintText: (props: Omit<{
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;

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

@@ -514,7 +514,9 @@ declare const LabelText: (props: Omit<{
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;

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

@@ -509,7 +509,9 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

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

@@ -511,7 +511,9 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1086,7 +1088,9 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1659,7 +1663,9 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2232,7 +2238,9 @@ export declare const LiContent: import("styled-components").StyledComponent<type
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

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

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

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

@@ -511,7 +511,9 @@ export declare const ShadowContainer: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1084,7 +1086,9 @@ export declare const NavContainer: import("styled-components").StyledComponent<i
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1661,7 +1665,9 @@ export declare const HeaderContainer: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2237,7 +2243,9 @@ export declare const SkeletonNavHeading: import("styled-components").StyledCompo
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2812,7 +2820,9 @@ export declare const SkeletonNavButton: import("styled-components").StyledCompon
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3385,7 +3395,9 @@ export declare const SideContainer: import("styled-components").StyledComponent<
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -3961,7 +3973,9 @@ export declare const TitleContainer: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -4537,7 +4551,9 @@ export declare const StepCounterBar: import("styled-components").StyledComponent
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -5115,7 +5131,9 @@ export declare const SkeletonStepCounterBar: import("styled-components").StyledC
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -5688,7 +5706,9 @@ export declare const StepCounterContainer: import("styled-components").StyledCom
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -6261,7 +6281,9 @@ export declare const NavBackButton: import("styled-components").StyledComponent<
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

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

@@ -522,7 +522,9 @@ export declare const NotificationContentBox: import("styled-components").StyledC
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1095,7 +1097,9 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

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

@@ -509,7 +509,9 @@ export declare const StyledPressable: import("styled-components").StyledComponen
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;

package/dist/{src/components → components}/SelectField/Select.d.ts

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

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

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

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

@@ -514,7 +514,9 @@ declare const SubLabelText: (props: Omit<{
             "25": number;
             "50": number;
             "100": number;
+            "150": number;
             "200": number;
+            "250": number;
             "300": number;
             "350": number;
             "400": number;

package/dist/{src/components → components}/Tabs/Tab.d.ts

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

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

@@ -511,7 +511,9 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1088,7 +1090,9 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -1663,7 +1667,9 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
         "25": number;
         "50": number;
         "100": number;
+        "150": number;
         "200": number;
+        "250": number;
         "300": number;
         "350": number;
         "400": number;
@@ -2238,7 +2244,9 @@ export declare const StyledToggleDot: 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/components/Cards/AccountCard/AccountCard.js

@@ -0,0 +1,17 @@
+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';
+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
+                        : {
+                            uri: 'https://www.ovobyus.com/transform/4724f63c-77b0-433f-ab0c-11cdb842aab6/OVO_Detached_Day',
+                        }, 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 → esm}/components/Cards/BalanceCard/BalanceCard.js

@@ -4,17 +4,15 @@ 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: {
+    return (_jsxs(View, { children: [_jsx(ImageContainer, { children: _jsx(Image, { source: popOutImage, accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Balance Card Image', style: {
                         height: 100,
-                        aspectRatio: (Image.resolveAssetSource(popOutImage || BalanceImage)?.width ??
+                        aspectRatio: ((popOutImage && Image.resolveAssetSource(popOutImage)?.width) ??
                             1) /
-                            (Image.resolveAssetSource(popOutImage || BalanceImage)?.height ??
+                            ((popOutImage && Image.resolveAssetSource(popOutImage)?.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
                     ? {

package/dist/esm/{src/components → 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, ValueContainer, ValuesWrapper, } from './IconDataCard.styles';
+import { CardWithIconData, HeadingContainer, IconContainer, Metric, MetricsContainer, StyledP, SubMetric, SubMetricsContainer, 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(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(SubMetricsContainer, { children: _jsx(SubMetric, { children: data.subMetric }) }))] }), data.subtext && _jsx(P, { children: data.subtext })] }));
 };
 export const IconDataCard = ({ heading, timeframe, value, value2, size, }) => {
     const isSmall = size === 'small';