@ovotech/element-native 3.8.1 → 4.0.0-canary-f95ccc0-247

package/components/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "main": "../dist/components/index.js",
+  "module": "../dist/esm/components/index.js",
+  "types": "../dist/components/index.d.ts"
+}

package/dist/components/Accordion/Accordion.d.ts

@@ -1,5 +1,4 @@
-import { ComponentClass, ComponentType } from 'react';
-import { AnimateProps } from 'react-native-reanimated';
+import { ComponentType } from 'react';
 import { AccordionProps } from './types';
-export declare function withAnimated<T extends object>(WrappedComponent: ComponentType<T>): ComponentClass<AnimateProps<T>>;
+export declare function withAnimated<T extends object>(WrappedComponent: ComponentType<T>): any;
 export declare const Accordion: ({ expanded, first, last, title, children, onToggle, }: AccordionProps) => JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -1,101 +1,134 @@
-import { jsx as s, jsxs as g } from "react/jsx-runtime";
-import { Component as V, useContext as A, useMemo as d, useState as j, useEffect as S, useCallback as D } from "react";
-import x, { useSharedValue as E, runOnUI as l, useDerivedValue as L, withTiming as z, useAnimatedStyle as v, interpolateColor as B } from "react-native-reanimated";
-import { useLayout as G } from "../../hooks/use-layout.js";
-import { T as M } from "../../styled.native-KEscfVp7.js";
-import { Heading4 as P } from "../Heading4/Heading4.js";
-import { AccordionGroupContext as R } from "./Group.js";
-import { AccordionIcon as U } from "./Icon.js";
-import { StyledAccordion as $, StyledAccordionHeader as q, StyledContainer as F } from "./styles.js";
-import "../../utils-HsZygzDh.js";
-import "../../hooks/use-breakpoint.js";
-import "react-native";
-import "react-native-svg";
-function J(o) {
-  const a = o.displayName || o.name || "Component", n = class n extends V {
-    render() {
-      return /* @__PURE__ */ s(o, { ...this.props });
+"use strict";
+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);
+};
+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]; } };
     }
-  };
-  n.displayName = `WithAnimated(${a})`;
-  let i = n;
-  return x.createAnimatedComponent(i);
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = exports.withAnimated = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var use_layout_1 = require("../../hooks/use-layout");
+var styled_native_1 = require("../../styled.native");
+var Heading4_1 = require("../Heading4");
+var Group_1 = require("./Group");
+var Icon_1 = require("./Icon");
+var styles_1 = require("./styles");
+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 (0, jsx_runtime_1.jsx)(WrappedComponent, __assign({}, this.props));
+        };
+        WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
+        return WithAnimated;
+    }(react_1.Component));
+    return react_native_reanimated_1.default.createAnimatedComponent(WithAnimated);
 }
-const se = ({
-  expanded: o = !1,
-  first: a,
-  last: i,
-  title: n,
-  children: C,
-  onToggle: c
-}) => {
-  const { core: p, semantic: u } = A(M), { Header: w } = A(R), h = w ?? P, H = d(
-    () => J(h),
-    [h]
-  ), [f, k] = G(0), [r, b] = j(o), e = d(
-    () => f.height || 100,
-    [f.height]
-  ), t = E(e);
-  S(() => {
-    l(() => {
-      "worklet";
-      o && e && (t.value = e);
-    })();
-  }, [e, o, t]), S(() => {
-    l(() => {
-      "worklet";
-      e && (t.value = e);
-    })();
-  }, [e, t]);
-  const m = L(() => z(r ? 1 : 0)), y = v(() => ({
-    height: t.value * m.value + 1
-  })), I = D(() => {
-    c == null || c(!r), t.value === 0 && l(() => {
-      "worklet";
-      t.value = e;
-    })(), b((T) => !T);
-  }, [e, r, t]), N = d(
-    () => [{ overflow: "hidden" }, y],
-    [y]
-  ), O = v(() => ({
-    color: B(
-      m.value,
-      [0, 1],
-      [u.message.branded, u.message.base]
-    )
-  }));
-  return /* @__PURE__ */ g($, { first: a, last: i, isExpanded: r, children: [
-    /* @__PURE__ */ g(
-      q,
-      {
-        accessibilityState: { expanded: r },
-        onPress: I,
-        testID: "accordionTitle",
-        children: [
-          /* @__PURE__ */ s(
-            H,
-            {
-              style: [
-                O,
-                {
-                  paddingTop: p.space[1],
-                  paddingRight: p.space[3],
-                  marginTop: 0,
-                  marginBottom: 0,
-                  flexShrink: 1
-                }
-              ],
-              children: n
+exports.withAnimated = withAnimated;
+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 = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _c.core, semantic = _c.semantic;
+    var Header = (0, react_1.useContext)(Group_1.AccordionGroupContext).Header;
+    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4_1.Heading4;
+    var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(AccordionHeading); }, [AccordionHeading]);
+    var _d = (0, use_layout_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
+    var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
+    var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [layout.height]);
+    var size = (0, react_native_reanimated_1.useSharedValue)(handleHeightContent);
+    (0, react_1.useEffect)(function () {
+        (0, react_native_reanimated_1.runOnUI)(function () {
+            'worklet';
+            if (expanded && handleHeightContent) {
+                size.value = handleHeightContent;
             }
-          ),
-          /* @__PURE__ */ s(U, { animationTiming: m })
-        ]
-      }
-    ),
-    /* @__PURE__ */ s(x.View, { style: N, children: /* @__PURE__ */ s(F, { onLayout: k, children: C }) })
-  ] });
-};
-export {
-  se as Accordion,
-  J as withAnimated
+        })();
+    }, [handleHeightContent, expanded, size]);
+    (0, react_1.useEffect)(function () {
+        (0, react_native_reanimated_1.runOnUI)(function () {
+            'worklet';
+            if (handleHeightContent) {
+                size.value = handleHeightContent;
+            }
+        })();
+    }, [handleHeightContent, size]);
+    var progress = (0, react_native_reanimated_1.useDerivedValue)(function () { return (0, react_native_reanimated_1.withTiming)(open ? 1 : 0); });
+    var style = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        height: size.value * progress.value + 1,
+    }); }, [progress, size]);
+    var toggleOpen = (0, react_1.useCallback)(function () {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+        if (size.value === 0) {
+            (0, react_native_reanimated_1.runOnUI)(function () {
+                'worklet';
+                size.value = handleHeightContent;
+            })();
+        }
+        setOpen(function (o) { return !o; });
+    }, [handleHeightContent, open, size]);
+    var containerAnimatedStyle = (0, react_1.useMemo)(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
+    var headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
+    }); }, [progress]);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, { first: first, last: last, isExpanded: open, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, { style: [
+                            headerStyle,
+                            {
+                                paddingTop: core.space[1],
+                                paddingRight: core.space[3],
+                                marginTop: 0,
+                                marginBottom: 0,
+                                flexShrink: 1,
+                            },
+                        ], children: title }), (0, jsx_runtime_1.jsx)(Icon_1.AccordionIcon, { animationTiming: progress })] }), (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 }) })] }));
 };
+exports.Accordion = Accordion;

package/dist/components/Accordion/Group.js

@@ -1,22 +1,22 @@
-import { jsx as t } from "react/jsx-runtime";
-import { createContext as m, Children as n, isValidElement as d, cloneElement as a } from "react";
-import { View as l } from "react-native";
-const p = m({
-  Header: void 0
-}), x = ({
-  children: r,
-  headingComponent: i
-}) => {
-  const c = n.count(r);
-  return /* @__PURE__ */ t(p.Provider, { value: { Header: i }, children: /* @__PURE__ */ t(l, { children: n.map(
-    r,
-    (o, e) => d(o) ? a(o, {
-      first: e === 0,
-      last: e === c - 1
-    }) : o
-  ) }) });
-};
-export {
-  x as AccordionGroup,
-  p as AccordionGroupContext
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionGroup = exports.AccordionGroupContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+exports.AccordionGroupContext = (0, react_1.createContext)({
+    Header: undefined,
+});
+var AccordionGroup = function (_a) {
+    var children = _a.children, headingComponent = _a.headingComponent;
+    var 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, function (child, i) {
+                return (0, react_1.isValidElement)(child)
+                    ? (0, react_1.cloneElement)(child, {
+                        first: i === 0,
+                        last: i === childCount - 1,
+                    })
+                    : child;
+            }) }) }));
 };
+exports.AccordionGroup = AccordionGroup;

package/dist/components/Accordion/Icon.js

@@ -1,61 +1,62 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { useContext as f } from "react";
-import r, { useAnimatedStyle as s, interpolateColor as h, useAnimatedProps as a } from "react-native-reanimated";
-import { Path as A, Svg as V } from "react-native-svg";
-import { T as v } from "../../styled.native-KEscfVp7.js";
-const c = 105, n = r.createAnimatedComponent(A);
-function g({
-  animationTiming: e
-}) {
-  const { core: d, semantic: t } = f(v), l = s(() => ({
-    backgroundColor: h(
-      e.value,
-      [0, 1],
-      [t.surface.cutout, t.message.branded]
-    ),
-    height: 36 - e.value * 4,
-    margin: 2 * e.value,
-    transform: [{ rotateZ: e.value * -c + "deg" }]
-  })), u = s(() => ({
-    transform: [{ rotateZ: e.value * c + "deg" }]
-  })), m = a(() => ({
-    opacity: 1 - e.value
-  })), p = a(() => ({
-    opacity: e.value
-  }));
-  return /* @__PURE__ */ o(
-    r.View,
-    {
-      style: [
-        {
-          backgroundColor: t.surface.cutout,
-          aspectRatio: 1,
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        l
-      ],
-      children: /* @__PURE__ */ o(r.View, { style: u, children: /* @__PURE__ */ i(V, { width: "16", height: "16", viewBox: "0 0 16 16", children: [
-        /* @__PURE__ */ o(
-          n,
-          {
-            animatedProps: m,
-            d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z",
-            fill: t.message.secondary
-          }
-        ),
-        /* @__PURE__ */ o(
-          n,
-          {
-            animatedProps: p,
-            d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z",
-            fill: d.color.brand.white
-          }
-        )
-      ] }) })
+"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]; } };
     }
-  );
-}
-export {
-  g as AccordionIcon
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionIcon = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var react_native_svg_1 = require("react-native-svg");
+var styled_native_1 = require("../../styled.native");
+var OVO_LOGO_ANGLE = 105;
+var AnimatedPath = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Path);
+function AccordionIcon(_a) {
+    var animationTiming = _a.animationTiming;
+    var _b = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _b.core, semantic = _b.semantic;
+    var outerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        backgroundColor: (0, react_native_reanimated_1.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 = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
+    }); }, [animationTiming]);
+    var plusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(function () { return ({
+        opacity: 1 - animationTiming.value,
+    }); }, [animationTiming]);
+    var minusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(function () { return ({
+        opacity: animationTiming.value,
+    }); }, [animationTiming]);
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+            {
+                backgroundColor: semantic.surface.cutout,
+                aspectRatio: 1,
+                alignItems: 'center',
+                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: "16", height: "16", 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: semantic.message.secondary }), (0, jsx_runtime_1.jsx)(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })] }) }) }));
+}
+exports.AccordionIcon = AccordionIcon;

package/dist/components/Accordion/index.d.ts

@@ -1,4 +1,4 @@
 export { Accordion } from './Accordion';
 export { AccordionGroup } from './Group';
 export { AccordionIcon } from './Icon';
-export { type AccordionProps } from './types';
+export { AccordionProps } from './types';

package/dist/components/Accordion/index.js

@@ -1,19 +1,9 @@
-import { Accordion as u } from "./Accordion.js";
-import { AccordionGroup as I } from "./Group.js";
-import { AccordionIcon as b } from "./Icon.js";
-import "react/jsx-runtime";
-import "react";
-import "react-native-reanimated";
-import "../../hooks/use-layout.js";
-import "../../styled.native-KEscfVp7.js";
-import "../Heading4/Heading4.js";
-import "../../utils-HsZygzDh.js";
-import "../../hooks/use-breakpoint.js";
-import "react-native";
-import "./styles.js";
-import "react-native-svg";
-export {
-  u as Accordion,
-  I as AccordionGroup,
-  b as AccordionIcon
-};
+"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; } });

package/dist/components/Accordion/styles.d.ts

@@ -1,5 +1,5 @@
-import Animated from 'react-native-reanimated';
-export declare const StyledAccordion: import("styled-components").StyledComponent<typeof Animated.View, {
+/// <reference types="react" />
+export declare const StyledAccordion: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").ViewProps>, any>, {
     core: {
         color: {
             brand: {
@@ -358,6 +358,8 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -368,6 +370,8 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -378,6 +382,8 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {
@@ -841,6 +847,8 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -851,6 +859,8 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -861,6 +871,8 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {
@@ -1320,6 +1332,8 @@ export declare const StyledContainer: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -1330,6 +1344,8 @@ export declare const StyledContainer: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -1340,6 +1356,8 @@ export declare const StyledContainer: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {

package/dist/components/Accordion/styles.js

@@ -1,51 +1,60 @@
-import { n as o } from "../../utils-HsZygzDh.js";
-import n from "react-native-reanimated";
-import { s as i, c as a } from "../../styled.native-KEscfVp7.js";
-import "react";
-const g = i(n.View)(
-  ({ theme: { semantic: t, core: d }, first: r, last: e, isExpanded: s }) => a`
-    width: 100%;
-    border-width: ${o(d.borderWidth.small)};
-    border-color: ${t.border.differentiated};
-    border-bottom-width: 0;
-    background-color: ${s ? d.color.brand.white : "transparent"};
-    transition: background-color ${d.transition.fast};
-
-    ${r ? {
-    borderTopLeftRadius: d.radius.small,
-    borderTopRightRadius: d.radius.small
-  } : null}
-
-    ${e ? {
-    borderBottomLeftRadius: d.radius.small,
-    borderBottomRightRadius: d.radius.small,
-    borderBottomWidth: d.borderWidth.small
-  } : null}
-  `
-), h = i.TouchableOpacity(
-  ({ theme: { core: t } }) => a`
-    padding-top: ${o(t.space[5])};
-    padding-left: ${o(t.space[3])};
-    padding-right: 18px;
-    padding-bottom: 18px;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-  `
-), u = i.View(
-  ({ theme: { core: t } }) => a`
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding-top: 0;
-    padding-right: ${o(t.space[12])};
-    padding-bottom: ${o(t.space[6])};
-    padding-left: ${o(t.space[3])};
-  `
-);
-export {
-  g as StyledAccordion,
-  h as StyledAccordionHeader,
-  u as StyledContainer
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledContainer = exports.StyledAccordionHeader = exports.StyledAccordion = void 0;
+var element_core_1 = require("@ovotech/element-core");
+var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+exports.StyledAccordion = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last, isExpanded = _a.isExpanded;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
+        ? {
+            borderTopLeftRadius: core.radius.small,
+            borderTopRightRadius: core.radius.small,
+        }
+        : null, last
+        ? {
+            borderBottomLeftRadius: core.radius.small,
+            borderBottomRightRadius: core.radius.small,
+            borderBottomWidth: core.borderWidth.small,
+        }
+        : null);
+});
+exports.StyledAccordionHeader = styled_native_1.default.TouchableOpacity(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), (0, element_core_1.numToPx)(core.space[5]), (0, element_core_1.numToPx)(core.space[3]));
+});
+exports.StyledContainer = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[12]), (0, element_core_1.numToPx)(core.space[6]), (0, element_core_1.numToPx)(core.space[3]));
+});
+var templateObject_1, templateObject_2, templateObject_3;