@ovotech/element-native 5.4.3-canary-958358a-434 → 5.4.3

package/dist/components/Accordion/Accordion.js

@@ -1,99 +1,62 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = void 0;
-exports.withAnimated = withAnimated;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const use_layout_1 = require("../../hooks/use-layout");
-const styled_native_1 = require("../../styled.native");
-const Heading_1 = require("../Heading");
-const Group_1 = require("./Group");
-const Icon_1 = require("./Icon");
-const styles_1 = require("./styles");
-function withAnimated(WrappedComponent) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useLayout } from '../../hooks/use-layout';
+import { useTheme } from '../../styled.native';
+import { Heading4 } from '../Heading';
+import { AccordionGroupContext } from './Group';
+import { AccordionIcon } from './Icon';
+import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
+export function withAnimated(WrappedComponent) {
     const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
-    class WithAnimated extends react_1.Component {
+    class WithAnimated extends Component {
         render() {
-            return (0, jsx_runtime_1.jsx)(WrappedComponent, Object.assign({}, this.props));
+            return _jsx(WrappedComponent, { ...this.props });
         }
     }
     WithAnimated.displayName = `WithAnimated(${displayName})`;
     // @ts-ignore
-    return react_native_reanimated_1.default.createAnimatedComponent(WithAnimated);
+    return Animated.createAnimatedComponent(WithAnimated);
 }
-const Accordion = ({ expanded = false, first, last, title, children, onToggle, variant = 'default', }) => {
-    const theme = (0, styled_native_1.useTheme)();
-    const { Header } = (0, react_1.useContext)(Group_1.AccordionGroupContext);
-    const AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading_1.Heading4;
-    const AnimatedHeading = (0, react_1.useMemo)(() => withAnimated(AccordionHeading), [AccordionHeading]);
-    const [layout, onLayout] = (0, use_layout_1.useLayout)(0);
-    const [open, setOpen] = (0, react_1.useState)(expanded);
+export const Accordion = ({ expanded = false, first, last, title, children, onToggle, variant = 'default', }) => {
+    const theme = 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 initialHeadingColor = variant === 'default'
         ? theme.color.brand.brand
         : theme.color.surface.onSurface;
-    const handleHeightContent = (0, react_1.useMemo)(() => layout.height || 100, [layout.height]);
-    const size = (0, react_native_reanimated_1.useSharedValue)(handleHeightContent);
-    (0, react_1.useEffect)(() => {
+    const handleHeightContent = useMemo(() => layout.height || 100, [layout.height]);
+    const size = useSharedValue(handleHeightContent);
+    useEffect(() => {
         if (expanded && handleHeightContent) {
             size.value = handleHeightContent;
         }
     }, [handleHeightContent, expanded, size]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (handleHeightContent) {
             size.value = handleHeightContent;
         }
     }, [handleHeightContent, size]);
-    const progress = (0, react_native_reanimated_1.useDerivedValue)(() => (0, react_native_reanimated_1.withTiming)(open ? 1 : 0));
-    const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+    const progress = useDerivedValue(() => withTiming(open ? 1 : 0));
+    const style = useAnimatedStyle(() => ({
         height: size.value * progress.value + 1,
     }), [progress, size]);
-    const toggleOpen = (0, react_1.useCallback)(() => {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+    const toggleOpen = useCallback(() => {
+        onToggle?.(!open);
         if (size.value === 0) {
             size.value = handleHeightContent;
         }
         setOpen(o => !o);
     }, [handleHeightContent, open, size]);
-    const containerAnimatedStyle = (0, react_1.useMemo)(() => [{ overflow: 'hidden' }, style], [style]);
-    const headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
+    const containerAnimatedStyle = useMemo(() => [{ overflow: 'hidden' }, style], [style]);
+    const headerStyle = useAnimatedStyle(() => ({
+        color: interpolateColor(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
     }), [progress]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, { style: [
+    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
                             headerStyle,
                             {
                                 paddingRight: theme.space[300],
@@ -101,6 +64,5 @@ const Accordion = ({ expanded = false, first, last, title, children, onToggle, v
                                 marginBottom: 0,
                                 flexShrink: 1,
                             },
-                        ], children: title }), (0, jsx_runtime_1.jsx)(Icon_1.AccordionIcon, { animationTiming: progress, "$variant": variant })] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: containerAnimatedStyle, children: (0, jsx_runtime_1.jsx)(styles_1.StyledContainer, { onLayout: onLayout, children: children }) })] }));
+                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress, "$variant": variant })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
 };
-exports.Accordion = Accordion;

package/dist/components/Accordion/Group.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionGroup = exports.AccordionGroupContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-exports.AccordionGroupContext = (0, react_1.createContext)({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, } from 'react';
+import { View } from 'react-native';
+export const AccordionGroupContext = createContext({
     Header: undefined,
 });
-const AccordionGroup = ({ children, headingComponent, }) => {
-    const childCount = react_1.Children.count(children);
-    return ((0, jsx_runtime_1.jsx)(exports.AccordionGroupContext.Provider, { value: { Header: headingComponent }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { children: react_1.Children.map(children, (child, i) => (0, react_1.isValidElement)(child)
-                ? (0, react_1.cloneElement)(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) }) }));
 };
-exports.AccordionGroup = AccordionGroup;

package/dist/components/Accordion/Icon.js

@@ -1,67 +1,31 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionIcon = AccordionIcon;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const react_native_svg_1 = require("react-native-svg");
-const styled_native_1 = require("../../styled.native");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
 const OVO_LOGO_ANGLE = 105;
-const AnimatedPath = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Path);
-function AccordionIcon({ animationTiming, $variant, }) {
-    const { color } = (0, react_1.useContext)(styled_native_1.ThemeContext);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+export function AccordionIcon({ animationTiming, $variant, }) {
+    const { color } = useContext(ThemeContext);
     const initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
     const expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
     const initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
-    const outerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
+    const outerAnimatedStyles = useAnimatedStyle(() => ({
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
         height: 32 - animationTiming.value,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
     }), [animationTiming]);
-    const innerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+    const innerAnimatedStyles = useAnimatedStyle(() => ({
         transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
     }), [animationTiming]);
-    const plusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(() => ({
+    const plusAnimatedProps = useAnimatedProps(() => ({
         opacity: 1 - animationTiming.value,
     }), [animationTiming]);
-    const minusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(() => ({
+    const minusAnimatedProps = useAnimatedProps(() => ({
         opacity: animationTiming.value,
     }), [animationTiming]);
-    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+    return (_jsx(Animated.View, { style: [
             {
                 backgroundColor: color.surface.dim,
                 aspectRatio: 1,
@@ -69,5 +33,5 @@ function AccordionIcon({ animationTiming, $variant, }) {
                 justifyContent: 'center',
             },
             outerAnimatedStyles,
-        ], children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: innerAnimatedStyles, children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [(0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), (0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
+        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
 }

package/dist/components/Accordion/index.js

@@ -1,9 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionIcon = exports.AccordionGroup = exports.Accordion = void 0;
-var Accordion_1 = require("./Accordion");
-Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
-var Group_1 = require("./Group");
-Object.defineProperty(exports, "AccordionGroup", { enumerable: true, get: function () { return Group_1.AccordionGroup; } });
-var Icon_1 = require("./Icon");
-Object.defineProperty(exports, "AccordionIcon", { enumerable: true, get: function () { return Icon_1.AccordionIcon; } });
+export { Accordion } from './Accordion';
+export { AccordionGroup } from './Group';
+export { AccordionIcon } from './Icon';

package/dist/components/Accordion/styles.js

@@ -1,48 +1,9 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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;
-const element_core_1 = require("@ovotech/element-core");
-const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
-const styled_native_1 = __importStar(require("../../styled.native"));
-exports.StyledAccordion = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(({ theme, first, last, isExpanded, $variant }) => (0, styled_native_1.css) `
+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, first, last, isExpanded, $variant }) => css `
     width: 100%;
-    border-width: ${(0, element_core_1.numToPx)(theme.border.width[$variant === 'default' ? 'sm' : 'md'])};
+    border-width: ${numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md'])};
     border-color: ${$variant === 'brand'
     ? theme.color.brand.brand
     : theme.color.surface.borderDim};
@@ -65,26 +26,26 @@ exports.StyledAccordion = (0, styled_native_1.default)(react_native_reanimated_1
     ? {
         borderBottomLeftRadius: theme.border.radius.md,
         borderBottomRightRadius: theme.border.radius.md,
-        borderBottomWidth: (0, element_core_1.numToPx)(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
+        borderBottomWidth: numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
     }
     : null}
   `);
-exports.StyledAccordionHeader = styled_native_1.default.TouchableOpacity(({ theme }) => (0, styled_native_1.css) `
-    padding-top: ${(0, element_core_1.numToPx)(theme.space[500])};
-    padding-left: ${(0, element_core_1.numToPx)(theme.space[300])};
+export const StyledAccordionHeader = styled.TouchableOpacity(({ theme }) => css `
+    padding-top: ${numToPx(theme.space[500])};
+    padding-left: ${numToPx(theme.space[300])};
     padding-right: 18px;
     padding-bottom: 18px;
     flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
   `);
-exports.StyledContainer = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
+export const StyledContainer = styled.View(({ theme }) => css `
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     padding-top: 0;
-    padding-right: ${(0, element_core_1.numToPx)(theme.space[1200])};
-    padding-bottom: ${(0, element_core_1.numToPx)(theme.space[600])};
-    padding-left: ${(0, element_core_1.numToPx)(theme.space[300])};
+    padding-right: ${numToPx(theme.space[1200])};
+    padding-bottom: ${numToPx(theme.space[600])};
+    padding-left: ${numToPx(theme.space[300])};
   `);

package/dist/components/Accordion/types.js

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

package/dist/components/ActionCard/ActionCard.js

@@ -1,87 +1,48 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
-const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const __1 = require("../");
-const styled_native_1 = __importStar(require("../../styled.native"));
-const P_1 = require("../P");
-const IndicatorIconShape_1 = require("./IndicatorIconShape");
-const StyledPressableCard = styled_native_1.default.Pressable(({ theme, inline, inverted, reducedBottomPadding }) => {
+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, Button, 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, inline, inverted, reducedBottomPadding }) => {
     const paddingVal = inline ? theme.space[400] : theme.space[600];
     const reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
     return `
-      border-radius: ${inline ? (0, element_core_1.numToPx)(theme.space[600]) : 0};
+      border-radius: ${inline ? numToPx(theme.space[600]) : 0};
       background-color: ${inverted ? theme.color.surface.dim : theme.color.surface.bright};
-      padding: ${(0, element_core_1.numToPx)(paddingVal)};
-      padding-bottom: ${(0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
+      padding: ${numToPx(paddingVal)};
+      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
       overflow: hidden;
       border-width: 0;
       width: 100%;
     `;
 });
-const StyledCard = styled_native_1.default.View(({ theme, inline, inverted, reducedBottomPadding }) => {
+const StyledCard = styled.View(({ theme, inline, inverted, reducedBottomPadding }) => {
     const paddingVal = inline ? theme.space[400] : theme.space[600];
     const reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
     return `
-      border-radius: ${inline ? (0, element_core_1.numToPx)(theme.space[600]) : 0};
+      border-radius: ${inline ? numToPx(theme.space[600]) : 0};
       background-color: ${inverted ? theme.color.surface.onSurface : theme.color.surface.bright};
-      padding: ${(0, element_core_1.numToPx)(paddingVal)};
-      padding-bottom: ${(0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
+      padding: ${numToPx(paddingVal)};
+      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
       overflow: hidden;
       border-width: 0;
       width: 100%;
     `;
 });
-const StyledP = (0, styled_native_1.default)(P_1.P)(({ theme, inverted }) => `
+const StyledP = styled(P)(({ theme, inverted }) => `
     color: ${inverted ? theme.color.surface.bright : theme.color.surface.onSurface};
 `);
-const CloseIconWrapper = styled_native_1.default.View(({ theme }) => `
-    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
+const CloseIconWrapper = styled.View(({ theme }) => `
+    padding: ${numToPx(theme.space[200])};
     background-color: ${theme.color.surface.bright};
-    border-radius: ${(0, element_core_1.numToPx)(theme.space[600])};
+    border-radius: ${numToPx(theme.space[600])};
 `);
-const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-right-small', body, buttonTitle, ctaVariant, image, inline = false, inverted = false, onMount, onPressCloseButton, onPressActionButton, onPressIndicator, testID, title, }) => {
-    const theme = (0, styled_native_1.useTheme)();
+export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-right-small', body, buttonTitle, ctaVariant, image, inline = false, inverted = false, onMount, onPressCloseButton, onPressActionButton, onPressIndicator, testID, title, }) => {
+    const theme = useTheme();
     const hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
         (onPressIndicator && !onPressActionButton && !onPressCloseButton);
     const cardAction = hasSingleAction
@@ -90,28 +51,28 @@ const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-ri
     const RootContainer = hasSingleAction
         ? StyledPressableCard
         : StyledCard;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (onMount) {
             onMount();
         }
     }, []);
-    const Heading = inline ? __1.Heading3 : __1.Heading2;
+    const Heading = inline ? Heading3 : Heading2;
     const cardPadding = theme.space[inline ? 400 : 600];
     const negativeMarginAdjustment = -cardPadding;
-    return ((0, jsx_runtime_1.jsxs)(RootContainer, Object.assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: `${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: {
+    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
                                             ? theme.color.surface.bright
                                             : theme.color.brand.brand,
                                         paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
-                                    }, testID: `${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, { standalone: true, onPress: onPressActionButton, testID: `${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: `${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, { standalone: true, onPress: onPressActionButton, testID: `${testID}-button`, iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(Button, { 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',
@@ -120,24 +81,23 @@ const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-ri
                                     { 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: `${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: theme.color.surface.bright, 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 ? (_jsx(Pressable, { style: {
                     position: 'absolute',
                     right: theme.space[200],
                     top: theme.space[200],
-                }, onPress: onPressCloseButton, testID: `${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] })));
+                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] }));
 };
-exports.ActionCard = ActionCard;

package/dist/components/ActionCard/CloseIconShape.js

@@ -1,47 +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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-const styled_native_1 = __importDefault(require("../../styled.native"));
-const StyledPath = (0, styled_native_1.default)(react_native_svg_1.Path)(({ theme, color }) => `
-  fill: ${color !== null && color !== void 0 ? color : theme.color.brand.brand}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { ClipPath, Defs, Path } from 'react-native-svg';
+import styled from '../../styled.native';
+const StyledPath = styled(Path)(({ theme, color }) => `
+  fill: ${color ?? theme.color.brand.brand}
 `);
-const CloseIconShape = ({ color }) => ((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;
+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" }) }) })] }));