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

package/dist/index.es.js

@@ -1912,6 +1912,11 @@ var icon = {
   defaultSize: 20
 };
 
+var iconButton = {
+  width: button.height["default"],
+  height: button.height["default"]
+};
+
 var listItem = {
   padding: '12px 16px',
   verticalPadding: 12,
@@ -2642,6 +2647,7 @@ var theme = {
   forms: forms,
   highlight: highlight,
   icon: icon,
+  iconButton: iconButton,
   buttonBadge: buttonBadge,
   listItem: listItem,
   pageLoader: pageLoader,
@@ -2749,7 +2755,7 @@ function ActionCardDisabled(_ref) {
   });
 }
 
-var _excluded$R = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+var _excluded$S = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -2762,7 +2768,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$R);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -3086,7 +3092,7 @@ var getTypographyTypeWithAncestorValue = function (type, typographyTypeInContext
   return !!isAllValuesUndefined && !!typographyTypeInContext ? typographyTypeInContext : type;
 };
 
-var _excluded$Q = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$R = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -3210,7 +3216,7 @@ function Typography(_ref2) {
     } : _ref2$type,
     variant = _ref2.variant,
     color = _ref2.color,
-    otherProps = _objectWithoutProperties(_ref2, _excluded$Q);
+    otherProps = _objectWithoutProperties(_ref2, _excluded$R);
   var sx = useSx();
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
   var typographyTypeInContext = useContext(TypographyTypeContext);
@@ -3352,12 +3358,12 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$P = ["color", "size"],
+var _excluded$Q = ["color", "size"],
   _excluded2$5 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   var colorValue = getTypographyColorValue(color);
   var sx = useSx();
   var _sx = sx({
@@ -3397,7 +3403,7 @@ var getButtonTextColorByType = function (type, variant, isHovered, isPressed, is
   return "".concat(baseKey, ".default");
 };
 
-var _excluded$O = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
+var _excluded$P = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
 function ButtonContentChildren(_ref) {
   var type = _ref.type,
     icon = _ref.icon,
@@ -3497,7 +3503,7 @@ function ButtonContent(_ref2) {
     _ref2.isFocused;
     var innerSpacing = _ref2.innerSpacing,
     size = _ref2.size,
-    props = _objectWithoutProperties(_ref2, _excluded$O);
+    props = _objectWithoutProperties(_ref2, _excluded$P);
   var color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3742,7 +3748,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$N = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$O = ["as", "onPress", "disabled", "icon", "stretch"];
 var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -3753,7 +3759,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -3831,7 +3837,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$M = ["children", "layout", "reversed"];
+var _excluded$N = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -3863,7 +3869,7 @@ function Actions(_ref) {
     reversed = _ref$reversed === void 0 ? {
       base: false
     } : _ref$reversed,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   var shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -3916,7 +3922,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$L = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+var _excluded$M = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -3979,7 +3985,7 @@ function Avatar(_ref2) {
     height = _ref2.height,
     dark = _ref2.dark,
     disabled = _ref2.disabled,
-    props = _objectWithoutProperties(_ref2, _excluded$L);
+    props = _objectWithoutProperties(_ref2, _excluded$M);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -4017,7 +4023,7 @@ function Avatar(_ref2) {
   });
 }
 
-var _excluded$K = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints"];
+var _excluded$L = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints"];
 function BottomSheetComp(_ref, ref) {
   var Content = _ref.children,
     _ref$hasScrollView = _ref.hasScrollView,
@@ -4030,7 +4036,7 @@ function BottomSheetComp(_ref, ref) {
     enableDynamicSizing = _ref$enableDynamicSiz === void 0 ? true : _ref$enableDynamicSiz,
     _ref$snapPoints = _ref.snapPoints,
     snapPoints = _ref$snapPoints === void 0 ? ['100%'] : _ref$snapPoints,
-    rest = _objectWithoutProperties(_ref, _excluded$K);
+    rest = _objectWithoutProperties(_ref, _excluded$L);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var Wrapper = useMemo(function () {
@@ -4342,13 +4348,13 @@ function CardModalAnimation(_ref) {
   });
 }
 
-var _excluded$J = ["children", "visible", "onClose", "onExited"];
+var _excluded$K = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4373,12 +4379,12 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$I = ["children", "padding"];
+var _excluded$J = ["children", "padding"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? 'kitt.4' : _ref$padding,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4389,7 +4395,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$H = ["children", "padding", "hasSeparator"];
+var _excluded$I = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -4399,7 +4405,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4443,7 +4449,7 @@ var getButtonTypeAndVariant = function (iconColor) {
   }
 };
 
-var _excluded$G = ["color", "ariaLabel"];
+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
@@ -4452,7 +4458,7 @@ function IconButton(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'black' : _ref$color;
     _ref.ariaLabel;
-    var props = _objectWithoutProperties(_ref, _excluded$G);
+    var props = _objectWithoutProperties(_ref, _excluded$H);
   var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
     legacyColorToType = _getButtonTypeAndVari.type,
     legacyColorToVariant = _getButtonTypeAndVari.variant;
@@ -4477,10 +4483,12 @@ function TopNavBar(_ref) {
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? 'default' : _ref$mode,
     _ref$hasSeparator = _ref.hasSeparator,
-    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator;
+    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
+    backgroundColor = _ref.backgroundColor,
+    testID = _ref.testID;
   var isLargeTitleMode = mode === 'largeTitle';
   var 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,
@@ -4490,8 +4498,10 @@ function TopNavBar(_ref) {
     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',
@@ -4508,7 +4518,7 @@ function TopNavBar(_ref) {
           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",
@@ -4554,7 +4564,7 @@ function CardModalHeader(props) {
   return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 
-var _excluded$F = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+var _excluded$G = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -4565,7 +4575,7 @@ function CardModal(_ref) {
     header = _ref.header,
     body = _ref.body,
     footer = _ref.footer,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4811,11 +4821,11 @@ function ChoiceItemContainer(_ref) {
   }));
 }
 
-var _excluded$E = ["direction", "contentContainerStyle"];
+var _excluded$F = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
     contentContainerStyle = _ref.contentContainerStyle,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -5041,13 +5051,13 @@ function DialogModalAnimation(_ref) {
   });
 }
 
-var _excluded$D = ["children", "visible", "onClose", "onExited"];
+var _excluded$E = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -5078,7 +5088,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$C = ["stretch"];
+var _excluded$D = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -5118,7 +5128,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$C);
+    props = _objectWithoutProperties(_ref2, _excluded$D);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -5155,7 +5165,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$B = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$C = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$4 = ["phoneNumber", "children"],
   _excluded3$3 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -5165,7 +5175,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -5317,7 +5327,7 @@ function useOpenExternalLink(errorHandler) {
   }();
 }
 
-var _excluded$A = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
+var _excluded$B = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
     href = _ref.href,
@@ -5326,7 +5336,7 @@ function ExternalLink(_ref) {
     onPress = _ref.onPress,
     _ref$onOpenLinkError = _ref.onOpenLinkError,
     onOpenLinkError = _ref$onOpenLinkError === void 0 ? console.error : _ref$onOpenLinkError,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   var openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
@@ -5383,7 +5393,7 @@ function InputTextContainer(_ref) {
   });
 }
 
-var _excluded$z = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
+var _excluded$A = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
 var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     right = _ref.right;
@@ -5404,7 +5414,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     multiline = _ref.multiline,
     height = _ref.height,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
@@ -5529,12 +5539,12 @@ function AutocompleteItemsListContainer(_ref) {
   });
 }
 
-var _excluded$y = ["children", "testID"];
+var _excluded$z = ["children", "testID"];
 function AutocompleteOption(_ref) {
   var children = _ref.children,
     _ref$testID = _ref.testID,
     testID = _ref$testID === void 0 ? 'kitt.Autocomplete.option' : _ref$testID,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -5547,7 +5557,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-var _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"],
+var _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"];
@@ -5587,7 +5597,7 @@ function Autocomplete(_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
@@ -5802,7 +5812,7 @@ function getBorderColor$1(_ref) {
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-var _excluded$w = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
+var _excluded$x = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     _ref$hitSlop = _ref.hitSlop,
@@ -5812,7 +5822,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   var theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -6130,7 +6140,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$v = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$w = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -6148,7 +6158,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$v);
+    _objectWithoutProperties(_ref, _excluded$w);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -6357,7 +6367,7 @@ var PressableDateInputs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$u = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
+var _excluded$v = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -6366,7 +6376,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDefaultVisible = _ref.isDefaultVisible,
     value = _ref.value,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
@@ -6442,7 +6452,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$t = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$u = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(CardModal.Header, {
@@ -6456,7 +6466,7 @@ function ModalPlatformDateTimePicker(_ref2) {
     validateButtonLabel = _ref2.validateButtonLabel,
     onClose = _ref2.onClose,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$t);
+    props = _objectWithoutProperties(_ref2, _excluded$u);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -6502,7 +6512,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$s = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+var _excluded$t = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
 var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -6516,7 +6526,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   var _useState = useState(isDefaultVisible),
     _useState2 = _slicedToArray(_useState, 2),
     isPickerUIVisible = _useState2[0],
@@ -6563,7 +6573,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$r = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+var _excluded$s = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -6571,7 +6581,7 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     pickerDefaultDate = _ref.pickerDefaultDate,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -6593,14 +6603,14 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$q = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
+var _excluded$r = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$fillMode = _ref.fillMode,
     fillMode = _ref$fillMode === void 0 ? 'native' : _ref$fillMode,
     enterKeyHint = _ref.enterKeyHint,
     value = _ref.value,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   if (fillMode === 'keyboard') {
@@ -6716,10 +6726,10 @@ function ImagePicker(_ref) {
   });
 }
 
-var _excluded$p = ["children"];
+var _excluded$q = ["children"];
 function ListItemContent(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -6730,14 +6740,14 @@ function ListItemContent(_ref) {
   }));
 }
 
-var _excluded$o = ["children", "side"],
+var _excluded$p = ["children", "side"],
   _excluded2$2 = ["children", "align"];
 // Handles the vertical alignment of the side elements of the list item
 function ListItemSideContainer(_ref) {
   var children = _ref.children,
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? 'left' : _ref$side,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -6758,7 +6768,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-var _excluded$n = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$o = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   var children = _ref.children,
     withPadding = _ref.withPadding,
@@ -6766,7 +6776,7 @@ function ListItem(_ref) {
     left = _ref.left,
     right = _ref.right,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$n);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -6799,10 +6809,10 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-var _excluded$m = ["title"];
+var _excluded$n = ["title"];
 function BottomSheetActionsItem(_ref) {
   var title = _ref.title,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(ListItem, {
       withPadding: true,
@@ -7406,7 +7416,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-var _excluded$l = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+var _excluded$m = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   var initialValue = _ref.initialValue,
     _ref$itemToString = _ref.itemToString,
@@ -7414,7 +7424,7 @@ function InputAddress(_ref) {
     errorElement = _ref.errorElement,
     emptyResultsElement = _ref.emptyResultsElement,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var _useGoogleMapsAutocom = useGoogleMapsAutocomplete(),
     state = _useGoogleMapsAutocom.state,
     _onInputChange = _useGoogleMapsAutocom.onInputChange,
@@ -7511,10 +7521,10 @@ var InputIban = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
 });
 
-var _excluded$k = ["onChange"];
+var _excluded$l = ["onChange"];
 var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -7531,11 +7541,11 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$j = ["isPasswordDefaultVisible", "right"];
+var _excluded$k = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -7563,7 +7573,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$i = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
+var _excluded$j = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -7577,7 +7587,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$phoneNumberLengt = _ref.phoneNumberLength,
     phoneNumberLength = _ref$phoneNumberLengt === void 0 ? 10 : _ref$phoneNumberLengt,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -8014,7 +8024,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$h = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$i = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -8027,7 +8037,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$h);
+    props = _objectWithoutProperties(_ref2, _excluded$i);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -8059,12 +8069,12 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-var _excluded$g = ["helper", "limit"];
+var _excluded$h = ["helper", "limit"];
 var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _props$value, _props$value2;
   var helper = _ref.helper,
     limit = _ref.limit,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var shouldDisplayLimit = limit && limit > 0;
   var isLimitReached = ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) === limit;
   var limitContainerAnimatedStyle = useAnimatedStyle(function () {
@@ -8223,7 +8233,7 @@ function ToggleAnimated(_ref) {
   });
 }
 
-var _excluded$f = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
+var _excluded$g = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
 var getLabelTypographyType = function (size) {
   return size === 'medium' ? 'body-m' : 'body-l';
 };
@@ -8245,7 +8255,7 @@ function Toggle(_ref) {
     value = _ref$value === void 0 ? false : _ref$value,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var theme = useKittTheme();
   return /*#__PURE__*/jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center"
@@ -8284,13 +8294,13 @@ function Toggle(_ref) {
   }));
 }
 
-var _excluded$e = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$f = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -8310,14 +8320,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$d = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$e = ["shouldHandleBottomNotch", "hasSeparator", "children"];
 function FullscreenModalFooter(_ref) {
   var _ref$shouldHandleBott = _ref.shouldHandleBottomNotch,
     shouldHandleBottomNotch = _ref$shouldHandleBott === void 0 ? true : _ref$shouldHandleBott,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom;
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
@@ -8473,13 +8483,13 @@ function FullscreenModalAnimation(_ref) {
   });
 }
 
-var _excluded$c = ["children", "visible", "onClose", "onExited"];
+var _excluded$d = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -8526,11 +8536,11 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$b = ["shouldHandleTopNotch"];
+var _excluded$c = ["shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   var _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   return /*#__PURE__*/jsx(View, {
@@ -9056,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,
@@ -9115,7 +9125,7 @@ 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,
@@ -10862,6 +10872,10 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        iconButton: {
+          width: theme.iconButton.width,
+          height: theme.iconButton.height
+        },
         pageLoader: {
           size: theme.pageLoader.size
         },
@@ -11777,6 +11791,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
+var _excluded$a = ["right"];
 function NavigationBottomSheet(_ref) {
   var children = _ref.children,
     hasScrollView = _ref.hasScrollView,
@@ -11820,7 +11835,9 @@ function NavigationBottomSheet(_ref) {
  * Web only: display right CloseButton
  */
 
-function NavigationBottomSheetHeader(props) {
+function NavigationBottomSheetHeader(_ref2) {
+  _ref2.right;
+    var props = _objectWithoutProperties(_ref2, _excluded$a);
   return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 function NavigationBottomSheetBody(props) {