@ovotech/element-native 5.5.0 → 5.6.0

package/dist/components/ActionList/styled.js

@@ -33,27 +33,26 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledHintText = exports.StyledTextWrapper = exports.StyledLeftIcon = exports.StyledRightIcon = exports.StyledActionNodeWrapper = exports.StyledActionText = exports.StyledActionInner = exports.StyledActionWrapper = exports.StyledActionList = void 0;
+exports.InfoRowWrapper = exports.GraphicContainer = exports.StyledHintText = exports.StyledTextWrapper = exports.StyledLeftIcon = exports.StyledRightIcon = exports.StyledActionNodeWrapper = exports.StyledActionText = exports.StyledActionInner = exports.StyledActionWrapper = exports.StyledActionList = void 0;
 const element_core_1 = require("@ovotech/element-core");
 const styled_native_1 = __importStar(require("../../styled.native"));
 const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
 const HintText_1 = require("../HintText");
 const Icon_1 = require("../Icon");
-const StyledList = styled_native_1.default.View(({ theme, smallAndUp }) => (0, styled_native_1.css) `
+const StyledList = (0, styled_native_1.default)(Card_1.Card)(({ theme, smallAndUp, inverted }) => (0, styled_native_1.css) `
     flex-direction: column;
+    padding-top: ${(0, element_core_1.numToPx)(theme.space[0])};
+    padding-bottom: ${(0, element_core_1.numToPx)(theme.space[0])};
     margin-top: ${(0, element_core_1.numToPx)(smallAndUp ? theme.space[300] : theme.space[200])};
     margin-bottom: ${(0, element_core_1.numToPx)(smallAndUp ? theme.space[300] : theme.space[200])};
+    background-color: ${inverted && theme.color.neutral.black};
   `);
 exports.StyledActionList = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
-exports.StyledActionWrapper = styled_native_1.default.View(({ theme, hasBorder, inverted, inList, hint, badgeText }) => (0, styled_native_1.css) `
+exports.StyledActionWrapper = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
     width: 100%;
     align-self: flex-start;
-    border-bottom-width: ${hasBorder ? (0, element_core_1.numToPx)(theme.border.width.sm) : 0};
-    border-bottom-style: solid;
-    border-bottom-color: ${inverted
-    ? theme.color.surface.dim
-    : theme.color.brand.fixed.onBrand};
-    padding: ${inList && (hint || badgeText) ? (0, element_core_1.numToPx)(theme.space[200]) : 0} 0;
+    padding: ${(0, element_core_1.numToPx)(theme.space[400])} 0 ${(0, element_core_1.numToPx)(theme.space[400])} 0;
   `);
 exports.StyledActionInner = styled_native_1.default.View(({ fullWidth, standalone }) => (0, styled_native_1.css) `
     flex-direction: row;
@@ -108,3 +107,19 @@ exports.StyledHintText = (0, styled_native_1.default)(HintText_1.HintText)(({ th
         : theme.color.surface.onSurfaceVariant};
   `;
 });
+// Action List Heading
+exports.GraphicContainer = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
+    width: ${(0, element_core_1.numToPx)(theme.unit[1100])};
+    height: ${(0, element_core_1.numToPx)(theme.unit[1100])};
+    background-color: ${theme.color.surface.bright};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius['2xl'])};
+    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
+  `);
+exports.InfoRowWrapper = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
+    flex-direction: row;
+    align-items: center;
+    gap: ${(0, element_core_1.numToPx)(theme.space[300])};
+  `);

package/dist/components/Badge/Badge.d.ts

@@ -53,6 +53,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -95,6 +96,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -103,6 +105,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/Button/Button.js

@@ -21,7 +21,7 @@ const Button = (_a) => {
     const { smallAndUp } = (0, hooks_1.useBreakpoint)();
     const isIconOnly = !children;
     const iconSizes = {
-        small: 14,
+        small: 16,
         default: 16,
         large: 20,
     };

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

@@ -39,6 +39,7 @@ export declare const StyledButtonWrapper: import("styled-components").StyledComp
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -81,6 +82,7 @@ export declare const StyledButtonWrapper: import("styled-components").StyledComp
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -89,6 +91,7 @@ export declare const StyledButtonWrapper: import("styled-components").StyledComp
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -614,6 +617,7 @@ export declare const StyledInner: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -656,6 +660,7 @@ export declare const StyledInner: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -664,6 +669,7 @@ export declare const StyledInner: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1197,6 +1203,7 @@ export declare const StyledButtonIcon: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1239,6 +1246,7 @@ export declare const StyledButtonIcon: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1247,6 +1255,7 @@ export declare const StyledButtonIcon: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1779,6 +1788,7 @@ export declare const StyledButtonText: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1821,6 +1831,7 @@ export declare const StyledButtonText: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1829,6 +1840,7 @@ export declare const StyledButtonText: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

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

@@ -8,13 +8,16 @@ export type CardProps = ViewProps & {
         height?: number | string;
     };
     onPress?: () => void;
+    onSelect?: () => void;
     children?: ReactNode;
 };
 export type CardFlags = {
-    hasBgImage: boolean;
-    tappable: boolean;
+    hasBackground: boolean;
+    hasBgImage?: boolean;
+    pressable: boolean;
+    selectable: boolean;
     isDefault: boolean;
     isOutline: boolean;
 };
-export declare const getCardFlags: (props: Pick<CardProps, "background" | "onPress" | "displayStyle">) => CardFlags;
-export declare const Card: ({ children, displayStyle, background, onPress, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getCardFlags: (props: Pick<CardProps, "background" | "onPress" | "onSelect" | "displayStyle">) => CardFlags;
+export declare const Card: ({ children, displayStyle, background, onPress, onSelect, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.js

@@ -19,12 +19,21 @@ 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, displayStyle } = props;
-    const hasBgImage = !!background && typeof background !== 'string';
-    const tappable = Boolean(onPress);
+    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) {
@@ -35,46 +44,59 @@ function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
             duration,
             useNativeDriver: false,
         }).start();
-    }, [isSelected, duration]);
+    }, [isSelected, duration, borderAnim]);
     return borderAnim.interpolate({
         inputRange: [0, 1],
         outputRange: [baseColor, selectedColor],
     });
 }
 const Card = (_a) => {
-    var { children, displayStyle = 'default', background, onPress } = _a, rest = __rest(_a, ["children", "displayStyle", "background", "onPress"]);
+    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 { hasBgImage, tappable, isDefault, isOutline } = (0, exports.getCardFlags)({
+    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 = () => {
-        setSelected(prev => !prev);
         onPress === null || onPress === void 0 ? void 0 : onPress();
     };
-    const CardContent = ((0, jsx_runtime_1.jsxs)(Card_styles_1.AnimatedStyledCard, Object.assign({ displayStyle: displayStyle, background: background, largeAndUp: largeAndUp }, rest, { style: [rest === null || rest === void 0 ? void 0 : rest.style, { borderColor: animatedBorderColor }], children: [hasBgImage && ((0, jsx_runtime_1.jsx)(Card_styles_1.BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] })));
-    if (!tappable)
-        return CardContent;
-    return ((0, jsx_runtime_1.jsx)(Card_styles_1.TappableWrapper, { onPress: handlePress, onFocus: () => setFocused(true), onBlur: () => setFocused(false), accessibilityRole: "button", focused: isFocused, largeAndUp: largeAndUp, style: ({ pressed }) => ({
+    const handleSelect = () => {
+        setSelected(prev => !prev);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    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

@@ -8,20 +8,21 @@ 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, largeAndUp, size, }) => {
-    const { hasBgImage, tappable, isDefault } = (0, Card_1.getCardFlags)({
+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 Object.assign(Object.assign({}, (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 = (0, utils_1.styledComponentWithBreakpoints)(StyledCardBase);
 exports.AnimatedStyledCard = react_native_1.Animated.createAnimatedComponent(CardBase);
@@ -34,15 +35,10 @@ exports.BackgroundImage = (0, styled_native_1.default)(react_native_1.ImageBackg
     borderRadius: theme.border.radius[largeAndUp ? '2xl' : 'lg'],
     overflow: 'hidden',
 }));
-exports.TappableWrapper = (0, styled_native_1.default)(react_native_1.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: theme.space[50],
+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: theme.space[100] },
     shadowOpacity: 0.1,
     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/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: {