@razorpay/blade 3.7.1 → 4.0.0

package/build/components/index.web.js

@@ -2541,9 +2541,9 @@ var Symbol = _Symbol;
 var symbolProto = Symbol ? Symbol.prototype : undefined;
     symbolProto ? symbolProto.valueOf : undefined;
 
-function ownKeys$w(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 ownKeys$z(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$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var accessibilityValue = {
   valueMax: 'aria-valuemax',
@@ -2560,7 +2560,7 @@ var accessibilityState = {
 }; // TODO:
 // accessibilityViewIsModal
 
-var accessibilityMap = _objectSpread$w(_objectSpread$w(_objectSpread$w({}, accessibilityState), accessibilityValue), {}, {
+var accessibilityMap = _objectSpread$z(_objectSpread$z(_objectSpread$z({}, accessibilityState), accessibilityValue), {}, {
   activeDescendant: 'aria-activedescendant',
   atomic: 'aria-atomic',
   autoComplete: 'aria-autocomplete',
@@ -3469,9 +3469,9 @@ var fontFamily = {
   code: 'monospace'
 };
 
-function ownKeys$v(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 ownKeys$y(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$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var fontWeight = {
   regular: 400,
   bold: 700
@@ -3479,7 +3479,7 @@ var fontWeight = {
 ({
   onDesktop: {
     fonts: {
-      family: _objectSpread$v({}, fontFamily),
+      family: _objectSpread$y({}, fontFamily),
       size: {
         10: 9,
         25: 10,
@@ -3496,7 +3496,7 @@ var fontWeight = {
         900: 36,
         1000: 40
       },
-      weight: _objectSpread$v({}, fontWeight)
+      weight: _objectSpread$y({}, fontWeight)
     },
     lineHeights: {
       s: 16,
@@ -3513,7 +3513,7 @@ var fontWeight = {
   },
   onMobile: {
     fonts: {
-      family: _objectSpread$v({}, fontFamily),
+      family: _objectSpread$y({}, fontFamily),
       size: {
         10: 10,
         25: 11,
@@ -3530,7 +3530,7 @@ var fontWeight = {
         900: 29,
         1000: 29
       },
-      weight: _objectSpread$v({}, fontWeight)
+      weight: _objectSpread$y({}, fontWeight)
     },
     lineHeights: {
       s: 16,
@@ -3705,9 +3705,9 @@ var Rect = function Rect(_ref) {
   });
 };
 
-function ownKeys$u(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 ownKeys$x(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$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Svg = function Svg(_ref) {
   var children = _ref.children,
@@ -3715,7 +3715,7 @@ var Svg = function Svg(_ref) {
       viewBox = _ref.viewBox,
       width = _ref.width,
       fill = _ref.fill;
-  return /*#__PURE__*/jsx("svg", _objectSpread$u(_objectSpread$u({}, makeAccessible({
+  return /*#__PURE__*/jsx("svg", _objectSpread$x(_objectSpread$x({}, makeAccessible({
     hidden: true
   })), {}, {
     height: height,
@@ -3750,9 +3750,9 @@ var useTheme = function useTheme() {
   return themeContext;
 };
 
-function ownKeys$t(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 ownKeys$w(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$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var BladeProvider = function BladeProvider(_ref) {
   var themeTokens = _ref.themeTokens,
@@ -3779,9 +3779,9 @@ var BladeProvider = function BladeProvider(_ref) {
   var onColorMode = "on".concat(toTitleCase(colorScheme));
   var onDeviceType = "on".concat(toTitleCase(matchedDeviceType));
 
-  var theme = _objectSpread$t(_objectSpread$t({}, themeTokens), {}, {
+  var theme = _objectSpread$w(_objectSpread$w({}, themeTokens), {}, {
     colors: themeTokens.colors[onColorMode],
-    shadows: _objectSpread$t(_objectSpread$t({}, themeTokens.shadows), {}, {
+    shadows: _objectSpread$w(_objectSpread$w({}, themeTokens.shadows), {}, {
       color: themeTokens.shadows.color[onColorMode]
     }),
     typography: themeTokens.typography[onDeviceType]
@@ -3802,7 +3802,7 @@ var BladeProvider = function BladeProvider(_ref) {
   });
 };
 
-var iconSize = {
+var iconSize$1 = {
   xsmall: 8,
   small: 12,
   medium: 16,
@@ -3818,8 +3818,8 @@ function useIconProps(_ref) {
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
 
-  var height = makeSize(iconSize[size]);
-  var width = makeSize(iconSize[size]);
+  var height = makeSize(iconSize$1[size]);
+  var width = makeSize(iconSize$1[size]);
   var iconColor = color === 'currentColor' ? 'currentColor' : get_1(theme.colors, color, '');
   return {
     height: height,
@@ -4822,9 +4822,9 @@ var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
   });
 };
 
-function ownKeys$s(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 ownKeys$v(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$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledIconButtonweb__StyledButton",
   componentId: "sc-1f4cg7d-0"
@@ -4867,7 +4867,7 @@ var StyledIconButton = function StyledIconButton(_ref) {
       size = _ref.size,
       contrast = _ref.contrast,
       accessibilityLabel = _ref.accessibilityLabel;
-  return /*#__PURE__*/jsx(StyledButton, _objectSpread$s(_objectSpread$s({
+  return /*#__PURE__*/jsx(StyledButton, _objectSpread$v(_objectSpread$v({
     onClick: onClick,
     contrast: contrast,
     type: "button"
@@ -5061,10 +5061,10 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
 
 var _excluded$3 = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "textAlign"];
 
-function ownKeys$r(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 ownKeys$u(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$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledBaseText$1 = /*#__PURE__*/styled.div.withConfig({
+function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseTextweb__StyledBaseText",
   componentId: "sc-1ob51ew-0"
 })(function (_ref) {
@@ -5107,7 +5107,7 @@ var BaseText = function BaseText(_ref2) {
       style = _ref2.style,
       _ref2$accessibilityPr = _ref2.accessibilityProps,
       accessibilityProps = _ref2$accessibilityPr === void 0 ? {} : _ref2$accessibilityPr;
-  return /*#__PURE__*/jsx(StyledBaseText$1, _objectSpread$r(_objectSpread$r({
+  return /*#__PURE__*/jsx(StyledBaseText, _objectSpread$u(_objectSpread$u({
     color: color,
     fontFamily: fontFamily,
     fontSize: fontSize,
@@ -5126,9 +5126,9 @@ var BaseText = function BaseText(_ref2) {
   }));
 };
 
-function ownKeys$q(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 ownKeys$t(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$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getProps$3 = function getProps(_ref) {
   var size = _ref.size,
@@ -5178,14 +5178,14 @@ var Title = function Title(_ref2) {
     type: type,
     contrast: contrast
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread$q(_objectSpread$q({}, props), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$t(_objectSpread$t({}, props), {}, {
     children: children
   }));
 };
 
-function ownKeys$p(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 ownKeys$s(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$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getProps$2 = function getProps(_ref) {
   var variant = _ref.variant,
@@ -5256,14 +5256,14 @@ var Heading = function Heading(_ref2) {
     weight: weight,
     contrast: contrast
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread$p(_objectSpread$p({}, props), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$s(_objectSpread$s({}, props), {}, {
     children: children
   }));
 };
 
-function ownKeys$o(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 ownKeys$r(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$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getTextProps = function getTextProps(_ref) {
   var variant = _ref.variant,
@@ -5289,10 +5289,6 @@ var getTextProps = function getTextProps(_ref) {
       props.lineHeight = 's';
     }
   } else if (variant === 'caption') {
-    if (weight === 'bold') {
-      throw new Error("[Blade: Text]: weight cannot be 'bold' when variant is 'caption'");
-    }
-
     if (size === 'small') {
       throw new Error("[Blade: Text]: size cannot be 'small' when variant is 'caption'");
     }
@@ -5313,9 +5309,7 @@ var StyledText = /*#__PURE__*/styled(BaseText).withConfig({
 
   if (truncateAfterLines) {
     if (getPlatformType() === 'react-native') {
-      return {
-        numberOfLines: truncateAfterLines
-      };
+      return null;
     }
 
     return {
@@ -5342,9 +5336,10 @@ var Text = function Text(_ref3) {
       _ref3$contrast = _ref3.contrast,
       contrast = _ref3$contrast === void 0 ? 'low' : _ref3$contrast,
       truncateAfterLines = _ref3.truncateAfterLines,
-      children = _ref3.children;
+      children = _ref3.children,
+      color = _ref3.color;
 
-  var props = _objectSpread$o({
+  var props = _objectSpread$r(_objectSpread$r({
     truncateAfterLines: truncateAfterLines
   }, getTextProps({
     variant: variant,
@@ -5352,9 +5347,11 @@ var Text = function Text(_ref3) {
     weight: weight,
     size: size,
     contrast: contrast
-  }));
+  })), color ? {
+    color: color
+  } : {});
 
-  return /*#__PURE__*/jsx(StyledText, _objectSpread$o(_objectSpread$o({}, props), {}, {
+  return /*#__PURE__*/jsx(StyledText, _objectSpread$r(_objectSpread$r({}, props), {}, {
     children: children
   }));
 };
@@ -5459,16 +5456,16 @@ var getBaseButtonStyles = function getBaseButtonStyles(_ref) {
   };
 };
 
-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 ownKeys$q(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$n(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; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseButton = /*#__PURE__*/styled.button.attrs(function (props) {
-  return _objectSpread$n({}, props.accessibilityProps);
+  return _objectSpread$q({}, props.accessibilityProps);
 }).withConfig({
   displayName: "StyledBaseButtonweb__StyledBaseButton",
   componentId: "sc-26bt38-0"
 })(function (props) {
-  return _objectSpread$n(_objectSpread$n({}, getBaseButtonStyles(props)), {}, {
+  return _objectSpread$q(_objectSpread$q({}, getBaseButtonStyles(props)), {}, {
     transitionProperty: 'background-color, border-color, box-shadow',
     transitionTimingFunction: get_1(props.theme.motion, props.motionEasing),
     transitionDuration: castWebType(makeMotionTime(get_1(props.theme.motion, props.motionDuration))),
@@ -5511,7 +5508,7 @@ var typography = {
     large: 'm'
   }
 };
-var minHeight$1 = {
+var minHeight = {
   xsmall: 28,
   small: 32,
   medium: 36,
@@ -5765,9 +5762,9 @@ var SpinningBox = /*#__PURE__*/styled(Box).withConfig({
   return css(["width:max-content;display:inline-flex;animation:", " ", " ", " infinite;"], rotate, makeMotionTime(get_1(theme.motion, motion.duration)), get_1(theme.motion, motion.easing));
 });
 
-function ownKeys$m(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 ownKeys$p(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$m(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getColor = function getColor(_ref) {
   var contrast = _ref.contrast,
@@ -5799,7 +5796,7 @@ var BaseSpinner = function BaseSpinner(_ref2) {
 
   return /*#__PURE__*/jsx(Box, {
     display: "flex",
-    children: /*#__PURE__*/jsxs(Box, _objectSpread$m(_objectSpread$m({
+    children: /*#__PURE__*/jsxs(Box, _objectSpread$p(_objectSpread$p({
       display: "flex",
       alignItems: "center",
       flexDirection: labelPosition === 'right' ? 'row' : 'column'
@@ -5832,9 +5829,9 @@ var BaseSpinner = function BaseSpinner(_ref2) {
   });
 };
 
-function ownKeys$l(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 ownKeys$o(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$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getColorToken$1 = function getColorToken(_ref) {
   var property = _ref.property,
@@ -5867,7 +5864,7 @@ var getProps$1 = function getProps(_ref2) {
     spinnerSize: buttonSizeToSpinnerSizeMap[size],
     fontSize: buttonTypographyTokens.fonts.size[size],
     lineHeight: buttonTypographyTokens.lineHeights[size],
-    minHeight: makeSize(minHeight$1[size]),
+    minHeight: makeSize(minHeight[size]),
     iconPadding: hasIcon && children !== null && children !== void 0 && children.trim() ? "spacing.".concat(textPadding[size]) : undefined,
     iconColor: getColorToken$1({
       property: 'icon',
@@ -6079,7 +6076,7 @@ var BaseButton = function BaseButton(_ref4) {
       motionEasing = _getProps.motionEasing;
 
   return /*#__PURE__*/jsxs(StyledBaseButton, {
-    accessibilityProps: _objectSpread$l({}, makeAccessible({
+    accessibilityProps: _objectSpread$o({}, makeAccessible({
       role: 'button',
       label: accessibilityLabel
     })),
@@ -6170,16 +6167,16 @@ var getStyledLinkStyles = function getStyledLinkStyles(_ref) {
   };
 };
 
-function ownKeys$k(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 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$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$n(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 StyledLink$1 = /*#__PURE__*/styled.button.attrs(function (props) {
-  return _objectSpread$k({}, props.accessibilityProps);
+  return _objectSpread$n({}, props.accessibilityProps);
 }).withConfig({
   displayName: "StyledBaseLinkweb__StyledLink",
   componentId: "sc-1yj1z8h-0"
 })(function (props) {
-  return _objectSpread$k(_objectSpread$k({}, getStyledLinkStyles(props)), {}, {
+  return _objectSpread$n(_objectSpread$n({}, getStyledLinkStyles(props)), {}, {
     display: 'inline-block',
     borderRadius: makeBorderSize(props.theme.border.radius.small),
     transitionProperty: 'box-shadow',
@@ -6236,9 +6233,9 @@ var useInteraction = function useInteraction() {
 
 var _excluded$2 = ["currentInteraction", "setCurrentInteraction"];
 
-function ownKeys$j(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 ownKeys$m(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$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getColorToken = function getColorToken(_ref) {
   var variant = _ref.variant,
@@ -6392,8 +6389,8 @@ var BaseLink = function BaseLink(_ref3) {
     }
   };
 
-  return /*#__PURE__*/jsx(StyledLink$1, _objectSpread$j(_objectSpread$j({}, syntheticEvents), {}, {
-    accessibilityProps: _objectSpread$j({}, makeAccessible({
+  return /*#__PURE__*/jsx(StyledLink$1, _objectSpread$m(_objectSpread$m({}, syntheticEvents), {}, {
+    accessibilityProps: _objectSpread$m({}, makeAccessible({
       role: role,
       label: accessibilityLabel,
       disabled: disabled
@@ -6447,9 +6444,9 @@ var BaseLink = function BaseLink(_ref3) {
   }));
 };
 
-function ownKeys$i(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 ownKeys$l(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$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var isReactNative$3 = getPlatformType() === 'react-native'; // Need extra wrappers on React Native only for alignment
 
 var SecondaryActionWrapper = isReactNative$3 ? Box : Fragment;
@@ -6535,7 +6532,7 @@ var Alert = function Alert(_ref) {
   }
 
   var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(SecondaryActionWrapper, {
-    children: /*#__PURE__*/jsx(BaseLink, _objectSpread$i(_objectSpread$i({
+    children: /*#__PURE__*/jsx(BaseLink, _objectSpread$l(_objectSpread$l({
       contrast: contrast,
       intent: intent
     }, secondaryActionParams), {}, {
@@ -6567,7 +6564,7 @@ var Alert = function Alert(_ref) {
       icon: CloseIcon
     })
   }) : null;
-  var a11yProps = makeAccessible(_objectSpread$i({
+  var a11yProps = makeAccessible(_objectSpread$l({
     // React Native doesn't has status as role
     role: isReactNative$3 || intent === 'negative' || intent === 'notice' ? 'alert' : 'status'
   }, intent === 'notice' && {
@@ -6578,7 +6575,7 @@ var Alert = function Alert(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/jsxs(StyledAlert, _objectSpread$i(_objectSpread$i({
+  return /*#__PURE__*/jsxs(StyledAlert, _objectSpread$l(_objectSpread$l({
     intent: intent,
     contrastType: contrastType,
     isFullWidth: isFullWidth,
@@ -6593,48 +6590,66 @@ var Alert = function Alert(_ref) {
   }));
 };
 
-var minHeight = {
-  small: 20,
-  medium: 24
+var verticalPadding$1 = {
+  small: 'spacing.0',
+  medium: 'spacing.1',
+  large: 'spacing.2'
 };
-var maxWidth = {
+var horizontalPadding$1 = {
+  small: 'spacing.3',
+  medium: 'spacing.3',
+  large: 'spacing.4'
+};
+var iconPadding = {
+  small: 'spacing.1',
+  medium: 'spacing.2',
+  large: 'spacing.2'
+};
+var iconSize = {
+  small: 'xsmall',
+  medium: 'small',
+  large: 'small'
+};
+var maxWidth$1 = {
   onMobile: 100,
   onDesktop: 120
 };
 
 var getStyledBadgeStyles = function getStyledBadgeStyles(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
       platform = _ref.platform,
       backgroundColor = _ref.backgroundColor;
   return {
     backgroundColor: get_1(theme.colors, backgroundColor),
-    minHeight: makeSize(minHeight[size]),
     borderRadius: makeBorderSize(theme.border.radius.max),
-    maxWidth: makeSize(maxWidth[platform]),
+    maxWidth: makeSize(maxWidth$1[platform]),
     display: 'flex',
     flexWrap: 'nowrap'
   };
 };
 
-function ownKeys$h(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 ownKeys$k(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeweb__StyledBadge",
   componentId: "sc-1svn4tv-0"
 })(function (props) {
-  return _objectSpread$h(_objectSpread$h({}, getStyledBadgeStyles(props)), {}, {
+  return _objectSpread$k(_objectSpread$k({}, getStyledBadgeStyles(props)), {}, {
     width: 'fit-content'
   });
 });
 
+function ownKeys$j(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$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var isFeedbackVariant = function isFeedbackVariant(variant) {
   var feedbackVariants = ['information', 'negative', 'neutral', 'notice', 'positive'];
   return feedbackVariants.includes(variant);
 };
 
-var getColorProps = function getColorProps(_ref) {
+var getColorProps$1 = function getColorProps(_ref) {
   var variant = _ref.variant,
       contrast = _ref.contrast;
   var props = {
@@ -6656,21 +6671,6 @@ var getColorProps = function getColorProps(_ref) {
   return props;
 };
 
-var StyledBaseText = /*#__PURE__*/styled(BaseText).withConfig({
-  displayName: "Badge__StyledBaseText",
-  componentId: "sc-1iizgt0-0"
-})(function () {
-  if (getPlatformType() !== 'react-native') {
-    return {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    };
-  }
-
-  return {};
-});
-
 var Badge = function Badge(_ref2) {
   var children = _ref2.children,
       _ref2$contrast = _ref2.contrast,
@@ -6690,7 +6690,7 @@ var Badge = function Badge(_ref2) {
   var _useTheme = useTheme(),
       platform = _useTheme.platform;
 
-  var _getColorProps = getColorProps({
+  var _getColorProps = getColorProps$1({
     variant: variant,
     contrast: contrast
   }),
@@ -6703,37 +6703,41 @@ var Badge = function Badge(_ref2) {
     size: size,
     platform: platform,
     children: /*#__PURE__*/jsxs(Box, {
-      paddingRight: "spacing.3",
-      paddingLeft: "spacing.3",
+      paddingRight: horizontalPadding$1[size],
+      paddingLeft: horizontalPadding$1[size],
+      paddingTop: verticalPadding$1[size],
+      paddingBottom: verticalPadding$1[size],
       display: "flex",
-      flex: 1,
       flexDirection: "row",
       justifyContent: "center",
       alignItems: "center",
       overflow: "hidden",
       children: [Icon ? /*#__PURE__*/jsx(Box, {
-        paddingRight: Boolean(Icon) ? 'spacing.2' : 'spacing.0',
+        paddingRight: Boolean(Icon) ? iconPadding[size] : 'spacing.0',
         display: "flex",
         children: /*#__PURE__*/jsx(Icon, {
           color: iconColor,
-          size: "small"
+          size: iconSize[size]
         })
-      }) : null, /*#__PURE__*/jsx(StyledBaseText, {
-        fontSize: 75,
-        fontWeight: fontWeight,
-        lineHeight: "s",
-        color: textColor,
-        textAlign: "center",
+      }) : null, /*#__PURE__*/jsx(Text, _objectSpread$j(_objectSpread$j({}, size === 'small' ? {
+        variant: 'caption'
+      } : {
+        variant: 'body',
+        size: 'small'
+      }), {}, {
+        type: "normal",
+        weight: fontWeight,
         truncateAfterLines: 1,
+        color: textColor,
         children: children
-      })]
+      }))]
     })
   });
 };
 
-function ownKeys$g(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 ownKeys$i(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Button = function Button(_ref) {
   var children = _ref.children,
@@ -6754,7 +6758,7 @@ var Button = function Button(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       accessibilityLabel = _ref.accessibilityLabel;
-  return /*#__PURE__*/jsx(BaseButton, _objectSpread$g(_objectSpread$g({}, icon ? {
+  return /*#__PURE__*/jsx(BaseButton, _objectSpread$i(_objectSpread$i({}, icon ? {
     icon: icon,
     children: children
   } : {
@@ -6772,26 +6776,122 @@ var Button = function Button(_ref) {
   }));
 };
 
-var Counter = function Counter(_ref) {
-  var value = _ref.value,
-      max = _ref.max,
-      _ref$intent = _ref.intent,
+var verticalPadding = {
+  small: 'spacing.0',
+  medium: 'spacing.1',
+  large: 'spacing.1'
+};
+var horizontalPadding = {
+  small: 'spacing.2',
+  medium: 'spacing.3',
+  large: 'spacing.3'
+};
+var maxWidth = {
+  onMobile: 100,
+  onDesktop: 120
+};
+
+var getStyledCounterStyles = function getStyledCounterStyles(_ref) {
+  var theme = _ref.theme,
+      platform = _ref.platform,
+      backgroundColor = _ref.backgroundColor;
+  return {
+    backgroundColor: get_1(theme.colors, backgroundColor),
+    borderRadius: makeBorderSize(theme.border.radius.max),
+    maxWidth: makeSize(maxWidth[platform]),
+    display: 'flex',
+    flexWrap: 'nowrap'
+  };
+};
+
+function ownKeys$h(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledCounter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledCounterweb__StyledCounter",
+  componentId: "sc-1itt9w6-0"
+})(function (props) {
+  return _objectSpread$h(_objectSpread$h({}, getStyledCounterStyles(props)), {}, {
+    width: 'fit-content'
+  });
+});
+
+function ownKeys$g(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var getColorProps = function getColorProps(_ref) {
+  var _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'neutral' : _ref$intent,
       _ref$contrast = _ref.contrast,
-      contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size;
+      contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast;
+  var props = {
+    textColor: "feedback.text.".concat(intent, ".").concat(contrast, "Contrast"),
+    backgroundColor: "feedback.background.".concat(intent, ".").concat(contrast, "Contrast")
+  };
+  return props;
+};
+
+var Counter = function Counter(_ref2) {
+  var value = _ref2.value,
+      max = _ref2.max,
+      _ref2$intent = _ref2.intent,
+      intent = _ref2$intent === void 0 ? 'neutral' : _ref2$intent,
+      _ref2$contrast = _ref2.contrast,
+      contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'medium' : _ref2$size;
   var content = "".concat(value);
 
   if (max && value > max) {
     content = "".concat(max, "+");
   }
 
-  return /*#__PURE__*/jsx(Badge, {
+  var _useTheme = useTheme(),
+      platform = _useTheme.platform;
+
+  var _getColorProps = getColorProps({
+    intent: intent,
+    contrast: contrast
+  }),
+      backgroundColor = _getColorProps.backgroundColor,
+      textColor = _getColorProps.textColor;
+
+  var textSizes = {
+    small: {
+      variant: 'caption'
+    },
+    medium: {
+      variant: 'body',
+      size: 'small'
+    },
+    large: {
+      variant: 'body',
+      size: 'medium'
+    }
+  };
+  return /*#__PURE__*/jsx(StyledCounter, {
+    backgroundColor: backgroundColor,
     size: size,
-    variant: intent,
-    contrast: contrast,
-    children: content
+    platform: platform,
+    children: /*#__PURE__*/jsx(Box, {
+      paddingRight: horizontalPadding[size],
+      paddingLeft: horizontalPadding[size],
+      paddingTop: verticalPadding[size],
+      paddingBottom: verticalPadding[size],
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+      children: /*#__PURE__*/jsx(Text, _objectSpread$g(_objectSpread$g({}, textSizes[size]), {}, {
+        type: "normal",
+        weight: "regular",
+        truncateAfterLines: 1,
+        color: textColor,
+        children: content
+      }))
+    })
   });
 };
 
@@ -7579,9 +7679,9 @@ var variants = {
 var getHoverStyles = function getHoverStyles(_ref) {
   var theme = _ref.theme,
       isDisabled = _ref.isDisabled,
-      isNegative = _ref.isNegative,
+      hasError = _ref.hasError,
       isChecked = _ref.isChecked;
-  if (isDisabled || isNegative) return {};
+  if (isDisabled || hasError) return {};
   var checked = isChecked ? 'checked' : 'unchecked';
   var backgroundColor = variants["default"].background[checked];
   var borderColor = variants["default"].border[checked];
@@ -7600,7 +7700,7 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
   var theme = _ref2.theme,
       isChecked = _ref2.isChecked,
       isDisabled = _ref2.isDisabled,
-      isNegative = _ref2.isNegative;
+      hasError = _ref2.hasError;
   return _objectSpread$d(_objectSpread$d({}, screenReaderStyles), {}, {
     '&:focus + div': {
       // TODO: Replace with focus outline token
@@ -7611,7 +7711,7 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
       theme: theme,
       isChecked: isChecked,
       isDisabled: isDisabled,
-      isNegative: isNegative
+      hasError: hasError
     }))
   });
 });
@@ -7620,11 +7720,11 @@ var SelectorInput = function SelectorInput(_ref3) {
   var inputProps = _ref3.inputProps,
       isChecked = _ref3.isChecked,
       isDisabled = _ref3.isDisabled,
-      isNegative = _ref3.isNegative;
+      hasError = _ref3.hasError;
   return /*#__PURE__*/jsx(StyledInput, _objectSpread$d({
     isChecked: isChecked,
     isDisabled: isDisabled,
-    isNegative: isNegative
+    hasError: hasError
   }, inputProps));
 };
 
@@ -7733,7 +7833,7 @@ var Checkbox = function Checkbox(_ref) {
           children: [/*#__PURE__*/jsx(SelectorInput, {
             isChecked: state.isChecked || Boolean(isIndeterminate),
             isDisabled: _isDisabled,
-            isNegative: _hasError,
+            hasError: _hasError,
             inputProps: inputProps
           }), /*#__PURE__*/jsx(CheckboxIcon, {
             size: _size,
@@ -10200,8 +10300,7 @@ var Radio = function Radio(_ref) {
         children: [/*#__PURE__*/jsx(SelectorInput, {
           isChecked: state.isChecked,
           isDisabled: _isDisabled,
-          isNegative: hasError // TODO: rename to hasError
-          ,
+          hasError: hasError,
           inputProps: inputProps
         }), /*#__PURE__*/jsx(RadioIcon, {
           size: _size,