@ovotech/element-native 3.6.0-canary-e797d63-175 → 3.6.0-canary-8d21eaa-177

package/dist/components/ActionList/ActionList.d.ts

@@ -2,16 +2,12 @@ import { ComponentProps, PropsWithChildren, Ref } from 'react';
 import { AccessibilityRole, View, ViewProps } from 'react-native';
 import { IconName } from '../../providers';
 import { StyledActionList } from './styled';
-declare const ACTION_TYPES: {
-    [key: string]: IconName;
-};
 declare type FullWidthOptions = 'always' | 'never' | 'small';
 declare type ActionListProps = ComponentProps<typeof StyledActionList>;
 declare type ActionProps = PropsWithChildren<ViewProps & {
     accessibilityRole?: AccessibilityRole;
-    actionType?: keyof typeof ACTION_TYPES;
-    iconLeft?: IconName | 'off';
-    iconRight?: IconName | 'off';
+    iconLeft?: IconName;
+    iconRight?: IconName;
     inverted?: boolean;
     inline?: boolean;
     onPress?: () => void;
@@ -21,5 +17,5 @@ declare type ActionProps = PropsWithChildren<ViewProps & {
     inList?: boolean;
 }>;
 declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => JSX.Element;
-declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "inverted" | "actionType" | "inList"> & import("react").RefAttributes<View>>;
+declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "inverted" | "inList"> & import("react").RefAttributes<View>>;
 export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -28,12 +28,6 @@ var react_1 = require("react");
 var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
 var styled_1 = require("./styled");
-var ACTION_TYPES = {
-    back: 'chevron-left-small',
-    // edit: 'arrow-right', /* TODO: add pencil + paper icon */
-    external: 'new-window',
-    link: 'chevron-right-small',
-};
 var ActionList = function (_a) {
     var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
     var childCount = children.length;
@@ -54,16 +48,11 @@ var ActionWrapper = (0, react_1.forwardRef)(function (_a, ref) {
     return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
 });
 var Action = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'never' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.inline, inline = _f === void 0 ? false : _f, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "inline", "onPress", "testID"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? 'never' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    var isBackAction = actionType === 'back';
-    var updatedIconRight = null;
-    if (!isBackAction) {
-        updatedIconRight = ACTION_TYPES[actionType];
-    }
     if (fullWidth === 'small') {
         fullWidth = smallAndUp ? 'never' : 'always';
     }
-    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, (0, jsx_runtime_1.jsx)(styled_1.StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), updatedIconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, (0, jsx_runtime_1.jsx)(styled_1.StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, marginTop: iconRight === 'chevron-right-small' ? 1 : 0, size: 16 })) : null] })));
 });
 exports.Action = Action;

package/dist/components/ActionList/index.d.ts

@@ -1 +1 @@
-export * from './ActionList';
+export { Action, ActionList } from './ActionList';

package/dist/components/ActionList/index.js

@@ -1,17 +1,6 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ActionList"), exports);
+exports.ActionList = exports.Action = void 0;
+var ActionList_1 = require("./ActionList");
+Object.defineProperty(exports, "Action", { enumerable: true, get: function () { return ActionList_1.Action; } });
+Object.defineProperty(exports, "ActionList", { enumerable: true, get: function () { return ActionList_1.ActionList; } });

package/dist/components/ActionList/styled.js

@@ -59,6 +59,6 @@ exports.StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a
 });
 exports.StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1]);
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[1]);
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -4,6 +4,7 @@ export declare type NavHeaderProps = {
     scrolled: boolean;
     rightActionConfig?: RightActionConfig;
     canGoBack?: boolean;
-    goBack?: () => void;
+    backButtonText?: string;
+    onBackButtonPress?: () => void;
 };
-export declare const NavHeader: ({ title, scrolled, rightActionConfig, canGoBack, goBack, }: NavHeaderProps) => JSX.Element;
+export declare const NavHeader: ({ title, scrolled, rightActionConfig, canGoBack, backButtonText, onBackButtonPress, }: NavHeaderProps) => JSX.Element;

package/dist/components/NavHeader/NavHeader.js

@@ -37,21 +37,48 @@ 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 ActionList_1 = require("../ActionList");
 var IconButton_1 = require("./IconButton");
 var NavHeader_styles_1 = require("./NavHeader.styles");
-var FADE_ANIMATION_DURATION = 250; // ms
+var FADE_ANIMATION_DURATION = 200;
+var ONLY_TITLE_CONTAINER_HEIGHT = 108;
+var TITLE_AND_BACK_CONTAINER_HEIGHT = 92;
 var NavHeader = function (_a) {
-    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
-    return ((0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
+    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, _b = _a.backButtonText, backButtonText = _b === void 0 ? 'Back' : _b, onBackButtonPress = _a.onBackButtonPress;
+    var hasRightAction = !!rightActionConfig;
+    var initialContainerHeight = canGoBack
+        ? TITLE_AND_BACK_CONTAINER_HEIGHT
+        : ONLY_TITLE_CONTAINER_HEIGHT;
+    var animatedContainerHeight = (0, react_native_reanimated_1.useSharedValue)(initialContainerHeight);
+    var animatedHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            height: animatedContainerHeight.value,
+        };
+    });
+    (0, react_1.useEffect)(function () {
+        if (scrolled) {
+            animatedContainerHeight.value = (0, react_native_reanimated_1.withTiming)(56, {
+                duration: FADE_ANIMATION_DURATION,
+                easing: react_native_reanimated_1.Easing.linear,
+            });
+        }
+        else {
+            animatedContainerHeight.value = (0, react_native_reanimated_1.withTiming)(initialContainerHeight, {
+                duration: FADE_ANIMATION_DURATION,
+                easing: react_native_reanimated_1.Easing.linear,
+            });
+        }
+    }, [scrolled]);
+    return ((0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, __assign({ collapsed: scrolled, style: [animatedHeightStyle] }, { 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
+                } }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress }, { children: backButtonText }))) })), 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
-                        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 && !hasRightAction, 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,6 +1,5 @@
-import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
-export declare const NavContainer: import("styled-components").StyledComponent<typeof View, {
+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>;
@@ -231,7 +230,9 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
             };
         };
     };
-}, {}, never>;
+}, {
+    collapsed: boolean;
+}, never>;
 export declare const ExpandedTitle: import("styled-components").StyledComponent<typeof Animated.Text, {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;

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

@@ -31,38 +31,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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_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.NavContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, collapsed = _a.collapsed;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __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  "], ["\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  "])), semantic.surface.base, core.space[2], collapsed
+        ? (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), semantic.border.differentiated) : '');
 });
 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_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
+    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
         ? 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_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) {
+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) {
     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_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);
+    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);
 });
-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"])));
+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"])));
 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_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) {
+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) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
-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) {
+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) {
     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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/P/P.d.ts

@@ -1,243 +1,5 @@
 /// <reference types="react" />
-import { Text } from 'react-native';
-export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: {
-        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: {
-                    neutral: {
-                        foreground: string;
-                        background: string;
-                    };
-                    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;
-                    };
-                };
-            };
-        };
-    } | undefined;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
+import { TextProps } from 'react-native';
+export declare const P: import("react").ForwardRefExoticComponent<TextProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>;

package/dist/components/P/P.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -28,11 +39,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.P = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var StyledP = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
     return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __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.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
 });
-exports.P = (0, utils_1.styledComponentWithBreakpoints)(StyledP);
+exports.P = (0, react_1.forwardRef)(function (props, ref) {
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return (0, jsx_runtime_1.jsx)(StyledP, __assign({}, props, breakpoints, { ref: ref }));
+});
 var templateObject_1;

package/dist/components/SkeletonText/SkeletonText.js

@@ -42,6 +42,8 @@ var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
     }
-    return ((0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
+    return (
+    // @ts-ignore styled components stuff
+    (0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
 };
 exports.SkeletonText = SkeletonText;

package/dist/components/Toast/Toast.js

@@ -158,7 +158,7 @@ var CustomToast = function (_a) {
                             (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
                                 setTextHeight(height);
                             });
-                        } }, { children: message })), action && actionTitle ? ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, actionType: "link", onPress: handleAction, onLayout: function () {
+                        } }, { children: message })), action && actionTitle ? ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: function () {
                             var _a;
                             (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
                                 setActionHeight(height);

package/dist/esm/components/ActionList/ActionList.js

@@ -25,12 +25,6 @@ import { Children, cloneElement, forwardRef, } from 'react';
 import { TouchableOpacity, } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import { StyledActionInner, StyledActionList, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
-var ACTION_TYPES = {
-    back: 'chevron-left-small',
-    // edit: 'arrow-right', /* TODO: add pencil + paper icon */
-    external: 'new-window',
-    link: 'chevron-right-small',
-};
 var ActionList = function (_a) {
     var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
     var childCount = children.length;
@@ -50,16 +44,11 @@ var ActionWrapper = forwardRef(function (_a, ref) {
     return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
 });
 var Action = forwardRef(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'never' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.inline, inline = _f === void 0 ? false : _f, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "inline", "onPress", "testID"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? 'never' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
     var smallAndUp = useBreakpoint().smallAndUp;
-    var isBackAction = actionType === 'back';
-    var updatedIconRight = null;
-    if (!isBackAction) {
-        updatedIconRight = ACTION_TYPES[actionType];
-    }
     if (fullWidth === 'small') {
         fullWidth = smallAndUp ? 'never' : 'always';
     }
-    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), updatedIconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
+    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, marginTop: iconRight === 'chevron-right-small' ? 1 : 0, size: 16 })) : null] })));
 });
 export { ActionList, Action };

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

@@ -1 +1 @@
-export * from './ActionList';
+export { Action, ActionList } from './ActionList';

package/dist/esm/components/ActionList/styled.js

@@ -33,6 +33,6 @@ export var StyledRightIcon = styled(Icon)(function (_a) {
 });
 export var StyledLeftIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1]);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[1]);
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -11,20 +11,47 @@ 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 Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, } from 'react-native-reanimated';
+import { useEffect } from 'react';
+import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { Action } from '../ActionList';
 import { IconButton } from './IconButton';
 import { CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, } from './NavHeader.styles';
-var FADE_ANIMATION_DURATION = 250; // ms
+var FADE_ANIMATION_DURATION = 200;
+var ONLY_TITLE_CONTAINER_HEIGHT = 108;
+var TITLE_AND_BACK_CONTAINER_HEIGHT = 92;
 export var NavHeader = function (_a) {
-    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
-    return (_jsxs(NavContainer, { children: [_jsx(Animated.View, __assign({ style: {
+    var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, _b = _a.backButtonText, backButtonText = _b === void 0 ? 'Back' : _b, onBackButtonPress = _a.onBackButtonPress;
+    var hasRightAction = !!rightActionConfig;
+    var initialContainerHeight = canGoBack
+        ? TITLE_AND_BACK_CONTAINER_HEIGHT
+        : ONLY_TITLE_CONTAINER_HEIGHT;
+    var animatedContainerHeight = useSharedValue(initialContainerHeight);
+    var animatedHeightStyle = useAnimatedStyle(function () {
+        return {
+            height: animatedContainerHeight.value,
+        };
+    });
+    useEffect(function () {
+        if (scrolled) {
+            animatedContainerHeight.value = withTiming(56, {
+                duration: FADE_ANIMATION_DURATION,
+                easing: Easing.linear,
+            });
+        }
+        else {
+            animatedContainerHeight.value = withTiming(initialContainerHeight, {
+                duration: FADE_ANIMATION_DURATION,
+                easing: Easing.linear,
+            });
+        }
+    }, [scrolled]);
+    return (_jsxs(NavContainer, __assign({ collapsed: scrolled, style: [animatedHeightStyle] }, { 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
+                } }, { children: canGoBack && (_jsx(Action, __assign({ iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress }, { children: backButtonText }))) })), 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
-                        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 && !hasRightAction, 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

@@ -2,38 +2,38 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
-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 NavContainer = styled(Animated.View)(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, collapsed = _a.collapsed;
+    return css(templateObject_2 || (templateObject_2 = __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  "], ["\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  "])), semantic.surface.base, core.space[2], collapsed
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), semantic.border.differentiated) : '');
 });
 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_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
+    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
         ? 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_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) {
+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) {
     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_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);
+    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);
 });
-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"])));
+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"])));
 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_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) {
+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) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
-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) {
+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) {
     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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/P/P.js

@@ -2,11 +2,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
 var StyledP = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
     return css(templateObject_1 || (templateObject_1 = __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.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
 });
-export var P = styledComponentWithBreakpoints(StyledP);
+export var P = forwardRef(function (props, ref) {
+    var breakpoints = useBreakpoint();
+    return _jsx(StyledP, __assign({}, props, breakpoints, { ref: ref }));
+});
 var templateObject_1;

package/dist/esm/components/SkeletonText/SkeletonText.js

@@ -36,5 +36,7 @@ export var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
     }
-    return (_jsx(P, __assign({ as: SkeletonAnimation }, rest, { children: generatedLines })));
+    return (
+    // @ts-ignore styled components stuff
+    _jsx(P, __assign({ as: SkeletonAnimation }, rest, { children: generatedLines })));
 };

package/dist/esm/components/Toast/Toast.js

@@ -130,7 +130,7 @@ var CustomToast = function (_a) {
                             (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
                                 setTextHeight(height);
                             });
-                        } }, { children: message })), action && actionTitle ? (_jsx(Action, __assign({ ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, actionType: "link", onPress: handleAction, onLayout: function () {
+                        } }, { children: message })), action && actionTitle ? (_jsx(Action, __assign({ ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: function () {
                             var _a;
                             (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
                                 setActionHeight(height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "3.6.0-canary-e797d63-175",
+  "version": "3.6.0-canary-8d21eaa-177",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
-    "@ovotech/element-core": "^2.2.0-canary-e797d63-175",
+    "@ovotech/element-core": "^2.2.0-canary-8d21eaa-177",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0"
   },