@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/Card/Card.js

@@ -1,63 +1,102 @@
-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);
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = exports.getCardFlags = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../hooks");
+const styled_native_1 = require("../../styled.native");
+const Card_styles_1 = require("./Card.styles");
+const getCardFlags = (props) => {
+    const { background, onPress, onSelect, displayStyle } = props;
+    const hasBackground = !!background;
+    const hasBgImage = hasBackground && typeof background !== 'string';
+    const selectable = Boolean(onSelect) && !onPress;
+    const pressable = Boolean(onPress) && !onSelect;
     const isDefault = displayStyle === 'default';
     const isOutline = displayStyle === 'outline';
-    return { hasBgImage, tappable, isDefault, isOutline };
+    return {
+        hasBackground,
+        hasBgImage,
+        pressable,
+        selectable,
+        isDefault,
+        isOutline,
+    };
 };
+exports.getCardFlags = getCardFlags;
 function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
-    const borderAnim = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        Animated.timing(borderAnim, {
+    const borderAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(borderAnim, {
             toValue: isSelected ? 1 : 0,
             duration,
             useNativeDriver: false,
         }).start();
-    }, [isSelected, duration]);
+    }, [isSelected, duration, borderAnim]);
     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({
+const Card = (_a) => {
+    var { children, displayStyle = 'default', background, onPress, onSelect } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress", "onSelect"]);
+    const theme = (0, styled_native_1.useTheme)();
+    const [isFocused, setFocused] = (0, react_1.useState)(false);
+    const [isSelected, setSelected] = (0, react_1.useState)(false);
+    const { largeAndUp } = (0, hooks_1.useBreakpoint)();
+    const { hasBackground, hasBgImage, pressable, selectable, isDefault, isOutline, } = (0, exports.getCardFlags)({
         background,
         onPress,
         displayStyle,
+        onSelect,
     });
     let baseBorderColor = theme.color.surface.bright;
-    if (isOutline) {
-        baseBorderColor = theme.color.surface.bright;
-    }
-    else if (isDefault) {
-        if (hasBgImage)
+    if (isDefault) {
+        if (hasBgImage) {
             baseBorderColor = 'transparent';
-        else if (typeof background === 'string')
+        }
+        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 shouldHideBorder = hasBackground && !isOutline && !pressable && !selectable;
+    const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, selectable && isSelected, theme.transition.duration.fast);
     const handlePress = () => {
+        onPress === null || onPress === void 0 ? void 0 : onPress();
+    };
+    const handleSelect = () => {
         setSelected(prev => !prev);
-        onPress?.();
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
-    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 }) => ({
+    const CardContent = ((0, jsx_runtime_1.jsxs)(Card_styles_1.AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp, onPress: onPress, onSelect: onSelect }, rest, { style: [
+            {
+                borderWidth: shouldHideBorder ? 0 : theme.border.width.md,
+                borderColor: animatedBorderColor,
+            },
+            rest === null || rest === void 0 ? void 0 : rest.style,
+        ], children: [hasBgImage && ((0, jsx_runtime_1.jsx)(Card_styles_1.BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] })));
+    const isInteractive = pressable || selectable;
+    return ((0, jsx_runtime_1.jsx)(Card_styles_1.TappableWrapper, Object.assign({ as: isInteractive ? react_native_1.Pressable : react_native_1.View, largeAndUp: largeAndUp, tappable: isInteractive, focused: isInteractive ? isFocused : false }, (isInteractive && {
+        onPress: pressable ? handlePress : handleSelect,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        accessibilityRole: 'button',
+        style: ({ pressed }) => ({
             opacity: pressed ? 0.9 : 1,
-        }), children: CardContent }));
+        }),
+    }), { children: CardContent })));
 };
+exports.Card = Card;

package/dist/components/Card/Card.styles.d.ts

@@ -43,6 +43,7 @@ export declare const AnimatedStyledCard: Animated.AnimatedComponent<(props: Omit
                 "30": string;
                 "40": string;
                 "50": string;
+                "55": string;
                 "56": string;
                 "60": string;
                 "70": string;
@@ -85,6 +86,7 @@ export declare const AnimatedStyledCard: Animated.AnimatedComponent<(props: Omit
                 onBrandVariant: string;
                 aiGradientFrom: string;
                 aiGradientTo: string;
+                accessible: string;
                 fixed: {
                     brand: string;
                     dark: string;
@@ -93,6 +95,7 @@ export declare const AnimatedStyledCard: Animated.AnimatedComponent<(props: Omit
                     bright: string;
                     onBrand: string;
                     onBrandVariant: string;
+                    accessible: string;
                 };
             };
             outline: {
@@ -622,6 +625,7 @@ export declare const BackgroundImage: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -664,6 +668,7 @@ export declare const BackgroundImage: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -672,6 +677,7 @@ export declare const BackgroundImage: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1160,7 +1166,7 @@ export declare const BackgroundImage: import("styled-components").StyledComponen
 }, {
     largeAndUp?: boolean;
 }, never>;
-export declare const TappableWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<View>>, {
+export declare const TappableWrapper: import("styled-components").StyledComponent<typeof View, {
     color: {
         neutral: {
             "20": string;
@@ -1199,6 +1205,7 @@ export declare const TappableWrapper: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1241,6 +1248,7 @@ export declare const TappableWrapper: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1249,6 +1257,7 @@ export declare const TappableWrapper: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1735,6 +1744,7 @@ export declare const TappableWrapper: import("styled-components").StyledComponen
         };
     };
 }, {
+    tappable: boolean;
     focused: boolean;
     largeAndUp: boolean;
 }, never>;

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

@@ -1,34 +1,32 @@
-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({
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TappableWrapper = exports.BackgroundImage = exports.AnimatedStyledCard = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const utils_1 = require("../../utils");
+const Card_1 = require("./Card");
+const StyledCardBase = (0, styled_native_1.default)(react_native_1.View)(({ theme, displayStyle, background, onPress, onSelect, largeAndUp, size, }) => {
+    const { hasBgImage, pressable, selectable, isDefault } = (0, Card_1.getCardFlags)({
         background,
         onPress,
+        onSelect,
         displayStyle,
     });
     const backgroundColor = hasBgImage
         ? 'transparent'
         : typeof background === 'string'
             ? background
-            : isDefault || tappable
+            : isDefault || pressable || selectable
                 ? 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,
-    };
+    return Object.assign(Object.assign({}, (size || {})), { padding: theme.space[400], position: 'relative', 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 }) => ({
+const CardBase = (0, utils_1.styledComponentWithBreakpoints)(StyledCardBase);
+exports.AnimatedStyledCard = react_native_1.Animated.createAnimatedComponent(CardBase);
+exports.BackgroundImage = (0, styled_native_1.default)(react_native_1.ImageBackground)(({ theme, largeAndUp }) => ({
     position: 'absolute',
     top: 0,
     right: 0,
@@ -37,15 +35,10 @@ export const BackgroundImage = styled(ImageBackground)(({ theme, largeAndUp }) =
     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,
+exports.TappableWrapper = (0, styled_native_1.default)(react_native_1.View)(({ theme, focused, tappable, largeAndUp }) => (Object.assign(Object.assign({}, (tappable && {
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
+    shadowOffset: { width: 0, height: theme.space[100] },
     shadowOpacity: 0.1,
-    shadowRadius: 10,
-    elevation: 6,
-}));
+    shadowRadius: theme.space[250],
+    elevation: theme.space[150],
+})), { backgroundColor: 'transparent', borderColor: focused ? theme.color.outline.outer : 'transparent', borderWidth: theme.border.width.md, borderRadius: largeAndUp ? 26 : theme.border.radius.xl, padding: theme.space[50] })));

package/dist/components/Card/index.js

@@ -1 +1,5 @@
-export { Card } from './Card';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+var Card_1 = require("./Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });

package/dist/components/Cards/AccountCard/AccountCard.d.ts

@@ -4,9 +4,9 @@ type Props = {
     isBeyond?: boolean;
     avatar?: ImageSourcePropType;
     onSwitch?: () => void;
-    title: string;
     accNumber: string | number;
-    bodyText?: string;
+    customerName: string;
+    customerAddress?: string;
 };
 export declare const AccountCard: React.FC<Props>;
 export {};

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

@@ -1,17 +1,21 @@
-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';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const __1 = require("../..");
+const styled_native_1 = require("../../../styled.native");
+const AccountCard_styles_1 = require("./AccountCard.styles");
 const Beyond = () => {
-    const theme = useContext(ThemeContext);
-    return _jsx(P, { style: { color: theme.color.brand.bold }, children: "Beyond" });
+    const theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    return (0, jsx_runtime_1.jsx)(__1.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
+const AccountCard = ({ isBeyond, avatar, onSwitch, accNumber, customerName, customerAddress, }) => {
+    const theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    return ((0, jsx_runtime_1.jsx)(__1.Card, { background: isBeyond ? theme.color.brand.dim : theme.color.brand.brand, children: (0, jsx_runtime_1.jsxs)(AccountCard_styles_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(AccountCard_styles_1.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 })) })] }) }));
+                        }, resizeMode: "cover", accessibilityIgnoresInvertColors: true, accessibilityLabel: 'Account Card Image' }), (0, jsx_runtime_1.jsxs)(AccountCard_styles_1.TextContent, { children: [(0, jsx_runtime_1.jsx)(AccountCard_styles_1.TitleContent, { children: (0, jsx_runtime_1.jsxs)(AccountCard_styles_1.Title, { children: [(0, jsx_runtime_1.jsx)(__1.Strong, { children: customerName }), " ", isBeyond && (0, jsx_runtime_1.jsx)(Beyond, {})] }) }), (0, jsx_runtime_1.jsxs)(AccountCard_styles_1.BodyContent, { children: [(0, jsx_runtime_1.jsxs)(AccountCard_styles_1.Body, { size: "sm", children: ["Account Number: ", accNumber] }), (0, jsx_runtime_1.jsx)(AccountCard_styles_1.Body, { size: "sm", isBeyond: isBeyond, children: customerAddress })] })] }), (0, jsx_runtime_1.jsx)(AccountCard_styles_1.ButtonContainer, { children: onSwitch && ((0, jsx_runtime_1.jsx)(__1.Button, { size: "small", inverted: isBeyond, iconRight: "switch", onPress: onSwitch })) })] }) }));
 };
+exports.AccountCard = AccountCard;

package/dist/components/Cards/AccountCard/AccountCard.styles.d.ts

@@ -38,6 +38,7 @@ export declare const CardContent: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -80,6 +81,7 @@ export declare const CardContent: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -88,6 +90,7 @@ export declare const CardContent: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -613,6 +616,7 @@ export declare const Avatar: import("styled-components").StyledComponent<typeof
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -655,6 +659,7 @@ export declare const Avatar: import("styled-components").StyledComponent<typeof
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -663,6 +668,7 @@ export declare const Avatar: import("styled-components").StyledComponent<typeof
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1188,6 +1194,7 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1230,6 +1237,7 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1238,6 +1246,7 @@ export declare const TextContent: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1763,6 +1772,7 @@ export declare const TitleContent: import("styled-components").StyledComponent<t
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1805,6 +1815,7 @@ export declare const TitleContent: import("styled-components").StyledComponent<t
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1813,6 +1824,7 @@ export declare const TitleContent: import("styled-components").StyledComponent<t
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2342,6 +2354,7 @@ export declare const Title: import("styled-components").StyledComponent<(props:
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2384,6 +2397,7 @@ export declare const Title: import("styled-components").StyledComponent<(props:
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2392,6 +2406,7 @@ export declare const Title: import("styled-components").StyledComponent<(props:
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2917,6 +2932,7 @@ export declare const BodyContent: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2959,6 +2975,7 @@ export declare const BodyContent: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2967,6 +2984,7 @@ export declare const BodyContent: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -3496,6 +3514,7 @@ export declare const Body: import("styled-components").StyledComponent<(props: i
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -3538,6 +3557,7 @@ export declare const Body: import("styled-components").StyledComponent<(props: i
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -3546,6 +3566,7 @@ export declare const Body: import("styled-components").StyledComponent<(props: i
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4073,6 +4094,7 @@ export declare const ButtonContainer: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4115,6 +4137,7 @@ export declare const ButtonContainer: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4123,6 +4146,7 @@ export declare const ButtonContainer: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

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

@@ -1,7 +1,13 @@
-import { ImageBackground, View } from 'react-native';
-import styled from '../../../styled.native';
-import { P } from '../../P';
-export const CardContent = styled(View)(({ theme }) => ({
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonContainer = exports.Body = exports.BodyContent = exports.Title = exports.TitleContent = exports.TextContent = exports.Avatar = exports.CardContent = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const P_1 = require("../../P");
+exports.CardContent = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     gap: theme.space[200],
@@ -9,7 +15,7 @@ export const CardContent = styled(View)(({ theme }) => ({
     flexWrap: 'nowrap',
     alignItems: 'center',
 }));
-export const Avatar = styled(ImageBackground)(({ theme }) => ({
+exports.Avatar = (0, styled_native_1.default)(react_native_1.ImageBackground)(({ theme }) => ({
     borderRadius: theme.border.radius['2xl'],
     backgroundColor: theme.color.surface.bright,
     borderWidth: theme.border.width.sm,
@@ -20,35 +26,28 @@ export const Avatar = styled(ImageBackground)(({ theme }) => ({
     flexShrink: 0,
     overflow: 'hidden',
 }));
-export const TextContent = styled(View)(({ theme }) => ({
+exports.TextContent = (0, styled_native_1.default)(react_native_1.View)({
     flex: 1,
     flexShrink: 1,
     flexGrow: 1,
-    fontColor: theme.color.surface.bright,
-}));
-export const TitleContent = styled(View)(({ theme }) => ({
+});
+exports.TitleContent = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     gap: theme.space[100],
 }));
-export const Title = styled(P)(({ theme }) => ({
+exports.Title = (0, styled_native_1.default)(P_1.P)(({ theme }) => ({
     color: theme.color.brand.onBrand,
-    fontSize: theme.font.size.md.mediaQuery.sm,
-    lineHeight: theme.font.lineHeight.md.mediaQuery.sm,
-    fontWeight: 700,
 }));
-export const BodyContent = styled(View)(({ theme }) => ({
+exports.BodyContent = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.space[200],
 }));
-export const Body = styled(P)(({ theme, isBeyond }) => ({
+exports.Body = (0, styled_native_1.default)(P_1.P)(({ theme, isBeyond }) => ({
     color: isBeyond ? theme.color.brand.bright : theme.color.surface.bright,
-    fontSize: theme.font.size.sm.mediaQuery.lg,
-    fontWeight: 450,
-    lineHeight: theme.font.lineHeight.sm.mediaQuery.lg,
 }));
-export const ButtonContainer = styled(View)({
+exports.ButtonContainer = (0, styled_native_1.default)(react_native_1.View)({
     justifyContent: 'center',
     alignSelf: 'stretch',
     width: '32px',

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

@@ -1 +1,17 @@
-export * from './AccountCard';
+"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("./AccountCard"), exports);