@zohodesk/components 1.6.0 → 1.6.2

package/es/Select/SelectWithAvatar.js

@@ -1,3 +1,5 @@
+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 { SelectWithAvatar_defaultProps } from "./props/defaultProps";
@@ -132,6 +134,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       dropBoxSize,
       emptyMessage,
       searchEmptyMessage,
+      renderCustomEmptyState,
       needBorder,
       position,
       defaultDropBoxPosition,
@@ -228,7 +231,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       flexible: true,
       className: style.textBox,
       dataId: `${dataId}_textBox`
-    }, /*#__PURE__*/React.createElement(Textbox, {
+    }, /*#__PURE__*/React.createElement(Textbox, _extends({
       a11y: {
         ariaActivedescendant: selectedId,
         role: 'combobox',
@@ -256,9 +259,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       isClickable: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
       htmlId: htmlId,
-      autoComplete: false,
-      ...TextBoxProps
-    }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      autoComplete: false
+    }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
@@ -291,7 +293,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         onScroll: this.handleScroll
       }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
         className: `${selectStyle.search} ${selectStyle[size]}`
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
         inputRef: this.searchInputRef,
         maxLength: maxLength,
         onChange: this.handleSearch,
@@ -306,9 +308,8 @@ class SelectWithAvatarComponent extends SelectComponent {
           ariaControls: setAriaId,
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false,
-        ...DropdownSearchTextBoxProps
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        autoComplete: false
+      }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
@@ -319,7 +320,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           role: 'heading'
         }
-      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
         dataId: `${dataId}_Options`,
         activeId: selectedId,
         suggestions: suggestions,
@@ -335,13 +336,13 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        },
-        ...SuggestionsProps
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+        }
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,
         suggestions: suggestions,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataId,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId

package/es/Select/SelectWithIcon.js

@@ -1,3 +1,5 @@
+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 { SelectWithIcon_defaultProps } from "./props/defaultProps";
 import { SelectWithIcon_propTypes } from "./props/propTypes";
@@ -349,6 +351,7 @@ class SelectWithIcon extends Component {
       boxSize,
       dropBoxSize,
       emptyMessage,
+      renderCustomEmptyState,
       needIcon,
       iconName,
       iconSize,
@@ -399,7 +402,7 @@ class SelectWithIcon extends Component {
       dataId: `${dataId}_icon`
     })) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       a11y: {
         role: 'combobox',
         ariaLabel: 'click to select options',
@@ -437,9 +440,8 @@ class SelectWithIcon extends Component {
           'data-title': title || selectedValue,
           ...TextBoxProps
         }
-      },
-      ...TextBoxIconProps
-    }, /*#__PURE__*/React.createElement(Container, {
+      }
+    }, TextBoxIconProps), /*#__PURE__*/React.createElement(Container, {
       isInline: true,
       isCover: false,
       align: "both",
@@ -515,7 +517,7 @@ class SelectWithIcon extends Component {
           iconSize,
           iconColor
         } = options;
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, {
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
           key: options[idKey],
           value: options[valueKey],
           secondaryValue: options[secondaryValueKey],
@@ -539,14 +541,14 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          },
-          ...ListItemProps
-        });
+          }
+        }, ListItemProps));
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchValue,
         suggestions: options,
+        renderCustomEmptyState: renderCustomEmptyState,
         dataId: dataId,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId

package/es/Select/props/propTypes.js

@@ -61,6 +61,7 @@ export const Select_propTypes = {
   placeHolder: PropTypes.string,
   position: PropTypes.string,
   removeClose: PropTypes.func,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   searchBoxPlaceHolder: PropTypes.string,
   searchBoxSize: PropTypes.string,
   searchDebounceTime: PropTypes.number,
@@ -127,6 +128,7 @@ export const GroupSelect_propTypes = {
   searchBoxPlaceHolder: PropTypes.string,
   needSearch: PropTypes.bool,
   searchEmptyMessage: PropTypes.string,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   getRef: PropTypes.func,
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -307,6 +309,7 @@ export const SelectWithIcon_propTypes = {
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
   emptyMessage: PropTypes.string,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,

package/es/Stencils/Stencils.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
@@ -48,7 +48,7 @@
 
 .rect {
   composes: stencil;
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_border_radius: 5px;
 }
 .primary {
@@ -65,16 +65,16 @@
 }
 
 .small {
-  --stencil_width: var(--zd_size110);
+  --stencil_width: 110px;
 }
 .default {
   --stencil_width: 100%;
 }
 .medium {
-  --stencil_width: var(--zd_size170);
+  --stencil_width: 170px;
 }
 .large {
-  --stencil_width: var(--zd_size220);
+  --stencil_width: 220px;
 }
 
 .circle {
@@ -86,15 +86,15 @@
   --stencil_border_radius: 4px;
 }
 .size_large {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
+  --stencil_width: 42px;
+  --stencil_height: 42px;
 }
 .size_medium,
 .size_default {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
+  --stencil_width: 30px;
+  --stencil_height: 30px;
 }
 .size_small {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
+  --stencil_width: 20px;
+  --stencil_height: 20px;
 }

package/es/Switch/Switch.js

@@ -1,3 +1,5 @@
+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";
@@ -48,7 +50,7 @@ export default class Switch extends React.Component {
       customLabel = ''
     } = customClass;
     size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       align: "vertical",
       isCover: false,
       alignBox: "row",
@@ -57,9 +59,8 @@ 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",
@@ -77,16 +78,15 @@ 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, {
+    })), text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
       palette: labelPalette,
       id: id,
       size: labelSize,
       type: "subtitle",
       onClick: !disabled || !isReadOnly ? this.onChange : null,
-      customClass: customLabel,
-      ...LabelProps
-    }));
+      customClass: customLabel
+    }, LabelProps)));
   }
 
 }

package/es/Tab/Tab.js

@@ -1,3 +1,5 @@
+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'] }] */
@@ -69,7 +71,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, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
     className: tabClass,
@@ -87,9 +89,8 @@ 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,3 +1,5 @@
+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";
@@ -16,16 +18,15 @@ const TabContentWrapper = _ref => {
     tagName,
     a11y
   } = _ref;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
     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,3 +1,5 @@
+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";
@@ -36,7 +38,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
-    , { ...child.props,
+    , _extends({}, child.props, {
       selectedTab: selectedTab,
       onSelect: setSelectedTab,
       type: type,
@@ -47,7 +49,7 @@ function TabWrapper(_ref) {
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
       align: align
-    });
+    }));
   }));
 }
 

package/es/Tab/Tabs.js

@@ -1,3 +1,5 @@
+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, {
@@ -548,7 +550,7 @@ class Tabs extends React.Component {
         classProps.className = itemClass;
       }
 
-      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, { ...child.props,
+      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, _extends({}, child.props, {
         key: child.props.id,
         getTabRef: this.getTabRef,
         onSelect: onSelect,
@@ -559,23 +561,22 @@ 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, {
+    }, /*#__PURE__*/React.createElement(Container, _extends({
       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, {
@@ -585,7 +586,7 @@ class Tabs extends React.Component {
       let {
         tabletMode
       } = _ref4;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
         isActive: isPopupReady,
         isAnimate: true,
         size: "medium",
@@ -599,16 +600,16 @@ class Tabs extends React.Component {
         isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
         isRestrictScroll: isRestrictScroll,
         positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        ...DropBoxProps,
+        targetOffset: targetOffset
+      }, DropBoxProps, {
         isResponsivePadding: true,
         needFocusScope: true,
         dataId: `${dataId}_dropbox`,
         onClick: removeClose,
         onClose: this.togglePopup
-      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
+      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
         className: tabsStyle.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
         placeHolder: placeHolderText,
         onChange: this.handleChange,
         value: searchValue,
@@ -621,9 +622,8 @@ class Tabs extends React.Component {
         },
         dataId: `${dataId}_search`,
         autoComplete: false,
-        name: "search",
-        ...TextBoxIconProps
-      })) : null, /*#__PURE__*/React.createElement(Box, {
+        name: "search"
+      }, TextBoxIconProps))) : null, /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
@@ -641,7 +641,7 @@ class Tabs extends React.Component {
           dataId
         } = data;
         const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.createElement(ListItem, {
+        return /*#__PURE__*/React.createElement(ListItem, _extends({
           key: id,
           value: value,
           onClick: this.moreTabSelect,
@@ -654,9 +654,8 @@ class Tabs extends React.Component {
             customListItem: menuItemClass
           },
           target: "self",
-          dataId: `${dataId}_Tab`,
-          ...ListItemProps
-        }, !showTitleInMoreOptions ? children : null);
+          dataId: `${dataId}_Tab`
+        }, ListItemProps), !showTitleInMoreOptions ? children : null);
       }) : this.renderEmptyState()));
     })) : null);
   }

package/es/Tag/Tag.js

@@ -1,3 +1,5 @@
+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, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -105,7 +107,7 @@ export default class Tag extends PureComponent {
       clearLabel = 'Delete'
     } = a11y;
     let isDarkPalette = palette === 'dark';
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({
       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`,
       "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
@@ -114,26 +116,23 @@ export default class Tag extends PureComponent {
       "data-title": tooltip ? tooltip : text,
       tabIndex: disabled ? '-1' : '0',
       "aria-labelledby": getAriaId,
-      "data-selector-id": dataSelectorId,
-      ...customAttributes
-    }, renderNode(renderLeftChildren), hasAvatar ? /*#__PURE__*/React.createElement("div", {
+      "data-selector-id": dataSelectorId
+    }, customAttributes), renderNode(renderLeftChildren), hasAvatar ? /*#__PURE__*/React.createElement("div", {
       className: style.avatar
-    }, /*#__PURE__*/React.createElement(Avatar, {
+    }, /*#__PURE__*/React.createElement(Avatar, _extends({
       palette: isDarkPalette ? 'info' : avatarPalette,
       name: initial,
       size: "small",
       src: imageURL,
       textPalette: isDarkPalette ? 'white' : '',
-      customClass: customAvatar,
-      ...avatarProps
-    })) : null, iconName ? /*#__PURE__*/React.createElement("div", {
+      customClass: customAvatar
+    }, avatarProps))) : null, iconName ? /*#__PURE__*/React.createElement("div", {
       className: `${style.icon} ${customTagIcon}`,
       "aria-hidden": true
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, _extends({
       name: iconName,
-      size: iconSize,
-      ...iconProps
-    })) : null, /*#__PURE__*/React.createElement("div", {
+      size: iconSize
+    }, iconProps))) : null, /*#__PURE__*/React.createElement("div", {
       className: `${style.text} ${textSizes}`,
       "aria-hidden": true,
       id: getAriaId

package/es/Tag/Tag.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* tag default variables */
   --tag_text_color: var(--zdt_tag_default_text);
-  --tag_font_size: var(--zd_font_size13);
+  --tag_font_size: 13px;
   --tag_letter_spacing: normal;
   --tag_bg_color: var(--zdt_tag_default_bg);
   --tag_border_radius: 25px;
@@ -9,8 +9,8 @@
   --tag_border_width: 0;
   --tag_border_style: dashed;
   --tag_border_color: var(--zdt_tag_default_border);
-  --tag_padding: var(--zd_size2);
-  --tag_inner_text_padding: 0 var(--zd_size6);
+  --tag_padding: 2px;
+  --tag_inner_text_padding: 0 6px;
   --tag_cursor: default;
 
   /* tag close icon default variables */
@@ -22,12 +22,13 @@
   --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }[dir=ltr] .varClass {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
-  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6);
-  --tag_icon_margin: 0 0 0 var(--zd_size5);
+  --tag_closeicon_padding: 0 7px 0 6px
+    /*rtl: 0 6px 0 7px*/;
+  --tag_icon_margin: 0 0 0 5px /*rtl: 0 5px 0 0*/;
 }[dir=rtl] .varClass {
   --tag_closeicon_border_radius: 12px 0 0 12px;
-  --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);
-  --tag_icon_margin: 0 var(--zd_size5) 0 0;
+  --tag_closeicon_padding: 0 6px 0 7px;
+  --tag_icon_margin: 0 5px 0 0;
 }
 .container {
   composes: varClass;
@@ -75,9 +76,9 @@
   padding: var(--tag_inner_text_padding);
 }
 .small {
-  --tag_height: var(--zd_size20);
-  --tag_padding: var(--zd_size1);
-  --tag_inner_text_padding: 0 var(--zd_size7);
+  --tag_height: 20px;
+  --tag_padding: 1px;
+  --tag_inner_text_padding: 0 7px;
 }
 [dir=ltr] .small .avatar {
   transform: scale(0.8) translateX(-2px);
@@ -88,22 +89,22 @@
   margin-left: calc( var(--zd_size8) * -1 ) ;
 }
 .smalltext {
-  --tag_font_size: var(--zd_font_size12);
+  --tag_font_size: 12px;
 }
 .activesmallEffect {
-  --tag_inner_text_padding: 0 var(--zd_size25) 0 var(--zd_size7);
+  --tag_inner_text_padding: 0 25px 0 7px;
 }
 
 .medium {
-  --tag_height: var(--zd_size26);
-  --tag_padding: var(--zd_size2);
-  --tag_inner_text_padding: 0 var(--zd_size6);
+  --tag_height: 26px;
+  --tag_padding: 2px;
+  --tag_inner_text_padding: 0 6px;
 }
 .mediumtext {
-  --tag_font_size: var(--zd_font_size13);
+  --tag_font_size: 13px;
 }
 .activemediumEffect {
-  --tag_inner_text_padding: 0 var(--zd_size25) 0 var(--zd_size6);
+  --tag_inner_text_padding: 0 25px 0 6px;
 }
 
 .selected .close {

package/es/TextBox/TextBox.js

@@ -1,3 +1,5 @@
+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";
@@ -137,7 +139,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", {
+    return /*#__PURE__*/React.createElement("input", _extends({
       "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-autocomplete": ariaAutocomplete,
@@ -171,10 +173,8 @@ export default class TextBox extends React.PureComponent {
       value: value,
       onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : null,
       onKeyPress: onKeyPress,
-      onMouseDown: onMouseDown,
-      ...options,
-      ...customProps
-    });
+      onMouseDown: onMouseDown
+    }, options, customProps));
   }
 
 }

package/es/TextBox/TextBox.module.css

@@ -5,9 +5,9 @@
   --textbox_border_width: 0;
   --textbox_border_style: solid;
   --textbox_border_color: var(--zdt_textbox_default_border);
-  --textbox_font_size: var(--zd_font_size14);
+  --textbox_font_size: 14px;
   --textbox_width: 100%;
-  --textbox_height: var(--zd_size35);
+  --textbox_height: 35px;
   --textbox_border_radius: none;
   --textbox_font_weight: var(--zd-fw-normal);
   /*  Variable:Ignore  */
@@ -137,28 +137,28 @@
 /* Size */
 .xmedium,
 .medium {
-  --textbox_font_size: var(--zd_font_size14);
+  --textbox_font_size: 14px;
 }
 
 .xmedium {
-  --textbox_height: var(--zd_size28);
+  --textbox_height: 28px;
   --textbox_line_height: 2;
 }
 
 .medium {
-  --textbox_height: var(--zd_size35);
+  --textbox_height: 35px;
   --textbox_line_height: 2.5;
 }
 
 .small {
-  --textbox_font_size: var(--zd_font_size12);
-  --textbox_height: var(--zd_size28);
+  --textbox_font_size: 12px;
+  --textbox_height: 28px;
   --textbox_line_height: 2.3334;
 }
 
 .xsmall {
-  --textbox_font_size: var(--zd_font_size13);
-  --textbox_height: var(--zd_size25);
+  --textbox_font_size: 13px;
+  --textbox_height: 25px;
   --textbox_line_height: 1.9231;
 }