@ornikar/kitt-universal 27.1.0 → 27.2.0

package/dist/index-node-22.17.cjs.web.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']
         }
       }
     },
@@ -2830,23 +2804,6 @@ function getCurrentBackgroundColorForNativeBaseTheme({
   return `${baseKey}.default`;
 }
 
-function getCurrentScale$1({
-  hoverScaleValue,
-  pressedScaleValue,
-  isDisabled,
-  isHovered,
-  isPressed
-}) {
-  if (isDisabled) return 1;
-  if (isPressed) {
-    return pressedScaleValue;
-  }
-  if (isHovered) {
-    return hoverScaleValue;
-  }
-  return 1;
-}
-
 function AnimatedContainer$2({
   children,
   type,
@@ -2854,27 +2811,19 @@ function AnimatedContainer$2({
   isHovered,
   isPressed,
   isStretch,
-  disabled
+  disabled,
+  isIconOnly,
+  size = 'default'
 }) {
   const theme = useTheme();
+  const width = isIconOnly ? `kitt.button.height.${size}` : createResponsiveStyleFromProp(isStretch, '100%', 'auto');
+  const height = isIconOnly ? `kitt.button.height.${size}` : undefined;
   const {
     transition: {
       duration,
       timingFunction
-    },
-    scale
+    }
   } = theme.kitt.button;
-  const responsiveHoverScaleValue = useBreakpointValue({
-    base: scale.base.hover,
-    medium: scale.medium.hover
-  });
-  const currentScale = getCurrentScale$1({
-    hoverScaleValue: responsiveHoverScaleValue,
-    pressedScaleValue: scale.base.active,
-    isHovered,
-    isPressed,
-    isDisabled: !!disabled
-  });
   const currentBackgroundColor = getCurrentBackgroundColorForNativeBaseTheme({
     type,
     variant,
@@ -2887,13 +2836,11 @@ function AnimatedContainer$2({
       style: {
         transitionProperty: 'all',
         transitionDuration: duration,
-        transitionTimingFunction: timingFunction,
-        /* Simplifies the animation to just the front of the object – avoid blurry scale */
-        backfaceVisibility: 'hidden',
-        transform: `scale(${currentScale})`
+        transitionTimingFunction: timingFunction
       }
     },
-    width: createResponsiveStyleFromProp(isStretch, '100%', 'auto'),
+    width: width,
+    height: height,
     alignSelf: "baseline",
     borderRadius: "kitt.button.borderRadius",
     backgroundColor: currentBackgroundColor,
@@ -3178,7 +3125,7 @@ function ButtonBadge({
       backgroundColor: backgroundColor,
       borderRadius: "kitt.buttonBadge.borderRadius.badgeCount",
       children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-        base: "body-xs",
+        base: "content-caps-xs",
         variant: "bold",
         color: "white",
         children: (badgeCount || 0) > 5 ? '+5' : badgeCount
@@ -3300,10 +3247,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__*/jsxRuntime.jsx(TypographyIcon, {
-      icon: icon,
-      color: color
+    return /*#__PURE__*/jsxRuntime.jsxs(View, {
+      alignItems: "center",
+      justifyContent: "center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+        icon: icon,
+        color: color,
+        size: `kitt.button.icon.${size}.size`
+      }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(ButtonBadge, {
+          withBadge: withBadge,
+          badgeCount: badgeCount
+        })
+      }) : null]
     });
   }
   // Make the multilines case work properly on native - Breaks the web implem
@@ -3384,16 +3355,16 @@ function ButtonContent({
 function ButtonPadding({
   children,
   size,
-  hasBadge
+  isIconOnly
 }) {
   return /*#__PURE__*/jsxRuntime.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
   });
 }
@@ -3431,7 +3402,7 @@ function FocusBorder({
   });
 }
 
-function useNativeAnimation$5() {
+function useNativeAnimation$4() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -3468,10 +3439,11 @@ const Button = /*#__PURE__*/react.forwardRef(({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation$5();
+  } = useNativeAnimation$4();
   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__*/jsxRuntime.jsx(Pressable, {
     ref: ref,
     disabled: disabled,
@@ -3503,10 +3475,12 @@ const Button = /*#__PURE__*/react.forwardRef(({
       isPressed: isPressed || isPressedInternal,
       disabled: !!disabled,
       variant: variant,
+      size: size,
+      isIconOnly: isIconOnly,
       isStretch: stretch,
       children: /*#__PURE__*/jsxRuntime.jsxs(ButtonPadding, {
         size: size,
-        hasBadge: Boolean(withBadge || badgeCount && badgeCount > 0),
+        isIconOnly: isIconOnly,
         children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
           type: type,
           variant: variant,
@@ -4185,7 +4159,7 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
-function getBackgroundColor$6({
+function getBackgroundColor$5({
   isDisabled,
   isSelected,
   isHovered,
@@ -4199,39 +4173,49 @@ function getBackgroundColor$6({
   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
+  isSelected,
+  hasError
 }) {
   const theme = useTheme();
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     position: "relative",
-    borderRadius: getBorderRadius(variant),
-    backgroundColor: getBackgroundColor$6({
+    borderRadius: "kitt.choices.item.borderRadius",
+    borderWidth: "kitt.choices.item.default.borderWidth",
+    borderColor: getBorderColor$2({
+      isDisabled,
+      hasError,
+      isSelected
+    }),
+    backgroundColor: getBackgroundColor$5({
       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',
     _web: {
       style: {
         transitionProperty: theme.kitt.choices.item.transition.property,
@@ -4243,7 +4227,7 @@ function AnimatedChoiceItemView({
   });
 }
 
-const useNativeAnimation$4 = () => {
+const useNativeAnimation$3 = () => {
   return {
     onPressIn: () => {},
     onPressOut: () => {},
@@ -4252,23 +4236,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,
@@ -4284,7 +4266,8 @@ function ChoiceItem({
     onPressIn,
     onPressOut,
     backgroundStyles
-  } = useNativeAnimation$4();
+  } = useNativeAnimation$3();
+  const Stack = orientation === 'horizontal' ? HStack : VStack;
   const handleChange = () => {
     if (!onChange) return;
 
@@ -4316,33 +4299,45 @@ function ChoiceItem({
     children: ({
       isHovered,
       isPressed
-    }) => /*#__PURE__*/jsxRuntime.jsxs(AnimatedChoiceItemView, {
-      animatedStyles: backgroundStyles,
-      isHovered: isHovered || isHoveredInternal,
-      isDisabled: disabled,
-      isSelected: selected,
-      isPressed: isPressed || isPressedInternal,
-      variant: variant,
-      size: size,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Typography.SetDefaultColor, {
-        value: getCurrentTextColor$1({
+    }) => {
+      const textColor = getCurrentTextColor$1({
+        isDisabled: disabled
+      });
+      return /*#__PURE__*/jsxRuntime.jsxs(VStack, {
+        space: "kitt.2",
+        children: [/*#__PURE__*/jsxRuntime.jsxs(AnimatedChoiceItemView, {
+          animatedStyles: backgroundStyles,
+          isHovered: isHovered || isHoveredInternal,
           isDisabled: disabled,
-          isSelected: selected || isPressedInternal,
-          isPressed,
-          isHovered: isHovered || isHoveredInternal
-        }),
-        children: children
-      }), disabled ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(Stack, {
+            alignItems: "center",
+            space: "kitt.2",
+            children: [icon ? /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+              color: textColor,
+              icon: icon
+            }) : null, /*#__PURE__*/jsxRuntime.jsx(Typography.SetDefaultColor, {
+              value: textColor,
+              children: children
+            })]
+          }), disabled ? /*#__PURE__*/jsxRuntime.jsx(View, {
+            borderRadius: "kitt.choices.item.borderRadius",
+            position: "absolute",
+            top: "0",
+            right: "0",
+            left: "0",
+            bottom: "0"
+          }) : null]
+        }), description ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+          base: "body-s",
+          color: hasError ? 'kitt.choices.description.color.error' : 'kitt.choices.description.color.default',
+          children: description
+        }) : null]
+      });
+    }
   });
 }
 
@@ -4392,7 +4387,6 @@ function Choices({
   disabled,
   children,
   value,
-  variant,
   onPress,
   onChange,
   onFocus,
@@ -4407,7 +4401,6 @@ function Choices({
   const sharedProps = {
     type,
     disabled,
-    variant,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? newValue => {
       setCurrentValue(newValue);
@@ -4841,7 +4834,7 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-function getBackgroundColor$5({
+function getBackgroundColor$4({
   isSelected,
   isHighlighted,
   isPressed,
@@ -4880,7 +4873,7 @@ function AutocompleteItem({
     minHeight: "kitt.forms.autocomplete.option.minHeight",
     borderRadius: "kitt.1",
     padding: "kitt.1",
-    backgroundColor: getBackgroundColor$5({
+    backgroundColor: getBackgroundColor$4({
       isSelected,
       isHighlighted,
       isPressed,
@@ -5160,7 +5153,7 @@ const SvgCheckboxMarkinline = props => /*#__PURE__*/jsxRuntime.jsx("svg", {
   })
 });
 
-function getBackgroundColor$4({
+function getBackgroundColor$3({
   isDisabled,
   isPressed,
   isHovered,
@@ -5239,7 +5232,7 @@ const Checkbox = /*#__PURE__*/react.forwardRef(({
           isPressed,
           isChecked: checked
         }),
-        backgroundColor: getBackgroundColor$4({
+        backgroundColor: getBackgroundColor$3({
           isDisabled: disabled,
           isFocused,
           isHovered,
@@ -6429,7 +6422,7 @@ function InnerCircle({
   });
 }
 
-function getBackgroundColor$3({
+function getBackgroundColor$2({
   isDisabled,
   isPressed,
   isHovered,
@@ -6475,7 +6468,7 @@ function OuterCircle({
     width: "kitt.forms.radio.size",
     height: "kitt.forms.radio.size",
     borderRadius: "kitt.forms.radio.borderRadius",
-    backgroundColor: getBackgroundColor$3({
+    backgroundColor: getBackgroundColor$2({
       isChecked,
       isDisabled,
       isFocused,
@@ -6658,7 +6651,7 @@ function HoverBorder({
   });
 }
 
-function useNativeAnimation$3() {
+function useNativeAnimation$2() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -6700,7 +6693,7 @@ function RadioButton({
     onPressIn,
     onPressOut,
     animatedStyles
-  } = useNativeAnimation$3();
+  } = useNativeAnimation$2();
   return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
     accessibilityRole: "radiogroup",
     accessibilityState: {
@@ -7374,7 +7367,7 @@ function AnimatedContent({
   });
 }
 
-function useNativeAnimation$2() {
+function useNativeAnimation$1() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -7415,7 +7408,7 @@ function Highlight({
     contentAnimatedStyles,
     onPressIn,
     onPressOut
-  } = useNativeAnimation$2();
+  } = useNativeAnimation$1();
   const handleLayout = event => {
     const layoutHeight = event.nativeEvent.layout.height;
     const newContentHeight = layoutHeight + highlightStyle[size].contentMarginY;
@@ -7510,236 +7503,53 @@ function Highlight({
   });
 }
 
-function getBackgroundColor$2(color, isDisabled) {
-  if (isDisabled) {
-    return 'kitt.iconButton.disabled.backgroundColor';
-  }
-  switch (color) {
-    case 'primary':
-      return 'kitt.iconButton.primary.pressed.backgroundColor';
-    case 'primary-plain':
-      return 'kitt.iconButton.primary-plain.pressed.backgroundColor';
-    case 'ghost':
-      return 'kitt.iconButton.ghost.pressed.backgroundColor';
+const getButtonTypeAndVariant = iconColor => {
+  switch (iconColor) {
     case 'black':
-    default:
-      return 'kitt.iconButton.black.pressed.backgroundColor';
-  }
-}
-function Background({
-  color,
-  isDisabled,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    width: "100%",
-    height: "100%",
-    borderRadius: "kitt.iconButton.borderRadius",
-    backgroundColor: getBackgroundColor$2(color, isDisabled)
-  });
-}
-
-function AnimatedBackground({
-  color,
-  isHovered,
-  isPressed,
-  isFocused,
-  isDisabled
-}) {
-  const theme = useTheme();
-  const {
-    duration,
-    timingFunction
-  } = theme.kitt.iconButton.transition;
-  return /*#__PURE__*/jsxRuntime.jsx(Background, {
-    position: "absolute",
-    top: "0",
-    left: "0",
-    opacity: isHovered || isPressed || isFocused || isDisabled ? 1 : 0,
-    color: color,
-    isDisabled: isDisabled,
-    _web: {
-      style: {
-        transitionProperty: 'all',
-        transitionDuration: duration,
-        transitionTimingFunction: timingFunction
-      }
-    }
-  });
-}
-
-function getCurrentScale(isHovered, scaleHover, isPressed, scalePressed) {
-  if (isPressed) {
-    return scalePressed;
-  }
-  if (isHovered) {
-    return scaleHover;
-  }
-  return 1;
-}
-function AnimatedScale({
-  children,
-  isHovered,
-  isPressed,
-  isDisabled
-}) {
-  const theme = useTheme();
-  const {
-    scale
-  } = theme.kitt.iconButton;
-  const currentHoverScale = useBreakpointValue({
-    base: scale.base.hover,
-    medium: scale.medium.hover
-  });
-  const currentPressedScale = useBreakpointValue({
-    base: scale.base.active,
-    medium: scale.medium.active
-  });
-  const currentScale = getCurrentScale(Boolean(isHovered), currentHoverScale, Boolean(isPressed), currentPressedScale);
-  const {
-    duration,
-    timingFunction
-  } = theme.kitt.iconButton.transition;
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    position: "relative",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    _web: {
-      style: {
-        transitionProperty: 'transform',
-        transitionDuration: duration,
-        transitionTimingFunction: timingFunction,
-        /* Simplifies the animation to just the front of the object – avoid blurry scale */
-        backfaceVisibility: 'hidden',
-        transform: `scale(${isDisabled ? 1 : currentScale})`
-      }
-    },
-    children: children
-  });
-}
-
-function useNativeAnimation$1() {
-  return {
-    opacityStyles: undefined,
-    scaleStyles: undefined,
-    onPressIn: () => {},
-    onPressOut: () => {}
-  };
-}
-
-const getIconButtonBackgroundColor = (color, disabled) => {
-  if (disabled) {
-    return undefined;
-  }
-  switch (color) {
-    case 'primary-plain':
-      return 'kitt.iconButton.primary-plain.backgroundColor';
+      return {
+        type: 'tertiary'
+      };
     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';
+      return {
+        type: 'secondary'
+      };
+    case 'primary':
+      return {
+        type: 'primary'
+      };
     case 'primary-plain':
-      return 'white';
-    case 'secondary':
-      return 'black';
+      return {
+        type: 'primary'
+      };
+    case 'ghost':
+      return {
+        type: 'tertiary',
+        variant: 'revert'
+      };
     default:
-      return color;
+      return {
+        type: 'secondary'
+      };
   }
 };
 
+/**
+ * @deprecated IconButton should only be used as a navigation button
+ * Other use cases should use a <Button> component with an icon
+ */
 function IconButton({
-  icon,
   color = 'black',
-  disabled,
-  testID,
   ariaLabel,
-  accessibilityRole = 'button',
-  withBadge,
-  badgeCount,
-  isHoveredInternal,
-  isPressedInternal,
-  isFocusedInternal,
-  onPress
+  ...props
 }) {
   const {
-    onPressIn,
-    onPressOut,
-    opacityStyles,
-    scaleStyles
-  } = useNativeAnimation$1();
-  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsxs(AnimatedScale, {
-          isDisabled: disabled,
-          isHovered: isCurrentHovered,
-          isPressed: isCurrentPressed,
-          scaleStyles: scaleStyles,
-          children: [/*#__PURE__*/jsxRuntime.jsx(AnimatedBackground, {
-            color: color,
-            isDisabled: disabled,
-            isHovered: isCurrentHovered,
-            isPressed: isCurrentPressed,
-            isFocused: isFocused || isFocusedInternal,
-            opacityStyles: opacityStyles
-          }), /*#__PURE__*/jsxRuntime.jsx(View, {
-            alignItems: "center",
-            justifyContent: "center",
-            children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-              color: getIconButtonTextColorByColor(color, disabled),
-              icon: icon
-            })
-          })]
-        }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsxRuntime.jsx(View, {
-          position: "absolute",
-          top: withBadge ? '1px' : '-6px',
-          right: withBadge ? '1px' : '-6px',
-          children: /*#__PURE__*/jsxRuntime.jsx(ButtonBadge, {
-            withBadge: withBadge,
-            badgeCount: badgeCount
-          })
-        }) : null]
-      });
-    }
+    type: legacyColorToType,
+    variant: legacyColorToVariant
+  } = getButtonTypeAndVariant(color);
+  return /*#__PURE__*/jsxRuntime.jsx(Button, {
+    variant: legacyColorToVariant,
+    type: legacyColorToType,
+    ...props
   });
 }
 function CloseIconButton(props) {
@@ -8396,11 +8206,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
@@ -8414,6 +8230,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: {
@@ -8817,39 +8639,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: {
@@ -9051,9 +8840,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         highlight: {
           borderRadius: theme.highlight.borderRadius
         },
-        iconButton: {
-          borderRadius: theme.iconButton.borderRadius
-        },
         tag: {
           borderRadius: theme.tag.borderRadius
         },
@@ -9177,14 +8963,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
@@ -9373,8 +9156,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
@@ -9702,7 +9487,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         iconButton: {
-          size: theme.iconButton.width - theme.iconButton.borderWidth,
           width: theme.iconButton.width,
           height: theme.iconButton.height
         },
@@ -10004,6 +9788,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`,
@@ -10026,6 +9811,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`,