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

package/dist/index-node-22.17.es.web.mjs

@@ -534,15 +534,18 @@ const bottomSheet = {
   }
 };
 
+// Strongly typed theme so every new type/variant/size can't be added
+// without defined color & backgroundColor or icon size
+
 const button = {
-  borderRadius: 30,
+  borderRadius: 4,
   borderWidth: {
-    disabled: 2,
     focus: 3
   },
   minHeight: 40,
   minWidth: 40,
   maxWidth: 335,
+  maxHeight: 48,
   scale: {
     base: {
       default: 1,
@@ -553,148 +556,160 @@ const 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
+      vertical: 8
     },
-    large: {
-      hasBadge: {
-        right: 12
-      },
-      horizontal: 24,
-      vertical: 11
-    },
-    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
+      }
     }
   }
 };
 
 const 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,
@@ -1891,14 +1906,13 @@ const 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']
@@ -2785,32 +2799,28 @@ function createResponsiveStyleFromProp(responsiveBooleanValue, valueIfTrue, valu
   return responsiveValue;
 }
 
-function warn(message) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(message);
-  }
-}
-function deprecatedMessage(symbol, deprecation, replaceBy) {
-  const replaceMessage = replaceBy === undefined ? '' : `, please use ${replaceBy} instead`;
-  warn(`[Deprecation] in ${symbol}: ${deprecation} is deprecated${replaceMessage}.`);
-}
-function deprecatedInComponent(component, deprecation, replaceBy) {
-  deprecatedMessage(`<${component} />`, deprecation, replaceBy);
-}
-
 function getCurrentBackgroundColorForNativeBaseTheme({
   type,
   variant,
   isDisabled,
   isHovered,
-  isPressed
+  isPressed,
+  isFocused
 }) {
-  if (isDisabled) return 'kitt.button.disabled.default.backgroundColor';
-  const baseKey = `kitt.button.${type}.${variant}`;
-  if (isHovered || isPressed) {
-    return `${baseKey}.hoverBackgroundColor`;
+  const baseKey = `kitt.button.${type}.${variant}.backgroundColor`;
+  if (isDisabled) {
+    return `${baseKey}.disabled`;
+  }
+  if (isHovered) {
+    return `${baseKey}.hover`;
+  }
+  if (isPressed) {
+    return `${baseKey}.pressed`;
+  }
+  if (isFocused) {
+    return `${baseKey}.focused`;
   }
-  return `${baseKey}.backgroundColor`;
+  return `${baseKey}.default`;
 }
 
 function getCurrentScale$1({
@@ -3048,7 +3058,6 @@ function Typography({
   },
   variant,
   color,
-  underline,
   ...otherProps
 }) {
   const sx = useSx();
@@ -3087,15 +3096,9 @@ function Typography({
     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
+    ...otherProps
   });
   const content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
     value: typographyFamily,
@@ -3147,13 +3150,15 @@ Typography.Header6 = createHeading(6);
 
 function ButtonBadge({
   withBadge,
-  badgeCount
+  badgeCount,
+  disabled
 }) {
+  const 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"
     });
   }
@@ -3163,7 +3168,7 @@ function ButtonBadge({
       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",
@@ -3258,103 +3263,77 @@ function TypographyIcon({
   });
 }
 
-const getButtonTextColorByType = (type, variant, isHovered, isPressed) => {
-  const 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';
+const getButtonTextColorByType = (type, variant, isHovered, isPressed, isDisabled) => {
+  const baseKey = `kitt.button.${type}.${variant}.color`;
+  if (isDisabled) {
+    return `${baseKey}.disabled`;
+  }
+  if (isHovered || isPressed) {
+    return `${baseKey}.hover`;
   }
+  return `${baseKey}.default`;
 };
 
-function ButtonIcon({
-  icon,
-  color,
-  iconPosition,
-  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({
   type,
   icon,
   iconPosition,
   innerSpacing,
+  isDisabled,
   withBadge,
   badgeCount,
   color,
-  children
+  children,
+  isPressed,
+  isHovered,
+  size = 'default'
 }) {
   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
     });
   }
-  const buttonIconSharedProps = {
-    type,
-    iconPosition,
-    color
-  };
-
   // Make the multilines case work properly on native - Breaks the web implem
   const 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, {
-      ...buttonIconSharedProps,
+    space: "kitt.2",
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(TypographyIcon, {
+      ...{
+        type,
+        color
+      },
       testID: "button.ButtonContent.leftButtonIcon",
-      icon: icon
+      icon: icon,
+      color: color,
+      size: `kitt.button.icon.${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, {
-      ...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.${size}.size`
+    }) : null, withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(ButtonBadge, {
+      disabled: isDisabled,
+      withBadge: withBadge,
+      badgeCount: badgeCount
     }) : null]
   });
 }
@@ -3368,9 +3347,10 @@ function ButtonContent({
   isPressed,
   isFocused,
   innerSpacing,
+  size,
   ...props
 }) {
-  const color = isDisabled ? 'black-light' : getButtonTextColorByType(type, variant, isHovered, isPressed);
+  const color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
       // Make the multilines case work properly on web
@@ -3385,56 +3365,33 @@ function ButtonContent({
       isDisabled: isDisabled,
       color: color,
       innerSpacing: innerSpacing,
+      isHovered: isHovered,
+      isPressed: isPressed,
+      size: size,
       ...props,
       children: children
     })
   });
 }
 
-function getCurrentPaddingConfig({
-  size
-}) {
-  if (size === 'large') return 'large';
-  if (size === 'xLarge') return 'xLarge';
-  return 'default';
-}
 function ButtonPadding({
   children,
   size,
   hasBadge
 }) {
-  const currentPaddingKey = getCurrentPaddingConfig({
-    size
-  });
   return /*#__PURE__*/jsx(View, {
     position: "relative",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    paddingX: `kitt.button.padding.${currentPaddingKey}.horizontal`,
-    paddingY: `kitt.button.padding.${currentPaddingKey}.vertical`,
-    paddingRight: hasBadge ? `kitt.button.padding.${currentPaddingKey}.hasBadge.right` : undefined,
+    paddingX: `kitt.button.padding.${size}.horizontal`,
+    paddingY: `kitt.button.padding.${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({
-  type,
-  variant,
   isFocused,
   isHovered,
   isPressed
@@ -3444,11 +3401,13 @@ function FocusBorder({
       button: buttonTheme
     }
   } = useTheme();
+  const outerBorderRadius = buttonTheme.borderRadius + buttonTheme.borderWidth.focus;
+  const innerBorderRadius = buttonTheme.borderRadius;
   return /*#__PURE__*/jsx(View, {
     _web: {
       style: {
-        width: `calc(100% + ${buttonTheme.borderWidth.focus * 2}px)`,
-        height: `calc(100% + ${buttonTheme.borderWidth.focus * 2}px)`,
+        width: `calc(100% + ${buttonTheme.borderRadius}px)`,
+        height: `calc(100% + ${buttonTheme.borderRadius}px)`,
         transitionProperty: 'opacity',
         transitionDuration: buttonTheme.transition.duration,
         transitionTimingFunction: buttonTheme.transition.timingFunction
@@ -3456,11 +3415,12 @@ function FocusBorder({
     },
     opacity: isFocused && !(isPressed || isHovered) ? 1 : 0,
     position: "absolute",
-    left: -buttonTheme.borderWidth.focus,
-    top: -buttonTheme.borderWidth.focus,
     borderWidth: "kitt.button.borderWidth.focus",
-    borderColor: `kitt.button.${type}.${variant}.focusBorderColor`,
-    borderRadius: "kitt.button.borderRadius"
+    borderColor: "kitt.button.focusBorderColor",
+    borderRadius: outerBorderRadius,
+    children: /*#__PURE__*/jsx(View, {
+      borderRadius: innerBorderRadius
+    })
   });
 }
 
@@ -3472,27 +3432,14 @@ function useNativeAnimation$5() {
   };
 }
 
-const getButtonSize = ({
-  large,
-  xLarge,
-  size
-}) => {
-  if (large) return 'large';
-  if (xLarge) return 'xLarge';
-  return size;
-};
-
-const allowedGhostTypes = ['primary', 'default', 'danger'];
 const Button = /*#__PURE__*/forwardRef(({
   children,
-  type = 'default',
+  type = 'secondary',
   variant = 'default',
   disabled,
   stretch,
-  large,
-  xLarge,
   icon,
-  size: sizeProp,
+  size = 'default',
   iconPosition = 'left',
   testID,
   href,
@@ -3515,18 +3462,9 @@ const Button = /*#__PURE__*/forwardRef(({
     onPressOut,
     animatedStyles
   } = useNativeAnimation$5();
-  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) {
-    const deprecatedProp = large ? 'large' : 'xLarge';
-    deprecatedInComponent('Button', `${deprecatedProp} prop`, 'size');
-  }
-  const size = getButtonSize({
-    large,
-    xLarge,
-    size: sizeProp
-  });
   return /*#__PURE__*/jsx(Pressable, {
     ref: ref,
     disabled: disabled,
@@ -3538,6 +3476,7 @@ const Button = /*#__PURE__*/forwardRef(({
     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,
@@ -3573,10 +3512,9 @@ const Button = /*#__PURE__*/forwardRef(({
           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
@@ -3718,7 +3656,7 @@ function Actions({
     flexGrow: 1,
     reversed: isReversed,
     ...props,
-    space: "kitt.3",
+    space: "kitt.2",
     children: children
   });
 }
@@ -7821,7 +7759,8 @@ function InfoCard({
     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?.label
     })
@@ -8441,14 +8380,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: {
@@ -8877,7 +8813,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         iconButton: {
           borderColor: theme.iconButton.borderColor,
           disabled: {
-            borderColor: theme.iconButton.disabled.borderColor,
             backgroundColor: theme.iconButton.disabled.backgroundColor
           },
           black: {
@@ -9431,7 +9366,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: {
@@ -9827,7 +9771,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