@ornikar/kitt-universal 27.5.1-canary.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0 → 27.5.1-canary.7b68cb8f8312c7736633882eefa6e43178ed4819.0

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

@@ -1893,43 +1893,8 @@ const highlight = {
   }
 };
 
-const getIconSizeFromFontSize = fontSize => {
-  if (fontSize <= 14) return 16;
-  if (fontSize <= 16) return 20;
-  return 24;
-};
-const createTypographyIconSizeConfig = (baseAndSmallFontSize, mediumAndWideFontSize) => {
-  const baseAndSmallIconSize = getIconSizeFromFontSize(baseAndSmallFontSize);
-  const mediumAndWideIconSize = getIconSizeFromFontSize(mediumAndWideFontSize);
-  return {
-    baseAndSmall: {
-      iconSize: baseAndSmallIconSize
-    },
-    mediumAndWide: {
-      iconSize: mediumAndWideIconSize
-    }
-  };
-};
 const icon = {
-  defaultSize: 20,
-  // Note: this is based on typography updated sizes, not current https://github.com/ornikar/kitt/pull/2130
-  typographySize: {
-    // also known as xxlarge
-    header1: createTypographyIconSizeConfig(40, 56),
-    // also known as xlarge
-    header2: createTypographyIconSizeConfig(32, 48),
-    // also known as medium
-    header3: createTypographyIconSizeConfig(24, 40),
-    // also known as xsmall
-    header4: createTypographyIconSizeConfig(18, 24),
-    // also known as xxsmall
-    header5: createTypographyIconSizeConfig(18, 18),
-    'body-large': createTypographyIconSizeConfig(18, 24),
-    'body-medium': createTypographyIconSizeConfig(18, 18),
-    body: createTypographyIconSizeConfig(16, 16),
-    'body-small': createTypographyIconSizeConfig(14, 14),
-    'body-xsmall': createTypographyIconSizeConfig(12, 12)
-  }
+  defaultSize: 20
 };
 
 const iconButton = {
@@ -2356,6 +2321,183 @@ const skeleton = {
   }
 };
 
+const tabBar = {
+  underline: {
+    default: {
+      active: {
+        color: {
+          default: deepPurpleColorPalette['deepPurple.8'],
+          focused: deepPurpleColorPalette['deepPurple.8'],
+          hovered: deepPurpleColorPalette['deepPurple.8'],
+          pressed: deepPurpleColorPalette['deepPurple.8']
+        },
+        indicator: {
+          backgroundColor: deepPurpleColorPalette['deepPurple.8']
+        }
+      },
+      inactive: {
+        color: {
+          default: deepPurpleColorPalette['grey.5'],
+          focused: deepPurpleColorPalette['grey.5'],
+          hovered: deepPurpleColorPalette['deepPurple.8'],
+          pressed: deepPurpleColorPalette['deepPurple.8']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      disabled: {
+        color: {
+          default: deepPurpleColorPalette['grey.3'],
+          focused: deepPurpleColorPalette['grey.3'],
+          hovered: deepPurpleColorPalette['grey.3'],
+          pressed: deepPurpleColorPalette['grey.3']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      borderBottomColor: deepPurpleColorPalette['beige.3']
+    },
+    revert: {
+      active: {
+        color: {
+          default: deepPurpleColorPalette['grey.0'],
+          focused: deepPurpleColorPalette['grey.0'],
+          hovered: deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['grey.0']
+        },
+        indicator: {
+          backgroundColor: deepPurpleColorPalette['grey.0']
+        }
+      },
+      inactive: {
+        color: {
+          default: deepPurpleColorPalette['white-alpha.80'],
+          focused: deepPurpleColorPalette['white-alpha.80'],
+          hovered: deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['grey.0']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      disabled: {
+        color: {
+          default: deepPurpleColorPalette['white-alpha.20'],
+          focused: deepPurpleColorPalette['white-alpha.20'],
+          hovered: deepPurpleColorPalette['white-alpha.20'],
+          pressed: deepPurpleColorPalette['white-alpha.20']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      borderBottomColor: deepPurpleColorPalette['white-alpha.20']
+    }
+  },
+  solid: {
+    default: {
+      active: {
+        color: {
+          default: deepPurpleColorPalette['grey.0'],
+          focused: deepPurpleColorPalette['grey.0'],
+          hovered: deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['grey.0']
+        },
+        backgroundColor: {
+          default: deepPurpleColorPalette['deepPurple.8'],
+          focused: deepPurpleColorPalette['deepPurple.8'],
+          hovered: deepPurpleColorPalette['deepPurple.8'],
+          pressed: deepPurpleColorPalette['deepPurple.8']
+        },
+        borderRadius: 4,
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      inactive: {
+        color: {
+          default: deepPurpleColorPalette['grey.5'],
+          focused: deepPurpleColorPalette['grey.5'],
+          hovered: deepPurpleColorPalette['grey.5'],
+          pressed: deepPurpleColorPalette['grey.5']
+        },
+        backgroundColor: {
+          default: undefined,
+          focused: undefined,
+          hovered: deepPurpleColorPalette['beige.1'],
+          pressed: deepPurpleColorPalette['beige.1']
+        },
+        borderRadius: 4,
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      disabled: {
+        color: {
+          default: deepPurpleColorPalette['grey.3'],
+          focused: deepPurpleColorPalette['grey.3'],
+          hovered: deepPurpleColorPalette['grey.3'],
+          pressed: deepPurpleColorPalette['grey.3']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      }
+    },
+    revert: {
+      active: {
+        color: {
+          default: deepPurpleColorPalette['deepPurple.8'],
+          focused: deepPurpleColorPalette['deepPurple.8'],
+          hovered: deepPurpleColorPalette['deepPurple.8'],
+          pressed: deepPurpleColorPalette['deepPurple.8']
+        },
+        backgroundColor: {
+          default: deepPurpleColorPalette['grey.0'],
+          focused: deepPurpleColorPalette['grey.0'],
+          hovered: deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['grey.0']
+        },
+        borderRadius: 4,
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      inactive: {
+        color: {
+          default: deepPurpleColorPalette['white-alpha.80'],
+          focused: deepPurpleColorPalette['white-alpha.80'],
+          hovered: deepPurpleColorPalette['white-alpha.80'],
+          pressed: deepPurpleColorPalette['white-alpha.80']
+        },
+        backgroundColor: {
+          default: undefined,
+          focused: undefined,
+          hovered: deepPurpleColorPalette['white-alpha.10'],
+          pressed: deepPurpleColorPalette['white-alpha.10']
+        },
+        borderRadius: 4,
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      disabled: {
+        color: {
+          default: deepPurpleColorPalette['white-alpha.20'],
+          focused: deepPurpleColorPalette['white-alpha.20'],
+          hovered: deepPurpleColorPalette['white-alpha.20'],
+          pressed: deepPurpleColorPalette['white-alpha.20']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      }
+    }
+  }
+};
+
 const tag = {
   borderRadius: 16,
   icon: {
@@ -2495,6 +2637,7 @@ const theme = {
   picker,
   shadows,
   skeleton,
+  tabBar,
   tag,
   tooltip,
   typography,
@@ -2596,7 +2739,7 @@ function ActionCardDisabled({
   });
 }
 
-const _excluded$T = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+const _excluded$S = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   let {
       children,
@@ -2608,7 +2751,7 @@ function ActionCard(_ref) {
       isPressed,
       isFocused
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$T);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -2909,17 +3052,21 @@ const getTypographyFamilyWithAncestorValue = (type, typographyFamilyInContext) =
   if (typographyFamilyInContext != null) return typographyFamilyInContext;
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
+const getTypographyTypeWithAncestorValue = (type, typographyTypeInContext) => {
+  // check if all values are not undefined
+  const isAllValuesUndefined = Object.values(type).every(value => value === undefined);
 
-const _excluded$S = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+  // if every values are undefined and we hgave a typographyTypeInContext, we use the parent typography type (typographyTypeInContext)
+  return !!isAllValuesUndefined && !!typographyTypeInContext ? typographyTypeInContext : type;
+};
+
+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');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
-function useTypographyAncestorType() {
-  return useContext(TypographyTypeContext);
-}
 const TypographyDefaultColorContext = /*#__PURE__*/createContext(undefined);
 function useTypographyDefaultColor() {
   return useContext(TypographyDefaultColorContext);
@@ -3022,7 +3169,7 @@ function getUniversalFontWeight(type, variant, typographyFamily) {
   };
 }
 function Typography(_ref) {
-  var _type$base;
+  var _typographyType$base;
   let {
       accessibilityRole,
       base: legacyBase,
@@ -3040,12 +3187,14 @@ function Typography(_ref) {
       variant,
       color
     } = _ref,
-    otherProps = _objectWithoutProperties(_ref, _excluded$S);
+    otherProps = _objectWithoutProperties(_ref, _excluded$R);
   const sx = useSx();
   const typographyFamilyInContext = useContext(TypographyFamilyContext);
+  const typographyTypeInContext = useContext(TypographyTypeContext);
   const defaultColor = useTypographyDefaultColor();
   const hasTypographyAncestor = typographyFamilyInContext !== null;
-  const baseOrDefaultToBody = hasTypographyAncestor ? type.base : (_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body-m';
+  const typographyType = getTypographyTypeWithAncestorValue(type, typographyTypeInContext);
+  const baseOrDefaultToBody = (_typographyType$base = typographyType.base) !== null && _typographyType$base !== void 0 ? _typographyType$base : 'body-m';
   const typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
   const fontSizeForNativeBase = createNativeBaseFontSize(_objectSpread(_objectSpread({}, type), {}, {
     base: baseOrDefaultToBody
@@ -3080,7 +3229,7 @@ function Typography(_ref) {
   const content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
     value: typographyFamily,
     children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
-      value: type,
+      value: typographyType,
       children: text
     })
   }) : text;
@@ -3179,32 +3328,14 @@ function Icon({
   });
 }
 
-const _excluded$R = ["color", "size"],
+const _excluded$Q = ["color", "size"],
   _excluded2$5 = ["color"];
-function getIconSizeConfigKeyFromTypeName(breakpointName) {
-  return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
-}
-function createNativeBaseIconSize(type) {
-  const typeWithMediumForced = _objectSpread(_objectSpread({}, type), {}, {
-    medium: type.medium || type.small || type.base
-  });
-  const iconSizeForNativeBase = {};
-  [KittBreakpointNameEnum.BASE, KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE].forEach(typeName => {
-    const value = typeWithMediumForced[typeName];
-    if (value) {
-      iconSizeForNativeBase[typeName] = `kitt.icon.typographySize.${value}.${getIconSizeConfigKeyFromTypeName(typeName)}.iconSize`;
-    }
-  });
-  return iconSizeForNativeBase;
-}
 function TypographyIconSpecifiedColor(_ref) {
   let {
       color,
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$R);
-  const ancestorType = useTypographyAncestorType();
-  const iconSize = size || (ancestorType ? createNativeBaseIconSize(ancestorType) : undefined);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   const colorValue = getTypographyColorValue(color);
   const sx = useSx();
   const {
@@ -3213,7 +3344,7 @@ function TypographyIconSpecifiedColor(_ref) {
     color: colorValue
   });
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
-    size: iconSize,
+    size: size,
     color: colorStyleValue
   }));
 }
@@ -3247,7 +3378,7 @@ const getButtonTextColorByType = (type, variant, isHovered, isPressed, isDisable
   return `${baseKey}.default`;
 };
 
-const _excluded$Q = ["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,
@@ -3347,7 +3478,7 @@ function ButtonContent(_ref) {
       innerSpacing,
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   const color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3595,7 +3726,7 @@ function LoaderIcon({
   });
 }
 
-const _excluded$P = ["as", "onPress", "disabled", "icon", "stretch"];
+const _excluded$O = ["as", "onPress", "disabled", "icon", "stretch"];
 const ActionsItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
@@ -3607,7 +3738,7 @@ const ActionsItem = /*#__PURE__*/forwardRef((_ref, ref) => {
         medium: false
       }
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    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
@@ -3658,7 +3789,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-const _excluded$O = ["children", "layout", "reversed"];
+const _excluded$N = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -3691,7 +3822,7 @@ function Actions(_ref) {
         base: false
       }
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   const shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -3746,7 +3877,7 @@ function getInitials(firstname, lastname) {
   return `${firstname[0]}${lastname[0]}`.toUpperCase();
 }
 
-const _excluded$N = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+const _excluded$M = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent({
   size,
   src,
@@ -3812,7 +3943,7 @@ function Avatar(_ref) {
       dark,
       disabled
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$M);
   const currentSize = getCurrentSize({
     size,
     sizeVariant
@@ -3850,7 +3981,7 @@ function Avatar(_ref) {
   });
 }
 
-const _excluded$M = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints"];
+const _excluded$L = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints"];
 function BottomSheetComp(_ref, ref) {
   let {
       children: Content,
@@ -3860,7 +3991,7 @@ function BottomSheetComp(_ref, ref) {
       enableDynamicSizing = true,
       snapPoints = ['100%']
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$M);
+    rest = _objectWithoutProperties(_ref, _excluded$L);
   const {
     top
   } = useSafeAreaInsets();
@@ -4171,7 +4302,7 @@ function CardModalAnimation({
   });
 }
 
-const _excluded$L = ["children", "visible", "onClose", "onExited"];
+const _excluded$K = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   let {
       children,
@@ -4179,7 +4310,7 @@ function CardModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -4201,7 +4332,7 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-const _excluded$K = ["children", "paddingX", "paddingY"];
+const _excluded$J = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   let {
       children,
@@ -4214,7 +4345,7 @@ function CardModalBody(_ref) {
         medium: 'kitt.6'
       }
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4226,7 +4357,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-const _excluded$J = ["children", "padding", "hasSeparator"];
+const _excluded$I = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   let {
       children,
@@ -4236,7 +4367,7 @@ function CardModalFooter(_ref) {
       },
       hasSeparator = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4250,7 +4381,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-const _excluded$I = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+const _excluded$H = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   let {
       children,
@@ -4263,7 +4394,7 @@ function CardModalHeader(_ref) {
       right,
       left
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   const defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -4301,7 +4432,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-const _excluded$H = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+const _excluded$G = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   let {
       backgroundColor = 'kitt.uiBackgroundLight',
@@ -4312,7 +4443,7 @@ function CardModal(_ref) {
       body,
       footer
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4566,13 +4697,13 @@ function ChoiceItemContainer({
   }));
 }
 
-const _excluded$G = ["direction", "contentContainerStyle"];
+const _excluded$F = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   let {
       direction,
       contentContainerStyle
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4798,7 +4929,7 @@ function DialogModalAnimation({
   });
 }
 
-const _excluded$F = ["children", "visible", "onClose", "onExited"];
+const _excluded$E = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   let {
       children,
@@ -4806,7 +4937,7 @@ function DialogModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -4834,7 +4965,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-const _excluded$E = ["stretch"];
+const _excluded$D = ["stretch"];
 function DialogModal({
   illustration,
   title,
@@ -4876,7 +5007,7 @@ function DialogModalButton(_ref) {
   let {
       stretch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -4910,7 +5041,7 @@ function Emoji({
   });
 }
 
-const _excluded$D = ["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"];
@@ -4922,7 +5053,7 @@ function ExternalAppLink(_ref) {
       onPress,
       onOpenAppError
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   const href = `${appScheme}:${appValue}`;
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({
     href: href
@@ -5016,7 +5147,7 @@ function useOpenExternalLink(errorHandler) {
   };
 }
 
-const _excluded$C = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
+const _excluded$B = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
 function ExternalLink(_ref) {
   let {
       as: Component,
@@ -5026,7 +5157,7 @@ function ExternalLink(_ref) {
       // eslint-disable-next-line no-console
       onOpenLinkError = console.error
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   const openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
@@ -5085,7 +5216,7 @@ function InputTextContainer({
   });
 }
 
-const _excluded$B = ["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,
@@ -5102,7 +5233,7 @@ const InputText = /*#__PURE__*/forwardRef((_ref, ref) => {
       height,
       onSubmitEditing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   const theme = useTheme();
   const fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
@@ -5227,13 +5358,13 @@ function AutocompleteItemsListContainer({
   });
 }
 
-const _excluded$A = ["children", "testID"];
+const _excluded$z = ["children", "testID"];
 function AutocompleteOption(_ref) {
   let {
       children,
       testID = 'kitt.Autocomplete.option'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -5246,7 +5377,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-const _excluded$z = ["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"];
@@ -5288,7 +5419,7 @@ function Autocomplete(_ref) {
       zIndex = 1000,
       maxItemContainerHeight
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   const childrenArray = Children.toArray(children);
   const items = childrenArray.filter(isReactElement).map(child => ({
     child,
@@ -5509,7 +5640,7 @@ function getBorderColor$1({
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-const _excluded$y = ["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,
@@ -5520,7 +5651,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
       onBlur,
       onFocus
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   const theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -5849,7 +5980,7 @@ function PartContainer({
   });
 }
 
-const _excluded$x = ["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,
@@ -5869,7 +6000,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus,
       onSubmitEditing
     } = _ref;
-    _objectWithoutProperties(_ref, _excluded$x);
+    _objectWithoutProperties(_ref, _excluded$w);
   const monthRef = useRef(null);
   const yearRef = useRef(null);
   const defaultValue = value;
@@ -6070,7 +6201,7 @@ const PressableDateInputs = /*#__PURE__*/forwardRef(({
   });
 });
 
-const _excluded$w = ["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,
@@ -6081,7 +6212,7 @@ const DatePickerAndroid = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   const [isFocused, setIsFocused] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
   const handleClose = () => {
@@ -6151,7 +6282,7 @@ function PlatformDateTimePicker({
   }));
 }
 
-const _excluded$v = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+const _excluded$u = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle({
   children
 }) {
@@ -6172,7 +6303,7 @@ function ModalPlatformDateTimePicker(_ref) {
       onClose,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   const [currentValue, setCurrentValue] = useState(value);
 
   // Prevent unsynced value between the modal and its parent state
@@ -6215,7 +6346,7 @@ function ModalPlatformDateTimePicker(_ref) {
   });
 }
 
-const _excluded$u = ["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,
@@ -6231,7 +6362,7 @@ const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus,
       onBlur
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   const [isPickerUIVisible, setIsPickerUIVisible] = useState(isDefaultVisible);
   const [isFocused, setIsFocused] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
@@ -6269,7 +6400,7 @@ const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 
-const _excluded$t = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+const _excluded$s = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -6279,7 +6410,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onChange,
       onBlur
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -6301,7 +6432,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props));
 });
 
-const _excluded$s = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
+const _excluded$r = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
 const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       fillMode = 'native',
@@ -6309,7 +6440,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onSubmitEditing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    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') {
@@ -6381,12 +6512,12 @@ function ImagePicker({
   });
 }
 
-const _excluded$r = ["children"];
+const _excluded$q = ["children"];
 function ListItemContent(_ref) {
   let {
       children
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -6397,7 +6528,7 @@ function ListItemContent(_ref) {
   }));
 }
 
-const _excluded$q = ["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) {
@@ -6405,7 +6536,7 @@ function ListItemSideContainer(_ref) {
       children,
       side = 'left'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -6427,7 +6558,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-const _excluded$p = ["children", "withPadding", "borders", "left", "right", "onPress"];
+const _excluded$o = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   let {
       children,
@@ -6437,7 +6568,7 @@ function ListItem(_ref) {
       right,
       onPress
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   const Wrapper = onPress ? Pressable$2 : Fragment$1;
   const wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -6470,12 +6601,12 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-const _excluded$o = ["title"];
+const _excluded$n = ["title"];
 function BottomSheetActionsItem(_ref) {
   let {
       title
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(ListItem, {
       withPadding: true,
@@ -6971,7 +7102,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-const _excluded$n = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+const _excluded$m = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   let {
       initialValue,
@@ -6980,7 +7111,7 @@ function InputAddress(_ref) {
       emptyResultsElement,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   const {
     state,
     onInputChange,
@@ -7076,12 +7207,12 @@ const InputIban = /*#__PURE__*/forwardRef((props, ref) => {
   }, props));
 });
 
-const _excluded$m = ["onChange"];
+const _excluded$l = ["onChange"];
 const InputNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -7098,13 +7229,13 @@ const InputNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
-const _excluded$l = ["isPasswordDefaultVisible", "right"];
+const _excluded$k = ["isPasswordDefaultVisible", "right"];
 const InputPassword = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       isPasswordDefaultVisible,
       right
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   const [isVisible, setIsVisible] = useState(Boolean(isPasswordDefaultVisible));
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -7125,7 +7256,7 @@ const InputPassword = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
-const _excluded$k = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
+const _excluded$j = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -7139,7 +7270,7 @@ const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
       phoneNumberLength = 10,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   const currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -7591,7 +7722,7 @@ function RadioButton({
   });
 }
 
-const _excluded$j = ["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));
@@ -7606,7 +7737,7 @@ function RadioButtonGroup(_ref2) {
       onBlur,
       onChange
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded$j);
+    props = _objectWithoutProperties(_ref2, _excluded$i);
   const [currentValue, setCurrentValue] = useState(value);
   const handleChange = newValue => {
     if (disabled) return;
@@ -7635,14 +7766,14 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-const _excluded$i = ["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$i);
+    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(() => ({
@@ -7798,7 +7929,7 @@ function ToggleAnimated({
   });
 }
 
-const _excluded$h = ["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';
 };
@@ -7814,7 +7945,7 @@ function Toggle(_ref) {
       value = false,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   const theme = useKittTheme();
   return /*#__PURE__*/jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center"
@@ -7852,7 +7983,7 @@ function Toggle(_ref) {
   }));
 }
 
-const _excluded$g = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+const _excluded$f = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   let {
       children,
@@ -7860,7 +7991,7 @@ function FullscreenModalBody(_ref) {
       style,
       shouldHandleTopNotch
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   const {
     bottom,
     top
@@ -7888,14 +8019,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-const _excluded$f = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+const _excluded$e = ["shouldHandleBottomNotch", "hasSeparator", "children"];
 function FullscreenModalFooter(_ref) {
   let {
       shouldHandleBottomNotch = true,
       hasSeparator = true,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   const {
     bottom
   } = useSafeAreaInsets();
@@ -8056,7 +8187,7 @@ function FullscreenModalAnimation({
   });
 }
 
-const _excluded$e = ["children", "visible", "onClose", "onExited"];
+const _excluded$d = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   let {
       children,
@@ -8064,7 +8195,7 @@ function FullscreenModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -8109,7 +8240,7 @@ function FullscreenModalContainer({
   });
 }
 
-const _excluded$d = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+const _excluded$c = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   let {
       hasSeparator = true,
@@ -8120,7 +8251,7 @@ function FullscreenModalHeader(_ref) {
       left,
       shouldHandleTopNotch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   const {
     top
   } = useSafeAreaInsets();
@@ -8491,7 +8622,7 @@ const getButtonTypeAndVariant = iconColor => {
   }
 };
 
-const _excluded$c = ["color", "ariaLabel"];
+const _excluded$b = ["color", "ariaLabel"];
 /**
  * @deprecated IconButton should only be used as a navigation button
  * Other use cases should use a <Button> component with an icon
@@ -8501,7 +8632,7 @@ function IconButton(_ref) {
       color = 'black',
       ariaLabel
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   const {
     type: legacyColorToType,
     variant: legacyColorToVariant
@@ -8731,7 +8862,7 @@ const getBackgroundColor = ({
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint.default;
 };
 
-const _excluded$b = ["onPress", "testID"];
+const _excluded$a = ["onPress", "testID"];
 function StaticMapMarker$1({
   variant,
   isHovered,
@@ -8794,7 +8925,7 @@ function MapMarker(_ref) {
       onPress,
       testID
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
@@ -8941,6 +9072,7 @@ const createKittSpaces = theme => {
 const overridenNativeBaseSizeandSpaceScale = Object.fromEntries([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 0.5, 1.5, 2.5, 3.5].map(value => [value, value]));
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -- let typescript infer types
 function createKittNativeBaseCustomTheme(theme, appTheme) {
+  var _theme$tabBar$solid$d, _theme$tabBar$solid$d2, _theme$tabBar$solid$d3, _theme$tabBar$solid$d4, _theme$tabBar$solid$d5, _theme$tabBar$solid$d6, _theme$tabBar$solid$d7, _theme$tabBar$solid$d8, _theme$tabBar$solid$r, _theme$tabBar$solid$r2, _theme$tabBar$solid$r3, _theme$tabBar$solid$r4, _theme$tabBar$solid$r5, _theme$tabBar$solid$r6, _theme$tabBar$solid$r7, _theme$tabBar$solid$r8;
   const spaces = createKittSpaces(theme);
   const appBreakpoints = (appTheme === null || appTheme === void 0 ? void 0 : appTheme.breakpoints) || {};
   const extendedTheme = extendTheme({
@@ -9643,6 +9775,148 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               backgroundColor: theme.picker.web.optionsContainer.backgroundColor
             }
           }
+        },
+        tabBar: {
+          underline: {
+            default: {
+              active: {
+                color: {
+                  default: theme.tabBar.underline.default.active.color.default,
+                  focused: theme.tabBar.underline.default.active.color.focused,
+                  hovered: theme.tabBar.underline.default.active.color.hovered,
+                  pressed: theme.tabBar.underline.default.active.color.pressed
+                },
+                indicator: {
+                  backgroundColor: theme.tabBar.underline.default.active.indicator.backgroundColor
+                }
+              },
+              inactive: {
+                color: {
+                  default: theme.tabBar.underline.default.inactive.color.default,
+                  focused: theme.tabBar.underline.default.inactive.color.focused,
+                  hovered: theme.tabBar.underline.default.inactive.color.hovered,
+                  pressed: theme.tabBar.underline.default.inactive.color.pressed
+                }
+              },
+              disabled: {
+                color: {
+                  default: theme.tabBar.underline.default.disabled.color.default,
+                  focused: theme.tabBar.underline.default.disabled.color.focused,
+                  hovered: theme.tabBar.underline.default.disabled.color.hovered,
+                  pressed: theme.tabBar.underline.default.disabled.color.pressed
+                }
+              },
+              borderBottomColor: theme.tabBar.underline.default.borderBottomColor
+            },
+            revert: {
+              active: {
+                color: {
+                  default: theme.tabBar.underline.revert.active.color.default,
+                  focused: theme.tabBar.underline.revert.active.color.focused,
+                  hovered: theme.tabBar.underline.revert.active.color.hovered,
+                  pressed: theme.tabBar.underline.revert.active.color.pressed
+                },
+                indicator: {
+                  backgroundColor: theme.tabBar.underline.revert.active.indicator.backgroundColor
+                }
+              },
+              inactive: {
+                color: {
+                  default: theme.tabBar.underline.revert.inactive.color.default,
+                  focused: theme.tabBar.underline.revert.inactive.color.focused,
+                  hovered: theme.tabBar.underline.revert.inactive.color.hovered,
+                  pressed: theme.tabBar.underline.revert.inactive.color.pressed
+                }
+              },
+              disabled: {
+                color: {
+                  default: theme.tabBar.underline.revert.disabled.color.default,
+                  focused: theme.tabBar.underline.revert.disabled.color.focused,
+                  hovered: theme.tabBar.underline.revert.disabled.color.hovered,
+                  pressed: theme.tabBar.underline.revert.disabled.color.pressed
+                }
+              },
+              borderBottomColor: theme.tabBar.underline.revert.borderBottomColor
+            }
+          },
+          solid: {
+            default: {
+              active: {
+                color: {
+                  default: theme.tabBar.solid.default.active.color.default,
+                  focused: theme.tabBar.solid.default.active.color.focused,
+                  hovered: theme.tabBar.solid.default.active.color.hovered,
+                  pressed: theme.tabBar.solid.default.active.color.pressed
+                },
+                backgroundColor: {
+                  default: (_theme$tabBar$solid$d = theme.tabBar.solid.default.active.backgroundColor) === null || _theme$tabBar$solid$d === void 0 ? void 0 : _theme$tabBar$solid$d.default,
+                  focused: (_theme$tabBar$solid$d2 = theme.tabBar.solid.default.active.backgroundColor) === null || _theme$tabBar$solid$d2 === void 0 ? void 0 : _theme$tabBar$solid$d2.focused,
+                  hovered: (_theme$tabBar$solid$d3 = theme.tabBar.solid.default.active.backgroundColor) === null || _theme$tabBar$solid$d3 === void 0 ? void 0 : _theme$tabBar$solid$d3.hovered,
+                  pressed: (_theme$tabBar$solid$d4 = theme.tabBar.solid.default.active.backgroundColor) === null || _theme$tabBar$solid$d4 === void 0 ? void 0 : _theme$tabBar$solid$d4.pressed
+                }
+              },
+              inactive: {
+                color: {
+                  default: theme.tabBar.solid.default.inactive.color.default,
+                  focused: theme.tabBar.solid.default.inactive.color.focused,
+                  hovered: theme.tabBar.solid.default.inactive.color.hovered,
+                  pressed: theme.tabBar.solid.default.inactive.color.pressed
+                },
+                backgroundColor: {
+                  default: (_theme$tabBar$solid$d5 = theme.tabBar.solid.default.inactive.backgroundColor) === null || _theme$tabBar$solid$d5 === void 0 ? void 0 : _theme$tabBar$solid$d5.default,
+                  focused: (_theme$tabBar$solid$d6 = theme.tabBar.solid.default.inactive.backgroundColor) === null || _theme$tabBar$solid$d6 === void 0 ? void 0 : _theme$tabBar$solid$d6.focused,
+                  hovered: (_theme$tabBar$solid$d7 = theme.tabBar.solid.default.inactive.backgroundColor) === null || _theme$tabBar$solid$d7 === void 0 ? void 0 : _theme$tabBar$solid$d7.hovered,
+                  pressed: (_theme$tabBar$solid$d8 = theme.tabBar.solid.default.inactive.backgroundColor) === null || _theme$tabBar$solid$d8 === void 0 ? void 0 : _theme$tabBar$solid$d8.pressed
+                }
+              },
+              disabled: {
+                color: {
+                  default: theme.tabBar.solid.default.disabled.color.default,
+                  focused: theme.tabBar.solid.default.disabled.color.focused,
+                  hovered: theme.tabBar.solid.default.disabled.color.hovered,
+                  pressed: theme.tabBar.solid.default.disabled.color.pressed
+                }
+              }
+            },
+            revert: {
+              active: {
+                color: {
+                  default: theme.tabBar.solid.revert.active.color.default,
+                  focused: theme.tabBar.solid.revert.active.color.focused,
+                  hovered: theme.tabBar.solid.revert.active.color.hovered,
+                  pressed: theme.tabBar.solid.revert.active.color.pressed
+                },
+                backgroundColor: {
+                  default: (_theme$tabBar$solid$r = theme.tabBar.solid.revert.active.backgroundColor) === null || _theme$tabBar$solid$r === void 0 ? void 0 : _theme$tabBar$solid$r.default,
+                  focused: (_theme$tabBar$solid$r2 = theme.tabBar.solid.revert.active.backgroundColor) === null || _theme$tabBar$solid$r2 === void 0 ? void 0 : _theme$tabBar$solid$r2.focused,
+                  hovered: (_theme$tabBar$solid$r3 = theme.tabBar.solid.revert.active.backgroundColor) === null || _theme$tabBar$solid$r3 === void 0 ? void 0 : _theme$tabBar$solid$r3.hovered,
+                  pressed: (_theme$tabBar$solid$r4 = theme.tabBar.solid.revert.active.backgroundColor) === null || _theme$tabBar$solid$r4 === void 0 ? void 0 : _theme$tabBar$solid$r4.pressed
+                }
+              },
+              inactive: {
+                color: {
+                  default: theme.tabBar.solid.revert.inactive.color.default,
+                  focused: theme.tabBar.solid.revert.inactive.color.focused,
+                  hovered: theme.tabBar.solid.revert.inactive.color.hovered,
+                  pressed: theme.tabBar.solid.revert.inactive.color.pressed
+                },
+                backgroundColor: {
+                  default: (_theme$tabBar$solid$r5 = theme.tabBar.solid.revert.inactive.backgroundColor) === null || _theme$tabBar$solid$r5 === void 0 ? void 0 : _theme$tabBar$solid$r5.default,
+                  focused: (_theme$tabBar$solid$r6 = theme.tabBar.solid.revert.inactive.backgroundColor) === null || _theme$tabBar$solid$r6 === void 0 ? void 0 : _theme$tabBar$solid$r6.focused,
+                  hovered: (_theme$tabBar$solid$r7 = theme.tabBar.solid.revert.inactive.backgroundColor) === null || _theme$tabBar$solid$r7 === void 0 ? void 0 : _theme$tabBar$solid$r7.hovered,
+                  pressed: (_theme$tabBar$solid$r8 = theme.tabBar.solid.revert.inactive.backgroundColor) === null || _theme$tabBar$solid$r8 === void 0 ? void 0 : _theme$tabBar$solid$r8.pressed
+                }
+              },
+              disabled: {
+                color: {
+                  default: theme.tabBar.solid.revert.disabled.color.default,
+                  focused: theme.tabBar.solid.revert.disabled.color.focused,
+                  hovered: theme.tabBar.solid.revert.disabled.color.hovered,
+                  pressed: theme.tabBar.solid.revert.disabled.color.pressed
+                }
+              }
+            }
+          }
         }
       }),
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.colors
@@ -9718,6 +9992,44 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         highlight: {
           borderRadius: theme.highlight.borderRadius
         },
+        tabBar: {
+          underline: {
+            default: {
+              active: {
+                borderRadius: theme.tabBar.underline.default.active.borderRadius
+              },
+              inactive: {
+                borderRadius: theme.tabBar.underline.default.inactive.borderRadius
+              }
+            },
+            revert: {
+              active: {
+                borderRadius: theme.tabBar.underline.revert.active.borderRadius
+              },
+              inactive: {
+                borderRadius: theme.tabBar.underline.revert.inactive.borderRadius
+              }
+            }
+          },
+          solid: {
+            default: {
+              active: {
+                borderRadius: theme.tabBar.solid.default.active.borderRadius
+              },
+              inactive: {
+                borderRadius: theme.tabBar.solid.default.inactive.borderRadius
+              }
+            },
+            revert: {
+              active: {
+                borderRadius: theme.tabBar.solid.revert.active.borderRadius
+              },
+              inactive: {
+                borderRadius: theme.tabBar.solid.revert.inactive.borderRadius
+              }
+            }
+          }
+        },
         tag: {
           borderRadius: theme.tag.borderRadius
         },
@@ -11352,7 +11664,7 @@ NavigationBottomSheet.Header = NavigationBottomSheetHeader;
 NavigationBottomSheet.Body = NavigationBottomSheetBody;
 NavigationBottomSheet.Footer = NavigationBottomSheetFooter;
 
-const _excluded$a = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+const _excluded$9 = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
 function NavigationModalBehaviour(_ref) {
   let {
       children,
@@ -11363,7 +11675,7 @@ function NavigationModalBehaviour(_ref) {
       onExit,
       onClose
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   const AnimationComponent = useBreakpointValue({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
@@ -11949,7 +12261,7 @@ function SkeletonContent({
   });
 }
 
-const _excluded$9 = ["isLoading", "style"],
+const _excluded$8 = ["isLoading", "style"],
   _excluded2$1 = ["size"],
   _excluded3$1 = ["size"],
   _excluded4$1 = ["size"];
@@ -11958,7 +12270,7 @@ function Skeleton(_ref) {
       isLoading = false,
       style
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   const [width, setWidth] = useState(0);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
@@ -12140,7 +12452,7 @@ function getShouldDisplay2x() {
   return currentDevicePixelRatio > 1;
 }
 
-const _excluded$8 = ["width", "height", "alt", "apiToken", "mapId", "marker", "center", "onLoaded", "onError"];
+const _excluded$7 = ["width", "height", "alt", "apiToken", "mapId", "marker", "center", "onLoaded", "onError"];
 const mapBoxMaxPictureWidth = 1280;
 
 // Mapbox requestable width for image is between 1 - 1280px
@@ -12159,7 +12471,7 @@ function StaticMap(_ref) {
       onLoaded,
       onError
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   const [currentWidth, setCurrentWidth] = useState(getPictureWidth(width));
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
@@ -12237,13 +12549,13 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
-const _excluded$7 = ["direction", "wrap"];
+const _excluded$6 = ["direction", "wrap"];
 function Flex(_ref) {
   let {
       direction,
       wrap = 'wrap'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     flexDirection: direction,
     flexWrap: wrap
@@ -12385,7 +12697,7 @@ function Story({
   });
 }
 
-const _excluded$6 = ["title", "children", "internalIsDemoSection"],
+const _excluded$5 = ["title", "children", "internalIsDemoSection"],
   _excluded2 = ["title", "children"],
   _excluded3 = ["title", "children"],
   _excluded4 = ["children"];
@@ -12395,7 +12707,7 @@ function StorySection(_ref) {
       children,
       internalIsDemoSection
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
   return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
     marginBottom: "kitt.8"
@@ -12551,125 +12863,128 @@ const StoryGrid = {
   Col: StoryGridCol
 };
 
-function useTabBarItemColor(color, isActive) {
-  const {
-    kitt: kittTheme
-  } = useKittTheme();
-  switch (color) {
-    case 'black':
-      {
-        return isActive ? kittTheme.colors.primary : kittTheme.colors.blackLight;
-      }
-    case 'white':
-      {
-        return isActive ? kittTheme.palettes.deepPurple.white : kittTheme.palettes.deepPurple['white-alpha.80'];
-      }
-    default:
-      {
-        return isActive ? kittTheme.colors.primary : kittTheme.colors.blackLight;
-      }
-  }
-}
-function useTabBarIndicatorColor(color, isActive) {
-  const {
-    kitt: kittTheme
-  } = useKittTheme();
-  switch (color) {
-    case 'black':
-      {
-        return isActive ? kittTheme.colors.primary : kittTheme.palettes.deepPurple.transparent;
-      }
-    case 'white':
-      {
-        return isActive ? kittTheme.palettes.deepPurple.white : kittTheme.palettes.deepPurple.transparent;
-      }
-    default:
-      {
-        return isActive ? kittTheme.colors.primary : kittTheme.palettes.deepPurple.transparent;
-      }
-  }
-}
+const getVariantFromColor = color => {
+  if (color === 'white') return 'revert';
+  return 'default';
+};
+const getTabBarItemActiveState = (isActive, disabled) => {
+  if (disabled) return 'disabled';
+  if (isActive) return 'active';
+  return 'inactive';
+};
+const getTabBarItemState = (isHovered, isPressed, isFocused) => {
+  if (isHovered) return 'hovered';
+  if (isPressed) return 'pressed';
+  if (isFocused) return 'focused';
+  return 'default';
+};
 function TabBarItem({
   name,
   icon,
-  color = 'black',
+  variant = 'default',
+  type = 'underline',
+  color,
   testID,
+  disabled,
   isActive = false,
+  isFocusedInternal = false,
+  isHoveredInternal = false,
+  isPressedInternal = false,
   onPress
 }) {
-  const typographyColor = useTabBarItemColor(color, isActive);
-  const indicatorColor = useTabBarIndicatorColor(color, isActive);
+  // Keep backward compatibility with color property
+  const definedVariant = color ? getVariantFromColor(color) : variant;
+  const activeState = getTabBarItemActiveState(isActive, disabled);
+  const baseTheme = `kitt.tabBar.${type}.${definedVariant}.${activeState}`;
   return /*#__PURE__*/jsx(Pressable, {
+    disabled: disabled,
     testID: testID,
     onPress: onPress,
-    children: /*#__PURE__*/jsxs(HStack, {
-      height: 56,
-      alignItems: "center",
-      position: "relative",
-      children: [icon ? /*#__PURE__*/jsx(View, {
-        marginRight: "kitt.1",
-        children: /*#__PURE__*/jsx(TypographyIcon, {
-          color: typographyColor,
-          icon: icon
-        })
-      }) : null, /*#__PURE__*/jsx(Typography.Text, {
-        numberOfLines: 1,
-        color: typographyColor,
-        variant: isActive ? 'bold' : undefined,
-        children: name
-      }), /*#__PURE__*/jsx(View, {
-        borderRadius: 100,
-        backgroundColor: indicatorColor,
-        position: "absolute",
-        bottom: -1 // in order to be over tab bar's border bottom
-        ,
-        width: "100%",
-        height: 4
-      })]
-    })
+    children: ({
+      isHovered,
+      isPressed,
+      isFocused
+    }) => {
+      const state = getTabBarItemState(isHovered || isHoveredInternal, isPressed || isPressedInternal, isFocused || isFocusedInternal);
+      return /*#__PURE__*/jsxs(HStack, {
+        alignItems: "center",
+        position: "relative",
+        paddingY: "kitt.2",
+        paddingRight: "kitt.2",
+        paddingLeft: icon ? undefined : 'kitt.2',
+        backgroundColor: `${baseTheme}.backgroundColor.${state}`,
+        borderRadius: `${baseTheme}.borderRadius`,
+        children: [icon ? /*#__PURE__*/jsx(View, {
+          marginRight: "kitt.2",
+          children: /*#__PURE__*/jsx(TypographyIcon, {
+            color: `${baseTheme}.color.${state}`,
+            icon: icon
+          })
+        }) : null, /*#__PURE__*/jsx(Typography.Text, {
+          base: "label-large",
+          numberOfLines: 1,
+          color: `${baseTheme}.color.${state}`,
+          children: name
+        }), type !== 'solid' ? /*#__PURE__*/jsx(View, {
+          backgroundColor: `${baseTheme}.indicator.backgroundColor`,
+          position: "absolute",
+          bottom: -1 // in order to be over tab bar's border bottom
+          ,
+          left: 0,
+          right: 0,
+          height: 2
+        }) : null]
+      });
+    }
   });
 }
 
-const _excluded$5 = ["tabs", "color", "align", "activeTabIndex", "renderTabItem", "onChangeTab"];
-function TabBar(_ref) {
-  let {
-      tabs,
-      color = 'black',
-      align = 'left',
-      activeTabIndex = 0,
-      renderTabItem,
-      onChangeTab
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+function TabBar({
+  tabs,
+  variant = 'default',
+  type = 'underline',
+  align = 'left',
+  color,
+  activeTabIndex = 0,
+  renderTabItem,
+  onChangeTab
+}) {
   const sx = useSx();
-  const {
-    kitt: kittTheme
-  } = useKittTheme();
   const tabItems = tabs.map((tab, index) => renderTabItem({
     tab,
     index,
     isActive: activeTabIndex === index
   }));
-  const scrollViewStyles = sx({
+  let styles = {
     justifyContent: align,
     paddingRight: align === 'center' ? 'kitt.2' : 'kitt.12',
-    minWidth: '100%',
-    borderBottomWidth: 1,
-    borderBottomColor: kittTheme.palettes.deepPurple['beige.2']
-  });
+    minWidth: '100%'
+  };
+
+  // Keep backward compatibility with color property
+  const definedVariant = color ? getVariantFromColor(color) : variant;
+  if (type !== 'solid') {
+    styles = _objectSpread(_objectSpread({}, styles), {}, {
+      borderBottomWidth: 1,
+      borderBottomColor: `kitt.tabBar.${type}.${definedVariant}.borderBottomColor`
+    });
+  }
+  const scrollViewStyles = sx(styles);
+  const space = type === 'solid' ? 'kitt.2' : 'kitt.4';
   return /*#__PURE__*/jsx(ScrollView, {
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     contentContainerStyle: scrollViewStyles,
-    children: /*#__PURE__*/jsx(HStack, _objectSpread(_objectSpread({
-      space: align === 'center' ? 'kitt.16' : 'kitt.4'
-    }, props), {}, {
+    children: /*#__PURE__*/jsx(HStack, {
+      space: align === 'center' ? 'kitt.16' : space,
       children: Children.map(tabItems, (child, index) => {
         const tab = tabs[index];
         if (!tab) throw new Error(`TabBar: tab is undefined at index ${index}`);
         return /*#__PURE__*/jsx(View, {
           children: /*#__PURE__*/cloneElement(child, {
             color,
+            variant: definedVariant,
+            type,
             onPress: event => {
               var _child$props$onPress, _child$props;
               onChangeTab({
@@ -12681,7 +12996,7 @@ function TabBar(_ref) {
           })
         }, tab.key);
       })
-    }))
+    })
   });
 }
 TabBar.Item = TabBarItem;