@zohodesk/components 1.0.0-temp-192.1 → 1.0.0-temp-195

package/es/v1/DateTime/CalendarView.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Span_propTypes, CalendarView_propTypes } from './props/propTypes';
-import { CalendarView_defaultProps, Span_defaultProps } from './props/defaultProps';
-import { Container, Box } from '../Layout';
-import style from '../../DateTime/DateTime.module.css';
-import { getMonthEnd } from '../../utils/datetime/common';
-import { getYearDetails } from '../../DateTime/dateFormatUtils/index';
-import DaysRow from './DaysRow';
+import { Span_propTypes, CalendarView_propTypes } from "./props/propTypes";
+import { CalendarView_defaultProps, Span_defaultProps } from "./props/defaultProps";
+import { Container, Box } from "../Layout";
+import style from "../../DateTime/DateTime.module.css";
+import { getMonthEnd } from "../../utils/datetime/common";
+import { getYearDetails } from "../../DateTime/dateFormatUtils/index";
+import DaysRow from "./DaysRow";
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: ['container', 'header', 'thArrowConatainer', 'thArrow', 'thMonYear', 'days', 'daysStr', 'timesection', 'timeStr', 'dropDownContainer', 'dropDown', 'footer', 'space'] }] */
 
 export default class CalendarView extends React.PureComponent {

package/es/v1/DateTime/DateTime.js

@@ -2,22 +2,22 @@
 
 /* eslint-disable react/forbid-component-props */
 import React from 'react';
-import { DateTime_propTypes } from './props/propTypes';
-import { DateTime_defaultProps } from './props/defaultProps';
+import { DateTime_propTypes } from "./props/propTypes";
+import { DateTime_defaultProps } from "./props/defaultProps";
 import datetime from '@zohodesk/datetimejs';
-import CalendarView from './CalendarView';
-import YearView from './YearView';
-import DateTimePopupHeader from './DateTimePopupHeader';
-import DateTimePopupFooter from './DateTimePopupFooter';
-import Time from './Time';
-import style from '../../DateTime/DateTime.module.css';
-import { formatDate, getMonthEnd } from '../../utils/datetime/common';
-import { getIsEmptyValue } from '../../utils/Common';
-import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from '../../DateTime/constants';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { Box } from '../Layout';
-import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from '../../DateTime/dateFormatUtils';
-import { getDateText } from './../../DateTime/dateFormatUtils/dateFormat';
+import CalendarView from "./CalendarView";
+import YearView from "./YearView";
+import DateTimePopupHeader from "./DateTimePopupHeader";
+import DateTimePopupFooter from "./DateTimePopupFooter";
+import Time from "./Time";
+import style from "../../DateTime/DateTime.module.css";
+import { formatDate, getMonthEnd } from "../../utils/datetime/common";
+import { getIsEmptyValue } from "../../utils/Common";
+import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from "../../DateTime/constants";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { Box } from "../Layout";
+import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from "../../DateTime/dateFormatUtils";
+import { getDateText } from "./../../DateTime/dateFormatUtils/dateFormat";
 
 function title(date, year, month) {
   let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];

package/es/v1/DateTime/DateTimePopupFooter.js

@@ -2,15 +2,15 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DateTimePopupFooter_propTypes } from './props/propTypes';
-import { DateTimePopupFooter_defaultProps } from './props/defaultProps';
+import { DateTimePopupFooter_propTypes } from "./props/propTypes";
+import { DateTimePopupFooter_defaultProps } from "./props/defaultProps";
 /** ** Components *** */
 
-import { Container } from '../Layout';
-import Button from '../Button/Button';
+import { Container } from "../Layout";
+import Button from "../Button/Button";
 /** ** CSS *** */
 
-import style from '../../DateTime/DateTime.module.css';
+import style from "../../DateTime/DateTime.module.css";
 export default class DateTimePopupFooter extends PureComponent {
   render() {
     const {

package/es/v1/DateTime/DateTimePopupHeader.js

@@ -2,15 +2,15 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DateTimePopupHeader_propTypes } from './props/propTypes';
+import { DateTimePopupHeader_propTypes } from "./props/propTypes";
 /** ** Components *** */
 
-import { Container, Box } from '../Layout';
+import { Container, Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import Heading from '../Heading/Heading';
+import Heading from "../Heading/Heading";
 /** ** CSS *** */
 
-import style from '../../DateTime/DateTime.module.css';
+import style from "../../DateTime/DateTime.module.css";
 
 class Span extends React.PureComponent {
   constructor(props) {

package/es/v1/DateTime/DateWidget.js

@@ -1,31 +1,31 @@
 /**** Libraries ****/
 import React from 'react';
-import { DateWidget_propTypes } from './props/propTypes';
-import { DateWidget_defaultProps } from './props/defaultProps';
+import { DateWidget_propTypes } from "./props/propTypes";
+import { DateWidget_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
-import DateTime from './DateTime';
-import Popup from '../Popup/Popup';
+import DateTime from "./DateTime";
+import Popup from "../Popup/Popup";
 import { Icon } from '@zohodesk/icons';
-import { Container } from '../Layout';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
+import { Container } from "../Layout";
+import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 /**** CSS ****/
 
-import style from '../../DateTime/DateWidget.module.css';
+import style from "../../DateTime/DateWidget.module.css";
 /**** Methods ****/
 
-import validator from '../../DateTime/validator';
-import { formatDate } from '../../utils/datetime/common';
-import { getIsSupportedKey, arrayIsNotEqual } from '../../DateTime/dateFormatUtils';
-import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from '../../DateTime/dateFormatUtils/dateFormat';
-import { getChangedDay } from '../../DateTime/dateFormatUtils/dayChange';
-import { getChangedMonth } from '../../DateTime/dateFormatUtils/monthChange';
-import { getChangedYear } from '../../DateTime/dateFormatUtils/yearChange';
-import { getChangedHour, getChangedMinute, getChangedNoon } from '../../DateTime/dateFormatUtils/timeChange';
-import { getIsEmptyValue } from '../../utils/Common';
+import validator from "../../DateTime/validator";
+import { formatDate } from "../../utils/datetime/common";
+import { getIsSupportedKey, arrayIsNotEqual } from "../../DateTime/dateFormatUtils";
+import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from "../../DateTime/dateFormatUtils/dateFormat";
+import { getChangedDay } from "../../DateTime/dateFormatUtils/dayChange";
+import { getChangedMonth } from "../../DateTime/dateFormatUtils/monthChange";
+import { getChangedYear } from "../../DateTime/dateFormatUtils/yearChange";
+import { getChangedHour, getChangedMinute, getChangedNoon } from "../../DateTime/dateFormatUtils/timeChange";
+import { getIsEmptyValue } from "../../utils/Common";
 /** * Constants ** */
 
-import { INVALID_DATE, i18nShortMonths, i18nMonths } from '../../DateTime/constants';
+import { INVALID_DATE, i18nShortMonths, i18nMonths } from "../../DateTime/constants";
 /* eslint-disable react/no-unused-prop-types */
 
 /* eslint css-modules/no-unused-class: [0, { markAsUsed: 'inputLine'] }] */

package/es/v1/DateTime/DaysRow.js

@@ -2,13 +2,13 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { DaysRow_propTypes } from './props/propTypes';
+import { DaysRow_propTypes } from "./props/propTypes";
 /** ** CSS *** */
 
-import style from '../../DateTime/DateTime.module.css';
+import style from "../../DateTime/DateTime.module.css";
 /** ** Components *** */
 
-import { Container, Box } from '../Layout';
+import { Container, Box } from "../Layout";
 export default class DaysRow extends PureComponent {
   render() {
     const {

package/es/v1/DateTime/Time.js

@@ -2,15 +2,15 @@
 
 /** ** Libraries *** */
 import React, { PureComponent } from 'react';
-import { Time_propTypes } from './props/propTypes';
-import { Time_defaultProps } from './props/defaultProps';
+import { Time_propTypes } from "./props/propTypes";
+import { Time_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
-import { Container, Box } from '../Layout';
-import Select from '../Select/Select';
+import { Container, Box } from "../Layout";
+import Select from "../Select/Select";
 /** ** CSS *** */
 
-import style from '../../DateTime/DateTime.module.css';
+import style from "../../DateTime/DateTime.module.css";
 export default class Time extends PureComponent {
   render() {
     const {

package/es/v1/DateTime/YearView.js

@@ -1,19 +1,19 @@
 /**** Libraries ****/
 import React from 'react';
-import { YearView_propTypes } from './props/propTypes';
-import { YearView_defaultProps } from './props/defaultProps';
+import { YearView_propTypes } from "./props/propTypes";
+import { YearView_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
 import { Virtualizer } from '@zohodesk/virtualizer';
-import { Container, Box } from '../Layout';
+import { Container, Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import Heading from '../Heading/Heading';
+import Heading from "../Heading/Heading";
 /**** CSS ****/
 
-import style from '../../DateTime/YearView.module.css';
+import style from "../../DateTime/YearView.module.css";
 /**** Methods ****/
 
-import { getYearDetails } from '../../DateTime/dateFormatUtils';
+import { getYearDetails } from "../../DateTime/dateFormatUtils";
 const monthNamesData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 function getYears() {

package/es/v1/DateTime/index.js

@@ -1 +1 @@
-export { default as DateWidget } from './DateWidget';
+export { default as DateWidget } from "./DateWidget";

package/es/v1/DateTime/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { dataFormatList } from '../../../DateTime/dateFormatUtils/dateFormats';
+import { dataFormatList } from "../../../DateTime/dateFormatUtils/dateFormats";
 export const CalendarView_propTypes = {
   dataId: PropTypes.string,
   date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/es/v1/DropBox/DropBox.js

@@ -1,16 +1,14 @@
-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 LibraryContext from '../../Provider/LibraryContextInit';
-import cssJSLogic from '../../DropBox/css/cssJSLogic';
-import DropBoxElement from './DropBoxElement/DropBoxElement';
-import { DropBoxDefaultProps } from './props/defaultProps';
-import { DropBoxPropTypes } from './props/propTypes';
-import { stopPropagation } from '../../utils/Common';
-import isMobilePopover from './utils/isMobilePopover';
-import style from '../../DropBox/css/DropBox.module.css';
+import Modal from "../Modal/Modal";
+import LibraryContext from "../../Provider/LibraryContextInit";
+import cssJSLogic from "../../DropBox/css/cssJSLogic";
+import DropBoxElement from "./DropBoxElement/DropBoxElement";
+import { DropBoxDefaultProps } from "./props/defaultProps";
+import { DropBoxPropTypes } from "./props/propTypes";
+import { stopPropagation } from "../../utils/Common";
+import isMobilePopover from "./utils/isMobilePopover";
+import style from "../../DropBox/css/DropBox.module.css";
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
   const DropBoxContext = useContext(LibraryContext);
@@ -41,27 +39,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/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import useDropboxPosCalc from '../../../DropBox/DropBoxElement/useDropboxPosCalc';
-import cssJSLogic from '../../../DropBox/DropBoxElement/css/cssJSLogic';
-import { positionMapping } from '../../../DropBox/DropBoxPositionMapping.json';
-import { DropBoxElementDefaultProps } from './props/defaultProps';
-import { DropBoxElementPropTypes } from './props/propTypes';
+import useDropboxPosCalc from "../../../DropBox/DropBoxElement/useDropboxPosCalc";
+import cssJSLogic from "../../../DropBox/DropBoxElement/css/cssJSLogic";
+import { positionMapping } from "../../../DropBox/DropBoxPositionMapping.json";
+import { DropBoxElementDefaultProps } from "./props/defaultProps";
+import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';
-import style from '../../../DropBox/DropBoxElement/css/DropBoxElement.module.css';
+import style from "../../../DropBox/DropBoxElement/css/DropBoxElement.module.css";
 export default function DropBoxElement(props) {
   let {
     children,

package/es/v1/DropBox/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { DropBoxElementDefaultProps } from '../DropBoxElement/props/defaultProps';
+import { DropBoxElementDefaultProps } from "../DropBoxElement/props/defaultProps";
 export const defaultProps = {
   needResponsive: true,
   portalId: 'portal1',

package/es/v1/DropBox/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { DropBoxElementPropTypes } from '../DropBoxElement/props/propTypes';
+import { DropBoxElementPropTypes } from "../DropBoxElement/props/propTypes";
 export const propTypes = {
   needResponsive: PropTypes.bool,
   portalId: PropTypes.string,

package/es/v1/DropBox/utils/isMobilePopover.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../../Provider/Config';
+import { getLibraryConfig } from "../../../Provider/Config";
 export default function isMobilePopover(needResponsive) {
   //   let { needResponsive } = props;
   let windowWidth,

package/es/v1/DropDown/DropDown.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from './props/propTypes';
-import { DropDownItemContainer_defaultProps } from './props/defaultProps';
-import style from '../../DropDown/DropDown.module.css';
-import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
+import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from "./props/propTypes";
+import { DropDownItemContainer_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDown.module.css";
+import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver/PopOver";
 export default function DropDown(props) {
   let {
     children
   } = props;
-  return /*#__PURE__*/React.createElement(PopOver, props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
+  return /*#__PURE__*/React.createElement(PopOver, { ...props
+  }, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
 }
 DropDown.propTypes = DropDown_propTypes;
 export function DropDownTarget(props) {

package/es/v1/DropDown/DropDownHeading.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownHeading_propTypes } from './props/propTypes';
-import { DropDownHeading_defaultProps } from './props/defaultProps';
-import style from '../../DropDown/DropDownHeading.module.css';
+import { DropDownHeading_propTypes } from "./props/propTypes";
+import { DropDownHeading_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDownHeading.module.css";
 export default function DropDownHeading(props) {
   let {
     text,

package/es/v1/DropDown/DropDownItem.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { DropDownItem_propTypes } from './props/propTypes';
-import { DropDownItem_defaultProps } from './props/defaultProps';
-import style from '../../DropDown/DropDownItem.module.css';
+import { DropDownItem_propTypes } from "./props/propTypes";
+import { DropDownItem_defaultProps } from "./props/defaultProps";
+import style from "../../DropDown/DropDownItem.module.css";
 export default function DropDownItem(props) {
   let {
     value,

package/es/v1/DropDown/DropDownSearch.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
-import { DropDownSearch_propTypes } from './props/propTypes';
-import { DropDownSearch_defaultProps } from './props/defaultProps';
-import TextBox from '../TextBox/TextBox';
-import style from '../../DropDown/DropDownSearch.module.css';
+import { DropDownSearch_propTypes } from "./props/propTypes";
+import { DropDownSearch_defaultProps } from "./props/defaultProps";
+import TextBox from "../TextBox/TextBox";
+import style from "../../DropDown/DropDownSearch.module.css";
 export default function DropDownSearch(props) {
   let {
     name,

package/es/v1/DropDown/DropDownSeparator.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DropDownSeparator_propTypes } from './props/propTypes';
-import style from '../../DropDown/DropDownSeparator.module.css';
+import { DropDownSeparator_propTypes } from "./props/propTypes";
+import style from "../../DropDown/DropDownSeparator.module.css";
 export default function DropDownSeparator(props) {
   let {
     customClass = ''

package/es/v1/DropDown/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { PopOver_propTypes } from './../../PopOver/props/propTypes';
+import { PopOver_propTypes } from "./../../PopOver/props/propTypes";
 export const DropDown_propTypes = { ...PopOver_propTypes
 };
 export const DropDownTarget_propTypes = {

package/es/v1/Heading/Heading.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../Heading/Heading.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../Heading/Heading.module.css";
 export default function Heading(props) {
   let {
     tagName,

package/es/v1/Label/Label.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../Label/Label.module.css';
-import colors from '../../Label/LabelColors.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../Label/Label.module.css";
+import colors from "../../Label/LabelColors.module.css";
 export default function Label(props) {
   const {
     text,

package/es/v1/Layout/Box.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { BoxProps as propTypes } from './props/propTypes';
-import { BoxDefaultProps as defaultProps } from './props/defaultProps';
+import { BoxProps as propTypes } from "./props/propTypes";
+import { BoxDefaultProps as defaultProps } from "./props/defaultProps";
 /* eslint css-modules/no-unused-class: 0 */
 
-import { createProps, getClass, setProps } from '../../Layout/utils';
-import style from '../../Layout/Layout.module.css';
+import { createProps, getClass, setProps } from "../../Layout/utils";
+import style from "../../Layout/Layout.module.css";
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getBoxClassNames(props) {

package/es/v1/Layout/Container.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ContainerProps as propTypes } from './props/propTypes';
-import { ContainerDefaultProps as defaultProps } from './props/defaultProps';
+import { ContainerProps as propTypes } from "./props/propTypes";
+import { ContainerDefaultProps as defaultProps } from "./props/defaultProps";
 /* eslint css-modules/no-unused-class: 0 */
 
-import { createProps, getClass, setProps } from '../../Layout/utils';
-import style from '../../Layout/Layout.module.css';
+import { createProps, getClass, setProps } from "../../Layout/utils";
+import style from "../../Layout/Layout.module.css";
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getContainerClassNames(props) {

package/es/v1/Layout/index.js

@@ -1,2 +1,2 @@
-export { default as Container } from './Container';
-export { default as Box } from './Box';
+export { default as Container } from "./Container";
+export { default as Box } from "./Box";

package/es/v1/ListItem/ListContainer.js

@@ -1,13 +1,11 @@
-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';
-import CssProvider from '../../Provider/CssProvider';
-import style from '../../ListItem/ListItem.module.css';
-import { ListContainerDefaultProps } from './props/defaultProps';
-import { ListContainer_Props } from './props/propTypes';
-import { useResponsiveReceiver } from '../../Responsive/CustomResponsive';
+import { Container } from "../Layout";
+import CssProvider from "../../Provider/CssProvider";
+import style from "../../ListItem/ListItem.module.css";
+import { ListContainerDefaultProps } from "./props/defaultProps";
+import { ListContainer_Props } from "./props/propTypes";
+import { useResponsiveReceiver } from "../../Responsive/CustomResponsive";
 
 const ListContainer = props => {
   const {
@@ -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/v1/ListItem/ListItem.js

@@ -1,17 +1,15 @@
-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';
-import ListContainer from './ListContainer';
-import { ListItemDefaultProps } from './props/defaultProps';
-import { ListItem_Props } from './props/propTypes';
+import { Box } from "../Layout";
+import ListContainer from "./ListContainer";
+import { ListItemDefaultProps } from "./props/defaultProps";
+import { ListItem_Props } from "./props/propTypes";
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
-import style from '../../ListItem/ListItem.module.css';
+import style from "../../ListItem/ListItem.module.css";
 
 const ListItem = props => {
   let {
@@ -73,7 +71,7 @@ const ListItem = props => {
   } = 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,
@@ -94,8 +92,9 @@ const ListItem = props => {
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     eleRef: handleRef,
-    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