@ovotech/element-native 4.4.9 → 4.5.0

package/dist/components/Accordion/styles.js

@@ -1,60 +1,45 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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]; } };
+import { numToPx } from '@ovotech/element-core';
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+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,
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledContainer = exports.StyledAccordionHeader = exports.StyledAccordion = void 0;
-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
-        ? {
-            borderTopLeftRadius: core.radius.small,
-            borderTopRightRadius: core.radius.small,
-        }
-        : null, last
-        ? {
-            borderBottomLeftRadius: core.radius.small,
-            borderBottomRightRadius: core.radius.small,
-            borderBottomWidth: core.borderWidth.small,
-        }
-        : 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]));
-});
-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 templateObject_1, templateObject_2, templateObject_3;
+    : 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/components/Accordion/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

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

@@ -4,7 +4,7 @@ import { IconName } from '../../providers';
 import { CTAVariantName } from '../CTAButton/CTAButton';
 export type ActionCardProps = {
     title: string;
-    body?: string | ReactElement;
+    body?: string | ReactElement<any>;
     onPressCloseButton?: () => void;
     onPressActionButton?: () => void;
     onPressIndicator?: () => void;

package/dist/components/ActionCard/ActionCard.js

@@ -1,105 +1,78 @@
-"use strict";
-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);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var __1 = require("../");
-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 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 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");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import MaskedView from '@react-native-masked-view/masked-view';
+import { useEffect } from 'react';
+import { Image, Pressable, View } from 'react-native';
+import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../';
+import styled, { useTheme } from '../../styled.native';
+import { P } from '../P';
+import { IndicatorIconShape } from './IndicatorIconShape';
+const StyledPressableCard = styled.Pressable(({ theme: { 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_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");
+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%;
+    `;
 });
-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 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;
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (onMount) {
             onMount();
         }
     }, []);
-    var Heading = inline ? __1.Heading3 : __1.Heading2;
-    var cardPadding = core.space[inline ? 4 : 6];
-    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: {
+    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 }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                                    }, testID: `${testID}-heading`, children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(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: _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%',
                             marginTop: negativeMarginAdjustment,
                             marginRight: negativeMarginAdjustment,
-                        }, maskElement: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                        }, maskElement: _jsx(View, { style: {
                                 width: '100%',
                                 height: 165,
                                 backgroundColor: 'olive',
@@ -108,24 +81,23 @@ var ActionCard = function (_a) {
                                     { translateX: 40 },
                                     { translateY: 25 },
                                 ],
-                            } }), children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { resizeMode: "cover", source: image, style: {
+                            } }), children: _jsx(Image, { resizeMode: "cover", source: image, style: {
                                 width: '100%',
                                 height: 200,
                                 position: 'absolute',
                                 top: 0,
                                 right: 0,
-                            }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: {
+                            }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? (_jsxs(Pressable, { style: {
                             position: 'absolute',
                             right: negativeMarginAdjustment,
                             bottom: negativeMarginAdjustment,
-                        }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button"), children: [(0, jsx_runtime_1.jsx)(IndicatorIconShape_1.IndicatorIconShape, {}), (0, jsx_runtime_1.jsx)(__1.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,
-                                }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: {
+                                }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? (_jsx(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] })));
+                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
 };
-exports.ActionCard = ActionCard;

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

@@ -1,3 +1,3 @@
 export declare const CloseIconShape: ({ color }: {
-    color?: string | undefined;
+    color?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionCard/CloseIconShape.js

@@ -1,41 +1,7 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CloseIconShape = void 0;
-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 CloseIconShape = function (_a) {
-    var color = _a.color;
-    return ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { width: 44, height: 44, children: [(0, jsx_runtime_1.jsx)(StyledPath, { color: color, d: "M11.632 44 0 0h44v35.402L11.632 44Z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Defs, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.ClipPath, { id: "a", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "#fff", d: "M16 16h12v12H16z" }) }) })] }));
-};
-exports.CloseIconShape = CloseIconShape;
+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';
+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/components/ActionCard/IndicatorIconShape.d.ts

@@ -1,3 +1,3 @@
 export declare const IndicatorIconShape: ({ color }: {
-    color?: string | undefined;
+    color?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionCard/IndicatorIconShape.js

@@ -1,41 +1,7 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IndicatorIconShape = void 0;
-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 IndicatorIconShape = function (_a) {
-    var color = _a.color;
-    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: 32, height: 48, children: (0, jsx_runtime_1.jsx)(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));
-};
-exports.IndicatorIconShape = IndicatorIconShape;
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+import styled from '../../styled.native';
+const StyledPath = styled(Path)(({ theme: { 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" }) }));

package/dist/components/ActionCard/index.js

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

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

@@ -1,9 +1,11 @@
-import { ComponentProps, PropsWithChildren, Ref } from 'react';
-import { AccessibilityRole, View, ViewProps } from 'react-native';
+import { PropsWithChildren, RefObject } from 'react';
+import { AccessibilityRole, TouchableOpacityProps, View, ViewProps } from 'react-native';
 import { IconName } from '../../providers';
-import { StyledActionList } from './styled';
-type ActionListProps = ComponentProps<typeof StyledActionList>;
-type ActionProps = PropsWithChildren<ViewProps & {
+type ActionListProps = ViewProps & {
+    borderBottom?: boolean;
+    inverted?: boolean;
+};
+type ActionProps = PropsWithChildren<TouchableOpacityProps & {
     accessibilityRole?: AccessibilityRole;
     accessibilityLabel?: string;
     accessibilityHint?: string;
@@ -13,11 +15,11 @@ type ActionProps = PropsWithChildren<ViewProps & {
     inline?: boolean;
     onPress?: () => void;
     fullWidth?: boolean;
-    ref?: Ref<View>;
+    ref?: RefObject<View | null>;
     testID?: string;
     inList?: boolean;
     standalone?: boolean;
 }>;
 declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => import("react/jsx-runtime").JSX.Element;
-declare const Action: import("react").ForwardRefExoticComponent<Omit<ActionProps, "ref"> & import("react").RefAttributes<View>>;
+declare const Action: ({ accessibilityRole, accessibilityLabel, accessibilityHint, children, fullWidth, inverted, inline, onPress, testID, iconLeft, iconRight, standalone, ref, ...rest }: ActionProps) => import("react/jsx-runtime").JSX.Element;
 export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -1,58 +1,24 @@
-"use strict";
-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 { Children, cloneElement, } from 'react';
+import { TouchableOpacity, } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { getValidChildren } from '../../utils';
+import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
+const ActionList = ({ children, inverted, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    const childCount = Children.count(validChildren);
+    return (_jsx(StyledActionList, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
+            fullWidth: true,
+            index,
+            hasBorder: childCount > 1 && index !== childCount - 1,
+            inverted: child.props.inverted ?? inverted, // prioritise child prop
+            inList: true,
+            iconRight: child.props.iconRight ?? 'chevron-right-small',
+        })) }));
 };
-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;
+const ActionWrapper = ({ children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inline = false, inList, onPress, testID, standalone = false, ref, ...rest }) => (_jsx(StyledActionWrapper, { ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, ...rest, children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) }));
+const Action = ({ accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, inline = false, onPress, testID, iconLeft, iconRight, standalone = false, ref, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    return (_jsxs(ActionWrapper, { ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone, ...rest, children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest?.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Action = exports.ActionList = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var hooks_1 = require("../../hooks");
-var utils_1 = require("../../utils");
-var styled_1 = require("./styled");
-var ActionList = function (_a) {
-    var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
-    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) {
-            var _a, _b;
-            return (0, react_1.cloneElement)(child, {
-                fullWidth: true,
-                index: index,
-                hasBorder: childCount > 1 && index !== childCount - 1,
-                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',
-            });
-        }) })));
-};
-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 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 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] })));
-});
-exports.Action = Action;
+export { ActionList, Action };

package/dist/components/ActionList/index.js

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