@ovotech/element-native 5.4.2 → 5.4.3-canary-8992fd2-429

package/dist/esm/src/components/Input/Input.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useState } from 'react';
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon/Icon';
-const StyledIcon = styled(Icon)(({ theme, side, focused }) => {
-    const focusCompensation = focused ? theme.space[50] : 0;
-    return css `
-    position: absolute;
-    z-index: 1;
-    top: ${numToPx(theme.space[350] + focusCompensation)};
-    ${side === 'left'
-        ? `left: ${numToPx(theme.space[200] + focusCompensation)}`
-        : ''};
-    ${side === 'right'
-        ? `right: ${numToPx(theme.space[200] + focusCompensation)}`
-        : ''};
-  `;
-});
-const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }) => {
-    const [focused, setFocused] = useState(false);
-    const breakpoints = useBreakpoint();
-    return (_jsxs(InputWrapper, { focused: focused, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, { ...rest, ...breakpoints, iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, ref: ref, onFocus: (event) => {
-                    setFocused(true);
-                    if (onFocus) {
-                        onFocus(event);
-                    }
-                }, onBlur: (event) => {
-                    setFocused(false);
-                    if (onBlur) {
-                        onBlur(event);
-                    }
-                } }), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
-};
-const InputWrapper = styled.View(({ theme, focused }) => css `
-    align-self: stretch;
-    border-radius: ${numToPx(theme.border.radius.md)};
-    border-width: 0;
-    border-style: solid;
-    border-color: ${theme.input.color.border};
-    flex-direction: row;
-
-    ${focused
-    ? `
-      border-width: ${numToPx(theme.border.width.md)};
-      border-color: ${theme.color.outline.outer};
-      padding: 2px;
-      margin: -4px;`
-    : null}
-  `);
-const StyledInput = styled.TextInput(({ theme, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    const errorStyles = invalid
-        ? `
-        border-color: ${theme.color.alert.error};
-      `
-        : '';
-    return css `
-    font-family: ${theme.native.font.family.book};
-    color: ${theme.color.surface.onSurface};
-    font-size: ${numToPx(fontSize)};
-    height: ${numToPx(theme.space[1100])};
-    line-height: 18px; /* Corrects for responsive line height in fixed height input */
-    border: ${numToPx(theme.border.width.md)} solid ${theme.input.color.border};
-    border-radius: ${numToPx(theme.border.radius.sm)};
-    padding: ${numToPx(theme.space[200])};
-    flex: 1;
-
-    ${iconLeft ? `padding-left: ${numToPx(theme.space[800])};` : ''}
-    ${iconRight || hasRightSlot
-        ? `padding-right: ${numToPx(theme.space[800])};`
-        : ''}
-
-          ${errorStyles}
-  `;
-});
-export { Input };

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

@@ -1,24 +0,0 @@
-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 StyledText = styled.Text(({ theme }) => css `
-    font-family: ${theme.native.font.family.book};
-    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
-    color: ${theme.color.surface.link};
-    text-decoration: underline;
-    text-decoration-color: ${theme.color.surface.link};
-  `);
-const StyledIcon = styled(Icon)(({ theme }) => css `
-    color: ${theme.color.surface.link};
-  `);
-const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
-    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" })] }))] }));
-};
-export { Link, TextLink };

package/dist/esm/src/components/Margin/Margin.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled from '../../styled.native';
-import { responsiveStyle } from '../../utils';
-const StyledMargin = styled.View(({ theme, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
-    const formatter = (spaceKey) => numToPx(theme.space[String(spaceKey * 100)]);
-    return `
-    ${horizontal
-        ? `
-            ${responsiveStyle('margin-left', horizontal, breakpoints, formatter)}
-            ${responsiveStyle('margin-right', horizontal, breakpoints, formatter)}
-          `
-        : ''}
-    ${vertical
-        ? `
-            ${responsiveStyle('margin-top', vertical, breakpoints, formatter)}
-            ${responsiveStyle('margin-bottom', vertical, breakpoints, formatter)}
-          `
-        : ''}
-    ${mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : ''}
-    ${mBottom
-        ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
-        : ''}
-    ${mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : ''}
-    ${mRight
-        ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
-        : ''}
-    ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
-  `;
-});
-const Margin = ({ top, bottom, left, right, ...rest }) => {
-    const breakpoints = useBreakpoint();
-    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
-};
-export { Margin };

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

@@ -1,130 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
-import { Platform } from 'react-native';
-import { ComplexAnimationBuilder, Easing, FadeInUp, LinearTransition, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { useBreakpoint } from '../../hooks';
-import { Heading, Heading2, Heading3, Heading4, } from '../Heading/Heading';
-import { P } from '../P';
-import { Strong } from '../Strong';
-import { HeaderContainer, NavBackButton, NavContainer, ShadowContainer, SideContainer, SkeletonNavHeading, TitleContainer, } from './NavHeader.styles';
-import { ActionButtons } from './NavHeaderComponents/ActionButtons';
-import { StepCounterBars } from './NavHeaderComponents/StepCounterBars';
-import { getTitleLength } from './utils';
-const baseStyle = {
-    hasDropShadow: false,
-    isCollapsed: false,
-};
-const hasDropShadowOnly = {
-    hasDropShadow: true,
-    isCollapsed: false,
-};
-const isCollapsedAndDropShadow = {
-    hasDropShadow: true,
-    isCollapsed: true,
-};
-const scrollStyleMap = {
-    0: {
-        initial: baseStyle,
-        scrollStart: baseStyle,
-        scrolling: isCollapsedAndDropShadow,
-        scrollBack: hasDropShadowOnly,
-    },
-    1: {
-        initial: baseStyle,
-        scrollStart: hasDropShadowOnly,
-        scrolling: isCollapsedAndDropShadow,
-        scrollBack: hasDropShadowOnly,
-    },
-    2: {
-        initial: hasDropShadowOnly,
-        scrollStart: hasDropShadowOnly,
-        scrolling: hasDropShadowOnly,
-        scrollBack: hasDropShadowOnly,
-    },
-};
-const LayerHeadingMap = {
-    0: '3xl',
-    1: '2xl',
-    2: 'xl',
-    3: 'xl',
-    4: 'xl',
-};
-const ANIMATION_DURATION = 300;
-export const NavHeader = ({ layer, onBackPress, actionButtons, title, stepCounter, scrollState, loading = false, }) => {
-    const displayTitle = getTitleLength({ layer, title });
-    const platform = Platform.OS;
-    const titleIsCentreAligned = layer > 1 && platform === 'ios';
-    const { isCollapsed, hasDropShadow } = scrollStyleMap[Math.min(layer, 2)][scrollState];
-    const shadowOpacity = useSharedValue(0.5);
-    const elevation = useSharedValue(9);
-    const LT = LinearTransition.duration(ANIMATION_DURATION);
-    const FADE_IN_DISTANCE = layer === 0 ? -68 : -50;
-    const FADE_OUT_DISTANCE = layer === 0 ? -72 : -52;
-    const ExitAnimation = useMemo(() => {
-        var _a;
-        return _a = class FadeOutUp extends ComplexAnimationBuilder {
-                constructor() {
-                    super(...arguments);
-                    this.build = () => {
-                        const delayFunction = this.getDelayFunction();
-                        const [animation, config] = this.getAnimationAndConfig();
-                        const callback = this.callbackV;
-                        const initialValues = this.initialValues;
-                        const delay = this.getDelay();
-                        return () => {
-                            'worklet';
-                            return {
-                                animations: {
-                                    opacity: delayFunction(delay, animation(0, config)),
-                                    transform: [
-                                        {
-                                            translateY: delayFunction(delay, animation(FADE_OUT_DISTANCE, config)),
-                                        },
-                                    ],
-                                },
-                                initialValues: {
-                                    opacity: 1,
-                                    transform: [{ translateY: 0 }],
-                                    ...initialValues,
-                                },
-                                callback,
-                            };
-                        };
-                    };
-                }
-                static createInstance() {
-                    return new _a();
-                }
-            },
-            _a.presetName = 'FadeOutUp',
-            _a;
-    }, [layer]);
-    const FadingAnimation = {
-        Enter: FadeInUp.duration(ANIMATION_DURATION)
-            .easing(Easing.ease)
-            .withInitialValues({ transform: [{ translateY: FADE_IN_DISTANCE }] }),
-        Exit: ExitAnimation.duration(ANIMATION_DURATION).easing(Easing.linear),
-    };
-    useEffect(() => {
-        shadowOpacity.value = withTiming(hasDropShadow ? 0.5 : 0, {
-            duration: ANIMATION_DURATION,
-            easing: Easing.ease,
-        });
-        elevation.value = withTiming(hasDropShadow ? 9 : 0, {
-            duration: ANIMATION_DURATION,
-            easing: Easing.ease,
-        });
-    }, [scrollState, shadowOpacity, hasDropShadow, elevation, isCollapsed]);
-    const animatedShadowStyle = useAnimatedStyle(() => {
-        return {
-            shadowOpacity: shadowOpacity.value,
-            elevation: elevation.value,
-        };
-    });
-    const breakpoints = useBreakpoint();
-    return (_jsx(ShadowContainer, { style: [animatedShadowStyle], children: _jsx(NavContainer, { breakpoints: breakpoints, layer: layer, layout: LT, isCollapsed: isCollapsed, children: !isCollapsed && (_jsxs(_Fragment, { children: [_jsxs(HeaderContainer, { layout: LT, entering: FadingAnimation.Enter, exiting: FadingAnimation.Exit, children: [_jsx(SideContainer, { flex: titleIsCentreAligned ? 1 : 0, side: "start", children: layer > 1 && (_jsx(NavBackButton, { onPress: () => {
-                                        onBackPress && onBackPress();
-                                    }, variant: "bright", iconLeft: platform === 'ios' ? 'chevron-left' : 'arrow-left' })) }), _jsxs(TitleContainer, { layer: layer, isIOS: platform === 'ios', children: [loading ? (_jsx(SkeletonNavHeading, { size: "100%", headingComponent: layer === 0 ? Heading2 : layer === 1 ? Heading3 : Heading4 })) : layer < 2 ? (_jsx(Heading, { inverted: layer < 2, level: LayerHeadingMap[layer], children: displayTitle })) : (_jsx(P, { size: "md", children: _jsx(Strong, { maxLength: 23, children: displayTitle }) })), stepCounter && !loading && (_jsx(P, { size: "sm", children: `Step ${stepCounter.currentStep <= stepCounter.totalSteps
-                                            ? stepCounter.currentStep
-                                            : stepCounter.totalSteps} of ${stepCounter.totalSteps}` }))] }), _jsx(SideContainer, { side: "end", children: actionButtons && (_jsx(ActionButtons, { loading: loading, layer: layer, actionButtons: actionButtons })) })] }), stepCounter && (_jsx(StepCounterBars, { loading: loading, totalSteps: stepCounter.totalSteps, currentStep: stepCounter.currentStep }))] })) }) }));
-};

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { SkeletonNavButton } from '../NavHeader.styles';
-import { checkHasAccount } from '../utils';
-import { NavButton } from './NavButton';
-export const ActionButtons = (props) => {
-    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 &&
-                (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/src/components/NavHeader/NavHeaderComponents/NavButton.js

@@ -1,23 +0,0 @@
-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 NavStyledButtonInner = styled(StyledInner)(({ theme, navVariant }) => {
-    const backgroundAndBorderColor = navVariant === 'bright'
-        ? theme.color.surface.bright
-        : theme.color.surface.dim;
-    return css `
-    background-color: ${backgroundAndBorderColor};
-    border-color: ${backgroundAndBorderColor};
-    color: ${theme.button.surface.color.fgInverted};
-  `;
-});
-const NavStyledButtonIcon = styled(StyledButtonIcon)(({ theme, navVariant }) => css `
-    color: ${navVariant === 'bright' || navVariant === 'dim'
-    ? 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 }))] }) }));
-};

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

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TouchableWithoutFeedback, View, } from 'react-native';
-import styled, { css, useTheme } from '../../styled.native';
-import { Icon } from '../Icon';
-import { P } from '../P';
-import { Strong } from '../Strong';
-const RedDot = styled.View(({ theme }) => css `
-    position: absolute;
-    top: -4px;
-    left: 0;
-    width: ${theme.space[300]};
-    height: ${theme.space[300]};
-    border: 1px solid ${theme.color.surface.surface};
-    background-color: ${theme.color.red[50]};
-    border-radius: ${theme.border.radius['2xl']}px;
-    z-index: 1;
-  `);
-const RedDotContainer = styled.View `
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 50%;
-  height: 0;
-  z-index: 1;
-`;
-export const NavIcon = ({ label, iconName, focused, isStatusDotEnabled = false, onPress, size = 24, tintColor, style, accessibilityState, }) => {
-    const isFocused = focused ?? accessibilityState?.selected ?? false;
-    const testID = `${label.toLowerCase()}-tab`;
-    const theme = useTheme();
-    return (_jsx(View, { style: [
-            { flex: 1, alignItems: 'center', justifyContent: 'center' },
-            style,
-        ], children: _jsx(TouchableWithoutFeedback, { onPress: onPress, accessibilityLabel: `${label} Tab`, testID: testID, children: _jsxs(View, { style: [
-                    style,
-                    {
-                        alignItems: 'center',
-                        maxWidth: 550,
-                        width: '100%',
-                    },
-                ], children: [isStatusDotEnabled && (_jsx(RedDotContainer, { children: _jsx(RedDot, {}) })), _jsx(Icon, { size: size, color: isFocused
-                            ? tintColor || theme.color.brand.brand
-                            : theme.color.surface.onSurface, name: iconName }), _jsx(P, { size: "sm", style: {
-                            minWidth: 60,
-                            textAlign: 'center',
-                        }, children: _jsx(Strong, { children: label }) })] }) }) }));
-};

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

@@ -1,80 +0,0 @@
-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 { 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 }) => {
-    const [dismissed, setDismissed] = useState(false);
-    if (dismissed || (!title && !children)) {
-        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: () => {
-                                setDismissed(true);
-                                if (onDismiss) {
-                                    onDismiss();
-                                }
-                            }, children: _jsx(StyledIcon, { name: "cross", size: "16" }) })) : null] }), children ? (_jsx(NotificationContentBox, { "data-testid": "el-notification-box", children: children })) : 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 }));

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

@@ -1,6 +0,0 @@
-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 }) }));
-};

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

@@ -1,4 +0,0 @@
-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 }));
-export { NumberInput };

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

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-const StyledText = styled.Text(({ theme, smallAndUp, inverted, size = 'md' }) => {
-    return css `
-      font-family: ${theme.native.font.family.book};
-      font-size: ${numToPx(theme.font.size[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
-      line-height: ${numToPx(theme.font.lineHeight[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
-      color: ${inverted
-        ? theme.color.surface.surface
-        : theme.color.surface.onSurface};
-    `;
-});
-export const P = (props) => {
-    const breakpoints = useBreakpoint();
-    return _jsx(StyledText, { ...props, ...breakpoints });
-};

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

@@ -1,6 +0,0 @@
-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 }) }));
-};

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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 }));
-};
-export { PasswordInput };

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

@@ -1,6 +0,0 @@
-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 }) }));
-};

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

@@ -1,3 +0,0 @@
-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 }));

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

@@ -1,11 +0,0 @@
-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 }) => {
-    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;
-};

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

@@ -1,48 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle, } from 'react-native-reanimated';
-import styled, { useTheme } from '../../styled.native';
-export function NavigationDots({ data, animatedValue, }) {
-    return (_jsx(SDotsContainer, { children: data.map((_, index) => (_jsx(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index))) }));
-}
-const Dot = ({ animatedValue, index, length, width = 10 }) => {
-    const theme = useTheme();
-    const animatedStyle = useAnimatedStyle(() => {
-        let inputRange = [index - 1, index, index + 1];
-        let outputRange = [-width, 0, width];
-        if (index === 0 && animatedValue?.value > length - 1) {
-            inputRange = [length - 1, length, length + 1];
-            outputRange = [-width, 0, width];
-        }
-        const backgroundColor = interpolateColor(animatedValue?.value, inputRange, [
-            theme.color.brand.dim,
-            theme.color.brand.bold,
-            theme.color.brand.dim,
-        ]);
-        return {
-            transform: [
-                {
-                    translateX: interpolate(animatedValue?.value, inputRange, outputRange, Extrapolate.CLAMP),
-                },
-            ],
-            backgroundColor,
-        };
-    }, [animatedValue, index, length]);
-    return (_jsx(SDot, { "$width": width, children: _jsx(SAnimatedDot, { style: animatedStyle }) }));
-};
-const SDotsContainer = styled.View `
-  position: absolute;
-  bottom: 20px;
-  flex-direction: row;
-  gap: 10px;
-`;
-const SDot = styled.View `
-  background-color: ${({ theme }) => theme.color.brand.dim};
-  width: ${({ $width }) => $width}px;
-  height: ${({ $width }) => $width}px;
-  border-radius: 50px;
-  overflow: hidden;
-`;
-const SAnimatedDot = styled(Animated.View) `
-  border-radius: 20px;
-  flex: 1;
-`;

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

@@ -1,81 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useRef } from 'react';
-import { View, useWindowDimensions } from 'react-native';
-import Animated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
-import Carousel from 'react-native-reanimated-carousel';
-import Svg, { Path } from 'react-native-svg';
-import { useBreakpoint } from '../../hooks';
-import styled, { useTheme } from '../../styled.native';
-import { Icon } from '../Icon';
-import { NavigationDots } from './NavigationDots';
-import { withAnchorPoint } from './anchor-point';
-export function ProductCarousel({ data, children, width, height, fullWidth, showArrows = true, showDots = false, loop = true, arrowsDistanceFromTop, }) {
-    const theme = useTheme();
-    const { mediumAndUp } = useBreakpoint();
-    const carouselRef = useRef(null);
-    const progressValue = useSharedValue(0);
-    const windowWidth = useWindowDimensions().width;
-    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: {
-                                    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: {
-                                    top: 32,
-                                    bottom: 32,
-                                    left: 16,
-                                    right: 16,
-                                }, children: _jsx(Icon, { name: "arrow-right", size: 32, color: theme.color.brand.onBrand }) })] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
-}
-const Card = ({ children, animationValue, height, width, }) => {
-    const WIDTH = width / 1.3;
-    const HEIGHT = height / 1.3;
-    const cardStyle = useAnimatedStyle(() => {
-        const scale = interpolate(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], Extrapolation.CLAMP);
-        const opacity = interpolate(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
-        const translateX = interpolate(animationValue.value, [-1, -0.2, 0, 1], [0, WIDTH * 0.3, 0, 0]);
-        const transform = {
-            transform: [
-                { scale },
-                { translateX },
-                { perspective: 200 },
-                {
-                    rotateY: `${interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolation.CLAMP)}deg`,
-                },
-            ],
-        };
-        return {
-            ...withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT }),
-            opacity,
-        };
-    }, []);
-    return (_jsx(Animated.View, { style: {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-        }, children: _jsx(Animated.View, { style: [
-                {
-                    width: WIDTH,
-                    height: HEIGHT,
-                },
-                cardStyle,
-            ], children: children }) }));
-};
-const SCarouselContainer = styled.View `
-  align-items: center;
-  background-color: #0a9828;
-  overflow: hidden;
-  margin-top: -0.5px;
-`;
-const SActionPressable = styled.Pressable `
-  position: absolute;
-  top: ${({ $top }) => ($top ? `${$top}px` : '30%')};
-  ${({ theme, $next, mediumAndUp }) => $next
-    ? `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" }) }));