@zohodesk/components 1.6.0 → 1.6.2

package/es/AvatarTeam/AvatarTeam.module.css

@@ -7,13 +7,13 @@
   --avatarteam_outline_style: solid;
   --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
-  --avatarteam_width: var(--zd_size5);
-  --avatarteam_height: var(--zd_size5);
+  --avatarteam_width: 5px;
+  --avatarteam_height: 5px;
   --avatarteam_border_radius: 50%;
   --avatarteam_bottom_top: initial;
   --avatarteam_bottom_left: initial;
   --avatarteam_bottom_right: initial;
-  --avatarteam_top_top: var(--zd_size1);
+  --avatarteam_top_top: 1px;
 }
 .container {
   position: relative;
@@ -92,18 +92,18 @@
 .smallteam,
 .xsmallteam,
 .xxsmallteam {
-  --avatarteam_height: var(--zd_size3);
-  --avatarteam_width: var(--zd_size3);
+  --avatarteam_height: 3px;
+  --avatarteam_width: 3px;
 }
 .mediumteam,
 .xmediumteam {
-  --avatarteam_height: var(--zd_size5);
-  --avatarteam_width: var(--zd_size5);
+  --avatarteam_height: 5px;
+  --avatarteam_width: 5px;
 }
 .largeteam,
 .xlargeteam {
-  --avatarteam_height: var(--zd_size7);
-  --avatarteam_width: var(--zd_size7);
+  --avatarteam_height: 7px;
+  --avatarteam_width: 7px;
 }
 
 .xxsmallteam {
@@ -112,78 +112,78 @@
 }
 .xxsmallteam::after,
 .xxsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size13);
+  --avatarteam_bottom_top: 13px;
 }
 .xxsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
 .xxsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 
 .smallteam::after,
 .smallteam:before {
-  --avatarteam_bottom_top: var(--zd_size17);
+  --avatarteam_bottom_top: 17px;
 }
 .smallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
 .smallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 .xsmallteam::after,
 .xsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size24);
+  --avatarteam_bottom_top: 24px;
 }
 .xsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_left: -10px;
 }
 .xsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_right: -10px;
 }
 
 .mediumteam::after,
 .mediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size26);
+  --avatarteam_bottom_top: 26px;
 }
 .mediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_left: -13px;
 }
 .mediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_right: -13px;
 }
 
 .xmediumteam::after,
 .xmediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size30);
+  --avatarteam_bottom_top: 30px;
 }
 .xmediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_left: -16px;
 }
 .xmediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_right: -16px;
 }
 
 .largeteam::after,
 .largeteam:before {
-  --avatarteam_bottom_top: var(--zd_size46);
+  --avatarteam_bottom_top: 46px;
 }
 .largeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_left: -24px;
 }
 .largeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_right: -24px;
 }
 
 .xlargeteam::after,
 .xlargeteam:before {
-  --avatarteam_bottom_top: var(--zd_size65);
+  --avatarteam_bottom_top: 65px;
 }
 .xlargeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_left: -29px;
 }
 .xlargeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_right: -29px;
 }

package/es/Button/Button.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'; // props
 
 import { defaultProps } from "./props/defaultProps";
@@ -42,7 +44,7 @@ function Button(props) {
     style: finalStyle
   });
   let statusLower = status.toLowerCase();
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({
     className: buttonClass,
     "data-id": disabled ? `${dataId}_disabled` : dataId,
     "data-test-id": disabled ? `${dataId}_disabled` : dataId,
@@ -51,11 +53,10 @@ 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

package/es/Button/css/Button.module.css

@@ -3,13 +3,13 @@
   /*  Variable:Ignore  */
   --button_letter_spacing: 0.2px;
   --button_cursor: pointer;
-  --button_font_size: var(--zd_font_size13);
+  --button_font_size: 13px;
   --button_text_color: var(--zdt_button_default_text);
   --button_font_weight: var(--zd-fw-normal);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
-  --button_min_width: var(--zd_size90);
+  --button_min_width: 90px;
   --button_height: auto;
   --button_border_width: 0;
   --button_border_style: solid;
@@ -72,38 +72,38 @@
 }
 
 .small {
-  --button_padding: var(--zd_size4) var(--zd_size7);
-  --button_min_width: var(--zd_size50);
-  --button_font_size: var(--zd_font_size10);
+  --button_padding: 4px 7px;
+  --button_min_width: 50px;
+  --button_font_size: 10px;
 }
 
 .medium {
-  --button_padding: var(--zd_size6) var(--zd_size15);
+  --button_padding: 6px 15px;
 }
 
 .large {
-  --button_padding: var(--zd_size9) var(--zd_size14);
-  --button_min_width: var(--zd_size80);
-  --button_font_size: var(--zd_font_size12);
+  --button_padding: 9px 14px;
+  --button_min_width: 80px;
+  --button_font_size: 12px;
 }
 
 .xlarge {
-  --button_padding: var(--zd_size12) var(--zd_size25);
-  --button_min_width: var(--zd_size90);
-  --button_font_size: var(--zd_font_size13);
+  --button_padding: 12px 25px;
+  --button_min_width: 90px;
+  --button_font_size: 13px;
 }
 
 .mediumBtn {
-  --button_height: var(--zd_size42);
-  --button_min_width: var(--zd_size42);
-  --button_font_size: var(--zd_font_size10);
+  --button_height: 42px;
+  --button_min_width: 42px;
+  --button_font_size: 10px;
   text-align: center;
 }
 
 .smallBtn {
-  --button_height: var(--zd_size22);
-  --button_min_width: var(--zd_size22);
-  --button_font_size: var(--zd_font_size13);
+  --button_height: 22px;
+  --button_min_width: 22px;
+  --button_font_size: 13px;
   text-align: center;
 }
 
@@ -134,7 +134,7 @@
 .plaindanger,
 .plainsuccess,
 .plainsecondary {
-  --button_padding: var(--zd_size5);
+  --button_padding: 5px;
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }

package/es/Buttongroup/Buttongroup.module.css

@@ -24,15 +24,17 @@
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+  --buttongroup_padding: 20px 0 20px 60px
+    /*rtl: 20px 60px 20px 0*/
+  ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+  --buttongroup_padding: 20px 60px 20px 0;
 }
 
 .header {
-  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
+  --buttongroup_padding: 12px 20px;
   --buttongroup_border_width: 0 0 1px 0;
 }
 

package/es/CheckBox/CheckBox.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 { propTypes } from "./props/propTypes";
 import { defaultProps } from "./props/defaultProps";
@@ -79,7 +81,7 @@ export default class CheckBox extends React.Component {
       ariaChecked = checked
     } = a11y;
     const isEditable = !(isReadOnly || disabled);
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       dataId: dataId,
       isCover: false,
       isInline: text ? false : true,
@@ -96,9 +98,8 @@ export default class CheckBox extends React.Component {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-hidden": ariaHidden,
-      dataSelectorId: dataSelectorId || id,
-      ...CheckBoxProps
-    }, /*#__PURE__*/React.createElement(Box, {
+      dataSelectorId: dataSelectorId || id
+    }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`,
       align: secondaryText ? "start" : undefined
     }, /*#__PURE__*/React.createElement("input", {
@@ -151,7 +152,7 @@ export default class CheckBox extends React.Component {
     }) : null))), (text || secondaryText) && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.labelContainer
-    }, text && /*#__PURE__*/React.createElement(Label, {
+    }, text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
       palette: disabled ? 'disable' : labelPalette,
       id: id,
@@ -162,15 +163,14 @@ export default class CheckBox extends React.Component {
       customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
                                 ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
                                 ${accessMode} ${customLabel}`,
-      title: toolTip ? toolTip : text,
-      ...LabelProps
-    }), secondaryText ? /*#__PURE__*/React.createElement(Typography, {
+      title: toolTip ? toolTip : text
+    }, LabelProps)), secondaryText ? /*#__PURE__*/React.createElement(Typography, _extends({
       $ui_size: "12",
-      $ui_lineHeight: "1.2",
-      ...secondaryTextProps,
+      $ui_lineHeight: "1.2"
+    }, secondaryTextProps, {
       $i18n_dataTitle: toolTip ? null : secondaryText,
       $ui_className: `${style.secondaryText} ${customSecondaryText}`
-    }, secondaryText) : null), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+    }), secondaryText) : null), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/ColorSelect/ColorMultiSelect.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, { useMemo } from 'react';
 import MultiSelect from "../MultiSelect/MultiSelect";
 import { ColorMultiSelect_propTypes } from "./props/propTypes";
@@ -22,7 +24,7 @@ function ColorMultiSelect(props) {
       };
     });
   }, [options]);
-  return /*#__PURE__*/React.createElement(MultiSelect, { ...rest,
+  return /*#__PURE__*/React.createElement(MultiSelect, _extends({}, rest, {
     options: optionsWithOptionType,
     renderCustomSelectedValue: renderSelectedValue,
     customProps: { ...customProps,
@@ -30,7 +32,7 @@ function ColorMultiSelect(props) {
         renderBeforeChildren: colorIndicator
       }
     }
-  });
+  }));
 }
 
 ColorMultiSelect.propTypes = ColorMultiSelect_propTypes;

package/es/ColorSelect/ColorSingleSelect.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 Select from "../Select/Select";
 import { ColorSingleSelect_propTypes } from "./props/propTypes";
@@ -62,7 +64,7 @@ function ColorSingleSelect(props) {
   }
 
   const colorIndicator = renderCustomColorIndicator || renderColorIndicator;
-  return /*#__PURE__*/React.createElement(Select, { ...rest,
+  return /*#__PURE__*/React.createElement(Select, _extends({}, rest, {
     placeHolder: placeholder,
     dataId: dataId,
     borderColor: borderColor,
@@ -74,7 +76,7 @@ function ColorSingleSelect(props) {
         renderBeforeChildren: colorIndicator
       }
     }
-  });
+  }));
 }
 
 ColorSingleSelect.propTypes = ColorSingleSelect_propTypes;

package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.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";
@@ -17,15 +19,14 @@ function ColorIndicator(props) {
   const {
     background
   } = colorConfig || DUMMY_OBJECT;
-  return /*#__PURE__*/React.createElement("div", { ...tagAttributes,
-    ...a11yAttributes,
+  return /*#__PURE__*/React.createElement("div", _extends({}, tagAttributes, a11yAttributes, {
     className: `${style.varClass} ${style.indicator} ${style[shape]} ${customClass}`,
     style: {
       backgroundColor: background
     },
     "data-id": customId,
     "data-test-id": testId
-  });
+  }));
 }
 
 ColorIndicator.propTypes = propTypes;

package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css

@@ -1,6 +1,6 @@
 .varClass {
-    --local-colorIndicator-height: var(--zd_size10);
-    --local-colorIndicator-width: var(--zd_size10);
+    --local-colorIndicator-height: 10px;
+    --local-colorIndicator-width: 10px;
     --local-colorIndicator-border-radius: 10px;
 }
 

package/es/ColorSelect/_shared/ColoredTag/ColoredTag.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, { useMemo } from 'react';
 import { propTypes } from "./props/propTypes";
 import Tag from "../../../Tag/Tag";
@@ -23,10 +25,10 @@ function ColoredTag(props) {
   const composedAttributes = useMemo(() => ({ ...customAttributes,
     style
   }), [customAttributes, style]);
-  return /*#__PURE__*/React.createElement(Tag, { ...rest,
+  return /*#__PURE__*/React.createElement(Tag, _extends({}, rest, {
     active: isActive,
     customAttributes: composedAttributes
-  });
+  }));
 }
 
 ColoredTag.propTypes = propTypes;

package/es/ColorSelect/_shared/helpers/renderHelpers.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 ColoredTag from "../ColoredTag/ColoredTag";
 import ColorIndicator from "../ColorIndicator/ColorIndicator";
@@ -26,12 +28,12 @@ export function renderColoredTag(data) {
     };
   }
 
-  return /*#__PURE__*/React.createElement(ColoredTag, {
+  return /*#__PURE__*/React.createElement(ColoredTag, _extends({
     text: value,
-    id: id,
-    ...otherData,
+    id: id
+  }, otherData, {
     colorConfig: getColorConfig()
-  });
+  }));
 }
 export function renderColorIndicator(data) {
   const {

package/es/DateTime/DateTime.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 css-modules/no-unused-class: [0, { markAsUsed: ['datesStr', 'dateContainer', 'dateRow', 'today', 'emptySpan', 'dropDown'] }] */
 
 /* eslint-disable react/forbid-component-props */
@@ -750,7 +752,7 @@ export default class DateTime extends React.PureComponent {
       className: `${style.dropBox} ${className}`,
       "data-id": `${dataId}_dateBoxContainer`,
       "data-test-id": `${dataId}_dateBoxContainer`
-    }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+    }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
       size: boxSize,
       boxPosition: position,
       isActive: isActive,
@@ -769,9 +771,8 @@ export default class DateTime extends React.PureComponent {
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
       isRestrictScroll: isRestrictScroll,
-      portalId: dropBoxPortalId,
-      ...DropBoxProps
-    }, /*#__PURE__*/React.createElement(Box, null, childEle)) : null;
+      portalId: dropBoxPortalId
+    }, DropBoxProps), /*#__PURE__*/React.createElement(Box, null, childEle)) : null;
   }
 
 }

package/es/DateTime/DateWidget.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 { DateWidget_propTypes } from "./props/propTypes";
@@ -1042,7 +1044,7 @@ class DateWidgetComponent extends React.Component {
       className: `${className ? className : ''} ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled}`,
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: htmlId,
       value: showValue ? showValue : placeholder,
       needBorder: needBorder,
@@ -1070,9 +1072,8 @@ class DateWidgetComponent extends React.Component {
       isFocus: isPopupReady,
       autoComplete: false,
       a11y: a11y,
-      customProps: TextBoxProps,
-      ...TextBoxIconProps
-    }, /*#__PURE__*/React.createElement(Container, {
+      customProps: TextBoxProps
+    }, TextBoxIconProps), /*#__PURE__*/React.createElement(Container, {
       isInline: true,
       align: "both",
       isCover: false,

package/es/DateTime/Time.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 */
 
 /** ** Libraries *** */
@@ -90,7 +92,7 @@ class Hour extends React.PureComponent {
       hourEmptyText,
       customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
+    return /*#__PURE__*/React.createElement(Select, _extends({
       options: hourSuggestions,
       onChange: onHourSelect,
       selectedValue: hours,
@@ -108,9 +110,8 @@ class Hour extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small",
-      ...customProps
-    });
+      listItemSize: "small"
+    }, customProps));
   }
 
 }
@@ -125,7 +126,7 @@ class Minute extends React.PureComponent {
       needResponsive,
       customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
+    return /*#__PURE__*/React.createElement(Select, _extends({
       options: minSuggestions,
       onChange: onMinutesSelect,
       selectedValue: mins,
@@ -143,9 +144,8 @@ class Minute extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small",
-      ...customProps
-    });
+      listItemSize: "small"
+    }, customProps));
   }
 
 }
@@ -159,7 +159,7 @@ class AmPm extends React.PureComponent {
       needResponsive,
       customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
+    return /*#__PURE__*/React.createElement(Select, _extends({
       options: ampmSuggestions,
       onChange: onAmPmSelect,
       selectedValue: amPm,
@@ -173,9 +173,8 @@ class AmPm extends React.PureComponent {
       needResponsive: needResponsive,
       needListBorder: true,
       needTick: false,
-      listItemSize: "small",
-      ...customProps
-    });
+      listItemSize: "small"
+    }, customProps));
   }
 
 }

package/es/DropBox/DropBox.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, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 import Portal from "../Modal/Portal/Portal"; // import { getLibraryConfig } from '../Provider/Config';
@@ -40,28 +42,27 @@ export default function DropBox(props) {
   const {
     zIndexStyle
   } = cssJSLogic(props);
-  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, _extends({
     onClose: onClose,
     elementRef: dropBoxRef,
     needAutoFocus: needAutoFocus,
     needRestoreFocus: needRestoreFocus,
     needListNavigation: needListNavigation,
     needFocusLoop: needFocusLoop,
-    needEnterAction: needEnterAction,
-    ...focusScopeProps
-  }, /*#__PURE__*/React.createElement(DropBoxElement, {
+    needEnterAction: needEnterAction
+  }, focusScopeProps), /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
-    direction: direction,
-    ...props,
+    direction: direction
+  }, props, {
     zIndexStyle: zIndexStyle,
     subContainerRef: dropBoxRef
-  })) : /*#__PURE__*/React.createElement(DropBoxElement, {
+  }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
     isModel: isModel,
     subContainerRef: dropBoxRef,
-    direction: direction,
-    ...props,
+    direction: direction
+  }, props, {
     zIndexStyle: zIndexStyle
-  });
+  }));
   return isModel && isActive ? /*#__PURE__*/React.createElement(Portal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {