@ovotech/element-native 3.4.0 → 3.4.1-canary-72b4f7c-147

package/dist/components/List/List.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import { PropsWithChildren } from 'react';
+import { TextProps, ViewProps } from 'react-native';
 declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: string]: any;
     [x: number]: any;
@@ -237,9 +237,7 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 }, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<import("react-native/types").View>>;
-declare const Li: ({ children, ...rest }: {
-    children: ReactNode | ReactNode[];
-}) => JSX.Element;
+declare const Li: ({ children, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;
 declare const Ul: ({ children, showBullets, ...rest }: PropsWithChildren<ViewProps & {
     showBullets?: boolean | undefined;
 }>) => JSX.Element;

package/dist/components/List/List.js

@@ -25,9 +25,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListWrapper = exports.Li = exports.Ol = exports.Ul = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var utils_1 = require("../../utils");
 var Stack_1 = require("../Stack");
 var styled_1 = require("./styled");
-var utils_1 = require("../../utils");
 var Bullet = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledBullet);
 var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledList);
 exports.ListWrapper = ListWrapper;

package/dist/components/NavHeader/NavHeader.js

@@ -37,45 +37,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavHeader = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var use_layout_1 = require("../../hooks/use-layout");
 var ActionList_1 = require("../ActionList");
 var IconButton_1 = require("./IconButton");
 var NavHeader_styles_1 = require("./NavHeader.styles");
-// calculated based on layout with maximum possible height
-var INITIAL_HEADER_HEIGHT = 115;
 var FADE_ANIMATION_DURATION = 250; // ms
 var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
-    var _b = (0, use_layout_1.useLayout)(INITIAL_HEADER_HEIGHT), layout = _b[0], onLayout = _b[1];
-    var navHeight = (0, react_native_reanimated_1.useSharedValue)(layout.height); // initial value
-    var animatedNavHeight = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
-        return {
-            height: navHeight.value,
-        };
-    });
-    // take children calculated height and change NavContainer height accordingly but with animation
-    (0, react_1.useEffect)(function () {
-        (0, react_native_reanimated_1.runOnUI)(function () {
-            'worklet';
-            navHeight.value = (0, react_native_reanimated_1.withTiming)(Math.floor(layout.height), {
-                duration: FADE_ANIMATION_DURATION,
-            });
-        })();
-    }, [layout.height]);
-    // NavContainer is animated view, height transition will be smooth
-    // in order to tell NavContainer which height it children have we need another NavWrapper
-    // back-button, title and right-action has wrappers with 33.3% and they are always rendered
-    // we need it for correct placing of the title when either back-button or right-action missing
-    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavContainer, __assign({ style: animatedNavHeight }, { children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavWrapper, __assign({ onLayout: onLayout }, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
-                        width: scrolled ? '33.3%' : '100%',
-                        // when back button is off we have small margin top for title, to write less code we can just set height
-                        height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
-                    }, layout: react_native_reanimated_1.Layout.delay(FADE_ANIMATION_DURATION) }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
+    return ((0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
+                    width: scrolled ? '33.3%' : '100%',
+                    // when back button is off we have small margin top for title, to write less code we can just set height
+                    height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
+                } }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
+                    // if we don't have right action leave more space for the title text in expanded state
+                    , __assign({ 
                         // if we don't have right action leave more space for the title text in expanded state
-                        , __assign({ 
-                            // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
+                        fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }));
 };
 exports.NavHeader = NavHeader;

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

@@ -1,234 +1,6 @@
 import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
-export declare const NavContainer: import("styled-components").StyledComponent<typeof Animated.View, {
-    core: {
-        radius: Record<"small" | "medium" | "large" | "max", string>;
-        borderWidth: Record<"small" | "medium" | "large", string>;
-        breakpoint: Record<"small" | "medium" | "large", string | number>;
-        mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-        transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-            lightest: string;
-            lighter: string;
-            light: string;
-            base: string;
-            dark: string;
-            darker: string;
-            darkest: string;
-        }> & {
-            brand: Record<string, string>;
-        };
-        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-            native: string;
-            web: string;
-        }>;
-        fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-    };
-    semantic: {
-        surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-        border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
-            message: Record<"base" | "link" | "secondary" | "branded", string>;
-        };
-        success: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        warning: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        error: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        info: {
-            border: string;
-            surface: string;
-            surfaceEmphasis: string;
-            message: string;
-            messageOnEmphasis: string;
-        };
-        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-    };
-    component: {
-        heading1: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading2: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading3: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading4: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        lead: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        body: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        small: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        label: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        cta: {
-            primary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-            secondary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-            destructive: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-        };
-        badge: {
-            variants: {
-                red: {
-                    foreground: string;
-                    background: string;
-                };
-                orange: {
-                    foreground: string;
-                    background: string;
-                };
-                yellow: {
-                    foreground: string;
-                    background: string;
-                };
-                green: {
-                    foreground: string;
-                    background: string;
-                };
-                blue: {
-                    foreground: string;
-                    background: string;
-                };
-            };
-        };
-    };
-}, {}, never>;
-export declare const NavWrapper: import("styled-components").StyledComponent<typeof View, {
+export declare const NavContainer: import("styled-components").StyledComponent<typeof View, {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;

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

@@ -30,43 +30,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavWrapper = exports.NavContainer = void 0;
+exports.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavContainer = void 0;
 var react_native_1 = require("react-native");
 var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
 var styled_native_1 = __importStar(require("../../styled.native"));
-exports.NavContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n  "], ["\n    width: 100%;\n    background-color: ", ";\n  "])), semantic.surface.base);
-});
-exports.NavWrapper = (0, styled_native_1.default)(react_native_1.View)(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "], ["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "])), core.space[2]);
+exports.NavContainer = (0, styled_native_1.default)(react_native_1.View)(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "], ["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "])), semantic.surface.base, core.space[2]);
 });
 exports.ExpandedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
         ? core.lineHeight.heading1.small
         : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
 });
-exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
+exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
     var core = _a.theme.core;
     return core.lineHeight.heading4.small;
 });
 exports.CollapsedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
 });
-exports.IconButtonWrapper = styled_native_1.default.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+exports.IconButtonWrapper = styled_native_1.default.View(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
 var iconButtonSharedStyles = (0, styled_native_1.css)(function (_a) {
     var semantic = _a.theme.semantic;
     return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
 });
-exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
-exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Tabs/Tabs.js

@@ -59,7 +59,7 @@ var TabList_1 = require("./TabList");
 var TabPanel_1 = require("./TabPanel");
 var TabsCard = (0, styled_native_1.default)(Card_1.Card)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "], ["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
 });
 var Tabs = function (_a) {
     var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);

package/dist/esm/components/List/List.js

@@ -22,9 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children } from 'react';
+import { styledComponentWithBreakpoints } from '../../utils';
 import { Stack } from '../Stack';
 import { StyledBullet, StyledLi, StyledList, StyledOlItem, StyledUlItem, UlBullet, } from './styled';
-import { styledComponentWithBreakpoints } from '../../utils';
 var Bullet = styledComponentWithBreakpoints(StyledBullet);
 var ListWrapper = styledComponentWithBreakpoints(StyledList);
 var ListBulletItem = function (_a) {

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

@@ -11,44 +11,20 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { theme } from '@ovotech/element-core';
-import { useEffect } from 'react';
-import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, Layout, runOnUI, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { useLayout } from '../../hooks/use-layout';
+import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, } from 'react-native-reanimated';
 import { Action } from '../ActionList';
 import { IconButton } from './IconButton';
-import { CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
-// calculated based on layout with maximum possible height
-var INITIAL_HEADER_HEIGHT = 115;
+import { CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, } from './NavHeader.styles';
 var FADE_ANIMATION_DURATION = 250; // ms
 export var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
-    var _b = useLayout(INITIAL_HEADER_HEIGHT), layout = _b[0], onLayout = _b[1];
-    var navHeight = useSharedValue(layout.height); // initial value
-    var animatedNavHeight = useAnimatedStyle(function () {
-        return {
-            height: navHeight.value,
-        };
-    });
-    // take children calculated height and change NavContainer height accordingly but with animation
-    useEffect(function () {
-        runOnUI(function () {
-            'worklet';
-            navHeight.value = withTiming(Math.floor(layout.height), {
-                duration: FADE_ANIMATION_DURATION,
-            });
-        })();
-    }, [layout.height]);
-    // NavContainer is animated view, height transition will be smooth
-    // in order to tell NavContainer which height it children have we need another NavWrapper
-    // back-button, title and right-action has wrappers with 33.3% and they are always rendered
-    // we need it for correct placing of the title when either back-button or right-action missing
-    return (_jsx(NavContainer, __assign({ style: animatedNavHeight }, { children: _jsxs(NavWrapper, __assign({ onLayout: onLayout }, { children: [_jsx(Animated.View, __assign({ style: {
-                        width: scrolled ? '33.3%' : '100%',
-                        // when back button is off we have small margin top for title, to write less code we can just set height
-                        height: !canGoBack ? parseInt(theme.core.space[10]) : undefined,
-                    }, layout: Layout.delay(FADE_ANIMATION_DURATION) }, { children: canGoBack && (_jsx(Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
+    return (_jsxs(NavContainer, { children: [_jsx(Animated.View, __assign({ style: {
+                    width: scrolled ? '33.3%' : '100%',
+                    // when back button is off we have small margin top for title, to write less code we can just set height
+                    height: !canGoBack ? parseInt(theme.core.space[10]) : undefined,
+                } }, { children: canGoBack && (_jsx(Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
+                    // if we don't have right action leave more space for the title text in expanded state
+                    , __assign({ 
                         // if we don't have right action leave more space for the title text in expanded state
-                        , __assign({ 
-                            // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
+                        fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }));
 };

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

@@ -5,39 +5,35 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
-export var NavContainer = styled(Animated.View)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n  "], ["\n    width: 100%;\n    background-color: ", ";\n  "])), semantic.surface.base);
-});
-export var NavWrapper = styled(View)(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "], ["\n    width: 100%;\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "])), core.space[2]);
+export var NavContainer = styled(View)(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "], ["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n  "])), semantic.surface.base, core.space[2]);
 });
 export var ExpandedTitle = styled(Animated.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
         ? core.lineHeight.heading1.small
         : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
 });
-export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
+export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
     var core = _a.theme.core;
     return core.lineHeight.heading4.small;
 });
 export var CollapsedTitle = styled(Animated.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
 });
-export var IconButtonWrapper = styled.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+export var IconButtonWrapper = styled.View(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
 var iconButtonSharedStyles = css(function (_a) {
     var semantic = _a.theme.semantic;
     return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
 });
-export var StyledIconButtonS = styled(Animated.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+export var StyledIconButtonS = styled(Animated.View)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
-export var StyledIconButtonL = styled(Animated.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+export var StyledIconButtonL = styled(Animated.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/esm/components/Tabs/Tabs.js

@@ -33,7 +33,7 @@ import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
 var TabsCard = styled(Card)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "], ["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
 });
 export var Tabs = function (_a) {
     var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "3.4.0",
+  "version": "3.4.1-canary-72b4f7c-147",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@ovotech/element-core": "^2.1.0",
+    "@ovotech/element-core": "^2.1.0-canary-72b4f7c-147",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0"
   },