@zohodesk/components 1.0.0-temp-259.1 → 1.0.0-temp-260

package/lib/v1/Button/constants/index.js

@@ -3,33 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VARIANT = exports.TYPOGRAPHY_SIZE_MAP = exports.STATUS = exports.SIZE = exports.SHAPE = exports.PALETTE = exports.LOADER_PLACEMENT = exports.ICON_PLACEMENT = exports.DISABLED_APPEARANCE = exports.DEFAULT_VARIANT = exports.DEFAULT_STATUS = exports.DEFAULT_SIZE = exports.DEFAULT_SHAPE = exports.DEFAULT_SELECTED_APPEARANCE = exports.DEFAULT_LOADER_PLACEMENT = exports.DEFAULT_ICON_SIZE = exports.DEFAULT_ICON_PLACEMENT = exports.DEFAULT_HOVER_APPEARANCE = exports.DEFAULT_DISABLED_APPEARANCE = exports.DEFAULT_BUTTON_TYPE = exports.DEFAULT_APPEARANCE = exports.BUTTON_TYPE = exports.APPEARANCE = void 0;
+exports.VARIANT = exports.TYPOGRAPHY_SIZE_MAP = exports.STATUS = exports.SIZE = exports.SHAPE = exports.PALETTE_SHADE = exports.PALETTE = exports.LOADER_PLACEMENT = exports.ICON_PLACEMENT = exports.DISABLED_APPEARANCE = exports.DEFAULT_VARIANT = exports.DEFAULT_STATUS = exports.DEFAULT_SIZE = exports.DEFAULT_SHAPE = exports.DEFAULT_PALETTE_SHADE = exports.DEFAULT_PALETTE = exports.DEFAULT_LOADER_PLACEMENT = exports.DEFAULT_ICON_SIZE = exports.DEFAULT_ICON_PLACEMENT = exports.DEFAULT_DISABLED_APPEARANCE = exports.DEFAULT_BUTTON_TYPE = exports.DEFAULT_BORDER_APPEARANCE = exports.DEFAULT_BG_APPEARANCE = exports.BUTTON_TYPE = exports.BORDER_APPEARANCE = exports.BG_APPEARANCE = void 0;
 
 var _TYPOGRAPHY_SIZE_MAP;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var PALETTE = {
-  BRAND: 'brand',
-  BRAND_LIGHTER: 'brandLighter',
-  INFO: 'info',
-  INFO_LIGHTER: 'infoLighter',
+  DEFAULT: 'default',
+  PRIMARY: 'primary',
   SECONDARY: 'secondary',
-  SECONDARY_LIGHTER: 'secondaryLighter',
   DANGER: 'danger',
-  DANGER_LIGHTER: 'dangerLighter',
-  SUCCESS: 'success',
-  SUCCESS_LIGHTER: 'successLighter',
-  WARNING: 'warning',
-  WARNING_LIGHTER: 'warningLighter'
+  SUCCESS: 'success'
 };
 exports.PALETTE = PALETTE;
-var APPEARANCE = {
-  BORDER: 'border',
-  TEXT: 'text',
-  BG: 'bg'
+var BG_APPEARANCE = {
+  DEFAULT: 'default',
+  ON_HOVER: 'onHover',
+  NONE: 'none'
+};
+exports.BG_APPEARANCE = BG_APPEARANCE;
+var BORDER_APPEARANCE = {
+  DEFAULT: 'default',
+  ON_HOVER: 'onHover',
+  NONE: 'none'
 };
-exports.APPEARANCE = APPEARANCE;
+exports.BORDER_APPEARANCE = BORDER_APPEARANCE;
 var VARIANT = {
   TEXT: 'text',
   ICON: 'icon',
@@ -60,6 +59,11 @@ var ICON_PLACEMENT = {
   RIGHT: 'right'
 };
 exports.ICON_PLACEMENT = ICON_PLACEMENT;
+var PALETTE_SHADE = {
+  DEFAULT: 'default',
+  LIGHTER: 'lighter'
+};
+exports.PALETTE_SHADE = PALETTE_SHADE;
 var SHAPE = {
   PILL: 'pill',
   RECTANGLE: 'rectangle',
@@ -82,21 +86,12 @@ var TYPOGRAPHY_SIZE_MAP = (_TYPOGRAPHY_SIZE_MAP = {}, _defineProperty(_TYPOGRAPH
 /** Default values referenced by both defaultProps and cssJSLogic */
 
 exports.TYPOGRAPHY_SIZE_MAP = TYPOGRAPHY_SIZE_MAP;
-var DEFAULT_APPEARANCE = {
-  bg: true,
-  text: true
-};
-exports.DEFAULT_APPEARANCE = DEFAULT_APPEARANCE;
-var DEFAULT_HOVER_APPEARANCE = {
-  bg: true,
-  text: true
-};
-exports.DEFAULT_HOVER_APPEARANCE = DEFAULT_HOVER_APPEARANCE;
-var DEFAULT_SELECTED_APPEARANCE = {
-  bg: true,
-  text: true
-};
-exports.DEFAULT_SELECTED_APPEARANCE = DEFAULT_SELECTED_APPEARANCE;
+var DEFAULT_PALETTE = PALETTE.DEFAULT;
+exports.DEFAULT_PALETTE = DEFAULT_PALETTE;
+var DEFAULT_BG_APPEARANCE = BG_APPEARANCE.DEFAULT;
+exports.DEFAULT_BG_APPEARANCE = DEFAULT_BG_APPEARANCE;
+var DEFAULT_BORDER_APPEARANCE = BORDER_APPEARANCE.DEFAULT;
+exports.DEFAULT_BORDER_APPEARANCE = DEFAULT_BORDER_APPEARANCE;
 var DEFAULT_VARIANT = VARIANT.TEXT;
 exports.DEFAULT_VARIANT = DEFAULT_VARIANT;
 var DEFAULT_SIZE = SIZE.MEDIUM;
@@ -109,6 +104,8 @@ var DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.LEFT;
 exports.DEFAULT_ICON_PLACEMENT = DEFAULT_ICON_PLACEMENT;
 var DEFAULT_ICON_SIZE = 16;
 exports.DEFAULT_ICON_SIZE = DEFAULT_ICON_SIZE;
+var DEFAULT_PALETTE_SHADE = PALETTE_SHADE.DEFAULT;
+exports.DEFAULT_PALETTE_SHADE = DEFAULT_PALETTE_SHADE;
 var DEFAULT_SHAPE = SHAPE.ROUNDED_RECTANGLE;
 exports.DEFAULT_SHAPE = DEFAULT_SHAPE;
 var DEFAULT_DISABLED_APPEARANCE = DISABLED_APPEARANCE.DULL;

package/lib/v1/Button/css/Button_v1.module.css

@@ -5,15 +5,13 @@
     --local-button-gap: var(--zd_size8);
     --local-button-padding-block: var(--zd_size6);
     --local-button-padding-inline: var(--zd_size15);
+    --local-button-font-size: var(--zd_font_size13);
     --local-loader-size: 16px;
     --local-tick-size: 16px;
     --local-button-height: auto;
     --local-button-width: auto;
-    --local-button-min-width: var(--zd_size90);
-    --local-button-overlay-opacity: 0.4;
-    --local-button-transition-duration: var(--zd_transition2);
-    --local-button-cursor: pointer;
-    --local-button-strike-color: currentColor;
+    --local-button-overlay-opacity: 0.48;
+    --local-button-transition-duration: var(--zd_transition3);
 }
 
 .button {
@@ -21,20 +19,19 @@
     composes: posrel pointer from '../../../common/common.module.css';
     padding-block: var(--local-button-padding-block);
     padding-inline: var(--local-button-padding-inline);
+    font-size: var(--local-button-font-size);
     height: var(--local-button-height);
     width: var(--local-button-width);
-    min-width: var(--local-button-min-width);
     border-radius: var(--local-button-radius);
     border-style: var(--local-button-border-style);
     border-width: var(--local-button-border-width);
     transition-duration: var(--local-button-transition-duration);
     transition-timing-function: ease;
-    cursor: var(--local-button-cursor);
     background-image: none;
 }
 
 .disabledPointer {
-    --local-button-cursor: not-allowed;
+    cursor: not-allowed;
 }
 
 .disabledOpac {
@@ -42,20 +39,7 @@
 }
 
 .loading {
-    --local-button-cursor: progress;
-    composes: disabledOpac;
-}
-
-.variantText {
-    --local-button-min-width: var(--zd_size90);
-}
-
-.variantIcon {
-    --local-button-min-width: var(--zd_size28);
-}
-
-.variantIconWithText {
-    --local-button-min-width: var(--zd_size118);
+    cursor: progress;
 }
 
 .sizeSmall {
@@ -84,14 +68,6 @@
     --local-button-width: 100%;
 }
 
-.sizeSmall.variantText {
-    --local-button-min-width: var(--zd_size50);
-}
-
-.sizeSmall.variantIconWithText {
-    --local-button-min-width: var(--zd_size78);
-}
-
 .shapeRoundedRectangle {
     --local-button-radius: 4px;
 }
@@ -104,11 +80,9 @@
     --local-button-radius: 0;
 }
 
-.strike::after,
-.loaderOverlay,
-.successOverlay {
+.loaderOverlay {
     inset: 0 ;
-    position: absolute;
+    composes: posab from '../../../common/common.module.css';
 }
 
 .contentWrapper {
@@ -124,17 +98,22 @@
 
 .strike::after {
     content: '';
-    opacity: var(--local-button-overlay-opacity);
+    position: absolute;
+    inset: 0 ;
     pointer-events: none;
     border-radius: var(--local-button-radius);
 }
 
 [dir=ltr] .strike::after {
-    background-image: repeating-linear-gradient(120deg, var(--local-button-strike-color) 0 1px, var(--zd-bg-transparent) 1px 8px);
+    background-image: repeating-linear-gradient(120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
 }
 
 [dir=rtl] .strike::after {
-    background-image: repeating-linear-gradient(-120deg, var(--local-button-strike-color) 0 1px, var(--zd-bg-transparent) 1px 8px);
+    background-image: repeating-linear-gradient(-120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
 }
 
+.successOverlay {
+    inset: 0 ;
+    composes: posab from '../../../common/common.module.css';
+}
 

package/lib/v1/Button/css/cssJSLogic.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = cssJSLogic;
 
-var _compileClassNames6 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
-
-var _constants = require("@zohodesk/dotkit/es/utils/constants");
+var _Button_v1Module = _interopRequireDefault(require("./Button_v1.module.css"));
 
-var _constants2 = require("../constants");
+var _compileClassNames4 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
 
 var _semanticButtonModule = _interopRequireDefault(require("../../../semantic/Button/semanticButton.module.css"));
 
 var _colorHelper = _interopRequireDefault(require("../../helpers/colorHelpers/colorHelper"));
 
-var _Button_v1Module = _interopRequireDefault(require("./Button_v1.module.css"));
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
+var _constants2 = require("../constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -31,13 +31,13 @@ function cssJSLogic(_ref) {
 
   var props = _ref.props;
   var palette = props.palette,
-      appearance = props.appearance,
-      hoverAppearance = props.hoverAppearance,
-      selectedAppearance = props.selectedAppearance,
+      bgAppearance = props.bgAppearance,
+      borderAppearance = props.borderAppearance,
+      paletteShade = props.paletteShade,
       size = props.size,
-      variant = props.variant,
       status = props.status,
       isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
       isSelected = props.isSelected,
       shape = props.shape,
       loaderPlacement = props.loaderPlacement,
@@ -49,57 +49,44 @@ function cssJSLogic(_ref) {
       _customClass$text = customClass.text,
       textClassCustom = _customClass$text === void 0 ? '' : _customClass$text,
       _customClass$icon = customClass.icon,
-      iconClassCustom = _customClass$icon === void 0 ? '' : _customClass$icon,
-      _customClass$loader = customClass.loader,
-      loaderClassCustom = _customClass$loader === void 0 ? '' : _customClass$loader,
-      _customClass$success = customClass.success,
-      successClassCustom = _customClass$success === void 0 ? '' : _customClass$success;
+      iconClassCustom = _customClass$icon === void 0 ? '' : _customClass$icon;
   var isLoading = status === _constants2.STATUS.LOADING;
   var isSuccess = status === _constants2.STATUS.SUCCESS;
-  var isInteractive = !isDisabled && !isLoading;
+  var isInteractive = !isDisabled && !isReadOnly;
   var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
 
   var _getPaletteClasses = (0, _colorHelper["default"])({
     palette: palette,
-    appearance: appearance,
-    hoverAppearance: hoverAppearance,
-    selectedAppearance: selectedAppearance
+    bgAppearance: bgAppearance,
+    borderAppearance: borderAppearance,
+    paletteShade: paletteShade,
+    isSelected: isSelected
   }),
       bg = _getPaletteClasses.bg,
-      selectedBg = _getPaletteClasses.selectedBg,
       hoverBg = _getPaletteClasses.hoverBg,
       focusBg = _getPaletteClasses.focusBg,
       activeBg = _getPaletteClasses.activeBg,
       text = _getPaletteClasses.text,
-      selectedText = _getPaletteClasses.selectedText,
       hoverText = _getPaletteClasses.hoverText,
       focusText = _getPaletteClasses.focusText,
       activeText = _getPaletteClasses.activeText,
       border = _getPaletteClasses.border,
-      selectedBorder = _getPaletteClasses.selectedBorder,
       hoverBorder = _getPaletteClasses.hoverBorder,
       focusBorder = _getPaletteClasses.focusBorder,
       activeBorder = _getPaletteClasses.activeBorder;
 
   var sizeClass = size ? _Button_v1Module["default"]["size".concat(capitalize(size))] : '';
   var shapeClass = shape ? _Button_v1Module["default"]["shape".concat(capitalize(shape))] : '';
-  var variantClass = variant ? _Button_v1Module["default"]["variant".concat(capitalize(variant))] : '';
   var shouldStrike = disabledAppearance === _constants2.DISABLED_APPEARANCE.STRIKE && isDisabled;
-  var buttonClassName = (0, _compileClassNames6["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg && !(isSelected && !!selectedBg)), _defineProperty(_compileClassNames, selectedBg, !!selectedBg && isSelected), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, text, !!text && !(isSelected && !!selectedText)), _defineProperty(_compileClassNames, selectedText, !!selectedText && isSelected), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive && !isSelected), _defineProperty(_compileClassNames, border, !!border && !(isSelected && !!selectedBorder)), _defineProperty(_compileClassNames, selectedBorder, !!selectedBorder && isSelected), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, variantClass, !!variantClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
-  var textClassName = (0, _compileClassNames6["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
-  var iconClassName = (0, _compileClassNames6["default"])(_defineProperty({}, iconClassCustom, !!iconClassCustom));
+  var buttonClassName = (0, _compileClassNames4["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive), _defineProperty(_compileClassNames, text, !!text), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive), _defineProperty(_compileClassNames, border, !!border), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isReadOnly || isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isReadOnly || isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
+  var textClassName = (0, _compileClassNames4["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
+  var iconClassName = (0, _compileClassNames4["default"])(_defineProperty({}, iconClassCustom, !!iconClassCustom));
   return {
     buttonClassName: buttonClassName,
     textClassName: textClassName,
-    iconClassName: iconClassName,
     contentWrapperClass: overlayActive ? _Button_v1Module["default"].overlayHidden : _Button_v1Module["default"].contentWrapper,
     loaderOverlayClass: _Button_v1Module["default"].loaderOverlay,
     successOverlayClass: _Button_v1Module["default"].successOverlay,
-    loaderClassName: {
-      wrapper: (0, _compileClassNames6["default"])(_defineProperty({}, loaderClassCustom, !!loaderClassCustom))
-    },
-    successClassName: {
-      wrapper: (0, _compileClassNames6["default"])(_defineProperty({}, successClassCustom, !!successClassCustom))
-    }
+    iconClassName: iconClassName
   };
 }

package/lib/v1/Button/props/defaultProps.js

@@ -10,18 +10,19 @@ var _constants = require("@zohodesk/dotkit/es/utils/constants");
 var _constants2 = require("../constants");
 
 var defaultProps = {
-  palette: '',
-  appearance: _constants2.DEFAULT_APPEARANCE,
-  hoverAppearance: _constants2.DEFAULT_HOVER_APPEARANCE,
-  selectedAppearance: _constants2.DEFAULT_SELECTED_APPEARANCE,
+  palette: _constants2.DEFAULT_PALETTE,
+  bgAppearance: _constants2.DEFAULT_BG_APPEARANCE,
+  borderAppearance: _constants2.DEFAULT_BORDER_APPEARANCE,
   variant: _constants2.DEFAULT_VARIANT,
   size: _constants2.DEFAULT_SIZE,
   status: _constants2.DEFAULT_STATUS,
   loaderPlacement: _constants2.DEFAULT_LOADER_PLACEMENT,
   iconPlacement: _constants2.DEFAULT_ICON_PLACEMENT,
   iconSize: _constants2.DEFAULT_ICON_SIZE,
+  paletteShade: _constants2.DEFAULT_PALETTE_SHADE,
   disabledAppearance: _constants2.DEFAULT_DISABLED_APPEARANCE,
   isDisabled: false,
+  isReadOnly: false,
   isSelected: false,
   shape: _constants2.DEFAULT_SHAPE,
   type: _constants2.DEFAULT_BUTTON_TYPE,

package/lib/v1/Button/props/propTypes.js

@@ -11,37 +11,12 @@ var _constants = require("../constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 var renderSlotType = _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]);
 
-var paletteNames = Object.values(_constants.PALETTE);
-
-var bgBorderValueType = _propTypes["default"].oneOfType([_propTypes["default"].oneOf([].concat(_toConsumableArray(paletteNames), ['transparent'])), _propTypes["default"].bool]);
-
-var textValueType = _propTypes["default"].oneOfType([_propTypes["default"].oneOf([].concat(_toConsumableArray(paletteNames), ['black', 'white'])), _propTypes["default"].bool]);
-
-var appearanceType = _propTypes["default"].shape({
-  bg: bgBorderValueType,
-  border: bgBorderValueType,
-  text: textValueType
-});
-
 var propTypes = {
   palette: _propTypes["default"].oneOf(Object.values(_constants.PALETTE)),
-  appearance: appearanceType,
-  hoverAppearance: appearanceType,
-  selectedAppearance: appearanceType,
+  bgAppearance: _propTypes["default"].oneOf(Object.values(_constants.BG_APPEARANCE)),
+  borderAppearance: _propTypes["default"].oneOf(Object.values(_constants.BORDER_APPEARANCE)),
   variant: _propTypes["default"].oneOf(Object.values(_constants.VARIANT)),
   size: _propTypes["default"].oneOf(Object.values(_constants.SIZE)),
   status: _propTypes["default"].oneOf(Object.values(_constants.STATUS)),
@@ -49,6 +24,7 @@ var propTypes = {
   iconName: _propTypes["default"].string,
   iconSize: _propTypes["default"].number,
   iconPlacement: _propTypes["default"].oneOf(Object.values(_constants.ICON_PLACEMENT)),
+  paletteShade: _propTypes["default"].oneOf(Object.values(_constants.PALETTE_SHADE)),
   disabledAppearance: _propTypes["default"].oneOf(Object.values(_constants.DISABLED_APPEARANCE)),
   renderIcon: renderSlotType,
   renderBefore: renderSlotType,
@@ -59,32 +35,22 @@ var propTypes = {
   type: _propTypes["default"].oneOf(Object.values(_constants.BUTTON_TYPE)),
   onClick: _propTypes["default"].func,
   isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
   isSelected: _propTypes["default"].bool,
   shape: _propTypes["default"].oneOf(Object.values(_constants.SHAPE)),
   title: _propTypes["default"].string,
   customClass: _propTypes["default"].shape({
     wrapper: _propTypes["default"].string,
-    text: _propTypes["default"].string,
-    icon: _propTypes["default"].string,
-    loader: _propTypes["default"].string,
-    success: _propTypes["default"].string
+    text: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].shape({
     text: _propTypes["default"].object,
     icon: _propTypes["default"].object
   }),
-  customAttributes: _propTypes["default"].shape({
-    button: _propTypes["default"].object,
-    contentWrapper: _propTypes["default"].object,
-    loader: _propTypes["default"].object,
-    success: _propTypes["default"].object,
-    icon: _propTypes["default"].object,
-    text: _propTypes["default"].object
-  }),
+  customAttributes: _propTypes["default"].object,
   a11yAttributes: _propTypes["default"].object,
   customId: _propTypes["default"].string,
-  testId: _propTypes["default"].string,
-  dataSelectorId: _propTypes["default"].string
+  testId: _propTypes["default"].string
 };
 var _default = propTypes;
 exports["default"] = _default;

package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -1,83 +1,83 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .bg-brand-80 {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .hover\:bg-brand-80:hover {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .focus\:bg-brand-80:focus {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .active\:bg-brand-80:active {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .selected\:bg-brand-80 {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .bg-brand-100 {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .hover\:bg-brand-100:hover {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .focus\:bg-brand-100:focus {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .active\:bg-brand-100:active {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .selected\:bg-brand-100 {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .bg-brand-10 {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 .hover\:bg-brand-10:hover {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 .focus\:bg-brand-10:focus {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 .active\:bg-brand-10:active {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 .selected\:bg-brand-10 {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 /* color not available */
 .bg-brand-20 {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 .hover\:bg-brand-20:hover {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 .focus\:bg-brand-20:focus {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 .active\:bg-brand-20:active {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 .selected\:bg-brand-20 {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 /* Static Grey Palette */
@@ -122,64 +122,64 @@
 }
 
 .bg-grey-10 {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
 .hover\:bg-grey-10:hover {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
 .focus\:bg-grey-10:focus {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
 .active\:bg-grey-10:active {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
 .selected\:bg-grey-10 {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
-.bg-grey-20 {
+.bg-grey-15 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.hover\:bg-grey-20:hover {
+.hover\:bg-grey-15:hover {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.focus\:bg-grey-20:focus {
+.focus\:bg-grey-15:focus {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.active\:bg-grey-20:active {
+.active\:bg-grey-15:active {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.selected\:bg-grey-20 {
+.selected\:bg-grey-15 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
 /* Static Blue Palette */
 .bg-blue-80 {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .hover\:bg-blue-80:hover {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .focus\:bg-blue-80:focus {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .active\:bg-blue-80:active {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .selected\:bg-blue-80 {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .bg-blue-100 {
@@ -569,23 +569,23 @@
 
 /* Utility Colors */
 .bg-transparent {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .hover\:bg-transparent:hover {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .focus\:bg-transparent:focus {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .active\:bg-transparent:active {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .selected\:bg-transparent {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .bg-white {