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