@ornikar/kitt-universal 27.1.0 → 27.2.0

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

@@ -549,20 +549,13 @@ const button = {
   borderWidth: {
     focus: 3
   },
-  minHeight: 40,
   minWidth: 40,
   maxWidth: 335,
-  maxHeight: 48,
-  scale: {
-    base: {
-      default: 1,
-      hover: 0.95,
-      active: 0.95
-    },
-    medium: {
-      hover: 1.05
-    }
+  height: {
+    default: 40,
+    medium: 48
   },
+  maxHeight: 48,
   icon: {
     medium: {
       size: 24
@@ -795,23 +788,35 @@ const choices = {
     column: 12
   },
   item: {
-    borderRadius: 10,
+    borderRadius: 4,
     padding: {
       base: 16,
       small: 24
     },
     backgroundColor: {
       default: deepPurpleColorPalette['beige.1'],
-      disabled: colors.disabled,
-      selected: colors.primary,
-      pressed: deepPurpleColorPalette['deepPurple.7'],
+      disabled: deepPurpleColorPalette['grey.1'],
+      selected: deepPurpleColorPalette['beige.3'],
+      pressed: deepPurpleColorPalette['beige.2'],
       hover: deepPurpleColorPalette['beige.2'],
-      hoverWhenSelected: deepPurpleColorPalette['deepPurple.7']
+      hoverWhenSelected: deepPurpleColorPalette['beige.3']
     },
-    disabled: {
-      border: {
-        width: 2,
-        color: deepPurpleColorPalette['beige.2']
+    color: {
+      default: deepPurpleColorPalette['grey.9'],
+      disabled: deepPurpleColorPalette['grey.3']
+    },
+    border: {
+      default: {
+        width: 1,
+        color: deepPurpleColorPalette['deepPurple.7']
+      },
+      disabled: {
+        width: 1,
+        color: deepPurpleColorPalette['grey.2']
+      },
+      error: {
+        width: 1,
+        color: deepPurpleColorPalette['red.6']
       }
     },
     transition: {
@@ -819,6 +824,12 @@ const choices = {
       duration: 300,
       timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
     }
+  },
+  description: {
+    color: {
+      default: deepPurpleColorPalette['grey.5'],
+      error: deepPurpleColorPalette['red.6']
+    }
   }
 };
 
@@ -1888,50 +1899,8 @@ const icon = {
 };
 
 const iconButton = {
-  backgroundColor: 'transparent',
-  width: 40,
-  height: 40,
-  borderRadius: 20,
-  borderWidth: 2,
-  borderColor: 'transparent',
-  transition: {
-    property: 'all',
-    duration: '200ms',
-    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
-  },
-  scale: {
-    base: {
-      default: 1,
-      hover: 0.95,
-      active: 0.95
-    },
-    medium: {
-      default: 1,
-      hover: 1.05,
-      active: 0.95
-    }
-  },
-  disabled: {
-    scale: 1,
-    backgroundColor: button.primary.default.backgroundColor.disabled
-  },
-  default: {
-    pressedBackgroundColor: button.primary.default.backgroundColor.disabled
-  },
-  ghost: {
-    pressedBackgroundColor: button.primary.default.backgroundColor.disabled
-  },
-  primary: {
-    pressedBackgroundColor: deepPurpleColorPalette['beige.1']
-  },
-  'primary-plain': {
-    pressedBackgroundColor: colors.primaryLight,
-    backgroundColor: colors.primary
-  },
-  secondary: {
-    pressedBackgroundColor: 'rgba(0, 0, 0, 0.05)',
-    backgroundColor: 'rgba(0, 0, 0, 0.1)'
-  }
+  width: button.height.medium,
+  height: button.height.medium
 };
 
 const listItem = {
@@ -2135,6 +2104,11 @@ const typography = {
           fontSize: 14,
           lineHeight: 20,
           allowedFontWeights: ['semibold']
+        },
+        'label-small': {
+          fontSize: 12,
+          lineHeight: 16,
+          allowedFontWeights: ['semibold']
         }
       }
     },
@@ -2839,6 +2813,8 @@ function AnimatedContainer$2({
   isHovered,
   isPressed,
   variant,
+  size = 'default',
+  isIconOnly,
   type
 }) {
   const currentBackgroundColor = getCurrentBackgroundColorForNativeBaseTheme({
@@ -2848,10 +2824,14 @@ function AnimatedContainer$2({
     isHovered,
     isPressed
   });
+  const width = isIconOnly ? `kitt.button.height.${size}` : undefined;
+  const height = isIconOnly ? `kitt.button.height.${size}` : undefined;
   const sx = useSx();
   const styles = sx({
     borderRadius: 'kitt.button.borderRadius',
-    backgroundColor: currentBackgroundColor
+    backgroundColor: currentBackgroundColor,
+    width,
+    height
   });
   return /*#__PURE__*/jsx(Animated.View, {
     style: disabled ? [styles] : [styles, animatedStyles],
@@ -3132,7 +3112,7 @@ function ButtonBadge({
       backgroundColor: backgroundColor,
       borderRadius: "kitt.buttonBadge.borderRadius.badgeCount",
       children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "body-xs",
+        base: "content-caps-xs",
         variant: "bold",
         color: "white",
         children: (badgeCount || 0) > 5 ? '+5' : badgeCount
@@ -3253,10 +3233,34 @@ function ButtonContentChildren({
       throw new Error('kitt(Button): You should provide at least a children or a icon');
     }
   }
+  const isMedium = size === 'medium';
   if (!children && icon) {
-    return /*#__PURE__*/jsx(TypographyIcon, {
-      icon: icon,
-      color: color
+    return /*#__PURE__*/jsxs(View, {
+      alignItems: "center",
+      justifyContent: "center",
+      children: [/*#__PURE__*/jsx(TypographyIcon, {
+        icon: icon,
+        color: color,
+        size: `kitt.button.icon.${size}.size`
+      }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
+        position: "absolute",
+        top: (() => {
+          if (withBadge) {
+            return isMedium ? '-14px' : '-10px';
+          }
+          return isMedium ? '-20px' : '-16px';
+        })(),
+        right: (() => {
+          if (withBadge) {
+            return isMedium ? '-28px' : '-20px';
+          }
+          return isMedium ? '-33px' : '-25px';
+        })(),
+        children: /*#__PURE__*/jsx(ButtonBadge, {
+          withBadge: withBadge,
+          badgeCount: badgeCount
+        })
+      }) : null]
     });
   }
   // Make the multilines case work properly on native - Breaks the web implem
@@ -3337,16 +3341,16 @@ function ButtonContent(_ref) {
 function ButtonPadding({
   children,
   size,
-  hasBadge
+  isIconOnly
 }) {
   return /*#__PURE__*/jsx(View, {
     position: "relative",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    height: isIconOnly ? `kitt.button.height.${size}` : undefined,
     paddingX: `kitt.button.padding.${size}.horizontal`,
     paddingY: `kitt.button.padding.${size}.vertical`,
-    minHeight: "kitt.button.minHeight",
     children: children
   });
 }
@@ -3384,7 +3388,7 @@ function FocusBorder({
   });
 }
 
-const useNativeAnimation$5 = ({
+const useNativeAnimation$4 = ({
   type,
   variant,
   isPressedInternal
@@ -3392,15 +3396,9 @@ const useNativeAnimation$5 = ({
   const theme = useTheme();
   const pressed = useSharedValue(isPressedInternal ? 1 : 0);
   const color = useSharedValue(0);
-  const {
-    scale
-  } = theme.kitt.button;
   const animatedStyles = useAnimatedStyle(() => {
     return {
-      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)
-      }]
+      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])
     };
   });
   return {
@@ -3445,13 +3443,14 @@ const Button = /*#__PURE__*/forwardRef(({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation$5({
+  } = useNativeAnimation$4({
     type: _type,
     variant: _variant
   });
   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.');
   }
+  const isIconOnly = !children && !!icon;
   return /*#__PURE__*/jsx(Pressable, {
     ref: ref,
     disabled: disabled,
@@ -3483,10 +3482,12 @@ const Button = /*#__PURE__*/forwardRef(({
       isPressed: isPressed || isPressedInternal,
       disabled: !!disabled,
       variant: _variant,
+      size: _size,
+      isIconOnly: isIconOnly,
       isStretch: stretch,
       children: /*#__PURE__*/jsxs(ButtonPadding, {
         size: _size,
-        hasBadge: Boolean(withBadge || badgeCount && badgeCount > 0),
+        isIconOnly: isIconOnly,
         children: [/*#__PURE__*/jsx(ButtonContent, {
           type: _type,
           variant: _variant,
@@ -4287,7 +4288,7 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
-function getBackgroundColor$5({
+function getBackgroundColor$4({
   isDisabled,
   isSelected,
   isHovered,
@@ -4301,40 +4302,50 @@ function getBackgroundColor$5({
   return 'kitt.choices.item.default.backgroundColor';
 }
 
-function getBorderRadius(variant) {
-  // The clean way to have the rounded effect would have been to know the children height since radius >= height * 0.5
-  // We don't control over the height of the rendered children we just go with a arbitrary really high value
-  return variant === 'rounded' ? Number.MAX_SAFE_INTEGER : 'kitt.choices.item.borderRadius';
+function getBorderColor$2({
+  isDisabled,
+  hasError,
+  isSelected
+}) {
+  if (isDisabled) {
+    return 'kitt.choices.item.disabled.borderColor';
+  }
+  if (hasError) {
+    return 'kitt.choices.item.error.borderColor';
+  }
+  if (isSelected) {
+    return 'kitt.choices.item.default.borderColor';
+  }
+  return 'transparent';
 }
 
 function AnimatedChoiceItemView({
   children,
-  variant,
   size,
   isHovered,
   isPressed,
   isDisabled,
   isSelected,
+  hasError,
   animatedStyles
 }) {
   const sx = useSx();
   const style = sx({
     position: 'relative',
-    borderRadius: getBorderRadius(variant),
-    backgroundColor: getBackgroundColor$5({
+    borderRadius: 'kitt.choices.item.borderRadius',
+    borderWidth: 'kitt.choices.item.default.borderWidth',
+    borderColor: getBorderColor$2({
+      isDisabled,
+      hasError,
+      isSelected
+    }),
+    backgroundColor: getBackgroundColor$4({
       isDisabled,
       isSelected,
       isHovered,
       isPressed
     }),
-    paddingX: size === 'small' ? 'kitt.4' : {
-      base: 'kitt.4',
-      small: 'kitt.6'
-    },
-    paddingY: size === 'small' ? 'kitt.2' : {
-      base: 'kitt.4',
-      small: 'kitt.6'
-    }
+    padding: size === 'small' ? 'kitt.2' : 'kitt.4'
   });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [style, animatedStyles],
@@ -4342,7 +4353,7 @@ function AnimatedChoiceItemView({
   });
 }
 
-const useNativeAnimation$4 = ({
+const useNativeAnimation$3 = ({
   selected,
   disabled,
   isPressedInternal
@@ -4383,23 +4394,21 @@ const useNativeAnimation$4 = ({
 };
 
 function getCurrentTextColor$1({
-  isDisabled,
-  isSelected,
-  isPressed,
-  isHovered
+  isDisabled
 }) {
-  if (isDisabled) return 'black-light';
-  if (isSelected && isHovered) return 'white';
-  if (isSelected || isPressed) return 'white';
-  return 'black';
+  if (isDisabled) return 'kitt.choices.item.disabled.color';
+  return 'kitt.choices.item.default.color';
 }
 
 function ChoiceItem({
   type = 'button',
+  orientation = 'horizontal',
+  icon,
+  hasError,
+  description,
   value,
   selected,
   disabled,
-  variant,
   children,
   isPressedInternal,
   isHoveredInternal,
@@ -4415,11 +4424,12 @@ function ChoiceItem({
     onPressIn,
     onPressOut,
     backgroundStyles
-  } = useNativeAnimation$4({
+  } = useNativeAnimation$3({
     selected,
     disabled,
     isPressedInternal
   });
+  const Stack = orientation === 'horizontal' ? HStack : VStack;
   const handleChange = () => {
     if (!onChange) return;
 
@@ -4451,33 +4461,45 @@ function ChoiceItem({
     children: ({
       isHovered,
       isPressed
-    }) => /*#__PURE__*/jsxs(AnimatedChoiceItemView, {
-      animatedStyles: backgroundStyles,
-      isHovered: isHovered || isHoveredInternal,
-      isDisabled: disabled,
-      isSelected: selected,
-      isPressed: isPressed || isPressedInternal,
-      variant: variant,
-      size: size,
-      children: [/*#__PURE__*/jsx(Typography.SetDefaultColor, {
-        value: getCurrentTextColor$1({
+    }) => {
+      const textColor = getCurrentTextColor$1({
+        isDisabled: disabled
+      });
+      return /*#__PURE__*/jsxs(VStack, {
+        space: "kitt.2",
+        children: [/*#__PURE__*/jsxs(AnimatedChoiceItemView, {
+          animatedStyles: backgroundStyles,
+          isHovered: isHovered || isHoveredInternal,
           isDisabled: disabled,
-          isSelected: selected || isPressedInternal,
-          isPressed,
-          isHovered: isHovered || isHoveredInternal
-        }),
-        children: children
-      }), disabled ? /*#__PURE__*/jsx(View, {
-        borderRadius: getBorderRadius(variant),
-        borderWidth: "kitt.choices.item.disabled.borderWidth",
-        borderColor: "kitt.choices.item.disabled.borderColor",
-        position: "absolute",
-        top: "0",
-        right: "0",
-        left: "0",
-        bottom: "0"
-      }) : null]
-    })
+          isSelected: selected,
+          isPressed: isPressed || isPressedInternal,
+          hasError: hasError,
+          size: size,
+          children: [/*#__PURE__*/jsxs(Stack, {
+            alignItems: "center",
+            space: "kitt.2",
+            children: [icon ? /*#__PURE__*/jsx(TypographyIcon, {
+              color: textColor,
+              icon: icon
+            }) : null, /*#__PURE__*/jsx(Typography.SetDefaultColor, {
+              value: textColor,
+              children: children
+            })]
+          }), disabled ? /*#__PURE__*/jsx(View, {
+            borderRadius: "kitt.choices.item.borderRadius",
+            position: "absolute",
+            top: "0",
+            right: "0",
+            left: "0",
+            bottom: "0"
+          }) : null]
+        }), description ? /*#__PURE__*/jsx(Typography.Text, {
+          base: "body-s",
+          color: hasError ? 'kitt.choices.description.color.error' : 'kitt.choices.description.color.default',
+          children: description
+        }) : null]
+      });
+    }
   });
 }
 
@@ -4526,7 +4548,6 @@ function Choices({
   disabled,
   children,
   value,
-  variant,
   onPress,
   onChange,
   onFocus,
@@ -4541,7 +4562,6 @@ function Choices({
   const sharedProps = {
     type,
     disabled,
-    variant,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? newValue => {
       setCurrentValue(newValue);
@@ -5070,7 +5090,7 @@ const InputText = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 
-function getBackgroundColor$4({
+function getBackgroundColor$3({
   isSelected,
   isHighlighted,
   isPressed,
@@ -5109,7 +5129,7 @@ function AutocompleteItem({
     minHeight: "kitt.forms.autocomplete.option.minHeight",
     borderRadius: "kitt.1",
     padding: "kitt.1",
-    backgroundColor: getBackgroundColor$4({
+    backgroundColor: getBackgroundColor$3({
       isSelected,
       isHighlighted,
       isPressed,
@@ -5405,7 +5425,7 @@ const SvgCheckboxMarkinline = props => /*#__PURE__*/jsx(Svg, _objectSpread(_obje
   })
 }));
 
-function getBackgroundColor$3({
+function getBackgroundColor$2({
   isDisabled,
   isPressed,
   isHovered,
@@ -5486,7 +5506,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
           isPressed,
           isChecked: checked
         }),
-        backgroundColor: getBackgroundColor$3({
+        backgroundColor: getBackgroundColor$2({
           isDisabled: disabled,
           isFocused,
           isHovered,
@@ -7184,7 +7204,7 @@ function InnerCircle({
   });
 }
 
-function getBackgroundColor$2({
+function getBackgroundColor$1({
   isDisabled,
   isPressed,
   isHovered,
@@ -7230,7 +7250,7 @@ function OuterCircle({
     width: "kitt.forms.radio.size",
     height: "kitt.forms.radio.size",
     borderRadius: "kitt.forms.radio.borderRadius",
-    backgroundColor: getBackgroundColor$2({
+    backgroundColor: getBackgroundColor$1({
       isChecked,
       isDisabled,
       isFocused,
@@ -7371,7 +7391,7 @@ function HoverBorder({
   });
 }
 
-const useNativeAnimation$3 = ({
+const useNativeAnimation$2 = ({
   isDisabled,
   isSelected,
   isPressedInternal
@@ -7452,7 +7472,7 @@ function RadioButton({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation$3({
+  } = useNativeAnimation$2({
     isDisabled: disabled,
     isSelected: selected,
     isPressedInternal
@@ -8190,7 +8210,7 @@ const withTimingConfig = {
   duration: 100,
   easing: Easing$1.ease
 };
-const useNativeAnimation$2 = ({
+const useNativeAnimation$1 = ({
   variant,
   isExpanded,
   isInitialRender,
@@ -8272,7 +8292,7 @@ function Highlight({
     contentAnimatedStyles,
     onPressIn,
     onPressOut
-  } = useNativeAnimation$2({
+  } = useNativeAnimation$1({
     variant,
     isExpanded,
     isInitialRender,
@@ -8372,228 +8392,55 @@ function Highlight({
   });
 }
 
-const _excluded$c = ["color", "isDisabled"];
-function getBackgroundColor$1(color, isDisabled) {
-  if (isDisabled) {
-    return 'kitt.iconButton.disabled.backgroundColor';
-  }
-  switch (color) {
+const getButtonTypeAndVariant = iconColor => {
+  switch (iconColor) {
+    case 'black':
+      return {
+        type: 'tertiary'
+      };
+    case 'secondary':
+      return {
+        type: 'secondary'
+      };
     case 'primary':
-      return 'kitt.iconButton.primary.pressed.backgroundColor';
+      return {
+        type: 'primary'
+      };
     case 'primary-plain':
-      return 'kitt.iconButton.primary-plain.pressed.backgroundColor';
+      return {
+        type: 'primary'
+      };
     case 'ghost':
-      return 'kitt.iconButton.ghost.pressed.backgroundColor';
-    case 'black':
+      return {
+        type: 'tertiary',
+        variant: 'revert'
+      };
     default:
-      return 'kitt.iconButton.black.pressed.backgroundColor';
+      return {
+        type: 'secondary'
+      };
   }
-}
-function Background(_ref) {
+};
+
+const _excluded$c = ["color", "ariaLabel"];
+/**
+ * @deprecated IconButton should only be used as a navigation button
+ * Other use cases should use a <Button> component with an icon
+ */
+function IconButton(_ref) {
   let {
-      color,
-      isDisabled
+      color = 'black',
+      ariaLabel
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$c);
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
-    width: "100%",
-    height: "100%",
-    borderRadius: "kitt.iconButton.borderRadius",
-    backgroundColor: getBackgroundColor$1(color, isDisabled)
-  }));
-}
-
-function AnimatedBackground({
-  color,
-  isDisabled,
-  opacityStyles
-}) {
-  const sx = useSx();
-  const currentOpacityStyles = isDisabled ? {
-    opacity: 1
-  } : opacityStyles;
-  const styles = sx({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%'
-  });
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: [styles, currentOpacityStyles],
-    children: /*#__PURE__*/jsx(Background, {
-      color: color,
-      isDisabled: isDisabled
-    })
-  });
-}
-
-function AnimatedScale({
-  isDisabled,
-  scaleStyles,
-  children
-}) {
-  const sx = useSx();
-  const currentOpacityStyles = isDisabled ? {
-    transform: [{
-      scale: 1
-    }]
-  } : scaleStyles;
-  const styles = sx({
-    position: 'relative',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%'
-  });
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: [styles, currentOpacityStyles],
-    children: children
-  });
-}
-
-function useNativeAnimation$1({
-  isPressed
-}) {
-  const theme = useTheme();
-  const pressed = useSharedValue(!!isPressed);
-  const opacityStyles = useAnimatedStyle(() => {
-    return {
-      opacity: withSpring(pressed.value ? 1 : 0)
-    };
-  });
-  const scaleStyles = useAnimatedStyle(() => {
-    return {
-      transform: [{
-        scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base.default)
-      }]
-    };
-  });
-  return {
-    opacityStyles,
-    scaleStyles,
-    onPressIn: () => {
-      pressed.value = true;
-    },
-    onPressOut: () => {
-      pressed.value = false;
-    }
-  };
-}
-
-const getIconButtonBackgroundColor = (color, disabled) => {
-  if (disabled) {
-    return undefined;
-  }
-  switch (color) {
-    case 'primary-plain':
-      return 'kitt.iconButton.primary-plain.backgroundColor';
-    case 'secondary':
-      return 'kitt.iconButton.secondary.backgroundColor';
-    default:
-      return undefined;
-  }
-};
-
-const getIconButtonTextColorByColor = (color, disabled) => {
-  if (disabled) {
-    return 'black-light';
-  }
-  switch (color) {
-    case 'ghost':
-      return 'white';
-    case 'primary-plain':
-      return 'white';
-    case 'secondary':
-      return 'black';
-    default:
-      return color;
-  }
-};
-
-function IconButton({
-  icon,
-  color = 'black',
-  disabled,
-  testID,
-  ariaLabel,
-  accessibilityRole = 'button',
-  withBadge,
-  badgeCount,
-  isHoveredInternal,
-  isPressedInternal,
-  isFocusedInternal,
-  onPress
-}) {
   const {
-    onPressIn,
-    onPressOut,
-    opacityStyles,
-    scaleStyles
-  } = useNativeAnimation$1({
-    isDisabled: disabled,
-    isPressed: isPressedInternal
-  });
-  return /*#__PURE__*/jsx(Pressable, {
-    testID: testID,
-    disabled: disabled,
-    width: "kitt.iconButton.width",
-    height: "kitt.iconButton.height",
-    "aria-label": ariaLabel,
-    accessibilityRole: accessibilityRole,
-    _web: {
-      style: {
-        backfaceVisibility: 'hidden',
-        transform: 'translate3d(0px)'
-      }
-    },
-    backgroundColor: getIconButtonBackgroundColor(color, disabled),
-    borderRadius: "kitt.iconButton.borderRadius",
-    borderColor: disabled ? 'kitt.iconButton.disabled.borderColor' : 'kitt.iconButton.borderColor',
-    borderWidth: disabled ? 'kitt.iconButton.borderWidth' : 0,
-    onPress: onPress,
-    onPressIn: onPressIn,
-    onPressOut: onPressOut,
-    children: ({
-      isHovered,
-      isPressed,
-      isFocused
-    }) => {
-      const isCurrentHovered = isHovered || isHoveredInternal;
-      const isCurrentPressed = isPressed || isPressedInternal;
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsxs(AnimatedScale, {
-          isDisabled: disabled,
-          isHovered: isCurrentHovered,
-          isPressed: isCurrentPressed,
-          scaleStyles: scaleStyles,
-          children: [/*#__PURE__*/jsx(AnimatedBackground, {
-            color: color,
-            isDisabled: disabled,
-            isHovered: isCurrentHovered,
-            isPressed: isCurrentPressed,
-            isFocused: isFocused || isFocusedInternal,
-            opacityStyles: opacityStyles
-          }), /*#__PURE__*/jsx(View, {
-            alignItems: "center",
-            justifyContent: "center",
-            children: /*#__PURE__*/jsx(TypographyIcon, {
-              color: getIconButtonTextColorByColor(color, disabled),
-              icon: icon
-            })
-          })]
-        }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
-          position: "absolute",
-          top: withBadge ? '1px' : '-6px',
-          right: withBadge ? '1px' : '-6px',
-          children: /*#__PURE__*/jsx(ButtonBadge, {
-            withBadge: withBadge,
-            badgeCount: badgeCount
-          })
-        }) : null]
-      });
-    }
-  });
+    type: legacyColorToType,
+    variant: legacyColorToVariant
+  } = getButtonTypeAndVariant(color);
+  return /*#__PURE__*/jsx(Button, _objectSpread({
+    variant: legacyColorToVariant,
+    type: legacyColorToType
+  }, props));
 }
 function CloseIconButton(props) {
   return /*#__PURE__*/jsx(IconButton, _objectSpread({
@@ -9165,11 +9012,17 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         choices: {
           item: {
             default: {
-              backgroundColor: theme.choices.item.backgroundColor.default
+              backgroundColor: theme.choices.item.backgroundColor.default,
+              borderColor: theme.choices.item.border.default.color,
+              color: theme.choices.item.color.default
             },
             disabled: {
               backgroundColor: theme.choices.item.backgroundColor.disabled,
-              borderColor: theme.choices.item.disabled.border.color
+              borderColor: theme.choices.item.border.disabled.color,
+              color: theme.choices.item.color.disabled
+            },
+            error: {
+              borderColor: theme.choices.item.border.error.color
             },
             selected: {
               backgroundColor: theme.choices.item.backgroundColor.selected
@@ -9183,6 +9036,12 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             hoverWhenSelected: {
               backgroundColor: theme.choices.item.backgroundColor.hoverWhenSelected
             }
+          },
+          description: {
+            color: {
+              default: theme.choices.description.color.default,
+              error: theme.choices.description.color.error
+            }
           }
         },
         tooltip: {
@@ -9586,39 +9445,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         buttonBadge: {
           backgroundColor: theme.buttonBadge.backgroundColor
         },
-        iconButton: {
-          borderColor: theme.iconButton.borderColor,
-          disabled: {
-            backgroundColor: theme.iconButton.disabled.backgroundColor
-          },
-          black: {
-            pressed: {
-              backgroundColor: theme.iconButton.default.pressedBackgroundColor
-            }
-          },
-          ghost: {
-            pressed: {
-              backgroundColor: theme.iconButton.ghost.pressedBackgroundColor
-            }
-          },
-          primary: {
-            pressed: {
-              backgroundColor: theme.iconButton.primary.pressedBackgroundColor
-            }
-          },
-          'primary-plain': {
-            pressed: {
-              backgroundColor: theme.iconButton['primary-plain'].pressedBackgroundColor
-            },
-            backgroundColor: theme.iconButton['primary-plain'].backgroundColor
-          },
-          secondary: {
-            pressed: {
-              backgroundColor: theme.iconButton.secondary.pressedBackgroundColor
-            },
-            backgroundColor: theme.iconButton.secondary.backgroundColor
-          }
-        },
         highlight: {
           regular: {
             default: {
@@ -9819,9 +9645,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         highlight: {
           borderRadius: theme.highlight.borderRadius
         },
-        iconButton: {
-          borderRadius: theme.iconButton.borderRadius
-        },
         tag: {
           borderRadius: theme.tag.borderRadius
         },
@@ -9945,14 +9768,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         },
         choices: {
           item: {
-            disabled: {
-              borderWidth: theme.choices.item.disabled.border.width
+            default: {
+              borderWidth: theme.choices.item.border.default.width
             }
           }
         },
-        iconButton: {
-          borderWidth: theme.iconButton.borderWidth
-        },
         forms: {
           input: {
             borderWidth: theme.forms.input.borderWidth
@@ -10138,8 +9958,10 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           minWidth: theme.button.minWidth,
           maxWidth: theme.button.maxWidth,
-          minHeight: theme.button.minHeight,
-          maxHeight: theme.button.maxHeight,
+          height: {
+            default: theme.button.height.default,
+            medium: theme.button.height.medium
+          },
           icon: {
             default: {
               size: theme.button.icon.default.size
@@ -10467,7 +10289,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         iconButton: {
-          size: theme.iconButton.width - theme.iconButton.borderWidth,
           width: theme.iconButton.width,
           height: theme.iconButton.height
         },
@@ -10764,6 +10585,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       'body-xs': `${theme.typography.types.bodies.configs['body-xs'].fontSize}px`,
       'label-large': `${theme.typography.types.labels.configs['label-large'].fontSize}px`,
       'label-medium': `${theme.typography.types.labels.configs['label-medium'].fontSize}px`,
+      'label-small': `${theme.typography.types.labels.configs['label-small'].fontSize}px`,
       'content-caps-xxxl': `${theme.typography.types.contentCaps.configs['content-caps-xxxl'].fontSize}px`,
       'content-caps-xxl': `${theme.typography.types.contentCaps.configs['content-caps-xxl'].fontSize}px`,
       'content-caps-xl': `${theme.typography.types.contentCaps.configs['content-caps-xl'].fontSize}px`,
@@ -10786,6 +10608,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       'body-xs': `${theme.typography.types.bodies.configs['body-xs'].lineHeight}px`,
       'label-large': `${theme.typography.types.labels.configs['label-large'].lineHeight}px`,
       'label-medium': `${theme.typography.types.labels.configs['label-medium'].lineHeight}px`,
+      'label-small': `${theme.typography.types.labels.configs['label-small'].lineHeight}px`,
       'content-caps-xxxl': `${theme.typography.types.contentCaps.configs['content-caps-xxxl'].lineHeight}px`,
       'content-caps-xxl': `${theme.typography.types.contentCaps.configs['content-caps-xxl'].lineHeight}px`,
       'content-caps-xl': `${theme.typography.types.contentCaps.configs['content-caps-xl'].lineHeight}px`,