@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

package/dist/components/Accordion/styles.js

@@ -35,26 +35,32 @@ var element_core_1 = require("@ovotech/element-core");
 var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
 var styled_native_1 = __importStar(require("../../styled.native"));
 exports.StyledAccordion = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last, isExpanded = _a.isExpanded;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
+    var theme = _a.theme, first = _a.first, last = _a.last, isExpanded = _a.isExpanded, $variant = _a.$variant;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), (0, element_core_1.numToPx)(theme.border.width[$variant === 'default' ? 'sm' : 'md']), $variant === 'brand'
+        ? theme.color.brand.brand
+        : theme.color.surface.borderDim, $variant === 'brand'
+        ? theme.color.brand.bright
+        : isExpanded
+            ? theme.color.brand.onBrand
+            : 'transparent', theme.transition.duration.fast, first
         ? {
-            borderTopLeftRadius: core.radius.small,
-            borderTopRightRadius: core.radius.small,
+            borderTopLeftRadius: theme.border.radius.md,
+            borderTopRightRadius: theme.border.radius.md,
         }
         : null, last
         ? {
-            borderBottomLeftRadius: core.radius.small,
-            borderBottomRightRadius: core.radius.small,
-            borderBottomWidth: core.borderWidth.small,
+            borderBottomLeftRadius: theme.border.radius.md,
+            borderBottomRightRadius: theme.border.radius.md,
+            borderBottomWidth: (0, element_core_1.numToPx)(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
         }
         : null);
 });
 exports.StyledAccordionHeader = styled_native_1.default.TouchableOpacity(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), (0, element_core_1.numToPx)(core.space[5]), (0, element_core_1.numToPx)(core.space[3]));
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), (0, element_core_1.numToPx)(theme.space[500]), (0, element_core_1.numToPx)(theme.space[300]));
 });
 exports.StyledContainer = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[12]), (0, element_core_1.numToPx)(core.space[6]), (0, element_core_1.numToPx)(core.space[3]));
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[1200]), (0, element_core_1.numToPx)(theme.space[600]), (0, element_core_1.numToPx)(theme.space[300]));
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Accordion/types.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from 'react';
 export type AccordionProps = PropsWithChildren<{
-    title: ReactNode;
+    title: string;
     expanded?: boolean;
     children?: ReactNode;
     onToggle?: CallableFunction;
@@ -11,6 +11,7 @@ export type AccordionProps = PropsWithChildren<{
     first?: boolean;
     last?: boolean;
     testId?: string;
+    variant?: 'default' | 'brand';
 }>;
 export type AccordionGroupProps = {
     /**

package/dist/components/ActionCard/ActionCard.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ImageSourcePropType } from 'react-native';
 import { IconName } from '../../providers';
-import { CTAVariantName } from '../CTAButton/CTAButton';
+import { ButtonVariantName } from '../Button';
 export type ActionCardProps = {
     title: string;
     body?: string | ReactElement;
@@ -9,7 +9,7 @@ export type ActionCardProps = {
     onPressActionButton?: () => void;
     onPressIndicator?: () => void;
     onMount?: () => void;
-    ctaVariant?: CTAVariantName;
+    ctaVariant?: ButtonVariantName;
     image?: ImageSourcePropType;
     buttonTitle?: string;
     actionIconName?: IconName;

package/dist/components/ActionCard/ActionCard.js

@@ -48,28 +48,28 @@ var styled_native_1 = __importStar(require("../../styled.native"));
 var P_1 = require("../P");
 var IndicatorIconShape_1 = require("./IndicatorIconShape");
 var StyledPressableCard = styled_native_1.default.Pressable(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
-    var paddingVal = inline ? core.space[4] : core.space[6];
-    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
-    return "\n      border-radius: ".concat(inline ? (0, element_core_1.numToPx)(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat((0, element_core_1.numToPx)(paddingVal), ";\n      padding-bottom: ").concat((0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+    var theme = _a.theme, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? theme.space[400] : theme.space[600];
+    var reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
+    return "\n      border-radius: ".concat(inline ? (0, element_core_1.numToPx)(theme.space[600]) : 0, ";\n      background-color: ").concat(inverted ? theme.color.surface.dim : theme.color.surface.bright, ";\n      padding: ").concat((0, element_core_1.numToPx)(paddingVal), ";\n      padding-bottom: ").concat((0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
 });
 var StyledCard = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
-    var paddingVal = inline ? core.space[4] : core.space[6];
-    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
-    return "\n      border-radius: ".concat(inline ? (0, element_core_1.numToPx)(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat((0, element_core_1.numToPx)(paddingVal), ";\n      padding-bottom: ").concat((0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+    var theme = _a.theme, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? theme.space[400] : theme.space[600];
+    var reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
+    return "\n      border-radius: ".concat(inline ? (0, element_core_1.numToPx)(theme.space[600]) : 0, ";\n      background-color: ").concat(inverted ? theme.color.surface.onSurface : theme.color.surface.bright, ";\n      padding: ").concat((0, element_core_1.numToPx)(paddingVal), ";\n      padding-bottom: ").concat((0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
 });
 var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
-    var semantic = _a.theme.semantic, inverted = _a.inverted;
-    return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
+    var theme = _a.theme, inverted = _a.inverted;
+    return "\n    color: ".concat(inverted ? theme.color.surface.bright : theme.color.surface.onSurface, ";\n");
 });
 var CloseIconWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return "\n    padding: ".concat((0, element_core_1.numToPx)(core.space[2]), ";\n    background-color: ").concat(semantic.surface.elevated, ";\n    border-radius: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n");
+    var theme = _a.theme;
+    return "\n    padding: ".concat((0, element_core_1.numToPx)(theme.space[200]), ";\n    background-color: ").concat(theme.color.surface.bright, ";\n    border-radius: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n");
 });
 var ActionCard = function (_a) {
     var _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.actionIconName, actionIconName = _c === void 0 ? 'chevron-right-small' : _c, body = _a.body, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, _d = _a.inline, inline = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onMount = _a.onMount, onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, testID = _a.testID, title = _a.title;
-    var _f = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _f.core, semantic = _f.semantic;
+    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
     var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
         (onPressIndicator && !onPressActionButton && !onPressCloseButton);
     var cardAction = hasSingleAction
@@ -84,16 +84,16 @@ var ActionCard = function (_a) {
         }
     }, []);
     var Heading = inline ? __1.Heading3 : __1.Heading2;
-    var cardPadding = core.space[inline ? 4 : 6];
+    var cardPadding = theme.space[inline ? 400 : 600];
     var negativeMarginAdjustment = -cardPadding;
     return ((0, jsx_runtime_1.jsxs)(RootContainer, __assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), accessibilityRole: cardAction ? 'button' : 'none', children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
                                         color: inverted
-                                            ? semantic.inverted.message.link
-                                            : semantic.message.branded,
+                                            ? theme.color.surface.bright
+                                            : theme.color.brand.brand,
                                         paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                     }, testID: "".concat(testID, "-heading"), children: title }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                                                 paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                            }, children: (0, jsx_runtime_1.jsx)(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(__1.Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 4, children: (0, jsx_runtime_1.jsx)(__1.CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, { style: {
+                                            }, children: (0, jsx_runtime_1.jsx)(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(__1.Action, { standalone: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 4, children: (0, jsx_runtime_1.jsx)(__1.Button, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, { style: {
                             flex: 1,
                             flexDirection: 'row',
                             height: '100%',
@@ -122,10 +122,10 @@ var ActionCard = function (_a) {
                                     position: 'absolute',
                                     right: inline ? 8 : 6,
                                     bottom: 16,
-                                }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: {
+                                }, color: theme.color.surface.bright, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: {
                     position: 'absolute',
-                    right: core.space[2],
-                    top: core.space[2],
-                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: (0, jsx_runtime_1.jsx)(CloseIconWrapper, { inverted: inverted, children: (0, jsx_runtime_1.jsx)(__1.Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] })));
+                    right: theme.space[200],
+                    top: theme.space[200],
+                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: (0, jsx_runtime_1.jsx)(CloseIconWrapper, { inverted: inverted, children: (0, jsx_runtime_1.jsx)(__1.Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] })));
 };
 exports.ActionCard = ActionCard;

package/dist/components/ActionCard/CloseIconShape.js

@@ -31,8 +31,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_svg_1 = __importStar(require("react-native-svg"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var StyledPath = (0, styled_native_1.default)(react_native_svg_1.Path)(function (_a) {
-    var semantic = _a.theme.semantic, color = _a.color;
-    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+    var theme = _a.theme, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : theme.color.brand.brand, "\n");
 });
 var CloseIconShape = function (_a) {
     var color = _a.color;

package/dist/components/ActionCard/IndicatorIconShape.js

@@ -31,8 +31,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_svg_1 = __importStar(require("react-native-svg"));
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var StyledPath = (0, styled_native_1.default)(react_native_svg_1.Path)(function (_a) {
-    var semantic = _a.theme.semantic, color = _a.color;
-    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+    var theme = _a.theme, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : theme.color.brand.brand, "\n");
 });
 var IndicatorIconShape = function (_a) {
     var color = _a.color;

package/dist/components/ActionList/ActionList.d.ts

@@ -1,8 +1,12 @@
 import { ComponentProps, PropsWithChildren, Ref } from 'react';
 import { AccessibilityRole, View, ViewProps } from 'react-native';
 import { IconName } from '../../providers';
+import { SemanticVariants } from '../Badge';
 import { StyledActionList } from './styled';
-type ActionListProps = ComponentProps<typeof StyledActionList>;
+type ActionListProps = ComponentProps<typeof StyledActionList> & {
+    inverted?: boolean;
+    borderBottom?: boolean;
+};
 type ActionProps = PropsWithChildren<ViewProps & {
     accessibilityRole?: AccessibilityRole;
     accessibilityLabel?: string;
@@ -10,14 +14,16 @@ type ActionProps = PropsWithChildren<ViewProps & {
     iconLeft?: IconName;
     iconRight?: IconName;
     inverted?: boolean;
-    inline?: boolean;
     onPress?: () => void;
     fullWidth?: boolean;
     ref?: Ref<View>;
     testID?: string;
     inList?: boolean;
     standalone?: boolean;
+    badgeText?: string;
+    badgeVariant?: SemanticVariants;
+    hint?: string;
 }>;
-declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionList: ({ children, inverted, borderBottom, ...rest }: ActionListProps) => import("react/jsx-runtime").JSX.Element;
 declare const Action: import("react").ForwardRefExoticComponent<Omit<ActionProps, "ref"> & import("react").RefAttributes<View>>;
 export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -28,9 +28,10 @@ var react_1 = require("react");
 var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
 var utils_1 = require("../../utils");
+var Badge_1 = require("../Badge");
 var styled_1 = require("./styled");
 var ActionList = function (_a) {
-    var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
+    var children = _a.children, inverted = _a.inverted, borderBottom = _a.borderBottom, rest = __rest(_a, ["children", "inverted", "borderBottom"]);
     var validChildren = (0, utils_1.getValidChildren)(children);
     var childCount = react_1.Children.count(validChildren);
     return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionList, __assign({}, rest, { children: react_1.Children.map(validChildren, function (child, index) {
@@ -38,7 +39,7 @@ var ActionList = function (_a) {
             return (0, react_1.cloneElement)(child, {
                 fullWidth: true,
                 index: index,
-                hasBorder: childCount > 1 && index !== childCount - 1,
+                hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
                 inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
                 inList: true,
                 iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
@@ -47,12 +48,12 @@ var ActionList = function (_a) {
 };
 exports.ActionList = ActionList;
 var ActionWrapper = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _e = _a.standalone, standalone = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
 });
 var Action = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _e = _a.standalone, standalone = _e === void 0 ? false : _e, _f = _a.badgeVariant, badgeVariant = _f === void 0 ? 'info' : _f, badgeText = _a.badgeText, hint = _a.hint, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint"]);
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ 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 ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof children === 'string' ? ((0, jsx_runtime_1.jsxs)(styled_1.StyledTextWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { variant: badgeVariant, children: badgeText })) : null] })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), hint ? ((0, jsx_runtime_1.jsx)(styled_1.StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 });
 exports.Action = Action;