@ovotech/element-native 5.4.2 → 5.4.3-canary-8992fd2-429

package/dist/styled.native.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.css = exports.ThemeProvider = exports.ThemeContext = void 0;
+const styledComponents = __importStar(require("styled-components/native"));
+const { default: styled, css, ThemeProvider, ThemeContext, useTheme, } = styledComponents;
+exports.css = css;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeContext = ThemeContext;
+exports.useTheme = useTheme;
+exports.default = styled;

package/dist/theme/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("@ovotech/element-core"), exports);

package/dist/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./utils"), exports);

package/dist/utils/utils.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.callAll = callAll;
+exports.filterChildrenByType = filterChildrenByType;
+exports.getErrorMessage = getErrorMessage;
+exports.getText = getText;
+exports.getValidChildren = getValidChildren;
+exports.mergeRefs = mergeRefs;
+exports.responsiveStyle = responsiveStyle;
+exports.styledComponentWithBreakpoints = styledComponentWithBreakpoints;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+function mergeRefs(...refs) {
+    return value => {
+        refs.forEach(ref => {
+            assignRef(ref, value);
+        });
+    };
+}
+function assignRef(ref, element) {
+    if (typeof ref === 'function') {
+        ref(element);
+    }
+    else if (ref) {
+        ref.current = element;
+    }
+}
+function getText(children) {
+    if (!Boolean(children) && typeof children !== 'number') {
+        return '';
+    }
+    if (typeof children === 'object' &&
+        children.props) {
+        return react_1.Children.map(children.props.children, child => getText(child)).join('');
+    }
+    return String(children);
+}
+function styledComponentWithBreakpoints(Component) {
+    return (props) => {
+        const breakpoints = (0, hooks_1.useBreakpoint)();
+        // @ts-ignore.
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props, breakpoints, { ref: props.ref }));
+    };
+}
+function responsiveStyle(property, value, breakpoints, formatter) {
+    let values;
+    if (Array.isArray(value)) {
+        values = value;
+    }
+    else {
+        values = [value];
+    }
+    const ascMediaQueries = [
+        breakpoints.xsmallAndUp,
+        breakpoints.smallAndUp,
+        breakpoints.mediumAndUp,
+        breakpoints.largeAndUp,
+    ];
+    const [base, ...rest] = values;
+    return rest.reduce((acc, val, i) => ascMediaQueries[i]
+        ? `${property}: ${formatter ? formatter(val) : val};`
+        : acc, `${property}: ${formatter ? formatter(base) : base};`);
+}
+function getErrorMessage(id, errors) {
+    return (errors.find(({ id: errorId }) => id === errorId) || { message: null })
+        .message;
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+function callAll(...fns) {
+    return (...args) => fns.forEach(fn => fn && fn(...args));
+}
+function filterChildrenByType(children, type) {
+    return react_1.Children.toArray(children).filter(child => (child === null || child === void 0 ? void 0 : child.type) === type);
+}
+function getValidChildren(children) {
+    return react_1.Children.toArray(children).filter(Boolean);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.4.2",
+  "version": "5.4.3-canary-8992fd2-429",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,13 +13,8 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@backpackapp-io/react-native-toast": "^0.14.0",
     "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"
+    "lodash.groupby": "^4.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -61,6 +56,9 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
+    "react-native-error-boundary": "^3.0.0",
+    "react-native-reanimated-carousel": "^3.5.1",
+    "@backpackapp-io/react-native-toast": "^0.14.0",
     "@react-native-masked-view/masked-view": "^0.3.2",
     "react": "^19.1.0",
     "react-native": "^0.74.2 | ^0.81.0",
@@ -68,11 +66,12 @@
     "react-native-reanimated": "^3.19.1",
     "react-native-safe-area-context": "^5.6.1",
     "react-native-svg": "^15.12.1",
-    "styled-components": "^5.3.11"
+    "styled-components": "^5.3.11",
+    "@ovotech/element-core": "4.2.0-canary-8992fd2-429"
   },
   "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 --module CommonJS --outDir dist && 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/Accordion/Accordion.js

@@ -1,68 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { useLayout } from '../../hooks/use-layout';
-import { useTheme } from '../../styled.native';
-import { Heading4 } from '../Heading';
-import { AccordionGroupContext } from './Group';
-import { AccordionIcon } from './Icon';
-import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
-export function withAnimated(WrappedComponent) {
-    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-    // eslint-disable-next-line react/prefer-stateless-function
-    class WithAnimated extends Component {
-        render() {
-            return _jsx(WrappedComponent, { ...this.props });
-        }
-    }
-    WithAnimated.displayName = `WithAnimated(${displayName})`;
-    // @ts-ignore
-    return Animated.createAnimatedComponent(WithAnimated);
-}
-export const Accordion = ({ expanded = false, first, last, title, children, onToggle, variant = 'default', }) => {
-    const theme = useTheme();
-    const { Header } = useContext(AccordionGroupContext);
-    const AccordionHeading = Header ?? Heading4;
-    const AnimatedHeading = useMemo(() => withAnimated(AccordionHeading), [AccordionHeading]);
-    const [layout, onLayout] = useLayout(0);
-    const [open, setOpen] = useState(expanded);
-    const initialHeadingColor = variant === 'default'
-        ? theme.color.brand.brand
-        : theme.color.surface.onSurface;
-    const handleHeightContent = useMemo(() => layout.height || 100, [layout.height]);
-    const size = useSharedValue(handleHeightContent);
-    useEffect(() => {
-        if (expanded && handleHeightContent) {
-            size.value = handleHeightContent;
-        }
-    }, [handleHeightContent, expanded, size]);
-    useEffect(() => {
-        if (handleHeightContent) {
-            size.value = handleHeightContent;
-        }
-    }, [handleHeightContent, size]);
-    const progress = useDerivedValue(() => withTiming(open ? 1 : 0));
-    const style = useAnimatedStyle(() => ({
-        height: size.value * progress.value + 1,
-    }), [progress, size]);
-    const toggleOpen = useCallback(() => {
-        onToggle?.(!open);
-        if (size.value === 0) {
-            size.value = handleHeightContent;
-        }
-        setOpen(o => !o);
-    }, [handleHeightContent, open, size]);
-    const containerAnimatedStyle = useMemo(() => [{ overflow: 'hidden' }, style], [style]);
-    const headerStyle = useAnimatedStyle(() => ({
-        color: interpolateColor(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
-    }), [progress]);
-    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
-                            headerStyle,
-                            {
-                                paddingRight: theme.space[300],
-                                marginTop: 0,
-                                marginBottom: 0,
-                                flexShrink: 1,
-                            },
-                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress, "$variant": variant })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
-};

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

@@ -1,103 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import MaskedView from '@react-native-masked-view/masked-view';
-import { useEffect } from 'react';
-import { Image, Pressable, View } from 'react-native';
-import { Action, Button, Heading2, Heading3, Icon, Margin, Stack } from '../';
-import styled, { useTheme } from '../../styled.native';
-import { P } from '../P';
-import { IndicatorIconShape } from './IndicatorIconShape';
-const StyledPressableCard = styled.Pressable(({ theme, inline, inverted, reducedBottomPadding }) => {
-    const paddingVal = inline ? theme.space[400] : theme.space[600];
-    const reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
-    return `
-      border-radius: ${inline ? numToPx(theme.space[600]) : 0};
-      background-color: ${inverted ? theme.color.surface.dim : theme.color.surface.bright};
-      padding: ${numToPx(paddingVal)};
-      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
-      overflow: hidden;
-      border-width: 0;
-      width: 100%;
-    `;
-});
-const StyledCard = styled.View(({ theme, inline, inverted, reducedBottomPadding }) => {
-    const paddingVal = inline ? theme.space[400] : theme.space[600];
-    const reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
-    return `
-      border-radius: ${inline ? numToPx(theme.space[600]) : 0};
-      background-color: ${inverted ? theme.color.surface.onSurface : theme.color.surface.bright};
-      padding: ${numToPx(paddingVal)};
-      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
-      overflow: hidden;
-      border-width: 0;
-      width: 100%;
-    `;
-});
-const StyledP = styled(P)(({ theme, inverted }) => `
-    color: ${inverted ? theme.color.surface.bright : theme.color.surface.onSurface};
-`);
-const CloseIconWrapper = styled.View(({ theme }) => `
-    padding: ${numToPx(theme.space[200])};
-    background-color: ${theme.color.surface.bright};
-    border-radius: ${numToPx(theme.space[600])};
-`);
-export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-right-small', body, buttonTitle, ctaVariant, image, inline = false, inverted = false, onMount, onPressCloseButton, onPressActionButton, onPressIndicator, testID, title, }) => {
-    const theme = useTheme();
-    const hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
-        (onPressIndicator && !onPressActionButton && !onPressCloseButton);
-    const cardAction = hasSingleAction
-        ? onPressActionButton || onPressIndicator
-        : null;
-    const RootContainer = hasSingleAction
-        ? StyledPressableCard
-        : StyledCard;
-    useEffect(() => {
-        if (onMount) {
-            onMount();
-        }
-    }, []);
-    const Heading = inline ? Heading3 : Heading2;
-    const cardPadding = theme.space[inline ? 400 : 600];
-    const negativeMarginAdjustment = -cardPadding;
-    return (_jsxs(RootContainer, { ...(cardAction ? { onPress: cardAction } : {}), inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: `${testID}-card`, accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
-                                        color: inverted
-                                            ? theme.color.surface.bright
-                                            : theme.color.brand.brand,
-                                        paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
-                                    }, testID: `${testID}-heading`, children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
-                                                paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { standalone: true, onPress: onPressActionButton, testID: `${testID}-button`, iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(Button, { onPress: onPressActionButton, testID: `${testID}-button`, variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
-                            flex: 1,
-                            flexDirection: 'row',
-                            height: '100%',
-                            marginTop: negativeMarginAdjustment,
-                            marginRight: negativeMarginAdjustment,
-                        }, maskElement: _jsx(View, { style: {
-                                width: '100%',
-                                height: 165,
-                                backgroundColor: 'olive',
-                                transform: [
-                                    { rotate: '-16deg' },
-                                    { translateX: 40 },
-                                    { translateY: 25 },
-                                ],
-                            } }), children: _jsx(Image, { resizeMode: "cover", source: image, style: {
-                                width: '100%',
-                                height: 200,
-                                position: 'absolute',
-                                top: 0,
-                                right: 0,
-                            }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? (_jsxs(Pressable, { style: {
-                            position: 'absolute',
-                            right: negativeMarginAdjustment,
-                            bottom: negativeMarginAdjustment,
-                        }, onPress: onPressIndicator, testID: `${testID}-indicator-button`, children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
-                                    position: 'absolute',
-                                    right: inline ? 8 : 6,
-                                    bottom: 16,
-                                }, color: theme.color.surface.bright, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? (_jsx(Pressable, { style: {
-                    position: 'absolute',
-                    right: theme.space[200],
-                    top: theme.space[200],
-                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] }));
-};

package/dist/esm/src/components/ActionCard/CloseIconShape.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Svg, { ClipPath, Defs, Path } from 'react-native-svg';
-import styled from '../../styled.native';
-const StyledPath = styled(Path)(({ theme, color }) => `
-  fill: ${color ?? theme.color.brand.brand}
-`);
-export const CloseIconShape = ({ color }) => (_jsxs(Svg, { width: 44, height: 44, children: [_jsx(StyledPath, { color: color, d: "M11.632 44 0 0h44v35.402L11.632 44Z" }), _jsx(Defs, { children: _jsx(ClipPath, { id: "a", children: _jsx(Path, { fill: "#fff", d: "M16 16h12v12H16z" }) }) })] }));

package/dist/esm/src/components/ActionCard/IndicatorIconShape.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Svg, { Path } from 'react-native-svg';
-import styled from '../../styled.native';
-const StyledPath = styled(Path)(({ theme, color }) => `
-  fill: ${color ?? theme.color.brand.brand}
-`);
-export const IndicatorIconShape = ({ color }) => (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));

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

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, } from 'react';
-import { TouchableOpacity, View, } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import { getValidChildren } from '../../utils';
-import { Badge } from '../Badge';
-import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
-const ActionList = ({ children, inverted, borderBottom, ...rest }) => {
-    const validChildren = getValidChildren(children);
-    const childCount = Children.count(validChildren);
-    return (_jsx(StyledActionList, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
-            fullWidth: true,
-            index,
-            hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
-            inverted: child.props.inverted ?? inverted, // prioritise child prop
-            inList: true,
-            iconRight: child.props.iconRight ?? 'chevron-right-small',
-        })) }));
-};
-const ActionWrapper = ({ children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref, ...rest }) => (_jsx(StyledActionWrapper, { ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList, ...rest, children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) }));
-const Action = ({ accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref, ...rest }) => {
-    const { smallAndUp } = useBreakpoint();
-    return (_jsxs(ActionWrapper, { ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText, ...rest, children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] }));
-};
-export { Action, ActionList };

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,17 +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';
-export const DEFAULT_BUTTON_VARIANT = 'surface';
-const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = DEFAULT_BUTTON_VARIANT, 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/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/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 })] }) }))] }));
-};