@ornikar/kitt-universal 27.0.1-canary.01819bc93ab006bfbaa4e1335cd8afa2380068a0.0 → 27.0.1-canary.e2bc67122aa41f65986d23f21317b442b05d8963.0

package/dist/index.es.js

@@ -556,15 +556,18 @@ var bottomSheet = {
   }
 };
 
+// Strongly typed theme so every new type/variant/size can't be added
+// without defined color & backgroundColor or icon size
+
 var button = {
-  borderRadius: 30,
+  borderRadius: 4,
   borderWidth: {
-    disabled: 2,
     focus: 3
   },
   minHeight: 40,
   minWidth: 40,
   maxWidth: 335,
+  maxHeight: 48,
   scale: {
     base: {
       "default": 1,
@@ -575,148 +578,160 @@ var button = {
       hover: 1.05
     }
   },
-  contentPadding: {
-    "default": '7px 16px 7px',
-    large: '11px 24px 11px',
-    xLarge: '15px 24px 15px',
-    disabled: '5px 14px 5px'
+  icon: {
+    medium: {
+      size: 24
+    },
+    "default": {
+      size: 20
+    }
   },
   padding: {
     "default": {
-      hasBadge: {
-        right: 8
-      },
       horizontal: 16,
-      vertical: 7
-    },
-    large: {
-      hasBadge: {
-        right: 12
-      },
-      horizontal: 24,
-      vertical: 11
+      vertical: 8
     },
-    xLarge: {
-      hasBadge: {
-        right: 12
-      },
+    medium: {
       horizontal: 24,
-      vertical: 15
+      vertical: 12
     }
   },
   transition: {
     duration: '200ms',
     timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
   },
-  "default": {
-    "default": {
-      backgroundColor: 'rgba(0, 0, 0, 0.05)',
-      pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-      hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-      focusBorderColor: 'rgba(0, 0, 0, 0.1)'
-    },
-    ghost: {
-      backgroundColor: 'rgba(255, 255, 255, 0.1)',
-      pressedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
-      hoverBackgroundColor: 'rgba(255, 255, 255, 0.05)',
-      focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: deepPurpleColorPalette.white,
-      hoverColor: deepPurpleColorPalette.white,
-      activeColor: deepPurpleColorPalette.white
-    }
-  },
+  focusBorderColor: deepPurpleColorPalette['blue.2'],
   primary: {
     "default": {
-      backgroundColor: colors.primary,
-      pressedBackgroundColor: colors.primaryLight,
-      hoverBackgroundColor: colors.primaryLight,
-      focusBorderColor: 'rgba(76, 52, 224, 0.2)'
+      backgroundColor: {
+        "default": colors.primary,
+        hover: deepPurpleColorPalette['deepPurple.7'],
+        pressed: deepPurpleColorPalette['deepPurple.7'],
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.primary
+      },
+      color: {
+        "default": colors.white,
+        hover: colors.white,
+        pressed: colors.white,
+        disabled: colors.disabled,
+        focus: colors.white
+      }
     },
-    ghost: {
-      backgroundColor: colors.uiBackgroundLight,
-      pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
-      focusBorderColor: 'rgba(255,255,255, 0.4)',
-      color: colors.primary,
-      hoverColor: deepPurpleColorPalette['beige.2'],
-      activeColor: deepPurpleColorPalette['beige.2']
-    }
-  },
-  dark: {
-    "default": {
-      backgroundColor: colors.black,
-      pressedBackgroundColor: 'rgba(0, 0, 0, 0.8)',
-      hoverBackgroundColor: 'rgba(0, 0, 0, 0.8)',
-      focusBorderColor: 'rgba(0, 0, 0, 0.8)'
+    revert: {
+      backgroundColor: {
+        "default": colors.white,
+        hover: deepPurpleColorPalette['white-alpha.80'],
+        pressed: deepPurpleColorPalette['white-alpha.80'],
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.white
+      },
+      color: {
+        "default": colors.black,
+        hover: colors.black,
+        pressed: colors.black,
+        disabled: colors.disabled,
+        focus: colors.black
+      }
     }
   },
-  danger: {
+  secondary: {
     "default": {
-      backgroundColor: deepPurpleColorPalette['red.1'],
-      pressedBackgroundColor: deepPurpleColorPalette['red.2'],
-      hoverBackgroundColor: deepPurpleColorPalette['red.2'],
-      focusBorderColor: deepPurpleColorPalette['red.2']
+      backgroundColor: {
+        "default": deepPurpleColorPalette['beige-alpha.25'],
+        hover: deepPurpleColorPalette['beige-alpha.40'],
+        pressed: deepPurpleColorPalette['beige-alpha.40'],
+        disabled: colors.disabled,
+        focus: deepPurpleColorPalette['beige-alpha.25']
+      },
+      color: {
+        "default": colors.black,
+        hover: colors.black,
+        pressed: colors.black,
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.black
+      }
     },
-    ghost: {
-      backgroundColor: colors.uiBackgroundLight,
-      pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
-      focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: deepPurpleColorPalette['red.6'],
-      hoverColor: deepPurpleColorPalette['red.6'],
-      activeColor: deepPurpleColorPalette['red.6']
-    }
-  },
-  subtle: {
-    "default": {
-      backgroundColor: colors.transparent,
-      pressedBackgroundColor: colors.transparent,
-      hoverBackgroundColor: colors.transparent,
-      focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-      color: colors.primary,
-      hoverColor: 'rgba(76, 52, 224, 0.8)',
-      activeColor: 'rgba(76, 52, 224, 0.8)'
-    }
-  },
-  'subtle-dark': {
-    "default": {
-      backgroundColor: colors.transparent,
-      pressedBackgroundColor: colors.transparent,
-      hoverBackgroundColor: colors.transparent,
-      focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-      color: colors.black,
-      hoverColor: 'rgba(0, 0, 0, 0.8)',
-      activeColor: 'rgba(0, 0, 0, 0.8)'
+    revert: {
+      backgroundColor: {
+        "default": deepPurpleColorPalette['white-alpha.10'],
+        hover: deepPurpleColorPalette['white-alpha.20'],
+        pressed: deepPurpleColorPalette['white-alpha.20'],
+        disabled: colors.disabled,
+        focus: deepPurpleColorPalette['white-alpha.10']
+      },
+      color: {
+        "default": colors.white,
+        hover: deepPurpleColorPalette['white-alpha.80'],
+        pressed: deepPurpleColorPalette['white-alpha.80'],
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.white
+      }
     }
   },
-  'subtle-revert': {
+  tertiary: {
     "default": {
-      backgroundColor: colors.transparent,
-      pressedBackgroundColor: colors.transparent,
-      hoverBackgroundColor: colors.transparent,
-      focusBorderColor: colors.white,
-      color: colors.white,
-      hoverColor: colors.white,
-      activeColor: colors.white
+      backgroundColor: {
+        "default": 'transparent',
+        hover: 'transparent',
+        pressed: 'transparent',
+        disabled: 'transparent',
+        focus: 'transparent'
+      },
+      color: {
+        "default": colors.black,
+        hover: colors.blackAnthracite,
+        pressed: colors.blackAnthracite,
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.black
+      }
+    },
+    revert: {
+      backgroundColor: {
+        "default": 'transparent',
+        hover: 'transparent',
+        pressed: 'transparent',
+        disabled: 'transparent',
+        focus: 'transparent'
+      },
+      color: {
+        "default": colors.white,
+        hover: deepPurpleColorPalette['white-alpha.80'],
+        pressed: deepPurpleColorPalette['white-alpha.80'],
+        disabled: deepPurpleColorPalette['white-alpha.20'],
+        focus: colors.white
+      }
     }
   },
-  disabled: {
+  'tertiary-danger': {
     "default": {
-      backgroundColor: colors.disabled,
-      pressedBackgroundColor: colors.disabled,
-      hoverBackgroundColor: colors.disabled,
-      focusBorderColor: deepPurpleColorPalette['beige.2'],
-      borderColor: deepPurpleColorPalette['beige.2']
+      backgroundColor: {
+        "default": 'transparent',
+        hover: 'transparent',
+        pressed: 'transparent',
+        disabled: 'transparent',
+        focus: 'transparent'
+      },
+      color: {
+        "default": colors.danger,
+        hover: deepPurpleColorPalette['red.2'],
+        pressed: deepPurpleColorPalette['red.2'],
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.danger
+      }
     }
   }
 };
 
 var buttonBadge = {
-  backgroundColor: deepPurpleColorPalette['red.6'],
+  backgroundColor: {
+    "default": colors.danger,
+    disabled: colors.blackLight
+  },
   dimensions: {
     withBadge: {
-      width: 10,
-      height: 10
+      width: 8,
+      height: 8
     },
     badgeCount: {
       width: 20,
@@ -1913,14 +1928,13 @@ var iconButton = {
   },
   disabled: {
     scale: 1,
-    backgroundColor: button.disabled["default"].backgroundColor,
-    borderColor: button.disabled["default"].borderColor
+    backgroundColor: button.primary["default"].backgroundColor.disabled
   },
   "default": {
-    pressedBackgroundColor: button["default"]["default"].pressedBackgroundColor
+    pressedBackgroundColor: button.primary["default"].backgroundColor.disabled
   },
   ghost: {
-    pressedBackgroundColor: button["default"].ghost.pressedBackgroundColor
+    pressedBackgroundColor: button.primary["default"].backgroundColor.disabled
   },
   primary: {
     pressedBackgroundColor: deepPurpleColorPalette['beige.1']
@@ -2464,7 +2478,7 @@ var breakpoints = {
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 var theme = {
   spacing: spacing,
-  getSpacing: function (multiplier) {
+  getSpacing: function getSpacing(multiplier) {
     return spacing * multiplier;
   },
   colors: colors,
@@ -2651,7 +2665,7 @@ var ActionCardPressable = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onPress: onPress,
     onHoverIn: onHoverIn,
     onHoverOut: onHoverOut,
-    children: function (_ref3) {
+    children: function children(_ref3) {
       var isHovered = _ref3.isHovered,
         isPressed = _ref3.isPressed,
         isFocused = _ref3.isFocused;
@@ -2814,31 +2828,27 @@ function createResponsiveStyleFromProp(responsiveBooleanValue, valueIfTrue, valu
   return responsiveValue;
 }
 
-function warn(message) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(message);
-  }
-}
-function deprecatedMessage(symbol, deprecation, replaceBy) {
-  var replaceMessage = replaceBy === undefined ? '' : ", please use ".concat(replaceBy, " instead");
-  warn("[Deprecation] in ".concat(symbol, ": ").concat(deprecation, " is deprecated").concat(replaceMessage, "."));
-}
-function deprecatedInComponent(component, deprecation, replaceBy) {
-  deprecatedMessage("<".concat(component, " />"), deprecation, replaceBy);
-}
-
 function getCurrentBackgroundColorForNativeBaseTheme(_ref) {
   var type = _ref.type,
     variant = _ref.variant,
     isDisabled = _ref.isDisabled,
     isHovered = _ref.isHovered,
-    isPressed = _ref.isPressed;
-  if (isDisabled) return 'kitt.button.disabled.default.backgroundColor';
-  var baseKey = "kitt.button.".concat(type, ".").concat(variant);
-  if (isHovered || isPressed) {
-    return "".concat(baseKey, ".hoverBackgroundColor");
+    isPressed = _ref.isPressed,
+    isFocused = _ref.isFocused;
+  var baseKey = "kitt.button.".concat(type, ".").concat(variant, ".backgroundColor");
+  if (isDisabled) {
+    return "".concat(baseKey, ".disabled");
   }
-  return "".concat(baseKey, ".backgroundColor");
+  if (isHovered) {
+    return "".concat(baseKey, ".hover");
+  }
+  if (isPressed) {
+    return "".concat(baseKey, ".pressed");
+  }
+  if (isFocused) {
+    return "".concat(baseKey, ".focused");
+  }
+  return "".concat(baseKey, ".default");
 }
 
 function AnimatedContainer$2(_ref) {
@@ -2915,7 +2925,7 @@ var getTypographyFamilyWithAncestorValue = function (type, typographyFamilyInCon
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-var _excluded$S = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color", "underline"];
+var _excluded$S = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -3042,7 +3052,6 @@ function Typography(_ref2) {
     } : _ref2$type,
     variant = _ref2.variant,
     color = _ref2.color,
-    underline = _ref2.underline,
     otherProps = _objectWithoutProperties(_ref2, _excluded$S);
   var sx = useSx();
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
@@ -3074,21 +3083,14 @@ function Typography(_ref2) {
       }
     });
   }
-  var text = /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread(_objectSpread({
+  var text = /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
     lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
     fontWeight: webFontWeight,
     fontFamily: nativeFontFamily,
-    borderBottomWidth: underline ? 1 : undefined,
-    borderBottomColor: underline ? currentColorValue : undefined,
     textTransform: typographyFamily === 'contentCaps' ? 'uppercase' : undefined
-  }, colorStyles), otherProps), {}, {
-    // The property text-underline-offset is not on native.
-    // To add an underline with an offset, we use a custom borderBottomWidth and color.
-    // and we set underline to undefined to avoid a double underline
-    underline: undefined
-  }));
+  }, colorStyles), otherProps));
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
     value: typographyFamily,
     children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
@@ -3137,12 +3139,14 @@ Typography.Header6 = createHeading(6);
 
 function ButtonBadge(_ref) {
   var withBadge = _ref.withBadge,
-    badgeCount = _ref.badgeCount;
+    badgeCount = _ref.badgeCount,
+    disabled = _ref.disabled;
+  var backgroundColor = disabled ? 'kitt.buttonBadge.backgroundColor.disabled' : 'kitt.buttonBadge.backgroundColor.default';
   if (withBadge) {
     return /*#__PURE__*/jsx(View, {
       height: "kitt.buttonBadge.dimensions.withBadge.height",
       width: "kitt.buttonBadge.dimensions.withBadge.width",
-      backgroundColor: "kitt.buttonBadge.backgroundColor",
+      backgroundColor: backgroundColor,
       borderRadius: "kitt.buttonBadge.borderRadius.withBadge"
     });
   }
@@ -3152,7 +3156,7 @@ function ButtonBadge(_ref) {
       justifyContent: "center",
       height: "kitt.buttonBadge.dimensions.badgeCount.height",
       width: "kitt.buttonBadge.dimensions.badgeCount.width",
-      backgroundColor: "kitt.buttonBadge.backgroundColor",
+      backgroundColor: backgroundColor,
       borderRadius: "kitt.buttonBadge.borderRadius.badgeCount",
       children: /*#__PURE__*/jsx(Typography.Text, {
         base: "body-xs",
@@ -3240,115 +3244,93 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
-var getButtonTextColorByType = function (type, variant, isHovered, isPressed) {
-  var isButtonInteractedWith = isHovered || isPressed;
-  switch (type) {
-    case 'primary':
-      return variant === 'ghost' ? 'primary' : 'white';
-    case 'dark':
-      return 'white';
-    case 'danger':
-      return 'danger';
-    case 'subtle':
-      return isButtonInteractedWith ? 'primary-light' : 'primary';
-    case 'subtle-dark':
-      return isButtonInteractedWith ? 'black-light' : 'black';
-    case 'subtle-revert':
-      return 'white';
-    case 'default':
-      return variant === 'ghost' ? 'white' : 'black';
-    default:
-      return 'black';
+var getButtonTextColorByType = function (type, variant, isHovered, isPressed, isDisabled) {
+  var baseKey = "kitt.button.".concat(type, ".").concat(variant, ".color");
+  if (isDisabled) {
+    return "".concat(baseKey, ".disabled");
   }
+  if (isHovered || isPressed) {
+    return "".concat(baseKey, ".hover");
+  }
+  return "".concat(baseKey, ".default");
 };
 
-var _excluded$Q = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing"];
-function ButtonIcon(_ref) {
-  var icon = _ref.icon,
-    color = _ref.color,
+var _excluded$Q = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
+function ButtonContentChildren(_ref) {
+  var type = _ref.type,
+    icon = _ref.icon,
     iconPosition = _ref.iconPosition,
-    testID = _ref.testID;
-  return /*#__PURE__*/jsx(View, {
-    marginRight: iconPosition === 'left' ? 'kitt.2' : 0,
-    marginLeft: iconPosition === 'right' ? 'kitt.2' : 0,
-    children: /*#__PURE__*/jsx(TypographyIcon, {
-      icon: icon,
-      testID: testID,
-      color: color
-    })
-  });
-}
-function ButtonContentChildren(_ref2) {
-  var type = _ref2.type,
-    icon = _ref2.icon,
-    iconPosition = _ref2.iconPosition,
-    innerSpacing = _ref2.innerSpacing,
-    withBadge = _ref2.withBadge,
-    badgeCount = _ref2.badgeCount,
-    color = _ref2.color,
-    children = _ref2.children;
+    innerSpacing = _ref.innerSpacing,
+    isDisabled = _ref.isDisabled,
+    withBadge = _ref.withBadge,
+    badgeCount = _ref.badgeCount,
+    color = _ref.color,
+    children = _ref.children,
+    isPressed = _ref.isPressed,
+    isHovered = _ref.isHovered,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size;
   if ((process.env.NODE_ENV !== "production")) {
     if (!(children || icon)) {
       throw new Error('kitt(Button): You should provide at least a children or a icon');
     }
   }
-  if (!children) {
-    return /*#__PURE__*/jsx(TypographyIcon
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    , {
+  if (!children && icon) {
+    return /*#__PURE__*/jsx(TypographyIcon, {
       icon: icon,
       color: color
     });
   }
-  var buttonIconSharedProps = {
-    type: type,
-    iconPosition: iconPosition,
-    color: color
-  };
-
   // Make the multilines case work properly on native - Breaks the web implem
   var sharedNativeStyle = {
     flexShrink: 1
   };
-  return /*#__PURE__*/jsxs(View, {
+  return /*#__PURE__*/jsxs(HStack$1, {
     alignItems: "center",
     justifyContent: innerSpacing,
-    flexDirection: "row",
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
+    space: "kitt.2",
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(TypographyIcon, _objectSpread(_objectSpread({}, {
+      type: type,
+      color: color
+    }), {}, {
       testID: "button.ButtonContent.leftButtonIcon",
-      icon: icon
+      icon: icon,
+      color: color,
+      size: "kitt.button.icon.".concat(size, ".size")
     })) : null, /*#__PURE__*/jsx(Typography.Text, {
       /* On native code, this is the only way to ensure that the text is centered */
       textAlign: "center",
       _android: sharedNativeStyle,
       _ios: sharedNativeStyle,
-      base: "body-m",
-      variant: "bold",
+      base: "label-large",
+      variant: "semibold",
+      underline: (type === 'tertiary' || type === 'tertiary-danger') && !isHovered && !isPressed,
       color: color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
-      icon: icon
-    })) : null, withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
-      marginLeft: "kitt.2",
-      children: /*#__PURE__*/jsx(ButtonBadge, {
-        withBadge: withBadge,
-        badgeCount: badgeCount
-      })
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(TypographyIcon, {
+      icon: icon,
+      color: color,
+      size: "kitt.button.icon.".concat(size, ".size")
+    }) : null, withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(ButtonBadge, {
+      disabled: isDisabled,
+      withBadge: withBadge,
+      badgeCount: badgeCount
     }) : null]
   });
 }
-function ButtonContent(_ref3) {
-  var type = _ref3.type,
-    variant = _ref3.variant,
-    isDisabled = _ref3.isDisabled,
-    icon = _ref3.icon,
-    children = _ref3.children,
-    isHovered = _ref3.isHovered,
-    isPressed = _ref3.isPressed;
-    _ref3.isFocused;
-    var innerSpacing = _ref3.innerSpacing,
-    props = _objectWithoutProperties(_ref3, _excluded$Q);
-  var color = isDisabled ? 'black-light' : getButtonTextColorByType(type, variant, isHovered, isPressed);
+function ButtonContent(_ref2) {
+  var type = _ref2.type,
+    variant = _ref2.variant,
+    isDisabled = _ref2.isDisabled,
+    icon = _ref2.icon,
+    children = _ref2.children,
+    isHovered = _ref2.isHovered,
+    isPressed = _ref2.isPressed;
+    _ref2.isFocused;
+    var innerSpacing = _ref2.innerSpacing,
+    size = _ref2.size,
+    props = _objectWithoutProperties(_ref2, _excluded$Q);
+  var color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
       // Make the multilines case work properly on web
@@ -3362,65 +3344,45 @@ function ButtonContent(_ref3) {
       type: type,
       isDisabled: isDisabled,
       color: color,
-      innerSpacing: innerSpacing
+      innerSpacing: innerSpacing,
+      isHovered: isHovered,
+      isPressed: isPressed,
+      size: size
     }, props), {}, {
       children: children
     }))
   });
 }
 
-function getCurrentPaddingConfig(_ref) {
-  var size = _ref.size;
-  if (size === 'large') return 'large';
-  if (size === 'xLarge') return 'xLarge';
-  return 'default';
-}
-function ButtonPadding(_ref2) {
-  var children = _ref2.children,
-    size = _ref2.size,
-    hasBadge = _ref2.hasBadge;
-  var currentPaddingKey = getCurrentPaddingConfig({
-    size: size
-  });
+function ButtonPadding(_ref) {
+  var children = _ref.children,
+    size = _ref.size;
+    _ref.hasBadge;
   return /*#__PURE__*/jsx(View, {
     position: "relative",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    paddingX: "kitt.button.padding.".concat(currentPaddingKey, ".horizontal"),
-    paddingY: "kitt.button.padding.".concat(currentPaddingKey, ".vertical"),
-    paddingRight: hasBadge ? "kitt.button.padding.".concat(currentPaddingKey, ".hasBadge.right") : undefined,
+    paddingX: "kitt.button.padding.".concat(size, ".horizontal"),
+    paddingY: "kitt.button.padding.".concat(size, ".vertical"),
     minHeight: "kitt.button.minHeight",
     children: children
   });
 }
 
-function DisabledBorder() {
-  return /*#__PURE__*/jsx(View, {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderWidth: "kitt.button.borderWidth.disabled",
-    borderColor: "kitt.button.disabled.default.borderColor",
-    borderRadius: "kitt.button.borderRadius"
-  });
-}
-
 function FocusBorder(_ref) {
-  var type = _ref.type,
-    variant = _ref.variant,
-    isFocused = _ref.isFocused,
+  var isFocused = _ref.isFocused,
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed;
   var _useTheme = useTheme(),
     buttonTheme = _useTheme.kitt.button;
+  var outerBorderRadius = buttonTheme.borderRadius + buttonTheme.borderWidth.focus;
+  var innerBorderRadius = buttonTheme.borderRadius;
   return /*#__PURE__*/jsx(View, {
     _web: {
       style: {
-        width: "calc(100% + ".concat(buttonTheme.borderWidth.focus * 2, "px)"),
-        height: "calc(100% + ".concat(buttonTheme.borderWidth.focus * 2, "px)"),
+        width: "calc(100% + ".concat(buttonTheme.borderRadius, "px)"),
+        height: "calc(100% + ".concat(buttonTheme.borderRadius, "px)"),
         transitionProperty: 'opacity',
         transitionDuration: buttonTheme.transition.duration,
         transitionTimingFunction: buttonTheme.transition.timingFunction
@@ -3428,25 +3390,15 @@ function FocusBorder(_ref) {
     },
     opacity: isFocused && !(isPressed || isHovered) ? 1 : 0,
     position: "absolute",
-    left: -buttonTheme.borderWidth.focus,
-    top: -buttonTheme.borderWidth.focus,
     borderWidth: "kitt.button.borderWidth.focus",
-    borderColor: "kitt.button.".concat(type, ".").concat(variant, ".focusBorderColor"),
-    borderRadius: "kitt.button.borderRadius"
+    borderColor: "kitt.button.focusBorderColor",
+    borderRadius: outerBorderRadius,
+    children: /*#__PURE__*/jsx(View, {
+      borderRadius: innerBorderRadius
+    })
   });
 }
 
-var hasVariant = function (button, variant) {
-  return variant in button;
-};
-function getVariantValuesIfExist(theme, type, variant) {
-  var button = theme.kitt.button[type];
-  if (hasVariant(button, variant)) {
-    return button[variant];
-  }
-  return theme.kitt.button[type]["default"];
-}
-
 var useNativeAnimation$5 = function (_ref) {
   var type = _ref.type,
     variant = _ref.variant,
@@ -3454,24 +3406,21 @@ var useNativeAnimation$5 = function (_ref) {
   var theme = useTheme();
   var pressed = useSharedValue(isPressedInternal ? 1 : 0);
   var color = useSharedValue(0);
-  var _getVariantValuesIfEx = getVariantValuesIfExist(theme, type, variant),
-    backgroundColor = _getVariantValuesIfEx.backgroundColor,
-    pressedBackgroundColor = _getVariantValuesIfEx.pressedBackgroundColor;
   var scale = theme.kitt.button.scale;
   var animatedStyles = useAnimatedStyle(function () {
     return {
-      backgroundColor: interpolateColor(color.value, [0, 1], [backgroundColor, pressedBackgroundColor]),
+      backgroundColor: interpolateColor(color.value, [0, 1], [type === 'tertiary-danger' ? theme.kitt.button['tertiary-danger']["default"].backgroundColor["default"] : theme.kitt.button[type][variant].backgroundColor["default"], type === 'tertiary-danger' ? theme.kitt.button['tertiary-danger']["default"].backgroundColor.pressed : theme.kitt.button[type][variant].backgroundColor.pressed]),
       transform: [{
         scale: withSpring(pressed.value ? scale.base.active : scale.base["default"])
       }]
     };
   });
   return {
-    onPressIn: function () {
+    onPressIn: function handlePressIn() {
       color.value = withSpring(1);
       pressed.value = 1;
     },
-    onPressOut: function () {
+    onPressOut: function handlePressOut() {
       color.value = withSpring(0);
       pressed.value = 0;
     },
@@ -3479,28 +3428,17 @@ var useNativeAnimation$5 = function (_ref) {
   };
 };
 
-var getButtonSize = function (_ref) {
-  var large = _ref.large,
-    xLarge = _ref.xLarge,
-    size = _ref.size;
-  if (large) return 'large';
-  if (xLarge) return 'xLarge';
-  return size;
-};
-
-var allowedGhostTypes = ['primary', 'default', 'danger'];
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _children = _ref.children,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+    type = _ref$type === void 0 ? 'secondary' : _ref$type,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     disabled = _ref.disabled,
     stretch = _ref.stretch,
-    large = _ref.large,
-    xLarge = _ref.xLarge,
     icon = _ref.icon,
-    sizeProp = _ref.size,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
     _ref$iconPosition = _ref.iconPosition,
     iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
     testID = _ref.testID,
@@ -3527,18 +3465,9 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onPressIn = _useNativeAnimation.onPressIn,
     onPressOut = _useNativeAnimation.onPressOut,
     animatedStyles = _useNativeAnimation.animatedStyles;
-  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
-    throw new Error('variant=ghost is only allowed with type=primary or default');
+  if (process.env.NODE_ENV !== 'production' && variant === 'revert' && type === 'tertiary-danger') {
+    throw new Error('Invalid revert variant for tertiary-danger button type. Only default variant is allowed.');
   }
-  if (large || xLarge) {
-    var deprecatedProp = large ? 'large' : 'xLarge';
-    deprecatedInComponent('Button', "".concat(deprecatedProp, " prop"), 'size');
-  }
-  var size = getButtonSize({
-    large: large,
-    xLarge: xLarge,
-    size: sizeProp
-  });
   return /*#__PURE__*/jsx(Pressable, {
     ref: ref,
     disabled: disabled,
@@ -3550,6 +3479,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     alignSelf: createResponsiveStyleFromProp(stretch, undefined, 'flex-start'),
     minWidth: "kitt.button.minWidth",
     maxWidth: createResponsiveStyleFromProp(stretch, '100%', 'kitt.button.maxWidth'),
+    maxHeight: "kitt.button.maxHeight",
     width: createResponsiveStyleFromProp(stretch, '100%', 'auto'),
     onPress: onPress,
     onPressIn: onPressIn,
@@ -3558,7 +3488,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onHoverOut: onHoverOut,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -3585,10 +3515,9 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
             isPressed: isPressed,
             isFocused: isFocused,
             innerSpacing: innerSpacing,
+            size: size,
             children: _children
-          }), disabled ? /*#__PURE__*/jsx(DisabledBorder, {}) : null, /*#__PURE__*/jsx(FocusBorder, {
-            type: type,
-            variant: variant,
+          }), /*#__PURE__*/jsx(FocusBorder, {
             isFocused: isFocused || isFocusedInternal,
             isHovered: isHovered,
             isPressed: isPressed
@@ -3680,7 +3609,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stretch: stretch,
       disabled: isLoading ? true : disabled,
       icon: isLoading ? /*#__PURE__*/jsx(LoaderIcon, {}) : icon,
-      onPress: function (e) {
+      onPress: function handlePress(e) {
         var callPressAndUpdateLoadingState = /*#__PURE__*/function () {
           var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             return _regeneratorRuntime().wrap(function (_context) {
@@ -3782,7 +3711,7 @@ function Actions(_ref) {
     flexGrow: 1,
     reversed: isReversed
   }, props), {}, {
-    space: "kitt.3",
+    space: "kitt.2",
     children: children
   }));
 }
@@ -3952,10 +3881,10 @@ function BottomSheetComp(_ref, ref) {
       borderRadius: 4,
       backgroundColor: theme.kitt.bottomSheet.handle.backgroundColor
     },
-    handleComponent: function (props) {
+    handleComponent: function handleComponent(props) {
       return hasHandle ? /*#__PURE__*/jsx(BottomSheetHandle, _objectSpread({}, props)) : null;
     },
-    backdropComponent: function (props) {
+    backdropComponent: function backdropComponent(props) {
       return hasBackdrop ? /*#__PURE__*/jsx(BottomSheetBackdrop, _objectSpread(_objectSpread({}, props), {}, {
         opacity: 0.25,
         appearsOnIndex: 0,
@@ -3964,7 +3893,7 @@ function BottomSheetComp(_ref, ref) {
     }
   }, rest), {}, {
     topInset: top,
-    children: function (props) {
+    children: function children(props) {
       return /*#__PURE__*/jsx(Wrapper, {
         children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, _objectSpread({}, props === null || props === void 0 ? void 0 : props.data)) : Content
       });
@@ -4040,7 +3969,7 @@ function CloseButton(_ref) {
     onPress = _ref.onPress;
   var onCloseContextCallback = useOnCloseModalBehaviour();
   return /*#__PURE__*/cloneElement(children, {
-    onPress: function () {
+    onPress: function handleClose() {
       if (onPress) onPress();
       onCloseContextCallback();
     }
@@ -4218,11 +4147,11 @@ function CardModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function () {
+    onShow: function onShow() {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function () {
+    onDismiss: function onDismiss() {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -4269,7 +4198,7 @@ function CardModalBehaviour(_ref) {
     onClose: onClose,
     children: /*#__PURE__*/jsx(CardModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
-      onExited: function () {
+      onExited: function handleExitAnimationDone() {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -4491,10 +4420,10 @@ var useNativeAnimation$4 = function (_ref) {
     };
   });
   return {
-    onPressIn: function () {
+    onPressIn: function onPressIn() {
       pressed.value = true;
     },
-    onPressOut: function () {
+    onPressOut: function onPressOut() {
       pressed.value = false;
     },
     backgroundStyles: backgroundStyles
@@ -4557,7 +4486,7 @@ function ChoiceItem(_ref) {
     style: style,
     onBlur: onBlur,
     onFocus: onFocus,
-    onPress: function (e) {
+    onPress: function handlePress(e) {
       if (onFocus) onFocus(e);
       if (onPress) onPress();
       handleChange();
@@ -4565,7 +4494,7 @@ function ChoiceItem(_ref) {
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed;
       return /*#__PURE__*/jsxs(AnimatedChoiceItemView, {
@@ -4661,7 +4590,7 @@ function Choices(_ref2) {
     disabled: disabled,
     variant: variant,
     onPress: !isForm ? onPress : undefined,
-    onChange: isForm ? function (newValue) {
+    onChange: isForm ? function handleChange(newValue) {
       setCurrentValue(newValue);
       if (onChange) onChange(newValue);
     } : undefined,
@@ -4819,11 +4748,11 @@ function DialogModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function () {
+    onShow: function onShow() {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function () {
+    onDismiss: function onDismiss() {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -4877,7 +4806,7 @@ function DialogModalBehaviour(_ref) {
       },
       children: /*#__PURE__*/jsx(DialogModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
         visible: visible,
-        onExited: function () {
+        onExited: function handleExitAnimationDone() {
           if (onExited) onExited();
           setIsModalBehaviourVisible(false);
         },
@@ -5140,7 +5069,7 @@ function ExternalLink(_ref) {
   var openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
-    onPress: function (e) {
+    onPress: function handleOnPress(e) {
       if (onPress) {
         onPress(e);
         if (e.defaultPrevented) return;
@@ -5364,14 +5293,14 @@ var _excluded$z = ["children", "name", "disabled", "placeholder", "isInitialOpen
 function patchNativeEvent(event) {
   return event || {
     preventDownshiftDefault: false,
-    preventDefault: function () {}
+    preventDefault: function preventDefault() {}
   };
 }
 function isReactElement(element) {
   return _typeof(element) === 'object' && element !== null && 'type' in element && 'props' in element;
 }
 function Autocomplete(_ref) {
-  var children = _ref.children,
+  var _children = _ref.children,
     name = _ref.name,
     disabled = _ref.disabled,
     placeholder = _ref.placeholder,
@@ -5398,7 +5327,7 @@ function Autocomplete(_ref) {
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
     props = _objectWithoutProperties(_ref, _excluded$z);
-  var childrenArray = Children.toArray(children);
+  var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
       child: child,
@@ -5409,12 +5338,12 @@ function Autocomplete(_ref) {
     defaultIsOpen: isInitialOpen,
     initialSelectedItem: initialValue,
     initialInputValue: initialValue ? itemToString(initialValue) : undefined,
-    itemToString: function (item) {
+    itemToString: function handleItemToString(item) {
       // Prevents returning null values
       if (!itemToString) return '';
       return itemToString(item || undefined);
     },
-    stateReducer: function (state, changes) {
+    stateReducer: function stateReducer(state, changes) {
       switch (changes.type) {
         case Downshift.stateChangeTypes.changeInput:
           return _objectSpread(_objectSpread({}, changes), {}, {
@@ -5424,7 +5353,7 @@ function Autocomplete(_ref) {
           return changes;
       }
     },
-    onChange: function (selectedItem, stateAndHelpers) {
+    onChange: function onChange(selectedItem, stateAndHelpers) {
       if (_onChange) {
         _onChange(selectedItem, stateAndHelpers);
       }
@@ -5432,7 +5361,7 @@ function Autocomplete(_ref) {
     onSelect: onSelectItem,
     onOuterClick: onOuterPress,
     onInputValueChange: onInputChange,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var getRootProps = _ref2.getRootProps,
         getInputProps = _ref2.getInputProps,
         getMenuProps = _ref2.getMenuProps,
@@ -5484,7 +5413,7 @@ function Autocomplete(_ref) {
           right: right || (canDisplayCollapseButton ? /*#__PURE__*/jsx(InputPressable, _objectSpread(_objectSpread({}, toggleProps), {}, {
             testID: "kitt.Autocomplete.listToggle",
             hitSlop: 40,
-            onPress: function (e) {
+            onPress: function handleTogglePress(e) {
               if (Platform.OS === 'web') {
                 onClickToggle(e);
                 return;
@@ -5495,13 +5424,13 @@ function Autocomplete(_ref) {
               icon: isCurrentlyOpen ? /*#__PURE__*/jsx(CaretUpFillIcon, {}) : /*#__PURE__*/jsx(CaretDownFillIcon, {})
             })
           })) : null),
-          onFocus: function (e) {
+          onFocus: function onFocus(e) {
             openMenu();
             /** @ts-expect-error onFocus wants web events */
             if (Platform.OS !== 'android' && onSearchInputFocus) onSearchInputFocus(e);
             if (_onFocus) _onFocus(e);
           },
-          onBlur: function (e) {
+          onBlur: function onBlur(e) {
             /** @ts-expect-error onBlur wants web events */
             if (Platform.OS === 'web' && onSearchInputBlur) onSearchInputBlur(e);
 
@@ -5537,14 +5466,14 @@ function Autocomplete(_ref) {
                   selected: ariaSelected
                 },
                 disabled: disabled,
-                onPress: function (e) {
+                onPress: function onPress(e) {
                   if (Platform.OS === 'web') {
                     if (onClick) onClick(e);
                     return;
                   }
                   if (_onPress) _onPress(patchNativeEvent(e));
                 },
-                children: function (_ref5) {
+                children: function children(_ref5) {
                   var isHovered = _ref5.isHovered,
                     isFocused = _ref5.isFocused,
                     isPressed = _ref5.isPressed;
@@ -5634,12 +5563,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       disabled: disabled
     },
     disabled: disabled,
-    onPress: function (e) {
+    onPress: function handlePress(e) {
       if (onFocus) onFocus();
       if (onChange) onChange(!checked, e);
       if (onBlur) onBlur();
     },
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -6194,7 +6123,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     DateTimePickerAndroid.open({
       testID: pickerUITestID,
       value: currentValue || pickerDefaultDate || new Date(Date.now()),
-      onChange: function (e) {
+      onChange: function onChange(e) {
         setIsFocused(false);
         var timestamp = e.nativeEvent.timestamp;
         if (timestamp) {
@@ -6246,7 +6175,7 @@ function PlatformDateTimePicker(_ref) {
     minimumDate: minimuDate,
     display: displayMode
   }, iosProps), {}, {
-    onChange: function (_event, date) {
+    onChange: function onChange(_event, date) {
       return _onChange(date);
     }
   }));
@@ -6280,7 +6209,7 @@ function ModalPlatformDateTimePicker(_ref2) {
 
   return /*#__PURE__*/jsx(CardModal.ModalBehaviour, {
     visible: Boolean(isVisible),
-    onClose: function () {
+    onClose: function handleClose() {
       setCurrentValue(value);
       onClose();
     },
@@ -6291,7 +6220,7 @@ function ModalPlatformDateTimePicker(_ref2) {
         }) : null, /*#__PURE__*/jsx(CardModal.Body, {
           children: /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread(_objectSpread({}, props), {}, {
             value: currentValue,
-            onChange: function (newDate) {
+            onChange: function handleChange(newDate) {
               setCurrentValue(function (prev) {
                 return newDate || prev;
               });
@@ -6301,7 +6230,7 @@ function ModalPlatformDateTimePicker(_ref2) {
           children: /*#__PURE__*/jsx(Button, {
             stretch: true,
             type: "primary",
-            onPress: function () {
+            onPress: function handleSubmit() {
               onChange(currentValue);
             },
             children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
@@ -6355,7 +6284,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isFocusedInternal: isFocused || isFocusedInternal,
       isHoveredInternal: isHoveredInternal,
       isPressedInternal: isPressedInternal,
-      onPress: function () {
+      onPress: function handleModalOpen() {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
@@ -6368,7 +6297,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       validateButtonLabel: pickerUIValidateButtonLabel,
       defaultDate: pickerDefaultDate,
       onClose: handleModalClose,
-      onChange: function (newDate) {
+      onChange: function handleChange(newDate) {
         setCurrentValue(newDate);
         onChange(newDate);
         handleModalClose();
@@ -6684,7 +6613,7 @@ function FilePicker(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/cloneElement(childElement, {
       // ensure that the press event is not prevented by Button component
-      onPress: function () {
+      onPress: function onPress() {
         var _childElement$props$o, _childElement$props, _bottomSheetRef$curre;
         if (disabled) return;
         (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
@@ -6985,10 +6914,10 @@ var GoogleMapsAutocompleteContext = /*#__PURE__*/createContext({
     isLoadingResultDetails: false,
     shouldDisplayEmptyStateWhenNoResults: false
   },
-  onInputChange: function () {
+  onInputChange: function onInputChange() {
     return Promise.resolve();
   },
-  onSelectItem: function () {}
+  onSelectItem: function onSelectItem() {}
 });
 function GoogleMapsAutocompleteProvider(_ref) {
   var children = _ref.children,
@@ -7241,7 +7170,7 @@ function InputAddress(_ref) {
   return /*#__PURE__*/jsx(Autocomplete, _objectSpread(_objectSpread({}, props), {}, {
     itemToString: itemToString,
     initialValue: formattedInitialValue,
-    checkSelectedItem: function (selectedItem, item) {
+    checkSelectedItem: function checkSelectedItem(selectedItem, item) {
       return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.place_id) === item.place_id;
     },
     right: state.isLoadingSearch || state.isLoadingResultDetails ? /*#__PURE__*/jsx(Icon, {
@@ -7250,10 +7179,10 @@ function InputAddress(_ref) {
     }) : undefined,
     errorElement: state.hasSearchError || state.hasSelectResultError ? errorElement : null,
     emptyResultsElement: state.items.length === 0 ? emptyResultsElement : null,
-    onInputChange: function (v) {
+    onInputChange: function onInputChange(v) {
       _onInputChange(v);
     },
-    onChange: function (v) {
+    onChange: function onChange(v) {
       onSelectItem(v, _onChange);
     },
     children: state.items.map(function (item) {
@@ -7335,7 +7264,7 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, props), {}, {
     inputMode: "numeric",
-    onChange: function (event) {
+    onChange: function handleChange(event) {
       if (!onChange) return;
       var value = parseFloat(event.nativeEvent.text);
 
@@ -7367,7 +7296,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
       testID: "kitt.InputPassword.passwordToggle",
       hitSlop: 20,
       accessibilityRole: "button",
-      onPress: function () {
+      onPress: function onPress() {
         return setIsVisible(function (prev) {
           return !prev;
         });
@@ -7402,7 +7331,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     enterKeyHint: currentEnterKeyHint,
     autoComplete: autoComplete,
     textContentType: "telephoneNumber",
-    onChange: function (event) {
+    onChange: function handleChange(event) {
       var number = parseNumber(event.nativeEvent.text);
 
       // When intl phone number is valid :
@@ -7595,14 +7524,14 @@ function Radio(_ref, ref) {
     focusable: checked && !disabled,
     flexDirection: "row",
     alignItems: "center",
-    onPress: function (event) {
+    onPress: function handlePress(event) {
       if (onFocus) onFocus();
       if (onChange) onChange(value, event);
       if (onBlur) onBlur();
     },
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -7721,11 +7650,11 @@ var useNativeAnimation$3 = function (_ref) {
     };
   });
   return {
-    onPressIn: function () {
+    onPressIn: function handlePressIn() {
       color.value = withSpring(1);
       pressed.value = 1;
     },
-    onPressOut: function () {
+    onPressOut: function handlePressOut() {
       color.value = withSpring(0);
       pressed.value = 0;
     },
@@ -7778,7 +7707,7 @@ function RadioButton(_ref) {
     flexShrink: createResponsiveStyleFromProp(stretch, 1, undefined),
     flexBasis: createResponsiveStyleFromProp(stretch, 0),
     disabled: disabled,
-    onPress: function (e) {
+    onPress: function handlePress(e) {
       if (onFocus) onFocus(e);
       if (onChange) onChange(value);
       if (onBlur) onBlur(e);
@@ -7787,7 +7716,7 @@ function RadioButton(_ref) {
     onPressOut: onPressOut,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -7906,7 +7835,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
       textAlignVertical: "top",
       minHeight: "kitt.forms.textArea.minHeight"
     }, props), {}, {
-      onChange: function (e) {
+      onChange: function handleOnChange(e) {
         if (!limit || e.nativeEvent.text.length <= limit) {
           var _props$onChange;
           (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e);
@@ -8069,10 +7998,10 @@ function Toggle(_ref) {
     children: [/*#__PURE__*/jsx(Pressable, {
       accessibilityRole: "togglebutton",
       disabled: isDisabled,
-      onPress: function () {
+      onPress: function handlePress() {
         onChange(!value);
       },
-      children: function (_ref2) {
+      children: function children(_ref2) {
         var isHovered = _ref2.isHovered,
           isPressed = _ref2.isPressed,
           isFocused = _ref2.isFocused;
@@ -8261,11 +8190,11 @@ function FullscreenModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function () {
+    onShow: function onShow() {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function () {
+    onDismiss: function onDismiss() {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -8312,7 +8241,7 @@ function FullscreenModalBehaviour(_ref) {
     onClose: onClose,
     children: /*#__PURE__*/jsx(FullscreenModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
-      onExited: function () {
+      onExited: function handleExitAnimationDone() {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -8539,11 +8468,11 @@ var useNativeAnimation$2 = function (_ref) {
     };
   });
   return {
-    onPressIn: function () {
+    onPressIn: function handleHoverIn() {
       color.value = withTiming(1, withTimingConfig);
       translate.value = withTiming(2, withTimingConfig);
     },
-    onPressOut: function () {
+    onPressOut: function handleHoverOut() {
       color.value = withTiming(0, withTimingConfig);
       translate.value = withTiming(0, withTimingConfig);
     },
@@ -8635,13 +8564,13 @@ function Highlight(_ref) {
     });
   }
   return /*#__PURE__*/jsx(Pressable, {
-    onPress: function () {
+    onPress: function handlePress() {
       setIsExpanded(!isExpanded);
       setIsInitialRender(false);
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered;
       return /*#__PURE__*/jsxs(AnimatedContainer, {
         isHovered: isHovered,
@@ -8790,10 +8719,10 @@ function useNativeAnimation$1(_ref) {
   return {
     opacityStyles: opacityStyles,
     scaleStyles: scaleStyles,
-    onPressIn: function () {
+    onPressIn: function handlePressIn() {
       pressed.value = true;
     },
-    onPressOut: function () {
+    onPressOut: function handlePressOut() {
       pressed.value = false;
     }
   };
@@ -8872,7 +8801,7 @@ function IconButton(_ref) {
     onPress: onPress,
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -8935,7 +8864,8 @@ function InfoCard(_ref) {
     icon: /*#__PURE__*/jsx(CaretRightRegularIcon, {})
   }) : /*#__PURE__*/jsx(View$1, {
     children: /*#__PURE__*/jsx(Button, {
-      type: isContrastReversed ? 'subtle-revert' : 'subtle-dark',
+      type: "tertiary",
+      variant: isContrastReversed ? 'revert' : undefined,
       onPress: onPress,
       children: action === null || action === void 0 ? void 0 : action.label
     })
@@ -9201,7 +9131,7 @@ function MapMarker(_ref2) {
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
-    children: function (_ref3) {
+    children: function children(_ref3) {
       var isHovered = _ref3.isHovered;
       return /*#__PURE__*/jsx(StaticMapMarker$1, _objectSpread(_objectSpread({}, props), {}, {
         isHovered: isHovered
@@ -9477,14 +9407,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         button: {
-          "default": theme.button["default"],
-          dark: theme.button.dark,
           primary: theme.button.primary,
-          danger: theme.button.danger,
-          subtle: theme.button.subtle,
-          'subtle-revert': theme.button['subtle-revert'],
-          'subtle-dark': theme.button['subtle-dark'],
-          disabled: theme.button.disabled
+          secondary: theme.button.secondary,
+          tertiary: theme.button.tertiary,
+          'tertiary-danger': theme.button['tertiary-danger'],
+          focusBorderColor: theme.button.focusBorderColor
         },
         choices: {
           item: {
@@ -9913,7 +9840,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderColor: theme.iconButton.borderColor,
           disabled: {
-            borderColor: theme.iconButton.disabled.borderColor,
             backgroundColor: theme.iconButton.disabled.backgroundColor
           },
           black: {
@@ -10463,7 +10389,16 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           minWidth: theme.button.minWidth,
           maxWidth: theme.button.maxWidth,
-          minHeight: theme.button.minHeight
+          minHeight: theme.button.minHeight,
+          maxHeight: theme.button.maxHeight,
+          icon: {
+            "default": {
+              size: theme.button.icon["default"].size
+            },
+            medium: {
+              size: theme.button.icon.medium.size
+            }
+          }
         },
         buttonBadge: {
           dimensions: {
@@ -10856,7 +10791,10 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         button: {
-          padding: theme.button.padding
+          padding: {
+            "default": theme.button.padding["default"],
+            medium: theme.button.padding.medium
+          }
         },
         cardModal: {
           overlayPadding: theme.cardModal.overlayPadding
@@ -11804,19 +11742,19 @@ function NavigationModalBehaviour(_ref) {
     children: /*#__PURE__*/jsx(AnimationComponent, _objectSpread(_objectSpread({}, props), {}, {
       appear: shouldAppear,
       visible: visible,
-      onEnter: function () {
+      onEnter: function handleEnter() {
         if (onEnter) onEnter();
 
         // Once a children as been displayed, we force appear to false in order to avoid replaying animation on breakpoint change
         setShouldAppear(false);
       },
-      onExit: function () {
+      onExit: function handleExit() {
         if (onExit) onExit();
 
         // Reset appear value to its original value for future modal display
         setShouldAppear(appear);
       },
-      onExited: function () {
+      onExited: function handleExitAnimationDone() {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -12177,7 +12115,7 @@ function Picker(_ref) {
       isOpen: state.isOpen,
       selectedItem: state.currentValue,
       disabled: disabled,
-      onPress: function () {
+      onPress: function handlePressTrigger() {
         if (syncStateWithSourceValue) {
           dispatch({
             type: 'open-modal-with-value',
@@ -12231,7 +12169,7 @@ function Picker(_ref) {
               accessibilityState: {
                 selected: isSelected
               },
-              onPress: function () {
+              onPress: function onPress() {
                 handleInternalChange(item.props.value);
               },
               children: function (_ref2) {
@@ -12252,7 +12190,7 @@ function Picker(_ref) {
           children: /*#__PURE__*/jsx(Button, {
             stretch: true,
             type: "primary",
-            onPress: function () {
+            onPress: function handleChange() {
               if (onChange) onChange(state.internalValue);
               dispatch({
                 type: 'change-value'
@@ -12389,7 +12327,7 @@ function Skeleton(_ref) {
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     style: style,
-    onLayout: function (_ref2) {
+    onLayout: function onLayout(_ref2) {
       var nativeEvent = _ref2.nativeEvent;
       return setWidth(nativeEvent.layout.width);
     },
@@ -12611,7 +12549,7 @@ function StaticMap(_ref) {
     position: "relative",
     maxWidth: mapBoxMaxPictureWidth,
     height: height,
-    onLayout: function (event) {
+    onLayout: function handleParentLayout(event) {
       var nativeEvent = event.nativeEvent;
       var rangedMapWidth = getPictureWidth(nativeEvent.layout.width);
       setCurrentWidth(rangedMapWidth);
@@ -12623,11 +12561,11 @@ function StaticMap(_ref) {
       width: currentWidth,
       height: height,
       alt: alt,
-      onLoadEnd: function () {
+      onLoadEnd: function handleImageLoadEnd() {
         setIsLoading(false);
         if (onLoaded) onLoaded();
       },
-      onError: function () {
+      onError: function handleError() {
         setHasError(true);
         if (onError) onError();
       }
@@ -12652,7 +12590,7 @@ function StaticMap(_ref) {
       width: "100%",
       height: "100%",
       children: /*#__PURE__*/jsx(StaticMapError, {
-        onReload: function () {
+        onReload: function handleReload() {
           setHasError(false);
           setIsLoading(true);
           setCurrentMapKey(function (prev) {
@@ -12893,7 +12831,7 @@ function StoryContainer(_ref) {
 var StoryDecorator = makeDecorator({
   name: 'StoryDecorator',
   parameterName: 'storyDecorator',
-  wrapper: function (storyFn, context) {
+  wrapper: function wrapper(storyFn, context) {
     var story = storyFn(context);
     if (context.parameters.disableStoryContainer) {
       return story;
@@ -13078,7 +13016,7 @@ function TabBar(_ref) {
         return /*#__PURE__*/jsx(View, {
           children: /*#__PURE__*/cloneElement(child, {
             color: color,
-            onPress: function (event) {
+            onPress: function onPress(event) {
               var _child$props$onPress, _child$props;
               onChangeTab({
                 tab: tabs[index],
@@ -13227,7 +13165,7 @@ function ModalDateTimePicker(_ref) {
           stretch: true,
           testID: "timePicker.ModalDateTimePicker.submitButton",
           type: "primary",
-          onPress: function () {
+          onPress: function handleSubmit() {
             onChange(currentValue);
           },
           children: buttonContent
@@ -13274,7 +13212,7 @@ var TimePickerPressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     width: createResponsiveStyleFromProp(stretch, '100%', 'kitt.forms.timePicker.minWidth'),
     pointerEvents: "box-only",
     onPress: onPress,
-    children: function (_ref2) {
+    children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isFocused = _ref2.isFocused,
         isPressed = _ref2.isPressed;
@@ -13351,7 +13289,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isHoveredInternal: isHoveredInternal,
       isFocusedInternal: isFocusedInternal,
       isPressedInternal: isPressedInternal,
-      onPress: function () {
+      onPress: function handlePress() {
         setIsPickerVisible(true);
       }
     }), Platform.OS === 'android' && isPickerVisible ? /*#__PURE__*/jsx(DateTimePicker, {
@@ -13375,7 +13313,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       value: pickerValue,
       validateButtonLabel: validateButtonLabel,
       onChange: handleChange,
-      onClose: function () {
+      onClose: function handleClose() {
         setIsPickerVisible(false);
       }
     }) : null]
@@ -13738,7 +13676,7 @@ function Tooltip(_ref) {
       ref: reference,
       children: renderPressable({
         ref: getPressableRect,
-        onPress: function () {
+        onPress: function handlePress() {
           if (onToggle) onToggle(!!pressed.value);
           pressed.value = !pressed.value;
         },
@@ -13757,7 +13695,7 @@ function Tooltip(_ref) {
       left: customShiftData.left,
       right: customShiftData.right,
       zIndex: zIndex,
-      onLayout: function (_ref2) {
+      onLayout: function onLayout(_ref2) {
         var nativeEvent = _ref2.nativeEvent;
         return setFloatingWidth(nativeEvent.layout.width);
       },
@@ -13920,7 +13858,7 @@ function KittThemeProvider(_ref) {
 var KittThemeDecorator = makeDecorator({
   name: 'ThemeDecorator',
   parameterName: 'theme',
-  wrapper: function (storyFn, context, _ref2) {
+  wrapper: function wrapper(storyFn, context, _ref2) {
     var _parameters$isSSR;
     var _ref2$options = _ref2.options,
       options = _ref2$options === void 0 ? {} : _ref2$options,