@ovotech/element-native 4.5.0 → 5.0.0-canary-bcb1788-338

package/dist/components/Toggle/styles.js

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

package/dist/components/index.d.ts

@@ -4,33 +4,22 @@ export * from './ActionList';
 export * from './Badge';
 export * from './Card';
 export * from './Checkbox';
-export * from './CTAButton';
-export * from './CTALink';
+export * from './Button';
+export * from './Link';
 export * from './CurrencyField';
 export * from './CurrencyInput';
 export * from './DataTable';
 export * from './DateField';
-export * from './DescriptionList';
 export * from './Disclosure';
-export * from './Display0';
-export * from './Display1';
-export * from './Display2';
-export * from './Display3';
+export * from './Display';
 export * from './Divider';
 export * from './Em';
 export * from './EmailField';
 export * from './EmailInput';
-export * from './ErrorSummaryNotification';
 export * from './Field';
-export * from './FilterSelect';
 export * from './Grid';
-export * from './Heading1';
-export * from './Heading2';
-export * from './Heading3';
-export * from './Heading4';
+export * from './Heading';
 export * from './Icon';
-export * from './Label';
-export * from './Lead';
 export * from './LineThrough';
 export * from './List';
 export * from './Margin';
@@ -47,10 +36,9 @@ export * from './Radio';
 export * from './SegmentedControls';
 export * from './SelectField';
 export * from './SkeletonCircle';
-export * from './SkeletonCTA';
+export * from './SkeletonButton';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
-export * from './Small';
 export * from './Spinner';
 export * from './Stack';
 export * from './Strong';
@@ -58,10 +46,8 @@ export * from './Tabs';
 export * from './TextareaField';
 export * from './TextareaInput';
 export * from './TextField';
-export * from './TextGroup';
 export * from './TextInput';
-export * from './TextLink';
 export * from './Toggle';
 export * from './Toast';
-export * from './ProductCarousel';
 export * from './RadioCard';
+export * from './Pictogram';

package/dist/components/index.js

@@ -1,67 +1,69 @@
-export * from './Accordion';
-export * from './ActionCard';
-export * from './ActionList';
-export * from './Badge';
-export * from './Card';
-export * from './Checkbox';
-export * from './CTAButton';
-export * from './CTALink';
-export * from './CurrencyField';
-export * from './CurrencyInput';
-export * from './DataTable';
-export * from './DateField';
-export * from './DescriptionList';
-export * from './Disclosure';
-export * from './Display0';
-export * from './Display1';
-export * from './Display2';
-export * from './Display3';
-export * from './Divider';
-export * from './Em';
-export * from './EmailField';
-export * from './EmailInput';
-export * from './ErrorSummaryNotification';
-export * from './Field';
-export * from './FilterSelect';
-export * from './Grid';
-export * from './Heading1';
-export * from './Heading2';
-export * from './Heading3';
-export * from './Heading4';
-export * from './Icon';
-export * from './Label';
-export * from './Lead';
-export * from './LineThrough';
-export * from './List';
-export * from './Margin';
-export * from './NavHeader';
-export * from './Notification';
-export * from './NumberField';
-export * from './NumberInput';
-export * from './P';
-export * from './PasswordField';
-export * from './PasswordInput';
-export * from './PhoneField';
-export * from './PhoneInput';
-export * from './Radio';
-export * from './SegmentedControls';
-export * from './SelectField';
-export * from './SkeletonCircle';
-export * from './SkeletonCTA';
-export * from './SkeletonHeading';
-export * from './SkeletonText';
-export * from './Small';
-export * from './Spinner';
-export * from './Stack';
-export * from './Strong';
-export * from './Tabs';
-export * from './TextareaField';
-export * from './TextareaInput';
-export * from './TextField';
-export * from './TextGroup';
-export * from './TextInput';
-export * from './TextLink';
-export * from './Toggle';
-export * from './Toast';
-export * from './ProductCarousel';
-export * from './RadioCard';
+"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("./Button"), exports);
+__exportStar(require("./Link"), exports);
+__exportStar(require("./CurrencyField"), exports);
+__exportStar(require("./CurrencyInput"), exports);
+__exportStar(require("./DataTable"), exports);
+__exportStar(require("./DateField"), exports);
+__exportStar(require("./Disclosure"), exports);
+__exportStar(require("./Display"), exports);
+__exportStar(require("./Divider"), exports);
+__exportStar(require("./Em"), exports);
+__exportStar(require("./EmailField"), exports);
+__exportStar(require("./EmailInput"), exports);
+__exportStar(require("./Field"), exports);
+__exportStar(require("./Grid"), exports);
+__exportStar(require("./Heading"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./LineThrough"), exports);
+__exportStar(require("./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("./SegmentedControls"), exports);
+__exportStar(require("./SelectField"), exports);
+__exportStar(require("./SkeletonCircle"), exports);
+__exportStar(require("./SkeletonButton"), exports);
+__exportStar(require("./SkeletonHeading"), exports);
+__exportStar(require("./SkeletonText"), exports);
+__exportStar(require("./Spinner"), exports);
+__exportStar(require("./Stack"), exports);
+__exportStar(require("./Strong"), exports);
+__exportStar(require("./Tabs"), exports);
+__exportStar(require("./TextareaField"), exports);
+__exportStar(require("./TextareaInput"), exports);
+__exportStar(require("./TextField"), exports);
+__exportStar(require("./TextInput"), exports);
+__exportStar(require("./Toggle"), exports);
+__exportStar(require("./Toast"), exports);
+__exportStar(require("./RadioCard"), exports);
+__exportStar(require("./Pictogram"), exports);

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

@@ -1,65 +1,108 @@
+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, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { useLayout } from '../../hooks/use-layout';
-import { useTheme } from '../../styled.native';
-import { Heading4 } from '../Heading4';
+import { ThemeContext } from '../../styled.native';
+import { Heading4 } from '../Heading';
 import { AccordionGroupContext } from './Group';
 import { AccordionIcon } from './Icon';
 import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
 export function withAnimated(WrappedComponent) {
-    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
-    class WithAnimated extends Component {
-        render() {
-            return _jsx(WrappedComponent, { ...this.props });
+    var WithAnimated = /** @class */ (function (_super) {
+        __extends(WithAnimated, _super);
+        function WithAnimated() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-    }
-    WithAnimated.displayName = `WithAnimated(${displayName})`;
+        WithAnimated.prototype.render = function () {
+            return _jsx(WrappedComponent, __assign({}, this.props));
+        };
+        WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
+        return WithAnimated;
+    }(Component));
     return Animated.createAnimatedComponent(WithAnimated);
 }
-export const Accordion = ({ expanded = false, first, last, title, children, onToggle, }) => {
-    const { core, semantic } = 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 handleHeightContent = useMemo(() => layout.height || 100, [layout.height]);
-    const size = useSharedValue(handleHeightContent);
-    useEffect(() => {
-        if (expanded && handleHeightContent) {
-            size.value = handleHeightContent;
-        }
+export var Accordion = function (_a) {
+    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
+    var theme = useContext(ThemeContext);
+    var Header = useContext(AccordionGroupContext).Header;
+    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4;
+    var AnimatedHeading = useMemo(function () { return withAnimated(AccordionHeading); }, [AccordionHeading]);
+    var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
+    var _e = useState(expanded), open = _e[0], setOpen = _e[1];
+    var initialHeadingColor = variant === 'default'
+        ? theme.color.brand.brand
+        : theme.color.surface.onSurface;
+    var handleHeightContent = useMemo(function () { return layout.height || 100; }, [layout.height]);
+    var size = useSharedValue(handleHeightContent);
+    useEffect(function () {
+        runOnUI(function () {
+            'worklet';
+            if (expanded && handleHeightContent) {
+                size.value = handleHeightContent;
+            }
+        })();
     }, [handleHeightContent, expanded, size]);
-    useEffect(() => {
-        if (handleHeightContent) {
-            size.value = handleHeightContent;
-        }
+    useEffect(function () {
+        runOnUI(function () {
+            'worklet';
+            if (handleHeightContent) {
+                size.value = handleHeightContent;
+            }
+        })();
     }, [handleHeightContent, size]);
-    const progress = useDerivedValue(() => withTiming(open ? 1 : 0));
-    const style = useAnimatedStyle(() => ({
+    var progress = useDerivedValue(function () { return withTiming(open ? 1 : 0); });
+    var style = useAnimatedStyle(function () { return ({
         height: size.value * progress.value + 1,
-    }), [progress, size]);
-    const toggleOpen = useCallback(() => {
-        onToggle?.(!open);
+    }); }, [progress, size]);
+    var toggleOpen = useCallback(function () {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
         if (size.value === 0) {
-            size.value = handleHeightContent;
+            runOnUI(function () {
+                'worklet';
+                size.value = handleHeightContent;
+            })();
         }
-        setOpen(o => !o);
+        setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
-    const containerAnimatedStyle = useMemo(() => [{ overflow: 'hidden' }, style], [style]);
-    const headerStyle = useAnimatedStyle(() => ({
-        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: [
+    var containerAnimatedStyle = useMemo(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
+    var headerStyle = useAnimatedStyle(function () { return ({
+        color: interpolateColor(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
+    }); }, [progress]);
+    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
                             headerStyle,
                             {
-                                paddingTop: core.space[1],
-                                paddingRight: core.space[3],
+                                paddingRight: theme.space[300],
                                 marginTop: 0,
                                 marginBottom: 0,
                                 flexShrink: 1,
                             },
-                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(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 }) })] }));
 };

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

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, } from 'react';
 import { View } from 'react-native';
-export const AccordionGroupContext = createContext({
+export var AccordionGroupContext = createContext({
     Header: undefined,
 });
-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) }) }));
+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

@@ -3,32 +3,36 @@ 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, }) {
-    const { core, semantic } = useContext(ThemeContext);
-    const outerAnimatedStyles = useAnimatedStyle(() => ({
-        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
-        height: 36 - animationTiming.value * 4,
+var OVO_LOGO_ANGLE = 105;
+var AnimatedPath = Animated.createAnimatedComponent(Path);
+export function AccordionIcon(_a) {
+    var animationTiming = _a.animationTiming, $variant = _a.$variant;
+    var color = useContext(ThemeContext).color;
+    var initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
+    var expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
+    var initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
+    var outerAnimatedStyles = useAnimatedStyle(function () { return ({
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
+        height: 32 - animationTiming.value,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
-    }), [animationTiming]);
-    const innerAnimatedStyles = useAnimatedStyle(() => ({
+    }); }, [animationTiming]);
+    var innerAnimatedStyles = useAnimatedStyle(function () { return ({
         transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
-    }), [animationTiming]);
-    const plusAnimatedProps = useAnimatedProps(() => ({
+    }); }, [animationTiming]);
+    var plusAnimatedProps = useAnimatedProps(function () { return ({
         opacity: 1 - animationTiming.value,
-    }), [animationTiming]);
-    const minusAnimatedProps = useAnimatedProps(() => ({
+    }); }, [animationTiming]);
+    var minusAnimatedProps = useAnimatedProps(function () { return ({
         opacity: animationTiming.value,
-    }), [animationTiming]);
+    }); }, [animationTiming]);
     return (_jsx(Animated.View, { style: [
             {
-                backgroundColor: semantic.surface.cutout,
+                backgroundColor: color.surface.dim,
                 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 })] }) }) }));
+        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
 }

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

@@ -1,45 +1,37 @@
+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 const StyledAccordion = styled(Animated.View)(({ theme: { semantic, core }, first, last, isExpanded }) => css `
-    width: 100%;
-    border-width: ${numToPx(core.borderWidth.small)};
-    border-color: ${semantic.border.differentiated};
-    border-bottom-width: 0;
-    background-color: ${isExpanded ? core.color.brand.white : 'transparent'};
-    transition: background-color ${core.transition.fast}ms;
-
-    ${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 const StyledAccordionHeader = styled.TouchableOpacity(({ theme: { core } }) => css `
-    padding-top: ${numToPx(core.space[5])};
-    padding-left: ${numToPx(core.space[3])};
-    padding-right: 18px;
-    padding-bottom: 18px;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-  `);
-export const StyledContainer = styled.View(({ theme: { core } }) => css `
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding-top: 0;
-    padding-right: ${numToPx(core.space[12])};
-    padding-bottom: ${numToPx(core.space[6])};
-    padding-left: ${numToPx(core.space[3])};
-  `);
+export var StyledAccordion = styled(Animated.View)(function (_a) {
+    var theme = _a.theme, first = _a.first, last = _a.last, isExpanded = _a.isExpanded, $variant = _a.$variant;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md']), $variant === 'brand'
+        ? theme.color.brand.brand
+        : theme.color.surface.borderDim, $variant === 'brand'
+        ? theme.color.brand.bright
+        : isExpanded
+            ? theme.color.brand.onBrand
+            : 'transparent', theme.transition.duration.fast, first
+        ? {
+            borderTopLeftRadius: theme.border.radius.md,
+            borderTopRightRadius: theme.border.radius.md,
+        }
+        : null, last
+        ? {
+            borderBottomLeftRadius: theme.border.radius.md,
+            borderBottomRightRadius: theme.border.radius.md,
+            borderBottomWidth: numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
+        }
+        : null);
+});
+export var StyledAccordionHeader = styled.TouchableOpacity(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), numToPx(theme.space[500]), numToPx(theme.space[300]));
+});
+export var StyledContainer = styled.View(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), numToPx(theme.space[1200]), numToPx(theme.space[600]), numToPx(theme.space[300]));
+});
+var templateObject_1, templateObject_2, templateObject_3;