@razorpay/blade 10.13.1 → 10.14.0

package/build/components/index.development.web.js

@@ -12958,13 +12958,16 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
       };
     }
   }
-  return _objectSpread$1N({
+  return _objectSpread$1N(_objectSpread$1N({
     color: textColor,
     fontFamily: themeFontFamily,
     fontSize: themeFontSize,
     fontWeight: themeFontWeight,
     fontStyle: fontStyle,
-    textDecorationLine: textDecorationLine,
+    textDecorationLine: textDecorationLine
+  }, textDecorationLine !== 'none' && {
+    textDecorationColor: textColor
+  }), {}, {
     lineHeight: themeLineHeight,
     textAlign: textAlign,
     margin: 0,
@@ -13853,7 +13856,8 @@ var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, opti
 
   // When one item is selected, we display that item's title in input
   if (selectedIndices.length === 1) {
-    return options[selectedIndices[0]].title;
+    var _options$selectedIndi;
+    return (_options$selectedIndi = options[selectedIndices[0]]) === null || _options$selectedIndi === void 0 ? void 0 : _options$selectedIndi.title;
   }
 
   // When more than one item is selected, we display the count of items
@@ -15711,7 +15715,7 @@ var getStringFromReactText = function getStringFromReactText(childReactText) {
   return String(childReactText);
 };
 
-var _excluded$C = ["children", "contrast", "fontWeight", "icon", "size", "variant", "testID"];
+var _excluded$C = ["children", "contrast", "fontWeight", "icon", "size", "variant", "color", "testID"];
 function ownKeys$1s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1s(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var isFeedbackVariant$1 = function isFeedbackVariant(variant) {
@@ -15721,19 +15725,20 @@ var isFeedbackVariant$1 = function isFeedbackVariant(variant) {
 var getColorProps$1 = function getColorProps(_ref) {
   var variant = _ref.variant,
     contrast = _ref.contrast;
+  var badgeVariant = variant === 'default' ? 'blue' : variant;
   var props = {
     iconColor: 'feedback.icon.neutral.lowContrast',
     textColor: 'feedback.text.neutral.lowContrast',
     backgroundColor: 'feedback.background.neutral.lowContrast'
   };
-  if (isFeedbackVariant$1(variant)) {
-    props.iconColor = "feedback.icon.".concat(variant, ".").concat(contrast, "Contrast");
-    props.textColor = "feedback.text.".concat(variant, ".").concat(contrast, "Contrast");
-    props.backgroundColor = "feedback.background.".concat(variant, ".").concat(contrast, "Contrast");
+  if (isFeedbackVariant$1(badgeVariant)) {
+    props.iconColor = "feedback.icon.".concat(badgeVariant, ".").concat(contrast, "Contrast");
+    props.textColor = "feedback.text.".concat(badgeVariant, ".").concat(contrast, "Contrast");
+    props.backgroundColor = "feedback.background.".concat(badgeVariant, ".").concat(contrast, "Contrast");
   } else {
-    props.iconColor = "badge.icon.".concat(variant, ".").concat(contrast, "Contrast");
-    props.textColor = "badge.text.".concat(variant, ".").concat(contrast, "Contrast");
-    props.backgroundColor = "badge.background.".concat(variant, ".").concat(contrast, "Contrast");
+    props.iconColor = "badge.icon.".concat(badgeVariant, ".").concat(contrast, "Contrast");
+    props.textColor = "badge.text.".concat(badgeVariant, ".").concat(contrast, "Contrast");
+    props.backgroundColor = "badge.background.".concat(badgeVariant, ".").concat(contrast, "Contrast");
   }
   return props;
 };
@@ -15748,6 +15753,7 @@ var _Badge = function _Badge(_ref2) {
     size = _ref2$size === void 0 ? 'medium' : _ref2$size,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'neutral' : _ref2$variant,
+    color = _ref2.color,
     testID = _ref2.testID,
     styledProps = _objectWithoutProperties$1(_ref2, _excluded$C);
   var childrenString = getStringFromReactText(children);
@@ -15759,8 +15765,9 @@ var _Badge = function _Badge(_ref2) {
       });
     }
   }
+  var badgeVariant = color !== null && color !== void 0 ? color : variant;
   var _getColorProps = getColorProps$1({
-      variant: variant,
+      variant: badgeVariant,
       contrast: contrast
     }),
     backgroundColor = _getColorProps.backgroundColor,
@@ -16368,20 +16375,24 @@ var StyledBaseButton = /*#__PURE__*/styled.button.withConfig({
     transitionTimingFunction: getIn(props.theme.motion, props.motionEasing),
     transitionDuration: castWebType(makeMotionTime(getIn(props.theme.motion, props.motionDuration))),
     position: 'relative',
-    '&:hover': {
-      backgroundColor: props.hoverBackgroundColor,
+    '&:hover': _objectSpread$1o({
+      backgroundColor: props.hoverBackgroundColor
+    }, props.variant !== 'tertiary' && {
       borderColor: props.hoverBorderColor
-    },
-    '&:active': {
-      backgroundColor: props.activeBackgroundColor,
+    }),
+    '&:active': _objectSpread$1o({
+      backgroundColor: props.activeBackgroundColor
+    }, props.variant !== 'tertiary' && {
       borderColor: props.activeBorderColor
-    },
-    '&:focus': {
-      backgroundColor: props.focusBackgroundColor,
-      borderColor: props.focusBorderColor,
-      boxShadow: "0px 0px 0px 4px ".concat(props.focusRingColor),
-      outline: 'none'
-    },
+    }),
+    '&:focus-visible': _objectSpread$1o(_objectSpread$1o({
+      backgroundColor: props.focusBackgroundColor
+    }, props.variant !== 'tertiary' && {
+      borderColor: props.focusBorderColor
+    }), {}, {
+      outline: "1px solid ".concat(props.theme.colors.surface.background.level1.lowContrast),
+      boxShadow: "0px 0px 0px 4px ".concat(props.focusRingColor)
+    }),
     '*': {
       transitionProperty: 'color, fill',
       transitionDuration: castWebType(makeMotionTime(getIn(props.theme.motion, props.motionDuration))),
@@ -16462,8 +16473,8 @@ var buttonIconOnlyPadding = {
   large: {
     top: 0,
     bottom: 0,
-    left: 4,
-    right: 4
+    left: 2,
+    right: 2
   }
 };
 var buttonSizeToIconSizeMap = {
@@ -16473,10 +16484,10 @@ var buttonSizeToIconSizeMap = {
   large: 'medium'
 };
 var buttonIconOnlySizeToIconSizeMap = {
-  xsmall: 'medium',
-  small: 'medium',
-  medium: 'large',
-  large: 'xlarge'
+  xsmall: 'small',
+  small: 'small',
+  medium: 'medium',
+  large: 'medium'
 };
 var buttonSizeToSpinnerSizeMap = {
   xsmall: 'medium',
@@ -16484,11 +16495,11 @@ var buttonSizeToSpinnerSizeMap = {
   medium: 'large',
   large: 'xlarge'
 };
-var textPadding = {
-  xsmall: 2,
-  small: 2,
-  medium: 3,
-  large: 3
+var buttonIconPadding = {
+  xsmall: 1,
+  small: 1,
+  medium: 2,
+  large: 2
 };
 
 var LIVEREGION_TIMEOUT_DELAY = 1000;
@@ -16631,20 +16642,20 @@ var SpinningBox = /*#__PURE__*/styled(BaseBox).withConfig({
   return css(["padding:1px;width:max-content;display:inline-flex;animation:", " ", " ", " infinite;"], rotate, makeMotionTime(getIn(theme.motion, motion.duration)), getIn(theme.motion, motion.easing));
 });
 
-var _excluded$B = ["label", "labelPosition", "accessibilityLabel", "contrast", "intent", "size", "testID"];
+var _excluded$B = ["label", "labelPosition", "accessibilityLabel", "contrast", "color", "size", "testID"];
 function ownKeys$1o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1o(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getColor = function getColor(_ref) {
   var contrast = _ref.contrast,
-    intent = _ref.intent,
+    color = _ref.color,
     theme = _ref.theme;
-  if (intent) {
-    return getIn(theme.colors, "feedback.".concat(intent, ".action.icon.primary.disabled.").concat(contrast, "Contrast"));
-  } else if (contrast == 'low') {
-    return getIn(theme.colors, 'brand.gray.700.lowContrast');
-  } else {
-    return getIn(theme.colors, 'brand.gray.700.highContrast');
+  if (contrast === 'high' || color && color === 'white') {
+    return getIn(theme.colors, 'static.white');
+  }
+  if (color && color !== 'default') {
+    return getIn(theme.colors, "feedback.".concat(color, ".action.icon.primary.disabled.lowContrast"));
   }
+  return getIn(theme.colors, 'brand.gray.700.lowContrast');
 };
 var BaseSpinner = function BaseSpinner(_ref2) {
   var label = _ref2.label,
@@ -16653,7 +16664,8 @@ var BaseSpinner = function BaseSpinner(_ref2) {
     accessibilityLabel = _ref2.accessibilityLabel,
     _ref2$contrast = _ref2.contrast,
     contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
-    intent = _ref2.intent,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? 'default' : _ref2$color,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'medium' : _ref2$size,
     testID = _ref2.testID,
@@ -16677,7 +16689,7 @@ var BaseSpinner = function BaseSpinner(_ref2) {
           dimensions: makeSize(dimensions[size]),
           color: getColor({
             contrast: contrast,
-            intent: intent,
+            color: color,
             theme: theme
           })
         })
@@ -16697,7 +16709,7 @@ var BaseSpinner = function BaseSpinner(_ref2) {
   }));
 };
 
-var _excluded$A = ["href", "target", "rel", "variant", "intent", "contrast", "size", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "onBlur", "onKeyDown", "type", "children", "testID", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "accessibilityProps", "onTouchEnd", "onTouchStart"];
+var _excluded$A = ["href", "target", "rel", "variant", "color", "size", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "onBlur", "onKeyDown", "type", "children", "testID", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "accessibilityProps", "onTouchEnd", "onTouchStart"];
 function ownKeys$1n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getRenderElement = function getRenderElement(href) {
@@ -16714,13 +16726,14 @@ var getColorToken$1 = function getColorToken(_ref) {
   var property = _ref.property,
     variant = _ref.variant,
     state = _ref.state,
-    contrast = _ref.contrast,
-    intent = _ref.intent;
-  if (intent && contrast) {
-    // TODO: Add support for secondary & tertiary variants for feedback buttons here when a use-case is identified
-    return "feedback.".concat(intent, ".action.").concat(property, ".primary.").concat(state, ".").concat(contrast, "Contrast");
+    color = _ref.color;
+  if (!color || color === 'default') {
+    return "action.".concat(property, ".").concat(variant, ".").concat(state);
+  }
+  if (color === 'white') {
+    return "white.action.".concat(property, ".").concat(variant, ".").concat(state);
   }
-  return "action.".concat(property, ".").concat(variant, ".").concat(state);
+  return "feedback.".concat(color, ".action.").concat(property, ".primary.").concat(state, ".").concat(variant === 'primary' ? 'high' : 'low', "Contrast");
 };
 var getProps$1 = function getProps(_ref2) {
   var buttonTypographyTokens = _ref2.buttonTypographyTokens,
@@ -16729,9 +16742,14 @@ var getProps$1 = function getProps(_ref2) {
     size = _ref2.size,
     theme = _ref2.theme,
     variant = _ref2.variant,
-    intent = _ref2.intent,
-    contrast = _ref2.contrast,
+    color = _ref2.color,
     hasIcon = _ref2.hasIcon;
+  if (variant === 'tertiary' && color !== 'default' && color !== 'white') {
+    throwBladeError({
+      moduleName: 'BaseButton',
+      message: "Tertiary variant can only be used with color: \"default\" or \"white\" but received \"".concat(color, "\"")
+    });
+  }
   var isIconOnly = hasIcon && (!children || (children === null || children === void 0 ? void 0 : children.trim().length) === 0);
   var props = {
     iconSize: isIconOnly ? buttonIconOnlySizeToIconSizeMap[size] : buttonSizeToIconSizeMap[size],
@@ -16739,19 +16757,17 @@ var getProps$1 = function getProps(_ref2) {
     fontSize: buttonTypographyTokens.fonts.size[size],
     lineHeight: buttonTypographyTokens.lineHeights[size],
     minHeight: makeSize(minHeight[size]),
-    iconPadding: hasIcon && children !== null && children !== void 0 && children.trim() ? "spacing.".concat(textPadding[size]) : undefined,
+    iconPadding: hasIcon && children !== null && children !== void 0 && children.trim() ? "spacing.".concat(buttonIconPadding[size]) : undefined,
     iconColor: getColorToken$1({
       property: 'icon',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'default'
     }),
     textColor: getColorToken$1({
       property: 'text',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'default'
     }),
     buttonPaddingTop: isIconOnly ? makeSpace(theme.spacing[buttonIconOnlyPadding[size].top]) : makeSpace(theme.spacing[buttonPadding[size].top]),
@@ -16762,57 +16778,49 @@ var getProps$1 = function getProps(_ref2) {
     defaultBackgroundColor: getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'default'
     })),
     defaultBorderColor: getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'default'
     })),
     hoverBackgroundColor: getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'hover'
     })),
     hoverBorderColor: getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'hover'
     })),
     activeBackgroundColor: getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'active'
     })),
     activeBorderColor: getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'active'
     })),
     focusBackgroundColor: getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'focus'
     })),
     focusBorderColor: getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'focus'
     })),
     focusRingColor: getIn(theme.colors, 'brand.primary.400'),
@@ -16825,29 +16833,25 @@ var getProps$1 = function getProps(_ref2) {
     var disabledBackgroundColor = getIn(theme.colors, getColorToken$1({
       property: 'background',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'disabled'
     }));
     var disabledBorderColor = getIn(theme.colors, getColorToken$1({
       property: 'border',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'disabled'
     }));
     props.iconColor = getColorToken$1({
       property: 'icon',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'disabled'
     });
     props.textColor = getColorToken$1({
       property: 'text',
       variant: variant,
-      contrast: contrast,
-      intent: intent,
+      color: color,
       state: 'disabled'
     });
     props.defaultBackgroundColor = disabledBackgroundColor;
@@ -16876,9 +16880,8 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
     rel = _ref4.rel,
     _ref4$variant = _ref4.variant,
     variant = _ref4$variant === void 0 ? 'primary' : _ref4$variant,
-    intent = _ref4.intent,
-    _ref4$contrast = _ref4.contrast,
-    contrast = _ref4$contrast === void 0 ? 'low' : _ref4$contrast,
+    _ref4$color = _ref4.color,
+    color = _ref4$color === void 0 ? 'default' : _ref4$color,
     _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? 'medium' : _ref4$size,
     Icon = _ref4.icon,
@@ -16932,8 +16935,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
       size: size,
       variant: variant,
       theme: theme,
-      intent: intent,
-      contrast: contrast,
+      color: color,
       hasIcon: Boolean(Icon)
     }),
     activeBorderColor = _getProps.activeBorderColor,
@@ -16978,6 +16980,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
     accessibilityProps: _objectSpread$1m({}, makeAccessible(_objectSpread$1m({
       role: isLink ? 'link' : 'button'
     }, accessibilityProps))),
+    variant: variant,
     isLoading: isLoading,
     disabled: disabled,
     activeBorderColor: activeBorderColor,
@@ -17026,8 +17029,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
       children: /*#__PURE__*/jsx(BaseSpinner, {
         accessibilityLabel: "Loading",
         size: spinnerSize,
-        intent: intent,
-        contrast: contrast
+        color: color
       })
     }) : null, /*#__PURE__*/jsxs(ButtonContent, {
       display: "flex",
@@ -17143,14 +17145,13 @@ var useInteraction = function useInteraction() {
   };
 };
 
-var _excluded$z = ["children", "icon", "iconPosition", "isDisabled", "onClick", "onKeyDown", "variant", "href", "target", "rel", "intent", "contrast", "accessibilityProps", "className", "style", "size", "testID", "hitSlop", "htmlTitle", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"],
+var _excluded$z = ["children", "icon", "iconPosition", "isDisabled", "onClick", "onKeyDown", "variant", "href", "target", "rel", "color", "accessibilityProps", "className", "style", "size", "testID", "hitSlop", "htmlTitle", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"],
   _excluded2 = ["currentInteraction", "setCurrentInteraction"];
 function ownKeys$1l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getColorToken = function getColorToken(_ref) {
   var variant = _ref.variant,
-    intent = _ref.intent,
-    contrast = _ref.contrast,
+    color = _ref.color,
     element = _ref.element,
     currentInteraction = _ref.currentInteraction,
     isDisabled = _ref.isDisabled,
@@ -17159,12 +17160,15 @@ var getColorToken = function getColorToken(_ref) {
   if (isDisabled && variant == 'button') {
     state = 'disabled';
   }
-  if (isVisited && variant == 'anchor' && !intent) {
-    // visited state is only valid for anchor variant without any intent
+  if (isVisited && variant == 'anchor') {
+    // visited state is only valid for anchor variant
     state = 'visited';
   }
-  if (intent && state !== 'visited') {
-    return "feedback.".concat(intent, ".action.").concat(element, ".link.").concat(state, ".").concat(contrast, "Contrast");
+  if (color && color !== 'default' && state !== 'visited') {
+    if (color !== 'white') {
+      return "feedback.".concat(color, ".action.").concat(element, ".link.").concat(state, ".lowContrast");
+    }
+    return "white.action.".concat(element, ".link.").concat(state);
   }
   return "action.".concat(element, ".link.").concat(state);
 };
@@ -17174,8 +17178,7 @@ var getProps = function getProps(_ref2) {
     currentInteraction = _ref2.currentInteraction,
     children = _ref2.children,
     isDisabled = _ref2.isDisabled,
-    intent = _ref2.intent,
-    contrast = _ref2.contrast,
+    color = _ref2.color,
     isVisited = _ref2.isVisited,
     target = _ref2.target,
     size = _ref2.size;
@@ -17199,8 +17202,7 @@ var getProps = function getProps(_ref2) {
     textDecorationLine: !isButton && currentInteraction !== 'default' ? 'underline' : 'none',
     iconColor: getColorToken({
       variant: variant,
-      intent: intent,
-      contrast: contrast,
+      color: color,
       element: 'icon',
       currentInteraction: currentInteraction,
       isDisabled: isDisabled,
@@ -17212,8 +17214,7 @@ var getProps = function getProps(_ref2) {
     iconPadding: children !== null && children !== void 0 && children.trim() ? 'spacing.2' : 'spacing.0',
     textColor: getColorToken({
       variant: variant,
-      intent: intent,
-      contrast: contrast,
+      color: color,
       element: 'text',
       currentInteraction: currentInteraction,
       isDisabled: isDisabled,
@@ -17244,9 +17245,8 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
     href = _ref3.href,
     target = _ref3.target,
     rel = _ref3.rel,
-    intent = _ref3.intent,
-    _ref3$contrast = _ref3.contrast,
-    contrast = _ref3$contrast === void 0 ? 'low' : _ref3$contrast,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? 'default' : _ref3$color,
     accessibilityProps = _ref3.accessibilityProps,
     className = _ref3.className,
     style = _ref3.style,
@@ -17289,8 +17289,7 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
       currentInteraction: currentInteraction,
       children: childrenString,
       isDisabled: isDisabled,
-      intent: intent,
-      contrast: contrast,
+      color: color,
       isVisited: isVisited,
       target: target,
       size: size
@@ -17312,8 +17311,8 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
     type = _getProps.type,
     lineHeight = _getProps.lineHeight;
   var handleOnClick = function handleOnClick(event) {
-    if (!isVisited && !intent && variant === 'anchor') {
-      // visited state is only valid for anchor variant without any intent
+    if (!isVisited && variant === 'anchor') {
+      // visited state is only valid for anchor variant
       setIsVisited(true);
     }
     if (onClick) {
@@ -17413,7 +17412,7 @@ var BaseLink = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__defaul
   componentId: 'BaseLink'
 });
 
-var _excluded$y = ["description", "title", "isDismissible", "onDismiss", "contrast", "isFullWidth", "intent", "actions", "testID"];
+var _excluded$y = ["description", "title", "isDismissible", "onDismiss", "contrast", "isFullWidth", "intent", "color", "actions", "testID"];
 function ownKeys$1k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1k(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var isReactNative$3 = getPlatformType() === 'react-native';
@@ -17439,6 +17438,7 @@ var Alert = function Alert(_ref) {
     isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'neutral' : _ref$intent,
+    color = _ref.color,
     actions = _ref.actions,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$y);
@@ -17523,8 +17523,8 @@ var Alert = function Alert(_ref) {
     children: /*#__PURE__*/jsx(BaseButton, {
       size: textSize,
       onClick: actions.primary.onClick,
-      intent: intent,
-      contrast: contrast,
+      color: color || intent,
+      variant: contrast === 'high' ? 'primary' : 'secondary',
       children: actions.primary.text
     })
   }) : null;
@@ -17548,8 +17548,7 @@ var Alert = function Alert(_ref) {
     display: isReactNative$3 ? castNativeType('flex') : castWebType('inline-flex'),
     children: /*#__PURE__*/jsx(BaseLink, _objectSpread$1j(_objectSpread$1j({
       size: textSize,
-      contrast: contrast,
-      intent: intent
+      color: contrast === 'high' ? 'white' : intent
     }, secondaryActionParams), {}, {
       children: actions.secondary.text
     }))
@@ -17902,7 +17901,7 @@ var CardBody = /*#__PURE__*/assignWithoutSideEffects(_CardBody, {
   componentId: ComponentIds$1.CardBody
 });
 
-var _excluded$v = ["children", "icon", "iconPosition", "isDisabled", "onClick", "variant", "href", "target", "rel", "accessibilityLabel", "size", "testID", "hitSlop", "htmlTitle", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
+var _excluded$v = ["children", "icon", "iconPosition", "isDisabled", "onClick", "variant", "color", "href", "target", "rel", "accessibilityLabel", "size", "testID", "hitSlop", "htmlTitle", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
 function ownKeys$1h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1h(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _Link = function _Link(_ref, ref) {
@@ -17915,6 +17914,8 @@ var _Link = function _Link(_ref, ref) {
     onClick = _ref.onClick,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'anchor' : _ref$variant,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
     href = _ref.href,
     target = _ref.target,
     rel = _ref.rel,
@@ -17955,6 +17956,7 @@ var _Link = function _Link(_ref, ref) {
       describedBy: rest['aria-describedby']
     },
     size: size,
+    color: color,
     testID: testID,
     hitSlop: hitSlop,
     htmlTitle: htmlTitle,
@@ -17973,7 +17975,7 @@ var Link = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.fo
   componentId: 'Link'
 });
 
-var _excluded$u = ["children", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "href", "target", "rel", "onClick", "size", "type", "variant", "accessibilityLabel", "testID", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
+var _excluded$u = ["children", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "href", "target", "rel", "onClick", "size", "type", "variant", "color", "accessibilityLabel", "testID", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"];
 function ownKeys$1g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1g(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _Button = function _Button( // While adding any prop here, make sure to handle it in DropdownButton as well
@@ -17998,6 +18000,8 @@ _ref, ref) {
     type = _ref$type === void 0 ? 'button' : _ref$type,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
     accessibilityLabel = _ref.accessibilityLabel,
     testID = _ref.testID,
     onBlur = _ref.onBlur,
@@ -18024,6 +18028,7 @@ _ref, ref) {
       describedBy: rest['aria-describedby']
     },
     iconPosition: iconPosition,
+    color: color,
     isDisabled: isDisabled,
     isFullWidth: isFullWidth,
     onClick: onClick,
@@ -18086,7 +18091,7 @@ var StyledCounter = /*#__PURE__*/styled(BaseBox).withConfig({
   });
 });
 
-var _excluded$t = ["value", "max", "intent", "variant", "contrast", "size", "testID"];
+var _excluded$t = ["value", "max", "intent", "variant", "color", "contrast", "size", "testID"];
 function ownKeys$1e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var isFeedbackVariant = function isFeedbackVariant(variant) {
@@ -18098,25 +18103,28 @@ var getColorProps = function getColorProps(_ref) {
     variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
     _ref$contrast = _ref.contrast,
     contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast;
+  var counterVariant = variant === 'default' ? 'blue' : variant;
   var props = {
     textColor: 'feedback.text.neutral.lowContrast',
     backgroundColor: 'feedback.background.neutral.lowContrast'
   };
-  if (isFeedbackVariant(variant)) {
-    props.textColor = "feedback.text.".concat(variant, ".").concat(contrast, "Contrast");
-    props.backgroundColor = "feedback.background.".concat(variant, ".").concat(contrast, "Contrast");
+  if (isFeedbackVariant(counterVariant)) {
+    props.textColor = "feedback.text.".concat(counterVariant, ".").concat(contrast, "Contrast");
+    props.backgroundColor = "feedback.background.".concat(counterVariant, ".").concat(contrast, "Contrast");
   } else {
-    props.textColor = "badge.text.".concat(variant, ".").concat(contrast, "Contrast");
-    props.backgroundColor = "badge.background.".concat(variant, ".").concat(contrast, "Contrast");
+    props.textColor = "badge.text.".concat(counterVariant, ".").concat(contrast, "Contrast");
+    props.backgroundColor = "badge.background.".concat(counterVariant, ".").concat(contrast, "Contrast");
   }
   return props;
 };
 var Counter = function Counter(_ref2) {
+  var _ref3;
   var value = _ref2.value,
     max = _ref2.max,
     intent = _ref2.intent,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'neutral' : _ref2$variant,
+    color = _ref2.color,
     _ref2$contrast = _ref2.contrast,
     contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
     _ref2$size = _ref2.size,
@@ -18130,7 +18138,7 @@ var Counter = function Counter(_ref2) {
   var _useTheme = useTheme(),
     platform = _useTheme.platform;
   var _getColorProps = getColorProps({
-      variant: intent !== null && intent !== void 0 ? intent : variant,
+      variant: (_ref3 = color !== null && color !== void 0 ? color : intent) !== null && _ref3 !== void 0 ? _ref3 : variant,
       contrast: contrast
     }),
     backgroundColor = _getColorProps.backgroundColor,
@@ -19733,14 +19741,14 @@ var chipColorTokens = {
   text: {
     unchecked: 'surface.text.subtle.lowContrast',
     disabled: 'surface.text.placeholder.lowContrast',
-    none: 'action.text.secondary.default',
+    "default": 'action.text.secondary.default',
     positive: 'feedback.text.positive.lowContrast',
     negative: 'feedback.text.negative.lowContrast'
   },
   icon: {
     unchecked: 'surface.text.subtle.lowContrast',
     disabled: 'surface.text.placeholder.lowContrast',
-    none: 'action.icon.secondary.default',
+    "default": 'action.icon.secondary.default',
     positive: 'feedback.icon.positive.lowContrast',
     negative: 'feedback.icon.negative.lowContrast'
   },
@@ -19750,7 +19758,7 @@ var chipColorTokens = {
       hover: 'brand.gray.a50.lowContrast',
       disabled: 'transparent'
     },
-    none: {
+    "default": {
       "default": 'brand.primary.300',
       hover: 'brand.primary.400',
       disabled: 'brand.gray.a50.lowContrast'
@@ -19771,7 +19779,7 @@ var chipColorTokens = {
       "default": 'brand.gray.400.lowContrast',
       disabled: 'brand.gray.400.lowContrast'
     },
-    none: {
+    "default": {
       "default": 'brand.primary.500',
       hover: 'brand.primary.500',
       disabled: 'brand.gray.a100.lowContrast'
@@ -19788,7 +19796,7 @@ var chipColorTokens = {
     }
   }
 };
-var getChipInputHoverTokens = function getChipInputHoverTokens(intent) {
+var getChipInputHoverTokens = function getChipInputHoverTokens(color) {
   return {
     "default": {
       background: {
@@ -19796,7 +19804,7 @@ var getChipInputHoverTokens = function getChipInputHoverTokens(intent) {
         unchecked: 'transparent'
       },
       border: {
-        checked: "colors.".concat(chipColorTokens.border[intent || 'none'].hover),
+        checked: "colors.".concat(chipColorTokens.border[color || 'default'].hover),
         unchecked: 'colors.brand.gray.500.lowContrast'
       }
     }
@@ -19878,7 +19886,7 @@ var StyledChipWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     borderColor = _ref.borderColor,
     isChecked = _ref.isChecked,
     isDisabled = _ref.isDisabled,
-    intent = _ref.intent;
+    color = _ref.color;
   var easing = getIn(theme, chipMotionTokens.easing);
   var duration = castWebType(makeMotionTime(getIn(theme, chipMotionTokens.duration)));
   return _objectSpread$12({
@@ -19886,7 +19894,7 @@ var StyledChipWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     borderColor: isChecked ? getIn(theme.colors, borderColor) : 'transparent'
   }, !isDisabled && {
     '&:hover': {
-      backgroundColor: getIn(theme.colors, chipColorTokens.background[isChecked && intent ? intent : 'unchecked'].hover),
+      backgroundColor: getIn(theme.colors, chipColorTokens.background[isChecked && color ? color : 'unchecked'].hover),
       transitionTimingFunction: easing,
       transitionDuration: duration
     }
@@ -19983,16 +19991,17 @@ var useRadio = function useRadio(_ref) {
   };
 };
 
-var _excluded$r = ["isDisabled", "value", "children", "icon", "intent", "testID"];
+var _excluded$r = ["isDisabled", "value", "children", "icon", "intent", "color", "testID"];
 function ownKeys$11(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$11(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$11(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _Chip = function _Chip(_ref, ref) {
-  var _groupProps$state, _groupProps$defaultVa;
+  var _groupProps$state, _groupProps$defaultVa, _ref2;
   var isDisabled = _ref.isDisabled,
     value = _ref.value,
     children = _ref.children,
     Icon = _ref.icon,
     intent = _ref.intent,
+    color = _ref.color,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$r);
   var _useTheme = useTheme(),
@@ -20025,9 +20034,12 @@ var _Chip = function _Chip(_ref, ref) {
   var useChip = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.selectionType) === 'single' ? useRadio : useCheckbox;
   var _size = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.size) || 'small';
   var _intent = intent !== null && intent !== void 0 ? intent : groupProps === null || groupProps === void 0 ? void 0 : groupProps.intent;
-  var handleChange = function handleChange(_ref2) {
-    var isChecked = _ref2.isChecked,
-      value = _ref2.value;
+  // If intent is proovided and it's not none, use intent otherwise use color
+  var _color = (_ref2 = color !== null && color !== void 0 ? color : groupProps === null || groupProps === void 0 ? void 0 : groupProps.color) !== null && _ref2 !== void 0 ? _ref2 : 'default';
+  var chipColor = _intent && _intent !== 'none' ? _intent : _color;
+  var handleChange = function handleChange(_ref3) {
+    var isChecked = _ref3.isChecked,
+      value = _ref3.value;
     if (isChecked) {
       var _groupProps$state2;
       groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state2 = groupProps.state) === null || _groupProps$state2 === void 0 ? void 0 : _groupProps$state2.addValue(value);
@@ -20067,8 +20079,8 @@ var _Chip = function _Chip(_ref, ref) {
     }
   }, [_isDisabled]);
   var textVariant = 'unchecked';
-  if (_isChecked && _intent) {
-    textVariant = _intent;
+  if (_isChecked && chipColor) {
+    textVariant = chipColor;
   }
   if (_isDisabled) {
     textVariant = 'disabled';
@@ -20077,8 +20089,8 @@ var _Chip = function _Chip(_ref, ref) {
   var chipIconColor = chipColorTokens.icon[textVariant];
   var intentVariant = 'unchecked';
   var stateVariant = _isDisabled ? 'disabled' : 'default';
-  if (_isChecked && _intent) {
-    intentVariant = _intent;
+  if (_isChecked && chipColor) {
+    intentVariant = chipColor;
   }
   var chipBackgroundColor = chipColorTokens.background[intentVariant][stateVariant];
   var chipBorderColor = chipColorTokens.border[intentVariant][stateVariant];
@@ -20108,7 +20120,7 @@ var _Chip = function _Chip(_ref, ref) {
           alignItems: "center",
           flexDirection: "row",
           children: [/*#__PURE__*/jsx(SelectorInput, {
-            hoverTokens: getChipInputHoverTokens(_intent),
+            hoverTokens: getChipInputHoverTokens(chipColor),
             isChecked: state.isChecked,
             isDisabled: _isDisabled,
             inputProps: inputProps,
@@ -20122,7 +20134,7 @@ var _Chip = function _Chip(_ref, ref) {
               borderColor: chipBorderColor,
               isChecked: _isChecked,
               isDisabled: _isDisabled,
-              intent: _intent,
+              color: chipColor,
               display: "flex",
               flexDirection: "row",
               justifyContent: "center",
@@ -20166,6 +20178,7 @@ var useChipGroup = function useChipGroup(_ref) {
     name = _ref.name,
     size = _ref.size,
     intent = _ref.intent,
+    color = _ref.color,
     selectionType = _ref.selectionType;
   var idBase = useId('chip-group');
   var labelId = "".concat(idBase, "-label");
@@ -20233,9 +20246,10 @@ var useChipGroup = function useChipGroup(_ref) {
       state: state,
       size: size,
       intent: intent,
+      color: color,
       selectionType: selectionType
     };
-  }, [isDisabled, name, state, size, intent, selectionType]);
+  }, [isDisabled, name, state, size, intent, color, selectionType]);
   return {
     state: state,
     contextValue: contextValue,
@@ -20245,7 +20259,7 @@ var useChipGroup = function useChipGroup(_ref) {
   };
 };
 
-var _excluded$q = ["accessibilityLabel", "children", "isDisabled", "name", "defaultValue", "onChange", "value", "size", "intent", "testID", "selectionType"];
+var _excluded$q = ["accessibilityLabel", "children", "isDisabled", "name", "defaultValue", "onChange", "value", "size", "intent", "color", "testID", "selectionType"];
 function ownKeys$10(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$10(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$10(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ChipGroup = function ChipGroup(_ref) {
@@ -20261,6 +20275,7 @@ var ChipGroup = function ChipGroup(_ref) {
     size = _ref$size === void 0 ? 'small' : _ref$size,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'none' : _ref$intent,
+    color = _ref.color,
     testID = _ref.testID,
     _ref$selectionType = _ref.selectionType,
     selectionType = _ref$selectionType === void 0 ? 'single' : _ref$selectionType,
@@ -20273,6 +20288,7 @@ var ChipGroup = function ChipGroup(_ref) {
       name: name,
       size: size,
       intent: intent,
+      color: color,
       selectionType: selectionType
     }),
     contextValue = _useChipGroup.contextValue,
@@ -22549,7 +22565,7 @@ var CharacterCounter = function CharacterCounter(_ref) {
   });
 };
 
-var _excluded$i = ["label", "labelPosition", "accessibilityLabel", "contrast", "size", "testID"];
+var _excluded$i = ["label", "labelPosition", "accessibilityLabel", "color", "contrast", "size", "testID"];
 function ownKeys$N(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Spinner = function Spinner(_ref) {
@@ -22557,6 +22573,8 @@ var Spinner = function Spinner(_ref) {
   var label = _ref.label,
     labelPosition = _ref.labelPosition,
     accessibilityLabel = _ref.accessibilityLabel,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$contrast = _ref.contrast,
     contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast,
     _ref$size = _ref.size,
@@ -22568,6 +22586,7 @@ var Spinner = function Spinner(_ref) {
     labelPosition: labelPosition,
     accessibilityLabel: (_ref2 = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label) !== null && _ref2 !== void 0 ? _ref2 : 'Loading',
     contrast: contrast,
+    color: color,
     size: size,
     testID: testID
   }, styledProps));
@@ -23995,7 +24014,7 @@ var useAutoComplete = function useAutoComplete(_ref) {
       setActiveIndex(firstItemOptionIndex);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [globalFilteredValues.length]);
+  }, [globalFilteredValues.length, options.length]);
 
   // When input is empty or its single select, we want all items to be shown in filter on open of dropdown
   React__default.useEffect(function () {