@ovotech/element-native 4.0.2 → 4.0.3-canary-a852513-261

package/dist/components/ActionCard/ActionCard.js

@@ -50,6 +50,11 @@ var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
 var ActionCard = function (_a) {
     var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
     var _e = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _e.core, semantic = _e.semantic;
+    var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
+        (onPressIndicator && !onPressActionButton && !onPressCloseButton);
+    var cardAction = hasSingleAction
+        ? onPressActionButton || onPressIndicator
+        : null;
     (0, react_1.useEffect)(function () {
         if (onMount) {
             onMount();
@@ -58,7 +63,7 @@ var ActionCard = function (_a) {
     var Heading = inline ? __1.Heading3 : __1.Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    return ((0, jsx_runtime_1.jsx)(StyledCard, { onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
+    return ((0, jsx_runtime_1.jsx)(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
                                     color: inverted
                                         ? semantic.inverted.message.link
                                         : semantic.message.branded,

package/dist/components/Disclosure/Disclosure.js

@@ -76,6 +76,6 @@ exports.Disclosure = (0, react_1.forwardRef)(function (_a, ref) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(DisclosureButton, __assign({ onPress: function () {
                     setIsExpanded(!isExpanded);
                     onToggle && onToggle(!isExpanded);
-                }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest, { children: [(0, jsx_runtime_1.jsx)(DisclosureButtonIcon, __assign({ name: "caret-down" }, breakpoints, { size: 14, expanded: isExpanded })), (0, jsx_runtime_1.jsx)(DisclosureButtonText, __assign({}, breakpoints, { children: title }))] })), isExpanded && ((0, jsx_runtime_1.jsx)(DisclosurePanel, __assign({}, breakpoints, { children: children })))] }));
+                }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest, { children: [(0, jsx_runtime_1.jsx)(DisclosureButtonIcon, __assign({ name: "caret-arrow-down" }, breakpoints, { size: 14, expanded: isExpanded })), (0, jsx_runtime_1.jsx)(DisclosureButtonText, __assign({}, breakpoints, { children: title }))] })), isExpanded && ((0, jsx_runtime_1.jsx)(DisclosurePanel, __assign({}, breakpoints, { children: children })))] }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/FilterSelect/FilterSelect.js

@@ -70,7 +70,7 @@ var FilterSelect = function (_a) {
                     (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (x, y) {
                         setMeasure({ top: y - 12, left: x });
                     });
-                }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default' ? '' : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: {
+                }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default' ? '' : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: {
                             top: measure === null || measure === void 0 ? void 0 : measure.top,
                             left: measure === null || measure === void 0 ? void 0 : measure.left,
                         }, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { nestedScrollEnabled: true, children: options.map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectOption, { accessible: true, accessibilityRole: "button", onPress: function () { return handleOptionPress(option); }, children: (0, jsx_runtime_1.jsx)(Margin_1.Margin, { vertical: 3, children: (0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : ((0, jsx_runtime_1.jsx)(Divider_1.Divider, { type: "differentiated" }))] }, option.label)); }) }) }) }) })] }));

package/dist/components/NavHeader/IconButton.js

@@ -2,19 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
 var react_native_1 = require("react-native");
+var styled_native_1 = require("../../styled.native");
 var Icon_1 = require("../Icon");
 var NavHeader_styles_1 = require("./NavHeader.styles");
 var IconButton = function (_a) {
     var size = _a.size, animation = _a.animation, rightActionConfig = _a.rightActionConfig;
     var ButtonStyled = size === 'small' ? NavHeader_styles_1.StyledIconButtonS : NavHeader_styles_1.StyledIconButtonL;
+    var theme = (0, styled_native_1.useTheme)();
     if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: 44, pressRetentionOffset: 44, onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
             var pressed = _a.pressed;
-            return ((0, jsx_runtime_1.jsx)(ButtonStyled, { entering: animation, "$pressed": pressed, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: element_core_1.theme.semantic.inverted.message.base }) }));
+            return ((0, jsx_runtime_1.jsx)(ButtonStyled, { entering: animation, "$pressed": pressed, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
         } }));
 };
 exports.IconButton = IconButton;

package/dist/components/NavHeader/NavHeader.js

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 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_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = require("../../styled.native");
 var ActionList_1 = require("../ActionList");
 var IconButton_1 = require("./IconButton");
 var NavHeader_styles_1 = require("./NavHeader.styles");
@@ -34,6 +34,8 @@ var FADE_ANIMATION_DURATION = 200;
 var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
     var hasRightAction = !!rightActionConfig;
+    var hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
+    var theme = (0, styled_native_1.useTheme)();
     var layoutHeight = (0, react_native_reanimated_1.useSharedValue)(0);
     var animatedHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
@@ -56,14 +58,14 @@ var NavHeader = function (_a) {
     };
     // NavWrapper will recieve height of the NavContainer and animate it
     // content inside NavContainer is the only dynamic part of NavHeader
-    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { topOffset: topOffset, onLayout: onLayout, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: {
+    return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { 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)(NavHeader_styles_1.ActionWrapper, { collapsed: scrolled, children: (0, jsx_runtime_1.jsx)(ActionList_1.Action, { 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, { 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
+                        // Important for maintaining white space above the title on main app screens.
+                        height: !canGoBack ? theme.core.space[10] : undefined,
+                    }, children: canGoBack && ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.ActionWrapper, { collapsed: scrolled, children: (0, jsx_runtime_1.jsx)(ActionList_1.Action, { 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, { titleVisible: hasTitle, children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, { 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
                         , { 
                             // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, 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: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, titleVisible: hasTitle, 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

@@ -971,8 +971,8 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
         };
     };
 }, {
-    collapsed: boolean;
     topOffset: number;
+    titleVisible?: boolean | undefined;
 }, never>;
 export declare const ExpandedTitle: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").TextProps>, any>, {
     core: {
@@ -1461,6 +1461,7 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
 }, {
     hasBackButton?: boolean | undefined;
     fullWidth: boolean;
+    titleVisible?: boolean | undefined;
 }, never>;
 export declare const CollapsedTitleWrapper: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").ViewProps>, any>, {
     core: {
@@ -1946,7 +1947,9 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
             };
         };
     };
-}, {}, never>;
+}, {
+    titleVisible?: boolean | undefined;
+}, never>;
 export declare const CollapsedTitle: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").TextProps>, any>, {
     core: {
         color: {

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

@@ -41,33 +41,38 @@ exports.NavWrapper = (0, styled_native_1.default)(react_native_reanimated_1.defa
         ? (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated) : '');
 });
 exports.NavContainer = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, topOffset = _a.topOffset;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: ", " ", ";\n    padding-top: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: ", " ", ";\n    padding-top: ", ";\n  "])), Z_INDEX + 1, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(topOffset ? topOffset : core.space[2]));
+    var core = _a.theme.core, topOffset = _a.topOffset, titleVisible = _a.titleVisible;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', topOffset
+        ? topOffset
+        : (0, element_core_1.numToPx)(core.space[titleVisible ? 2 : 4]), (0, element_core_1.numToPx)(core.space[titleVisible ? 2 : 4]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.space[4]));
 });
 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_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, (0, element_core_1.numToPx)(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), (0, element_core_1.numToPx)(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth, titleVisible = _a.titleVisible;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, (0, element_core_1.numToPx)(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), (0, element_core_1.numToPx)(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded, !titleVisible && 'height: 0;');
+});
+exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+    var titleVisible = _a.titleVisible;
+    return "\n  width: ".concat(titleVisible ? '33.3%' : '0', ";\n  align-items: center;\n  justify-content: center;\n");
 });
-exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"])));
 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_6 || (templateObject_6 = __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, (0, element_core_1.numToPx)(core.fontSize.heading4.small), (0, element_core_1.numToPx)(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, (0, element_core_1.numToPx)(core.fontSize.heading4.small), (0, element_core_1.numToPx)(core.lineHeight.heading4.small), semantic.message.branded);
 });
-exports.IconButtonWrapper = styled_native_1.default.View(templateObject_7 || (templateObject_7 = __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_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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);
 exports.ActionWrapper = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, collapsed = _a.collapsed;
-    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : (0, element_core_1.numToPx)(core.space[2]));
+    return (0, styled_native_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : (0, element_core_1.numToPx)(core.space[2]));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/SegmentedControls/SegmentedControls.d.ts

@@ -0,0 +1,16 @@
+import { ViewProps } from 'react-native';
+export type Segment = {
+    key: string;
+    label: string;
+    accessibilityLabel?: string;
+};
+type SegmentedControlsProps = ViewProps & {
+    activeSegment: Segment[][number];
+    segments: Segment[];
+    setActiveSegment: (...args: any[]) => void;
+    inline?: boolean;
+    multipleRows?: boolean;
+    size?: 'small' | 'large';
+};
+export declare const SegmentedControls: ({ activeSegment, setActiveSegment, segments, inline, multipleRows, size, ...rest }: SegmentedControlsProps) => JSX.Element;
+export {};

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -0,0 +1,105 @@
+"use strict";
+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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControls = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+var SegmentButton_1 = require("./components/SegmentButton");
+/* These settings were found to be nice and fast whilst maintaining spring */
+var springSettings = {
+    damping: 25,
+    mass: 0.25,
+};
+var SegmentedControls = function (_a) {
+    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["activeSegment", "setActiveSegment", "segments", "inline", "multipleRows", "size"]);
+    var animatedX = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedY = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedWidth = (0, react_native_reanimated_1.useSharedValue)(0);
+    var theme = (0, styled_native_1.useTheme)();
+    var animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        transform: [
+            {
+                translateX: animatedX.value,
+            },
+            {
+                translateY: animatedY.value + theme.core.space[size === 'small' ? 1 : 2],
+            } /* accounting for margin from top & bottom */,
+        ],
+        width: animatedWidth.value,
+        height: animatedHeight.value,
+        position: 'absolute',
+        borderRadius: theme.core.radius.max,
+        backgroundColor: theme.semantic.surface.elevated,
+    }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
+    return ((0, jsx_runtime_1.jsxs)(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
+                var _a;
+                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, onPress: function (x, y, width) {
+                        setActiveSegment(segment);
+                        animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
+                        animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
+                        animatedWidth.value = width;
+                    }, onLayout: function (width, height, x, y) {
+                        if (activeSegment.key === segment.key) {
+                            animatedX.value = x;
+                            // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+                            // choices go on the second row. The only way I could get it to work
+                            // was to hardcode the denominator to 3 for the single row ones
+                            // and 1.1 for the multiple row ones.
+                            animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                            animatedHeight.value = height;
+                            animatedWidth.value = width;
+                        }
+                    }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key) }, segment.key));
+            })] })));
+};
+exports.SegmentedControls = SegmentedControls;
+var SegmentsContainer = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
+    return "\n  flex-direction: row;\n  flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n  justify-content: ").concat($multipleRows ? 'space-between' : 'space-apart', ";\n  align-items: center;\n  gap: ").concat($inline ? 0 : core.space[1], "px;\n  width: ").concat($inline ? 'auto' : '100%', ";\n  align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n  padding: ").concat(core.space[1], "px;\n  background-color: ").concat(semantic.surface.cutout, ";\n  border-radius: ").concat(core.radius.max, "px;\n");
+});

package/dist/components/SegmentedControls/components/SegmentButton.d.ts

@@ -0,0 +1,13 @@
+type SegmentButtonProps = {
+    isSelected: boolean;
+    label: string;
+    onPress: (x: number, y: number, width: number) => void;
+    onLayout: (width: number, height: number, x: number, y: number) => void;
+    accessibilityLabel?: string;
+    inline?: boolean;
+    multipleRows?: boolean;
+    size?: 'small' | 'large';
+    testID?: string;
+};
+export declare const SegmentButton: ({ accessibilityLabel, inline, isSelected, label, multipleRows, onLayout, onPress, size, testID, }: SegmentButtonProps) => JSX.Element;
+export {};

package/dist/components/SegmentedControls/components/SegmentButton.js

@@ -0,0 +1,94 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = __importDefault(require("../../../styled.native"));
+var P_1 = require("../../P");
+var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
+var SegmentButton = function (_a) {
+    var accessibilityLabel = _a.accessibilityLabel, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
+    var xRef = (0, react_1.useRef)(0);
+    var yRef = (0, react_1.useRef)(0);
+    var widthRef = (0, react_1.useRef)(0);
+    var heightRef = (0, react_1.useRef)(0);
+    var hitslopVal = size === 'small' ? 8 : 4;
+    var fontWeightAnim = (0, react_native_reanimated_1.useSharedValue)(isSelected ? 1 : 0);
+    var animatedStyleNormal = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            opacity: 1 - fontWeightAnim.value,
+            position: 'absolute',
+        };
+    }, [fontWeightAnim]);
+    var animatedStyleBold = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            opacity: fontWeightAnim.value,
+            position: 'absolute',
+        };
+    }, [fontWeightAnim]);
+    (0, react_1.useEffect)(function () {
+        fontWeightAnim.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 1 : 0);
+    }, [fontWeightAnim, isSelected]);
+    var handleLayout = function (event) {
+        var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
+        xRef.current = x;
+        yRef.current = y;
+        heightRef.current = height;
+        widthRef.current = width;
+        onLayout(width, height, x, y);
+    };
+    var handlePress = function () {
+        onPress(xRef.current, 
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // choices go on the second row. The only way I could get it to work
+        // was to hardcode the denominator to 3 for the single row ones
+        // and 1.1 for the multiple row ones.
+        yRef.current - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: handlePress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { selected: isSelected }, accessibilityLabel: accessibilityLabel, hitSlop: {
+            top: hitslopVal,
+            bottom: hitslopVal,
+        }, style: { flexGrow: inline || multipleRows ? undefined : 1 }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
+                        opacity: 0,
+                        fontWeight: '900',
+                    }, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
+};
+exports.SegmentButton = SegmentButton;
+var SSegmentsWrapper = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, $size = _a.$size;
+    return "\n  padding: ".concat($size === 'small' ? 0 : 6, "px ").concat(theme.core.space[$size === 'small' ? 3 : 4], "px;\n  align-items: center;\n  justify-content: center;\n");
+});
+var SSegmentText = (0, styled_native_1.default)(AnimatedP)(function (_a) {
+    var $isSelected = _a.$isSelected, theme = _a.theme;
+    return "\n    font-family: ".concat($isSelected
+        ? theme.core.fontFamily.bodyBold.native
+        : theme.core.fontFamily.body.native, ";\n    color: ").concat(theme.semantic.message.base, ";\n  ");
+});

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

@@ -0,0 +1,2 @@
+import { Segment, SegmentedControls } from './SegmentedControls';
+export { Segment, SegmentedControls };

package/dist/components/SegmentedControls/index.js

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

package/dist/components/TextLink/TextLink.js

@@ -62,7 +62,7 @@ var StyledText = styled_native_1.default.Text(function (_a) {
 });
 var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
     var semantic = _a.theme.semantic;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), semantic.message.branded);
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), semantic.message.branded);
 });
 var TextLink = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);

package/dist/components/index.d.ts

@@ -40,6 +40,7 @@ export * from './PasswordInput';
 export * from './PhoneField';
 export * from './PhoneInput';
 export * from './Radio';
+export * from './SegmentedControls';
 export * from './SelectField';
 export * from './SkeletonCircle';
 export * from './SkeletonCTA';

package/dist/components/index.js

@@ -56,6 +56,7 @@ __exportStar(require("./PasswordInput"), exports);
 __exportStar(require("./PhoneField"), exports);
 __exportStar(require("./PhoneInput"), exports);
 __exportStar(require("./Radio"), exports);
+__exportStar(require("./SegmentedControls"), exports);
 __exportStar(require("./SelectField"), exports);
 __exportStar(require("./SkeletonCircle"), exports);
 __exportStar(require("./SkeletonCTA"), exports);

package/dist/esm/components/ActionCard/ActionCard.js

@@ -21,6 +21,11 @@ var StyledP = styled(P)(function (_a) {
 export var ActionCard = function (_a) {
     var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
     var _e = useContext(ThemeContext), core = _e.core, semantic = _e.semantic;
+    var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
+        (onPressIndicator && !onPressActionButton && !onPressCloseButton);
+    var cardAction = hasSingleAction
+        ? onPressActionButton || onPressIndicator
+        : null;
     useEffect(function () {
         if (onMount) {
             onMount();
@@ -29,7 +34,7 @@ export var ActionCard = function (_a) {
     var Heading = inline ? Heading3 : Heading2;
     var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
-    return (_jsx(StyledCard, { onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: _jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+    return (_jsx(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: _jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
                                     color: inverted
                                         ? semantic.inverted.message.link
                                         : semantic.message.branded,

package/dist/esm/components/Disclosure/Disclosure.js

@@ -50,6 +50,6 @@ export var Disclosure = forwardRef(function (_a, ref) {
     return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, __assign({ onPress: function () {
                     setIsExpanded(!isExpanded);
                     onToggle && onToggle(!isExpanded);
-                }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest, { children: [_jsx(DisclosureButtonIcon, __assign({ name: "caret-down" }, breakpoints, { size: 14, expanded: isExpanded })), _jsx(DisclosureButtonText, __assign({}, breakpoints, { children: title }))] })), isExpanded && (_jsx(DisclosurePanel, __assign({}, breakpoints, { children: children })))] }));
+                }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest, { children: [_jsx(DisclosureButtonIcon, __assign({ name: "caret-arrow-down" }, breakpoints, { size: 14, expanded: isExpanded })), _jsx(DisclosureButtonText, __assign({}, breakpoints, { children: title }))] })), isExpanded && (_jsx(DisclosurePanel, __assign({}, breakpoints, { children: children })))] }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/esm/components/FilterSelect/FilterSelect.js

@@ -44,7 +44,7 @@ export var FilterSelect = function (_a) {
                     (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (x, y) {
                         setMeasure({ top: y - 12, left: x });
                     });
-                }, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default' ? '' : selected.label }) }), _jsx(Icon, { name: "caret-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
+                }, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default' ? '' : selected.label }) }), _jsx(Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
                             top: measure === null || measure === void 0 ? void 0 : measure.top,
                             left: measure === null || measure === void 0 ? void 0 : measure.left,
                         }, children: _jsx(ScrollView, { nestedScrollEnabled: true, children: options.map(function (option, i) { return (_jsxs(Fragment, { children: [_jsx(SelectOption, { accessible: true, accessibilityRole: "button", onPress: function () { return handleOptionPress(option); }, children: _jsx(Margin, { vertical: 3, children: _jsx(P, { children: _jsx(Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : (_jsx(Divider, { type: "differentiated" }))] }, option.label)); }) }) }) }) })] }));

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

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { theme } from '@ovotech/element-core';
 import { Pressable } from 'react-native';
+import { useTheme } from '../../styled.native';
 import { Icon } from '../Icon';
 import { StyledIconButtonL, StyledIconButtonS } from './NavHeader.styles';
 export var IconButton = function (_a) {
     var size = _a.size, animation = _a.animation, rightActionConfig = _a.rightActionConfig;
     var ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
+    var theme = useTheme();
     if (!rightActionConfig || !(rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.iconName)) {
         return null;
     }
-    return (_jsx(Pressable, { hitSlop: 44, pressRetentionOffset: 44, onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
+    return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.onActionPress, children: function (_a) {
             var pressed = _a.pressed;
             return (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) }));
         } }));

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme } from '@ovotech/element-core';
 import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../styled.native';
 import { Action } from '../ActionList';
 import { IconButton } from './IconButton';
 import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
@@ -8,6 +8,8 @@ var FADE_ANIMATION_DURATION = 200;
 export var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
     var hasRightAction = !!rightActionConfig;
+    var hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
+    var theme = useTheme();
     var layoutHeight = useSharedValue(0);
     var animatedHeightStyle = useAnimatedStyle(function () {
         return {
@@ -30,13 +32,13 @@ export var NavHeader = function (_a) {
     };
     // NavWrapper will recieve height of the NavContainer and animate it
     // content inside NavContainer is the only dynamic part of NavHeader
-    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, onLayout: onLayout, children: [_jsx(Animated.View, { style: {
+    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [_jsx(Animated.View, { 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(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, { 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
+                        // Important for maintaining white space above the title on main app screens.
+                        height: !canGoBack ? theme.core.space[10] : undefined,
+                    }, children: canGoBack && (_jsx(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { titleVisible: hasTitle, children: _jsx(CollapsedTitle, { 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
                         , { 
                             // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, 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: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, titleVisible: hasTitle, 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) }) })] }))] }) }));
 };