@ornikar/kitt-universal 27.1.0 → 27.2.0

package/dist/index.es.js

@@ -564,20 +564,13 @@ var 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
@@ -810,23 +803,35 @@ var 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: {
@@ -834,6 +839,12 @@ var choices = {
       duration: 300,
       timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
     }
+  },
+  description: {
+    color: {
+      "default": deepPurpleColorPalette['grey.5'],
+      error: deepPurpleColorPalette['red.6']
+    }
   }
 };
 
@@ -1903,50 +1914,8 @@ var icon = {
 };
 
 var 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
 };
 
 var listItem = {
@@ -2150,6 +2119,11 @@ var typography = {
           fontSize: 14,
           lineHeight: 20,
           allowedFontWeights: ['semibold']
+        },
+        'label-small': {
+          fontSize: 12,
+          lineHeight: 16,
+          allowedFontWeights: ['semibold']
         }
       }
     },
@@ -2858,6 +2832,9 @@ function AnimatedContainer$2(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     variant = _ref.variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    isIconOnly = _ref.isIconOnly,
     type = _ref.type;
   var currentBackgroundColor = getCurrentBackgroundColorForNativeBaseTheme({
     type: type,
@@ -2866,10 +2843,14 @@ function AnimatedContainer$2(_ref) {
     isHovered: isHovered,
     isPressed: isPressed
   });
+  var width = isIconOnly ? "kitt.button.height.".concat(size) : undefined;
+  var height = isIconOnly ? "kitt.button.height.".concat(size) : undefined;
   var sx = useSx();
   var styles = sx({
     borderRadius: 'kitt.button.borderRadius',
-    backgroundColor: currentBackgroundColor
+    backgroundColor: currentBackgroundColor,
+    width: width,
+    height: height
   });
   return /*#__PURE__*/jsx(Animated.View, {
     style: disabled ? [styles] : [styles, animatedStyles],
@@ -3159,7 +3140,7 @@ function ButtonBadge(_ref) {
       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
@@ -3275,10 +3256,36 @@ function ButtonContentChildren(_ref) {
       throw new Error('kitt(Button): You should provide at least a children or a icon');
     }
   }
+  var isMedium = size === 'medium';
   if (!children && icon) {
-    return /*#__PURE__*/jsx(TypographyIcon, {
-      icon: icon,
-      color: color
+    var getTopOffset = function () {
+      if (withBadge) {
+        return isMedium ? '-14px' : '-10px';
+      }
+      return isMedium ? '-20px' : '-16px';
+    };
+    var getRightOffset = function () {
+      if (withBadge) {
+        return isMedium ? '-28px' : '-20px';
+      }
+      return isMedium ? '-33px' : '-25px';
+    };
+    return /*#__PURE__*/jsxs(View, {
+      alignItems: "center",
+      justifyContent: "center",
+      children: [/*#__PURE__*/jsx(TypographyIcon, {
+        icon: icon,
+        color: color,
+        size: "kitt.button.icon.".concat(size, ".size")
+      }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
+        position: "absolute",
+        top: getTopOffset(),
+        right: getRightOffset(),
+        children: /*#__PURE__*/jsx(ButtonBadge, {
+          withBadge: withBadge,
+          badgeCount: badgeCount
+        })
+      }) : null]
     });
   }
   // Make the multilines case work properly on native - Breaks the web implem
@@ -3356,16 +3363,16 @@ function ButtonContent(_ref2) {
 
 function ButtonPadding(_ref) {
   var children = _ref.children,
-    size = _ref.size;
-    _ref.hasBadge;
+    size = _ref.size,
+    isIconOnly = _ref.isIconOnly;
   return /*#__PURE__*/jsx(View, {
     position: "relative",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    height: isIconOnly ? "kitt.button.height.".concat(size) : undefined,
     paddingX: "kitt.button.padding.".concat(size, ".horizontal"),
     paddingY: "kitt.button.padding.".concat(size, ".vertical"),
-    minHeight: "kitt.button.minHeight",
     children: children
   });
 }
@@ -3399,20 +3406,16 @@ function FocusBorder(_ref) {
   });
 }
 
-var useNativeAnimation$5 = function (_ref) {
+var useNativeAnimation$4 = function (_ref) {
   var type = _ref.type,
     variant = _ref.variant,
     isPressedInternal = _ref.isPressedInternal;
   var theme = useTheme();
   var pressed = useSharedValue(isPressedInternal ? 1 : 0);
   var color = useSharedValue(0);
-  var scale = theme.kitt.button.scale;
   var animatedStyles = useAnimatedStyle(function () {
     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 {
@@ -3458,7 +3461,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onHoverOut = _ref.onHoverOut,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur;
-  var _useNativeAnimation = useNativeAnimation$5({
+  var _useNativeAnimation = useNativeAnimation$4({
       type: type,
       variant: variant
     }),
@@ -3468,6 +3471,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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.');
   }
+  var isIconOnly = !_children && !!icon;
   return /*#__PURE__*/jsx(Pressable, {
     ref: ref,
     disabled: disabled,
@@ -3499,10 +3503,12 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
         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,
@@ -4339,7 +4345,7 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
-function getBackgroundColor$5(_ref) {
+function getBackgroundColor$4(_ref) {
   var isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
@@ -4352,39 +4358,48 @@ function getBackgroundColor$5(_ref) {
   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(_ref) {
+  var isDisabled = _ref.isDisabled,
+    hasError = _ref.hasError,
+    isSelected = _ref.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(_ref) {
   var children = _ref.children,
-    variant = _ref.variant,
     size = _ref.size,
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    hasError = _ref.hasError,
     animatedStyles = _ref.animatedStyles;
   var sx = useSx();
   var 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: isDisabled,
+      hasError: hasError,
+      isSelected: isSelected
+    }),
+    backgroundColor: getBackgroundColor$4({
       isDisabled: isDisabled,
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: 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],
@@ -4392,7 +4407,7 @@ function AnimatedChoiceItemView(_ref) {
   });
 }
 
-var useNativeAnimation$4 = function (_ref) {
+var useNativeAnimation$3 = function (_ref) {
   var selected = _ref.selected,
     disabled = _ref.disabled,
     isPressedInternal = _ref.isPressedInternal;
@@ -4431,23 +4446,22 @@ var useNativeAnimation$4 = function (_ref) {
 };
 
 function getCurrentTextColor$1(_ref) {
-  var isDisabled = _ref.isDisabled,
-    isSelected = _ref.isSelected,
-    isPressed = _ref.isPressed,
-    isHovered = _ref.isHovered;
-  if (isDisabled) return 'black-light';
-  if (isSelected && isHovered) return 'white';
-  if (isSelected || isPressed) return 'white';
-  return 'black';
+  var isDisabled = _ref.isDisabled;
+  if (isDisabled) return 'kitt.choices.item.disabled.color';
+  return 'kitt.choices.item.default.color';
 }
 
 function ChoiceItem(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+    icon = _ref.icon,
+    hasError = _ref.hasError,
+    description = _ref.description,
     value = _ref.value,
     selected = _ref.selected,
     disabled = _ref.disabled,
-    variant = _ref.variant,
     _children = _ref.children,
     isPressedInternal = _ref.isPressedInternal,
     isHoveredInternal = _ref.isHoveredInternal,
@@ -4458,7 +4472,7 @@ function ChoiceItem(_ref) {
     size = _ref.size,
     style = _ref.style,
     testID = _ref.testID;
-  var _useNativeAnimation = useNativeAnimation$4({
+  var _useNativeAnimation = useNativeAnimation$3({
       selected: selected,
       disabled: disabled,
       isPressedInternal: isPressedInternal
@@ -4466,6 +4480,7 @@ function ChoiceItem(_ref) {
     onPressIn = _useNativeAnimation.onPressIn,
     onPressOut = _useNativeAnimation.onPressOut,
     backgroundStyles = _useNativeAnimation.backgroundStyles;
+  var Stack = orientation === 'horizontal' ? HStack : VStack;
   var handleChange = function () {
     if (!onChange) return;
 
@@ -4497,31 +4512,41 @@ function ChoiceItem(_ref) {
     children: function children(_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed;
-      return /*#__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({
-            isDisabled: disabled,
-            isSelected: selected || isPressedInternal,
-            isPressed: 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"
+      var 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,
+          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]
       });
     }
@@ -4571,7 +4596,6 @@ function Choices(_ref2) {
     disabled = _ref2.disabled,
     children = _ref2.children,
     value = _ref2.value,
-    variant = _ref2.variant,
     onPress = _ref2.onPress,
     onChange = _ref2.onChange,
     onFocus = _ref2.onFocus,
@@ -4588,7 +4612,6 @@ function Choices(_ref2) {
   var sharedProps = {
     type: type,
     disabled: disabled,
-    variant: variant,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? function handleChange(newValue) {
       setCurrentValue(newValue);
@@ -5187,7 +5210,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-function getBackgroundColor$4(_ref) {
+function getBackgroundColor$3(_ref) {
   var isSelected = _ref.isSelected,
     isHighlighted = _ref.isHighlighted,
     isPressed = _ref.isPressed,
@@ -5224,7 +5247,7 @@ function AutocompleteItem(_ref2) {
     minHeight: "kitt.forms.autocomplete.option.minHeight",
     borderRadius: "kitt.1",
     padding: "kitt.1",
-    backgroundColor: getBackgroundColor$4({
+    backgroundColor: getBackgroundColor$3({
       isSelected: isSelected,
       isHighlighted: isHighlighted,
       isPressed: isPressed,
@@ -5513,7 +5536,7 @@ var SvgCheckboxMarkinline = function SvgCheckboxMarkinline(props) {
   }));
 };
 
-function getBackgroundColor$3(_ref) {
+function getBackgroundColor$2(_ref) {
   var isDisabled = _ref.isDisabled,
     isPressed = _ref.isPressed,
     isHovered = _ref.isHovered,
@@ -5591,7 +5614,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
             isPressed: isPressed,
             isChecked: checked
           }),
-          backgroundColor: getBackgroundColor$3({
+          backgroundColor: getBackgroundColor$2({
             isDisabled: disabled,
             isFocused: isFocused,
             isHovered: isHovered,
@@ -7436,7 +7459,7 @@ function InnerCircle(_ref) {
   });
 }
 
-function getBackgroundColor$2(_ref) {
+function getBackgroundColor$1(_ref) {
   var isDisabled = _ref.isDisabled,
     isPressed = _ref.isPressed,
     isHovered = _ref.isHovered,
@@ -7479,7 +7502,7 @@ function OuterCircle(_ref) {
     width: "kitt.forms.radio.size",
     height: "kitt.forms.radio.size",
     borderRadius: "kitt.forms.radio.borderRadius",
-    backgroundColor: getBackgroundColor$2({
+    backgroundColor: getBackgroundColor$1({
       isChecked: isChecked,
       isDisabled: isDisabled,
       isFocused: isFocused,
@@ -7618,7 +7641,7 @@ function HoverBorder(_ref) {
   });
 }
 
-var useNativeAnimation$3 = function (_ref) {
+var useNativeAnimation$2 = function (_ref) {
   var isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     isPressedInternal = _ref.isPressedInternal;
@@ -7690,7 +7713,7 @@ function RadioButton(_ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur;
-  var _useNativeAnimation = useNativeAnimation$3({
+  var _useNativeAnimation = useNativeAnimation$2({
       isDisabled: disabled,
       isSelected: selected,
       isPressedInternal: isPressedInternal
@@ -8432,7 +8455,7 @@ var withTimingConfig = {
   duration: 100,
   easing: Easing$1.ease
 };
-var useNativeAnimation$2 = function (_ref) {
+var useNativeAnimation$1 = function (_ref) {
   var variant = _ref.variant,
     isExpanded = _ref.isExpanded,
     isInitialRender = _ref.isInitialRender,
@@ -8520,7 +8543,7 @@ function Highlight(_ref) {
       contentMarginY: 16
     }
   };
-  var _useNativeAnimation = useNativeAnimation$2({
+  var _useNativeAnimation = useNativeAnimation$1({
       variant: variant,
       isExpanded: isExpanded,
       isInitialRender: isInitialRender,
@@ -8624,222 +8647,53 @@ function Highlight(_ref) {
   });
 }
 
-var _excluded$c = ["color", "isDisabled"];
-function getBackgroundColor$1(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';
+var getButtonTypeAndVariant = function (iconColor) {
+  switch (iconColor) {
     case 'black':
-    default:
-      return 'kitt.iconButton.black.pressed.backgroundColor';
-  }
-}
-function Background(_ref) {
-  var color = _ref.color,
-    isDisabled = _ref.isDisabled,
-    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(_ref) {
-  var color = _ref.color,
-    isDisabled = _ref.isDisabled,
-    opacityStyles = _ref.opacityStyles;
-  var sx = useSx();
-  var currentOpacityStyles = isDisabled ? {
-    opacity: 1
-  } : opacityStyles;
-  var 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(_ref) {
-  var isDisabled = _ref.isDisabled,
-    scaleStyles = _ref.scaleStyles,
-    children = _ref.children;
-  var sx = useSx();
-  var currentOpacityStyles = isDisabled ? {
-    transform: [{
-      scale: 1
-    }]
-  } : scaleStyles;
-  var 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(_ref) {
-  var isPressed = _ref.isPressed;
-  var theme = useTheme();
-  var pressed = useSharedValue(!!isPressed);
-  var opacityStyles = useAnimatedStyle(function () {
-    return {
-      opacity: withSpring(pressed.value ? 1 : 0)
-    };
-  });
-  var scaleStyles = useAnimatedStyle(function () {
-    return {
-      transform: [{
-        scale: withSpring(pressed.value ? theme.kitt.iconButton.scale.base.active : theme.kitt.iconButton.scale.base["default"])
-      }]
-    };
-  });
-  return {
-    opacityStyles: opacityStyles,
-    scaleStyles: scaleStyles,
-    onPressIn: function handlePressIn() {
-      pressed.value = true;
-    },
-    onPressOut: function handlePressOut() {
-      pressed.value = false;
-    }
-  };
-}
-
-var getIconButtonBackgroundColor = function (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;
-  }
-};
-
-var getIconButtonTextColorByColor = function (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'
+      };
   }
 };
 
+var _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) {
-  var icon = _ref.icon,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'black' : _ref$color,
-    disabled = _ref.disabled,
-    testID = _ref.testID,
-    ariaLabel = _ref.ariaLabel,
-    _ref$accessibilityRol = _ref.accessibilityRole,
-    accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
-    withBadge = _ref.withBadge,
-    badgeCount = _ref.badgeCount,
-    isHoveredInternal = _ref.isHoveredInternal,
-    isPressedInternal = _ref.isPressedInternal,
-    isFocusedInternal = _ref.isFocusedInternal,
-    onPress = _ref.onPress;
-  var _useNativeAnimation = useNativeAnimation$1({
-      isDisabled: disabled,
-      isPressed: isPressedInternal
-    }),
-    onPressIn = _useNativeAnimation.onPressIn,
-    onPressOut = _useNativeAnimation.onPressOut,
-    opacityStyles = _useNativeAnimation.opacityStyles,
-    scaleStyles = _useNativeAnimation.scaleStyles;
-  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: function children(_ref2) {
-      var isHovered = _ref2.isHovered,
-        isPressed = _ref2.isPressed,
-        isFocused = _ref2.isFocused;
-      var isCurrentHovered = isHovered || isHoveredInternal;
-      var 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]
-      });
-    }
-  });
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'black' : _ref$color;
+    _ref.ariaLabel;
+    var props = _objectWithoutProperties(_ref, _excluded$c);
+  var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
+    legacyColorToType = _getButtonTypeAndVari.type,
+    legacyColorToVariant = _getButtonTypeAndVari.variant;
+  return /*#__PURE__*/jsx(Button, _objectSpread({
+    variant: legacyColorToVariant,
+    type: legacyColorToType
+  }, props));
 }
 function CloseIconButton(props) {
   return /*#__PURE__*/jsx(IconButton, _objectSpread({
@@ -9416,11 +9270,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
@@ -9434,6 +9294,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: {
@@ -9837,39 +9703,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": {
@@ -10070,9 +9903,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         highlight: {
           borderRadius: theme.highlight.borderRadius
         },
-        iconButton: {
-          borderRadius: theme.iconButton.borderRadius
-        },
         tag: {
           borderRadius: theme.tag.borderRadius
         },
@@ -10196,14 +10026,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
@@ -10389,8 +10216,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
@@ -10718,7 +10547,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         iconButton: {
-          size: theme.iconButton.width - theme.iconButton.borderWidth,
           width: theme.iconButton.width,
           height: theme.iconButton.height
         },
@@ -11015,6 +10843,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       'body-xs': "".concat(theme.typography.types.bodies.configs['body-xs'].fontSize, "px"),
       'label-large': "".concat(theme.typography.types.labels.configs['label-large'].fontSize, "px"),
       'label-medium': "".concat(theme.typography.types.labels.configs['label-medium'].fontSize, "px"),
+      'label-small': "".concat(theme.typography.types.labels.configs['label-small'].fontSize, "px"),
       'content-caps-xxxl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xxxl'].fontSize, "px"),
       'content-caps-xxl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xxl'].fontSize, "px"),
       'content-caps-xl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xl'].fontSize, "px"),
@@ -11037,6 +10866,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       'body-xs': "".concat(theme.typography.types.bodies.configs['body-xs'].lineHeight, "px"),
       'label-large': "".concat(theme.typography.types.labels.configs['label-large'].lineHeight, "px"),
       'label-medium': "".concat(theme.typography.types.labels.configs['label-medium'].lineHeight, "px"),
+      'label-small': "".concat(theme.typography.types.labels.configs['label-small'].lineHeight, "px"),
       'content-caps-xxxl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xxxl'].lineHeight, "px"),
       'content-caps-xxl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xxl'].lineHeight, "px"),
       'content-caps-xl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xl'].lineHeight, "px"),