@ovotech/element-native 5.4.3 → 5.5.0

package/dist/components/List/List.js

@@ -1,26 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children } from 'react';
-import { View } from 'react-native';
-import { getValidChildren } from '../../utils';
-import { Margin } from '../Margin';
-import { Stack } from '../Stack';
-import { FlexRow, LiContent, SquareBullet, TextBullet } from './styled';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ul = exports.Ol = exports.Li = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const utils_1 = require("../../utils");
+const Margin_1 = require("../Margin");
+const Stack_1 = require("../Stack");
+const styled_1 = require("./styled");
 const ListItem = ({ children, showBullets = true, prefix, }) => {
-    return (_jsxs(FlexRow, { children: [prefix ? (_jsx(TextBullet, { children: prefix })) : (_jsx(SquareBullet, { visible: showBullets })), _jsx(LiContent, { children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(styled_1.FlexRow, { children: [prefix ? ((0, jsx_runtime_1.jsx)(styled_1.TextBullet, { children: prefix })) : ((0, jsx_runtime_1.jsx)(styled_1.SquareBullet, { visible: showBullets })), (0, jsx_runtime_1.jsx)(styled_1.LiContent, { children: children })] }));
 };
 const renderList = ({ children, listType, showBullets, }) => {
-    const validChildren = getValidChildren(children);
-    return Children.map(validChildren, (child, index) => (_jsx(ListItem, { prefix: listType === 'ol' ? `${index + 1}.` : undefined, showBullets: showBullets, children: child })));
+    const validChildren = (0, utils_1.getValidChildren)(children);
+    return react_1.Children.map(validChildren, (child, index) => ((0, jsx_runtime_1.jsx)(ListItem, { prefix: listType === 'ol' ? `${index + 1}.` : undefined, showBullets: showBullets, children: child })));
 };
 const Li = ({ children }) => {
-    return _jsx(View, { style: { flexDirection: 'column' }, children: children });
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: 'column' }, children: children });
 };
+exports.Li = Li;
 const Ul = (props) => {
     const { children, showBullets } = props;
-    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ul', showBullets }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Margin_1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ul', showBullets }) }) }));
 };
+exports.Ul = Ul;
 const Ol = (props) => {
     const { children } = props;
-    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ol' }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Margin_1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ol' }) }) }));
 };
-export { Li, Ol, Ul };
+exports.Ol = Ol;

package/dist/components/List/index.js

@@ -1 +1,7 @@
-export { Li, Ol, Ul } from './List';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ul = exports.Ol = exports.Li = void 0;
+var List_1 = require("./List");
+Object.defineProperty(exports, "Li", { enumerable: true, get: function () { return List_1.Li; } });
+Object.defineProperty(exports, "Ol", { enumerable: true, get: function () { return List_1.Ol; } });
+Object.defineProperty(exports, "Ul", { enumerable: true, get: function () { return List_1.Ul; } });

package/dist/components/List/styled.js

@@ -1,42 +1,78 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-export const SquareBullet = styled.View(({ theme, visible, smallAndUp }) => {
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiContent = exports.FlexRow = exports.TextBullet = exports.SquareBullet = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+exports.SquareBullet = styled_native_1.default.View(({ theme, visible, smallAndUp }) => {
     const lineHeight = smallAndUp
         ? theme.font.lineHeight.md.mediaQuery.lg
         : theme.font.lineHeight.md.mediaQuery.sm;
     const topMargin = (lineHeight - theme.space[200]) / 2;
-    return css `
+    return (0, styled_native_1.css) `
     align-self: flex-start;
-    width: ${numToPx(theme.space[200])};
-    height: ${numToPx(theme.space[200])};
+    width: ${(0, element_core_1.numToPx)(theme.space[200])};
+    height: ${(0, element_core_1.numToPx)(theme.space[200])};
     margin-right: 10px;
-    margin-top: ${numToPx(topMargin)};
+    margin-top: ${(0, element_core_1.numToPx)(topMargin)};
     background-color: ${visible ? theme.color.brand.brand : 'transparent'};
     transform: rotate(-15deg);
   `;
 });
-export const TextBullet = styled.Text(({ theme, smallAndUp }) => {
+exports.TextBullet = styled_native_1.default.Text(({ theme, smallAndUp }) => {
     const fontSize = smallAndUp
         ? theme.font.size.md.mediaQuery.lg
         : theme.font.size.md.mediaQuery.sm;
     const lineHeight = smallAndUp
         ? theme.font.lineHeight.md.mediaQuery.lg
         : theme.font.lineHeight.md.mediaQuery.sm;
-    return css `
-    min-width: ${numToPx(theme.space[300])};
-    min-height: ${numToPx(theme.space[300])};
-    margin-right: ${numToPx(theme.space[100])};
+    return (0, styled_native_1.css) `
+    min-width: ${(0, element_core_1.numToPx)(theme.space[300])};
+    min-height: ${(0, element_core_1.numToPx)(theme.space[300])};
+    margin-right: ${(0, element_core_1.numToPx)(theme.space[100])};
     font-family: ${theme.native.font.family.book};
-    font-size: ${numToPx(fontSize)};
-    line-height: ${numToPx(lineHeight)};
+    font-size: ${(0, element_core_1.numToPx)(fontSize)};
+    line-height: ${(0, element_core_1.numToPx)(lineHeight)};
     text-align: left;
     color: ${theme.color.surface.onSurface};
   `;
 });
-export const FlexRow = styled.View `
+exports.FlexRow = styled_native_1.default.View `
   flex-direction: row;
 `;
-export const LiContent = styled.View `
+exports.LiContent = styled_native_1.default.View `
   flex-direction: column;
   flex: 1;
 `;

package/dist/components/Margin/Margin.js

@@ -1,36 +1,54 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled from '../../styled.native';
-import { responsiveStyle } from '../../utils';
-const StyledMargin = styled.View(({ theme, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
-    const formatter = (spaceKey) => numToPx(theme.space[String(spaceKey * 100)]);
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Margin = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const hooks_1 = require("../../hooks");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const utils_1 = require("../../utils");
+const StyledMargin = styled_native_1.default.View(({ theme, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
+    const formatter = (spaceKey) => (0, element_core_1.numToPx)(theme.space[String(spaceKey * 100)]);
     return `
     ${horizontal
         ? `
-            ${responsiveStyle('margin-left', horizontal, breakpoints, formatter)}
-            ${responsiveStyle('margin-right', horizontal, breakpoints, formatter)}
+            ${(0, utils_1.responsiveStyle)('margin-left', horizontal, breakpoints, formatter)}
+            ${(0, utils_1.responsiveStyle)('margin-right', horizontal, breakpoints, formatter)}
           `
         : ''}
     ${vertical
         ? `
-            ${responsiveStyle('margin-top', vertical, breakpoints, formatter)}
-            ${responsiveStyle('margin-bottom', vertical, breakpoints, formatter)}
+            ${(0, utils_1.responsiveStyle)('margin-top', vertical, breakpoints, formatter)}
+            ${(0, utils_1.responsiveStyle)('margin-bottom', vertical, breakpoints, formatter)}
           `
         : ''}
-    ${mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : ''}
+    ${mTop ? (0, utils_1.responsiveStyle)('margin-top', mTop, breakpoints, formatter) : ''}
     ${mBottom
-        ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
+        ? (0, utils_1.responsiveStyle)('margin-bottom', mBottom, breakpoints, formatter)
         : ''}
-    ${mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : ''}
+    ${mLeft ? (0, utils_1.responsiveStyle)('margin-left', mLeft, breakpoints, formatter) : ''}
     ${mRight
-        ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
+        ? (0, utils_1.responsiveStyle)('margin-right', mRight, breakpoints, formatter)
         : ''}
-    ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
+    ${all ? (0, utils_1.responsiveStyle)('margin', all, breakpoints, formatter) : ''}
   `;
 });
-const Margin = ({ top, bottom, left, right, ...rest }) => {
-    const breakpoints = useBreakpoint();
-    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
+const Margin = (_a) => {
+    var { top, bottom, left, right } = _a, rest = __rest(_a, ["top", "bottom", "left", "right"]);
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledMargin, Object.assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
 };
-export { Margin };
+exports.Margin = Margin;

package/dist/components/Margin/index.js

@@ -1 +1,5 @@
-export { Margin } from './Margin';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Margin = void 0;
+var Margin_1 = require("./Margin");
+Object.defineProperty(exports, "Margin", { enumerable: true, get: function () { return Margin_1.Margin; } });

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.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;