@ornikar/kitt-universal 27.9.1-canary.e79ce5a70db58d281f30a0e111ad7cf70d64cdb1.0 → 27.9.1-canary.f2c8ce09203150f3f2cb65aacb7c85ea25435b9f.0

package/dist/index.es.js

@@ -13,7 +13,7 @@ export { useWindowDimensions as useWindowSize } from 'react-native';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-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';
@@ -1820,12 +1820,12 @@ var fullscreenModal = {
   header: {
     height: 56
   },
-  sharedHorizontalPadding: 16,
+  horizontalPadding: 16,
   footer: {
     verticalPadding: 12
   },
   body: {
-    verticalPadding: 24
+    verticalPadding: 16
   },
   animation: {
     overlay: {
@@ -1913,8 +1913,8 @@ var icon = {
 };
 
 var iconButton = {
-  width: button.height.medium,
-  height: button.height.medium
+  width: button.height["default"],
+  height: button.height["default"]
 };
 
 var listItem = {
@@ -2628,7 +2628,7 @@ var breakpoints = {
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 var theme = {
   spacing: spacing,
-  getSpacing: function (multiplier) {
+  getSpacing: function getSpacing(multiplier) {
     return spacing * multiplier;
   },
   colors: colors,
@@ -2647,8 +2647,8 @@ var theme = {
   forms: forms,
   highlight: highlight,
   icon: icon,
-  buttonBadge: buttonBadge,
   iconButton: iconButton,
+  buttonBadge: buttonBadge,
   listItem: listItem,
   pageLoader: pageLoader,
   picker: picker,
@@ -2816,7 +2816,7 @@ var ActionCardPressable = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onPress: onPress,
     onHoverIn: onHoverIn,
     onHoverOut: onHoverOut,
-    children: function (_ref3) {
+    children: function children(_ref3) {
       var isHovered = _ref3.isHovered,
         isPressed = _ref3.isPressed,
         isFocused = _ref3.isFocused;
@@ -3586,11 +3586,11 @@ var useNativeAnimation$4 = function (_ref) {
     };
   });
   return {
-    onPressIn: function () {
+    onPressIn: function handlePressIn() {
       color.value = withSpring(1);
       pressed.value = 1;
     },
-    onPressOut: function () {
+    onPressOut: function handlePressOut() {
       color.value = withSpring(0);
       pressed.value = 0;
     },
@@ -3659,7 +3659,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onHoverOut: onHoverOut,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -3782,7 +3782,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stretch: stretch,
       disabled: isLoading ? true : disabled,
       icon: isLoading ? /*#__PURE__*/jsx(LoaderIcon, {}) : icon,
-      onPress: function (e) {
+      onPress: function handlePress(e) {
         var callPressAndUpdateLoadingState = /*#__PURE__*/function () {
           var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             return _regeneratorRuntime().wrap(function (_context) {
@@ -4054,10 +4054,10 @@ function BottomSheetComp(_ref, ref) {
       borderRadius: 4,
       backgroundColor: theme.kitt.bottomSheet.handle.backgroundColor
     },
-    handleComponent: function (props) {
+    handleComponent: function handleComponent(props) {
       return hasHandle ? /*#__PURE__*/jsx(BottomSheetHandle, _objectSpread({}, props)) : null;
     },
-    backdropComponent: function (props) {
+    backdropComponent: function backdropComponent(props) {
       return hasBackdrop ? /*#__PURE__*/jsx(BottomSheetBackdrop, _objectSpread(_objectSpread({}, props), {}, {
         opacity: 0.25,
         appearsOnIndex: 0,
@@ -4066,7 +4066,7 @@ function BottomSheetComp(_ref, ref) {
     }
   }, rest), {}, {
     topInset: top,
-    children: function (props) {
+    children: function children(props) {
       return /*#__PURE__*/jsx(Wrapper, {
         children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, _objectSpread({}, props === null || props === void 0 ? void 0 : props.data)) : Content
       });
@@ -4142,7 +4142,7 @@ function CloseButton$1(_ref) {
     onPress = _ref.onPress;
   var onCloseContextCallback = useOnCloseModalBehaviour();
   return /*#__PURE__*/cloneElement(children, {
-    onPress: function () {
+    onPress: function handleClose() {
       if (onPress) onPress();
       onCloseContextCallback();
     }
@@ -4318,11 +4318,11 @@ function CardModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function () {
+    onShow: function onShow() {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function () {
+    onDismiss: function onDismiss() {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -4369,7 +4369,7 @@ function CardModalBehaviour(_ref) {
     onClose: onClose,
     children: /*#__PURE__*/jsx(CardModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
-      onExited: function () {
+      onExited: function handleExitAnimationDone() {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -4379,25 +4379,16 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$J = ["children", "paddingX", "paddingY"];
+var _excluded$J = ["children", "padding"];
 function CardModalBody(_ref) {
   var children = _ref.children,
-    _ref$paddingX = _ref.paddingX,
-    paddingX = _ref$paddingX === void 0 ? {
-      base: 'kitt.4',
-      medium: 'kitt.6'
-    } : _ref$paddingX,
-    _ref$paddingY = _ref.paddingY,
-    paddingY = _ref$paddingY === void 0 ? {
-      base: 'kitt.4',
-      medium: 'kitt.6'
-    } : _ref$paddingY,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'kitt.4' : _ref$padding,
     props = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
-      paddingX: paddingX,
-      paddingY: paddingY
+      padding: padding
     }
   }, props), {}, {
     children: children
@@ -4428,55 +4419,149 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$H = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
-function CardModalHeader(_ref) {
-  var children = _ref.children,
+var getButtonTypeAndVariant = function (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'
+      };
+  }
+};
+
+var _excluded$H = ["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) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'black' : _ref$color;
+    _ref.ariaLabel;
+    var props = _objectWithoutProperties(_ref, _excluded$H);
+  var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
+    legacyColorToType = _getButtonTypeAndVari.type,
+    legacyColorToVariant = _getButtonTypeAndVari.variant;
+  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(_ref) {
+  var left = _ref.left,
+    right = _ref.right,
     title = _ref.title,
-    _ref$paddingBottom = _ref.paddingBottom,
-    paddingBottom = _ref$paddingBottom === void 0 ? {
-      base: 'kitt.4',
-      medium: 'kitt.2'
-    } : _ref$paddingBottom,
+    _ref$titleAlign = _ref.titleAlign,
+    titleAlign = _ref$titleAlign === void 0 ? 'center' : _ref$titleAlign,
+    stickers = _ref.stickers,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    right = _ref.right,
-    left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$H);
-  var 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",
+    backgroundColor = _ref.backgroundColor,
+    testID = _ref.testID;
+  var isLargeTitleMode = mode === 'largeTitle';
+  var leftEmptySpace = !left && titleAlign === 'left' ? null : /*#__PURE__*/jsx(View, {
+    width: "kitt.iconButton.width"
+  });
+  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",
+    backgroundColor: backgroundColor,
+    borderBottomWidth: hasSeparator && mode === 'default' ? 1 : 0,
+    borderColor: "kitt.separator",
+    testID: testID,
+    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.iconButton.width"
+      })]
+    }), 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(function (sticker, index) {
+          return (
+            /*#__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));
 }
 
 var _excluded$G = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
@@ -4600,10 +4685,10 @@ var useNativeAnimation$3 = function (_ref) {
     };
   });
   return {
-    onPressIn: function () {
+    onPressIn: function onPressIn() {
       pressed.value = true;
     },
-    onPressOut: function () {
+    onPressOut: function onPressOut() {
       pressed.value = false;
     },
     backgroundStyles: backgroundStyles
@@ -4666,7 +4751,7 @@ function ChoiceItem(_ref) {
     style: style,
     onBlur: onBlur,
     onFocus: onFocus,
-    onPress: function (e) {
+    onPress: function handlePress(e) {
       if (onFocus) onFocus(e);
       if (onPress) onPress();
       handleChange();
@@ -4674,7 +4759,7 @@ function ChoiceItem(_ref) {
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed;
       var textColor = getCurrentTextColor$1({
@@ -4778,7 +4863,7 @@ function Choices(_ref2) {
     type: type,
     disabled: disabled,
     onPress: !isForm ? onPress : undefined,
-    onChange: isForm ? function (newValue) {
+    onChange: isForm ? function handleChange(newValue) {
       setCurrentValue(newValue);
       if (onChange) onChange(newValue);
     } : undefined,
@@ -4934,11 +5019,11 @@ function DialogModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function () {
+    onShow: function onShow() {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function () {
+    onDismiss: function onDismiss() {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -4992,7 +5077,7 @@ function DialogModalBehaviour(_ref) {
       },
       children: /*#__PURE__*/jsx(DialogModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
         visible: visible,
-        onExited: function () {
+        onExited: function handleExitAnimationDone() {
           if (onExited) onExited();
           setIsModalBehaviourVisible(false);
         },
@@ -5255,7 +5340,7 @@ function ExternalLink(_ref) {
   var openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
-    onPress: function (e) {
+    onPress: function handleOnPress(e) {
       if (onPress) {
         onPress(e);
         if (e.defaultPrevented) return;
@@ -5479,14 +5564,14 @@ var _excluded$y = ["children", "name", "disabled", "placeholder", "isInitialOpen
 function patchNativeEvent(event) {
   return event || {
     preventDownshiftDefault: false,
-    preventDefault: function () {}
+    preventDefault: function preventDefault() {}
   };
 }
 function isReactElement(element) {
   return _typeof(element) === 'object' && element !== null && 'type' in element && 'props' in element;
 }
 function Autocomplete(_ref) {
-  var children = _ref.children,
+  var _children = _ref.children,
     name = _ref.name,
     disabled = _ref.disabled,
     placeholder = _ref.placeholder,
@@ -5513,7 +5598,7 @@ function Autocomplete(_ref) {
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
     props = _objectWithoutProperties(_ref, _excluded$y);
-  var childrenArray = Children.toArray(children);
+  var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
       child: child,
@@ -5524,12 +5609,12 @@ function Autocomplete(_ref) {
     defaultIsOpen: isInitialOpen,
     initialSelectedItem: initialValue,
     initialInputValue: initialValue ? itemToString(initialValue) : undefined,
-    itemToString: function (item) {
+    itemToString: function handleItemToString(item) {
       // Prevents returning null values
       if (!itemToString) return '';
       return itemToString(item || undefined);
     },
-    stateReducer: function (state, changes) {
+    stateReducer: function stateReducer(state, changes) {
       switch (changes.type) {
         case Downshift.stateChangeTypes.changeInput:
           return _objectSpread(_objectSpread({}, changes), {}, {
@@ -5539,7 +5624,7 @@ function Autocomplete(_ref) {
           return changes;
       }
     },
-    onChange: function (selectedItem, stateAndHelpers) {
+    onChange: function onChange(selectedItem, stateAndHelpers) {
       if (_onChange) {
         _onChange(selectedItem, stateAndHelpers);
       }
@@ -5547,7 +5632,7 @@ function Autocomplete(_ref) {
     onSelect: onSelectItem,
     onOuterClick: onOuterPress,
     onInputValueChange: onInputChange,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var getRootProps = _ref2.getRootProps,
         getInputProps = _ref2.getInputProps,
         getMenuProps = _ref2.getMenuProps,
@@ -5599,7 +5684,7 @@ function Autocomplete(_ref) {
           right: right || (canDisplayCollapseButton ? /*#__PURE__*/jsx(InputPressable, _objectSpread(_objectSpread({}, toggleProps), {}, {
             testID: "kitt.Autocomplete.listToggle",
             hitSlop: 40,
-            onPress: function (e) {
+            onPress: function handleTogglePress(e) {
               if (Platform.OS === 'web') {
                 onClickToggle(e);
                 return;
@@ -5610,13 +5695,13 @@ function Autocomplete(_ref) {
               icon: isCurrentlyOpen ? /*#__PURE__*/jsx(CaretUpFillIcon, {}) : /*#__PURE__*/jsx(CaretDownFillIcon, {})
             })
           })) : null),
-          onFocus: function (e) {
+          onFocus: function onFocus(e) {
             openMenu();
             /** @ts-expect-error onFocus wants web events */
             if (Platform.OS !== 'android' && onSearchInputFocus) onSearchInputFocus(e);
             if (_onFocus) _onFocus(e);
           },
-          onBlur: function (e) {
+          onBlur: function onBlur(e) {
             /** @ts-expect-error onBlur wants web events */
             if (Platform.OS === 'web' && onSearchInputBlur) onSearchInputBlur(e);
 
@@ -5652,14 +5737,14 @@ function Autocomplete(_ref) {
                   selected: ariaSelected
                 },
                 disabled: disabled,
-                onPress: function (e) {
+                onPress: function onPress(e) {
                   if (Platform.OS === 'web') {
                     if (onClick) onClick(e);
                     return;
                   }
                   if (_onPress) _onPress(patchNativeEvent(e));
                 },
-                children: function (_ref5) {
+                children: function children(_ref5) {
                   var isHovered = _ref5.isHovered,
                     isFocused = _ref5.isFocused,
                     isPressed = _ref5.isPressed;
@@ -5749,12 +5834,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       disabled: disabled
     },
     disabled: disabled,
-    onPress: function (e) {
+    onPress: function handlePress(e) {
       if (onFocus) onFocus();
       if (onChange) onChange(!checked, e);
       if (onBlur) onBlur();
     },
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -6309,7 +6394,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     DateTimePickerAndroid.open({
       testID: pickerUITestID,
       value: currentValue || pickerDefaultDate || new Date(Date.now()),
-      onChange: function (e) {
+      onChange: function onChange(e) {
         setIsFocused(false);
         var timestamp = e.nativeEvent.timestamp;
         if (timestamp) {
@@ -6361,7 +6446,7 @@ function PlatformDateTimePicker(_ref) {
     minimumDate: minimuDate,
     display: displayMode
   }, iosProps), {}, {
-    onChange: function (_event, date) {
+    onChange: function onChange(_event, date) {
       return _onChange(date);
     }
   }));
@@ -6371,11 +6456,7 @@ var _excluded$u = ["title", "isVisible", "value", "validateButtonLabel", "onClos
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(CardModal.Header, {
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-m",
-      variant: "bold",
-      children: children
-    })
+    title: children
   });
 }
 function ModalPlatformDateTimePicker(_ref2) {
@@ -6395,7 +6476,7 @@ function ModalPlatformDateTimePicker(_ref2) {
 
   return /*#__PURE__*/jsx(CardModal.ModalBehaviour, {
     visible: Boolean(isVisible),
-    onClose: function () {
+    onClose: function handleClose() {
       setCurrentValue(value);
       onClose();
     },
@@ -6406,7 +6487,7 @@ function ModalPlatformDateTimePicker(_ref2) {
         }) : null, /*#__PURE__*/jsx(CardModal.Body, {
           children: /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread(_objectSpread({}, props), {}, {
             value: currentValue,
-            onChange: function (newDate) {
+            onChange: function handleChange(newDate) {
               setCurrentValue(function (prev) {
                 return newDate || prev;
               });
@@ -6416,7 +6497,7 @@ function ModalPlatformDateTimePicker(_ref2) {
           children: /*#__PURE__*/jsx(Button, {
             stretch: true,
             type: "primary",
-            onPress: function () {
+            onPress: function handleSubmit() {
               onChange(currentValue);
             },
             children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
@@ -6470,7 +6551,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isFocusedInternal: isFocused || isFocusedInternal,
       isHoveredInternal: isHoveredInternal,
       isPressedInternal: isPressedInternal,
-      onPress: function () {
+      onPress: function handleModalOpen() {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
@@ -6483,7 +6564,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       validateButtonLabel: pickerUIValidateButtonLabel,
       defaultDate: pickerDefaultDate,
       onClose: handleModalClose,
-      onChange: function (newDate) {
+      onChange: function handleChange(newDate) {
         setCurrentValue(newDate);
         onChange(newDate);
         handleModalClose();
@@ -6799,7 +6880,7 @@ function FilePicker(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/cloneElement(childElement, {
       // ensure that the press event is not prevented by Button component
-      onPress: function () {
+      onPress: function onPress() {
         var _childElement$props$o, _childElement$props, _bottomSheetRef$curre;
         if (disabled) return;
         (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
@@ -7100,10 +7181,10 @@ var GoogleMapsAutocompleteContext = /*#__PURE__*/createContext({
     isLoadingResultDetails: false,
     shouldDisplayEmptyStateWhenNoResults: false
   },
-  onInputChange: function () {
+  onInputChange: function onInputChange() {
     return Promise.resolve();
   },
-  onSelectItem: function () {}
+  onSelectItem: function onSelectItem() {}
 });
 function GoogleMapsAutocompleteProvider(_ref) {
   var children = _ref.children,
@@ -7354,7 +7435,7 @@ function InputAddress(_ref) {
   return /*#__PURE__*/jsx(Autocomplete, _objectSpread(_objectSpread({}, props), {}, {
     itemToString: itemToString,
     initialValue: formattedInitialValue,
-    checkSelectedItem: function (selectedItem, item) {
+    checkSelectedItem: function checkSelectedItem(selectedItem, item) {
       return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.place_id) === item.place_id;
     },
     right: state.isLoadingSearch || state.isLoadingResultDetails ? /*#__PURE__*/jsx(Icon, {
@@ -7363,10 +7444,10 @@ function InputAddress(_ref) {
     }) : undefined,
     errorElement: state.hasSearchError || state.hasSelectResultError ? errorElement : null,
     emptyResultsElement: state.items.length === 0 ? emptyResultsElement : null,
-    onInputChange: function (v) {
+    onInputChange: function onInputChange(v) {
       _onInputChange(v);
     },
-    onChange: function (v) {
+    onChange: function onChange(v) {
       onSelectItem(v, _onChange);
     },
     children: state.items.map(function (item) {
@@ -7448,7 +7529,7 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, props), {}, {
     inputMode: "numeric",
-    onChange: function (event) {
+    onChange: function handleChange(event) {
       if (!onChange) return;
       var value = parseFloat(event.nativeEvent.text);
 
@@ -7480,7 +7561,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
       testID: "kitt.InputPassword.passwordToggle",
       hitSlop: 20,
       accessibilityRole: "button",
-      onPress: function () {
+      onPress: function onPress() {
         return setIsVisible(function (prev) {
           return !prev;
         });
@@ -7515,7 +7596,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     enterKeyHint: currentEnterKeyHint,
     autoComplete: autoComplete,
     textContentType: "telephoneNumber",
-    onChange: function (event) {
+    onChange: function handleChange(event) {
       var number = parseNumber(event.nativeEvent.text);
 
       // When intl phone number is valid :
@@ -7708,14 +7789,14 @@ function Radio(_ref, ref) {
     focusable: checked && !disabled,
     flexDirection: "row",
     alignItems: "center",
-    onPress: function (event) {
+    onPress: function handlePress(event) {
       if (onFocus) onFocus();
       if (onChange) onChange(value, event);
       if (onBlur) onBlur();
     },
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -7834,11 +7915,11 @@ var useNativeAnimation$2 = function (_ref) {
     };
   });
   return {
-    onPressIn: function () {
+    onPressIn: function handlePressIn() {
       color.value = withSpring(1);
       pressed.value = 1;
     },
-    onPressOut: function () {
+    onPressOut: function handlePressOut() {
       color.value = withSpring(0);
       pressed.value = 0;
     },
@@ -7891,7 +7972,7 @@ function RadioButton(_ref) {
     flexShrink: createResponsiveStyleFromProp(stretch, 1, undefined),
     flexBasis: createResponsiveStyleFromProp(stretch, 0),
     disabled: disabled,
-    onPress: function (e) {
+    onPress: function handlePress(e) {
       if (onFocus) onFocus(e);
       if (onChange) onChange(value);
       if (onBlur) onBlur(e);
@@ -7900,7 +7981,7 @@ function RadioButton(_ref) {
     onPressOut: onPressOut,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -8019,7 +8100,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
       textAlignVertical: "top",
       minHeight: "kitt.forms.textArea.minHeight"
     }, props), {}, {
-      onChange: function (e) {
+      onChange: function handleOnChange(e) {
         if (!limit || e.nativeEvent.text.length <= limit) {
           var _props$onChange;
           (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e);
@@ -8182,10 +8263,10 @@ function Toggle(_ref) {
     children: [/*#__PURE__*/jsx(Pressable, {
       accessibilityRole: "togglebutton",
       disabled: isDisabled,
-      onPress: function () {
+      onPress: function handlePress() {
         onChange(!value);
       },
-      children: function (_ref2) {
+      children: function children(_ref2) {
         var isHovered = _ref2.isHovered,
           isPressed = _ref2.isPressed,
           isFocused = _ref2.isFocused;
@@ -8372,11 +8453,11 @@ function FullscreenModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function () {
+    onShow: function onShow() {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function () {
+    onDismiss: function onDismiss() {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -8423,7 +8504,7 @@ function FullscreenModalBehaviour(_ref) {
     onClose: onClose,
     children: /*#__PURE__*/jsx(FullscreenModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
-      onExited: function () {
+      onExited: function handleExitAnimationDone() {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -8455,64 +8536,17 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$c = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+var _excluded$c = ["shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
-  var _ref$hasSeparator = _ref.hasSeparator,
-    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    isTransparent = _ref.isTransparent,
-    title = _ref.title,
-    children = _ref.children,
-    right = _ref.right,
-    left = _ref.left,
-    _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
+  var _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
     props = _objectWithoutProperties(_ref, _excluded$c);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
-  var hasRight = Boolean(right);
-  var hasLeft = Boolean(left);
-  var 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(_ref) {
@@ -8653,11 +8687,11 @@ var useNativeAnimation$1 = function (_ref) {
     };
   });
   return {
-    onPressIn: function () {
+    onPressIn: function handleHoverIn() {
       color.value = withTiming(1, withTimingConfig);
       translate.value = withTiming(2, withTimingConfig);
     },
-    onPressOut: function () {
+    onPressOut: function handleHoverOut() {
       color.value = withTiming(0, withTimingConfig);
       translate.value = withTiming(0, withTimingConfig);
     },
@@ -8751,13 +8785,13 @@ function Highlight(_ref) {
     });
   }
   return /*#__PURE__*/jsx(Pressable, {
-    onPress: function () {
+    onPress: function handlePress() {
       setIsExpanded(!isExpanded);
       setIsInitialRender(false);
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered;
       return /*#__PURE__*/jsxs(AnimatedContainer, {
         isHovered: isHovered,
@@ -8811,60 +8845,6 @@ function Highlight(_ref) {
   });
 }
 
-var getButtonTypeAndVariant = function (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'
-      };
-  }
-};
-
-var _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) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'black' : _ref$color;
-    _ref.ariaLabel;
-    var props = _objectWithoutProperties(_ref, _excluded$b);
-  var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
-    legacyColorToType = _getButtonTypeAndVari.type,
-    legacyColorToVariant = _getButtonTypeAndVari.variant;
-  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(_ref) {
   var title = _ref.title,
     action = _ref.action,
@@ -9086,7 +9066,7 @@ var getBackgroundColor = function (_ref) {
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint["default"];
 };
 
-var _excluded$a = ["onPress", "testID"];
+var _excluded$b = ["onPress", "testID"];
 function StaticMapMarker$1(_ref) {
   var variant = _ref.variant,
     isHovered = _ref.isHovered,
@@ -9145,11 +9125,11 @@ function StaticMapMarker$1(_ref) {
 function MapMarker(_ref2) {
   var onPress = _ref2.onPress,
     testID = _ref2.testID,
-    props = _objectWithoutProperties(_ref2, _excluded$a);
+    props = _objectWithoutProperties(_ref2, _excluded$b);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
-    children: function (_ref3) {
+    children: function children(_ref3) {
       var isHovered = _ref3.isHovered;
       return /*#__PURE__*/jsx(StaticMapMarker$1, _objectSpread(_objectSpread({}, props), {}, {
         isHovered: isHovered
@@ -10592,9 +10572,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
@@ -10899,11 +10876,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           width: theme.iconButton.width,
           height: theme.iconButton.height
         },
-        fullscreenModal: {
-          header: {
-            height: theme.fullscreenModal.header.height
-          }
-        },
         pageLoader: {
           size: theme.pageLoader.size
         },
@@ -10998,7 +10970,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         fullscreenModal: {
-          horizontalPadding: theme.fullscreenModal.sharedHorizontalPadding,
+          horizontalPadding: theme.fullscreenModal.horizontalPadding,
           body: {
             verticalPadding: theme.fullscreenModal.body.verticalPadding
           },
@@ -11819,6 +11791,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
+var _excluded$a = ["right"];
 function NavigationBottomSheet(_ref) {
   var children = _ref.children,
     hasScrollView = _ref.hasScrollView,
@@ -11857,19 +11830,15 @@ function NavigationBottomSheet(_ref) {
     })
   });
 }
+
+/**
+ * Web only: display right CloseButton
+ */
+
 function NavigationBottomSheetHeader(_ref2) {
-  var children = _ref2.children;
-    _ref2.left;
-  return /*#__PURE__*/jsx(HStack, {
-    marginBottom: "kitt.6",
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      flexGrow: 1,
-      flexShrink: 1,
-      variant: "bold",
-      textAlign: "center",
-      children: children
-    })
-  });
+  _ref2.right;
+    var props = _objectWithoutProperties(_ref2, _excluded$a);
+  return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 function NavigationBottomSheetBody(props) {
   return /*#__PURE__*/jsx(VStack, _objectSpread({
@@ -11921,19 +11890,19 @@ function NavigationModalBehaviour(_ref) {
     children: /*#__PURE__*/jsx(AnimationComponent, _objectSpread(_objectSpread({}, props), {}, {
       appear: shouldAppear,
       visible: visible,
-      onEnter: function () {
+      onEnter: function handleEnter() {
         if (onEnter) onEnter();
 
         // Once a children as been displayed, we force appear to false in order to avoid replaying animation on breakpoint change
         setShouldAppear(false);
       },
-      onExit: function () {
+      onExit: function handleExit() {
         if (onExit) onExit();
 
         // Reset appear value to its original value for future modal display
         setShouldAppear(appear);
       },
-      onExited: function () {
+      onExited: function handleExitAnimationDone() {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -12294,7 +12263,7 @@ function Picker(_ref) {
       isOpen: state.isOpen,
       selectedItem: state.currentValue,
       disabled: disabled,
-      onPress: function () {
+      onPress: function handlePressTrigger() {
         if (syncStateWithSourceValue) {
           dispatch({
             type: 'open-modal-with-value',
@@ -12313,14 +12282,9 @@ function Picker(_ref) {
       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,
@@ -12348,7 +12312,7 @@ function Picker(_ref) {
               accessibilityState: {
                 selected: isSelected
               },
-              onPress: function () {
+              onPress: function onPress() {
                 handleInternalChange(item.props.value);
               },
               children: function (_ref2) {
@@ -12369,7 +12333,7 @@ function Picker(_ref) {
           children: /*#__PURE__*/jsx(Button, {
             stretch: true,
             type: "primary",
-            onPress: function () {
+            onPress: function handleChange() {
               if (onChange) onChange(state.internalValue);
               dispatch({
                 type: 'change-value'
@@ -12506,7 +12470,7 @@ function Skeleton(_ref) {
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     style: style,
-    onLayout: function (_ref2) {
+    onLayout: function onLayout(_ref2) {
       var nativeEvent = _ref2.nativeEvent;
       return setWidth(nativeEvent.layout.width);
     },
@@ -12728,7 +12692,7 @@ function StaticMap(_ref) {
     position: "relative",
     maxWidth: mapBoxMaxPictureWidth,
     height: height,
-    onLayout: function (event) {
+    onLayout: function handleParentLayout(event) {
       var nativeEvent = event.nativeEvent;
       var rangedMapWidth = getPictureWidth(nativeEvent.layout.width);
       setCurrentWidth(rangedMapWidth);
@@ -12740,11 +12704,11 @@ function StaticMap(_ref) {
       width: currentWidth,
       height: height,
       alt: alt,
-      onLoadEnd: function () {
+      onLoadEnd: function handleImageLoadEnd() {
         setIsLoading(false);
         if (onLoaded) onLoaded();
       },
-      onError: function () {
+      onError: function handleError() {
         setHasError(true);
         if (onError) onError();
       }
@@ -12769,7 +12733,7 @@ function StaticMap(_ref) {
       width: "100%",
       height: "100%",
       children: /*#__PURE__*/jsx(StaticMapError, {
-        onReload: function () {
+        onReload: function handleReload() {
           setHasError(false);
           setIsLoading(true);
           setCurrentMapKey(function (prev) {
@@ -13010,7 +12974,7 @@ function StoryContainer(_ref) {
 var StoryDecorator = makeDecorator({
   name: 'StoryDecorator',
   parameterName: 'storyDecorator',
-  wrapper: function (storyFn, context) {
+  wrapper: function wrapper(storyFn, context) {
     var story = storyFn(context);
     if (context.parameters.disableStoryContainer) {
       return story;
@@ -13118,7 +13082,7 @@ function TabBarItem(_ref) {
     disabled: disabled,
     testID: testID,
     onPress: onPress,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -13207,7 +13171,7 @@ function TabBar(_ref) {
             color: color,
             variant: definedVariant,
             type: type,
-            onPress: function (event) {
+            onPress: function onPress(event) {
               var _child$props$onPress, _child$props;
               onChangeTab({
                 tab: tab,
@@ -13356,7 +13320,7 @@ function ModalDateTimePicker(_ref) {
           stretch: true,
           testID: "timePicker.ModalDateTimePicker.submitButton",
           type: "primary",
-          onPress: function () {
+          onPress: function handleSubmit() {
             onChange(currentValue);
           },
           children: buttonContent
@@ -13403,7 +13367,7 @@ var TimePickerPressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     width: createResponsiveStyleFromProp(stretch, '100%', 'kitt.forms.timePicker.minWidth'),
     pointerEvents: "box-only",
     onPress: onPress,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isFocused = _ref2.isFocused,
         isPressed = _ref2.isPressed;
@@ -13480,7 +13444,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isHoveredInternal: isHoveredInternal,
       isFocusedInternal: isFocusedInternal,
       isPressedInternal: isPressedInternal,
-      onPress: function () {
+      onPress: function handlePress() {
         setIsPickerVisible(true);
       }
     }), Platform.OS === 'android' && isPickerVisible ? /*#__PURE__*/jsx(DateTimePicker, {
@@ -13504,7 +13468,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       value: pickerValue,
       validateButtonLabel: validateButtonLabel,
       onChange: handleChange,
-      onClose: function () {
+      onClose: function handleClose() {
         setIsPickerVisible(false);
       }
     }) : null]
@@ -13867,7 +13831,7 @@ function Tooltip(_ref) {
       ref: reference,
       children: renderPressable({
         ref: getPressableRect,
-        onPress: function () {
+        onPress: function handlePress() {
           if (onToggle) onToggle(!!pressed.value);
           pressed.value = !pressed.value;
         },
@@ -13886,7 +13850,7 @@ function Tooltip(_ref) {
       left: customShiftData.left,
       right: customShiftData.right,
       zIndex: zIndex,
-      onLayout: function (_ref2) {
+      onLayout: function onLayout(_ref2) {
         var nativeEvent = _ref2.nativeEvent;
         return setFloatingWidth(nativeEvent.layout.width);
       },
@@ -13902,88 +13866,6 @@ function Tooltip(_ref) {
 Tooltip.Arrow = Arrow;
 Tooltip.Content = TooltipContent;
 
-function TopNavBar(_ref) {
-  var left = _ref.left,
-    right = _ref.right,
-    title = _ref.title,
-    _ref$titleAlign = _ref.titleAlign,
-    titleAlign = _ref$titleAlign === void 0 ? 'center' : _ref$titleAlign,
-    stickers = _ref.stickers,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
-    _ref$hasSeparator = _ref.hasSeparator,
-    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator;
-  var 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(function (sticker, index) {
-          return (
-            /*#__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) {
   var configs = theme.kitt.typography.types[getTypographyFamily(type)].configs;
   return configs[type];
@@ -14131,7 +14013,7 @@ function KittThemeProvider(_ref) {
 var KittThemeDecorator = makeDecorator({
   name: 'ThemeDecorator',
   parameterName: 'theme',
-  wrapper: function (storyFn, context, _ref2) {
+  wrapper: function wrapper(storyFn, context, _ref2) {
     var _parameters$isSSR;
     var _ref2$options = _ref2.options,
       options = _ref2$options === void 0 ? {} : _ref2$options,