@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/NavHeader/NavHeader.js

@@ -1,15 +1,18 @@
-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';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const hooks_1 = require("../../hooks");
+const Heading_1 = require("../Heading/Heading");
+const P_1 = require("../P");
+const Strong_1 = require("../Strong");
+const NavHeader_styles_1 = require("./NavHeader.styles");
+const ActionButtons_1 = require("./NavHeaderComponents/ActionButtons");
+const StepCounterBars_1 = require("./NavHeaderComponents/StepCounterBars");
+const utils_1 = require("./utils");
 const baseStyle = {
     hasDropShadow: false,
     isCollapsed: false,
@@ -50,19 +53,19 @@ const LayerHeadingMap = {
     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 NavHeader = ({ layer, onBackPress, actionButtons, title, stepCounter, scrollState, loading = false, }) => {
+    const displayTitle = (0, utils_1.getTitleLength)({ layer, title });
+    const platform = react_native_1.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 shadowOpacity = (0, react_native_reanimated_1.useSharedValue)(0.5);
+    const elevation = (0, react_native_reanimated_1.useSharedValue)(9);
+    const LT = react_native_reanimated_1.LinearTransition.duration(ANIMATION_DURATION);
     const FADE_IN_DISTANCE = layer === 0 ? -68 : -50;
     const FADE_OUT_DISTANCE = layer === 0 ? -72 : -52;
-    const ExitAnimation = useMemo(() => {
+    const ExitAnimation = (0, react_1.useMemo)(() => {
         var _a;
-        return _a = class FadeOutUp extends ComplexAnimationBuilder {
+        return _a = class FadeOutUp extends react_native_reanimated_1.ComplexAnimationBuilder {
                 constructor() {
                     super(...arguments);
                     this.build = () => {
@@ -82,11 +85,7 @@ export const NavHeader = ({ layer, onBackPress, actionButtons, title, stepCounte
                                         },
                                     ],
                                 },
-                                initialValues: {
-                                    opacity: 1,
-                                    transform: [{ translateY: 0 }],
-                                    ...initialValues,
-                                },
+                                initialValues: Object.assign({ opacity: 1, transform: [{ translateY: 0 }] }, initialValues),
                                 callback,
                             };
                         };
@@ -100,31 +99,32 @@ export const NavHeader = ({ layer, onBackPress, actionButtons, title, stepCounte
             _a;
     }, [layer]);
     const FadingAnimation = {
-        Enter: FadeInUp.duration(ANIMATION_DURATION)
-            .easing(Easing.ease)
+        Enter: react_native_reanimated_1.FadeInUp.duration(ANIMATION_DURATION)
+            .easing(react_native_reanimated_1.Easing.ease)
             .withInitialValues({ transform: [{ translateY: FADE_IN_DISTANCE }] }),
-        Exit: ExitAnimation.duration(ANIMATION_DURATION).easing(Easing.linear),
+        Exit: ExitAnimation.duration(ANIMATION_DURATION).easing(react_native_reanimated_1.Easing.linear),
     };
-    useEffect(() => {
-        shadowOpacity.value = withTiming(hasDropShadow ? 0.5 : 0, {
+    (0, react_1.useEffect)(() => {
+        shadowOpacity.value = (0, react_native_reanimated_1.withTiming)(hasDropShadow ? 0.5 : 0, {
             duration: ANIMATION_DURATION,
-            easing: Easing.ease,
+            easing: react_native_reanimated_1.Easing.ease,
         });
-        elevation.value = withTiming(hasDropShadow ? 9 : 0, {
+        elevation.value = (0, react_native_reanimated_1.withTiming)(hasDropShadow ? 9 : 0, {
             duration: ANIMATION_DURATION,
-            easing: Easing.ease,
+            easing: react_native_reanimated_1.Easing.ease,
         });
     }, [scrollState, shadowOpacity, hasDropShadow, elevation, isCollapsed]);
-    const animatedShadowStyle = useAnimatedStyle(() => {
+    const animatedShadowStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         return {
             shadowOpacity: shadowOpacity.value,
             elevation: elevation.value,
         };
     });
-    const breakpoints = useBreakpoint();
-    return (_jsx(ShadowContainer, { style: [animatedShadowStyle], children: _jsx(NavContainer, { breakpoints: breakpoints, layer: layer, layout: LT, isCollapsed: isCollapsed, children: !isCollapsed && (_jsxs(_Fragment, { children: [_jsxs(HeaderContainer, { layout: LT, entering: FadingAnimation.Enter, exiting: FadingAnimation.Exit, children: [_jsx(SideContainer, { flex: titleIsCentreAligned ? 1 : 0, side: "start", children: layer > 1 && (_jsx(NavBackButton, { onPress: () => {
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.ShadowContainer, { style: [animatedShadowStyle], children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavContainer, { breakpoints: breakpoints, layer: layer, layout: LT, isCollapsed: isCollapsed, children: !isCollapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavHeader_styles_1.HeaderContainer, { layout: LT, entering: FadingAnimation.Enter, exiting: FadingAnimation.Exit, children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.SideContainer, { flex: titleIsCentreAligned ? 1 : 0, side: "start", children: layer > 1 && ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.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
+                                    }, variant: "bright", iconLeft: platform === 'ios' ? 'chevron-left' : 'arrow-left' })) }), (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.TitleContainer, { layer: layer, isIOS: platform === 'ios', children: [loading ? ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.SkeletonNavHeading, { size: "100%", headingComponent: layer === 0 ? Heading_1.Heading2 : layer === 1 ? Heading_1.Heading3 : Heading_1.Heading4 })) : layer < 2 ? ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { inverted: layer < 2, level: LayerHeadingMap[layer], children: displayTitle })) : ((0, jsx_runtime_1.jsx)(P_1.P, { size: "md", children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { maxLength: 23, children: displayTitle }) })), stepCounter && !loading && ((0, jsx_runtime_1.jsx)(P_1.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 }))] })) }) }));
+                                            : stepCounter.totalSteps} of ${stepCounter.totalSteps}` }))] }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.SideContainer, { side: "end", children: actionButtons && ((0, jsx_runtime_1.jsx)(ActionButtons_1.ActionButtons, { loading: loading, layer: layer, actionButtons: actionButtons })) })] }), stepCounter && ((0, jsx_runtime_1.jsx)(StepCounterBars_1.StepCounterBars, { loading: loading, totalSteps: stepCounter.totalSteps, currentStep: stepCounter.currentStep }))] })) }) }));
 };
+exports.NavHeader = NavHeader;

package/dist/components/NavHeader/NavHeader.styles.d.ts

@@ -39,6 +39,7 @@ export declare const ShadowContainer: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -81,6 +82,7 @@ export declare const ShadowContainer: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -89,6 +91,7 @@ export declare const ShadowContainer: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -614,6 +617,7 @@ export declare const NavContainer: import("styled-components").StyledComponent<i
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -656,6 +660,7 @@ export declare const NavContainer: import("styled-components").StyledComponent<i
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -664,6 +669,7 @@ export declare const NavContainer: import("styled-components").StyledComponent<i
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1193,6 +1199,7 @@ export declare const HeaderContainer: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1235,6 +1242,7 @@ export declare const HeaderContainer: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1243,6 +1251,7 @@ export declare const HeaderContainer: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1771,6 +1780,7 @@ export declare const SkeletonNavHeading: import("styled-components").StyledCompo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1813,6 +1823,7 @@ export declare const SkeletonNavHeading: import("styled-components").StyledCompo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1821,6 +1832,7 @@ export declare const SkeletonNavHeading: import("styled-components").StyledCompo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2348,6 +2360,7 @@ export declare const SkeletonNavButton: import("styled-components").StyledCompon
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2390,6 +2403,7 @@ export declare const SkeletonNavButton: import("styled-components").StyledCompon
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2398,6 +2412,7 @@ export declare const SkeletonNavButton: import("styled-components").StyledCompon
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2923,6 +2938,7 @@ export declare const SideContainer: import("styled-components").StyledComponent<
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2965,6 +2981,7 @@ export declare const SideContainer: import("styled-components").StyledComponent<
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2973,6 +2990,7 @@ export declare const SideContainer: import("styled-components").StyledComponent<
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -3501,6 +3519,7 @@ export declare const TitleContainer: import("styled-components").StyledComponent
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -3543,6 +3562,7 @@ export declare const TitleContainer: import("styled-components").StyledComponent
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -3551,6 +3571,7 @@ export declare const TitleContainer: import("styled-components").StyledComponent
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4079,6 +4100,7 @@ export declare const StepCounterBar: import("styled-components").StyledComponent
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4121,6 +4143,7 @@ export declare const StepCounterBar: import("styled-components").StyledComponent
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4129,6 +4152,7 @@ export declare const StepCounterBar: import("styled-components").StyledComponent
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4659,6 +4683,7 @@ export declare const SkeletonStepCounterBar: import("styled-components").StyledC
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4701,6 +4726,7 @@ export declare const SkeletonStepCounterBar: import("styled-components").StyledC
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4709,6 +4735,7 @@ export declare const SkeletonStepCounterBar: import("styled-components").StyledC
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -5234,6 +5261,7 @@ export declare const StepCounterContainer: import("styled-components").StyledCom
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -5276,6 +5304,7 @@ export declare const StepCounterContainer: import("styled-components").StyledCom
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -5284,6 +5313,7 @@ export declare const StepCounterContainer: import("styled-components").StyledCom
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -5809,6 +5839,7 @@ export declare const NavBackButton: import("styled-components").StyledComponent<
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -5851,6 +5882,7 @@ export declare const NavBackButton: import("styled-components").StyledComponent<
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -5859,6 +5891,7 @@ export declare const NavBackButton: import("styled-components").StyledComponent<
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/NavHeader/NavHeader.styles.js

@@ -1,74 +1,113 @@
-import { numToPx } from '@ovotech/element-core';
-import Animated from 'react-native-reanimated';
-import styled, { css } from '../../styled.native';
-import { SkeletonButton } from '../SkeletonButton';
-import { SkeletonHeading } from '../SkeletonHeading';
-import { NavButton } from './NavHeaderComponents/NavButton';
-export const ShadowContainer = styled(Animated.View)(({ theme }) => css `
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavBackButton = exports.StepCounterContainer = exports.SkeletonStepCounterBar = exports.StepCounterBar = exports.TitleContainer = exports.SideContainer = exports.SkeletonNavButton = exports.SkeletonNavHeading = exports.HeaderContainer = exports.NavContainer = exports.ShadowContainer = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+const styled_native_1 = __importStar(require("../../styled.native"));
+const SkeletonButton_1 = require("../SkeletonButton");
+const SkeletonHeading_1 = require("../SkeletonHeading");
+const NavButton_1 = require("./NavHeaderComponents/NavButton");
+exports.ShadowContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(({ theme }) => (0, styled_native_1.css) `
     shadow-color: ${theme.color.neutral.black};
-    shadow-offset: 0 ${numToPx(theme.space[100])};
-    shadow-radius: ${numToPx(theme.space[200])};
+    shadow-offset: 0 ${(0, element_core_1.numToPx)(theme.space[100])};
+    shadow-radius: ${(0, element_core_1.numToPx)(theme.space[200])};
   `);
-export const NavContainer = styled(Animated.View)(({ theme, layer, isCollapsed, breakpoints }) => css `
+exports.NavContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(({ theme, layer, isCollapsed, breakpoints }) => (0, styled_native_1.css) `
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     width: 100%;
     padding-top: ${layer === 0 && !isCollapsed
-    ? numToPx(theme.space[2000])
-    : numToPx(theme.space[1800])};
+    ? (0, element_core_1.numToPx)(theme.space[2000])
+    : (0, element_core_1.numToPx)(theme.space[1800])};
 
     padding-left: ${breakpoints.largeAndUp
-    ? numToPx(theme.space[2000])
+    ? (0, element_core_1.numToPx)(theme.space[2000])
     : breakpoints.mediumAndUp
-        ? numToPx(theme.space[800])
-        : numToPx(theme.space[400])};
+        ? (0, element_core_1.numToPx)(theme.space[800])
+        : (0, element_core_1.numToPx)(theme.space[400])};
     padding-right: ${breakpoints.largeAndUp
-    ? numToPx(theme.space[2000])
+    ? (0, element_core_1.numToPx)(theme.space[2000])
     : breakpoints.mediumAndUp
-        ? numToPx(theme.space[800])
-        : numToPx(theme.space[400])};
+        ? (0, element_core_1.numToPx)(theme.space[800])
+        : (0, element_core_1.numToPx)(theme.space[400])};
     padding-bottom: ${layer === 0 || layer === 1
-    ? numToPx(theme.space[400])
+    ? (0, element_core_1.numToPx)(theme.space[400])
     : 0};
     background-color: ${layer < 2
     ? theme.color.brand.brand
     : theme.color.surface.bright};
     overflow: hidden;
   `);
-export const HeaderContainer = styled(Animated.View)(({ theme }) => css `
+exports.HeaderContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(({ theme }) => (0, styled_native_1.css) `
     display: flex;
     flex-direction: row;
     width: 100%;
     align-items: center;
-    gap: ${numToPx(theme.space[100])};
+    gap: ${(0, element_core_1.numToPx)(theme.space[100])};
   `);
-export const SkeletonNavHeading = styled(SkeletonHeading)(({}) => css `
+exports.SkeletonNavHeading = (0, styled_native_1.default)(SkeletonHeading_1.SkeletonHeading)(({}) => (0, styled_native_1.css) `
     min-width: 70%;
     height: 100%;
   `);
-export const SkeletonNavButton = styled(SkeletonButton)(({ theme }) => css `
-    width: ${numToPx(theme.space[1000])};
-    height: ${numToPx(theme.space[1000])};
+exports.SkeletonNavButton = (0, styled_native_1.default)(SkeletonButton_1.SkeletonButton)(({ theme }) => (0, styled_native_1.css) `
+    width: ${(0, element_core_1.numToPx)(theme.space[1000])};
+    height: ${(0, element_core_1.numToPx)(theme.space[1000])};
   `);
-export const SideContainer = styled.View(({ theme, side, flex = 1 }) => css `
+exports.SideContainer = styled_native_1.default.View(({ theme, side, flex = 1 }) => (0, styled_native_1.css) `
     display: flex;
-    gap: ${side === 'end' ? numToPx(theme.space[200]) : 0};
+    gap: ${side === 'end' ? (0, element_core_1.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])};
+    max-height: ${(0, element_core_1.numToPx)(theme.space[1000])};
   `);
-export const TitleContainer = styled.View(({ theme, layer, isIOS }) => css `
+exports.TitleContainer = styled_native_1.default.View(({ theme, layer, isIOS }) => (0, styled_native_1.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])};
+    max-height: ${(0, element_core_1.numToPx)(theme.space[1000])};
+    min-width: ${(0, element_core_1.numToPx)(theme.space[1000])};
   `);
-export const StepCounterBar = styled.View(({ theme, count, currentStep }) => css `
+exports.StepCounterBar = styled_native_1.default.View(({ theme, count, currentStep }) => (0, styled_native_1.css) `
     flex-grow: 1;
     height: 2px;
     max-width: 50%;
@@ -77,21 +116,21 @@ export const StepCounterBar = styled.View(({ theme, count, currentStep }) => css
     ? theme.color.brand.brand
     : theme.color.surface.dim};
   `);
-export const SkeletonStepCounterBar = styled(SkeletonButton)(({ theme }) => css `
+exports.SkeletonStepCounterBar = (0, styled_native_1.default)(SkeletonButton_1.SkeletonButton)(({ theme }) => (0, styled_native_1.css) `
     min-width: 100%;
-    height: ${numToPx(theme.space[50])};
+    height: ${(0, element_core_1.numToPx)(theme.space[50])};
   `);
-export const StepCounterContainer = styled.View(({ theme }) => css `
+exports.StepCounterContainer = styled_native_1.default.View(({ theme }) => (0, styled_native_1.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])};
+    gap: ${(0, element_core_1.numToPx)(theme.space[100])};
+    padding-bottom: ${(0, element_core_1.numToPx)(theme.space[100])};
+    padding-top: ${(0, element_core_1.numToPx)(theme.space[200])};
+    max-height: ${(0, element_core_1.numToPx)(theme.space[100])};
     min-width: 100%;
   `);
-export const NavBackButton = styled(NavButton)(({ theme }) => css `
-    margin-left: -${numToPx(theme.space[300])};
+exports.NavBackButton = (0, styled_native_1.default)(NavButton_1.NavButton)(({ theme }) => (0, styled_native_1.css) `
+    margin-left: -${(0, element_core_1.numToPx)(theme.space[300])};
   `);

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

@@ -1,12 +1,17 @@
-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) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionButtons = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NavHeader_styles_1 = require("../NavHeader.styles");
+const utils_1 = require("../utils");
+const NavButton_1 = require("./NavButton");
+const ActionButtons = (props) => {
+    var _a, _b;
     const variant = props.layer > 1 ? 'dim' : 'bright';
     const inverted = props.layer < 2;
-    return (_jsxs(_Fragment, { children: [checkHasAccount(props) &&
-                props.actionButtons.account?.onPress &&
-                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.account.onPress, iconLeft: props.actionButtons.account.icon || 'user' }))), !!props.actionButtons.help?.onPress &&
-                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.help.onPress, iconLeft: props.actionButtons.help.icon || 'message' })))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, utils_1.checkHasAccount)(props) &&
+                ((_a = props.actionButtons.account) === null || _a === void 0 ? void 0 : _a.onPress) &&
+                (props.loading ? ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.SkeletonNavButton, {})) : ((0, jsx_runtime_1.jsx)(NavButton_1.NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.account.onPress, iconLeft: props.actionButtons.account.icon || 'user' }))), !!((_b = props.actionButtons.help) === null || _b === void 0 ? void 0 : _b.onPress) &&
+                (props.loading ? ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.SkeletonNavButton, {})) : ((0, jsx_runtime_1.jsx)(NavButton_1.NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.help.onPress, iconLeft: props.actionButtons.help.icon || 'message' })))] }));
 };
+exports.ActionButtons = ActionButtons;