@razorpay/blade 12.110.0 → 12.119.1

package/build/lib/web/production/components/Button/BaseButton/BaseButton.js

@@ -4,7 +4,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import styled from 'styled-components';
 import StyledBaseButton from './StyledBaseButton.web.js';
-import { backgroundGradient, boxShadow, textColor, buttonIconOnlySizeToIconSizeMap, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, buttonIconOnlyHeightWidth, buttonPadding, buttonBorderRadius, typography, spinnerColor } from './buttonTokens.js';
+import { spinnerColor, backgroundGradient, boxShadow, textColor, buttonIconOnlySizeToIconSizeMap, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, buttonIconOnlyHeightWidth, buttonPadding, buttonBorderRadius, typography } from './buttonTokens.js';
 import AnimatedButtonContent from './AnimatedButtonContent.web.js';
 import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/index.js';
@@ -26,8 +26,8 @@ import '../../../utils/getStringChildren/index.js';
 import '../../../utils/logger/index.js';
 import '../../../utils/makeAnalyticsAttribute/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { isReactNative } from '../../../utils/platform/isReactNative.js';
 import { throwBladeError } from '../../../utils/logger/logger.js';
+import { isReactNative } from '../../../utils/platform/isReactNative.js';
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
 import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
@@ -45,12 +45,41 @@ import { BaseSpinner } from '../../Spinner/BaseSpinner/BaseSpinner.js';
 import { BaseText } from '../../Typography/BaseText/BaseText.web.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["href", "target", "rel", "tabIndex", "id", "variant", "color", "size", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "onBlur", "onKeyDown", "type", "children", "testID", "onFocus", "onMouseLeave", "onMouseMove", "onMouseDown", "onPointerDown", "onPointerEnter", "accessibilityProps", "onTouchEnd", "onTouchStart"];
+var _excluded = ["href", "target", "rel", "tabIndex", "id", "variant", "color", "size", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "onBlur", "onKeyDown", "type", "children", "testID", "onFocus", "onMouseLeave", "onMouseMove", "onMouseDown", "onPointerDown", "onPointerEnter", "accessibilityProps", "onTouchEnd", "onTouchStart", "_borderRadius", "_iconSize", "_spinnerColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * `white`, `black` and `transparent` are not feedback colors, so the token
+ * factories are still called with `primary` and the value is looked up under its
+ * own key instead of under `base`.
+ */
+var isStaticOrTransparentColor = function isStaticOrTransparentColor(color) {
+  return color === 'white' || color === 'black' || color === 'transparent';
+};
+var getSpinnerColor = function getSpinnerColor(_ref) {
+  var variant = _ref.variant,
+    color = _ref.color;
+  // `black` only exists as a primary button, so it is looked up separately from
+  // the colors that carry a full variant record.
+  if (color === 'black') {
+    return spinnerColor.black.primary;
+  }
+  if (color !== 'primary' && color !== 'transparent' && color in spinnerColor) {
+    return spinnerColor[color][variant];
+  }
+  return spinnerColor.base[variant];
+};
+var assertBlackIsPrimary = function assertBlackIsPrimary(variant) {
+  if (variant !== 'primary') {
+    throwBladeError({
+      moduleName: 'BaseButton',
+      message: "Black color can only be used with primary variant but received \"".concat(variant, "\"")
+    });
+  }
+};
 var getRenderElement = function getRenderElement(href) {
   if (isReactNative()) {
     return undefined; // as property doesn't work with react native
@@ -60,19 +89,23 @@ var getRenderElement = function getRenderElement(href) {
   }
   return 'button';
 };
-var getBackgroundColorToken = function getBackgroundColorToken(_ref) {
-  var variant = _ref.variant,
-    state = _ref.state,
-    color = _ref.color;
+var getBackgroundColorToken = function getBackgroundColorToken(_ref2) {
+  var variant = _ref2.variant,
+    state = _ref2.state,
+    color = _ref2.color;
   var _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
 
-  // For white and transparent colors, we use 'primary' as the base color
-  // since the actual token lookup uses the white/transparent specific paths
-  var gradientColor = color === 'white' || color === 'transparent' || !color ? 'primary' : color;
+  // For white, black and transparent colors, we use 'primary' as the base color
+  // since the actual token lookup uses the white/black/transparent specific paths
+  var gradientColor = isStaticOrTransparentColor(color) || !color ? 'primary' : color;
   var tokens = backgroundGradient(gradientColor);
   if (color === 'white') {
     return tokens.white[variant][_state];
   }
+  if (color === 'black') {
+    assertBlackIsPrimary(variant);
+    return tokens.black.primary[_state];
+  }
   if (color === 'transparent') {
     if (variant !== 'tertiary') {
       throw new Error("Transparent color can only be used with tertiary variant but received \"".concat(variant, "\""));
@@ -86,16 +119,20 @@ var getBackgroundColorToken = function getBackgroundColorToken(_ref) {
   }
   return tokens.base[variant][_state];
 };
-var getBoxShadowToken = function getBoxShadowToken(_ref2) {
-  var variant = _ref2.variant,
-    state = _ref2.state,
-    color = _ref2.color;
+var getBoxShadowToken = function getBoxShadowToken(_ref3) {
+  var variant = _ref3.variant,
+    state = _ref3.state,
+    color = _ref3.color;
   var _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
-  var tokenColor = color === 'white' || color === 'transparent' || !color ? 'primary' : color;
+  var tokenColor = isStaticOrTransparentColor(color) || !color ? 'primary' : color;
   var tokens = boxShadow(tokenColor);
   if (color === 'white') {
     return tokens.white[variant][_state];
   }
+  if (color === 'black') {
+    assertBlackIsPrimary(variant);
+    return tokens.black.primary[_state];
+  }
   if (color === 'transparent') {
     if (variant !== 'tertiary') {
       throw new Error("Transparent color can only be used with tertiary variant but received \"".concat(variant, "\""));
@@ -104,16 +141,20 @@ var getBoxShadowToken = function getBoxShadowToken(_ref2) {
   }
   return tokens.base[variant][_state];
 };
-var getTextColorToken = function getTextColorToken(_ref3) {
-  var property = _ref3.property,
-    variant = _ref3.variant,
-    state = _ref3.state,
-    color = _ref3.color;
+var getTextColorToken = function getTextColorToken(_ref4) {
+  var property = _ref4.property,
+    variant = _ref4.variant,
+    state = _ref4.state,
+    color = _ref4.color;
   var tokens = textColor(property);
   var _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
   if (color === 'white') {
     return tokens.white[variant][_state];
   }
+  if (color === 'black') {
+    assertBlackIsPrimary(variant);
+    return tokens.black.primary[_state];
+  }
   if (color === 'transparent') {
     if (variant !== 'tertiary') {
       throw new Error("Transparent color can only be used with tertiary variant but received \"".concat(variant, "\""));
@@ -128,15 +169,17 @@ var getTextColorToken = function getTextColorToken(_ref3) {
   }
   return tokens.base[variant][_state];
 };
-var getProps = function getProps(_ref4) {
-  var buttonTypographyTokens = _ref4.buttonTypographyTokens,
-    childrenString = _ref4.childrenString,
-    isDisabled = _ref4.isDisabled,
-    size = _ref4.size,
-    theme = _ref4.theme,
-    variant = _ref4.variant,
-    color = _ref4.color,
-    hasIcon = _ref4.hasIcon;
+var getProps = function getProps(_ref5) {
+  var buttonTypographyTokens = _ref5.buttonTypographyTokens,
+    childrenString = _ref5.childrenString,
+    isDisabled = _ref5.isDisabled,
+    size = _ref5.size,
+    theme = _ref5.theme,
+    variant = _ref5.variant,
+    color = _ref5.color,
+    hasIcon = _ref5.hasIcon,
+    _borderRadius = _ref5._borderRadius,
+    _iconSize = _ref5._iconSize;
   if (variant === 'tertiary' && color !== 'primary' && color !== 'white' && color !== 'transparent') {
     throwBladeError({
       moduleName: 'BaseButton',
@@ -236,7 +279,7 @@ var getProps = function getProps(_ref4) {
     };
   };
   var props = _objectSpread({
-    iconSize: isIconOnly ? buttonIconOnlySizeToIconSizeMap[size] : buttonSizeToIconSizeMap[size],
+    iconSize: _iconSize !== null && _iconSize !== void 0 ? _iconSize : isIconOnly ? buttonIconOnlySizeToIconSizeMap[size] : buttonSizeToIconSizeMap[size],
     spinnerSize: buttonSizeToSpinnerSizeMap[size],
     fontSize: buttonTypographyTokens.fonts.size[size],
     lineHeight: buttonTypographyTokens.lineHeights[size],
@@ -281,7 +324,7 @@ var getProps = function getProps(_ref4) {
     })),
     focusBoxShadow: getBoxShadow('focus', color),
     focusRingColor: getIn(theme.colors, 'surface.border.primary.muted'),
-    borderRadius: makeBorderSize(theme.border.radius[buttonBorderRadius[size]]),
+    borderRadius: makeBorderSize(theme.border.radius[_borderRadius !== null && _borderRadius !== void 0 ? _borderRadius : buttonBorderRadius[size]]),
     motionDuration: 'duration.xquick',
     motionEasing: 'easing.standard'
   }, isReactNative() && !isDisabled ? getNativeShadowColors(color) : {});
@@ -315,51 +358,54 @@ var getProps = function getProps(_ref4) {
 var ButtonContent = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "BaseButton__ButtonContent",
   componentId: "zf1huq-0"
-})(function (_ref5) {
-  var isHidden = _ref5.isHidden;
+})(function (_ref6) {
+  var isHidden = _ref6.isHidden;
   return {
     opacity: isHidden ? 0 : 1
   };
 });
-var _BaseButton = function _BaseButton(_ref6, ref) {
+var _BaseButton = function _BaseButton(_ref7, ref) {
   var _buttonGroupProps$siz, _buttonGroupProps$var, _buttonGroupProps$col, _buttonGroupProps$siz2, _buttonGroupProps$isF, _accessibilityProps$r, _buttonGroupProps$var2, _buttonGroupProps$col2, _buttonGroupProps$siz3, _buttonGroupProps$isF2;
-  var href = _ref6.href,
-    target = _ref6.target,
-    rel = _ref6.rel,
-    tabIndex = _ref6.tabIndex,
-    id = _ref6.id,
-    _ref6$variant = _ref6.variant,
-    variant = _ref6$variant === void 0 ? 'primary' : _ref6$variant,
-    _ref6$color = _ref6.color,
-    color = _ref6$color === void 0 ? 'primary' : _ref6$color,
-    _ref6$size = _ref6.size,
-    size = _ref6$size === void 0 ? 'medium' : _ref6$size,
-    Icon = _ref6.icon,
-    _ref6$iconPosition = _ref6.iconPosition,
-    iconPosition = _ref6$iconPosition === void 0 ? 'left' : _ref6$iconPosition,
-    _ref6$isDisabled = _ref6.isDisabled,
-    isDisabled = _ref6$isDisabled === void 0 ? false : _ref6$isDisabled,
-    _ref6$isFullWidth = _ref6.isFullWidth,
-    isFullWidth = _ref6$isFullWidth === void 0 ? false : _ref6$isFullWidth,
-    _ref6$isLoading = _ref6.isLoading,
-    isLoading = _ref6$isLoading === void 0 ? false : _ref6$isLoading,
-    onClick = _ref6.onClick,
-    onBlur = _ref6.onBlur,
-    _onKeyDown = _ref6.onKeyDown,
-    _ref6$type = _ref6.type,
-    type = _ref6$type === void 0 ? 'button' : _ref6$type,
-    children = _ref6.children,
-    testID = _ref6.testID,
-    onFocus = _ref6.onFocus,
-    onMouseLeave = _ref6.onMouseLeave,
-    onMouseMove = _ref6.onMouseMove,
-    _onMouseDown = _ref6.onMouseDown,
-    onPointerDown = _ref6.onPointerDown,
-    onPointerEnter = _ref6.onPointerEnter,
-    accessibilityProps = _ref6.accessibilityProps,
-    _onTouchEnd = _ref6.onTouchEnd,
-    _onTouchStart = _ref6.onTouchStart,
-    rest = _objectWithoutProperties(_ref6, _excluded);
+  var href = _ref7.href,
+    target = _ref7.target,
+    rel = _ref7.rel,
+    tabIndex = _ref7.tabIndex,
+    id = _ref7.id,
+    _ref7$variant = _ref7.variant,
+    variant = _ref7$variant === void 0 ? 'primary' : _ref7$variant,
+    _ref7$color = _ref7.color,
+    color = _ref7$color === void 0 ? 'primary' : _ref7$color,
+    _ref7$size = _ref7.size,
+    size = _ref7$size === void 0 ? 'medium' : _ref7$size,
+    Icon = _ref7.icon,
+    _ref7$iconPosition = _ref7.iconPosition,
+    iconPosition = _ref7$iconPosition === void 0 ? 'left' : _ref7$iconPosition,
+    _ref7$isDisabled = _ref7.isDisabled,
+    isDisabled = _ref7$isDisabled === void 0 ? false : _ref7$isDisabled,
+    _ref7$isFullWidth = _ref7.isFullWidth,
+    isFullWidth = _ref7$isFullWidth === void 0 ? false : _ref7$isFullWidth,
+    _ref7$isLoading = _ref7.isLoading,
+    isLoading = _ref7$isLoading === void 0 ? false : _ref7$isLoading,
+    onClick = _ref7.onClick,
+    onBlur = _ref7.onBlur,
+    _onKeyDown = _ref7.onKeyDown,
+    _ref7$type = _ref7.type,
+    type = _ref7$type === void 0 ? 'button' : _ref7$type,
+    children = _ref7.children,
+    testID = _ref7.testID,
+    onFocus = _ref7.onFocus,
+    onMouseLeave = _ref7.onMouseLeave,
+    onMouseMove = _ref7.onMouseMove,
+    _onMouseDown = _ref7.onMouseDown,
+    onPointerDown = _ref7.onPointerDown,
+    onPointerEnter = _ref7.onPointerEnter,
+    accessibilityProps = _ref7.accessibilityProps,
+    _onTouchEnd = _ref7.onTouchEnd,
+    _onTouchStart = _ref7.onTouchStart,
+    _borderRadius = _ref7._borderRadius,
+    _iconSize = _ref7._iconSize,
+    _spinnerColor = _ref7._spinnerColor,
+    rest = _objectWithoutProperties(_ref7, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var buttonGroupProps = useButtonGroupContext();
@@ -416,7 +462,9 @@ var _BaseButton = function _BaseButton(_ref6, ref) {
       variant: (_buttonGroupProps$var = buttonGroupProps.variant) !== null && _buttonGroupProps$var !== void 0 ? _buttonGroupProps$var : variant,
       theme: theme,
       color: (_buttonGroupProps$col = buttonGroupProps.color) !== null && _buttonGroupProps$col !== void 0 ? _buttonGroupProps$col : color,
-      hasIcon: Boolean(Icon)
+      hasIcon: Boolean(Icon),
+      _borderRadius: _borderRadius,
+      _iconSize: _iconSize
     }),
     defaultBackgroundColor = _getProps.defaultBackgroundColor,
     defaultBoxShadow = _getProps.defaultBoxShadow,
@@ -633,7 +681,10 @@ var _BaseButton = function _BaseButton(_ref6, ref) {
         children: /*#__PURE__*/jsx(BaseSpinner, {
           accessibilityLabel: "Loading",
           size: spinnerSize,
-          color: color && color !== 'primary' && color !== 'transparent' && color in spinnerColor ? spinnerColor[color][variant] : spinnerColor.base[variant]
+          color: _spinnerColor !== null && _spinnerColor !== void 0 ? _spinnerColor : getSpinnerColor({
+            variant: variant,
+            color: color
+          })
         })
       }) : null, /*#__PURE__*/jsxs(ButtonContent, {
         display: "flex",