@ovotech/element-native 5.2.1-canary-30af367-394 → 5.2.1-canary-e6fee14-396

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

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

package/dist/components/Accordion/Accordion.js

@@ -1,129 +1,62 @@
-"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]; } };
-    }
-    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 Heading_1 = require("../Heading");
-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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useLayout } from '../../hooks/use-layout';
+import { useTheme } from '../../styled.native';
+import { Heading4 } from '../Heading';
+import { AccordionGroupContext } from './Group';
+import { AccordionIcon } from './Icon';
+import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
+export function withAnimated(WrappedComponent) {
+    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
-    var WithAnimated = /** @class */ (function (_super) {
-        __extends(WithAnimated, _super);
-        function WithAnimated() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    class WithAnimated extends Component {
+        render() {
+            return _jsx(WrappedComponent, { ...this.props });
         }
-        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);
+    }
+    WithAnimated.displayName = `WithAnimated(${displayName})`;
+    // @ts-ignore
+    return Animated.createAnimatedComponent(WithAnimated);
 }
-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, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
-    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
-    var Header = (0, react_1.useContext)(Group_1.AccordionGroupContext).Header;
-    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading_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 initialHeadingColor = variant === 'default'
+export const Accordion = ({ expanded = false, first, last, title, children, onToggle, variant = 'default', }) => {
+    const theme = useTheme();
+    const { Header } = useContext(AccordionGroupContext);
+    const AccordionHeading = Header ?? Heading4;
+    const AnimatedHeading = useMemo(() => withAnimated(AccordionHeading), [AccordionHeading]);
+    const [layout, onLayout] = useLayout(0);
+    const [open, setOpen] = useState(expanded);
+    const initialHeadingColor = variant === 'default'
         ? theme.color.brand.brand
         : theme.color.surface.onSurface;
-    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;
-            }
-        })();
+    const handleHeightContent = useMemo(() => layout.height || 100, [layout.height]);
+    const size = useSharedValue(handleHeightContent);
+    useEffect(() => {
+        if (expanded && handleHeightContent) {
+            size.value = handleHeightContent;
+        }
     }, [handleHeightContent, expanded, size]);
-    (0, react_1.useEffect)(function () {
-        (0, react_native_reanimated_1.runOnUI)(function () {
-            'worklet';
-            if (handleHeightContent) {
-                size.value = handleHeightContent;
-            }
-        })();
+    useEffect(() => {
+        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 ({
+    const progress = useDerivedValue(() => withTiming(open ? 1 : 0));
+    const style = useAnimatedStyle(() => ({
         height: size.value * progress.value + 1,
-    }); }, [progress, size]);
-    var toggleOpen = (0, react_1.useCallback)(function () {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+    }), [progress, size]);
+    const toggleOpen = useCallback(() => {
+        onToggle?.(!open);
         if (size.value === 0) {
-            (0, react_native_reanimated_1.runOnUI)(function () {
-                'worklet';
-                size.value = handleHeightContent;
-            })();
+            size.value = handleHeightContent;
         }
-        setOpen(function (o) { return !o; });
+        setOpen(o => !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], [initialHeadingColor, theme.color.surface.onSurface]),
-    }); }, [progress]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, { style: [
+    const containerAnimatedStyle = useMemo(() => [{ overflow: 'hidden' }, style], [style]);
+    const headerStyle = useAnimatedStyle(() => ({
+        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],
@@ -131,6 +64,5 @@ var Accordion = function (_a) {
                                 marginBottom: 0,
                                 flexShrink: 1,
                             },
-                        ], children: title }), (0, jsx_runtime_1.jsx)(Icon_1.AccordionIcon, { animationTiming: progress, "$variant": variant })] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: containerAnimatedStyle, children: (0, jsx_runtime_1.jsx)(styles_1.StyledContainer, { onLayout: onLayout, children: children }) })] }));
+                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress, "$variant": variant })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
 };
-exports.Accordion = Accordion;

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { AccordionGroupProps } from './types';
 export declare const AccordionGroupContext: import("react").Context<{
-    Header?: AccordionGroupProps['headingComponent'];
+    Header?: AccordionGroupProps["headingComponent"];
 }>;
 export declare const AccordionGroup: ({ children, headingComponent, }: PropsWithChildren<AccordionGroupProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Group.js

@@ -1,22 +1,15 @@
-"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)({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, } from 'react';
+import { View } from 'react-native';
+export const AccordionGroupContext = createContext({
     Header: undefined,
 });
-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;
-            }) }) }));
+export const AccordionGroup = ({ children, headingComponent, }) => {
+    const childCount = Children.count(children);
+    return (_jsx(AccordionGroupContext.Provider, { value: { Header: headingComponent }, children: _jsx(View, { children: Children.map(children, (child, i) => isValidElement(child)
+                ? cloneElement(child, {
+                    first: i === 0,
+                    last: i === childCount - 1,
+                })
+                : child) }) }));
 };
-exports.AccordionGroup = AccordionGroup;

package/dist/components/Accordion/Icon.js

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

package/dist/components/Accordion/index.js

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledAccordion: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").ViewProps>, any>, {
     color: {
         neutral: {
@@ -572,10 +571,10 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
         };
     };
 }, {
-    first?: boolean | undefined;
-    last?: boolean | undefined;
+    first?: boolean;
+    last?: boolean;
     isExpanded: boolean;
-    $variant?: "default" | "brand" | undefined;
+    $variant?: "default" | "brand";
 }, never>;
 export declare const StyledAccordionHeader: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, {
     color: {

package/dist/components/Accordion/styles.js

@@ -1,66 +1,51 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+import { numToPx } from '@ovotech/element-core';
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+export const StyledAccordion = styled(Animated.View)(({ theme, first, last, isExpanded, $variant }) => css `
+    width: 100%;
+    border-width: ${numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md'])};
+    border-color: ${$variant === 'brand'
+    ? theme.color.brand.brand
+    : theme.color.surface.borderDim};
+    border-bottom-width: 0;
+    background-color: ${$variant === 'brand'
+    ? theme.color.brand.bright
+    : isExpanded
+        ? theme.color.brand.onBrand
+        : 'transparent'};
+    transition: background-color ${theme.transition.duration.fast}ms;
+
+    ${first
+    ? {
+        borderTopLeftRadius: theme.border.radius.md,
+        borderTopRightRadius: theme.border.radius.md,
     }
-    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 theme = _a.theme, first = _a.first, last = _a.last, isExpanded = _a.isExpanded, $variant = _a.$variant;
-    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)(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: (0, element_core_1.numToPx)(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
-        }
-        : null);
-});
-exports.StyledAccordionHeader = styled_native_1.default.TouchableOpacity(function (_a) {
-    var theme = _a.theme;
-    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)(theme.space[500]), (0, element_core_1.numToPx)(theme.space[300]));
-});
-exports.StyledContainer = styled_native_1.default.View(function (_a) {
-    var theme = _a.theme;
-    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)(theme.space[1200]), (0, element_core_1.numToPx)(theme.space[600]), (0, element_core_1.numToPx)(theme.space[300]));
-});
-var templateObject_1, templateObject_2, templateObject_3;
+    : null}
+
+    ${last
+    ? {
+        borderBottomLeftRadius: theme.border.radius.md,
+        borderBottomRightRadius: theme.border.radius.md,
+        borderBottomWidth: numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
+    }
+    : null}
+  `);
+export const StyledAccordionHeader = styled.TouchableOpacity(({ theme }) => css `
+    padding-top: ${numToPx(theme.space[500])};
+    padding-left: ${numToPx(theme.space[300])};
+    padding-right: 18px;
+    padding-bottom: 18px;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+  `);
+export const StyledContainer = styled.View(({ theme }) => css `
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding-top: 0;
+    padding-right: ${numToPx(theme.space[1200])};
+    padding-bottom: ${numToPx(theme.space[600])};
+    padding-left: ${numToPx(theme.space[300])};
+  `);

package/dist/components/Accordion/types.js

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

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

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