@ovotech/element-native 5.4.3 → 5.6.0

package/dist/esm/components/LargeValueReference/LargeValueReference.js

@@ -0,0 +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 { useCallback, useMemo } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+import { LargeValue, LargeValueContainer, StyledLargeValueReferenceWrapper, } from './styles';
+export const LargeValueReference = (_a) => {
+    var { value, autoSpacing = false, autoSpacingInterval = 5, label, onCopy, theme = 'bright' } = _a, rest = __rest(_a, ["value", "autoSpacing", "autoSpacingInterval", "label", "onCopy", "theme"]);
+    if (value === undefined || value === null || String(value).length === 0)
+        return null;
+    const elementTheme = useTheme();
+    // Normalizes JS's default scientific notation
+    const valueAsString = useMemo(() => typeof value === 'number'
+        ? value.toLocaleString('fullwide', {
+            useGrouping: false,
+        })
+        : value.toString(), [value]);
+    const splitValue = useMemo(() => {
+        if (autoSpacing && valueAsString.length > autoSpacingInterval) {
+            const matches = valueAsString.match(new RegExp(`.{1,${autoSpacingInterval}}`, 'g'));
+            return matches || [];
+        }
+        return [];
+    }, [autoSpacing, valueAsString, autoSpacingInterval]);
+    const handlePress = useCallback(() => {
+        // Call onCopy callback
+        if (typeof onCopy === 'function') {
+            onCopy(valueAsString);
+        }
+    }, [valueAsString, onCopy]);
+    return (_jsxs(Stack, { spaceBetween: 2, children: [label ? _jsx(LabelText, { children: label }) : null, _jsx(StyledLargeValueReferenceWrapper, Object.assign({ backgroundTheme: theme }, rest, { children: _jsxs(LargeValueContainer, { children: [autoSpacing && splitValue.length > 0 ? (splitValue.map((val, index) => (_jsx(LargeValue, { children: val }, index)))) : (_jsx(LargeValue, { children: valueAsString })), onCopy ? (_jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: handlePress, hitSlop: 10, testID: "large-value-reference-copy-button", children: _jsx(Icon, { name: "copy", size: 20, color: elementTheme.color.surface.onSurface, testID: "large-value-reference-copy-icon" }) })) : null] }) }))] }));
+};

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

@@ -0,0 +1 @@
+export * from './LargeValueReference';

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

@@ -0,0 +1,23 @@
+import { numToPx } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { P } from '../P';
+export const StyledLargeValueReferenceWrapper = styled.View(({ theme, backgroundTheme }) => `
+  align-items: center;
+  max-width: ${'100%'};
+  gap: ${numToPx(theme.space[200])};
+  padding: ${numToPx(theme.space[400])};
+  background-color: ${theme.color.surface[backgroundTheme]};
+  border-radius: ${numToPx(theme.border.radius.lg)};
+  border: ${numToPx(theme.border.width.sm)} solid ${theme.color.surface.borderDim};
+`);
+export const LargeValueContainer = styled.View(({ theme }) => `
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: ${numToPx(theme.space[200])};
+`);
+export const LargeValue = styled(P)(() => `
+  font-family: monospace;
+  letter-spacing: 2px;
+`);

package/dist/esm/components/Link/Link.js

@@ -1,10 +1,21 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { getText } from '../../utils/utils';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
-const Link = (props) => _jsx(Button, { ...props, ref: props.ref });
+const Link = (props) => _jsx(Button, Object.assign({}, props, { ref: props.ref }));
 const StyledText = styled.Text(({ theme }) => css `
     font-family: ${theme.native.font.family.book};
     font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
@@ -15,10 +26,11 @@ const StyledText = styled.Text(({ theme }) => css `
 const StyledIcon = styled(Icon)(({ theme }) => css `
     color: ${theme.color.surface.link};
   `);
-const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
+const TextLink = (_a) => {
+    var { children, opensInNewWindow = false, accessibilityLabel, ref } = _a, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel", "ref"]);
     const updatedAccessibilityLabel = opensInNewWindow
         ? `${accessibilityLabel ? accessibilityLabel : getText(children)} (opens in new window)`
         : accessibilityLabel;
-    return (_jsxs(StyledText, { ...rest, accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] }));
+    return (_jsxs(StyledText, Object.assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] })));
 };
 export { Link, TextLink };

package/dist/esm/components/Margin/Margin.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 } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
@@ -29,8 +40,9 @@ const StyledMargin = styled.View(({ theme, mTop, mBottom, mLeft, mRight, horizon
     ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
   `;
 });
-const Margin = ({ top, bottom, left, right, ...rest }) => {
+const Margin = (_a) => {
+    var { top, bottom, left, right } = _a, rest = __rest(_a, ["top", "bottom", "left", "right"]);
     const breakpoints = useBreakpoint();
-    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
+    return (_jsx(StyledMargin, Object.assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
 };
 export { Margin };

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

@@ -82,11 +82,7 @@ export const NavHeader = ({ layer, onBackPress, actionButtons, title, stepCounte
                                         },
                                     ],
                                 },
-                                initialValues: {
-                                    opacity: 1,
-                                    transform: [{ translateY: 0 }],
-                                    ...initialValues,
-                                },
+                                initialValues: Object.assign({ opacity: 1, transform: [{ translateY: 0 }] }, initialValues),
                                 callback,
                             };
                         };

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

@@ -3,10 +3,11 @@ import { SkeletonNavButton } from '../NavHeader.styles';
 import { checkHasAccount } from '../utils';
 import { NavButton } from './NavButton';
 export const ActionButtons = (props) => {
+    var _a, _b;
     const variant = props.layer > 1 ? 'dim' : 'bright';
     const inverted = props.layer < 2;
     return (_jsxs(_Fragment, { children: [checkHasAccount(props) &&
-                props.actionButtons.account?.onPress &&
-                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.account.onPress, iconLeft: props.actionButtons.account.icon || 'user' }))), !!props.actionButtons.help?.onPress &&
+                ((_a = props.actionButtons.account) === null || _a === void 0 ? void 0 : _a.onPress) &&
+                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.account.onPress, iconLeft: props.actionButtons.account.icon || 'user' }))), !!((_b = props.actionButtons.help) === null || _b === void 0 ? void 0 : _b.onPress) &&
                 (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.help.onPress, iconLeft: props.actionButtons.help.icon || 'message' })))] }));
 };

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/PasswordInput/PasswordInput.styled.js

@@ -1,14 +1,16 @@
 import { numToPx } from '@ovotech/element-core';
 import { Pressable } from 'react-native';
 import styled, { css } from '../../styled.native';
-export const StyledPressable = styled(Pressable)(({ theme, focused, }) => {
+import { ICON_SIZE } from '../Input/styled';
+export const StyledPressable = styled(Pressable)(({ theme }) => {
     return css `
     display: flex;
     align-items: center;
     position: absolute;
     width: ${numToPx(theme.space[400])};
     z-index: 1;
-    top: ${focused ? '16px' : '14px'};
-    right: ${numToPx(theme.space[300])};
+    top: 50%;
+    margin-top: -${numToPx(ICON_SIZE / 2)};
+    right: ${numToPx(theme.space[400])};
   `;
 });

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Icon } from '../Icon';
+import { ICON_SIZE } from '../Input/styled';
 import { StyledPressable } from './PasswordInput.styled';
 export const useTogglePasswordVisibility = () => {
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -12,11 +13,4 @@ export const useTogglePasswordVisibility = () => {
         handlePasswordVisibility,
     };
 };
-export const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => {
-    const [focused, setFocused] = useState(false);
-    return (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: () => {
-            setFocused(true);
-        }, onBlur: () => {
-            setFocused(false);
-        }, children: _jsx(Icon, { name: iconName, size: 16, pointerEvents: "none" }) }));
-};
+export const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: ICON_SIZE, children: _jsx(Icon, { name: iconName, size: ICON_SIZE, pointerEvents: "none" }) }));

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,