@ovotech/element-native 4.4.9 → 4.5.0

package/dist/components/index.js

@@ -1,83 +1,67 @@
-"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("./Accordion"), exports);
-__exportStar(require("./ActionCard"), exports);
-__exportStar(require("./ActionList"), exports);
-__exportStar(require("./Badge"), exports);
-__exportStar(require("./Card"), exports);
-__exportStar(require("./Checkbox"), exports);
-__exportStar(require("./CTAButton"), exports);
-__exportStar(require("./CTALink"), exports);
-__exportStar(require("./CurrencyField"), exports);
-__exportStar(require("./CurrencyInput"), exports);
-__exportStar(require("./DataTable"), exports);
-__exportStar(require("./DateField"), exports);
-__exportStar(require("./DescriptionList"), exports);
-__exportStar(require("./Disclosure"), exports);
-__exportStar(require("./Display0"), exports);
-__exportStar(require("./Display1"), exports);
-__exportStar(require("./Display2"), exports);
-__exportStar(require("./Display3"), exports);
-__exportStar(require("./Divider"), exports);
-__exportStar(require("./Em"), exports);
-__exportStar(require("./EmailField"), exports);
-__exportStar(require("./EmailInput"), exports);
-__exportStar(require("./ErrorSummaryNotification"), exports);
-__exportStar(require("./Field"), exports);
-__exportStar(require("./FilterSelect"), exports);
-__exportStar(require("./Grid"), exports);
-__exportStar(require("./Heading1"), exports);
-__exportStar(require("./Heading2"), exports);
-__exportStar(require("./Heading3"), exports);
-__exportStar(require("./Heading4"), exports);
-__exportStar(require("./Icon"), exports);
-__exportStar(require("./Label"), exports);
-__exportStar(require("./Lead"), exports);
-__exportStar(require("./LineThrough"), exports);
-__exportStar(require("./List"), exports);
-__exportStar(require("./Margin"), exports);
-__exportStar(require("./NavHeader"), exports);
-__exportStar(require("./Notification"), exports);
-__exportStar(require("./NumberField"), exports);
-__exportStar(require("./NumberInput"), exports);
-__exportStar(require("./P"), exports);
-__exportStar(require("./PasswordField"), exports);
-__exportStar(require("./PasswordInput"), exports);
-__exportStar(require("./PhoneField"), exports);
-__exportStar(require("./PhoneInput"), exports);
-__exportStar(require("./Radio"), exports);
-__exportStar(require("./SegmentedControls"), exports);
-__exportStar(require("./SelectField"), exports);
-__exportStar(require("./SkeletonCircle"), exports);
-__exportStar(require("./SkeletonCTA"), exports);
-__exportStar(require("./SkeletonHeading"), exports);
-__exportStar(require("./SkeletonText"), exports);
-__exportStar(require("./Small"), exports);
-__exportStar(require("./Spinner"), exports);
-__exportStar(require("./Stack"), exports);
-__exportStar(require("./Strong"), exports);
-__exportStar(require("./Tabs"), exports);
-__exportStar(require("./TextareaField"), exports);
-__exportStar(require("./TextareaInput"), exports);
-__exportStar(require("./TextField"), exports);
-__exportStar(require("./TextGroup"), exports);
-__exportStar(require("./TextInput"), exports);
-__exportStar(require("./TextLink"), exports);
-__exportStar(require("./Toggle"), exports);
-__exportStar(require("./Toast"), exports);
-__exportStar(require("./ProductCarousel"), exports);
-__exportStar(require("./RadioCard"), exports);
+export * from './Accordion';
+export * from './ActionCard';
+export * from './ActionList';
+export * from './Badge';
+export * from './Card';
+export * from './Checkbox';
+export * from './CTAButton';
+export * from './CTALink';
+export * from './CurrencyField';
+export * from './CurrencyInput';
+export * from './DataTable';
+export * from './DateField';
+export * from './DescriptionList';
+export * from './Disclosure';
+export * from './Display0';
+export * from './Display1';
+export * from './Display2';
+export * from './Display3';
+export * from './Divider';
+export * from './Em';
+export * from './EmailField';
+export * from './EmailInput';
+export * from './ErrorSummaryNotification';
+export * from './Field';
+export * from './FilterSelect';
+export * from './Grid';
+export * from './Heading1';
+export * from './Heading2';
+export * from './Heading3';
+export * from './Heading4';
+export * from './Icon';
+export * from './Label';
+export * from './Lead';
+export * from './LineThrough';
+export * from './List';
+export * from './Margin';
+export * from './NavHeader';
+export * from './Notification';
+export * from './NumberField';
+export * from './NumberInput';
+export * from './P';
+export * from './PasswordField';
+export * from './PasswordInput';
+export * from './PhoneField';
+export * from './PhoneInput';
+export * from './Radio';
+export * from './SegmentedControls';
+export * from './SelectField';
+export * from './SkeletonCircle';
+export * from './SkeletonCTA';
+export * from './SkeletonHeading';
+export * from './SkeletonText';
+export * from './Small';
+export * from './Spinner';
+export * from './Stack';
+export * from './Strong';
+export * from './Tabs';
+export * from './TextareaField';
+export * from './TextareaInput';
+export * from './TextField';
+export * from './TextGroup';
+export * from './TextInput';
+export * from './TextLink';
+export * from './Toggle';
+export * from './Toast';
+export * from './ProductCarousel';
+export * from './RadioCard';

package/dist/esm/components/Accordion/Accordion.js

@@ -1,98 +1,57 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { useLayout } from '../../hooks/use-layout';
-import { ThemeContext } from '../../styled.native';
+import { useTheme } from '../../styled.native';
 import { Heading4 } from '../Heading4';
 import { AccordionGroupContext } from './Group';
 import { AccordionIcon } from './Icon';
 import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
 export function withAnimated(WrappedComponent) {
-    var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
-    var WithAnimated = /** @class */ (function (_super) {
-        __extends(WithAnimated, _super);
-        function WithAnimated() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    class WithAnimated extends Component {
+        render() {
+            return _jsx(WrappedComponent, { ...this.props });
         }
-        WithAnimated.prototype.render = function () {
-            return _jsx(WrappedComponent, __assign({}, this.props));
-        };
-        WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
-        return WithAnimated;
-    }(Component));
+    }
+    WithAnimated.displayName = `WithAnimated(${displayName})`;
     return Animated.createAnimatedComponent(WithAnimated);
 }
-export var Accordion = function (_a) {
-    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
-    var _c = useContext(ThemeContext), core = _c.core, semantic = _c.semantic;
-    var Header = useContext(AccordionGroupContext).Header;
-    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4;
-    var AnimatedHeading = useMemo(function () { return withAnimated(AccordionHeading); }, [AccordionHeading]);
-    var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
-    var _e = useState(expanded), open = _e[0], setOpen = _e[1];
-    var handleHeightContent = useMemo(function () { return layout.height || 100; }, [layout.height]);
-    var size = useSharedValue(handleHeightContent);
-    useEffect(function () {
-        runOnUI(function () {
-            'worklet';
-            if (expanded && handleHeightContent) {
-                size.value = handleHeightContent;
-            }
-        })();
+export const Accordion = ({ expanded = false, first, last, title, children, onToggle, }) => {
+    const { core, semantic } = 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 handleHeightContent = useMemo(() => layout.height || 100, [layout.height]);
+    const size = useSharedValue(handleHeightContent);
+    useEffect(() => {
+        if (expanded && handleHeightContent) {
+            size.value = handleHeightContent;
+        }
     }, [handleHeightContent, expanded, size]);
-    useEffect(function () {
-        runOnUI(function () {
-            'worklet';
-            if (handleHeightContent) {
-                size.value = handleHeightContent;
-            }
-        })();
+    useEffect(() => {
+        if (handleHeightContent) {
+            size.value = handleHeightContent;
+        }
     }, [handleHeightContent, size]);
-    var progress = useDerivedValue(function () { return withTiming(open ? 1 : 0); });
-    var style = useAnimatedStyle(function () { return ({
+    const progress = useDerivedValue(() => withTiming(open ? 1 : 0));
+    const style = useAnimatedStyle(() => ({
         height: size.value * progress.value + 1,
-    }); }, [progress, size]);
-    var toggleOpen = useCallback(function () {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+    }), [progress, size]);
+    const toggleOpen = useCallback(() => {
+        onToggle?.(!open);
         if (size.value === 0) {
-            runOnUI(function () {
-                'worklet';
-                size.value = handleHeightContent;
-            })();
+            size.value = handleHeightContent;
         }
-        setOpen(function (o) { return !o; });
+        setOpen(o => !o);
     }, [handleHeightContent, open, size]);
-    var containerAnimatedStyle = useMemo(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
-    var headerStyle = useAnimatedStyle(function () { return ({
+    const containerAnimatedStyle = useMemo(() => [{ overflow: 'hidden' }, style], [style]);
+    const headerStyle = useAnimatedStyle(() => ({
         color: interpolateColor(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
-    }); }, [progress]);
+    }), [progress]);
     return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
                             headerStyle,
                             {

package/dist/esm/components/Accordion/Group.js

@@ -1,18 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, } from 'react';
 import { View } from 'react-native';
-export var AccordionGroupContext = createContext({
+export const AccordionGroupContext = createContext({
     Header: undefined,
 });
-export var AccordionGroup = function (_a) {
-    var children = _a.children, headingComponent = _a.headingComponent;
-    var childCount = Children.count(children);
-    return (_jsx(AccordionGroupContext.Provider, { value: { Header: headingComponent }, children: _jsx(View, { children: Children.map(children, function (child, i) {
-                return isValidElement(child)
-                    ? cloneElement(child, {
-                        first: i === 0,
-                        last: i === childCount - 1,
-                    })
-                    : child;
-            }) }) }));
+export const AccordionGroup = ({ children, headingComponent, }) => {
+    const childCount = Children.count(children);
+    return (_jsx(AccordionGroupContext.Provider, { value: { Header: headingComponent }, children: _jsx(View, { children: Children.map(children, (child, i) => isValidElement(child)
+                ? cloneElement(child, {
+                    first: i === 0,
+                    last: i === childCount - 1,
+                })
+                : child) }) }));
 };

package/dist/esm/components/Accordion/Icon.js

@@ -3,26 +3,25 @@ import { useContext } from 'react';
 import Animated, { interpolateColor, useAnimatedProps, useAnimatedStyle, } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
 import { ThemeContext } from '../../styled.native';
-var OVO_LOGO_ANGLE = 105;
-var AnimatedPath = Animated.createAnimatedComponent(Path);
-export function AccordionIcon(_a) {
-    var animationTiming = _a.animationTiming;
-    var _b = useContext(ThemeContext), core = _b.core, semantic = _b.semantic;
-    var outerAnimatedStyles = useAnimatedStyle(function () { return ({
+const OVO_LOGO_ANGLE = 105;
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+export function AccordionIcon({ animationTiming, }) {
+    const { core, semantic } = useContext(ThemeContext);
+    const outerAnimatedStyles = useAnimatedStyle(() => ({
         backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
         height: 36 - animationTiming.value * 4,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
-    }); }, [animationTiming]);
-    var innerAnimatedStyles = useAnimatedStyle(function () { return ({
+    }), [animationTiming]);
+    const innerAnimatedStyles = useAnimatedStyle(() => ({
         transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
-    }); }, [animationTiming]);
-    var plusAnimatedProps = useAnimatedProps(function () { return ({
+    }), [animationTiming]);
+    const plusAnimatedProps = useAnimatedProps(() => ({
         opacity: 1 - animationTiming.value,
-    }); }, [animationTiming]);
-    var minusAnimatedProps = useAnimatedProps(function () { return ({
+    }), [animationTiming]);
+    const minusAnimatedProps = useAnimatedProps(() => ({
         opacity: animationTiming.value,
-    }); }, [animationTiming]);
+    }), [animationTiming]);
     return (_jsx(Animated.View, { style: [
             {
                 backgroundColor: semantic.surface.cutout,

package/dist/esm/components/Accordion/styles.js

@@ -1,31 +1,45 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { numToPx } from '@ovotech/element-core';
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
-export var StyledAccordion = styled(Animated.View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last, isExpanded = _a.isExpanded;
-    return 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  "])), numToPx(core.borderWidth.small), semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
-        ? {
-            borderTopLeftRadius: core.radius.small,
-            borderTopRightRadius: core.radius.small,
-        }
-        : null, last
-        ? {
-            borderBottomLeftRadius: core.radius.small,
-            borderBottomRightRadius: core.radius.small,
-            borderBottomWidth: core.borderWidth.small,
-        }
-        : null);
-});
-export var StyledAccordionHeader = styled.TouchableOpacity(function (_a) {
-    var core = _a.theme.core;
-    return 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  "])), numToPx(core.space[5]), numToPx(core.space[3]));
-});
-export var StyledContainer = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return 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  "])), numToPx(core.space[12]), numToPx(core.space[6]), numToPx(core.space[3]));
-});
-var templateObject_1, templateObject_2, templateObject_3;
+export const StyledAccordion = styled(Animated.View)(({ theme: { semantic, core }, first, last, isExpanded }) => css `
+    width: 100%;
+    border-width: ${numToPx(core.borderWidth.small)};
+    border-color: ${semantic.border.differentiated};
+    border-bottom-width: 0;
+    background-color: ${isExpanded ? core.color.brand.white : 'transparent'};
+    transition: background-color ${core.transition.fast}ms;
+
+    ${first
+    ? {
+        borderTopLeftRadius: core.radius.small,
+        borderTopRightRadius: core.radius.small,
+    }
+    : null}
+
+    ${last
+    ? {
+        borderBottomLeftRadius: core.radius.small,
+        borderBottomRightRadius: core.radius.small,
+        borderBottomWidth: core.borderWidth.small,
+    }
+    : null}
+  `);
+export const StyledAccordionHeader = styled.TouchableOpacity(({ theme: { core } }) => css `
+    padding-top: ${numToPx(core.space[5])};
+    padding-left: ${numToPx(core.space[3])};
+    padding-right: 18px;
+    padding-bottom: 18px;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+  `);
+export const StyledContainer = styled.View(({ theme: { core } }) => css `
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding-top: 0;
+    padding-right: ${numToPx(core.space[12])};
+    padding-bottom: ${numToPx(core.space[6])};
+    padding-left: ${numToPx(core.space[3])};
+  `);

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

@@ -1,70 +1,72 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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 { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import { Image, Pressable, View } from 'react-native';
 import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../';
-import styled, { ThemeContext } from '../../styled.native';
+import styled, { useTheme } from '../../styled.native';
 import { P } from '../P';
 import { IndicatorIconShape } from './IndicatorIconShape';
-var StyledPressableCard = styled.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 ? numToPx(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
-});
-var StyledCard = styled.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 ? numToPx(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
-});
-var StyledP = styled(P)(function (_a) {
-    var semantic = _a.theme.semantic, inverted = _a.inverted;
-    return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
+const StyledPressableCard = styled.Pressable(({ theme: { core, semantic }, inline, inverted, reducedBottomPadding }) => {
+    const paddingVal = inline ? core.space[4] : core.space[6];
+    const reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return `
+      border-radius: ${inline ? numToPx(core.space[6]) : 0};
+      background-color: ${inverted ? semantic.inverted.surface : semantic.surface.elevated};
+      padding: ${numToPx(paddingVal)};
+      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
+      overflow: hidden;
+      border-width: 0;
+      width: 100%;
+    `;
 });
-var CloseIconWrapper = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return "\n    padding: ".concat(numToPx(core.space[2]), ";\n    background-color: ").concat(semantic.surface.elevated, ";\n    border-radius: ").concat(numToPx(core.space[6]), ";\n");
+const StyledCard = styled.View(({ theme: { core, semantic }, inline, inverted, reducedBottomPadding }) => {
+    const paddingVal = inline ? core.space[4] : core.space[6];
+    const reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return `
+      border-radius: ${inline ? numToPx(core.space[6]) : 0};
+      background-color: ${inverted ? semantic.inverted.surface : semantic.surface.elevated};
+      padding: ${numToPx(paddingVal)};
+      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
+      overflow: hidden;
+      border-width: 0;
+      width: 100%;
+    `;
 });
-export 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 = useContext(ThemeContext), core = _f.core, semantic = _f.semantic;
-    var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
+const StyledP = styled(P)(({ theme: { semantic }, inverted }) => `
+    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
+`);
+const CloseIconWrapper = styled.View(({ theme: { core, semantic } }) => `
+    padding: ${numToPx(core.space[2])};
+    background-color: ${semantic.surface.elevated};
+    border-radius: ${numToPx(core.space[6])};
+`);
+export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-right-small', body, buttonTitle, ctaVariant, image, inline = false, inverted = false, onMount, onPressCloseButton, onPressActionButton, onPressIndicator, testID, title, }) => {
+    const { core, semantic } = useTheme();
+    const hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
         (onPressIndicator && !onPressActionButton && !onPressCloseButton);
-    var cardAction = hasSingleAction
+    const cardAction = hasSingleAction
         ? onPressActionButton || onPressIndicator
         : null;
-    var RootContainer = hasSingleAction
+    const RootContainer = hasSingleAction
         ? StyledPressableCard
         : StyledCard;
-    useEffect(function () {
+    useEffect(() => {
         if (onMount) {
             onMount();
         }
     }, []);
-    var Heading = inline ? Heading3 : Heading2;
-    var cardPadding = core.space[inline ? 4 : 6];
-    var negativeMarginAdjustment = -cardPadding;
-    return (_jsxs(RootContainer, __assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(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: {
+    const Heading = inline ? Heading3 : Heading2;
+    const cardPadding = core.space[inline ? 4 : 6];
+    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
                                             ? semantic.inverted.message.link
                                             : semantic.message.branded,
                                         paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
-                                    }, testID: "".concat(testID, "-heading"), children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
+                                    }, 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, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
+                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { inline: true, onPress: onPressActionButton, testID: `${testID}-button`, iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: `${testID}-button`, variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
                             flex: 1,
                             flexDirection: 'row',
                             height: '100%',
@@ -89,7 +91,7 @@ export var ActionCard = function (_a) {
                             position: 'absolute',
                             right: negativeMarginAdjustment,
                             bottom: negativeMarginAdjustment,
-                        }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button"), children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
+                        }, onPress: onPressIndicator, testID: `${testID}-indicator-button`, children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
                                     position: 'absolute',
                                     right: inline ? 8 : 6,
                                     bottom: 16,
@@ -97,5 +99,5 @@ export var ActionCard = function (_a) {
                     position: 'absolute',
                     right: core.space[2],
                     top: core.space[2],
-                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] })));
+                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
 };

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

@@ -1,11 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Svg, { Path, ClipPath, Defs } from 'react-native-svg';
 import styled from '../../styled.native';
-var StyledPath = styled(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");
-});
-export var CloseIconShape = function (_a) {
-    var color = _a.color;
-    return (_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" }) }) })] }));
-};
+const StyledPath = styled(Path)(({ theme: { semantic }, color }) => `
+  fill: ${color ?? semantic.message.branded}
+`);
+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/components/ActionCard/IndicatorIconShape.js

@@ -1,11 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Svg, { Path } from 'react-native-svg';
 import styled from '../../styled.native';
-var StyledPath = styled(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");
-});
-export var IndicatorIconShape = function (_a) {
-    var color = _a.color;
-    return (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));
-};
+const StyledPath = styled(Path)(({ theme: { semantic }, color }) => `
+  fill: ${color ?? semantic.message.branded}
+`);
+export const IndicatorIconShape = ({ color }) => (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));