@ovotech/element-native 5.4.3 → 5.5.0

package/dist/esm/components/NavHeader/NavHeaderComponents/NavButton.js

@@ -1,8 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from '../../../styled.native';
 import { DEFAULT_BUTTON_VARIANT } from '../../Button/Button';
 import { StyledButtonIcon, StyledButtonWrapper, StyledInner, } from '../../Button/Button.styles';
-const ButtonWrapper = ({ children, accessibilityRole = 'button', activeOpacity = 0.8, ...rest }) => (_jsx(StyledButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, children: children }));
+const ButtonWrapper = (_a) => {
+    var { children, accessibilityRole = 'button', activeOpacity = 0.8 } = _a, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
+    return (_jsx(StyledButtonWrapper, Object.assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
+};
 const NavStyledButtonInner = styled(StyledInner)(({ theme, navVariant }) => {
     const backgroundAndBorderColor = navVariant === 'bright'
         ? theme.color.surface.bright
@@ -18,6 +32,7 @@ const NavStyledButtonIcon = styled(StyledButtonIcon)(({ theme, navVariant }) =>
     ? theme.button.surface.color.fgInverted
     : 'transparent'};
   `);
-export const NavButton = ({ layer, iconLeft, iconRight, fullWidth = false, variant = 'bright', inverted = true, size = 'default', ...rest }) => {
-    return (_jsx(ButtonWrapper, { ...rest, children: _jsxs(NavStyledButtonInner, { fullWidth: fullWidth, variant: DEFAULT_BUTTON_VARIANT, navVariant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: true, layer: layer, children: [iconLeft && (_jsx(NavStyledButtonIcon, { iconLeft: true, iconOnly: true, name: iconLeft, inverted: inverted, navVariant: variant, variant: DEFAULT_BUTTON_VARIANT, size: 20 })), iconRight && (_jsx(NavStyledButtonIcon, { iconRight: true, iconOnly: true, name: iconRight, inverted: inverted, navVariant: variant, variant: DEFAULT_BUTTON_VARIANT, size: 20 }))] }) }));
+export const NavButton = (_a) => {
+    var { layer, iconLeft, iconRight, fullWidth = false, variant = 'bright', inverted = true, size = 'default' } = _a, rest = __rest(_a, ["layer", "iconLeft", "iconRight", "fullWidth", "variant", "inverted", "size"]);
+    return (_jsx(ButtonWrapper, Object.assign({}, rest, { children: _jsxs(NavStyledButtonInner, { fullWidth: fullWidth, variant: DEFAULT_BUTTON_VARIANT, navVariant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: true, layer: layer, children: [iconLeft && (_jsx(NavStyledButtonIcon, { iconLeft: true, iconOnly: true, name: iconLeft, inverted: inverted, navVariant: variant, variant: DEFAULT_BUTTON_VARIANT, size: 20 })), iconRight && (_jsx(NavStyledButtonIcon, { iconRight: true, iconOnly: true, name: iconRight, inverted: inverted, navVariant: variant, variant: DEFAULT_BUTTON_VARIANT, size: 20 }))] }) })));
 };

package/dist/esm/components/NavIcon/NavIcon.js

@@ -24,7 +24,8 @@ const RedDotContainer = styled.View `
   z-index: 1;
 `;
 export const NavIcon = ({ label, iconName, focused, isStatusDotEnabled = false, onPress, size = 24, tintColor, style, accessibilityState, }) => {
-    const isFocused = focused ?? accessibilityState?.selected ?? false;
+    var _a;
+    const isFocused = (_a = focused !== null && focused !== void 0 ? focused : accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.selected) !== null && _a !== void 0 ? _a : false;
     const testID = `${label.toLowerCase()}-tab`;
     const theme = useTheme();
     return (_jsx(View, { style: [

package/dist/esm/components/Notification/Notification.js

@@ -1,80 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
 import { useState } from 'react';
 import { View } from 'react-native';
-import styled, { css } from '../../styled.native';
+import { useTheme } from '../../styled.native';
 import { Icon } from '../Icon';
-const NotificationBox = styled.View(({ theme, noMargin, variant }) => {
-    return css `
-    position: relative;
-    margin-bottom: ${noMargin ? 0 : numToPx(theme.space[400])};
-    border: ${numToPx(theme.border.width.sm)} solid
-      ${theme.color.alert[variant]};
-    border-radius: ${numToPx(theme.border.radius['2xl'])};
-    overflow: hidden;
-  `;
-});
-export const NotificationContentBox = styled.View(({ theme }) => {
-    return css `
-    background-color: ${theme.color.surface.bright};
-    padding-top: ${numToPx(theme.space[200])};
-    padding-bottom: ${numToPx(theme.space[300])};
-    padding-left: ${numToPx(theme.space[400])};
-    padding-right: ${numToPx(theme.space[400])};
-  `;
-});
-export const NotificationTitleBox = styled.View(({ theme, variant, dismissible }) => {
-    const currentVariant = theme.color.alert[`${variant}Tint`];
-    return css `
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    background-color: ${currentVariant};
-    padding-top: ${numToPx(theme.space[200])};
-    padding-bottom: ${numToPx(theme.space[200])};
-    padding-left: ${numToPx(theme.space[400])};
-    padding-right: ${dismissible
-        ? numToPx(theme.space[300])
-        : numToPx(theme.space[400])};
-    min-height: 44px;
-  `;
-});
-const NotificationTitleText = styled.Text(({ theme, variant }) => {
-    const currentVariant = theme.color.alert[variant];
-    return css `
-    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
-    font-family: ${theme.native.font.family.bold};
-    color: ${currentVariant};
-  `;
-});
-const DismissButton = styled.TouchableOpacity(({ theme }) => {
-    return css `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 28px;
-    height: 28px;
-    background: ${theme.button.surface.color.bg};
-    border: ${numToPx(theme.border.width.sm)} solid ${theme.color.surface.link};
-    border-radius: ${numToPx(theme.border.radius['2xl'])};
-  `;
-});
-const StyledIcon = styled(Icon)(({ theme }) => `
-    color: ${theme.color.surface.bright};
-  `);
-export const Notification = ({ variant = 'info', children, title, noMargin, dismissible, onDismiss, ref, ...rest }) => {
+import { P } from '../P';
+import { Strong } from '../Strong';
+import { ContentContainer, DismissButton, NotificationBox, NotificationContentBox, NotificationShadow, StyledIcon, TitleContainer, VariantIconBackground, VariantIconContainer, } from './Notification.styles';
+import { mapVariantToIconName } from './utils';
+export const Notification = (_a) => {
+    var { variant = 'info', children, title, subtitle, noMargin, isTappable = false, dismissible, onDismiss, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "isTappable", "dismissible", "onDismiss", "ref"]);
     const [dismissed, setDismissed] = useState(false);
-    if (dismissed || (!title && !children)) {
+    if (dismissed) {
         return null;
     }
-    return (_jsx(View, { ref: ref, ...rest, children: _jsxs(NotificationBox, { variant: variant, noMargin: noMargin, testID: "nb-notification", children: [_jsxs(NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [_jsx(NotificationTitleText, { variant: variant, children: title }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: () => {
+    if (isTappable || dismissible) {
+        return (_jsx(NotificationShadow, { children: _jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, isTappable: isTappable, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })) }));
+    }
+    return (_jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, isTappable: isTappable, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })));
+};
+const NotificationContent = (_a) => {
+    var { variant = 'info', children, title, subtitle, noMargin, dismissible, onDismiss, setDismissed, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "dismissible", "onDismiss", "setDismissed", "ref"]);
+    const theme = useTheme();
+    return (_jsx(View, Object.assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [_jsx(VariantIconBackground, { variant: variant, children: _jsx(VariantIconContainer, { children: _jsx(StyledIcon, { variant: variant, size: theme.unit[800], name: mapVariantToIconName(variant) }) }) }), _jsxs(ContentContainer, { children: [_jsxs(TitleContainer, { children: [title && (_jsx(P, { size: "md", children: _jsx(Strong, { children: title }) })), subtitle && _jsx(P, { size: "sm", children: subtitle }), children && (_jsx(NotificationContentBox, { testID: "el-notification-box", children: children }))] }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: () => {
                                 setDismissed(true);
                                 if (onDismiss) {
                                     onDismiss();
                                 }
-                            }, children: _jsx(StyledIcon, { name: "cross", size: "16" }) })) : null] }), children ? (_jsx(NotificationContentBox, { "data-testid": "el-notification-box", children: children })) : null] }) }));
+                            }, children: _jsx(Icon, { color: theme.button.surface.color.fgInverted, name: "cross", size: theme.space[400] }) })) : null] })] }) })));
 };
-export const ErrorNotification = (props) => (_jsx(Notification, { variant: "error", ...props }));
-export const SuccessNotification = (props) => (_jsx(Notification, { variant: "success", ...props }));
-export const InfoNotification = (props) => (_jsx(Notification, { variant: "info", ...props }));
-export const WarningNotification = (props) => (_jsx(Notification, { variant: "warning", ...props }));
+export const SuccessNotification = (props) => (_jsx(Notification, Object.assign({ variant: "success" }, props)));
+export const InfoNotification = (props) => (_jsx(Notification, Object.assign({ variant: "info" }, props)));
+export const WarningNotification = (props) => (_jsx(Notification, Object.assign({ variant: "warning" }, props)));
+export const ErrorNotification = (props) => (_jsx(Notification, Object.assign({ variant: "error" }, props)));

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

@@ -0,0 +1,79 @@
+import { numToPx } from '@ovotech/element-core';
+import { View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+import { mapVariantToAlertColor, mapVariantToIconColor, } from './utils';
+export const NotificationShadow = styled(View)(({ theme }) => {
+    return css `
+    shadow-color: ${theme.color.brand.dark};
+    shadow-offset: 0 ${numToPx(theme.space[100])};
+    shadow-opacity: ${theme.opacity.transparent};
+    shadow-radius: ${numToPx(theme.space[100])};
+    elevation: 6;
+  `;
+});
+export const NotificationBox = styled.View(({ theme, noMargin }) => {
+    return css `
+    position: relative;
+    margin-bottom: ${noMargin ? 0 : numToPx(theme.space[400])};
+    background: ${theme.color.surface.bright};
+    border-radius: ${numToPx(theme.border.radius.md)};
+    overflow: hidden;
+    flex-direction: row;
+  `;
+});
+export const NotificationContentBox = styled.View(({ theme }) => {
+    return css `
+    padding-right: ${numToPx(theme.space[300])};
+  `;
+});
+export const DismissButton = styled.TouchableOpacity(({ theme }) => {
+    return css `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: ${numToPx(theme.space[800])};
+    height: ${numToPx(theme.space[800])};
+    background: ${theme.color.surface.dim};
+    border: ${numToPx(theme.border.width.sm)} solid ${theme.color.surface.dim};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+  `;
+});
+export const StyledIcon = styled(Icon)(({ theme, variant, }) => {
+    const currentVariant = mapVariantToIconColor(variant);
+    return css `
+    color: ${currentVariant
+        ? theme.color.alert[currentVariant]
+        : theme.color.surface.onSurface};
+  `;
+});
+export const VariantIconBackground = styled(View)(({ theme, variant }) => {
+    const currentVariant = mapVariantToAlertColor(variant);
+    return css `
+    left: 0;
+    width: ${numToPx(theme.space[1200])};
+    min-height: ${numToPx(theme.space[1600])};
+    background: ${currentVariant
+        ? theme.color.alert[currentVariant]
+        : theme.color.surface.bright};
+    align-items: center;
+  `;
+});
+export const VariantIconContainer = styled(View)(({ theme }) => css `
+    top: ${numToPx(theme.space[400])};
+  `);
+export const ContentContainer = styled.View(({ theme }) => {
+    return css `
+    flex: 1;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: ${numToPx(theme.space[400])};
+  `;
+});
+export const TitleContainer = styled.View(({ theme }) => css `
+    flex: 1;
+    flex-direction: column;
+    gap: ${numToPx(theme.space[100])};
+    padding-right: ${numToPx(theme.space[100])};
+    justify-content: center;
+  `);

package/dist/esm/components/Notification/utils.js

@@ -0,0 +1,21 @@
+export const mapVariantToIconColor = (variant) => {
+    if (variant === 'error') {
+        return 'errorTint';
+    }
+    return variant;
+};
+export const mapVariantToAlertColor = (variant) => {
+    if (variant === 'success' || variant === 'info' || variant === 'warning') {
+        return `${variant}Tint`;
+    }
+    return variant;
+};
+export const mapVariantToIconName = (variant) => {
+    if (variant === 'success') {
+        return 'check-circle';
+    }
+    if (variant === 'error') {
+        return 'warning';
+    }
+    return variant;
+};

package/dist/esm/components/NumberField/NumberField.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { NumberInput } from '../NumberInput';
-export const NumberField = ({ ref, ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(NumberInput, { ref: ref }) }));
+export const NumberField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return (_jsx(Field, Object.assign({}, props, { children: _jsx(NumberInput, { ref: ref }) })));
 };

package/dist/esm/components/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from '../Input/Input';
-const NumberInput = (props) => (_jsx(Input, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ...props }));
+const NumberInput = (props) => (_jsx(Input, Object.assign({ keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false }, props)));
 export { NumberInput };

package/dist/esm/components/P/P.js

@@ -14,5 +14,5 @@ const StyledText = styled.Text(({ theme, smallAndUp, inverted, size = 'md' }) =>
 });
 export const P = (props) => {
     const breakpoints = useBreakpoint();
-    return _jsx(StyledText, { ...props, ...breakpoints });
+    return _jsx(StyledText, Object.assign({}, props, breakpoints));
 };

package/dist/esm/components/PasswordField/PasswordField.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { PasswordInput } from '../PasswordInput';
-export const PasswordField = ({ hasVisibilityToggle, ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { ref: ref, hasVisibilityToggle: hasVisibilityToggle }) }));
+export const PasswordField = (_a) => {
+    var { hasVisibilityToggle, ref } = _a, rest = __rest(_a, ["hasVisibilityToggle", "ref"]);
+    return (_jsx(Field, Object.assign({}, rest, { children: _jsx(PasswordInput, { ref: ref, hasVisibilityToggle: hasVisibilityToggle }) })));
 };

package/dist/esm/components/PasswordInput/PasswordInput.js

@@ -3,6 +3,6 @@ import { Input } from '../Input/Input';
 import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
 const PasswordInput = (props) => {
     const { isPasswordVisible, handlePasswordVisibility } = useTogglePasswordVisibility();
-    return (_jsx(Input, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, submitBehavior: "submit", secureTextEntry: !isPasswordVisible, ...props }));
+    return (_jsx(Input, Object.assign({ rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, submitBehavior: "submit", secureTextEntry: !isPasswordVisible }, props)));
 };
 export { PasswordInput };

package/dist/esm/components/PhoneField/PhoneField.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { PhoneInput } from '../PhoneInput';
-export const PhoneField = ({ ref, ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(PhoneInput, { ref: ref }) }));
+export const PhoneField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return (_jsx(Field, Object.assign({}, props, { children: _jsx(PhoneInput, { ref: ref }) })));
 };

package/dist/esm/components/PhoneInput/PhoneInput.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from '../Input/Input';
-export const PhoneInput = (props) => (_jsx(Input, { ...props, keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false }));
+export const PhoneInput = (props) => (_jsx(Input, Object.assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false })));

package/dist/esm/components/Pictogram/Pictogram.js

@@ -1,11 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { usePictograms } from '../../providers';
 import { ThemeContext } from '../../styled.native';
-export const Pictogram = ({ name, size = '64', color, testID, ...rest }) => {
+export const Pictogram = (_a) => {
+    var { name, size = '64', color, testID } = _a, rest = __rest(_a, ["name", "size", "color", "testID"]);
     const pictograms = usePictograms();
     const theme = useContext(ThemeContext);
     // @ts-ignore to support additional pictograms.
     const Svg = name && pictograms[name];
-    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color ?? theme.color.brand.brand, width: size, height: size, ...rest })) : null;
+    return Svg ? (_jsx(Svg, Object.assign({ testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color !== null && color !== void 0 ? color : theme.color.brand.brand, width: size, height: size }, rest))) : null;
 };

package/dist/esm/components/ProductCarousel/NavigationDots.js

@@ -9,11 +9,11 @@ const Dot = ({ animatedValue, index, length, width = 10 }) => {
     const animatedStyle = useAnimatedStyle(() => {
         let inputRange = [index - 1, index, index + 1];
         let outputRange = [-width, 0, width];
-        if (index === 0 && animatedValue?.value > length - 1) {
+        if (index === 0 && (animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value) > length - 1) {
             inputRange = [length - 1, length, length + 1];
             outputRange = [-width, 0, width];
         }
-        const backgroundColor = interpolateColor(animatedValue?.value, inputRange, [
+        const backgroundColor = interpolateColor(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, [
             theme.color.brand.dim,
             theme.color.brand.bold,
             theme.color.brand.dim,
@@ -21,7 +21,7 @@ const Dot = ({ animatedValue, index, length, width = 10 }) => {
         return {
             transform: [
                 {
-                    translateX: interpolate(animatedValue?.value, inputRange, outputRange, Extrapolate.CLAMP),
+                    translateX: interpolate(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, Extrapolate.CLAMP),
                 },
             ],
             backgroundColor,

package/dist/esm/components/ProductCarousel/ProductCarousel.js

@@ -19,12 +19,12 @@ export function ProductCarousel({ data, children, width, height, fullWidth, show
     const carouselWidth = fullWidth ? windowWidth : width || windowWidth;
     return (_jsxs(View, { children: [mediumAndUp ? null : _jsx(SkewLine, {}), _jsxs(SCarouselContainer, { children: [_jsx(Carousel, { ref: carouselRef, data: data, renderItem: ({ item, animationValue }) => (_jsx(Card, { animationValue: animationValue, height: height, width: carouselWidth, children: children(item) })), vertical: false, width: carouselWidth, height: height, onProgressChange: (_, absoluteProgress) => (progressValue.value = absoluteProgress), panGestureHandlerProps: {
                             activeOffsetX: [-20, 20],
-                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, { onPress: () => carouselRef.current?.prev(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, { onPress: () => { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
                                     top: 32,
                                     bottom: 32,
                                     left: 16,
                                     right: 16,
-                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), _jsx(SActionPressable, { "$next": true, onPress: () => carouselRef.current?.next(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), _jsx(SActionPressable, { "$next": true, onPress: () => { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
                                     top: 32,
                                     bottom: 32,
                                     left: 16,
@@ -48,10 +48,7 @@ const Card = ({ children, animationValue, height, width, }) => {
                 },
             ],
         };
-        return {
-            ...withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT }),
-            opacity,
-        };
+        return Object.assign(Object.assign({}, withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT })), { opacity });
     }, []);
     return (_jsx(Animated.View, { style: {
             flex: 1,
@@ -78,4 +75,4 @@ const SActionPressable = styled.Pressable `
     ? `right: ${mediumAndUp ? '25%' : numToPx(theme.space[1400])}`
     : `left: ${mediumAndUp ? '25%' : numToPx(theme.space[1400])}`};
 `;
-const SkewLine = (props) => (_jsx(Svg, { width: "100%", height: 69, ...props, children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }));
+const SkewLine = (props) => (_jsx(Svg, Object.assign({ width: "100%", height: 69 }, props, { children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) })));

package/dist/esm/components/Radio/Radio.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { TouchableOpacity, View, } from 'react-native';
@@ -36,17 +47,19 @@ const StyledRadioInputDot = styled.View(({ theme, checked }) => {
       opacity: ${checked ? 1 : 0};
     `;
 });
-const Input = ({ checked, invalid, testID, ...rest }) => {
-    return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) }));
+const Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return (_jsx(StyledRadioInputWrapper, Object.assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
 };
 const StyledWrapper = styled.View(({ theme }) => `
     padding-top: ${numToPx(theme.space[300])};
     flex-direction: row;
   `);
-const Radio = ({ label, hint, checked, invalid, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
-activeOpacity = 0.8, testID, ref, ...rest }) => {
-    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked }, ...rest, children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) }));
+const Radio = (_a) => {
+    var { label, hint, checked, invalid, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+    activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID", "ref"]);
+    return (_jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) })));
 };
 export { Radio };

package/dist/esm/components/Radio/RadioField.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement } from 'react';
 import { View } from 'react-native';
@@ -7,15 +18,16 @@ import { FormGroup } from '../FormGroup';
 import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
-const RadioField = ({ label, hint, error, children, optional = false, value, onValueChange, ...rest }) => {
+const RadioField = (_a) => {
+    var { label, hint, error, children, optional = false, value, onValueChange } = _a, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
     const hasError = !!error;
     const validChildren = getValidChildren(children);
-    return (_jsx(FormGroup, { ...rest, error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { accessible: true, accessibilityRole: "radiogroup", children: Children.map(validChildren, child => cloneElement(child, {
+    return (_jsx(FormGroup, Object.assign({}, rest, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { accessible: true, accessibilityRole: "radiogroup", children: Children.map(validChildren, child => cloneElement(child, {
                         invalid: hasError ? true : child.props.invalid,
                         checked: child.props.checked != null
                             ? child.props.checked
                             : value && (value === child.props.value ? true : false),
                         onPress: callAll(onValueChange && (() => onValueChange(child.props.value)), child.props.onPress),
-                    })) })] }) }));
+                    })) })] }) })));
 };
 export { RadioField };

package/dist/esm/components/RadioCard/RadioCard.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { TouchableOpacity, } from 'react-native';
@@ -36,8 +47,9 @@ const StyledRadioInputDot = styled.View(({ theme, checked }) => {
       opacity: ${checked ? 1 : 0};
     `;
 });
-const Input = ({ checked, invalid, testID, ...rest }) => {
-    return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) }));
+const Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return (_jsx(StyledRadioInputWrapper, Object.assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
 };
 const StyledWrapper = styled.View(({ theme, checked, invalid }) => css `
     align-items: center;
@@ -52,6 +64,7 @@ const StyledWrapper = styled.View(({ theme, checked, invalid }) => css `
         ? theme.input.color.selected
         : 'transparent'};
   `);
-export const RadioCard = ({ label, checked, invalid, activeOpacity = 0.8, testID, ref, ...rest }) => {
-    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked }, ...rest, children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) }));
+export const RadioCard = (_a) => {
+    var { label, checked, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "ref"]);
+    return (_jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
 };

package/dist/esm/components/RemoteImage/RemoteImage.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '@ovotech/element-core';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, Image, StyleSheet, View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
-import { theme } from '@ovotech/element-core';
 const AnimatedImage = Animated.createAnimatedComponent(Image);
 const styles = StyleSheet.create({
     image: {
@@ -56,7 +56,7 @@ export const RemoteImage = memo(function RemoteImage({ uri, style, accessible, a
         animate(animatedImage, 1).start();
     }, [animatedThumbnailImage]);
     const reportImageLoadingError = useCallback(() => {
-        reportError?.();
+        reportError === null || reportError === void 0 ? void 0 : reportError();
     }, [reportError]);
     const thumbUri = getThumbUri(uri);
     useEffect(() => {