@zohodesk/components 1.0.0-temp-48 → 1.0.0-temp-51

package/es/Stencils/Stencils.module.css

@@ -14,28 +14,18 @@
   background-size: 800px 1px;
 }
 [dir=ltr] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-ltr ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-ltr ;
-  -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-rtl ;
-  -webkit-animation-timing-function: linear;
 }
 @keyframes placeHolderShimmer-ltr {
   0% {

package/es/Tab/Tabs.js

@@ -266,13 +266,14 @@ class Tabs extends React.Component {
     let {
       children,
       maxTabsCount,
-      minTabsCount
+      minTabsCount,
+      isResponsive
     } = this.props;
     let mainTabs = [],
         moreTabs = [],
         otherTabs = [];
 
-    if (totalDimension) {
+    if (totalDimension && isResponsive) {
       let {
         childType,
         selectedTab
@@ -318,6 +319,17 @@ class Tabs extends React.Component {
         mainTabs = newTabs; */
         this.setMaxDim(totalDimension);
       }
+    } else if (!isResponsive) {
+      let {
+        childType
+      } = this.props;
+      React.Children.forEach(children, child => {
+        if (child && child.type === childType && child.props.id) {
+          mainTabs.push(child);
+        } else {
+          otherTabs.push(child);
+        }
+      });
     } else {
       moreTabs = children;
     }

package/es/Tag/Tag.js

@@ -78,7 +78,9 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
-      a11y
+      a11y,
+      needEffect,
+      isReadOnly
     } = this.props;
     let {
       customTag = '',
@@ -93,7 +95,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
       ref: this.getRef,
@@ -148,7 +150,9 @@ Tag.defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  a11y: {}
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false
 };
 Tag.propTypes = {
   active: PropTypes.bool,
@@ -179,7 +183,9 @@ Tag.propTypes = {
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
-  })
+  }),
+  needEffect: PropTypes.bool,
+  isReadOnly: PropTypes.bool
 };
 
 if (false) {

package/es/Tag/Tag.module.css

@@ -50,9 +50,12 @@
 }
 .disabled {
   pointer-events: none;
-  --tag_cursor: not-allowed;
   --tag_text_color: var(--zdt_tag_disabled_text);
 }
+.readonly,
+.disabled {
+  --tag_cursor: not-allowed;
+}
 .pointer {
   --tag_cursor: pointer;
 }
@@ -158,11 +161,11 @@
 .danger {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
-.default:hover {
+.effect.default:hover {
   --tag_bg_color: var(--zdt_tag_default_hover_bg);
 }
 .activedefault,
-.activedefault:hover {
+.effect.activedefault:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 .activeprimaryClose,
@@ -170,11 +173,11 @@
   --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
 }
 
-.danger:hover {
+.effect.danger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedanger,
-.activedanger:hover {
+.effect.activedanger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedangerClose,
@@ -187,7 +190,7 @@
   --tag_text_color: var(--zdt_tag_secondary_text);
 }
 .activesecondary,
-.secondary:hover {
+.effect.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
 
@@ -196,12 +199,12 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_pure_border);
 }
-.pureDotted:hover {
+.effect.pureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_hover_bg);
   --tag_border_color: var(--zdt_tag_pure_hover_border);
 }
 .activepureDotted,
-.activepureDotted:hover {
+.effect.activepureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_bg);
 }
 
@@ -210,10 +213,10 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_primary_border);
 }
-.primaryDotted:hover,
+.effect.primaryDotted:hover,
 .activeprimaryDotted,
 .primary,
-.primary:hover {
+.effect.primary:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 
@@ -228,7 +231,7 @@
   --tag_bg_color: var(--zdt_tag_dark_bg);
   --tag_text_color: var(--zdt_tag_dark_text);
 }
-.dark:hover {
+.effect.dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
   --tag_text_color: var(--zdt_tag_dark_hover_text);
 }

package/es/TextBoxIcon/TextBoxIcon.js

@@ -100,8 +100,8 @@ export default class TextBoxIcon extends React.Component {
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : '' : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
-      "data-title": isDisabled ? title : ''
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBox, _extends({}, this.props, {

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -12,8 +12,11 @@
   composes: varClass;
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled,.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+.disabled, .readonly {
+  cursor: not-allowed;
 }
 .icon {
   composes: offSelection from '../common/common.module.css';

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -23,7 +23,7 @@ export default class VelocityAnimation extends React.Component {
     let {
       direction,
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
     let enterAnimationObj = {
       fade: 'transition.fadeIn',
       slideDown: 'slideDown',

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -41,7 +41,7 @@ export default class VelocityAnimationGroup extends React.Component {
     let {
       direction,
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
     let childProps = clearProps(this.props);
     let enterAnimationObj = {
       fade: 'transition.fadeIn',

package/es/common/docStyle.module.css

@@ -94,18 +94,18 @@
 }
 
 .blue {
-  color: var(--zd_text_prime);
+  color: var(--zd_prime);
 }
 
 .dark {
   composes: p10;
-  background-color: var(--dot_bg_black);
+  background-color: var(--dot_black);
 }
 
 .table {
   composes: p10;
   composes: cboth;
-  border: 1px solid var(--zd_border_smoke84);
+  border: 1px solid var(--zd_smoke84);
   border-radius: 3px;
 }
 
@@ -119,7 +119,7 @@
 
 .tableheading {
   composes: blue;
-  background: var(--zd_bg_smoke1);
+  background:var(--zd_smoke1);
 }
 
 .palette {
@@ -130,13 +130,13 @@
   width: 200px;
   composes: tcenter;
   font-weight: bold;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
 }
 
 .palette .palettecard {
   height: 80px;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
 }
 
 .palette span {
@@ -149,7 +149,7 @@
   composes: tcenter;
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
 }
 
@@ -161,7 +161,7 @@
 .cover {
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke1);
+  border: 1px solid var(--zd_smoke1);
   border-radius: 5px;
 }
 
@@ -759,4 +759,4 @@
   --textarea_text_color: hsl(var(--hue), 100%, 80%);
   --textarea_padding: 2px 10px;
   background-color: hsl(var(--hue), 100%, 97%);
-}
+}

package/es/utils/dropDownUtils.js

@@ -406,4 +406,42 @@ export const filterSelectedOptions = function () {
   return {
     newSelectedOptions: [...oldValidSelectedOptions, ...newlyAddedOptions]
   };
-};
+};
+export const makeGetIsShowClearIcon = () => createSelector([getSelectedOptionsSel, getDisabledOptions], (selectedOptions, disabledOptions) => {
+  let countForShowClear = 2;
+  let enabledOptionsLength = 0;
+  let isShowClearIcon = selectedOptions.length >= countForShowClear;
+
+  if (disabledOptions.length) {
+    let isHaveEnabledOptions = false;
+    let isAllDisabled = disabledOptions.length === selectedOptions.length;
+
+    if (!isAllDisabled) {
+      isHaveEnabledOptions = selectedOptions.some(option => {
+        let {
+          isDisabled = false
+        } = option || {};
+
+        if (!isDisabled) {
+          enabledOptionsLength += 1;
+
+          if (enabledOptionsLength === countForShowClear) {
+            return true;
+          }
+
+          return false;
+        }
+
+        return false;
+      });
+    }
+
+    return {
+      isShowClearIcon: isAllDisabled ? !isAllDisabled : isHaveEnabledOptions
+    };
+  }
+
+  return {
+    isShowClearIcon
+  };
+});

package/lib/Animation/Animation.js

@@ -188,14 +188,13 @@ Animation.defaultProps = {
   isActive: false,
   name: 'fadeIn',
   unmountOnExit: true
-};
-Animation.propTypesDescription = {
-  name: ' ',
-  children: ' ',
-  enterDuration: ' ',
-  exitDuration: ' ',
-  isActive: ' '
-};
+}; // Animation.propTypesDescription = {
+//   name: ' ',
+//   children: ' ',
+//   enterDuration: ' ',
+//   exitDuration: ' ',
+//   isActive: ' '
+// };
 
 if (false) {
   Animation.docs = {

package/lib/AppContainer/AppContainer.js

@@ -17,22 +17,24 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
 require("../common/basic.module.css");
 
-require("@zohodesk/variables/lib/colorVariables.module.css");
+require("@zohodesk/variables/assets/colorVariables.module.css");
 
-require("@zohodesk/variables/lib/dotVariables.module.css");
+require("@zohodesk/variables/assets/dotVariables.module.css");
 
-require("@zohodesk/variables/lib/sizeVariables.module.css");
+require("@zohodesk/variables/assets/sizeVariables.module.css");
 
-require("@zohodesk/variables/lib/fontsizeVariables.module.css");
+require("@zohodesk/variables/assets/fontsizeVariables.module.css");
 
 require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
 
-require("@zohodesk/variables/lib/transitionVariables.module.css");
+require("@zohodesk/variables/assets/transitionVariables.module.css");
 
-require("@zohodesk/variables/lib/no_transitionVariables.module.css");
+require("@zohodesk/variables/assets/no_transitionVariables.module.css");
 
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 
+var _Config = require("../Provider/Config");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -70,21 +72,69 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.setTooltipRef = _this.setTooltipRef.bind(_assertThisInitialized(_this));
     _this.handleOver = _this.handleOver.bind(_assertThisInitialized(_this));
+    _this.mouseOverDispatch = _this.mouseOverDispatch.bind(_assertThisInitialized(_this));
+    _this.removeTimeout = _this.removeTimeout.bind(_assertThisInitialized(_this));
+    _this.getContainerRef = _this.getContainerRef.bind(_assertThisInitialized(_this));
+    _this.timer = null;
+    _this.tooltipDebounce = (0, _Config.getLibraryConfig)('tooltipDebounce');
     return _this;
   }
 
   _createClass(AppContainer, [{
-    key: "handleOver",
-    value: function handleOver(e) {
+    key: "mouseOverDispatch",
+    value: function mouseOverDispatch(e) {
       if (this.tooltipRef) {
         this.tooltipRef.handleOver(e);
       }
     }
+  }, {
+    key: "removeTimeout",
+    value: function removeTimeout() {
+      if (this.timer) {
+        this.timer = clearTimeout(this.timer);
+      }
+    }
+  }, {
+    key: "handleOver",
+    value: function handleOver(e) {
+      var _this2 = this;
+
+      if (this.timer) {
+        this.timer = clearTimeout(this.timer);
+      }
+
+      this.timer = setTimeout(function () {
+        return _this2.mouseOverDispatch(e);
+      }, this.tooltipDebounce);
+    }
+  }, {
+    key: "getContainerRef",
+    value: function getContainerRef(ref) {
+      var eleRef = this.props.eleRef;
+      this.containerElement = ref;
+      eleRef && eleRef(ref);
+    }
   }, {
     key: "setTooltipRef",
     value: function setTooltipRef(ref) {
       this.tooltipRef = ref;
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.containerElement) {
+        this.containerElement.addEventListener('mouseover', this.handleOver, false);
+        this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.containerElement) {
+        this.containerElement.removeEventListener('mouseover', this.handleOver, false);
+        this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -93,7 +143,6 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
           children = _this$props.children,
           tagName = _this$props.tagName,
           dataId = _this$props.dataId,
-          eleRef = _this$props.eleRef,
           tooltipClass = _this$props.tooltipClass,
           tooltipParentClass = _this$props.tooltipParentClass,
           customProps = _this$props.customProps;
@@ -104,11 +153,11 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
           _customProps$ExtraPro = customProps.ExtraProps,
           ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_AppContainerModule["default"].container, " ").concat(className),
-        onMouseOver: this.handleOver,
+        className: "".concat(_AppContainerModule["default"].container, " ").concat(className) //onMouseOver={this.handleOver}
+        ,
         dataId: dataId,
         tagName: tagName,
-        eleRef: eleRef
+        eleRef: this.getContainerRef
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, children)), /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {

package/lib/Avatar/Avatar.js

@@ -203,7 +203,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       borderStyle = showAlternateAvatar ? '' : borderStyle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : ''),
-        "data-title": needTitle ? title ? title : name : '',
+        "data-title": needTitle ? title ? title : name : null,
         "data-id": dataId,
         onClick: onClick
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
@@ -259,16 +259,16 @@ Avatar.propTypes = {
   customProps: _propTypes["default"].shape({
     AvatarProps: _propTypes["default"].object
   })
-};
-Avatar.propTypesDescription = {
-  name: ' ',
-  size: ' ',
-  src: ' ',
-  palette: ' ',
-  onClick: ' ',
-  shape: ' ',
-  title: ' '
-};
+}; // Avatar.propTypesDescription = {
+//   name: ' ',
+//   size: ' ',
+//   src: ' ',
+//   palette: ' ',
+//   onClick: ' ',
+//   shape: ' ',
+//   title: ' '
+// };
+
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
 

package/lib/Button/Button.js

@@ -17,8 +17,6 @@ var _dummyFunction = require("../utils/dummyFunction");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -74,8 +72,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           needAppearance = _this$props.needAppearance,
           getRef = _this$props.getRef,
           title = _this$props.title,
-          customClass = _this$props.customClass,
-          customProps = _this$props.customProps;
+          customClass = _this$props.customClass;
       var _customClass$customBu = customClass.customButton,
           customButton = _customClass$customBu === void 0 ? '' : _customClass$customBu,
           _customClass$customSt = customClass.customStatus,
@@ -84,8 +81,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
           customStatusSize = _customClass$customSt2 === void 0 ? '' : _customClass$customSt2;
       var paletteLower = palette.toLowerCase();
       var statusLower = status.toLowerCase();
-      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : '')) : "".concat(_ButtonModule["default"]["default"]);
-      return /*#__PURE__*/_react["default"].createElement("button", _extends({
+      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : ''), " ").concat(statusLower !== 'none' ? _ButtonModule["default"].loader : '') : "".concat(_ButtonModule["default"]["default"]);
+      return /*#__PURE__*/_react["default"].createElement("button", {
         className: "".concat(customButton, " ").concat(classList, " ").concat(isBold ? _ButtonModule["default"].bold : '', "  "),
         "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
         disabled: disabled || statusLower === 'loading',
@@ -93,12 +90,12 @@ var Button = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         type: "button",
         ref: getRef
-      }, customProps), children ? children : text, status !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+      }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtonModule["default"].overlay
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")]) : _ButtonModule["default"].success)
+        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")] ? _ButtonModule["default"]["".concat(size, "loading")] : '') : _ButtonModule["default"].success)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")]) : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")]))
+        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")] ? _ButtonModule["default"]["".concat(paletteLower, "element")] : '') : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")] ? _ButtonModule["default"]["".concat(paletteLower, "success")] : ''))
       }))));
     }
   }]);
@@ -119,8 +116,7 @@ Button.defaultProps = {
   size: 'medium',
   status: 'none',
   text: 'Button',
-  customClass: {},
-  customProps: {}
+  customClass: {}
 };
 Button.propTypes = {
   children: _propTypes["default"].node,
@@ -142,18 +138,17 @@ Button.propTypes = {
     customStatus: _propTypes["default"].string,
     customStatusSize: _propTypes["default"].string
   })
-};
-Button.propTypesDescription = {
-  onClick: ' ',
-  text: ' ',
-  palette: ' ',
-  disabled: ' ',
-  size: ' ',
-  rounded: ' ',
-  status: ' ',
-  isBold: ' ',
-  children: ' '
-};
+}; // Button.propTypesDescription = {
+//   onClick: ' ',
+//   text: ' ',
+//   palette: ' ',
+//   disabled: ' ',
+//   size: ' ',
+//   rounded: ' ',
+//   status: ' ',
+//   isBold: ' ',
+//   children: ' '
+// };
 
 if (false) {
   Button.docs = {

package/lib/Button/Button.module.css

@@ -362,17 +362,20 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .primarysuccess {
   --button_success_border_color: var(--zdt_button_default_border);
 }
+
 .primaryfilled .successelement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
@@ -456,7 +459,6 @@
   top: calc(var(--zd_size2) * -1);
   width: var(--zd_size6);
   transform: scaleX(-1) rotate(135deg);
-  -ms-transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
   transform-origin: center;
@@ -515,4 +517,6 @@
     height: var(--zd_size15);
     width: var(--zd_size6);
   }
-}
+}
+
+.loader{color:var(--dot_mirror)}