@ovotech/element-native 5.3.0 → 5.4.1

package/dist/esm/providers/icons/Star.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Star = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", d: "m8 5.013.782 1.394.303.539.595.169 1.752.499-1.037.904-.642.56.153.839.279 1.529-1.553-.721L8 10.43l-.632.294-1.553.721.279-1.53.153-.838-.642-.56-1.037-.905 1.752-.498.595-.169.303-.54L8 5.014ZM8 1.95 5.91 5.672 1.5 6.925l3.118 2.723-.799 4.38L8 12.085l4.18 1.942-.798-4.38 3.118-2.72-4.41-1.255-2.09-3.723H8Z" }) }));

package/dist/esm/providers/icons/StarFilled.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const StarFilled = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", d: "M8 1.948v.001l2.089 3.722 4.41 1.255-3.118 2.72.799 4.38L8 12.085l-4.18 1.943.798-4.38L1.5 6.924l4.41-1.253L8 1.95h-.001H8Z" }) }));

package/dist/esm/providers/icons/Sun.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Sun = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "M8.75 1.5h-1.5v1.418h1.5V1.5Zm2.079 3.671A3.987 3.987 0 0 0 8 4a4 4 0 1 0 2.829 1.171ZM9.768 9.768c-.472.473-1.1.732-1.768.732-.667 0-1.295-.26-1.768-.732A2.484 2.484 0 0 1 5.5 8c0-.668.26-1.296.733-1.769A2.484 2.484 0 0 1 8.001 5.5c.667 0 1.295.26 1.768.731.472.473.732 1.1.732 1.769 0 .668-.26 1.295-.733 1.768ZM1.5 7.239h1.43v1.5H1.5v-1.5Zm5.75 5.821V14.5h1.5v-1.441h-1.5Zm5.82-5.82h1.43v1.5h-1.43v-1.5Zm-1.049-4.332-.966.966 1.061 1.06.966-.965-1.06-1.061Zm-9.103 1.06 1.06-1.06.967.966-1.061 1.06-.966-.966Zm.966 7.077-.966.966 1.061 1.06.966-.966-1.06-1.06Zm7.171 1.06 1.06-1.06.967.965-1.061 1.061-.966-.966Z", clipRule: "evenodd" }) }));

package/dist/esm/providers/icons/Torch.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Torch = (props) => (_jsxs(Svg, { viewBox: "0 0 16 16", ...props, children: [_jsx(Path, { fill: "currentColor", d: "M4.728 14V6.714L3.016 5.012 3 1h10v4.012L11.273 6.73v6.173l-1.5-.402L9.37 14H4.726ZM11.5 3.494V2.5H4.506l.004.994h6.99ZM9.773 12.5V6.105l.442-.44.675-.671H5.124l.66.656.442.44v6.41h3.547Z" }), _jsx(Path, { fill: "currentColor", d: "M7 10V8h2v2H7Z" })] }));

package/dist/esm/providers/icons/Trees.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Trees = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "M9.755 2.7a3.093 3.093 0 0 1 3.043 2.542 3.093 3.093 0 0 1-2.047 5.785V14.5h-1.5v-2.877a3.093 3.093 0 0 1-2.565-5.456A3.093 3.093 0 0 1 9.755 2.7Zm1.218 6.836A1.595 1.595 0 0 0 13 8.003c0-.604-.336-1.149-.877-1.422l-.669-.337-.133-.737A1.589 1.589 0 0 0 9.755 4.2a1.595 1.595 0 0 0-1.58 1.787l.1.838-.664.522A1.585 1.585 0 0 0 7 8.599a1.595 1.595 0 0 0 2.25 1.453V7.89l1.5-.402v1.984l.223.063Zm-6.264.422.218-.18a3.71 3.71 0 0 0 1.472 1.945v2.788h-1.5v-2.96a2.543 2.543 0 0 1-2.424-4.397 2.543 2.543 0 0 1 3.662-2.582 3.689 3.689 0 0 0-.225 1.19l-.003.196-.135.14a.922.922 0 0 0-.011.012l-.011.012a1.043 1.043 0 0 0-1.788.851l.101.838-.664.521a1.045 1.045 0 1 0 1.308 1.626Z", clipRule: "evenodd" }) }));

package/dist/esm/providers/icons/Tune.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Tune = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "m4 1.485-1.5.405V4.5h-1V6H5V4.5H4V1.485Zm3.25.42 1.5-.405v8.75h1v1.5h-3.5v-1.5h1V1.905Zm1.5 12.19-1.5.405v-1.75h1.5v1.345Zm3.25.39 1.5-.405V9.75H12v4.735Zm-8-.405-1.5.405V7H4v7.08Zm9.5-12.595V7.25h1v1.5H11v-1.5h1V1.89l1.5-.405Z", clipRule: "evenodd" }) }));

package/dist/esm/providers/icons/User.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const User = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "M11.255 4.756a3.255 3.255 0 1 1-6.51 0 3.255 3.255 0 0 1 6.51 0Zm-1.5 0C9.755 3.786 8.968 3 8 3c-.968 0-1.755.788-1.755 1.755 0 .968.787 1.756 1.755 1.756.968 0 1.755-.788 1.755-1.756ZM14.5 9.979v2.619l-1.5.401v-1.865L8 9.813l-5 1.321V13h9.999l.402 1.5H1.5V9.979L8 8.262l6.5 1.717Z", clipRule: "evenodd" }) }));

package/dist/esm/providers/icons/UserFilled.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const UserFilled = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "M11.255 4.756a3.255 3.255 0 1 1-6.51 0 3.255 3.255 0 0 1 6.51 0ZM14.5 14.5V9.979L8 8.262 1.5 9.979V14.5h13Zm0 0L12.999 13H3h10v-.001l1.5 1.501Z", clipRule: "evenodd" }) }));

package/dist/esm/providers/icons/Wallet.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Wallet = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "M14.5 3.025v8.073L13 11.5V4.525H9.126l-.003.013-.049-.013H3V11.5h10l.402 1.5H1.5V3.025h1.651l.41-1.53 5.71 1.53H14.5Zm-4.38 4.447 1.438-.381.381 1.437-1.437.381-.382-1.437Z", clipRule: "evenodd" }) }));

package/dist/esm/providers/icons/WalletFilled.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const WalletFilled = (props) => (_jsx(Svg, { viewBox: "0 0 21 20", ...props, children: _jsx(Path, { fill: "currentColor", d: "M18.325 3.781h-6.537L4.65 1.87 4.137 3.78H2.075V16.25h16.25V3.781ZM14.65 8.863l.475 1.793-1.794.475-.475-1.793 1.794-.475Z" }) }));

package/dist/esm/providers/icons/WarmHome.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const WarmHome = (props) => (_jsxs(Svg, { viewBox: "0 0 16 16", ...props, children: [_jsx(Path, { fill: "currentColor", d: "m13 13 1.5-.402V5L8 1.5 1.5 5v9.5h11.902L13 13Zm0 0H3V5.896l5-2.692 5 2.692V13Z" }), _jsx(Path, { fill: "currentColor", d: "m9.604 11.804-.452-.599c-.406-.539-.928-1.878.004-3.091.497-.647-.024-1.444-.029-1.452L8.71 6.04l1.248-.833.416.623c.42.628.886 2.009-.029 3.199a.934.934 0 0 0-.179.855c.061.24.182.417.184.419l.451.598-1.197.903v.001ZM6.102 11.804l-.452-.599c-.405-.539-.928-1.878.004-3.091.498-.647-.023-1.444-.029-1.452L5.21 6.04l1.248-.833.416.623c.42.628.885 2.009-.029 3.199a.934.934 0 0 0-.179.855c.06.24.182.417.183.419l.452.598-1.198.903v.001Z" })] }));

package/dist/esm/providers/icons/Warning.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Warning = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "M1.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0ZM3 8c0 2.757 2.243 5 5 5s5-2.243 5-5-2.243-5-5-5-5 2.243-5 5Zm5.56 1.275.35-4.87H7.09l.35 4.87h1.12Zm-.02.46-1.47.39.39 1.47 1.47-.39-.39-1.47Z", clipRule: "evenodd" }) }));

package/dist/esm/providers/icons/WebAddress.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const WebAddress = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", d: "m11.644 10.805-.848.848-1.737-1.738-1.061-1.06-1.061 1.06-.244.244-1.41-4.873 4.885 1.399-.261.26-1.061 1.061 1.06 1.061 1.737 1.736.776-1.345-1.452-1.452 2.062-2.062-9.94-2.847 2.869 9.918 2.04-2.039 2.798 2.798 2.193-2.193-1.345-.776Z" }) }));

package/dist/esm/providers/icons/WindPower.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const WindPower = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", d: "m9.548 8.401 3.674.029.344-.595-3.962-1.062A1.617 1.617 0 0 0 8.4 5.385v-.65L6.588 1.539h-.687l1.108 4.137a1.611 1.611 0 0 0-.592 1.585l-.555.32L4 10.748l.344.596 2.914-2.915-1.018 6.043h3.52L8.733 8.383c.13-.066.25-.15.356-.247l.458.264v.001Zm-2.125 5.072L8 10.048l.577 3.425H7.423ZM8.54 7.238a.614.614 0 0 1-.419.312l-.026.004a.613.613 0 1 1 .446-.316Z" }) }));

package/dist/esm/providers/icons/index.js

@@ -0,0 +1,93 @@
+export * from './Address';
+export * from './Advice';
+export * from './Archive';
+export * from './ArrowDown';
+export * from './ArrowLeft';
+export * from './ArrowRight';
+export * from './ArrowUp';
+export * from './Award';
+export * from './Battery';
+export * from './CalBook';
+export * from './Cal';
+export * from './CaretArrowDown';
+export * from './CaretArrowLeft';
+export * from './CaretArrowRight';
+export * from './CaretArrowUp';
+export * from './CaretDown';
+export * from './CaretLeft';
+export * from './CaretRight';
+export * from './CaretUp';
+export * from './ChartFilled';
+export * from './Chart';
+export * from './CheckCircle';
+export * from './Check';
+export * from './ChevronDown';
+export * from './ChevronLeftSmallFirst';
+export * from './ChevronLeftSmall';
+export * from './ChevronLeft';
+export * from './ChevronRightSmallLast';
+export * from './ChevronRightSmall';
+export * from './ChevronRight';
+export * from './ChevronUp';
+export * from './Circle';
+export * from './CloseCircle';
+export * from './Cross';
+export * from './Doc';
+export * from './Dollar';
+export * from './Download';
+export * from './EcoHome';
+export * from './Eco';
+export * from './Edit';
+export * from './ElectricCar';
+export * from './ElectricHome';
+export * from './Electricity';
+export * from './EnergyAdvice';
+export * from './Equals';
+export * from './Euro';
+export * from './Gas';
+export * from './GlobeAddress';
+export * from './HelpFilled';
+export * from './Help';
+export * from './Hide';
+export * from './HomeFilled';
+export * from './Home';
+export * from './HydroPower';
+export * from './Info';
+export * from './Link';
+export * from './Logo';
+export * from './MailOpen';
+export * from './Mail';
+export * from './Menu';
+export * from './MessageFilled';
+export * from './Message';
+export * from './Minus';
+export * from './Mobile';
+export * from './NewWindow';
+export * from './PaymentCardFilled';
+export * from './PaymentCard';
+export * from './Phone';
+export * from './Plus';
+export * from './Pound';
+export * from './PricingFilled';
+export * from './Pricing';
+export * from './Search';
+export * from './Security';
+export * from './ShopFilled';
+export * from './Shop';
+export * from './Show';
+export * from './SmartHome';
+export * from './SmartMeter';
+export * from './Solar';
+export * from './StarFilled';
+export * from './Star';
+export * from './Sun';
+export * from './Torch';
+export * from './Trees';
+export * from './Tune';
+export * from './UserFilled';
+export * from './User';
+export * from './Wallet';
+export * from './WarmHome';
+export * from './Warning';
+export * from './WebAddress';
+export * from './WindPower';

package/dist/esm/providers/index.js

@@ -0,0 +1,2 @@
+export * from './IconsProvider';
+export * from './types';

package/dist/esm/providers/types.js

@@ -0,0 +1 @@
+export {};

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])};
   `);