@razorpay/blade 12.68.0 → 12.89.1

package/build/lib/web/production/components/BottomSheet/BottomSheetFooter.web.js

@@ -38,7 +38,7 @@ var BottomSheetFooter = function BottomSheetFooter(_ref) {
     width: "100%",
     flexShrink: 0,
     marginTop: "auto",
-    backgroundColor: "popup.background.subtle",
+    backgroundColor: "popup.background.gray.subtle",
     touchAction: "none",
     zIndex: 2
   }, metaAttribute({

package/build/lib/web/production/components/BottomSheet/BottomSheetFooter.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetFooter.web.js","sources":["../../../../../../src/components/BottomSheet/BottomSheetFooter.web.tsx"],"sourcesContent":["import React from 'react';\nimport { useBottomSheetContext } from './BottomSheetContext';\nimport type { BaseFooterProps } from '~components/BaseHeaderFooter/BaseFooter';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst BottomSheetFooter = ({\n  children,\n  ...dataAnalyticsProps\n}: BaseFooterProps): React.ReactElement => {\n  const { setFooterHeight, isOpen, bind } = useBottomSheetContext();\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    // for some reason the calculated footer height is changing when user drags the sheet\n    // although i don't see a reason why, thus putting it in a setTimeout so that\n    // we calculate the height on the next browser paint\n    window.setTimeout(() => {\n      if (!ref.current) return;\n      setFooterHeight(ref.current.getBoundingClientRect().height);\n    });\n  }, [ref, isOpen]);\n\n  return (\n    <BaseBox\n      ref={ref}\n      width=\"100%\"\n      flexShrink={0}\n      marginTop=\"auto\"\n      backgroundColor=\"popup.background.subtle\"\n      touchAction=\"none\"\n      zIndex={2}\n      {...metaAttribute({ name: MetaConstants.BottomSheetFooter })}\n      {...bind?.()}\n      {...makeAnalyticsAttribute(dataAnalyticsProps)}\n    >\n      <BaseFooter>{children}</BaseFooter>\n    </BaseBox>\n  );\n};\n\nexport { BottomSheetFooter };\n"],"names":["BottomSheetFooter","_ref","children","dataAnalyticsProps","_objectWithoutProperties","_excluded","_useBottomSheetContex","useBottomSheetContext","setFooterHeight","isOpen","bind","ref","React","useRef","useIsomorphicLayoutEffect","window","setTimeout","current","getBoundingClientRect","height","_jsx","BaseBox","_objectSpread","width","flexShrink","marginTop","backgroundColor","touchAction","zIndex","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","BaseFooter"],"mappings":";;;;;;;;;;;;;;;;;;AASA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EAGoB;AAAA,EAAA,IAFzCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;AACLC,IAAAA,kBAAkB,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAErB,EAAA,IAAAC,qBAAA,GAA0CC,qBAAqB,EAAE;IAAzDC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;IAAEC,MAAM,GAAAH,qBAAA,CAANG,MAAM;IAAEC,IAAI,GAAAJ,qBAAA,CAAJI,IAAI,CAAA;AACrC,EAAA,IAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC,CAAA;AAE9CC,EAAAA,yBAAyB,CAAC,YAAM;AAC9B;AACA;AACA;IACAC,MAAM,CAACC,UAAU,CAAC,YAAM;AACtB,MAAA,IAAI,CAACL,GAAG,CAACM,OAAO,EAAE,OAAA;MAClBT,eAAe,CAACG,GAAG,CAACM,OAAO,CAACC,qBAAqB,EAAE,CAACC,MAAM,CAAC,CAAA;AAC7D,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACR,GAAG,EAAEF,MAAM,CAAC,CAAC,CAAA;EAEjB,oBACEW,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNX,IAAAA,GAAG,EAAEA,GAAI;AACTY,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,eAAe,EAAC,yBAAyB;AACzCC,IAAAA,WAAW,EAAC,MAAM;AAClBC,IAAAA,MAAM,EAAE,CAAA;AAAE,GAAA,EACNC,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAAC/B,iBAAAA;AAAkB,GAAC,CAAC,CAAA,EACxDU,IAAI,KAAA,IAAA,IAAJA,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJA,IAAI,EAAI,CAAA,EACRsB,sBAAsB,CAAC7B,kBAAkB,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAD,QAAA,eAE9CkB,GAAA,CAACa,UAAU,EAAA;AAAA/B,MAAAA,QAAA,EAAEA,QAAAA;KAAqB,CAAA;AAAC,GAAA,CAC5B,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"BottomSheetFooter.web.js","sources":["../../../../../../src/components/BottomSheet/BottomSheetFooter.web.tsx"],"sourcesContent":["import React from 'react';\nimport { useBottomSheetContext } from './BottomSheetContext';\nimport type { BaseFooterProps } from '~components/BaseHeaderFooter/BaseFooter';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst BottomSheetFooter = ({\n  children,\n  ...dataAnalyticsProps\n}: BaseFooterProps): React.ReactElement => {\n  const { setFooterHeight, isOpen, bind } = useBottomSheetContext();\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    // for some reason the calculated footer height is changing when user drags the sheet\n    // although i don't see a reason why, thus putting it in a setTimeout so that\n    // we calculate the height on the next browser paint\n    window.setTimeout(() => {\n      if (!ref.current) return;\n      setFooterHeight(ref.current.getBoundingClientRect().height);\n    });\n  }, [ref, isOpen]);\n\n  return (\n    <BaseBox\n      ref={ref}\n      width=\"100%\"\n      flexShrink={0}\n      marginTop=\"auto\"\n      backgroundColor=\"popup.background.gray.subtle\"\n      touchAction=\"none\"\n      zIndex={2}\n      {...metaAttribute({ name: MetaConstants.BottomSheetFooter })}\n      {...bind?.()}\n      {...makeAnalyticsAttribute(dataAnalyticsProps)}\n    >\n      <BaseFooter>{children}</BaseFooter>\n    </BaseBox>\n  );\n};\n\nexport { BottomSheetFooter };\n"],"names":["BottomSheetFooter","_ref","children","dataAnalyticsProps","_objectWithoutProperties","_excluded","_useBottomSheetContex","useBottomSheetContext","setFooterHeight","isOpen","bind","ref","React","useRef","useIsomorphicLayoutEffect","window","setTimeout","current","getBoundingClientRect","height","_jsx","BaseBox","_objectSpread","width","flexShrink","marginTop","backgroundColor","touchAction","zIndex","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","BaseFooter"],"mappings":";;;;;;;;;;;;;;;;;;AASA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EAGoB;AAAA,EAAA,IAFzCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;AACLC,IAAAA,kBAAkB,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAErB,EAAA,IAAAC,qBAAA,GAA0CC,qBAAqB,EAAE;IAAzDC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;IAAEC,MAAM,GAAAH,qBAAA,CAANG,MAAM;IAAEC,IAAI,GAAAJ,qBAAA,CAAJI,IAAI,CAAA;AACrC,EAAA,IAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC,CAAA;AAE9CC,EAAAA,yBAAyB,CAAC,YAAM;AAC9B;AACA;AACA;IACAC,MAAM,CAACC,UAAU,CAAC,YAAM;AACtB,MAAA,IAAI,CAACL,GAAG,CAACM,OAAO,EAAE,OAAA;MAClBT,eAAe,CAACG,GAAG,CAACM,OAAO,CAACC,qBAAqB,EAAE,CAACC,MAAM,CAAC,CAAA;AAC7D,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACR,GAAG,EAAEF,MAAM,CAAC,CAAC,CAAA;EAEjB,oBACEW,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACNX,IAAAA,GAAG,EAAEA,GAAI;AACTY,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,UAAU,EAAE,CAAE;AACdC,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,eAAe,EAAC,8BAA8B;AAC9CC,IAAAA,WAAW,EAAC,MAAM;AAClBC,IAAAA,MAAM,EAAE,CAAA;AAAE,GAAA,EACNC,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAAC/B,iBAAAA;AAAkB,GAAC,CAAC,CAAA,EACxDU,IAAI,KAAA,IAAA,IAAJA,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJA,IAAI,EAAI,CAAA,EACRsB,sBAAsB,CAAC7B,kBAAkB,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAD,QAAA,eAE9CkB,GAAA,CAACa,UAAU,EAAA;AAAA/B,MAAAA,QAAA,EAAEA,QAAAA;KAAqB,CAAA;AAAC,GAAA,CAC5B,CAAC,CAAA;AAEd;;;;"}

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

@@ -4,7 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React__default from 'react';
 import styled from 'styled-components';
 import StyledBaseButton from './StyledBaseButton.web.js';
-import { backgroundColor, textColor, buttonIconOnlySizeToIconSizeMap, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, buttonIconOnlyHeightWidth, buttonIconPadding, buttonPadding, typography } from './buttonTokens.js';
+import { backgroundGradient, boxShadow, textColor, buttonIconOnlySizeToIconSizeMap, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, buttonIconOnlyHeightWidth, buttonPadding, buttonBorderRadius, typography, spinnerColor } from './buttonTokens.js';
 import AnimatedButtonContent from './AnimatedButtonContent.web.js';
 import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/index.js';
@@ -58,12 +58,15 @@ var getRenderElement = function getRenderElement(href) {
   return 'button';
 };
 var getBackgroundColorToken = function getBackgroundColorToken(_ref) {
-  var property = _ref.property,
-    variant = _ref.variant,
+  var variant = _ref.variant,
     state = _ref.state,
     color = _ref.color;
   var _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
-  var tokens = backgroundColor(property);
+
+  // 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;
+  var tokens = backgroundGradient(gradientColor);
   if (color === 'white') {
     return tokens.white[variant][_state];
   }
@@ -71,21 +74,38 @@ var getBackgroundColorToken = function getBackgroundColorToken(_ref) {
     if (variant !== 'tertiary') {
       throw new Error("Transparent color can only be used with tertiary variant but received \"".concat(variant, "\""));
     }
-    return tokens.transparent.tertiary[_state];
+    return tokens.base.transparent[_state];
   }
   if (color && color !== 'primary') {
     if (variant === 'tertiary') {
       throw new Error("Tertiary variant can only be used with color: \"primary\" or \"white\" but received \"".concat(color, "\""));
     }
-    return tokens.color(color)[variant][_state];
   }
   return tokens.base[variant][_state];
 };
-var getTextColorToken = function getTextColorToken(_ref2) {
-  var property = _ref2.property,
-    variant = _ref2.variant,
+var getBoxShadowToken = function getBoxShadowToken(_ref2) {
+  var variant = _ref2.variant,
     state = _ref2.state,
     color = _ref2.color;
+  var _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
+  var tokenColor = color === 'white' || color === 'transparent' || !color ? 'primary' : color;
+  var tokens = boxShadow(tokenColor);
+  if (color === 'white') {
+    return tokens.white[variant][_state];
+  }
+  if (color === 'transparent') {
+    if (variant !== 'tertiary') {
+      throw new Error("Transparent color can only be used with tertiary variant but received \"".concat(variant, "\""));
+    }
+    return tokens.base.transparent[_state];
+  }
+  return tokens.base[variant][_state];
+};
+var getTextColorToken = function getTextColorToken(_ref3) {
+  var property = _ref3.property,
+    variant = _ref3.variant,
+    state = _ref3.state,
+    color = _ref3.color;
   var tokens = textColor(property);
   var _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
   if (color === 'white') {
@@ -105,15 +125,15 @@ var getTextColorToken = function getTextColorToken(_ref2) {
   }
   return tokens.base[variant][_state];
 };
-var getProps = function getProps(_ref3) {
-  var buttonTypographyTokens = _ref3.buttonTypographyTokens,
-    childrenString = _ref3.childrenString,
-    isDisabled = _ref3.isDisabled,
-    size = _ref3.size,
-    theme = _ref3.theme,
-    variant = _ref3.variant,
-    color = _ref3.color,
-    hasIcon = _ref3.hasIcon;
+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;
   if (variant === 'tertiary' && color !== 'primary' && color !== 'white' && color !== 'transparent') {
     throwBladeError({
       moduleName: 'BaseButton',
@@ -121,6 +141,36 @@ var getProps = function getProps(_ref3) {
     });
   }
   var isIconOnly = hasIcon && (!childrenString || (childrenString === null || childrenString === void 0 ? void 0 : childrenString.trim().length) === 0);
+
+  // Resolve background value - either a gradient string or a token path
+  var resolveBackgroundValue = function resolveBackgroundValue(value) {
+    if (value.startsWith('linear-gradient')) {
+      return value;
+    }
+    return getIn(theme.colors, value);
+  };
+  var getDefaultBackground = function getDefaultBackground() {
+    return resolveBackgroundValue(getBackgroundColorToken({
+      variant: variant,
+      color: color,
+      state: 'default'
+    }));
+  };
+  var getBoxShadow = function getBoxShadow(state, btnColor) {
+    var shadowTokens = getBoxShadowToken({
+      variant: variant,
+      color: btnColor,
+      state: state
+    });
+    if (shadowTokens.length === 0) {
+      return undefined;
+    }
+    var shadows = shadowTokens.map(function (shadow) {
+      var resolvedColor = getIn(theme.colors, shadow.color);
+      return "inset 0 ".concat(shadow.y, "px ").concat(shadow.blur, "px ").concat(shadow.spread, "px ").concat(resolvedColor);
+    });
+    return shadows.join(', ');
+  };
   var props = {
     iconSize: isIconOnly ? buttonIconOnlySizeToIconSizeMap[size] : buttonSizeToIconSizeMap[size],
     spinnerSize: buttonSizeToSpinnerSizeMap[size],
@@ -129,7 +179,6 @@ var getProps = function getProps(_ref3) {
     minHeight: makeSize(minHeight[size]),
     height: isIconOnly ? buttonIconOnlyHeightWidth[size] : undefined,
     width: isIconOnly ? buttonIconOnlyHeightWidth[size] : undefined,
-    iconPadding: hasIcon && childrenString !== null && childrenString !== void 0 && childrenString.trim() ? "spacing.".concat(buttonIconPadding[size]) : undefined,
     iconColor: getTextColorToken({
       property: 'icon',
       variant: variant,
@@ -147,63 +196,33 @@ var getProps = function getProps(_ref3) {
     buttonPaddingLeft: isIconOnly ? makeSpace(0) : makeSpace(theme.spacing[buttonPadding[size].left]),
     buttonPaddingRight: isIconOnly ? makeSpace(0) : makeSpace(theme.spacing[buttonPadding[size].right]),
     text: childrenString === null || childrenString === void 0 ? void 0 : childrenString.trim(),
-    defaultBackgroundColor: getIn(theme.colors, getBackgroundColorToken({
-      property: 'background',
-      variant: variant,
-      color: color,
-      state: 'default'
-    })),
-    defaultBorderColor: getIn(theme.colors, getBackgroundColorToken({
-      property: 'border',
-      variant: variant,
-      color: color,
-      state: 'default'
-    })),
-    hoverBackgroundColor: getIn(theme.colors, getBackgroundColorToken({
-      property: 'background',
-      variant: variant,
-      color: color,
-      state: 'hover'
-    })),
-    hoverBorderColor: getIn(theme.colors, getBackgroundColorToken({
-      property: 'border',
+    defaultBackgroundColor: getDefaultBackground(),
+    defaultBoxShadow: getBoxShadow('default', color),
+    hoverBackgroundColor: resolveBackgroundValue(getBackgroundColorToken({
       variant: variant,
       color: color,
       state: 'hover'
     })),
+    hoverBoxShadow: getBoxShadow('hover', color),
     hoverIconColor: getIn(theme.colors, getTextColorToken({
       property: 'icon',
       variant: variant,
       color: color,
       state: 'hover'
     })),
-    focusBackgroundColor: getIn(theme.colors, getBackgroundColorToken({
-      property: 'background',
-      variant: variant,
-      color: color,
-      state: 'focus'
-    })),
-    focusBorderColor: getIn(theme.colors, getBackgroundColorToken({
-      property: 'border',
+    focusBackgroundColor: resolveBackgroundValue(getBackgroundColorToken({
       variant: variant,
       color: color,
       state: 'focus'
     })),
+    focusBoxShadow: getBoxShadow('focus', color),
     focusRingColor: getIn(theme.colors, 'surface.border.primary.muted'),
-    borderWidth: variant == 'secondary' ? makeBorderSize(theme.border.width.thin) : '0px',
-    borderRadius: makeBorderSize(theme.border.radius.medium),
+    borderRadius: makeBorderSize(theme.border.radius[buttonBorderRadius[size]]),
     motionDuration: 'duration.xquick',
     motionEasing: 'easing.standard'
   };
   if (isDisabled) {
-    var disabledBackgroundColor = getIn(theme.colors, getBackgroundColorToken({
-      property: 'background',
-      variant: variant,
-      color: color,
-      state: 'disabled'
-    }));
-    var disabledBorderColor = getIn(theme.colors, getBackgroundColorToken({
-      property: 'border',
+    var disabledBackgroundColor = resolveBackgroundValue(getBackgroundColorToken({
       variant: variant,
       color: color,
       state: 'disabled'
@@ -221,62 +240,62 @@ var getProps = function getProps(_ref3) {
       state: 'disabled'
     });
     props.defaultBackgroundColor = disabledBackgroundColor;
-    props.defaultBorderColor = disabledBorderColor;
+    props.defaultBoxShadow = getBoxShadow('disabled', color);
     props.hoverBackgroundColor = disabledBackgroundColor;
-    props.hoverBorderColor = disabledBorderColor;
+    props.hoverBoxShadow = getBoxShadow('disabled', color);
     props.focusBackgroundColor = disabledBackgroundColor;
-    props.focusBorderColor = disabledBorderColor;
+    props.focusBoxShadow = getBoxShadow('disabled', color);
   }
   return props;
 };
 var ButtonContent = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "BaseButton__ButtonContent",
   componentId: "zf1huq-0"
-})(function (_ref4) {
-  var isHidden = _ref4.isHidden;
+})(function (_ref5) {
+  var isHidden = _ref5.isHidden;
   return {
     opacity: isHidden ? 0 : 1
   };
 });
-var _BaseButton = function _BaseButton(_ref5, ref) {
-  var _buttonGroupProps$siz, _buttonGroupProps$var, _buttonGroupProps$col, _accessibilityProps$r, _buttonGroupProps$isF;
-  var href = _ref5.href,
-    target = _ref5.target,
-    rel = _ref5.rel,
-    tabIndex = _ref5.tabIndex,
-    id = _ref5.id,
-    _ref5$variant = _ref5.variant,
-    variant = _ref5$variant === void 0 ? 'primary' : _ref5$variant,
-    _ref5$color = _ref5.color,
-    color = _ref5$color === void 0 ? 'primary' : _ref5$color,
-    _ref5$size = _ref5.size,
-    size = _ref5$size === void 0 ? 'medium' : _ref5$size,
-    Icon = _ref5.icon,
-    _ref5$iconPosition = _ref5.iconPosition,
-    iconPosition = _ref5$iconPosition === void 0 ? 'left' : _ref5$iconPosition,
-    _ref5$isDisabled = _ref5.isDisabled,
-    isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
-    _ref5$isFullWidth = _ref5.isFullWidth,
-    isFullWidth = _ref5$isFullWidth === void 0 ? false : _ref5$isFullWidth,
-    _ref5$isLoading = _ref5.isLoading,
-    isLoading = _ref5$isLoading === void 0 ? false : _ref5$isLoading,
-    onClick = _ref5.onClick,
-    onBlur = _ref5.onBlur,
-    _onKeyDown = _ref5.onKeyDown,
-    _ref5$type = _ref5.type,
-    type = _ref5$type === void 0 ? 'button' : _ref5$type,
-    children = _ref5.children,
-    testID = _ref5.testID,
-    onFocus = _ref5.onFocus,
-    onMouseLeave = _ref5.onMouseLeave,
-    onMouseMove = _ref5.onMouseMove,
-    _onMouseDown = _ref5.onMouseDown,
-    onPointerDown = _ref5.onPointerDown,
-    onPointerEnter = _ref5.onPointerEnter,
-    accessibilityProps = _ref5.accessibilityProps,
-    _onTouchEnd = _ref5.onTouchEnd,
-    _onTouchStart = _ref5.onTouchStart,
-    rest = _objectWithoutProperties(_ref5, _excluded);
+var _BaseButton = function _BaseButton(_ref6, ref) {
+  var _buttonGroupProps$siz, _buttonGroupProps$var, _buttonGroupProps$col, _accessibilityProps$r, _buttonGroupProps$var2, _buttonGroupProps$col2, _buttonGroupProps$siz2, _buttonGroupProps$isF;
+  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 _useTheme = useTheme(),
     theme = _useTheme.theme;
   var buttonGroupProps = useButtonGroupContext();
@@ -315,8 +334,8 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
       color: (_buttonGroupProps$col = buttonGroupProps.color) !== null && _buttonGroupProps$col !== void 0 ? _buttonGroupProps$col : color,
       hasIcon: Boolean(Icon)
     }),
-    defaultBorderColor = _getProps.defaultBorderColor,
     defaultBackgroundColor = _getProps.defaultBackgroundColor,
+    defaultBoxShadow = _getProps.defaultBoxShadow,
     minHeight = _getProps.minHeight,
     height = _getProps.height,
     width = _getProps.width,
@@ -324,21 +343,19 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
     buttonPaddingBottom = _getProps.buttonPaddingBottom,
     buttonPaddingLeft = _getProps.buttonPaddingLeft,
     buttonPaddingRight = _getProps.buttonPaddingRight,
-    focusBorderColor = _getProps.focusBorderColor,
+    focusBoxShadow = _getProps.focusBoxShadow,
     focusBackgroundColor = _getProps.focusBackgroundColor,
     focusRingColor = _getProps.focusRingColor,
     fontSize = _getProps.fontSize,
-    hoverBorderColor = _getProps.hoverBorderColor,
+    hoverBoxShadow = _getProps.hoverBoxShadow,
     hoverBackgroundColor = _getProps.hoverBackgroundColor,
     hoverIconColor = _getProps.hoverIconColor,
     iconColor = _getProps.iconColor,
     iconSize = _getProps.iconSize,
-    iconPadding = _getProps.iconPadding,
     spinnerSize = _getProps.spinnerSize,
     lineHeight = _getProps.lineHeight,
     text = _getProps.text,
     textColor = _getProps.textColor,
-    borderWidth = _getProps.borderWidth,
     borderRadius = _getProps.borderRadius,
     motionDuration = _getProps.motionDuration,
     motionEasing = _getProps.motionEasing;
@@ -379,21 +396,22 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
     accessibilityProps: _objectSpread({}, makeAccessible(_objectSpread(_objectSpread({}, accessibilityProps), {}, {
       role: (_accessibilityProps$r = accessibilityProps === null || accessibilityProps === void 0 ? void 0 : accessibilityProps.role) !== null && _accessibilityProps$r !== void 0 ? _accessibilityProps$r : defaultRole
     }))),
-    variant: variant,
-    color: color,
+    variant: (_buttonGroupProps$var2 = buttonGroupProps.variant) !== null && _buttonGroupProps$var2 !== void 0 ? _buttonGroupProps$var2 : variant,
+    color: (_buttonGroupProps$col2 = buttonGroupProps.color) !== null && _buttonGroupProps$col2 !== void 0 ? _buttonGroupProps$col2 : color,
+    size: (_buttonGroupProps$siz2 = buttonGroupProps.size) !== null && _buttonGroupProps$siz2 !== void 0 ? _buttonGroupProps$siz2 : size,
     isLoading: isLoading,
     disabled: disabled,
-    defaultBorderColor: defaultBorderColor,
     minHeight: minHeight,
     buttonPaddingTop: buttonPaddingTop,
     buttonPaddingBottom: buttonPaddingBottom,
     buttonPaddingLeft: buttonPaddingLeft,
     buttonPaddingRight: buttonPaddingRight,
     defaultBackgroundColor: defaultBackgroundColor,
-    focusBorderColor: focusBorderColor,
+    defaultBoxShadow: defaultBoxShadow,
+    focusBoxShadow: focusBoxShadow,
     focusBackgroundColor: focusBackgroundColor,
     focusRingColor: focusRingColor,
-    hoverBorderColor: hoverBorderColor,
+    hoverBoxShadow: hoverBoxShadow,
     hoverBackgroundColor: hoverBackgroundColor,
     isFullWidth: (_buttonGroupProps$isF = buttonGroupProps.isFullWidth) !== null && _buttonGroupProps$isF !== void 0 ? _buttonGroupProps$isF : isFullWidth,
     onClick: onClick,
@@ -419,7 +437,6 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
       _onTouchEnd === null || _onTouchEnd === void 0 || _onTouchEnd(event);
     },
     type: type,
-    borderWidth: borderWidth,
     borderRadius: borderRadius,
     motionDuration: motionDuration,
     motionEasing: motionEasing,
@@ -455,7 +472,7 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
         children: /*#__PURE__*/jsx(BaseSpinner, {
           accessibilityLabel: "Loading",
           size: spinnerSize,
-          color: color === 'transparent' ? 'primary' : color
+          color: color && color !== 'primary' && color !== 'transparent' && color in spinnerColor ? spinnerColor[color][variant] : spinnerColor.base[variant]
         })
       }) : null, /*#__PURE__*/jsxs(ButtonContent, {
         display: "flex",
@@ -466,7 +483,6 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
         isHidden: isLoading,
         zIndex: 1,
         children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(BaseBox, {
-          paddingRight: iconPadding,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -475,6 +491,7 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
             color: iconColor
           })
         }) : null, text ? isChildrenComponent ? children : /*#__PURE__*/jsx(BaseText, {
+          marginX: "spacing.2",
           lineHeight: lineHeight,
           fontSize: fontSize
           // figma and web have different font-smoothing properties
@@ -487,7 +504,6 @@ var _BaseButton = function _BaseButton(_ref5, ref) {
           color: textColor,
           children: text
         }) : null, Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(BaseBox, {
-          paddingLeft: iconPadding,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -504,5 +520,5 @@ var BaseButton = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__defau
   displayName: 'BaseButton'
 });
 
-export { BaseButton as default, getBackgroundColorToken, getTextColorToken };
+export { BaseButton as default, getBackgroundColorToken, getBoxShadowToken, getTextColorToken };
 //# sourceMappingURL=BaseButton.js.map