@ornikar/kitt-universal 27.9.0 → 27.9.1-canary.b005d681364bb7e16454f696f46b5af55d721a97.0

package/dist/index-metro.es.ios.js

@@ -9,7 +9,7 @@ import _extends from '@babel/runtime/helpers/extends';
 import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withTiming, Easing as Easing$1, runOnJS, useDerivedValue, useAnimatedProps, withDelay, withRepeat, interpolate } from 'react-native-reanimated';
 import { Platform, Animated as Animated$1, Easing, StyleSheet, Modal, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, Keyboard, Text as Text$1, useWindowDimensions, PixelRatio } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
-import { SpinnerGapRegularIcon, UserRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, XRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon, ArrowLeftRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
 import { BottomSheetView, BottomSheetScrollView, BottomSheetSectionList, BottomSheetFlatList, BottomSheetHandle, BottomSheetBackdrop, BottomSheetFooter, BottomSheetTextInput, BottomSheetModal, useBottomSheetModal } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { parse } from '@twemoji/parser';
@@ -1805,12 +1805,12 @@ const fullscreenModal = {
   header: {
     height: 56
   },
-  sharedHorizontalPadding: 16,
+  horizontalPadding: 16,
   footer: {
     verticalPadding: 12
   },
   body: {
-    verticalPadding: 24
+    verticalPadding: 16
   },
   animation: {
     overlay: {
@@ -1897,11 +1897,6 @@ const icon = {
   defaultSize: 20
 };
 
-const iconButton = {
-  width: button.height.medium,
-  height: button.height.medium
-};
-
 const listItem = {
   padding: '12px 16px',
   verticalPadding: 12,
@@ -2631,7 +2626,6 @@ const theme = {
   highlight,
   icon,
   buttonBadge,
-  iconButton,
   listItem,
   pageLoader,
   picker,
@@ -2739,7 +2733,7 @@ function ActionCardDisabled({
   });
 }
 
-const _excluded$S = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+const _excluded$R = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   let {
       children,
@@ -2751,7 +2745,7 @@ function ActionCard(_ref) {
       isPressed,
       isFocused
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$S);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -3060,7 +3054,7 @@ const getTypographyTypeWithAncestorValue = (type, typographyTypeInContext) => {
   return !!isAllValuesUndefined && !!typographyTypeInContext ? typographyTypeInContext : type;
 };
 
-const _excluded$R = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+const _excluded$Q = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 const TypographyFamilyContext = /*#__PURE__*/createContext(null);
 const TypographyTypeContext = /*#__PURE__*/createContext(null);
 const TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -3187,7 +3181,7 @@ function Typography(_ref) {
       variant,
       color
     } = _ref,
-    otherProps = _objectWithoutProperties(_ref, _excluded$R);
+    otherProps = _objectWithoutProperties(_ref, _excluded$Q);
   const sx = useSx();
   const typographyFamilyInContext = useContext(TypographyFamilyContext);
   const typographyTypeInContext = useContext(TypographyTypeContext);
@@ -3328,14 +3322,14 @@ function Icon({
   });
 }
 
-const _excluded$Q = ["color", "size"],
+const _excluded$P = ["color", "size"],
   _excluded2$5 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   let {
       color,
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   const colorValue = getTypographyColorValue(color);
   const sx = useSx();
   const {
@@ -3378,7 +3372,7 @@ const getButtonTextColorByType = (type, variant, isHovered, isPressed, isDisable
   return `${baseKey}.default`;
 };
 
-const _excluded$P = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
+const _excluded$O = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
 function ButtonContentChildren({
   type,
   icon,
@@ -3478,7 +3472,7 @@ function ButtonContent(_ref) {
       innerSpacing,
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   const color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3726,7 +3720,7 @@ function LoaderIcon({
   });
 }
 
-const _excluded$O = ["as", "onPress", "disabled", "icon", "stretch"];
+const _excluded$N = ["as", "onPress", "disabled", "icon", "stretch"];
 const ActionsItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
@@ -3738,7 +3732,7 @@ const ActionsItem = /*#__PURE__*/forwardRef((_ref, ref) => {
         medium: false
       }
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   const [isLoading, setIsLoading] = useState(false);
   const mountedRef = useRef(false);
   // securing the loading state with a ref to avoid user action between rerenders
@@ -3789,7 +3783,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-const _excluded$N = ["children", "layout", "reversed"];
+const _excluded$M = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -3822,7 +3816,7 @@ function Actions(_ref) {
         base: false
       }
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$M);
   const shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -3877,7 +3871,7 @@ function getInitials(firstname, lastname) {
   return `${firstname[0]}${lastname[0]}`.toUpperCase();
 }
 
-const _excluded$M = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+const _excluded$L = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent({
   size,
   src,
@@ -3943,7 +3937,7 @@ function Avatar(_ref) {
       dark,
       disabled
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   const currentSize = getCurrentSize({
     size,
     sizeVariant
@@ -3981,7 +3975,7 @@ function Avatar(_ref) {
   });
 }
 
-const _excluded$L = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints"];
+const _excluded$K = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints"];
 function BottomSheetComp(_ref, ref) {
   let {
       children: Content,
@@ -3991,7 +3985,7 @@ function BottomSheetComp(_ref, ref) {
       enableDynamicSizing = true,
       snapPoints = ['100%']
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$L);
+    rest = _objectWithoutProperties(_ref, _excluded$K);
   const {
     top
   } = useSafeAreaInsets();
@@ -4302,7 +4296,7 @@ function CardModalAnimation({
   });
 }
 
-const _excluded$K = ["children", "visible", "onClose", "onExited"];
+const _excluded$J = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   let {
       children,
@@ -4310,7 +4304,7 @@ function CardModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -4332,32 +4326,24 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-const _excluded$J = ["children", "paddingX", "paddingY"];
+const _excluded$I = ["children", "padding"];
 function CardModalBody(_ref) {
   let {
       children,
-      paddingX = {
-        base: 'kitt.4',
-        medium: 'kitt.6'
-      },
-      paddingY = {
-        base: 'kitt.4',
-        medium: 'kitt.6'
-      }
+      padding = 'kitt.4'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
-      paddingX,
-      paddingY
+      padding
     }
   }, props), {}, {
     children: children
   }));
 }
 
-const _excluded$I = ["children", "padding", "hasSeparator"];
+const _excluded$H = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   let {
       children,
@@ -4367,7 +4353,7 @@ function CardModalFooter(_ref) {
       },
       hasSeparator = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4381,58 +4367,145 @@ function CardModalFooter(_ref) {
   }));
 }
 
-const _excluded$H = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
-function CardModalHeader(_ref) {
+const getButtonTypeAndVariant = iconColor => {
+  switch (iconColor) {
+    case 'black':
+      return {
+        type: 'tertiary'
+      };
+    case 'secondary':
+      return {
+        type: 'secondary'
+      };
+    case 'primary':
+      return {
+        type: 'primary'
+      };
+    case 'primary-plain':
+      return {
+        type: 'primary'
+      };
+    case 'ghost':
+      return {
+        type: 'tertiary',
+        variant: 'revert'
+      };
+    default:
+      return {
+        type: 'secondary'
+      };
+  }
+};
+
+const _excluded$G = ["color", "ariaLabel"];
+/**
+ * @deprecated IconButton should only be used as a navigation button
+ * Other use cases should use a <Button> component with an icon
+ */
+function IconButton(_ref) {
   let {
-      children,
-      title,
-      paddingBottom = {
-        base: 'kitt.4',
-        medium: 'kitt.2'
-      },
-      hasSeparator = true,
-      right,
-      left
+      color = 'black',
+      ariaLabel
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$H);
-  const defaultContainerPadding = {
-    base: 'kitt.4',
-    medium: 'kitt.6'
-  };
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
-    padding: paddingBottom,
-    borderBottomWidth: hasSeparator ? 'kitt.cardModal.footer.borderWidth' : 0,
-    borderColor: "kitt.separator",
-    justifyContent: "center",
+    props = _objectWithoutProperties(_ref, _excluded$G);
+  const {
+    type: legacyColorToType,
+    variant: legacyColorToVariant
+  } = getButtonTypeAndVariant(color);
+  return /*#__PURE__*/jsx(Button, _objectSpread({
+    variant: legacyColorToVariant,
+    type: legacyColorToType
+  }, props));
+}
+function CloseIconButton(props) {
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
+    icon: /*#__PURE__*/jsx(XRegularIcon, {})
+  }, props));
+}
+
+function TopNavBar({
+  left,
+  right,
+  title,
+  titleAlign = 'center',
+  stickers,
+  mode = 'default',
+  hasSeparator = true
+}) {
+  const isLargeTitleMode = mode === 'largeTitle';
+  const leftEmptySpace = !left && titleAlign === 'left' ? null : /*#__PURE__*/jsx(View, {
+    width: "kitt.button.minWidth"
+  });
+  return /*#__PURE__*/jsxs(VStack, {
+    space: isLargeTitleMode ? 'kitt.2' : undefined,
     width: "100%",
-    height: "kitt.cardModal.header.height",
-    paddingRight: right ? 'kitt.2' : defaultContainerPadding,
-    paddingLeft: left ? 'kitt.2' : defaultContainerPadding,
-    children: /*#__PURE__*/jsxs(View, {
+    height: mode === 'default' ? 56 : undefined,
+    justifyContent: "center",
+    paddingX: "kitt.2",
+    paddingTop: isLargeTitleMode ? 'kitt.2' : 'kitt.3',
+    paddingBottom: "kitt.3",
+    borderBottomWidth: hasSeparator && mode === 'default' ? 1 : 0,
+    borderColor: "kitt.separator",
+    children: [/*#__PURE__*/jsxs(HStack, {
       alignItems: "center",
-      flexDirection: "row",
-      justifyContent: !children && !left ? 'flex-end' : 'space-between',
-      children: [left ? /*#__PURE__*/jsx(View, {
-        width: "kitt.iconButton.width",
-        children: left
-      }) : null, /*#__PURE__*/jsxs(View, {
+      justifyContent: !title && !left ? 'flex-end' : 'space-between',
+      children: [left !== null && left !== void 0 ? left : leftEmptySpace, mode === 'default' ? /*#__PURE__*/jsx(View, {
         flexGrow: "1",
-        paddingRight: right ? 'kitt.2' : 0,
-        paddingLeft: left ? 'kitt.2' : 0,
-        children: [title ? /*#__PURE__*/jsx(Typography.Text, {
-          textAlign: !left && right ? 'left' : 'center',
+        flexShrink: 1,
+        paddingRight: "kitt.2",
+        paddingLeft: "kitt.2",
+        children: title ? /*#__PURE__*/jsx(Typography.Text, {
+          textAlign: titleAlign,
           variant: "bold",
+          ellipsizeMode: "tail",
+          numberOfLines: 1,
           children: title
-        }) : null, children]
-      }), right ? /*#__PURE__*/jsx(View, {
-        width: "kitt.iconButton.width",
-        children: right
-      }) : null]
-    })
-  }));
+        }) : null
+      }) : null, right !== null && right !== void 0 ? right : /*#__PURE__*/jsx(View, {
+        width: "kitt.button.minWidth"
+      })]
+    }), mode === 'largeTitle' ? /*#__PURE__*/jsxs(VStack, {
+      space: "kitt.4",
+      paddingX: "kitt.2",
+      children: [stickers ? /*#__PURE__*/jsx(HStack, {
+        width: "100%",
+        space: "kitt.1",
+        flexShrink: 1,
+        flexWrap: "wrap",
+        style: {
+          rowGap: theme.getSpacing(1)
+        },
+        children: stickers.map((sticker, index) =>
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        jsx(View, {
+          children: sticker
+        }, index))
+      }) : null, /*#__PURE__*/jsx(Typography.Text, {
+        base: "heading-m",
+        children: title
+      })]
+    }) : null]
+  });
+}
+function CloseButton(props) {
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
+    icon: /*#__PURE__*/jsx(XRegularIcon, {})
+  }, props));
+}
+function BackButton(props) {
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
+    icon: /*#__PURE__*/jsx(ArrowLeftRegularIcon, {})
+  }, props));
+}
+TopNavBar.CloseButton = CloseButton;
+TopNavBar.BackButton = BackButton;
+
+function CardModalHeader(props) {
+  return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 
-const _excluded$G = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+const _excluded$F = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   let {
       backgroundColor = 'kitt.uiBackgroundLight',
@@ -4443,7 +4516,7 @@ function CardModal(_ref) {
       body,
       footer
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4697,13 +4770,13 @@ function ChoiceItemContainer({
   }));
 }
 
-const _excluded$F = ["direction", "contentContainerStyle"];
+const _excluded$E = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   let {
       direction,
       contentContainerStyle
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4929,7 +5002,7 @@ function DialogModalAnimation({
   });
 }
 
-const _excluded$E = ["children", "visible", "onClose", "onExited"];
+const _excluded$D = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   let {
       children,
@@ -4937,7 +5010,7 @@ function DialogModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -4965,7 +5038,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-const _excluded$D = ["stretch"];
+const _excluded$C = ["stretch"];
 function DialogModal({
   illustration,
   title,
@@ -5007,7 +5080,7 @@ function DialogModalButton(_ref) {
   let {
       stretch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -5041,7 +5114,7 @@ function Emoji({
   });
 }
 
-const _excluded$C = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+const _excluded$B = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$4 = ["phoneNumber", "children"],
   _excluded3$3 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -5053,7 +5126,7 @@ function ExternalAppLink(_ref) {
       onPress,
       onOpenAppError
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   const href = `${appScheme}:${appValue}`;
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({
     href: href
@@ -5147,7 +5220,7 @@ function useOpenExternalLink(errorHandler) {
   };
 }
 
-const _excluded$B = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
+const _excluded$A = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
 function ExternalLink(_ref) {
   let {
       as: Component,
@@ -5157,7 +5230,7 @@ function ExternalLink(_ref) {
       // eslint-disable-next-line no-console
       onOpenLinkError = console.error
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   const openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
@@ -5216,7 +5289,7 @@ function InputTextContainer({
   });
 }
 
-const _excluded$A = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
+const _excluded$z = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
 const InputText = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       id,
@@ -5233,7 +5306,7 @@ const InputText = /*#__PURE__*/forwardRef((_ref, ref) => {
       height,
       onSubmitEditing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   const theme = useTheme();
   const fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
@@ -5358,13 +5431,13 @@ function AutocompleteItemsListContainer({
   });
 }
 
-const _excluded$z = ["children", "testID"];
+const _excluded$y = ["children", "testID"];
 function AutocompleteOption(_ref) {
   let {
       children,
       testID = 'kitt.Autocomplete.option'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -5377,7 +5450,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-const _excluded$y = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex", "maxItemContainerHeight"],
+const _excluded$x = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex", "maxItemContainerHeight"],
   _excluded2$3 = ["onClick", "onPress"],
   _excluded3$2 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
   _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
@@ -5419,7 +5492,7 @@ function Autocomplete(_ref) {
       zIndex = 1000,
       maxItemContainerHeight
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   const childrenArray = Children.toArray(children);
   const items = childrenArray.filter(isReactElement).map(child => ({
     child,
@@ -5640,7 +5713,7 @@ function getBorderColor$1({
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-const _excluded$x = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
+const _excluded$w = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
 const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       checked,
@@ -5651,7 +5724,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
       onBlur,
       onFocus
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   const theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -5980,7 +6053,7 @@ function PartContainer({
   });
 }
 
-const _excluded$w = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+const _excluded$v = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 const KeyboardDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       id,
@@ -6000,7 +6073,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus,
       onSubmitEditing
     } = _ref;
-    _objectWithoutProperties(_ref, _excluded$w);
+    _objectWithoutProperties(_ref, _excluded$v);
   const monthRef = useRef(null);
   const yearRef = useRef(null);
   const defaultValue = value;
@@ -6201,7 +6274,7 @@ const PressableDateInputs = /*#__PURE__*/forwardRef(({
   });
 });
 
-const _excluded$v = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
+const _excluded$u = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 const DatePickerAndroid = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       onBlur,
@@ -6212,7 +6285,7 @@ const DatePickerAndroid = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   const [isFocused, setIsFocused] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
   const handleClose = () => {
@@ -6282,16 +6355,12 @@ function PlatformDateTimePicker({
   }));
 }
 
-const _excluded$u = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+const _excluded$t = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle({
   children
 }) {
   return /*#__PURE__*/jsx(CardModal.Header, {
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-m",
-      variant: "bold",
-      children: children
-    })
+    title: children
   });
 }
 function ModalPlatformDateTimePicker(_ref) {
@@ -6303,7 +6372,7 @@ function ModalPlatformDateTimePicker(_ref) {
       onClose,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   const [currentValue, setCurrentValue] = useState(value);
 
   // Prevent unsynced value between the modal and its parent state
@@ -6346,7 +6415,7 @@ function ModalPlatformDateTimePicker(_ref) {
   });
 }
 
-const _excluded$t = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+const _excluded$s = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
 const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -6362,7 +6431,7 @@ const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus,
       onBlur
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   const [isPickerUIVisible, setIsPickerUIVisible] = useState(isDefaultVisible);
   const [isFocused, setIsFocused] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
@@ -6400,7 +6469,7 @@ const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 
-const _excluded$s = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+const _excluded$r = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -6410,7 +6479,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onChange,
       onBlur
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -6432,7 +6501,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props));
 });
 
-const _excluded$r = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
+const _excluded$q = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
 const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       fillMode = 'native',
@@ -6440,7 +6509,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onSubmitEditing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   // in apps, final-form can give a string value that will break the component
   const currentValue = value || undefined;
   if (fillMode === 'keyboard') {
@@ -6512,12 +6581,12 @@ function ImagePicker({
   });
 }
 
-const _excluded$q = ["children"];
+const _excluded$p = ["children"];
 function ListItemContent(_ref) {
   let {
       children
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -6528,7 +6597,7 @@ function ListItemContent(_ref) {
   }));
 }
 
-const _excluded$p = ["children", "side"],
+const _excluded$o = ["children", "side"],
   _excluded2$2 = ["children", "align"];
 // Handles the vertical alignment of the side elements of the list item
 function ListItemSideContainer(_ref) {
@@ -6536,7 +6605,7 @@ function ListItemSideContainer(_ref) {
       children,
       side = 'left'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -6558,7 +6627,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-const _excluded$o = ["children", "withPadding", "borders", "left", "right", "onPress"];
+const _excluded$n = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   let {
       children,
@@ -6568,7 +6637,7 @@ function ListItem(_ref) {
       right,
       onPress
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$n);
   const Wrapper = onPress ? Pressable$2 : Fragment$1;
   const wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -6601,12 +6670,12 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-const _excluded$n = ["title"];
+const _excluded$m = ["title"];
 function BottomSheetActionsItem(_ref) {
   let {
       title
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(ListItem, {
       withPadding: true,
@@ -7102,7 +7171,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-const _excluded$m = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+const _excluded$l = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   let {
       initialValue,
@@ -7111,7 +7180,7 @@ function InputAddress(_ref) {
       emptyResultsElement,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   const {
     state,
     onInputChange,
@@ -7207,12 +7276,12 @@ const InputIban = /*#__PURE__*/forwardRef((props, ref) => {
   }, props));
 });
 
-const _excluded$l = ["onChange"];
+const _excluded$k = ["onChange"];
 const InputNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -7229,13 +7298,13 @@ const InputNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
-const _excluded$k = ["isPasswordDefaultVisible", "right"];
+const _excluded$j = ["isPasswordDefaultVisible", "right"];
 const InputPassword = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       isPasswordDefaultVisible,
       right
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   const [isVisible, setIsVisible] = useState(Boolean(isPasswordDefaultVisible));
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -7256,7 +7325,7 @@ const InputPassword = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
-const _excluded$j = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
+const _excluded$i = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -7270,7 +7339,7 @@ const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
       phoneNumberLength = 10,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   const currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -7722,7 +7791,7 @@ function RadioButton({
   });
 }
 
-const _excluded$i = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+const _excluded$h = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -7737,7 +7806,7 @@ function RadioButtonGroup(_ref2) {
       onBlur,
       onChange
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded$i);
+    props = _objectWithoutProperties(_ref2, _excluded$h);
   const [currentValue, setCurrentValue] = useState(value);
   const handleChange = newValue => {
     if (disabled) return;
@@ -7766,14 +7835,14 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-const _excluded$h = ["helper", "limit"];
+const _excluded$g = ["helper", "limit"];
 const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _props$value, _props$value2;
   let {
       helper,
       limit
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   const shouldDisplayLimit = limit && limit > 0;
   const isLimitReached = ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) === limit;
   const limitContainerAnimatedStyle = useAnimatedStyle(() => ({
@@ -7929,7 +7998,7 @@ function ToggleAnimated({
   });
 }
 
-const _excluded$g = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
+const _excluded$f = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
 const getLabelTypographyType = size => {
   return size === 'medium' ? 'body-m' : 'body-l';
 };
@@ -7945,7 +8014,7 @@ function Toggle(_ref) {
       value = false,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   const theme = useKittTheme();
   return /*#__PURE__*/jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center"
@@ -7983,7 +8052,7 @@ function Toggle(_ref) {
   }));
 }
 
-const _excluded$f = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+const _excluded$e = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   let {
       children,
@@ -7991,7 +8060,7 @@ function FullscreenModalBody(_ref) {
       style,
       shouldHandleTopNotch
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   const {
     bottom,
     top
@@ -8019,14 +8088,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-const _excluded$e = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+const _excluded$d = ["shouldHandleBottomNotch", "hasSeparator", "children"];
 function FullscreenModalFooter(_ref) {
   let {
       shouldHandleBottomNotch = true,
       hasSeparator = true,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   const {
     bottom
   } = useSafeAreaInsets();
@@ -8187,7 +8256,7 @@ function FullscreenModalAnimation({
   });
 }
 
-const _excluded$d = ["children", "visible", "onClose", "onExited"];
+const _excluded$c = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   let {
       children,
@@ -8195,7 +8264,7 @@ function FullscreenModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -8240,65 +8309,19 @@ function FullscreenModalContainer({
   });
 }
 
-const _excluded$c = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+const _excluded$b = ["shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   let {
-      hasSeparator = true,
-      isTransparent,
-      title,
-      children,
-      right,
-      left,
       shouldHandleTopNotch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   const {
     top
   } = useSafeAreaInsets();
-  const hasRight = Boolean(right);
-  const hasLeft = Boolean(left);
-  const hasContent = Boolean(title || children);
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
-    backgroundColor: isTransparent ? 'kitt.transparent' : 'kitt.uiBackgroundLight',
-    minHeight: "kitt.fullscreenModal.header.height",
-    width: "100%",
-    justifyContent: "center",
+  return /*#__PURE__*/jsx(View, {
     paddingTop: shouldHandleTopNotch ? top : undefined,
-    paddingRight: hasRight ? 'kitt.2' : 'kitt.fullscreenModal.horizontalPadding',
-    paddingLeft: hasLeft ? 'kitt.2' : 'kitt.fullscreenModal.horizontalPadding',
-    borderBottomColor: "kitt.separator",
-    borderBottomWidth: hasSeparator ? 1 : undefined
-  }, props), {}, {
-    children: /*#__PURE__*/jsxs(View, {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: !hasContent && !hasLeft ? 'flex-end' : 'space-between',
-      children: [left ? /*#__PURE__*/jsx(View, {
-        width: "kitt.iconButton.width",
-        children: left
-      }) : null, title ? /*#__PURE__*/jsx(View, {
-        flexGrow: 1,
-        flexShrink: 1,
-        paddingLeft: hasLeft ? 'kitt.2' : undefined,
-        paddingRight: hasRight ? 'kitt.2' : 0,
-        children: /*#__PURE__*/jsx(Typography.Text, {
-          variant: "bold",
-          textAlign: !hasLeft && hasRight ? 'left' : 'center',
-          children: title
-        })
-      }) : null, children ? /*#__PURE__*/jsx(View, {
-        flexGrow: 1,
-        flexShrink: 1,
-        alignItems: "center",
-        paddingLeft: hasLeft ? 'kitt.2' : undefined,
-        paddingRight: hasRight ? 'kitt.2' : undefined,
-        children: children
-      }) : null, right || left ? /*#__PURE__*/jsx(View, {
-        width: "kitt.iconButton.width",
-        children: right
-      }) : null]
-    })
-  }));
+    children: /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props))
+  });
 }
 
 function FullscreenModal({
@@ -8592,62 +8615,6 @@ function Highlight({
   });
 }
 
-const getButtonTypeAndVariant = iconColor => {
-  switch (iconColor) {
-    case 'black':
-      return {
-        type: 'tertiary'
-      };
-    case 'secondary':
-      return {
-        type: 'secondary'
-      };
-    case 'primary':
-      return {
-        type: 'primary'
-      };
-    case 'primary-plain':
-      return {
-        type: 'primary'
-      };
-    case 'ghost':
-      return {
-        type: 'tertiary',
-        variant: 'revert'
-      };
-    default:
-      return {
-        type: 'secondary'
-      };
-  }
-};
-
-const _excluded$b = ["color", "ariaLabel"];
-/**
- * @deprecated IconButton should only be used as a navigation button
- * Other use cases should use a <Button> component with an icon
- */
-function IconButton(_ref) {
-  let {
-      color = 'black',
-      ariaLabel
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
-  const {
-    type: legacyColorToType,
-    variant: legacyColorToVariant
-  } = getButtonTypeAndVariant(color);
-  return /*#__PURE__*/jsx(Button, _objectSpread({
-    variant: legacyColorToVariant,
-    type: legacyColorToType
-  }, props));
-}
-function CloseIconButton(props) {
-  return /*#__PURE__*/jsx(IconButton, _objectSpread({
-    icon: /*#__PURE__*/jsx(XRegularIcon, {})
-  }, props));
-}
-
 function InfoCard({
   title,
   action,
@@ -10370,9 +10337,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         },
         icon: theme.icon,
         cardModal: {
-          header: {
-            height: theme.cardModal.header.height
-          },
           maxWidth: theme.cardModal.maxWidth,
           maxWidthWithPadding: theme.cardModal.maxWidthWithPadding,
           minHeight: theme.cardModal.minHeight
@@ -10673,15 +10637,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
-        iconButton: {
-          width: theme.iconButton.width,
-          height: theme.iconButton.height
-        },
-        fullscreenModal: {
-          header: {
-            height: theme.fullscreenModal.header.height
-          }
-        },
         pageLoader: {
           size: theme.pageLoader.size
         },
@@ -10776,7 +10731,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         fullscreenModal: {
-          horizontalPadding: theme.fullscreenModal.sharedHorizontalPadding,
+          horizontalPadding: theme.fullscreenModal.horizontalPadding,
           body: {
             verticalPadding: theme.fullscreenModal.body.verticalPadding
           },
@@ -11633,20 +11588,13 @@ function NavigationBottomSheet({
     })
   });
 }
-function NavigationBottomSheetHeader({
-  children,
-  left
-}) {
-  return /*#__PURE__*/jsx(HStack, {
-    marginBottom: "kitt.6",
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      flexGrow: 1,
-      flexShrink: 1,
-      variant: "bold",
-      textAlign: "center",
-      children: children
-    })
-  });
+
+/**
+ * Web only: display right CloseButton
+ */
+
+function NavigationBottomSheetHeader(props) {
+  return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 function NavigationBottomSheetBody(props) {
   return /*#__PURE__*/jsx(VStack, _objectSpread({
@@ -12088,14 +12036,9 @@ function Picker({
       onClose: handleClose,
       children: /*#__PURE__*/jsxs(CardModal, {
         children: [/*#__PURE__*/jsx(CardModal.Header, {
-          right: /*#__PURE__*/jsx(IconButton, {
-            icon: /*#__PURE__*/jsx(XRegularIcon, {}),
+          title: title,
+          right: /*#__PURE__*/jsx(TopNavBar.CloseButton, {
             onPress: handleClose
-          }),
-          children: /*#__PURE__*/jsx(Typography.Text, {
-            base: "body-m",
-            variant: "bold",
-            children: title
           })
         }), Platform.OS === 'ios' && shouldDisplayNativePickerOnIOS ? /*#__PURE__*/jsx(Picker$1, {
           testID: testID,
@@ -13654,83 +13597,6 @@ function Tooltip({
 Tooltip.Arrow = Arrow;
 Tooltip.Content = TooltipContent;
 
-function TopNavBar({
-  left,
-  right,
-  title,
-  titleAlign = 'center',
-  stickers,
-  mode = 'default',
-  hasSeparator = true
-}) {
-  const isLargeTitleMode = mode === 'largeTitle';
-  return /*#__PURE__*/jsxs(VStack, {
-    space: isLargeTitleMode ? 'kitt.2' : undefined,
-    width: "100%",
-    height: mode === 'default' ? 56 : undefined,
-    justifyContent: "center",
-    paddingX: "kitt.2",
-    paddingTop: isLargeTitleMode ? 'kitt.2' : 'kitt.3',
-    paddingBottom: "kitt.3",
-    borderBottomWidth: hasSeparator && mode === 'default' ? 1 : 0,
-    borderColor: "kitt.separator",
-    children: [/*#__PURE__*/jsxs(HStack, {
-      alignItems: "center",
-      justifyContent: !title && !left ? 'flex-end' : 'space-between',
-      children: [left !== null && left !== void 0 ? left : /*#__PURE__*/jsx(View, {
-        width: "kitt.button.minWidth"
-      }), mode === 'default' ? /*#__PURE__*/jsx(View, {
-        flexGrow: "1",
-        flexShrink: 1,
-        paddingRight: "kitt.2",
-        paddingLeft: "kitt.2",
-        children: title ? /*#__PURE__*/jsx(Typography.Text, {
-          textAlign: titleAlign,
-          variant: "bold",
-          ellipsizeMode: "tail",
-          numberOfLines: 1,
-          children: title
-        }) : null
-      }) : null, right !== null && right !== void 0 ? right : /*#__PURE__*/jsx(View, {
-        width: "kitt.button.minWidth"
-      })]
-    }), mode === 'largeTitle' ? /*#__PURE__*/jsxs(VStack, {
-      space: "kitt.4",
-      paddingX: "kitt.2",
-      children: [stickers ? /*#__PURE__*/jsx(HStack, {
-        width: "100%",
-        space: "kitt.1",
-        flexShrink: 1,
-        flexWrap: "wrap",
-        style: {
-          rowGap: theme.getSpacing(1)
-        },
-        children: stickers.map((sticker, index) =>
-        /*#__PURE__*/
-        // eslint-disable-next-line react/no-array-index-key
-        jsx(View, {
-          children: sticker
-        }, index))
-      }) : null, /*#__PURE__*/jsx(Typography.Text, {
-        base: "heading-m",
-        children: title
-      })]
-    }) : null]
-  });
-}
-function CloseButton(props) {
-  return /*#__PURE__*/jsx(IconButton, _objectSpread({
-    icon: /*#__PURE__*/jsx(XRegularIcon, {})
-  }, props));
-}
-function BackButton(props) {
-  return /*#__PURE__*/jsx(IconButton, _objectSpread({
-    icon: /*#__PURE__*/jsx(ArrowLeftRegularIcon, {})
-  }, props));
-}
-TopNavBar.CloseButton = CloseButton;
-TopNavBar.BackButton = BackButton;
-
 function getTypographyTypeConfig(type, theme) {
   const {
     configs