@ornikar/kitt-universal 27.5.1-canary.eac3fc19869888632e3a59913cf9f700a72b0dad.0 → 27.6.0

package/dist/index.es.web.js

@@ -1904,43 +1904,8 @@ var highlight = {
   }
 };
 
-var getIconSizeFromFontSize = function (fontSize) {
-  if (fontSize <= 14) return 16;
-  if (fontSize <= 16) return 20;
-  return 24;
-};
-var createTypographyIconSizeConfig = function (baseAndSmallFontSize, mediumAndWideFontSize) {
-  var baseAndSmallIconSize = getIconSizeFromFontSize(baseAndSmallFontSize);
-  var mediumAndWideIconSize = getIconSizeFromFontSize(mediumAndWideFontSize);
-  return {
-    baseAndSmall: {
-      iconSize: baseAndSmallIconSize
-    },
-    mediumAndWide: {
-      iconSize: mediumAndWideIconSize
-    }
-  };
-};
 var 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
 };
 
 var iconButton = {
@@ -2367,6 +2332,183 @@ var skeleton$1 = {
   }
 };
 
+var 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
+        }
+      }
+    }
+  }
+};
+
 var tag = {
   borderRadius: 16,
   icon: {
@@ -2508,6 +2650,7 @@ var theme = {
   picker: picker,
   shadows: shadows,
   skeleton: skeleton$1,
+  tabBar: tabBar,
   tag: tag,
   tooltip: tooltip,
   typography: typography,
@@ -2608,7 +2751,7 @@ function ActionCardDisabled(_ref) {
   });
 }
 
-var _excluded$S = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+var _excluded$R = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -2621,7 +2764,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$S);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -2943,17 +3086,23 @@ var getTypographyFamilyWithAncestorValue = function (type, typographyFamilyInCon
   if (typographyFamilyInContext != null) return typographyFamilyInContext;
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
+var getTypographyTypeWithAncestorValue = function (type, typographyTypeInContext) {
+  // check if all values are not undefined
+  var isAllValuesUndefined = Object.values(type).every(function (value) {
+    return value === undefined;
+  });
 
-var _excluded$R = ["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;
+};
+
+var _excluded$Q = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
-function useTypographyAncestorType() {
-  return useContext(TypographyTypeContext);
-}
 var TypographyDefaultColorContext = /*#__PURE__*/createContext(undefined);
 function useTypographyDefaultColor() {
   return useContext(TypographyDefaultColorContext);
@@ -3054,7 +3203,7 @@ function getUniversalFontWeight(type, variant, typographyFamily) {
   };
 }
 function Typography(_ref2) {
-  var _type$base;
+  var _typographyType$base;
   var accessibilityRole = _ref2.accessibilityRole,
     legacyBase = _ref2.base,
     legacySmall = _ref2.small,
@@ -3071,12 +3220,14 @@ function Typography(_ref2) {
     } : _ref2$type,
     variant = _ref2.variant,
     color = _ref2.color,
-    otherProps = _objectWithoutProperties(_ref2, _excluded$R);
+    otherProps = _objectWithoutProperties(_ref2, _excluded$Q);
   var sx = useSx();
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
+  var typographyTypeInContext = useContext(TypographyTypeContext);
   var defaultColor = useTypographyDefaultColor();
   var hasTypographyAncestor = typographyFamilyInContext !== null;
-  var baseOrDefaultToBody = hasTypographyAncestor ? type.base : (_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body-m';
+  var typographyType = getTypographyTypeWithAncestorValue(type, typographyTypeInContext);
+  var baseOrDefaultToBody = (_typographyType$base = typographyType.base) !== null && _typographyType$base !== void 0 ? _typographyType$base : 'body-m';
   var typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
   var fontSizeForNativeBase = createNativeBaseFontSize(_objectSpread(_objectSpread({}, type), {}, {
     base: baseOrDefaultToBody
@@ -3113,7 +3264,7 @@ function Typography(_ref2) {
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
     value: typographyFamily,
     children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
-      value: type,
+      value: typographyType,
       children: text
     })
   }) : text;
@@ -3211,30 +3362,12 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$Q = ["color", "size"],
+var _excluded$P = ["color", "size"],
   _excluded2$6 = ["color"];
-function getIconSizeConfigKeyFromTypeName(breakpointName) {
-  return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
-}
-function createNativeBaseIconSize(type) {
-  var typeWithMediumForced = _objectSpread(_objectSpread({}, type), {}, {
-    medium: type.medium || type.small || type.base
-  });
-  var iconSizeForNativeBase = {};
-  [KittBreakpointNameEnum.BASE, KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE].forEach(function (typeName) {
-    var value = typeWithMediumForced[typeName];
-    if (value) {
-      iconSizeForNativeBase[typeName] = "kitt.icon.typographySize.".concat(value, ".").concat(getIconSizeConfigKeyFromTypeName(typeName), ".iconSize");
-    }
-  });
-  return iconSizeForNativeBase;
-}
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
-  var ancestorType = useTypographyAncestorType();
-  var iconSize = size || (ancestorType ? createNativeBaseIconSize(ancestorType) : undefined);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   var colorValue = getTypographyColorValue(color);
   var sx = useSx();
   var _sx = sx({
@@ -3242,7 +3375,7 @@ function TypographyIconSpecifiedColor(_ref) {
     }),
     colorStyleValue = _sx.color;
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
-    size: iconSize,
+    size: size,
     color: colorStyleValue
   }));
 }
@@ -3274,7 +3407,7 @@ var getButtonTextColorByType = function (type, variant, isHovered, isPressed, is
   return "".concat(baseKey, ".default");
 };
 
-var _excluded$P = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
+var _excluded$O = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
 function ButtonContentChildren(_ref) {
   var type = _ref.type,
     icon = _ref.icon,
@@ -3374,7 +3507,7 @@ function ButtonContent(_ref2) {
     _ref2.isFocused;
     var innerSpacing = _ref2.innerSpacing,
     size = _ref2.size,
-    props = _objectWithoutProperties(_ref2, _excluded$P);
+    props = _objectWithoutProperties(_ref2, _excluded$O);
   var color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3573,7 +3706,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$O = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$N = ["as", "onPress", "disabled", "icon", "stretch"];
 var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -3584,7 +3717,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -3662,7 +3795,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$N = ["children", "layout", "reversed"];
+var _excluded$M = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -3694,7 +3827,7 @@ function Actions(_ref) {
     reversed = _ref$reversed === void 0 ? {
       base: false
     } : _ref$reversed,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$M);
   var shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -3747,7 +3880,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$M = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+var _excluded$L = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -3810,7 +3943,7 @@ function Avatar(_ref2) {
     height = _ref2.height,
     dark = _ref2.dark,
     disabled = _ref2.disabled,
-    props = _objectWithoutProperties(_ref2, _excluded$M);
+    props = _objectWithoutProperties(_ref2, _excluded$L);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -3993,7 +4126,7 @@ function CardModalRotationContainer(props) {
   }, props));
 }
 
-var _excluded$L = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$K = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
 var contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
 var contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
@@ -4032,7 +4165,7 @@ function CardModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   var theme = useTheme();
   var animation = theme.kitt.cardModal.animation;
   var sharedProps = {
@@ -4065,13 +4198,13 @@ function CardModalAnimation(_ref) {
   }));
 }
 
-var _excluded$K = ["children", "visible", "onClose", "onExited"];
+var _excluded$J = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4096,7 +4229,7 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$J = ["children", "paddingX", "paddingY"];
+var _excluded$I = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -4109,7 +4242,7 @@ function CardModalBody(_ref) {
       base: 'kitt.4',
       medium: 'kitt.6'
     } : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4121,7 +4254,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$I = ["children", "padding", "hasSeparator"];
+var _excluded$H = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -4131,7 +4264,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4145,7 +4278,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$H = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$G = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -4158,7 +4291,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -4196,7 +4329,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$G = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+var _excluded$F = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -4207,7 +4340,7 @@ function CardModal(_ref) {
     header = _ref.header,
     body = _ref.body,
     footer = _ref.footer,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4422,11 +4555,11 @@ function ChoiceItemContainer(_ref) {
   }));
 }
 
-var _excluded$F = ["direction", "contentContainerStyle"];
+var _excluded$E = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
     contentContainerStyle = _ref.contentContainerStyle,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4501,7 +4634,7 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-var _excluded$E = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$D = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var contentAnimationEnter = "kitt-u_contentAnimationEnter_c1i0gle8";
 var contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_c1jmfkjw";
 var contentAnimatioExit = "kitt-u_contentAnimatioExit_cwjstxl";
@@ -4540,7 +4673,7 @@ function DialogModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   var theme = useTheme();
   var animation = theme.kitt.dialogModal.animation;
   var sharedProps = {
@@ -4575,13 +4708,13 @@ function DialogModalAnimation(_ref) {
   }));
 }
 
-var _excluded$D = ["children", "visible", "onClose", "onExited"];
+var _excluded$C = ["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$C);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4612,7 +4745,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$C = ["stretch"];
+var _excluded$B = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -4652,7 +4785,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$B);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -4689,7 +4822,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$B = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$A = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$5 = ["phoneNumber", "children"],
   _excluded3$4 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -4699,7 +4832,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -4794,14 +4927,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$A = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$z = ["as", "href", "openLinkBehavior", "onPress"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
     href = _ref.href,
     _ref$openLinkBehavior = _ref.openLinkBehavior,
     openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     accessibilityRole: "link",
     href: href,
@@ -4877,7 +5010,7 @@ function InputTextContainer(props) {
   }, props));
 }
 
-var _excluded$z = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
+var _excluded$y = ["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;
@@ -4898,7 +5031,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$y);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
@@ -5022,12 +5155,12 @@ function AutocompleteItemsListContainer(_ref) {
   });
 }
 
-var _excluded$y = ["children", "testID"];
+var _excluded$x = ["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$x);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -5040,7 +5173,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$w = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex", "maxItemContainerHeight"],
   _excluded2$4 = ["onClick", "onPress"],
   _excluded3$3 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
   _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
@@ -5074,7 +5207,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$w);
   var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
@@ -5281,7 +5414,7 @@ function getBorderColor$1(_ref) {
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-var _excluded$w = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
+var _excluded$v = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     _ref$hitSlop = _ref.hitSlop,
@@ -5291,7 +5424,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$v);
   var theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -5607,7 +5740,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$u = ["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,
@@ -5625,7 +5758,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$v);
+    _objectWithoutProperties(_ref, _excluded$u);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -5765,10 +5898,10 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$u = ["value"];
+var _excluded$t = ["value"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({
@@ -6352,7 +6485,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-var _excluded$t = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+var _excluded$s = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   var initialValue = _ref.initialValue,
     _ref$itemToString = _ref.itemToString,
@@ -6360,7 +6493,7 @@ function InputAddress(_ref) {
     errorElement = _ref.errorElement,
     emptyResultsElement = _ref.emptyResultsElement,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   var _useGoogleMapsAutocom = useGoogleMapsAutocomplete(),
     state = _useGoogleMapsAutocom.state,
     _onInputChange = _useGoogleMapsAutocom.onInputChange,
@@ -6457,10 +6590,10 @@ var InputIban = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
 });
 
-var _excluded$s = ["onChange"];
+var _excluded$r = ["onChange"];
 var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -6477,11 +6610,11 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$r = ["isPasswordDefaultVisible", "right"];
+var _excluded$q = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -6509,7 +6642,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$q = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
+var _excluded$p = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -6523,7 +6656,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$q);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -6959,7 +7092,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$p = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$o = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -6972,7 +7105,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$p);
+    props = _objectWithoutProperties(_ref2, _excluded$o);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -7004,12 +7137,12 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-var _excluded$o = ["helper", "limit"];
+var _excluded$n = ["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$o);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   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 () {
@@ -7168,7 +7301,7 @@ function ToggleAnimated(_ref) {
   });
 }
 
-var _excluded$n = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
+var _excluded$m = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
 var getLabelTypographyType = function (size) {
   return size === 'medium' ? 'body-m' : 'body-l';
 };
@@ -7190,7 +7323,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$n);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var theme = useKittTheme();
   return /*#__PURE__*/jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center"
@@ -7229,13 +7362,13 @@ function Toggle(_ref) {
   }));
 }
 
-var _excluded$m = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$l = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -7255,14 +7388,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$l = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$k = ["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$l);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom;
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
@@ -7279,7 +7412,7 @@ function FullscreenModalFooter(_ref) {
   }));
 }
 
-var _excluded$k = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$j = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
 var slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
 var slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
@@ -7318,7 +7451,7 @@ function FullscreenModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var theme = useTheme();
   var animation = theme.kitt.fullscreenModal.animation;
   var sharedProps = {
@@ -7345,13 +7478,13 @@ function FullscreenModalAnimation(_ref) {
   }));
 }
 
-var _excluded$j = ["children", "visible", "onClose", "onExited"];
+var _excluded$i = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -7398,7 +7531,7 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$i = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+var _excluded$h = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   var _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
@@ -7409,7 +7542,7 @@ function FullscreenModalHeader(_ref) {
     left = _ref.left,
     _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var hasRight = Boolean(right);
@@ -7755,7 +7888,7 @@ var getButtonTypeAndVariant = function (iconColor) {
   }
 };
 
-var _excluded$h = ["color", "ariaLabel"];
+var _excluded$g = ["color", "ariaLabel"];
 /**
  * @deprecated IconButton should only be used as a navigation button
  * Other use cases should use a <Button> component with an icon
@@ -7764,7 +7897,7 @@ function IconButton(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'black' : _ref$color;
     _ref.ariaLabel;
-    var props = _objectWithoutProperties(_ref, _excluded$h);
+    var props = _objectWithoutProperties(_ref, _excluded$g);
   var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
     legacyColorToType = _getButtonTypeAndVari.type,
     legacyColorToVariant = _getButtonTypeAndVari.variant;
@@ -7860,10 +7993,10 @@ function useKittMapConfig() {
   return context;
 }
 
-var _excluded$g = ["children"];
+var _excluded$f = ["children"];
 function ListItemContent(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$g);
+    rest = _objectWithoutProperties(_ref, _excluded$f);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -7874,14 +8007,14 @@ function ListItemContent(_ref) {
   }));
 }
 
-var _excluded$f = ["children", "side"],
+var _excluded$e = ["children", "side"],
   _excluded2$3 = ["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$f);
+    rest = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -7902,7 +8035,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-var _excluded$e = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$d = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   var children = _ref.children,
     withPadding = _ref.withPadding,
@@ -7910,7 +8043,7 @@ function ListItem(_ref) {
     left = _ref.left,
     right = _ref.right,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -8083,7 +8216,7 @@ var getBackgroundColor$1 = function (_ref) {
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint["default"];
 };
 
-var _excluded$d = ["onPress", "testID"];
+var _excluded$c = ["onPress", "testID"];
 function StaticMapMarker$1(_ref) {
   var variant = _ref.variant,
     isHovered = _ref.isHovered,
@@ -8142,7 +8275,7 @@ function StaticMapMarker$1(_ref) {
 function MapMarker(_ref2) {
   var onPress = _ref2.onPress,
     testID = _ref2.testID,
-    props = _objectWithoutProperties(_ref2, _excluded$d);
+    props = _objectWithoutProperties(_ref2, _excluded$c);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
@@ -8291,6 +8424,7 @@ var overridenNativeBaseSizeandSpaceScale = Object.fromEntries([1, 2, 3, 4, 5, 6,
 }));
 // 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;
   var spaces = createKittSpaces(theme);
   var appBreakpoints = (appTheme === null || appTheme === void 0 ? void 0 : appTheme.breakpoints) || {};
   var extendedTheme = extendTheme({
@@ -8993,6 +9127,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
@@ -9068,6 +9344,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
         },
@@ -10635,7 +10949,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var _excluded$c = ["scrollEnabled", "ListHeaderComponent", "ListFooterComponent", "data", "numColumns", "ListHeaderComponentStyle", "ListFooterComponentStyle", "contentContainerStyle", "keyExtractor", "renderItem"];
+var _excluded$b = ["scrollEnabled", "ListHeaderComponent", "ListFooterComponent", "data", "numColumns", "ListHeaderComponentStyle", "ListFooterComponentStyle", "contentContainerStyle", "keyExtractor", "renderItem"];
 function NativeOnlyFlatList(_ref) {
   var scrollEnabled = _ref.scrollEnabled,
     ListHeaderComponent = _ref.ListHeaderComponent,
@@ -10650,7 +10964,7 @@ function NativeOnlyFlatList(_ref) {
       return index.toString();
     } : _ref$keyExtractor,
     renderItem = _ref.renderItem,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   return /*#__PURE__*/jsxs(ScrollView$1, _objectSpread(_objectSpread({
     scrollEnabled: scrollEnabled,
     contentContainerStyle: contentContainerStyle
@@ -10680,7 +10994,7 @@ function NativeOnlyFlatList(_ref) {
   }));
 }
 
-var _excluded$b = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+var _excluded$a = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
 function NavigationModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
@@ -10690,7 +11004,7 @@ function NavigationModalBehaviour(_ref) {
     onEnter = _ref.onEnter,
     onExit = _ref.onExit,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var AnimationComponent = useBreakpointValue({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
@@ -10953,7 +11267,7 @@ function webUseSelectReducer(state, actionAndChanges, options) {
   }
 }
 
-var _excluded$a = ["onClick"],
+var _excluded$9 = ["onClick"],
   _excluded2$2 = ["ref"],
   _excluded3$2 = ["onClick", "aria-selected"];
 var enter = "kitt-u_enter_ereraf";
@@ -11020,7 +11334,7 @@ function Picker(_ref) {
     getItemProps = _useSelect.getItemProps;
   var _getToggleButtonProps = getToggleButtonProps(),
     onPressTrigger = _getToggleButtonProps.onClick,
-    restToggleProps = _objectWithoutProperties(_getToggleButtonProps, _excluded$a);
+    restToggleProps = _objectWithoutProperties(_getToggleButtonProps, _excluded$9);
   var _useFloating = useFloating({
       placement: itemsPlacement,
       strategy: 'fixed',
@@ -11100,7 +11414,7 @@ function Picker(_ref) {
             paddingY: "kitt.2",
             children: childrenArray.map(function (child, index) {
               var currentValue = items[index];
-              if (!currentValue) throw new Error("Picker: No value found for item at index ".concat(index));
+              if (currentValue === undefined) throw new Error("Picker: No value found for item at index ".concat(index));
               var _getItemProps = getItemProps({
                   item: currentValue,
                   index: index,
@@ -11207,7 +11521,7 @@ function SkeletonContent(_ref) {
   });
 }
 
-var _excluded$9 = ["isLoading", "style"],
+var _excluded$8 = ["isLoading", "style"],
   _excluded2$1 = ["size"],
   _excluded3$1 = ["size"],
   _excluded4$1 = ["size"];
@@ -11215,7 +11529,7 @@ function Skeleton(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -11398,7 +11712,7 @@ function getShouldDisplay2x() {
   return window.devicePixelRatio ? window.devicePixelRatio > 1 : false;
 }
 
-var _excluded$8 = ["width", "height", "alt", "apiToken", "mapId", "marker", "center", "onLoaded", "onError"];
+var _excluded$7 = ["width", "height", "alt", "apiToken", "mapId", "marker", "center", "onLoaded", "onError"];
 var mapBoxMaxPictureWidth = 1280;
 
 // Mapbox requestable width for image is between 1 - 1280px
@@ -11416,7 +11730,7 @@ function StaticMap(_ref) {
     center = _ref.center,
     onLoaded = _ref.onLoaded,
     onError = _ref.onError,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var _useState = useState(getPictureWidth(width)),
     _useState2 = _slicedToArray(_useState, 2),
     currentWidth = _useState2[0],
@@ -11506,12 +11820,12 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
-var _excluded$7 = ["direction", "wrap"];
+var _excluded$6 = ["direction", "wrap"];
 function Flex(_ref) {
   var direction = _ref.direction,
     _ref$wrap = _ref.wrap,
     wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     flexDirection: direction,
     flexWrap: wrap
@@ -11649,7 +11963,7 @@ function Story(_ref) {
   });
 }
 
-var _excluded$6 = ["title", "children", "internalIsDemoSection"],
+var _excluded$5 = ["title", "children", "internalIsDemoSection"],
   _excluded2 = ["title", "children"],
   _excluded3 = ["title", "children"],
   _excluded4 = ["children"];
@@ -11657,7 +11971,7 @@ function StorySection(_ref) {
   var title = _ref.title,
     children = _ref.children,
     internalIsDemoSection = _ref.internalIsDemoSection,
-    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"
@@ -11794,99 +12108,100 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-function useTabBarItemColor(color, isActive) {
-  var _useKittTheme = useKittTheme(),
-    kittTheme = _useKittTheme.kitt;
-  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) {
-  var _useKittTheme2 = useKittTheme(),
-    kittTheme = _useKittTheme2.kitt;
-  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;
-      }
-  }
-}
+var getVariantFromColor = function (color) {
+  if (color === 'white') return 'revert';
+  return 'default';
+};
+var getTabBarItemActiveState = function (isActive, disabled) {
+  if (disabled) return 'disabled';
+  if (isActive) return 'active';
+  return 'inactive';
+};
+var getTabBarItemState = function (isHovered, isPressed, isFocused) {
+  if (isHovered) return 'hovered';
+  if (isPressed) return 'pressed';
+  if (isFocused) return 'focused';
+  return 'default';
+};
 function TabBarItem(_ref) {
   var name = _ref.name,
     icon = _ref.icon,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'black' : _ref$color,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'underline' : _ref$type,
+    color = _ref.color,
     testID = _ref.testID,
+    disabled = _ref.disabled,
     _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    _ref$isFocusedInterna = _ref.isFocusedInternal,
+    isFocusedInternal = _ref$isFocusedInterna === void 0 ? false : _ref$isFocusedInterna,
+    _ref$isHoveredInterna = _ref.isHoveredInternal,
+    isHoveredInternal = _ref$isHoveredInterna === void 0 ? false : _ref$isHoveredInterna,
+    _ref$isPressedInterna = _ref.isPressedInternal,
+    isPressedInternal = _ref$isPressedInterna === void 0 ? false : _ref$isPressedInterna,
     onPress = _ref.onPress;
-  var typographyColor = useTabBarItemColor(color, isActive);
-  var indicatorColor = useTabBarIndicatorColor(color, isActive);
+  // Keep backward compatibility with color property
+  var definedVariant = color ? getVariantFromColor(color) : variant;
+  var activeState = getTabBarItemActiveState(isActive, disabled);
+  var baseTheme = "kitt.tabBar.".concat(type, ".").concat(definedVariant, ".").concat(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: function children(_ref2) {
+      var isHovered = _ref2.isHovered,
+        isPressed = _ref2.isPressed,
+        isFocused = _ref2.isFocused;
+      var 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: "".concat(baseTheme, ".backgroundColor.").concat(state),
+        borderRadius: "".concat(baseTheme, ".borderRadius"),
+        children: [icon ? /*#__PURE__*/jsx(View, {
+          marginRight: "kitt.2",
+          children: /*#__PURE__*/jsx(TypographyIcon, {
+            color: "".concat(baseTheme, ".color.").concat(state),
+            icon: icon
+          })
+        }) : null, /*#__PURE__*/jsx(Typography.Text, {
+          base: "label-large",
+          numberOfLines: 1,
+          color: "".concat(baseTheme, ".color.").concat(state),
+          children: name
+        }), type !== 'solid' ? /*#__PURE__*/jsx(View, {
+          backgroundColor: "".concat(baseTheme, ".indicator.backgroundColor"),
+          position: "absolute",
+          bottom: -1 // in order to be over tab bar's border bottom
+          ,
+          left: 0,
+          right: 0,
+          height: 2
+        }) : null]
+      });
+    }
   });
 }
 
-var _excluded$5 = ["tabs", "color", "align", "activeTabIndex", "renderTabItem", "onChangeTab"];
 function TabBar(_ref) {
   var tabs = _ref.tabs,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'black' : _ref$color,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'underline' : _ref$type,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'left' : _ref$align,
+    color = _ref.color,
     _ref$activeTabIndex = _ref.activeTabIndex,
     activeTabIndex = _ref$activeTabIndex === void 0 ? 0 : _ref$activeTabIndex,
     renderTabItem = _ref.renderTabItem,
-    onChangeTab = _ref.onChangeTab,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    onChangeTab = _ref.onChangeTab;
   var sx = useSx();
-  var _useKittTheme = useKittTheme(),
-    kittTheme = _useKittTheme.kitt;
   var tabItems = tabs.map(function (tab, index) {
     return renderTabItem({
       tab: tab,
@@ -11894,26 +12209,36 @@ function TabBar(_ref) {
       isActive: activeTabIndex === index
     });
   });
-  var scrollViewStyles = sx({
+  var 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
+  var definedVariant = color ? getVariantFromColor(color) : variant;
+  if (type !== 'solid') {
+    styles = _objectSpread(_objectSpread({}, styles), {}, {
+      borderBottomWidth: 1,
+      borderBottomColor: "kitt.tabBar.".concat(type, ".").concat(definedVariant, ".borderBottomColor")
+    });
+  }
+  var scrollViewStyles = sx(styles);
+  var 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, function (child, index) {
         var tab = tabs[index];
         if (!tab) throw new Error("TabBar: tab is undefined at index ".concat(index));
         return /*#__PURE__*/jsx(View, {
           children: /*#__PURE__*/cloneElement(child, {
             color: color,
+            variant: definedVariant,
+            type: type,
             onPress: function onPress(event) {
               var _child$props$onPress, _child$props;
               onChangeTab({
@@ -11925,7 +12250,7 @@ function TabBar(_ref) {
           })
         }, tab.key);
       })
-    }))
+    })
   });
 }
 TabBar.Item = TabBarItem;