@zohodesk/components 1.2.29 → 1.2.30

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.30
+
+- **MultiSelect** - needResponsive default Prop Setted as true as before.
+
 # 1.2.29
 
 - Common providers update for v1 components

package/es/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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -108,23 +106,26 @@ export default class AppContainer extends React.Component {
       TooltipProps = {},
       ExtraProps = {}
     } = customProps;
-    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: this.getContainerRef
-    }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
+      eleRef: this.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: this.setTooltipRef,
-      customClass: tooltipClass
-    }, TooltipProps))) : null);
+      customClass: tooltipClass,
+      ...TooltipProps
+    })) : null);
   }
 
 }

package/es/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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -156,15 +154,16 @@ export default class Avatar extends React.Component {
     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/Avatar/Avatar.module.css

@@ -18,31 +18,19 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
-  /* css:theme-validation:ignore */
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
 
 .border {
-  /* css:theme-validation:ignore */
   border-color: var(--avatar_border_color);
 }
 
-.borderOnHover:hover,
-.borderOnActive {
-  /* css:theme-validation:ignore */
-}
-
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
 
-.avatar,
-.primary {
-  /* css:theme-validation:ignore */
-}
-
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }

package/es/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';
@@ -47,12 +45,13 @@ export default class AvatarTeam extends React.Component {
       customAvatarTeam = ''
     } = customClass;
     let 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,
@@ -66,8 +65,9 @@ export default class AvatarTeam extends React.Component {
       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/AvatarTeam/AvatarTeam.module.css

@@ -25,13 +25,10 @@
   composes: varClass;
   composes: posab from '../common/common.module.css';
   top: var(--avatarteam_top_top);
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
   outline-width: var(--avatarteam_outline_width);
   outline-style: var(--avatarteam_outline_style);
-  /* css:theme-validation:ignore */
   outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
@@ -76,7 +73,6 @@
   top: var(--avatarteam_bottom_top);
   outline-width: var(--avatarteam_outline_width);
   outline-style: var(--avatarteam_outline_style);
-  /* css:theme-validation:ignore */
   outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {

package/es/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';
@@ -41,7 +39,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,
@@ -50,10 +48,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

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

@@ -48,13 +48,10 @@
   composes: dotted from '../../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);
-  /* css:theme-validation:ignore */
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
-  /* css:theme-validation:ignore */
   min-width: var(--button_min_width);
-  /* css:theme-validation:ignore */
   height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
@@ -298,7 +295,6 @@
 .loadingelement:after {
   content: '';
   position: absolute;
-  /* css:theme-validation:ignore */
 }
 
 .loadingelement:before, .loadingelement:after {
@@ -472,7 +468,6 @@
   transform-origin: center;
   border-width: 2px 2px 0 0;
   border-style: solid;
-  /* css:theme-validation:ignore */
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }
@@ -529,6 +524,5 @@
 }
 
 .loader{
-  /* css:theme-validation:ignore */
   color:var(--dot_mirror)
 }

package/es/Buttongroup/Buttongroup.module.css

@@ -11,8 +11,6 @@
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   background-color: var(--buttongroup_bg_color);
   box-shadow: var(--buttongroup_box_shadow);
   padding: var(--buttongroup_padding);

package/es/CheckBox/CheckBox.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 { propTypes } from './props/propTypes';
 import { defaultProps } from './props/defaultProps';
@@ -75,7 +73,7 @@ export default class CheckBox extends React.Component {
       role = 'checkbox',
       ariaChecked = checked
     } = a11y;
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, {
       dataId: dataId,
       isCover: false,
       isInline: text ? false : true,
@@ -92,8 +90,9 @@ export default class CheckBox extends React.Component {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-hidden": ariaHidden,
-      "data-selector-id": dataSelectorId || id
-    }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
+      "data-selector-id": dataSelectorId || id,
+      ...CheckBoxProps
+    }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
@@ -145,7 +144,7 @@ export default class CheckBox 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: disabled ? 'disable' : labelPalette,
       id: id,
@@ -156,8 +155,9 @@ 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))));
+      title: toolTip ? toolTip : text,
+      ...LabelProps
+    })));
   }
 
 }

package/es/CheckBox/CheckBox.module.css

@@ -34,7 +34,6 @@
 }
 .boxContainer {
   composes: offSelection from '../common/common.module.css';
-  /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
@@ -121,7 +120,6 @@
 
 .checkedprimaryLabel,
 .checkeddangerLabel {
-  /* css:theme-validation:ignore */
   color: var(--checkbox_checked_active_color);
 }
 .activeprimaryLabel:hover

package/es/DateTime/DateTime.module.css

@@ -36,7 +36,6 @@
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
   line-height: 1.3846;
-  /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;

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

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,11 +18,6 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
-.defaultPalette,
-.darkPalette {
-  /* css:theme-validation:ignore */
-}
-
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -212,7 +207,6 @@
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
-  /* css:theme-validation:ignore */
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -422,7 +416,6 @@
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
-  /* css:theme-validation:ignore */
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

package/es/DropBox/css/DropBox.module.css

@@ -49,7 +49,6 @@
 
 .freeze {
   composes: varClass;
-  /* css:theme-validation:ignore */
   background: var(--dropbox_mob_bg_color);
 }
 

package/es/DropDown/DropDown.js

@@ -10,7 +10,8 @@ export default class DropDown extends React.Component {
     let {
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement(PopOver, this.props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
+    return /*#__PURE__*/React.createElement(PopOver, { ...this.props
+    }, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
   }
 
 }

package/es/DropDown/DropDownHeading.module.css

@@ -18,9 +18,7 @@
   font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
-  /* css:theme-validation:ignore */
   color: var(--dropdownheading_text_color);
-  /* css:theme-validation:ignore */
   padding: var(--dropdownheading_padding);
   background-color: var(--dropdownheading_bg_color);
 }
@@ -35,10 +33,6 @@
 .light {
   composes: default;
 }
-.light::after,
-.dark::after {
-  /* css:theme-validation:ignore */
-}
 .light::after, .dark::after {
   background-color: var(--dropdownheading_underline_bg_color);
 }

package/es/DropDown/DropDownItem.module.css

@@ -20,8 +20,6 @@
   position: relative;
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13) ;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -76,7 +74,6 @@
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
-  /* css:theme-validation:ignore */
   border-width: var(--dropdownitem-user-border-width);
   border-style: var(--dropdownitem-user-border-style);
   border-color: var(--dropdownitem-user-border-color);

package/es/Label/Label.module.css

@@ -12,7 +12,6 @@
   vertical-align: middle;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
-  /* css:theme-validation:ignore */
   color: var(--label_text_color);
   font-family: var(--label_font_family);
   cursor: var(--label_cursor);

package/es/ListItem/ListContainer.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, { useCallback } from 'react';
 import { Container } from '../Layout';
@@ -73,7 +71,7 @@ const ListContainer = props => {
     options.tabindex = '0';
   }
 
-  return /*#__PURE__*/React.createElement(Container, _extends({
+  return /*#__PURE__*/React.createElement(Container, {
     role: role,
     "data-a11y-inset-focus": insetFocus,
     "aria-selected": ariaSelected,
@@ -89,8 +87,11 @@ const ListContainer = props => {
     onMouseOver: onMouseOver,
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
-    "data-title": isDisabled ? disableTitle : title
-  }, options, customProps, a11yAttributes), children);
+    "data-title": isDisabled ? disableTitle : title,
+    ...options,
+    ...customProps,
+    ...a11yAttributes
+  }, children);
 };
 
 ListContainer.defaultProps = ListContainerDefaultProps;

package/es/ListItem/ListItem.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 { Box } from '../Layout';
@@ -92,7 +90,7 @@ export default class ListItem extends React.Component {
     } = listA11y;
     let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
     let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+    return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -113,8 +111,9 @@ export default class ListItem extends React.Component {
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
-      customProps: ListItemProps
-    }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps,
+      ...ContainerProps
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value

package/es/ListItem/ListItem.module.css

@@ -23,10 +23,8 @@
   composes: varClass;
   position: relative;
   list-style: none;
-  /* css:theme-validation:ignore */
   color: var(--listitem_text_color);
   font-size: var(--zd_font_size13) ;
-  /* css:theme-validation:ignore */
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -36,11 +34,6 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
-.list,
-.default,
-.secondary {
-  /* css:theme-validation:ignore */
-}
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
@@ -101,13 +94,6 @@
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover,
-.primaryHover,
-.secondaryHover,
-.darkHover {
-  /* css:theme-validation:ignore */
-}
-
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
@@ -149,12 +135,6 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault,
-.activeprimary,
-.activesecondary,
-.activedark {
-  /* css:theme-validation:ignore */
-}
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
@@ -180,7 +160,6 @@
 .defaultTick,
 .darkTick {
   position: absolute;
-  /* css:theme-validation:ignore */
   color: var(--listitem_tickicon_color);
 }
 

package/es/ListItem/ListItemWithAvatar.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 { Box } from '../Layout';
@@ -97,7 +95,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     } = listA11y;
     let isDarkPalette = palette === 'dark';
     let dataIdString = value ? value : dataId;
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+    return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -115,8 +113,9 @@ export default class ListItemWithAvatar extends React.PureComponent {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps
-    }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps,
+      ...ContainerProps
+    }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,

package/es/ListItem/ListItemWithCheckBox.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 ListContainer from './ListContainer';
 import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
@@ -76,7 +74,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customCheckBox = '',
       customLabel = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+    return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -92,8 +90,9 @@ export default class ListItemWithCheckBox 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(CheckBox, {
       checked: checked,

package/es/ListItem/ListItemWithIcon.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 { Box } from '../Layout';
@@ -87,7 +85,7 @@ export default class ListItemWithIcon extends React.Component {
       ariaHidden
     } = listA11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
+    return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -108,8 +106,9 @@ export default class ListItemWithIcon extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps
-    }, ContainerProps), iconName && /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps,
+      ...ContainerProps
+    }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       className: style.iconBox,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`