@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

package/dist/components/index.js

@@ -1,297 +1,78 @@
-import { Accordion as Cr } from "./Accordion/Accordion.js";
-import { AccordionGroup as sr } from "./Accordion/Group.js";
-import { AccordionIcon as gr } from "./Accordion/Icon.js";
-import { ActionCard as Fr } from "./ActionCard/ActionCard.js";
-import { Action as kr, ActionList as Ir } from "./ActionList/ActionList.js";
-import { Badge as Hr } from "./Badge/Badge.js";
-import { Card as Nr } from "./Card/Card.js";
-import { Checkbox as Rr } from "./Checkbox/Checkbox.js";
-import { CheckboxField as Dr } from "./Checkbox/CheckboxField.js";
-import { CTAButton as Er, DestructiveCTAButton as vr, PrimaryCTAButton as Gr, SecondaryCTAButton as Mr } from "./CTAButton/CTAButton.js";
-import { CTALink as Ur, PrimaryCTALink as Wr, SecondaryCTALink as jr } from "./CTALink/CTALink.js";
-import { CurrencyField as zr } from "./CurrencyField/CurrencyField.js";
-import { CurrencyInput as Kr } from "./CurrencyInput/CurrencyInput.js";
-import { DataTable as Vr } from "./DataTable/DataTable.js";
-import { CellText as Yr, RowHeading as Zr, SeparatorRowText as _r, StyledSeparatorRow as $r, StyledTableContainer as ot, TableBody as rt, TableCaption as tt, TableCaptionText as pt, TableCell as mt, TableHeader as it, TableHeaderText as et, TableRow as xt, TableRowHeading as ft } from "./DataTable/styles.js";
-import { DateField as nt } from "./DateField/DateField.js";
-import { DescriptionItem as dt, DescriptionList as Tt } from "./DescriptionList/DescriptionList.js";
-import { Disclosure as ut } from "./Disclosure/Disclosure.js";
-import { Divider as bt } from "./Divider/Divider.js";
-import { Em as St } from "./Em/Em.js";
-import { EmailField as At } from "./EmailField/EmailField.js";
-import { EmailInput as Lt } from "./EmailInput/EmailInput.js";
-import { ErrorSummaryNotification as It } from "./ErrorSummaryNotification/ErrorSummaryNotification.js";
-import { Field as Ht } from "./Field/Field.js";
-import { FilterSelect as Nt } from "./FilterSelect/FilterSelect.js";
-import { Row as Rt } from "./Grid/Row.js";
-import { Col as Dt } from "./Grid/Col.js";
-import { Heading1 as Et } from "./Heading1/Heading1.js";
-import { Heading2 as Gt } from "./Heading2/Heading2.js";
-import { Heading3 as Ot } from "./Heading3/Heading3.js";
-import { Heading4 as Wt } from "./Heading4/Heading4.js";
-import { Icon as qt } from "./Icon/Icon.js";
-import { Label as Jt } from "./Label/Label.js";
-import { Lead as Qt } from "./Lead/Lead.js";
-import { LineThrough as Xt } from "./LineThrough/LineThrough.js";
-import { Li as Zt, Ol as _t, Ul as $t } from "./List/List.js";
-import { Margin as rp } from "./Margin/Margin.js";
-import { NavHeader as pp } from "./NavHeader/NavHeader.js";
-import { ErrorNotification as ip, InfoNotification as ep, Notification as xp, SuccessNotification as fp, WarningNotification as ap } from "./Notification/Notification.js";
-import { NumberField as lp } from "./NumberField/NumberField.js";
-import { NumberInput as Tp } from "./NumberInput/NumberInput.js";
-import { P as up } from "./P/P.js";
-import { PasswordField as bp } from "./PasswordField/PasswordField.js";
-import { PasswordInput as Sp } from "./PasswordInput/PasswordInput.js";
-import { PhoneField as Ap } from "./PhoneField/PhoneField.js";
-import { PhoneInput as Lp } from "./PhoneInput/PhoneInput.js";
-import { Radio as Ip } from "./Radio/Radio.js";
-import { RadioField as Hp } from "./Radio/RadioField.js";
-import { SelectField as Np } from "./SelectField/SelectField.js";
-import { SkeletonCircle as Rp } from "./SkeletonCircle/SkeletonCircle.js";
-import { SkeletonCTA as Dp } from "./SkeletonCTA/SkeletonCTA.js";
-import { SkeletonHeading as Ep } from "./SkeletonHeading/SkeletonHeading.js";
-import { SkeletonText as Gp } from "./SkeletonText/SkeletonText.js";
-import { Small as Op } from "./Small/Small.js";
-import { Spinner as Wp } from "./Spinner/Spinner.js";
-import { Stack as qp } from "./Stack/Stack.js";
-import { Strong as Jp } from "./Strong/Strong.js";
-import { Tabs as Qp } from "./Tabs/Tabs.js";
-import { Tab as Xp } from "./Tabs/Tab.js";
-import { TabList as Zp } from "./Tabs/TabList.js";
-import { TabPanel as $p } from "./Tabs/TabPanel.js";
-import { TextareaField as rm } from "./TextareaField/TextareaField.js";
-import { TextareaInput as pm } from "./TextareaInput/TextareaInput.js";
-import { TextField as im } from "./TextField/TextField.js";
-import { TextGroup as xm } from "./TextGroup/TextGroup.js";
-import { TextInput as am } from "./TextInput/TextInput.js";
-import { TextLink as lm } from "./TextLink/TextLink.js";
-import { Toggle as Tm } from "./Toggle/Toggle.js";
-import { ToastsContainer as um, showToast as Cm } from "./Toast/Toast.js";
-import { ProductCarousel as sm } from "./ProductCarousel/ProductCarousel.js";
-import { RadioCard as gm } from "./RadioCard/RadioCard.js";
-import { FormGroup as Fm } from "./FormGroup/FormGroup.js";
-import { ErrorText as km } from "./ErrorText/ErrorText.js";
-import { LabelText as ym } from "./LabelText/LabelText.js";
-import "react/jsx-runtime";
-import "react";
-import "react-native-reanimated";
-import "../hooks/use-layout.js";
-import "../styled.native-KEscfVp7.js";
-import "./Accordion/styles.js";
-import "../utils-HsZygzDh.js";
-import "../hooks/use-breakpoint.js";
-import "react-native";
-import "react-native-svg";
-import "@react-native-masked-view/masked-view";
-import "./HintText/HintText.js";
-import "../utils/utils.js";
-import "./DescriptionList/styled.js";
-import "./List/styled.js";
-import "./NavHeader/NavHeader.styles.js";
-import "./SelectField/Select.js";
-import "../providers/IconsProvider.js";
-import "../providers/icons/Address.js";
-import "../providers/icons/Advice.js";
-import "../providers/icons/Archive.js";
-import "../providers/icons/ArrowDown.js";
-import "../providers/icons/ArrowLeft.js";
-import "../providers/icons/ArrowRight.js";
-import "../providers/icons/ArrowUp.js";
-import "../providers/icons/Award.js";
-import "../providers/icons/Battery.js";
-import "../providers/icons/Cal.js";
-import "../providers/icons/CalBook.js";
-import "../providers/icons/CaretDown.js";
-import "../providers/icons/CaretLeft.js";
-import "../providers/icons/CaretRight.js";
-import "../providers/icons/CaretUp.js";
-import "../providers/icons/Chart.js";
-import "../providers/icons/ChartFilled.js";
-import "../providers/icons/Check.js";
-import "../providers/icons/CheckCircle.js";
-import "../providers/icons/ChevronDown.js";
-import "../providers/icons/ChevronLeft.js";
-import "../providers/icons/ChevronLeftSmall.js";
-import "../providers/icons/ChevronLeftSmallFirst.js";
-import "../providers/icons/ChevronRight.js";
-import "../providers/icons/ChevronRightSmall.js";
-import "../providers/icons/ChevronRightSmallLast.js";
-import "../providers/icons/ChevronUp.js";
-import "../providers/icons/Circle.js";
-import "../providers/icons/CloseCircle.js";
-import "../providers/icons/Cross.js";
-import "../providers/icons/Doc.js";
-import "../providers/icons/Dollar.js";
-import "../providers/icons/Download.js";
-import "../providers/icons/Eco.js";
-import "../providers/icons/EcoHome.js";
-import "../providers/icons/Edit.js";
-import "../providers/icons/ElectricCar.js";
-import "../providers/icons/ElectricHome.js";
-import "../providers/icons/Electricity.js";
-import "../providers/icons/EnergyAdvice.js";
-import "../providers/icons/Equals.js";
-import "../providers/icons/Euro.js";
-import "../providers/icons/Gas.js";
-import "../providers/icons/GlobeAddress.js";
-import "../providers/icons/Help.js";
-import "../providers/icons/Hide.js";
-import "../providers/icons/Home.js";
-import "../providers/icons/HomeFilled.js";
-import "../providers/icons/HydroPower.js";
-import "../providers/icons/Info.js";
-import "../providers/icons/Link.js";
-import "../providers/icons/Logo.js";
-import "../providers/icons/Mail.js";
-import "../providers/icons/MailOpen.js";
-import "../providers/icons/Menu.js";
-import "../providers/icons/Message.js";
-import "../providers/icons/MessageFilled.js";
-import "../providers/icons/Minus.js";
-import "../providers/icons/Mobile.js";
-import "../providers/icons/NewWindow.js";
-import "../providers/icons/PaymentCard.js";
-import "../providers/icons/Phone.js";
-import "../providers/icons/Plus.js";
-import "../providers/icons/Pound.js";
-import "../providers/icons/Pricing.js";
-import "../providers/icons/Search.js";
-import "../providers/icons/Security.js";
-import "../providers/icons/Show.js";
-import "../providers/icons/SmartHome.js";
-import "../providers/icons/SmartMeter.js";
-import "../providers/icons/Solar.js";
-import "../providers/icons/Star.js";
-import "../providers/icons/Sun.js";
-import "../providers/icons/Torch.js";
-import "../providers/icons/Trees.js";
-import "../providers/icons/Tune.js";
-import "../providers/icons/User.js";
-import "../providers/icons/UserFilled.js";
-import "../providers/icons/Wallet.js";
-import "../providers/icons/WalletFilled.js";
-import "../providers/icons/WarmHome.js";
-import "../providers/icons/Warning.js";
-import "../providers/icons/WebAddress.js";
-import "../providers/icons/WindPower.js";
-import "./ActionCard/CloseIconShape.js";
-import "./ActionCard/IndicatorIconShape.js";
-import "./ActionList/styled.js";
-import "./Stretch/Stretch.js";
-import "./Input/Input.js";
-import "./DataTable/TableRow.js";
-import "../hooks/use-full-width.js";
-import "./SubLabelText/SubLabelText.js";
-import "./PasswordInput/PasswordVisibilityToggle.js";
-import "./PasswordInput/PasswordInput.styled.js";
-import "./SkeletonAnimation/SkeletonAnimation.js";
-import "./Toggle/styles.js";
-import "react-native-safe-area-context";
-import "react-native-gesture-handler";
-import "./ProductCarousel/NavigationDots.js";
-import "./ProductCarousel/anchor-point.js";
-import "styled-components";
-import "../theme-web-MrdqV6Ln.js";
-import "./NavHeader/IconButton.js";
-export {
-  Cr as Accordion,
-  sr as AccordionGroup,
-  gr as AccordionIcon,
-  kr as Action,
-  Fr as ActionCard,
-  Ir as ActionList,
-  Hr as Badge,
-  Er as CTAButton,
-  Ur as CTALink,
-  Nr as Card,
-  Yr as CellText,
-  Rr as Checkbox,
-  Dr as CheckboxField,
-  Dt as Col,
-  zr as CurrencyField,
-  Kr as CurrencyInput,
-  Vr as DataTable,
-  nt as DateField,
-  dt as DescriptionItem,
-  Tt as DescriptionList,
-  vr as DestructiveCTAButton,
-  ut as Disclosure,
-  bt as Divider,
-  St as Em,
-  At as EmailField,
-  Lt as EmailInput,
-  ip as ErrorNotification,
-  It as ErrorSummaryNotification,
-  km as ErrorText,
-  Ht as Field,
-  Nt as FilterSelect,
-  Fm as FormGroup,
-  Et as Heading1,
-  Gt as Heading2,
-  Ot as Heading3,
-  Wt as Heading4,
-  qt as Icon,
-  ep as InfoNotification,
-  Jt as Label,
-  ym as LabelText,
-  Qt as Lead,
-  Zt as Li,
-  Xt as LineThrough,
-  rp as Margin,
-  pp as NavHeader,
-  xp as Notification,
-  lp as NumberField,
-  Tp as NumberInput,
-  _t as Ol,
-  up as P,
-  bp as PasswordField,
-  Sp as PasswordInput,
-  Ap as PhoneField,
-  Lp as PhoneInput,
-  Gr as PrimaryCTAButton,
-  Wr as PrimaryCTALink,
-  sm as ProductCarousel,
-  Ip as Radio,
-  gm as RadioCard,
-  Hp as RadioField,
-  Rt as Row,
-  Zr as RowHeading,
-  Mr as SecondaryCTAButton,
-  jr as SecondaryCTALink,
-  Np as SelectField,
-  _r as SeparatorRowText,
-  Dp as SkeletonCTA,
-  Rp as SkeletonCircle,
-  Ep as SkeletonHeading,
-  Gp as SkeletonText,
-  Op as Small,
-  Wp as Spinner,
-  qp as Stack,
-  Jp as Strong,
-  $r as StyledSeparatorRow,
-  ot as StyledTableContainer,
-  fp as SuccessNotification,
-  Xp as Tab,
-  Zp as TabList,
-  $p as TabPanel,
-  rt as TableBody,
-  tt as TableCaption,
-  pt as TableCaptionText,
-  mt as TableCell,
-  it as TableHeader,
-  et as TableHeaderText,
-  xt as TableRow,
-  ft as TableRowHeading,
-  Qp as Tabs,
-  im as TextField,
-  xm as TextGroup,
-  am as TextInput,
-  lm as TextLink,
-  rm as TextareaField,
-  pm as TextareaInput,
-  um as ToastsContainer,
-  Tm as Toggle,
-  $t as Ul,
-  ap as WarningNotification,
-  Cm as showToast
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Accordion"), exports);
+__exportStar(require("./ActionCard"), exports);
+__exportStar(require("./ActionList"), exports);
+__exportStar(require("./Badge"), exports);
+__exportStar(require("./Card"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./CTAButton"), exports);
+__exportStar(require("./CTALink"), exports);
+__exportStar(require("./CurrencyField"), exports);
+__exportStar(require("./CurrencyInput"), exports);
+__exportStar(require("./DataTable"), exports);
+__exportStar(require("./DateField"), exports);
+__exportStar(require("./DescriptionList"), exports);
+__exportStar(require("./Disclosure"), exports);
+__exportStar(require("./Divider"), exports);
+__exportStar(require("./Em"), exports);
+__exportStar(require("./EmailField"), exports);
+__exportStar(require("./EmailInput"), exports);
+__exportStar(require("./ErrorSummaryNotification"), exports);
+__exportStar(require("./Field"), exports);
+__exportStar(require("./FilterSelect"), exports);
+__exportStar(require("./Grid"), exports);
+__exportStar(require("./Heading1"), exports);
+__exportStar(require("./Heading2"), exports);
+__exportStar(require("./Heading3"), exports);
+__exportStar(require("./Heading4"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./Label"), exports);
+__exportStar(require("./Lead"), exports);
+__exportStar(require("./LineThrough"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./Margin"), exports);
+__exportStar(require("./NavHeader"), exports);
+__exportStar(require("./Notification"), exports);
+__exportStar(require("./NumberField"), exports);
+__exportStar(require("./NumberInput"), exports);
+__exportStar(require("./P"), exports);
+__exportStar(require("./PasswordField"), exports);
+__exportStar(require("./PasswordInput"), exports);
+__exportStar(require("./PhoneField"), exports);
+__exportStar(require("./PhoneInput"), exports);
+__exportStar(require("./Radio"), exports);
+__exportStar(require("./SelectField"), exports);
+__exportStar(require("./SkeletonCircle"), exports);
+__exportStar(require("./SkeletonCTA"), exports);
+__exportStar(require("./SkeletonHeading"), exports);
+__exportStar(require("./SkeletonText"), exports);
+__exportStar(require("./Small"), exports);
+__exportStar(require("./Spinner"), exports);
+__exportStar(require("./Stack"), exports);
+__exportStar(require("./Strong"), exports);
+__exportStar(require("./Tabs"), exports);
+__exportStar(require("./TextareaField"), exports);
+__exportStar(require("./TextareaInput"), exports);
+__exportStar(require("./TextField"), exports);
+__exportStar(require("./TextGroup"), exports);
+__exportStar(require("./TextInput"), exports);
+__exportStar(require("./TextLink"), exports);
+__exportStar(require("./Toggle"), exports);
+__exportStar(require("./Toast"), exports);
+__exportStar(require("./ProductCarousel"), exports);
+__exportStar(require("./RadioCard"), exports);

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

@@ -0,0 +1,106 @@
+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 '../Heading4';
+import { AccordionGroupContext } from './Group';
+import { AccordionIcon } from './Icon';
+import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
+export function withAnimated(WrappedComponent) {
+    var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    // 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;
+    var _c = useContext(ThemeContext), core = _c.core, semantic = _c.semantic;
+    var Header = useContext(AccordionGroupContext).Header;
+    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4;
+    var AnimatedHeading = useMemo(function () { return withAnimated(AccordionHeading); }, [AccordionHeading]);
+    var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
+    var _e = useState(expanded), open = _e[0], setOpen = _e[1];
+    var handleHeightContent = useMemo(function () { return layout.height || 100; }, [layout.height]);
+    var size = useSharedValue(handleHeightContent);
+    useEffect(function () {
+        runOnUI(function () {
+            'worklet';
+            if (expanded && handleHeightContent) {
+                size.value = handleHeightContent;
+            }
+        })();
+    }, [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], [semantic.message.branded, semantic.message.base]),
+    }); }, [progress]);
+    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
+                            headerStyle,
+                            {
+                                paddingTop: core.space[1],
+                                paddingRight: core.space[3],
+                                marginTop: 0,
+                                marginBottom: 0,
+                                flexShrink: 1,
+                            },
+                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
+};

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,35 @@
+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;
+    var _b = useContext(ThemeContext), core = _b.core, semantic = _b.semantic;
+    var outerAnimatedStyles = useAnimatedStyle(function () { return ({
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
+        height: 36 - animationTiming.value * 4,
+        margin: 2 * animationTiming.value,
+        transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
+    }); }, [animationTiming]);
+    var innerAnimatedStyles = useAnimatedStyle(function () { return ({
+        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: semantic.surface.cutout,
+                aspectRatio: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+            outerAnimatedStyles,
+        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "16", height: "16", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: semantic.message.secondary }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })] }) }) }));
+}

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

@@ -0,0 +1,3 @@
+export { Accordion } from './Accordion';
+export { AccordionGroup } from './Group';
+export { AccordionIcon } from './Icon';

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

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

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

@@ -0,0 +1,77 @@
+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, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../';
+import styled, { ThemeContext } from '../../styled.native';
+import { P } from '../P';
+import { CloseIconShape } from './CloseIconShape';
+import { IndicatorIconShape } from './IndicatorIconShape';
+var StyledCard = styled.Pressable(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? core.space[4] : core.space[6];
+    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return "\n      border-radius: ".concat(inline ? numToPx(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+});
+var StyledP = styled(P)(function (_a) {
+    var semantic = _a.theme.semantic, inverted = _a.inverted;
+    return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
+});
+export var ActionCard = function (_a) {
+    var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? true : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
+    var _e = useContext(ThemeContext), core = _e.core, semantic = _e.semantic;
+    useEffect(function () {
+        if (onMount) {
+            onMount();
+        }
+    }, []);
+    var Heading = inline ? Heading3 : Heading2;
+    var cardPadding = core.space[inline ? 4 : 6];
+    var negativeMarginAdjustment = -cardPadding;
+    return (_jsx(StyledCard, { onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: _jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+                                    color: inverted
+                                        ? semantic.inverted.message.link
+                                        : semantic.message.branded,
+                                    paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
+                                }, testID: "".concat(testID, "-heading"), children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
+                                            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, { inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: "chevron-right-small", children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, 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: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null, onPressCloseButton && !onPressIndicator ? (_jsxs(Pressable, { style: {
+                        position: 'absolute',
+                        right: negativeMarginAdjustment,
+                        top: negativeMarginAdjustment,
+                    }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: [_jsx(CloseIconShape, {}), _jsx(Icon, { size: 14, style: {
+                                position: 'absolute',
+                                top: inline ? 14 : 12,
+                                right: inline ? 14 : 12,
+                            }, color: semantic.surface.elevated, name: "cross", accessibilityLabel: "close" })] })) : null] }) }));
+};