@ornikar/kitt-universal 27.1.0 → 27.2.0

package/dist/index.es.web.js

@@ -560,20 +560,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
@@ -806,23 +799,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: {
@@ -830,6 +835,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']
+    }
   }
 };
 
@@ -1899,50 +1910,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 = {
@@ -2146,6 +2115,11 @@ var typography = {
           fontSize: 14,
           lineHeight: 20,
           allowedFontWeights: ['semibold']
+        },
+        'label-small': {
+          fontSize: 12,
+          lineHeight: 16,
+          allowedFontWeights: ['semibold']
         }
       }
     },
@@ -2847,22 +2821,6 @@ function getCurrentBackgroundColorForNativeBaseTheme(_ref) {
   return "".concat(baseKey, ".default");
 }
 
-function getCurrentScale$1(_ref) {
-  var hoverScaleValue = _ref.hoverScaleValue,
-    pressedScaleValue = _ref.pressedScaleValue,
-    isDisabled = _ref.isDisabled,
-    isHovered = _ref.isHovered,
-    isPressed = _ref.isPressed;
-  if (isDisabled) return 1;
-  if (isPressed) {
-    return pressedScaleValue;
-  }
-  if (isHovered) {
-    return hoverScaleValue;
-  }
-  return 1;
-}
-
 function AnimatedContainer$2(_ref) {
   var children = _ref.children,
     type = _ref.type,
@@ -2870,24 +2828,16 @@ function AnimatedContainer$2(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isStretch = _ref.isStretch,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    isIconOnly = _ref.isIconOnly,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size;
   var theme = useTheme();
-  var _theme$kitt$button = theme.kitt.button,
-    _theme$kitt$button$tr = _theme$kitt$button.transition,
+  var width = isIconOnly ? "kitt.button.height.".concat(size) : createResponsiveStyleFromProp(isStretch, '100%', 'auto');
+  var height = isIconOnly ? "kitt.button.height.".concat(size) : undefined;
+  var _theme$kitt$button$tr = theme.kitt.button.transition,
     duration = _theme$kitt$button$tr.duration,
-    timingFunction = _theme$kitt$button$tr.timingFunction,
-    scale = _theme$kitt$button.scale;
-  var responsiveHoverScaleValue = useBreakpointValue({
-    base: scale.base.hover,
-    medium: scale.medium.hover
-  });
-  var currentScale = getCurrentScale$1({
-    hoverScaleValue: responsiveHoverScaleValue,
-    pressedScaleValue: scale.base.active,
-    isHovered: isHovered,
-    isPressed: isPressed,
-    isDisabled: !!disabled
-  });
+    timingFunction = _theme$kitt$button$tr.timingFunction;
   var currentBackgroundColor = getCurrentBackgroundColorForNativeBaseTheme({
     type: type,
     variant: variant,
@@ -2900,13 +2850,11 @@ function AnimatedContainer$2(_ref) {
       style: {
         transitionProperty: 'all',
         transitionDuration: duration,
-        transitionTimingFunction: timingFunction,
-        /* Simplifies the animation to just the front of the object – avoid blurry scale */
-        backfaceVisibility: 'hidden',
-        transform: "scale(".concat(currentScale, ")")
+        transitionTimingFunction: timingFunction
       }
     },
-    width: createResponsiveStyleFromProp(isStretch, '100%', 'auto'),
+    width: width,
+    height: height,
     alignSelf: "baseline",
     borderRadius: "kitt.button.borderRadius",
     backgroundColor: currentBackgroundColor,
@@ -3196,7 +3144,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
@@ -3312,10 +3260,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
@@ -3393,16 +3367,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
   });
 }
@@ -3436,7 +3410,7 @@ function FocusBorder(_ref) {
   });
 }
 
-function useNativeAnimation$5() {
+function useNativeAnimation$4() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -3474,13 +3448,14 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onHoverOut = _ref.onHoverOut,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur;
-  var _useNativeAnimation = useNativeAnimation$5(),
+  var _useNativeAnimation = useNativeAnimation$4(),
     onPressIn = _useNativeAnimation.onPressIn,
     onPressOut = _useNativeAnimation.onPressOut,
     animatedStyles = _useNativeAnimation.animatedStyles;
   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,
@@ -3512,10 +3487,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,
@@ -4216,7 +4193,7 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
-function getBackgroundColor$6(_ref) {
+function getBackgroundColor$5(_ref) {
   var isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
@@ -4229,38 +4206,47 @@ function getBackgroundColor$6(_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;
+    isSelected = _ref.isSelected,
+    hasError = _ref.hasError;
   var theme = useTheme();
   return /*#__PURE__*/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: isDisabled,
+      hasError: hasError,
+      isSelected: isSelected
+    }),
+    backgroundColor: getBackgroundColor$5({
       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',
     _web: {
       style: {
         transitionProperty: theme.kitt.choices.item.transition.property,
@@ -4272,7 +4258,7 @@ function AnimatedChoiceItemView(_ref) {
   });
 }
 
-var useNativeAnimation$4 = function () {
+var useNativeAnimation$3 = function () {
   return {
     onPressIn: function onPressIn() {},
     onPressOut: function onPressOut() {},
@@ -4281,23 +4267,22 @@ var useNativeAnimation$4 = function () {
 };
 
 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,
@@ -4308,10 +4293,11 @@ function ChoiceItem(_ref) {
     size = _ref.size,
     style = _ref.style,
     testID = _ref.testID;
-  var _useNativeAnimation = useNativeAnimation$4(),
+  var _useNativeAnimation = useNativeAnimation$3(),
     onPressIn = _useNativeAnimation.onPressIn,
     onPressOut = _useNativeAnimation.onPressOut,
     backgroundStyles = _useNativeAnimation.backgroundStyles;
+  var Stack = orientation === 'horizontal' ? HStack : VStack;
   var handleChange = function () {
     if (!onChange) return;
 
@@ -4343,31 +4329,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]
       });
     }
@@ -4417,7 +4413,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,
@@ -4434,7 +4429,6 @@ function Choices(_ref2) {
   var sharedProps = {
     type: type,
     disabled: disabled,
-    variant: variant,
     onPress: !isForm ? onPress : undefined,
     onChange: isForm ? function handleChange(newValue) {
       setCurrentValue(newValue);
@@ -4913,7 +4907,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-function getBackgroundColor$5(_ref) {
+function getBackgroundColor$4(_ref) {
   var isSelected = _ref.isSelected,
     isHighlighted = _ref.isHighlighted,
     isPressed = _ref.isPressed,
@@ -4950,7 +4944,7 @@ function AutocompleteItem(_ref2) {
     minHeight: "kitt.forms.autocomplete.option.minHeight",
     borderRadius: "kitt.1",
     padding: "kitt.1",
-    backgroundColor: getBackgroundColor$5({
+    backgroundColor: getBackgroundColor$4({
       isSelected: isSelected,
       isHighlighted: isHighlighted,
       isPressed: isPressed,
@@ -5225,7 +5219,7 @@ var SvgCheckboxMarkinline = function SvgCheckboxMarkinline(props) {
   }));
 };
 
-function getBackgroundColor$4(_ref) {
+function getBackgroundColor$3(_ref) {
   var isDisabled = _ref.isDisabled,
     isPressed = _ref.isPressed,
     isHovered = _ref.isHovered,
@@ -5303,7 +5297,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
             isPressed: isPressed,
             isChecked: checked
           }),
-          backgroundColor: getBackgroundColor$4({
+          backgroundColor: getBackgroundColor$3({
             isDisabled: disabled,
             isFocused: isFocused,
             isHovered: isHovered,
@@ -6610,7 +6604,7 @@ function InnerCircle(_ref) {
   });
 }
 
-function getBackgroundColor$3(_ref) {
+function getBackgroundColor$2(_ref) {
   var isDisabled = _ref.isDisabled,
     isPressed = _ref.isPressed,
     isHovered = _ref.isHovered,
@@ -6653,7 +6647,7 @@ function OuterCircle(_ref) {
     width: "kitt.forms.radio.size",
     height: "kitt.forms.radio.size",
     borderRadius: "kitt.forms.radio.borderRadius",
-    backgroundColor: getBackgroundColor$3({
+    backgroundColor: getBackgroundColor$2({
       isChecked: isChecked,
       isDisabled: isDisabled,
       isFocused: isFocused,
@@ -6832,7 +6826,7 @@ function HoverBorder(_ref) {
   });
 }
 
-function useNativeAnimation$3() {
+function useNativeAnimation$2() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -6868,7 +6862,7 @@ function RadioButton(_ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur;
-  var _useNativeAnimation = useNativeAnimation$3(),
+  var _useNativeAnimation = useNativeAnimation$2(),
     onPressIn = _useNativeAnimation.onPressIn,
     onPressOut = _useNativeAnimation.onPressOut,
     animatedStyles = _useNativeAnimation.animatedStyles;
@@ -7548,7 +7542,7 @@ function AnimatedContent(_ref) {
   });
 }
 
-function useNativeAnimation$2() {
+function useNativeAnimation$1() {
   return {
     onPressIn: undefined,
     onPressOut: undefined,
@@ -7596,7 +7590,7 @@ function Highlight(_ref) {
       contentMarginY: 16
     }
   };
-  var _useNativeAnimation = useNativeAnimation$2(),
+  var _useNativeAnimation = useNativeAnimation$1(),
     containerAnimatedStyles = _useNativeAnimation.containerAnimatedStyles,
     caretAnimatedStyles = _useNativeAnimation.caretAnimatedStyles,
     contentAnimatedStyles = _useNativeAnimation.contentAnimatedStyles,
@@ -7695,229 +7689,53 @@ function Highlight(_ref) {
   });
 }
 
-var _excluded$h = ["color", "isDisabled"];
-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';
+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$h);
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
-    width: "100%",
-    height: "100%",
-    borderRadius: "kitt.iconButton.borderRadius",
-    backgroundColor: getBackgroundColor$2(color, isDisabled)
-  }));
-}
-
-function AnimatedBackground(_ref) {
-  var color = _ref.color,
-    isHovered = _ref.isHovered,
-    isPressed = _ref.isPressed,
-    isFocused = _ref.isFocused,
-    isDisabled = _ref.isDisabled;
-  var theme = useTheme();
-  var _theme$kitt$iconButto = theme.kitt.iconButton.transition,
-    duration = _theme$kitt$iconButto.duration,
-    timingFunction = _theme$kitt$iconButto.timingFunction;
-  return /*#__PURE__*/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(_ref) {
-  var children = _ref.children,
-    isHovered = _ref.isHovered,
-    isPressed = _ref.isPressed,
-    isDisabled = _ref.isDisabled;
-  var theme = useTheme();
-  var scale = theme.kitt.iconButton.scale;
-  var currentHoverScale = useBreakpointValue({
-    base: scale.base.hover,
-    medium: scale.medium.hover
-  });
-  var currentPressedScale = useBreakpointValue({
-    base: scale.base.active,
-    medium: scale.medium.active
-  });
-  var currentScale = getCurrentScale(Boolean(isHovered), currentHoverScale, Boolean(isPressed), currentPressedScale);
-  var _theme$kitt$iconButto = theme.kitt.iconButton.transition,
-    duration = _theme$kitt$iconButto.duration,
-    timingFunction = _theme$kitt$iconButto.timingFunction;
-  return /*#__PURE__*/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(".concat(isDisabled ? 1 : currentScale, ")")
-      }
-    },
-    children: children
-  });
-}
-
-function useNativeAnimation$1() {
-  return {
-    opacityStyles: undefined,
-    scaleStyles: undefined,
-    onPressIn: function onPressIn() {},
-    onPressOut: function onPressOut() {}
-  };
-}
-
-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$h = ["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(),
-    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$h);
+  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({
@@ -8577,11 +8395,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
@@ -8595,6 +8419,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: {
@@ -8998,39 +8828,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": {
@@ -9231,9 +9028,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         highlight: {
           borderRadius: theme.highlight.borderRadius
         },
-        iconButton: {
-          borderRadius: theme.iconButton.borderRadius
-        },
         tag: {
           borderRadius: theme.tag.borderRadius
         },
@@ -9357,14 +9151,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
@@ -9550,8 +9341,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
@@ -9879,7 +9672,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         iconButton: {
-          size: theme.iconButton.width - theme.iconButton.borderWidth,
           width: theme.iconButton.width,
           height: theme.iconButton.height
         },
@@ -10176,6 +9968,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"),
@@ -10198,6 +9991,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"),