@ovotech/element-native 5.3.0 → 5.4.0

package/dist/d.d.ts

@@ -2,3 +2,7 @@ declare module '*.png' {
     const value: any;
     export = value;
 }
+declare module '*.jpg' {
+    const value: any;
+    export = value;
+}

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useBreakpoint } from '../../hooks';
 import { StyledButtonIcon, StyledButtonText, StyledButtonWrapper, StyledInner, } from './Button.styles';
-const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = 'surface', inverted = false, size = 'default', accessibilityRole = 'button', activeOpacity = 0.8, ref, ...rest }) => {
+export const DEFAULT_BUTTON_VARIANT = 'surface';
+const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = DEFAULT_BUTTON_VARIANT, inverted = false, size = 'default', accessibilityRole = 'button', activeOpacity = 0.8, ref, ...rest }) => {
     const { smallAndUp } = useBreakpoint();
     const isIconOnly = !children;
     const iconSizes = {

package/dist/esm/src/components/Button/Button.styles.js

@@ -94,7 +94,10 @@ const getBorderColor = (theme, variant, inverted) => {
     if (variant === 'outline-variant') {
         return button.surface.color.bgVariant;
     }
-    return inverted ? button.surface.color.bgInverted : button[variant].color.bg;
+    if (inverted) {
+        return button.surface.color.bgInverted;
+    }
+    return button[variant].color.bg;
 };
 const getIconColor = (theme, inverted, variant) => {
     const button = theme.button;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CurrencyInput } from '../CurrencyInput';
 import { Field } from '../Field';
-export const CurrencyField = ({ ...props }) => {
-    return (_jsx(Field, { affixWidth: 40, ...props, children: _jsx(CurrencyInput, { ref: props.ref }) }));
+export const CurrencyField = ({ ref, ...props }) => {
+    return (_jsx(Field, { affixWidth: 40, ...props, children: _jsx(CurrencyInput, { ref: ref }) }));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { EmailInput } from '../EmailInput';
 import { Field } from '../Field';
-export const EmailField = ({ ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, {}) }));
+export const EmailField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, { ref: ref }) }));
 };

package/dist/esm/src/components/Grid/Col.js

@@ -1,25 +1,27 @@
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
-const StyledCol = styled.View(({ theme, span = 12, small, medium, large, smallAndUp, mediumAndUp, largeAndUp, }) => {
+const StyledCol = styled.View(({ theme, span, xsmallAndUp, small, smallAndUp, medium, mediumAndUp }) => {
     const COLS = 12;
-    const gutter = mediumAndUp ? theme.space[800] : theme.space[400];
-    const percentage = (span / COLS) * 100;
+    const gutter = mediumAndUp ? theme.space[600] : theme.space[400];
+    const percentage = span ? (span / COLS) * 100 : 100;
     const smallPercentage = small ? (small / COLS) * 100 : percentage;
     const mediumPercentage = medium ? (medium / COLS) * 100 : smallPercentage;
-    const largePercentage = large ? (large / COLS) * 100 : mediumPercentage;
-    const maxWidth = largeAndUp
-        ? largePercentage
-        : mediumAndUp
-            ? mediumPercentage
-            : smallAndUp
-                ? smallPercentage
-                : percentage;
+    let maxWidth;
+    if (mediumAndUp) {
+        maxWidth = mediumPercentage;
+    }
+    else if (smallAndUp || xsmallAndUp) {
+        maxWidth = span ? 50 : 100;
+    }
+    else {
+        maxWidth = 100;
+    }
     return css `
       flex: 0 0 auto;
       padding-left: ${numToPx(gutter / 2)};
       padding-right: ${numToPx(gutter / 2)};
-      margin-bottom: ${numToPx(gutter)};
+      margin-bottom: ${numToPx(theme.space[smallAndUp ? 800 : 600])};
       max-width: ${maxWidth}%;
       width: 100%;
     `;

package/dist/esm/src/components/Grid/Row.js

@@ -1,23 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
+import { numToPx } from '../..';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 const StyledRow = styled.View(({ theme, isNested, smallAndUp, mediumAndUp }) => {
-    const gutter = mediumAndUp ? theme.space[800] : theme.space[400];
-    const margin = smallAndUp ? theme.space[800] : theme.space[400];
-    /* We need to make up for the half gutter that is added to the left and right of a column, between the small and medium breakpoints */
-    const additionalMargin = smallAndUp ? (margin - gutter) / 2 : 0;
+    const rowGap = mediumAndUp || smallAndUp ? theme.space[800] : theme.space[600];
+    const colGap = mediumAndUp ? theme.space[600] : theme.space[400];
     return css `
-      padding-left: ${numToPx(margin / 2 + additionalMargin)};
-      padding-right: ${numToPx(margin / 2 + additionalMargin)};
       margin: 0 auto;
-      max-width: ${theme.breakpoint.large + margin}px;
+      max-width: ${theme.breakpoint.large + rowGap}px;
       width: 100%;
 
       ${isNested
         ? `
-      margin-left: -${numToPx(margin / 2)};
-      margin-right: -${numToPx(margin / 2)};
+      margin-left: -${numToPx(colGap / 2)};
+      margin-right: -${numToPx(colGap / 2)};
       width: auto;
       max-width: 200%; /* max width none not supported in RN */
     `

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

@@ -21,7 +21,7 @@ const StyledHeading = styled.Text(({ theme, smallAndUp, inverted, level, variant
       color: ${color};
     `;
 });
-const Heading = ({ accessibilityRole = 'header', ...rest }) => {
+export const Heading = ({ accessibilityRole = 'header', ...rest }) => {
     const breakpoints = useBreakpoint();
     return (_jsx(StyledHeading, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
 };

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

@@ -1,33 +1,130 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { Action } from '../ActionList';
-import { Button } from '../Button';
-import { BackActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, HeaderGap, NavContainer, NavWrapper, } from './NavHeader.styles';
-const FADE_ANIMATION_DURATION = 200;
-export const NavHeader = ({ title, scrolled, canGoBack, rightActionConfig, topOffset = 0, backButtonText = 'Back', onHeaderHeightChange, onBackButtonPress, }) => {
-    const hasRightAction = !!rightActionConfig;
-    const hasTitle = title !== undefined && title?.length > 0;
-    const layoutHeight = useSharedValue(0);
-    const animatedHeightStyle = useAnimatedStyle(() => {
+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 {
-            height: layoutHeight.value,
+            shadowOpacity: shadowOpacity.value,
+            elevation: elevation.value,
         };
     });
-    const onLayout = (e) => {
-        const { height } = e.nativeEvent.layout;
-        if (height === layoutHeight.value) {
-            return;
-        }
-        // we want to only update height of the expanded header to set content offset on the client side
-        if (!scrolled) {
-            onHeaderHeightChange?.(height);
-        }
-        layoutHeight.value = withTiming(height, {
-            duration: FADE_ANIMATION_DURATION,
-            easing: Easing.linear,
-        });
-    };
-    // NavWrapper will recieve height of the NavContainer and animate it
-    // content inside NavContainer is the only dynamic part of NavHeader
-    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, hasTitle: hasTitle, onLayout: onLayout, children: [_jsx(BackActionWrapper, { collapsed: scrolled, hasBackButton: canGoBack, children: canGoBack && (_jsx(Action, { standalone: true, iconLeft: "chevron-left-small", onPress: onBackButtonPress, children: backButtonText })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", children: title }) }), _jsx(HeaderGap, { hasRightAction: hasRightAction }), hasRightAction && (_jsx(_Fragment, { children: _jsx(Animated.View, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle, { hasRightAction: !hasRightAction, hasTitle: hasTitle, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), hasRightAction && (_jsx(Animated.View, { entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }))] }))] }) }));
+    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/NavHeader.styles.js

@@ -1,67 +1,97 @@
 import { numToPx } from '@ovotech/element-core';
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
-const Z_INDEX = 1000;
-export const NavWrapper = styled(Animated.View)(({ theme, collapsed }) => css `
+import { SkeletonButton } from '../SkeletonButton';
+import { SkeletonHeading } from '../SkeletonHeading';
+import { NavButton } from './NavHeaderComponents/NavButton';
+export const ShadowContainer = styled(Animated.View)(({ theme }) => css `
+    shadow-color: ${theme.color.neutral.black};
+    shadow-offset: 0 ${numToPx(theme.space[100])};
+    shadow-radius: ${numToPx(theme.space[200])};
+  `);
+export const NavContainer = styled(Animated.View)(({ theme, layer, isCollapsed, breakpoints }) => css `
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
     width: 100%;
-    position: absolute;
-
-    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */
-    z-index: ${Z_INDEX};
-    background-color: ${theme.color.surface.surface};
+    padding-top: ${layer === 0 && !isCollapsed
+    ? numToPx(theme.space[2000])
+    : numToPx(theme.space[1800])};
 
-    ${collapsed
-    ? css `
-          border-bottom-width: ${numToPx(theme.border.width.sm)};
-          border-bottom-style: solid;
-          border-bottom-color: ${theme.color.input.borderDim};
-        `
-    : ''}
+    padding-left: ${breakpoints.largeAndUp
+    ? numToPx(theme.space[2000])
+    : breakpoints.mediumAndUp
+        ? numToPx(theme.space[800])
+        : numToPx(theme.space[400])};
+    padding-right: ${breakpoints.largeAndUp
+    ? numToPx(theme.space[2000])
+    : breakpoints.mediumAndUp
+        ? numToPx(theme.space[800])
+        : numToPx(theme.space[400])};
+    padding-bottom: ${layer === 0 || layer === 1
+    ? numToPx(theme.space[400])
+    : 0};
+    background-color: ${layer < 2
+    ? theme.color.brand.brand
+    : theme.color.surface.bright};
+    overflow: hidden;
   `);
-export const NavContainer = styled.View(({ theme, topOffset, hasTitle }) => css `
-    position: absolute;
-
-    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */
-    z-index: ${Z_INDEX + 1};
-    width: 100%;
+export const HeaderContainer = styled(Animated.View)(({ theme }) => css `
+    display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    width: 100%;
     align-items: center;
-    flex-wrap: wrap;
-    padding-top: ${topOffset
-    ? numToPx(topOffset)
-    : numToPx(theme.space[hasTitle ? 200 : 400])};
-    padding-bottom: ${numToPx(theme.space[hasTitle ? 200 : 400])};
-    padding-left: ${numToPx(theme.space[400])};
-    padding-right: ${numToPx(theme.space[400])};
+    gap: ${numToPx(theme.space[100])};
   `);
-export const ExpandedTitle = styled(Animated.Text)(({ theme, hasBackButton, hasRightAction, hasTitle }) => css `
-    width: ${hasRightAction ? '100%' : '65%'};
-    font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(theme.font.size['4xl'].mediaQuery[hasBackButton ? 'sm' : 'lg'])};
-    line-height: ${numToPx(hasBackButton
-    ? theme.font.lineHeight['4xl'].mediaQuery.sm
-    : theme.space[1300])};
-    color: ${theme.color.brand.brand};
-    ${!hasTitle && 'height: 0;'};
+export const SkeletonNavHeading = styled(SkeletonHeading)(({}) => css `
+    min-width: 70%;
+    height: 100%;
   `);
-export const CollapsedTitleWrapper = styled(Animated.View) `
-  width: 33.3%;
-  align-items: center;
-`;
-export const CollapsedTitle = styled.Text(({ theme }) => css `
-    font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(theme.font.size.xl.mediaQuery.sm)};
-    line-height: ${numToPx(theme.font.lineHeight.xl.mediaQuery.sm)};
-    color: ${theme.color.brand.brand};
+export const SkeletonNavButton = styled(SkeletonButton)(({ theme }) => css `
+    width: ${numToPx(theme.space[1000])};
+    height: ${numToPx(theme.space[1000])};
   `);
-export const HeaderGap = styled.View(({ hasRightAction }) => css `
-    width: ${hasRightAction ? '20%' : '33.3%'};
+export const SideContainer = styled.View(({ theme, side, flex = 1 }) => css `
+    display: flex;
+    gap: ${side === 'end' ? numToPx(theme.space[200]) : 0};
+    flex-direction: row;
+    flex: ${flex};
+    flex-basis: 0;
+    justify-content: ${side === 'start' ? 'flex-start' : 'flex-end'};
+    max-height: ${numToPx(theme.space[1000])};
   `);
-export const BackActionWrapper = styled(Animated.View)(({ theme, collapsed, hasBackButton }) => css `
-    margin-bottom: ${collapsed ? '0' : numToPx(theme.space[400])};
-    width: ${collapsed ? '33.3%' : '100%'};
-
-    /* Important for maintaining white space above the title on main app screens */
-    height: ${hasBackButton ? numToPx(theme.space[1000]) : undefined};
+export const TitleContainer = styled.View(({ theme, layer, isIOS }) => css `
+    display: flex;
+    flex-direction: column;
+    align-items: ${isIOS && layer > 1 ? 'center' : 'flex-start'};
+    max-height: ${numToPx(theme.space[1000])};
+    min-width: ${numToPx(theme.space[1000])};
+  `);
+export const StepCounterBar = styled.View(({ theme, count, currentStep }) => css `
+    flex-grow: 1;
+    height: 2px;
+    max-width: 50%;
+    min-width: 10%;
+    background-color: ${count <= currentStep
+    ? theme.color.brand.brand
+    : theme.color.surface.dim};
+  `);
+export const SkeletonStepCounterBar = styled(SkeletonButton)(({ theme }) => css `
+    min-width: 100%;
+    height: ${numToPx(theme.space[50])};
+  `);
+export const StepCounterContainer = styled.View(({ theme }) => css `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    gap: ${numToPx(theme.space[100])};
+    padding-bottom: ${numToPx(theme.space[100])};
+    padding-top: ${numToPx(theme.space[200])};
+    max-height: ${numToPx(theme.space[100])};
+    min-width: 100%;
+  `);
+export const NavBackButton = styled(NavButton)(({ theme }) => css `
+    margin-left: -${numToPx(theme.space[300])};
   `);

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,23 @@
+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/NavHeader/NavHeaderComponents/StepCounterBars.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SkeletonStepCounterBar, StepCounterBar, StepCounterContainer, } from '../NavHeader.styles';
+export const StepCounterBars = ({ totalSteps, currentStep, loading = false, }) => {
+    return (_jsx(StepCounterContainer, { children: loading ? (_jsx(SkeletonStepCounterBar, {})) : (Array.from({ length: totalSteps }).map((_, index) => (_jsx(StepCounterBar, { count: index + 1, currentStep: currentStep }, index + 1)))) }));
+};

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

@@ -0,0 +1,23 @@
+export const checkHasAccount = (props) => {
+    return props.layer === 0 || props.layer === 1;
+};
+export const getTitleLength = ({ layer, title }) => {
+    const TITLE_HOME_MAX_LENGTH = 14;
+    const TITLE_LAYER_1_MAX_LENGTH = 21;
+    const TITLE_LAYER_2_PLUS_MAX_LENGTH = 28;
+    if (layer === 0) {
+        return title.length > TITLE_HOME_MAX_LENGTH
+            ? title.slice(0, TITLE_HOME_MAX_LENGTH) + '...'
+            : title;
+    }
+    if (layer === 1) {
+        return title.length > TITLE_LAYER_1_MAX_LENGTH
+            ? title.slice(0, TITLE_LAYER_1_MAX_LENGTH)
+            : title;
+    }
+    if (layer > 1) {
+        return title.length > TITLE_LAYER_2_PLUS_MAX_LENGTH
+            ? title.slice(0, TITLE_LAYER_2_PLUS_MAX_LENGTH) + '...'
+            : title;
+    }
+};

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { PasswordInput } from '../PasswordInput';
-export const PasswordField = ({ hasVisibilityToggle, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle }) }));
+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

@@ -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, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ...props }));
+    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 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { PhoneInput } from '../PhoneInput';
-export const PhoneField = ({ ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(PhoneInput, {}) }));
+export const PhoneField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(PhoneInput, { ref: ref }) }));
 };

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWindowDimensions, View } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import styled, { useTheme } from '../../styled.native';
+const BackgroundWrapper = styled(View)({
+    width: '100%',
+    alignItems: 'center',
+});
+const ContentContainer = styled(View)(({ paddingHorizontal, minWidth, maxWidth }) => ({
+    width: '100%',
+    paddingHorizontal,
+    minWidth,
+    maxWidth,
+}));
+export const ScreenView = ({ children }) => {
+    const { xsmallAndUp, smallAndUp, mediumAndUp } = useBreakpoint();
+    const { width } = useWindowDimensions();
+    const theme = useTheme();
+    let maxWidth = width;
+    let paddingHorizontal = theme.space[400];
+    if (mediumAndUp) {
+        maxWidth = 1024;
+        paddingHorizontal = theme.space[800];
+    }
+    else if (smallAndUp || xsmallAndUp) {
+        maxWidth = 484;
+        paddingHorizontal = theme.space[500];
+    }
+    else if (width < 359) {
+        paddingHorizontal = theme.space[400];
+    }
+    return (_jsx(BackgroundWrapper, { children: _jsx(ContentContainer, { paddingHorizontal: paddingHorizontal, maxWidth: maxWidth, children: children }) }));
+};

package/dist/esm/src/components/ScreenView/index.js

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

package/dist/esm/src/components/SegmentedControls/components/SegmentButton.js

@@ -47,7 +47,7 @@ export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, i
         // choices go on the second row. The only way I could get it to work
         // was to hardcode the denominator to 3 for the single row ones
         // and 1.1 for the multiple row ones.
-        yRef.current = y - height / (multipleRows ? 1.1 : 3 * fontScale);
+        yRef.current = y - height / (multipleRows ? 2.5 : 3 * fontScale);
         heightRef.current = height;
         widthRef.current = width;
         onLayout(width, height, x, yRef.current);