@zohodesk/components 1.2.29 → 1.2.31

package/es/ListItem/ListItemWithRadio.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 Radio from '../Radio/Radio';
 import { Box } from '../Layout';
@@ -77,7 +75,7 @@ export default class ListItemWithRadio extends React.Component {
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+    return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -93,8 +91,9 @@ export default class ListItemWithRadio extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps
-    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps,
+      ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
       className: style.iconBox
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,

package/es/Modal/Modal.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); }
-
 /**** Libraries ****/
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -131,9 +129,10 @@ export default class Modal extends React.Component {
 
     if (isMounted) {
       if (Element) {
-        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
-          ref: this.setRef
-        }, elementProps)), this.portalDiv);
+        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, {
+          ref: this.setRef,
+          ...elementProps
+        }), this.portalDiv);
       }
 
       return null;

package/es/MultiSelect/AdvancedMultiSelect.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); }
-
 /**** Libraries ****/
 import React from 'react';
 import { AdvancedMultiSelect_propTypes } from './props/propTypes';
@@ -488,7 +486,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -502,11 +500,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'listbox',
           ariaMultiselectable: true
-        }
-      }, DropBoxProps, {
+        },
+        ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
-      }), isLoading ? /*#__PURE__*/React.createElement(Container, {
+      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -523,7 +521,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         suggestions: suggestions,
         selectedOptions: allselectedOptionIds,
         getRef: this.suggestionItemRef,
@@ -534,8 +532,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         listItemSize: listItemSize,
         a11y: {
           role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+        },
+        ...SuggestionsProps
+      }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/MultiSelect/MultiSelectWithAvatar.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); }
-
 /**** Libraries ****/
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
@@ -157,7 +155,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       shrink: true,
       customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
       needTick: keepSelectedOptions,
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
@@ -170,8 +168,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      }
-    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      },
+      ...SuggestionsProps
+    }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,

package/es/MultiSelect/SelectedOptions.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); }
-
 /**** Libraries ****/
 import React from 'react';
 import { SelectedOptions_propTypes } from './props/propTypes';
@@ -52,28 +50,28 @@ export default class SelectedOptions extends React.PureComponent {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
           key: `${id}photoTag`
-        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
+        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
           imageURL: photoURL
-        })));
+        }));
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
           key: `${id}iconTag`
-        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
+        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
           iconSize: iconSize
-        })));
+        }));
       }
 
       return /*#__PURE__*/React.createElement(Box, {
         className: `${style.tag} ${style[size]}`,
         key: `${id}tag`
-      }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
+      }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
         active: highLightedSelectOptions.indexOf(id) >= 0
-      })));
+      }));
     }));
   }
 

package/es/MultiSelect/Suggestions.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); }
-
 /**** Libraries ****/
 import React from 'react';
 import { Suggestions_propTypes } from './props/propTypes';
@@ -76,7 +74,7 @@ export default class Suggestions extends React.PureComponent {
       }
 
       if (optionType === 'avatar') {
-        return /*#__PURE__*/React.createElement(ListItemWithAvatar, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
           autoHover: false,
           getRef: getRef,
           highlight: isHighlight,
@@ -95,9 +93,9 @@ export default class Suggestions extends React.PureComponent {
           avatarPalette: avatarPalette,
           palette: palette,
           a11y: list_a11y
-        }));
+        });
       } else if (optionType === 'icon') {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
           autoHover: false,
           getRef: getRef,
           highlight: isHighlight,
@@ -115,10 +113,10 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           palette: palette,
           a11y: list_a11y
-        }));
+        });
       }
 
-      return /*#__PURE__*/React.createElement(ListItem, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
         autoHover: false,
         getRef: getRef,
         highlight: isHighlight,
@@ -134,7 +132,7 @@ export default class Suggestions extends React.PureComponent {
         size: listItemSize,
         palette: palette,
         a11y: list_a11y
-      }));
+      });
     })));
   }
 

package/es/MultiSelect/props/defaultProps.js

@@ -109,7 +109,8 @@ export const MultiSelect_defaultProps = {
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
-  cardHeaderName: ''
+  cardHeaderName: '',
+  needResponsive: true
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -143,7 +144,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'

package/es/PopOver/PopOver.module.css

@@ -1,9 +1,9 @@
 .popup {
   position: relative;
-  /* css:theme-validation:ignore */
-  background-color: var(--dot_white);
+  background-color: var(--zdt_popover_default_bg);
 }
+
 .target {
   composes: offSelection from '../common/common.module.css';
   cursor: pointer;
-}
+}

package/es/Popup/Popup.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); }
-
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -623,14 +621,15 @@ const Popup = function (Component) {
         isPopupOpen
       } = this.state;
       const localState = isPopupReady ? this.state : {};
-      return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, this.state, {
+      return /*#__PURE__*/React.createElement(Component, { ...this.props,
+        ...this.state,
         openPopupOnly: this.openPopupOnly,
         closePopupOnly: this.closePopupOnly,
         togglePopup: this.togglePopup,
         removeClose: this.removeClose,
         getTargetRef: this.getTargetRef,
         getContainerRef: this.getContainerRef
-      }));
+      });
     }
 
   }

package/es/Radio/Radio.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 css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -73,7 +71,7 @@ export default class Radio extends React.Component {
       ContainerProps = {},
       LabelProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, {
       dataId: value ? value.toLowerCase() : 'RadioComp',
       isCover: false,
       isInline: text ? false : true,
@@ -89,8 +87,9 @@ export default class Radio extends React.Component {
       "aria-Hidden": ariaHidden,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
-      "aria-readonly": ariaReadonly
-    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+      "aria-readonly": ariaReadonly,
+      ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
             ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -116,7 +115,7 @@ export default class Radio extends React.Component {
     }) : null))), text && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.text
-    }, /*#__PURE__*/React.createElement(Label, _extends({
+    }, /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
       size: labelSize,
@@ -126,8 +125,9 @@ export default class Radio extends React.Component {
       variant: variant,
       title: toolTip ? toolTip : text,
       customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
-              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
-    }, LabelProps))), children);
+              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
+      ...LabelProps
+    })), children);
   }
 
 }

package/es/Radio/Radio.module.css

@@ -28,7 +28,6 @@
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
-  /* css:theme-validation:ignore */
   stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;

package/es/ResponsiveDropBox/ResponsiveDropBox.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, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -45,9 +43,9 @@ export default class ResponsiveDropBox extends Component {
       customMobileDropBoxWrap: `${customMobileDropBoxWrap}`,
       customResponsiveContainer: `${customResponsiveContainer}`
     };
-    return /*#__PURE__*/React.createElement(DropBox, _extends({}, this.props, {
+    return /*#__PURE__*/React.createElement(DropBox, { ...this.props,
       customClass: dropBoxClasses
-    }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {

package/es/Ribbon/Ribbon.module.css

@@ -36,12 +36,9 @@
 .basic {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   line-height: var(--ribbon_line_height);
   padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
@@ -368,7 +365,6 @@
   position: absolute;
   content: '';
   top: var(--ribbon_tag_before_top);
-  /* css:theme-validation:ignore */
   width: var(--ribbon_tag_before_width);
   height: var(--ribbon_tag_before_height);
   background-color: inherit;

package/es/Select/GroupSelect.js

@@ -618,7 +618,9 @@ export class GroupSelectComponent extends PureComponent {
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
-      ref: getTargetRef
+      ref: getTargetRef,
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       iconRotated: isPopupOpen,
@@ -633,7 +635,7 @@ export class GroupSelectComponent extends PureComponent {
       value: selected,
       variant: textBoxVariant,
       needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: dataId,
+      dataId: `${dataId}_textBox`,
       onKeyPress: this.handleValueInputChange,
       needEffect: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
@@ -670,7 +672,7 @@ export class GroupSelectComponent extends PureComponent {
       value: selected,
       variant: textBoxVariant,
       needReadOnlyStyle: isReadOnly ? true : false,
-      dataId: dataId,
+      dataId: `${dataId}_textBox`,
       onKeyPress: this.handleValueInputChange,
       borderColor: borderColor,
       htmlId: htmlId,
@@ -704,7 +706,8 @@ export class GroupSelectComponent extends PureComponent {
         needResponsive: needResponsive,
         isPadding: false,
         isResponsivePadding: getFooter ? false : true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_suggestionBox`
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -729,7 +732,8 @@ export class GroupSelectComponent extends PureComponent {
           ariaAutocomplete: 'list',
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        dataId: `${dataId}_search`
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
@@ -764,7 +768,8 @@ export class GroupSelectComponent extends PureComponent {
           a11y: {
             ariaParentRole: 'listbox',
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/Select.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); }
-
 /**** Libraries ****/
 import React, { Component } from 'react';
 import { Select_defaultProps } from './props/defaultProps';
@@ -25,7 +23,6 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, ge
 /**** CSS ****/
 
 import style from './Select.module.css';
-import { getLibraryConfig } from '../Provider/Config';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -917,7 +914,7 @@ export class SelectComponent extends Component {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
@@ -934,8 +931,9 @@ export class SelectComponent extends Component {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+        },
+        ...SuggestionsProps
+      }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/Select/props/defaultProps.js

@@ -59,6 +59,7 @@ export const GroupSelect_defaultProps = {
   dataIdDownIcon: 'downIcon',
   dataIdLoading: 'loading',
   dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  dataId: 'GroupSelect',
   isPopupOpenOnEnter: false,
   borderColor: 'default',
   needTick: true,

package/es/Switch/Switch.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';
@@ -50,7 +48,7 @@ export default class Switch extends React.Component {
       customLabel = ''
     } = customClass;
     size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       isCover: false,
       alignBox: "row",
@@ -59,8 +57,9 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      dataSelectorId: dataSelectorId
-    }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
+      dataSelectorId: dataSelectorId,
+      ...SwitchProps
+    }, /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
@@ -78,15 +77,16 @@ export default class Switch extends React.Component {
       "data-test-id": dataId,
       className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
       tabIndex: isReadOnly || disabled ? '-1' : '0'
-    })), text && /*#__PURE__*/React.createElement(Label, _extends({
+    })), text && /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
       id: id,
       size: labelSize,
       type: "subtitle",
       onClick: !disabled || !isReadOnly ? this.onChange : null,
-      customClass: customLabel
-    }, LabelProps)));
+      customClass: customLabel,
+      ...LabelProps
+    }));
   }
 
 }

package/es/Switch/Switch.module.css

@@ -26,7 +26,6 @@
   display: inline-block;
   position: relative;
   transition: box-shadow var(--zd_transition3) ease-in-out;
-  /* css:theme-validation:ignore */
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
   cursor: pointer;
@@ -45,7 +44,6 @@
   right: 50% ;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
-  /* css:theme-validation:ignore */
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }

package/es/Tab/Tab.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, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
@@ -70,7 +68,7 @@ export default function Tab(_ref) {
   let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
   let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
   let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
     className: tabClass,
@@ -88,8 +86,9 @@ export default function Tab(_ref) {
     "aria-selected": isActive ? true : false,
     tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
     "aria-label": text ? text : null,
-    dataSelectorId: dataSelectorId
-  }, customProps), /*#__PURE__*/React.createElement(Container, {
+    dataSelectorId: dataSelectorId,
+    ...customProps
+  }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "both",
     className: styles.textContainer

package/es/Tab/TabContentWrapper.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 { TabContentWrapper_defaultProps } from './props/defaultProps';
 import { TabContentWrapper_propTypes } from './props/propTypes';
@@ -18,15 +16,16 @@ const TabContentWrapper = _ref => {
     tagName,
     a11y
   } = _ref;
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
     onScroll: onScroll,
     dataSelectorId: dataSelectorId,
-    tagName: tagName
-  }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+    tagName: tagName,
+    ...a11y
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
 
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;

package/es/Tab/TabWrapper.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, useCallback } from 'react';
 import { TabWrapper_defaultProps } from './props/defaultProps';
 import { TabWrapper_propTypes } from './props/propTypes';
@@ -37,7 +35,7 @@ function TabWrapper(_ref) {
     let TabsChild = child.type;
     let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
     return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
-    , _extends({}, child.props, {
+    , { ...child.props,
       selectedTab: selectedTab,
       onSelect: setSelectedTab,
       type: type,
@@ -48,7 +46,7 @@ function TabWrapper(_ref) {
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
       align: align
-    }));
+    });
   }));
 }