@zohodesk/components 1.2.29 → 1.2.31

package/es/Tab/Tabs.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 /* eslint-disable react/forbid-component-props */
 
 /* eslint css-modules/no-unused-class: [2, {
@@ -459,7 +457,7 @@ class Tabs extends React.Component {
         classProps.className = itemClass;
       }
 
-      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, _extends({}, child.props, {
+      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, { ...child.props,
         key: child.props.id,
         getTabRef: this.getTabRef,
         onSelect: onSelect,
@@ -470,22 +468,23 @@ class Tabs extends React.Component {
         needBorder: needTabBorder,
         needAppearance: needAppearance,
         align: align,
-        isVirtual: isVirtual
-      }, classProps));
+        isVirtual: isVirtual,
+        ...classProps
+      });
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `,
       dataSelectorId: `${dataSelectorId}_moreIcon`
-    }, /*#__PURE__*/React.createElement(Container, _extends({
+    }, /*#__PURE__*/React.createElement(Container, {
       className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
-      eleRef: getTargetRef
-    }, MoreButtonProps, {
+      eleRef: getTargetRef,
+      ...MoreButtonProps,
       "aria-label": "MoreTabs",
       role: "link",
       tagName: "button"
-    }), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -495,7 +494,7 @@ class Tabs extends React.Component {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         isActive: isPopupReady,
         isAnimate: true,
         size: "medium",
@@ -505,12 +504,12 @@ class Tabs extends React.Component {
         boxPosition: position,
         getRef: getContainerRef,
         isBoxPaddingNeed: true,
-        isArrow: false
-      }, DropBoxProps, {
+        isArrow: false,
+        ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
         onClose: this.togglePopup
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
+      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
@@ -531,7 +530,7 @@ class Tabs extends React.Component {
           dataId
         } = child.props;
         const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
+        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
           key: id,
           value: value,
           onClick: this.moreTabSelect,
@@ -544,8 +543,9 @@ class Tabs extends React.Component {
             customListItem: menuItemClass
           },
           target: "self",
-          dataId: `${dataId}_Tab`
-        }, ListItemProps), !showTitleInMoreOptions ? children : null);
+          dataId: `${dataId}_Tab`,
+          ...ListItemProps
+        }, !showTitleInMoreOptions ? children : null);
       })));
     })) : null);
   }

package/es/Tag/Tag.module.css

@@ -34,13 +34,10 @@
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
   position: relative;
   vertical-align: middle;
-  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
-  /* css:theme-validation:ignore */
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
   height: var(--tag_height);
-  /* css:theme-validation:ignore */
   max-width: 100% ;
   background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
@@ -125,13 +122,11 @@
   display: block;
 }
 .close {
-  /* css:theme-validation:ignore */
   color: var(--tag_closeicon_color);
   display: none;
   position: absolute;
   top: 0 ;
   bottom: 0 ;
-  /* css:theme-validation:ignore */
   padding: var(--tag_closeicon_padding);
   cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
@@ -229,7 +224,6 @@
 }
 
 .icon {
-  /* css:theme-validation:ignore */
   margin: var(--tag_icon_margin);
   background-color: var(--tag_icon_bg_color);
 }

package/es/TextBox/TextBox.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -139,7 +137,7 @@ export default class TextBox extends React.PureComponent {
 
     let classList = needAppearance ? `${style.container} ${style[size]}  ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
     value = value === null || value === undefined ? '' : value;
-    return /*#__PURE__*/React.createElement("input", _extends({
+    return /*#__PURE__*/React.createElement("input", {
       "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-autocomplete": ariaAutocomplete,
@@ -173,8 +171,10 @@ export default class TextBox extends React.PureComponent {
       value: value,
       onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : '',
       onKeyPress: onKeyPress,
-      onMouseDown: onMouseDown
-    }, options, customProps));
+      onMouseDown: onMouseDown,
+      ...options,
+      ...customProps
+    });
   }
 
 }

package/es/TextBox/TextBox.module.css

@@ -32,36 +32,30 @@
 }
 
 .basic::placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .basic::-webkit-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .basic::-moz-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .basic::-ms-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
+
 /* css:lineheight-validation:ignore */
 .container {
   composes: basic;
-  /* css:theme-validation:ignore */
   transition: border var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s;
   width: var(--textbox_width);
-  /* css:theme-validation:ignore */
   color: var(--textbox_text_color);
   font-size: var(--textbox_font_size);
   height: var(--textbox_height);
-  /* css:theme-validation:ignore */
   line-height: var(--textbox_line_height);
   background-color: var(--textbox_bg_color);
   -webkit-transition: border var(--zd_transition2) linear 0s;
@@ -85,22 +79,18 @@
 }
 
 .container::placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .container::-webkit-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .container::-moz-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
 .container::-ms-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 
@@ -114,11 +104,6 @@
   border-style: var(--textbox_border_style);
 }
 
-.effect:hover,
-.effect:focus {
-  /* css:theme-validation:ignore */
-}
-
 .effect:hover, .effect:focus {
   border-color: var(--textbox_border_color);
 }
@@ -127,11 +112,6 @@
   --textbox_border_width: 0 0 1px 0;
 }
 
-.borderColor_transparent,
-.borderColor_default {
-  /* css:theme-validation:ignore */
-}
-
 .borderColor_transparent, .borderColor_default {
   border-color: var(--textbox_border_color);
 }

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -127,7 +125,7 @@ export default class TextBoxIcon extends React.Component {
       "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, /*#__PURE__*/React.createElement(TextBox, _extends({}, this.props, {
+    }, /*#__PURE__*/React.createElement(TextBox, { ...this.props,
       dataId: dataId,
       size: size,
       variant: variant,
@@ -155,7 +153,7 @@ export default class TextBoxIcon extends React.Component {
       isScrollPrevent: isScrollPrevent,
       customClass: customTextBox,
       customProps: TextBoxProps
-    }))), /*#__PURE__*/React.createElement(Box, {
+    })), /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -24,7 +24,6 @@
   cursor: var(--textboxicon_icon_cursor);
 }
 .iconContainer {
-  /* css:theme-validation:ignore */
   color: var(--textboxicon_icon_color);
 }
 .effect:hover .iconContainer,
@@ -51,10 +50,6 @@
   right: 0 ;
   left: 0 ;
 }
-.line,
-.borderColor_default {
-  /* css:theme-validation:ignore */
-}
 .line, .borderColor_default {
   background-color: var(--textboxicon_line_color);
 }

package/es/Textarea/Textarea.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -87,12 +85,12 @@ export default class Textarea extends React.Component {
     }
 
     let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
-    return /*#__PURE__*/React.createElement("textarea", _extends({
+    return /*#__PURE__*/React.createElement("textarea", {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
-      placeholder: placeHolder
-    }, options, {
+      placeholder: placeHolder,
+      ...options,
       "data-id": dataId,
       "data-test-id": dataId,
       maxLength: maxLength,
@@ -104,7 +102,7 @@ export default class Textarea extends React.Component {
       value: text,
       id: htmlId,
       "data-selector-id": dataSelectorId
-    }));
+    });
   }
 
 }

package/es/Textarea/Textarea.module.css

@@ -19,7 +19,6 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
-  /* css:theme-validation:ignore */
   color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
 }
@@ -27,19 +26,15 @@
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-webkit-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-moz-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-ms-placeholder {
-  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic:disabled {
@@ -73,7 +68,6 @@
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
-  /* css:theme-validation:ignore */
   height: var(--textarea_height);
   -webkit-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -86,14 +84,15 @@ export default class VelocityAnimationGroup extends React.Component {
       delay: exitDelay ? exitDelay : 0,
       display: 'none'
     };
-    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
+    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
       enter: enterAnimation,
       leave: exitAnimation,
       component: component && component,
       runOnMount: runOnMount,
       enterHideStyle: enterHideStyle,
-      enterShowStyle: enterShowStyle
-    }, childProps), isActive ? children : null);
+      enterShowStyle: enterShowStyle,
+      ...childProps
+    }, isActive ? children : null);
   }
 
 }

package/es/common/customscroll.module.css

@@ -9,6 +9,7 @@
   --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_hover_bg);
   --zd-scroll-border: var(--zdt_customscroll_border);
 }
+
 .scroll[data-scroll-palette='dark'],
 .scroll [data-scroll-palette='dark'] {
   --zd-scroll-bg: var(--zdt_customscroll_dark_bg);
@@ -16,92 +17,114 @@
   --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_dark_hover_bg);
   --zd-scroll-border: var(--zdt_customscroll_dark_border);
 }
+
 .scroll,
 .scroll * {
+  /* css:theme-validation:ignore */
   scrollbar-color: var(--zd-scroll-thump) var(--zd-scroll-bg);
   scrollbar-width: thin;
+  /* css:theme-validation:ignore */
   -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
+  /* css:theme-validation:ignore */
   -ms-scrollbar-face-color: var(--zd-scroll-thump);
 }
+
 .scroll::-webkit-scrollbar,
 .scroll ::-webkit-scrollbar {
   /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
   background: var(--zd-scroll-corner-bg);
 }
+
 .scroll::-webkit-scrollbar:hover,
 .scroll ::-webkit-scrollbar:hover {
   /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
   background: var(--zd-scroll-bg);
 }
+
 .scroll::-webkit-scrollbar:horizontal,
 .scroll ::-webkit-scrollbar:horizontal {
   height: var(--zd-scroll-height);
 }
+
 .scroll::-webkit-scrollbar:vertical,
 .scroll ::-webkit-scrollbar:vertical {
   width: var(--zd-scroll-width);
 }
+
 .scroll::-webkit-scrollbar-button,
 .scroll ::-webkit-scrollbar-button {
   display: none;
   width: 0 ;
   height: 0 ;
 }
+
 [dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
 }
+
 [dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
 }
+
 .scroll::-webkit-scrollbar-track:vertical:hover,
 .scroll ::-webkit-scrollbar-track:vertical:hover {
   /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
   border-color: var(--zd-scroll-border);
 }
+
 .scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 }
+
 .scroll::-webkit-scrollbar-track:horizontal:hover,
 .scroll ::-webkit-scrollbar-track:horizontal:hover {
   /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
   border-color: var(--zd-scroll-border);
 }
+
 .scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
   background: inherit;
 }
+
 .scroll::-webkit-scrollbar-thumb,
 .scroll ::-webkit-scrollbar-thumb {
-  /* css:theme-validation:ignore */
   /* css:theme-validation:ignore */
   /* display: none; */
 }
+
 .scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background: var(--zd-scroll-thump);
   background-clip: padding-box;
   border: 3px solid transparent;
 }
+
 .scroll::-webkit-scrollbar-thumb:hover,
 .scroll ::-webkit-scrollbar-thumb:hover {
   /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
 }
+
 .scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
   background: var(--zd-scroll-thump-hoverbg);
   background-clip: padding-box;
   border: 3px solid transparent;
 }
+
 /* .scroll:hover > ::-webkit-scrollbar-thumb,
 .scroll *:hover > ::-webkit-scrollbar-thumb {
   display: block;
@@ -113,6 +136,7 @@
 .scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
   background: var(--zd-scroll-corner-bg);
 }
+
 .scroll::-webkit-resizer, .scroll ::-webkit-resizer {
   background: inherit;
-}
+}

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -11,12 +11,14 @@ let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
     isChildrenRestrictionNeeded = true,
     isActive
   } = props;
-  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
-    forwardRef: ref
-  })) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
-    isActive,
-    forwardRef: ref
-  }));
+  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
+      forwardRef: ref
+    })
+  }) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
+      isActive,
+      forwardRef: ref
+    })
+  });
 });
 RefElement.propTypes = RefElement_propTypes;
 export { RefElement };

package/es/v1/AppContainer/AppContainer.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React, { useEffect, useRef, useLayoutEffect } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -93,23 +91,26 @@ export default function AppContainer(props) {
       }
     };
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
     className: `${style.container} ${className}`,
     dataId: dataId,
     dataSelectorId: dataSelectorId,
     tagName: tagName,
-    eleRef: getContainerRef
-  }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
+    eleRef: getContainerRef,
+    ...ContainerProps,
+    ...ExtraProps
+  }, /*#__PURE__*/React.createElement(Box, {
     flexible: true
-  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
+  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", { ...ExtraProps,
     className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
     "data-id": `${dataId}_tooltip`,
     "data-test-id": `${dataId}_tooltip`,
     "data-selector-id": `${dataSelectorId}_tooltip`
-  }), /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     ref: setTooltipRef,
-    customClass: tooltipClass
-  }, TooltipProps))) : null);
+    customClass: tooltipClass,
+    ...TooltipProps
+  })) : null);
 }
 AppContainer.propTypes = propTypes;
 AppContainer.defaultProps = defaultProps; // if (__DOCS__) {

package/es/v1/Avatar/Avatar.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { defaultProps } from './props/defaultProps';
@@ -105,15 +103,16 @@ function Avatar(props) {
   let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
   let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
   borderStyle = showAlternateAvatar ? '' : borderStyle;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", {
     className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
     "data-title": needTitle ? title ? title : name : null,
     "data-id": dataId,
     "data-test-id": dataId,
     onClick: onClick,
     "data-selector-id": dataSelectorId,
-    tabIndex: onClick ? 0 : null
-  }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
+    tabIndex: onClick ? 0 : null,
+    ...AvatarProps
+  }, showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
     className: `${style.initial}`,
     "data-id": `${dataId}_AvatarInitial`,
     "data-test-id": `${dataId}_AvatarInitial`,

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -41,12 +39,13 @@ export default function AvatarTeam(props) {
     customAvatarTeam = ''
   } = customClass;
   const border = borderOnHover || onClick;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/React.createElement("span", {
     className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
     "data-id": dataId,
     "data-test-id": dataId,
-    "data-selector-id": dataSelectorId
-  }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+    "data-selector-id": dataSelectorId,
+    ...AvatarTeamProps
+  }, /*#__PURE__*/React.createElement(Avatar, {
     name: name,
     onClick: onClick,
     palette: palette,
@@ -60,8 +59,9 @@ export default function AvatarTeam(props) {
     borderOnHover: border,
     needInnerBorder: needInnerBorder,
     needBorder: needBorder,
-    needDefaultBorder: needDefaultBorder
-  }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
+    needDefaultBorder: needDefaultBorder,
+    ...AvatarProps
+  }), /*#__PURE__*/React.createElement("span", {
     className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill}
           ${style[`${size}team`]} ${customAvatarTeam}`
   }));

package/es/v1/Button/Button.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -39,7 +37,7 @@ export default function Button(props) {
     style: finalStyle
   });
   let statusLower = status.toLowerCase();
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React.createElement("button", {
     className: buttonClass,
     "data-id": disabled ? `${dataId}_disabled` : dataId,
     "data-test-id": disabled ? `${dataId}_disabled` : dataId,
@@ -48,10 +46,11 @@ export default function Button(props) {
     "data-title": title,
     type: "button",
     ref: getRef,
-    "data-selector-id": dataSelectorId
-  }, customProps, a11y, {
+    "data-selector-id": dataSelectorId,
+    ...customProps,
+    ...a11y,
     id: id
-  }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+  }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
     className: finalStyle.overlay
   }, /*#__PURE__*/React.createElement("div", {
     className: loaderParentClass