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

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

@@ -1897,6 +1897,11 @@ const icon = {
   defaultSize: 20
 };
 
+const iconButton = {
+  width: button.height.default,
+  height: button.height.default
+};
+
 const listItem = {
   padding: '12px 16px',
   verticalPadding: 12,
@@ -2625,6 +2630,7 @@ const theme = {
   forms,
   highlight,
   icon,
+  iconButton,
   buttonBadge,
   listItem,
   pageLoader,
@@ -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,13 +4332,13 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-const _excluded$I = ["children", "padding"];
+const _excluded$J = ["children", "padding"];
 function CardModalBody(_ref) {
   let {
       children,
       padding = 'kitt.4'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4343,7 +4349,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-const _excluded$H = ["children", "padding", "hasSeparator"];
+const _excluded$I = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   let {
       children,
@@ -4353,7 +4359,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,
@@ -4397,7 +4403,7 @@ const getButtonTypeAndVariant = iconColor => {
   }
 };
 
-const _excluded$G = ["color", "ariaLabel"];
+const _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
@@ -4407,7 +4413,7 @@ function IconButton(_ref) {
       color = 'black',
       ariaLabel
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   const {
     type: legacyColorToType,
     variant: legacyColorToVariant
@@ -4430,11 +4436,13 @@ function TopNavBar({
   titleAlign = 'center',
   stickers,
   mode = 'default',
-  hasSeparator = true
+  hasSeparator = true,
+  backgroundColor,
+  testID
 }) {
   const isLargeTitleMode = mode === 'largeTitle';
   const leftEmptySpace = !left && titleAlign === 'left' ? null : /*#__PURE__*/jsx(View, {
-    width: "kitt.button.minWidth"
+    width: "kitt.iconButton.width"
   });
   return /*#__PURE__*/jsxs(VStack, {
     space: isLargeTitleMode ? 'kitt.2' : undefined,
@@ -4444,8 +4452,10 @@ function TopNavBar({
     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",
       justifyContent: !title && !left ? 'flex-end' : 'space-between',
@@ -4462,7 +4472,7 @@ function TopNavBar({
           children: title
         }) : null
       }) : null, right !== null && right !== void 0 ? right : /*#__PURE__*/jsx(View, {
-        width: "kitt.button.minWidth"
+        width: "kitt.iconButton.width"
       })]
     }), mode === 'largeTitle' ? /*#__PURE__*/jsxs(VStack, {
       space: "kitt.4",
@@ -4505,7 +4515,7 @@ function CardModalHeader(props) {
   return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 
-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 +4526,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 +4780,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 +5012,7 @@ function DialogModalAnimation({
   });
 }
 
-const _excluded$D = ["children", "visible", "onClose", "onExited"];
+const _excluded$E = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   let {
       children,
@@ -5010,7 +5020,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 +5048,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-const _excluded$C = ["stretch"];
+const _excluded$D = ["stretch"];
 function DialogModal({
   illustration,
   title,
@@ -5080,7 +5090,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 +5124,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 +5136,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 +5230,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 +5240,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 +5299,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 +5316,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 +5441,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 +5460,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 +5502,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 +5723,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 +5734,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 +6063,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 +6083,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 +6284,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 +6295,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,7 +6365,7 @@ function PlatformDateTimePicker({
   }));
 }
 
-const _excluded$t = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+const _excluded$u = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle({
   children
 }) {
@@ -6372,7 +6382,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 +6425,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 +6441,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 +6479,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 +6489,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 +6511,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 +6519,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 +6591,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 +6607,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 +6615,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 +6637,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 +6647,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 +6680,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 +7181,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 +7190,7 @@ function InputAddress(_ref) {
       emptyResultsElement,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   const {
     state,
     onInputChange,
@@ -7276,12 +7286,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 +7308,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 +7335,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 +7349,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 +7801,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 +7816,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 +7845,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 +8008,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 +8024,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 +8062,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 +8070,7 @@ function FullscreenModalBody(_ref) {
       style,
       shouldHandleTopNotch
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   const {
     bottom,
     top
@@ -8088,14 +8098,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 +8266,7 @@ function FullscreenModalAnimation({
   });
 }
 
-const _excluded$c = ["children", "visible", "onClose", "onExited"];
+const _excluded$d = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   let {
       children,
@@ -8264,7 +8274,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,12 +8319,12 @@ function FullscreenModalContainer({
   });
 }
 
-const _excluded$b = ["shouldHandleTopNotch"];
+const _excluded$c = ["shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   let {
       shouldHandleTopNotch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   const {
     top
   } = useSafeAreaInsets();
@@ -8829,7 +8839,7 @@ const getBackgroundColor = ({
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint.default;
 };
 
-const _excluded$a = ["onPress", "testID"];
+const _excluded$b = ["onPress", "testID"];
 function StaticMapMarker$1({
   variant,
   isHovered,
@@ -8892,7 +8902,7 @@ function MapMarker(_ref) {
       onPress,
       testID
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
@@ -10637,6 +10647,10 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        iconButton: {
+          width: theme.iconButton.width,
+          height: theme.iconButton.height
+        },
         pageLoader: {
           size: theme.pageLoader.size
         },
@@ -11549,6 +11563,7 @@ function KittNativeBaseProvider({
   });
 }
 
+const _excluded$a = ["right"];
 function NavigationBottomSheet({
   children,
   hasScrollView,
@@ -11593,7 +11608,8 @@ function NavigationBottomSheet({
  * Web only: display right CloseButton
  */
 
-function NavigationBottomSheetHeader(props) {
+function NavigationBottomSheetHeader(_ref) {
+  let props = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 function NavigationBottomSheetBody(props) {