@ovotech/element-native 5.2.1 → 5.3.0-canary-9e22bfd-413

package/dist/components/Toggle/styles.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledToggleDot = exports.StyledToggleInput = exports.StyledToggleInputWrapper = exports.StyledWrapper = void 0;
-var element_core_1 = require("@ovotech/element-core");
-var react_native_1 = require("react-native");
-var styled_native_1 = __importDefault(require("../../styled.native"));
-exports.StyledWrapper = styled_native_1.default.TouchableOpacity(function (_a) {
-    var theme = _a.theme, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(hasLabel ? (inline ? undefined : '100%') : (0, element_core_1.numToPx)(theme.space[1100]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
-});
-exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
-    var theme = _a.theme, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat((0, element_core_1.numToPx)(theme.space[1100]), ";\n    height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n    ").concat(labelPosition
-        ? labelPosition === 'left'
-            ? 'margin-left: 10px;'
-            : 'margin-right: 10px;'
-        : null, "\n    ");
-});
-exports.StyledToggleInput = styled_native_1.default.View(function (_a) {
-    var theme = _a.theme, checked = _a.checked;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[1100]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(theme.border.radius.lg), ";\n      background: ").concat(checked
-        ? theme.color.outline.outer
-        : theme.color.surface.onSurfaceVariant, ";\n    ");
-});
-exports.StyledToggleDot = (0, styled_native_1.default)(react_native_1.Animated.View)(function (_a) {
-    var theme = _a.theme, checked = _a.checked;
-    return "\n  position: absolute;\n  width: ".concat((0, element_core_1.numToPx)(theme.space[400]), ";\n  height: ").concat((0, element_core_1.numToPx)(theme.space[400]), ";\n  border-radius: ").concat((0, element_core_1.numToPx)(theme.space[400]), ";\n  background-color: ").concat(checked ? theme.color.brand.onBrand : theme.color.surface.dim, ";\n");
-});

package/dist/components/index.d.ts

@@ -1,53 +0,0 @@
-export * from './Accordion';
-export * from './ActionCard';
-export * from './ActionList';
-export * from './Badge';
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './CurrencyField';
-export * from './CurrencyInput';
-export * from './DataTable';
-export * from './DateField';
-export * from './Disclosure';
-export * from './Display';
-export * from './Divider';
-export * from './Em';
-export * from './EmailField';
-export * from './EmailInput';
-export * from './Field';
-export * from './Grid';
-export * from './Heading';
-export * from './Icon';
-export * from './LineThrough';
-export * from './Link';
-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 './Pictogram';
-export * from './Radio';
-export * from './RadioCard';
-export * from './SegmentedControls';
-export * from './SelectField';
-export * from './SkeletonButton';
-export * from './SkeletonCircle';
-export * from './SkeletonHeading';
-export * from './SkeletonText';
-export * from './Spinner';
-export * from './Stack';
-export * from './Strong';
-export * from './Tabs';
-export * from './TextField';
-export * from './TextInput';
-export * from './TextareaField';
-export * from './TextareaInput';
-export * from './Toast';
-export * from './Toggle';

package/dist/components/index.js

@@ -1,69 +0,0 @@
-"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("./Button"), exports);
-__exportStar(require("./Card"), exports);
-__exportStar(require("./Checkbox"), exports);
-__exportStar(require("./CurrencyField"), exports);
-__exportStar(require("./CurrencyInput"), exports);
-__exportStar(require("./DataTable"), exports);
-__exportStar(require("./DateField"), exports);
-__exportStar(require("./Disclosure"), exports);
-__exportStar(require("./Display"), exports);
-__exportStar(require("./Divider"), exports);
-__exportStar(require("./Em"), exports);
-__exportStar(require("./EmailField"), exports);
-__exportStar(require("./EmailInput"), exports);
-__exportStar(require("./Field"), exports);
-__exportStar(require("./Grid"), exports);
-__exportStar(require("./Heading"), exports);
-__exportStar(require("./Icon"), exports);
-__exportStar(require("./LineThrough"), exports);
-__exportStar(require("./Link"), 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("./Pictogram"), exports);
-__exportStar(require("./Radio"), exports);
-__exportStar(require("./RadioCard"), exports);
-__exportStar(require("./SegmentedControls"), exports);
-__exportStar(require("./SelectField"), exports);
-__exportStar(require("./SkeletonButton"), exports);
-__exportStar(require("./SkeletonCircle"), exports);
-__exportStar(require("./SkeletonHeading"), exports);
-__exportStar(require("./SkeletonText"), exports);
-__exportStar(require("./Spinner"), exports);
-__exportStar(require("./Stack"), exports);
-__exportStar(require("./Strong"), exports);
-__exportStar(require("./Tabs"), exports);
-__exportStar(require("./TextField"), exports);
-__exportStar(require("./TextInput"), exports);
-__exportStar(require("./TextareaField"), exports);
-__exportStar(require("./TextareaInput"), exports);
-__exportStar(require("./Toast"), exports);
-__exportStar(require("./Toggle"), exports);

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

@@ -1,108 +0,0 @@
-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 { useLayout } from '../../hooks/use-layout';
-import { ThemeContext } 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) {
-    var 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;
-        }
-        WithAnimated.prototype.render = function () {
-            return _jsx(WrappedComponent, __assign({}, this.props));
-        };
-        WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
-        return WithAnimated;
-    }(Component));
-    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, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
-    var theme = useContext(ThemeContext);
-    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 initialHeadingColor = variant === 'default'
-        ? theme.color.brand.brand
-        : theme.color.surface.onSurface;
-    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;
-            }
-        })();
-    }, [handleHeightContent, expanded, size]);
-    useEffect(function () {
-        runOnUI(function () {
-            'worklet';
-            if (handleHeightContent) {
-                size.value = handleHeightContent;
-            }
-        })();
-    }, [handleHeightContent, size]);
-    var progress = useDerivedValue(function () { return withTiming(open ? 1 : 0); });
-    var style = useAnimatedStyle(function () { return ({
-        height: size.value * progress.value + 1,
-    }); }, [progress, size]);
-    var toggleOpen = useCallback(function () {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
-        if (size.value === 0) {
-            runOnUI(function () {
-                'worklet';
-                size.value = handleHeightContent;
-            })();
-        }
-        setOpen(function (o) { return !o; });
-    }, [handleHeightContent, open, size]);
-    var containerAnimatedStyle = useMemo(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
-    var headerStyle = useAnimatedStyle(function () { return ({
-        color: interpolateColor(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
-    }); }, [progress]);
-    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],
-                                marginTop: 0,
-                                marginBottom: 0,
-                                flexShrink: 1,
-                            },
-                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress, "$variant": variant })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
-};

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

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, createContext, isValidElement, } from 'react';
-import { View } from 'react-native';
-export var 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;
-            }) }) }));
-};

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

@@ -1,38 +0,0 @@
-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';
-var OVO_LOGO_ANGLE = 105;
-var AnimatedPath = Animated.createAnimatedComponent(Path);
-export function AccordionIcon(_a) {
-    var animationTiming = _a.animationTiming, $variant = _a.$variant;
-    var color = useContext(ThemeContext).color;
-    var initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
-    var expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
-    var initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
-    var outerAnimatedStyles = useAnimatedStyle(function () { return ({
-        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]);
-    var innerAnimatedStyles = useAnimatedStyle(function () { return ({
-        transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
-    }); }, [animationTiming]);
-    var plusAnimatedProps = useAnimatedProps(function () { return ({
-        opacity: 1 - animationTiming.value,
-    }); }, [animationTiming]);
-    var minusAnimatedProps = useAnimatedProps(function () { return ({
-        opacity: animationTiming.value,
-    }); }, [animationTiming]);
-    return (_jsx(Animated.View, { style: [
-            {
-                backgroundColor: color.surface.dim,
-                aspectRatio: 1,
-                alignItems: 'center',
-                justifyContent: 'center',
-            },
-            outerAnimatedStyles,
-        ], 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/esm/components/Accordion/styles.js

@@ -1,37 +0,0 @@
-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 theme = _a.theme, first = _a.first, last = _a.last, isExpanded = _a.isExpanded, $variant = _a.$variant;
-    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(theme.border.width[$variant === 'default' ? 'sm' : 'md']), $variant === 'brand'
-        ? theme.color.brand.brand
-        : theme.color.surface.borderDim, $variant === 'brand'
-        ? theme.color.brand.bright
-        : isExpanded
-            ? theme.color.brand.onBrand
-            : 'transparent', theme.transition.duration.fast, first
-        ? {
-            borderTopLeftRadius: theme.border.radius.md,
-            borderTopRightRadius: theme.border.radius.md,
-        }
-        : null, last
-        ? {
-            borderBottomLeftRadius: theme.border.radius.md,
-            borderBottomRightRadius: theme.border.radius.md,
-            borderBottomWidth: numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
-        }
-        : null);
-});
-export var StyledAccordionHeader = styled.TouchableOpacity(function (_a) {
-    var theme = _a.theme;
-    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(theme.space[500]), numToPx(theme.space[300]));
-});
-export var StyledContainer = styled.View(function (_a) {
-    var theme = _a.theme;
-    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(theme.space[1200]), numToPx(theme.space[600]), numToPx(theme.space[300]));
-});
-var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,101 +0,0 @@
-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 { Image, Pressable, View } from 'react-native';
-import { Action, Button, Heading2, Heading3, Icon, Margin, Stack } from '../';
-import styled, { ThemeContext } from '../../styled.native';
-import { P } from '../P';
-import { IndicatorIconShape } from './IndicatorIconShape';
-var StyledPressableCard = styled.Pressable(function (_a) {
-    var theme = _a.theme, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
-    var paddingVal = inline ? theme.space[400] : theme.space[600];
-    var reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
-    return "\n      border-radius: ".concat(inline ? numToPx(theme.space[600]) : 0, ";\n      background-color: ").concat(inverted ? theme.color.surface.dim : theme.color.surface.bright, ";\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 theme = _a.theme, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
-    var paddingVal = inline ? theme.space[400] : theme.space[600];
-    var reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
-    return "\n      border-radius: ".concat(inline ? numToPx(theme.space[600]) : 0, ";\n      background-color: ").concat(inverted ? theme.color.surface.onSurface : theme.color.surface.bright, ";\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 theme = _a.theme, inverted = _a.inverted;
-    return "\n    color: ".concat(inverted ? theme.color.surface.bright : theme.color.surface.onSurface, ";\n");
-});
-var CloseIconWrapper = styled.View(function (_a) {
-    var theme = _a.theme;
-    return "\n    padding: ".concat(numToPx(theme.space[200]), ";\n    background-color: ").concat(theme.color.surface.bright, ";\n    border-radius: ").concat(numToPx(theme.space[600]), ";\n");
-});
-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 theme = useContext(ThemeContext);
-    var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
-        (onPressIndicator && !onPressActionButton && !onPressCloseButton);
-    var cardAction = hasSingleAction
-        ? onPressActionButton || onPressIndicator
-        : null;
-    var RootContainer = hasSingleAction
-        ? StyledPressableCard
-        : StyledCard;
-    useEffect(function () {
-        if (onMount) {
-            onMount();
-        }
-    }, []);
-    var Heading = inline ? Heading3 : Heading2;
-    var cardPadding = theme.space[inline ? 400 : 600];
-    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: {
-                                        color: inverted
-                                            ? theme.color.surface.bright
-                                            : theme.color.brand.brand,
-                                        paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
-                                    }, testID: "".concat(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, { standalone: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(Button, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
-                            flex: 1,
-                            flexDirection: 'row',
-                            height: '100%',
-                            marginTop: negativeMarginAdjustment,
-                            marginRight: negativeMarginAdjustment,
-                        }, maskElement: _jsx(View, { style: {
-                                width: '100%',
-                                height: 165,
-                                backgroundColor: 'olive',
-                                transform: [
-                                    { rotate: '-16deg' },
-                                    { translateX: 40 },
-                                    { translateY: 25 },
-                                ],
-                            } }), 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 ? (_jsxs(Pressable, { style: {
-                            position: 'absolute',
-                            right: negativeMarginAdjustment,
-                            bottom: negativeMarginAdjustment,
-                        }, onPress: onPressIndicator, testID: "".concat(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 ? (_jsx(Pressable, { style: {
-                    position: 'absolute',
-                    right: theme.space[200],
-                    top: theme.space[200],
-                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] })));
-};

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

@@ -1,11 +0,0 @@
-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 theme = _a.theme, color = _a.color;
-    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : theme.color.brand.brand, "\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" }) }) })] }));
-};

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

@@ -1,11 +0,0 @@
-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 theme = _a.theme, color = _a.color;
-    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : theme.color.brand.brand, "\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" }) }));
-};

package/dist/esm/components/ActionList/ActionList.js

@@ -1,55 +0,0 @@
-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 __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;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, } from 'react';
-import { TouchableOpacity, View, } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import { getValidChildren } from '../../utils';
-import { Badge } from '../Badge';
-import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
-var ActionList = function (_a) {
-    var children = _a.children, inverted = _a.inverted, borderBottom = _a.borderBottom, rest = __rest(_a, ["children", "inverted", "borderBottom"]);
-    var validChildren = getValidChildren(children);
-    var childCount = Children.count(validChildren);
-    return (_jsx(StyledActionList, __assign({}, rest, { children: Children.map(validChildren, function (child, index) {
-            var _a, _b;
-            return cloneElement(child, {
-                fullWidth: true,
-                index: index,
-                hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
-                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
-                inList: true,
-                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
-            });
-        }) })));
-};
-var ActionWrapper = 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, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _e = _a.standalone, standalone = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone"]);
-    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
-});
-var Action = 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, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _e = _a.standalone, standalone = _e === void 0 ? false : _e, _f = _a.badgeVariant, badgeVariant = _f === void 0 ? 'info' : _f, badgeText = _a.badgeText, hint = _a.hint, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint"]);
-    var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
-});
-export { ActionList, Action };

package/dist/esm/components/ActionList/styled.js

@@ -1,57 +0,0 @@
-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 styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-import { HintText } from '../HintText';
-import { Icon } from '../Icon';
-var StyledList = styled.View(function (_a) {
-    var theme = _a.theme, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), numToPx(smallAndUp ? theme.space[300] : theme.space[200]), numToPx(smallAndUp ? theme.space[300] : theme.space[200]));
-});
-export var StyledActionList = styledComponentWithBreakpoints(StyledList);
-export var StyledActionWrapper = styled.View(function (_a) {
-    var theme = _a.theme, hasBorder = _a.hasBorder, inverted = _a.inverted, inList = _a.inList, hint = _a.hint, badgeText = _a.badgeText;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    align-self: flex-start;\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n    padding: ", " 0;\n  "], ["\n    width: 100%;\n    align-self: flex-start;\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n    padding: ", " 0;\n  "])), hasBorder ? numToPx(theme.border.width.sm) : 0, inverted
-        ? theme.color.surface.dim
-        : theme.color.brand.fixed.onBrand, inList && (hint || badgeText) ? numToPx(theme.space[200]) : 0);
-});
-export var StyledActionInner = styled.View(function (_a) {
-    var fullWidth = _a.fullWidth, standalone = _a.standalone;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "], ["\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', standalone ? '' : '44px');
-});
-export var StyledActionText = styled.Text(function (_a) {
-    var theme = _a.theme, smallAndUp = _a.smallAndUp, _b = _a.inverted, inverted = _b === void 0 ? false : _b;
-    var fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted
-        ? theme.color.surface.bright
-        : theme.color.surface.onSurface, theme.native.font.family.bold, numToPx(fontSize), numToPx(theme.font.lineHeight.md.mediaQuery.sm));
-});
-export var StyledActionNodeWrapper = styled.View(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"])));
-export var StyledRightIcon = styled(Icon)(function (_a) {
-    var theme = _a.theme, inverted = _a.inverted;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "])), inverted
-        ? theme.color.surface.bright
-        : theme.color.surface.onSurface, numToPx(theme.space[100]));
-});
-export var StyledLeftIcon = styled(Icon)(function (_a) {
-    var theme = _a.theme, inverted = _a.inverted;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n  "])), inverted
-        ? theme.color.surface.bright
-        : theme.color.surface.onSurface, numToPx(theme.space[100]));
-});
-export var StyledTextWrapper = styled.View(function (_a) {
-    var theme = _a.theme;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    gap: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    gap: ", ";\n  "])), numToPx(theme.space[200]));
-});
-export var StyledHintText = styled(HintText)(function (_a) {
-    var theme = _a.theme, _b = _a.inverted, inverted = _b === void 0 ? false : _b;
-    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), inverted
-        ? theme.color.surface.bright
-        : theme.color.surface.onSurfaceVariant);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;