@ovotech/element-native 5.3.0 → 5.4.0

package/dist/esm/src/components/SelectField/Select.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import groupBy from 'lodash.groupby';
 import { Fragment, useState } from 'react';
-import { Dimensions, Modal, ScrollView, View } from 'react-native';
+import { Dimensions, Modal, ScrollView, View, } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
@@ -30,7 +31,7 @@ const DropdownWrapper = styled.TouchableOpacity(({ theme }) => css `
     /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
     background-color: ${theme.color.brand.dark}80;
   `);
-const DropdownContainer = styled.SafeAreaView(({ theme }) => css `
+const DropdownContainer = styled(SafeAreaView)(({ theme }) => css `
     width: 95%;
     max-height: 70%;
     border-radius: ${numToPx(theme.border.radius.sm)};
@@ -74,7 +75,7 @@ const StyledCategory = styled(P)(({ theme }) => css `
     background-color: ${theme.color.surface.surface};
     padding: ${numToPx(theme.space[100])} ${numToPx(theme.space[400])};
   `);
-export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', }) => {
+export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', ref, }) => {
     const [isOpen, setOpen] = useState(false);
     const [selected, setSelected] = useState(defaultSelected);
     const height = Dimensions.get('window').height;
@@ -89,5 +90,5 @@ export const Select = ({ options = [], defaultSelected = { label: '', value: 'de
         label: `-- ${noOptionMessage} --`,
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), ref: ref, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
 };

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { Select } from './Select';
-export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ...rest }) => (_jsx(Field, { affixWidth: 20, error: error, ...rest, children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID }) }) }));
+export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ref, ...rest }) => (_jsx(Field, { affixWidth: 20, error: error, ...rest, children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) }));

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

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

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from '../Input/Input';
-const TextInput = (props) => _jsx(Input, { ...props, keyboardType: "default", ref: props.ref });
+const TextInput = ({ ref, ...props }) => (_jsx(Input, { ...props, keyboardType: "default", ref: ref }));
 export { TextInput };

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

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

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

@@ -16,7 +16,7 @@ export const StyledToggleInputWrapper = styled.View(({ theme, labelPosition }) =
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
             : 'margin-right: 10px;'
-        : null}
+        : ''}
     `;
 });
 export const StyledToggleInput = styled.View(({ theme, checked }) => {

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

@@ -36,6 +36,7 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
+export * from './ScreenView';
 export * from './RemoteImage';
 export * from './SegmentedControls';
 export * from './SelectField';

package/dist/esm/src/hooks/index.js

@@ -1,2 +1,2 @@
-export * from './use-breakpoint';
+export * from './use-breakpoint.native';
 export * from './use-full-width';

package/dist/esm/src/hooks/use-full-width.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useBreakpoint } from './use-breakpoint';
+import { useBreakpoint } from './use-breakpoint.native';
 export const useFullWidth = (fullWidth = 'small') => {
     const [isFullWidth, setIsfullWidth] = useState(true);
     const { smallAndUp } = useBreakpoint();

package/dist/src/components/Button/Button.d.ts

@@ -3,7 +3,7 @@ import { TouchableOpacityProps } from 'react-native';
 import { IconName } from '../../providers/icons-types';
 import { SizeSettings, StyledButtonWrapper } from './Button.styles';
 export type ButtonVariantName = 'surface' | 'destructive' | 'outline' | 'outline-variant';
-type ButtonBase = PropsWithChildren<TouchableOpacityProps & {
+export type ButtonBase = PropsWithChildren<TouchableOpacityProps & {
     variant?: ButtonVariantName;
     inverted?: boolean;
     size?: SizeSettings;
@@ -15,11 +15,12 @@ type ButtonWithText = ButtonBase & {
     iconLeft?: IconName;
     iconRight?: IconName;
 };
-type ButtonIconOnly = ButtonBase & {
+export type ButtonIconOnly = ButtonBase & {
     children?: never;
     iconLeft?: IconName;
     iconRight?: IconName;
 };
+export declare const DEFAULT_BUTTON_VARIANT = "surface";
 export type ButtonProps = ButtonWithText | ButtonIconOnly;
 declare const Button: ({ iconLeft, iconRight, children, fullWidth, variant, inverted, size, accessibilityRole, activeOpacity, ref, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 type OmittedButtonProps = Omit<ComponentProps<typeof Button>, 'variant' | 'children'>;

package/dist/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/src/components/Button/Button.styles.d.ts

@@ -2309,6 +2309,6 @@ export declare const StyledButtonText: import("styled-components").StyledCompone
 }, {
     smallAndUp: boolean;
     inverted: boolean;
-    variant: ButtonVariantName;
     size: SizeSettings;
+    variant: ButtonVariantName;
 }, never>;

package/dist/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/src/components/Cards/IconDataCard/IconDataCard.styles.d.ts

@@ -3443,7 +3443,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
 }, {}, never>;
 export declare const Metric: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<import("react-native").TextProps & Omit<{
     inverted?: boolean;
-    level: "xl" | "2xl" | "3xl" | "4xl";
+    level: import("../../Heading/Heading").HeadingLevel;
     variant?: "brand" | "surface";
 }, "level">>) => import("react/jsx-runtime").JSX.Element, {
     color: {
@@ -4020,7 +4020,7 @@ export declare const Metric: import("styled-components").StyledComponent<(props:
 }, {}, never>;
 export declare const SubMetric: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<import("react-native").TextProps & Omit<{
     inverted?: boolean;
-    level: "xl" | "2xl" | "3xl" | "4xl";
+    level: import("../../Heading/Heading").HeadingLevel;
     variant?: "brand" | "surface";
 }, "level">>) => import("react/jsx-runtime").JSX.Element, {
     color: {

package/dist/src/components/Cards/LinkTextCard/LinkTextCard.styles.d.ts

@@ -2879,7 +2879,7 @@ export declare const ImageContent: import("styled-components").StyledComponent<t
 }, {}, never>;
 export declare const Title: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<import("react-native").TextProps & Omit<{
     inverted?: boolean;
-    level: "xl" | "2xl" | "3xl" | "4xl";
+    level: import("../../Heading/Heading").HeadingLevel;
     variant?: "brand" | "surface";
 }, "level">>) => import("react/jsx-runtime").JSX.Element, {
     color: {

package/dist/src/components/CurrencyField/CurrencyField.d.ts

@@ -1,5 +1,5 @@
 import { CurrencyInputProps } from '../CurrencyInput';
 import { FieldProps } from '../Field';
 type Props = Omit<FieldProps, 'children'> & CurrencyInputProps;
-export declare const CurrencyField: ({ ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CurrencyField: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/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/src/components/EmailField/EmailField.d.ts

@@ -1,5 +1,5 @@
 import { FieldProps } from '../Field';
 import { InputProps } from '../Input/Input';
 type Props = Omit<FieldProps, 'children'> & InputProps;
-export declare const EmailField: ({ ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const EmailField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/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/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/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/src/components/Heading/Heading.d.ts

@@ -1,10 +1,12 @@
 import { PropsWithChildren } from 'react';
 import { TextProps } from 'react-native';
+export type HeadingLevel = 'xl' | '2xl' | '3xl' | '4xl';
 type HeadingProps = {
     inverted?: boolean;
-    level: 'xl' | '2xl' | '3xl' | '4xl';
+    level: HeadingLevel;
     variant?: 'brand' | 'surface';
 };
+export declare const Heading: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & HeadingProps>) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading1: (props: PropsWithChildren<TextProps & Omit<HeadingProps, "level">>) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading2: (props: PropsWithChildren<TextProps & Omit<HeadingProps, "level">>) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading3: (props: PropsWithChildren<TextProps & Omit<HeadingProps, "level">>) => import("react/jsx-runtime").JSX.Element;

package/dist/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/src/components/NavHeader/NavHeader.d.ts

@@ -1,24 +1,27 @@
-import { IconNameExtended } from '../../providers';
-export type RightActionConfig = {
-    iconName?: IconNameExtended;
-    onActionPress?: () => void;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
+import { IconName } from '../../providers';
+export type Layer = 0 | 1 | 2 | 3 | 4;
+type ActionButton = {
+    icon?: IconName;
+    onPress: () => void;
 };
-export type NavHeaderProps = {
+type StepCounterProps = {
+    totalSteps: number;
+    currentStep: number;
+};
+export type ScrollState = 'initial' | 'scrollStart' | 'scrolling' | 'scrollBack';
+export type NavHeaderProps<L extends Layer> = {
+    layer: L;
     title?: string;
-    scrolled: boolean;
-    canGoBack?: boolean;
-    backButtonText?: string;
-    topOffset?: number;
-    rightActionConfig?: RightActionConfig;
-    onBackButtonPress?: () => void;
-    /**
-     * This callback is used to send the height of the NavContainer
-     * to the app side. It will be used to set content offset
-     * because NavHeader is absolutely positioned.
-     * @param height - height of the expanded NavHeader
-     */
-    onHeaderHeightChange?: (height: number) => void;
+    actionButtons?: L extends 0 | 1 ? {
+        account?: ActionButton;
+        help?: ActionButton;
+    } : {
+        help?: ActionButton;
+    };
+    onBackPress?: () => void;
+    stepCounter?: StepCounterProps;
+    scrollState: ScrollState;
+    loading?: boolean;
 };
-export declare const NavHeader: ({ title, scrolled, canGoBack, rightActionConfig, topOffset, backButtonText, onHeaderHeightChange, onBackButtonPress, }: NavHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavHeader: <L extends Layer>({ layer, onBackPress, actionButtons, title, stepCounter, scrollState, loading, }: NavHeaderProps<L>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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 }))] })) }) }));
 };