@zohodesk/components 1.2.40 → 1.2.42

package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -15,7 +15,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       data-test-id="selectYear"
     >
       <h2
-        class="reset thMonYear"
+        class="reset  thMonYear"
         tabindex="0"
       />
       <span>

package/es/DateTime/__tests__/__snapshots__/YearView.spec.js.snap

@@ -35,7 +35,7 @@ exports[`YearView rendering the defult props 1`] = `
             data-test-id="boxComponent"
           >
             <h4
-              class="reset yearText"
+              class="reset  yearText"
               data-title="1850"
               tabindex="0"
             >

package/es/DateTime/dateFormatUtils/dateFormat.js

@@ -4,13 +4,13 @@
 import datetime from '@zohodesk/datetimejs';
 /** * Methods ** */
 
-import { getDayEnd, convertYearToTwoDigit, addZero, getMonthDetails, getYearDetails, getDayDetails, getHourDetails, getMinuteDetails, getNoonDetails, getIsCurrentYear, removeYearPattern } from "./index";
-import { getIsEmptyValue } from "../../utils/Common";
-import { formatDate } from "../../utils/datetime/common";
+import { getDayEnd, convertYearToTwoDigit, addZero, getMonthDetails, getYearDetails, getDayDetails, getHourDetails, getMinuteDetails, getNoonDetails, getIsCurrentYear, removeYearPattern } from './index';
+import { getIsEmptyValue } from '../../utils/Common';
+import { formatDate } from '../../utils/datetime/common';
 /** * Constants ** */
 
 import { defaultFormat, supportedPatterns, // patternChangeStr,
-patternSplitStr, INCONSTANT, flags } from "../constants";
+patternSplitStr, INCONSTANT, flags } from '../constants';
 
 function getDateFormatString() {
   let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

package/es/DateTime/dateFormatUtils/dayChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
-import { getIsNewValueType, getDayDetails, getIsNumberTyped, getIsDeleteTyped } from "./index";
-import { getKeyValue } from "../../utils/Common";
+import { getIsNewValueType, getDayDetails, getIsNumberTyped, getIsDeleteTyped } from './index';
+import { getKeyValue } from '../../utils/Common';
 export function getChangedDay(values, event, focusOrders, keyActions) {
   const {
     keyCode,

package/es/DateTime/dateFormatUtils/index.js

@@ -1,11 +1,11 @@
 /* eslint-disable no-param-reassign */
 
 /** * Methods ** */
-import { getMonthEnd } from "../../utils/datetime/common";
+import { getMonthEnd } from '../../utils/datetime/common';
 /** * Constants ** */
 
-import { flags, INVALID_DATE } from "../constants";
-import { getDateText } from "./dateFormat";
+import { flags, INVALID_DATE } from '../constants';
+import { getDateText } from './dateFormat';
 export function convertYearToTwoDigit(year) {
   return parseInt(year.toString().slice(-2));
 }

package/es/DateTime/dateFormatUtils/monthChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
-import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getMonthDetails, getDayEnd } from "./index";
-import { getKeyValue } from "../../utils/Common";
+import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getMonthDetails, getDayEnd } from './index';
+import { getKeyValue } from '../../utils/Common';
 export function getChangedMonth(values, event, focusOrders, keyActions) {
   const {
     keyCode,

package/es/DateTime/dateFormatUtils/timeChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
-import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from "./index";
-import { getKeyValue, getIsEmptyValue } from "../../utils/Common";
+import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from './index';
+import { getKeyValue, getIsEmptyValue } from '../../utils/Common';
 export function getChangedHour(values, event, focusOrders, keyActions) {
   let {
     is24Hour = false

package/es/DateTime/dateFormatUtils/yearChange.js

@@ -1,6 +1,6 @@
 /** * Methods ** */
-import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from "./index";
-import { getKeyValue } from "../../utils/Common";
+import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from './index';
+import { getKeyValue } from '../../utils/Common';
 export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
   let {
     yearInfo

package/es/DateTime/index.js

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

package/es/DateTime/props/propTypes.js

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

package/es/DateTime/validator.js

@@ -1,5 +1,5 @@
-import typeChecker from "./typeChecker";
-import { clone } from "./objectUtils";
+import typeChecker from './typeChecker';
+import { clone } from './objectUtils';
 const validator = {
   combinePropsValidation: (currentProps, type, validateOn, validationObj, defaultCheckPropsRules, defaultValidateRules) => {
     let newType = type.toLowerCase();

package/es/DropBox/DropBox.js

@@ -1,15 +1,15 @@
 import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Modal from "../Modal/Modal"; // import { getLibraryConfig } from '../Provider/Config';
+import Modal from '../Modal/Modal'; // import { getLibraryConfig } from '../Provider/Config';
 
-import LibraryContext from "../Provider/LibraryContextInit";
-import cssJSLogic from "./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 "./css/DropBox.module.css";
+import LibraryContext from '../Provider/LibraryContextInit';
+import cssJSLogic from './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 './css/DropBox.module.css';
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
   const DropBoxContext = useContext(LibraryContext);

package/es/DropBox/DropBoxElement/DropBoxElement.js

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

package/es/DropBox/DropBoxElement/__tests__/DropBoxElement.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropBoxElement from "../DropBoxElement";
+import DropBoxElement from '../DropBoxElement';
 describe('DropBoxElement', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(_ref) {
   let {

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -1,4 +1,4 @@
-import { remConvert } from "../../utils/Common";
+import { remConvert } from '../../utils/Common';
 export default function useDropboxPosCalc(props) {
   let {
     right,

package/es/DropBox/__tests__/DropBox.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropBox from "../DropBox";
+import DropBox from '../DropBox';
 describe('DropBox', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropBox/css/cssJSLogic.js

@@ -1,4 +1,4 @@
-import { useZIndex } from "../../Provider/ZindexProvider";
+import { useZIndex } from '../../Provider/ZindexProvider';
 export default function cssJSLogic(props) {
   const {
     isActive,

package/es/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/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/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/DropDown/DropDown.js

@@ -1,8 +1,8 @@
 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.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.module.css';
+import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'shadow', 'target', 'menu', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', 'separator', 'small', 'search', 'medium', 'heading'] }] */
 
 export default class DropDown extends React.Component {

package/es/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 "./DropDownHeading.module.css";
+import { DropDownHeading_propTypes } from './props/propTypes';
+import { DropDownHeading_defaultProps } from './props/defaultProps';
+import style from './DropDownHeading.module.css';
 export default class DropDownHeading extends React.Component {
   render() {
     let {

package/es/DropDown/DropDownItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownItem_propTypes } from "./props/propTypes";
-import { DropDownItem_defaultProps } from "./props/defaultProps";
-import style from "./DropDownItem.module.css";
+import { DropDownItem_propTypes } from './props/propTypes';
+import { DropDownItem_defaultProps } from './props/defaultProps';
+import style from './DropDownItem.module.css';
 export default class DropDownItem extends React.Component {
   constructor(props) {
     super(props);

package/es/DropDown/DropDownSearch.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDownSearch_propTypes } from "./props/propTypes";
-import { DropDownSearch_defaultProps } from "./props/defaultProps";
-import TextBox from "../TextBox/TextBox";
-import style from "./DropDownSearch.module.css";
+import { DropDownSearch_propTypes } from './props/propTypes';
+import { DropDownSearch_defaultProps } from './props/defaultProps';
+import TextBox from '../TextBox/TextBox';
+import style from './DropDownSearch.module.css';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'menu', 'shadow', 'target', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', separator, 'small', 'search', 'medium', 'heading', 'listGroup'] }] */
 
 export default class DropDownSearch extends React.Component {

package/es/DropDown/DropDownSeparator.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DropDownSeparator_propTypes } from "./props/propTypes";
-import style from "./DropDownSeparator.module.css";
+import { DropDownSeparator_propTypes } from './props/propTypes';
+import style from './DropDownSeparator.module.css';
 export default class DropDownSeparator extends React.Component {
   render() {
     let {

package/es/DropDown/__tests__/DropDown.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDown from "../DropDown";
+import DropDown from '../DropDown';
 describe('DropDown', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownHeading.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownHeading from "../DropDownHeading";
+import DropDownHeading from '../DropDownHeading';
 describe('DropDownHeading', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownItem.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownItem from "../DropDownItem";
+import DropDownItem from '../DropDownItem';
 describe('DropDownItem', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownSearch.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownSearch from "../DropDownSearch";
+import DropDownSearch from '../DropDownSearch';
 describe('DropDownSearch', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/__tests__/DropDownSeparator.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DropDownSeparator from "../DropDownSeparator";
+import DropDownSeparator from '../DropDownSeparator';
 describe('DropDownSeparator', () => {
   test('rendering the defult props', () => {
     const {

package/es/DropDown/index.js

@@ -1,7 +1,7 @@
-export { default as DropDown } from "./DropDown";
-export { DropDownTarget } from "./DropDown";
-export { DropDownItemContainer } from "./DropDown";
-export { default as DropDownHeading } from "./DropDownHeading";
-export { default as DropDownItem } from "./DropDownItem";
-export { default as DropDownSearch } from "./DropDownSearch";
-export { default as DropDownSeparator } from "./DropDownSeparator";
+export { default as DropDown } from './DropDown';
+export { DropDownTarget } from './DropDown';
+export { DropDownItemContainer } from './DropDown';
+export { default as DropDownHeading } from './DropDownHeading';
+export { default as DropDownItem } from './DropDownItem';
+export { default as DropDownSearch } from './DropDownSearch';
+export { default as DropDownSeparator } from './DropDownSeparator';

package/es/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/Heading/Heading.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Heading.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
+import style from './Heading.module.css';
 export default class Heading extends React.Component {
   render() {
     let {
@@ -12,15 +13,17 @@ export default class Heading extends React.Component {
       title,
       dataTitle,
       dataId,
-      a11y
+      a11y,
+      whiteSpace
     } = this.props;
     return /*#__PURE__*/React.createElement(tagName, {
-      className: `${style.reset} ${className}`,
+      className: `${style.reset} ${whiteSpace ? whiteSpaceClassMapping[whiteSpace] : ''} ${className}`,
       onClick,
       onDoubleClick,
       'data-title': dataTitle || title,
       'data-id': dataId,
       'data-test-id': dataId,
+      'data-title-wrap': whiteSpace,
       ...a11y
     }, title);
   }

package/es/Heading/__tests__/Heading.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Heading from "../Heading";
+import Heading from '../Heading';
 describe('Heading', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +8,13 @@ describe('Heading', () => {
     } = render( /*#__PURE__*/React.createElement(Heading, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const whiteSpace = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'];
+  test.each(whiteSpace)('Should render whiteSpace of Heading - %s', whiteSpace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      whiteSpace: whiteSpace
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -1,9 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_breakSpaces "
+    data-title-wrap="break-spaces"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_normal "
+    data-title-wrap="normal"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_nowrap "
+    data-title-wrap="nowrap"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_pre "
+    data-title-wrap="pre"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preLine "
+    data-title-wrap="pre-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preWrap "
+    data-title-wrap="pre-wrap"
+  />
+</DocumentFragment>
+`;
+
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset "
+    class="reset  "
   />
 </DocumentFragment>
 `;

package/es/Heading/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };

package/es/Label/Label.js

@@ -2,10 +2,10 @@
   'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
 ]}] */
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Label.module.css";
-import colors from "./LabelColors.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Label.module.css';
+import colors from './LabelColors.module.css';
 export default class Label extends React.Component {
   render() {
     let {

package/es/Label/__tests__/Label.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Label from "../Label.js";
+import Label from '../Label.js';
 describe('Label', () => {
   test('rendering the defult props', () => {
     const {

package/es/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 "./utils";
-import style from "./Layout.module.css";
+import { createProps, getClass, setProps } from './utils';
+import style from './Layout.module.css';
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getBoxClassNames(props) {

package/es/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 "./utils";
-import style from "./Layout.module.css";
+import { createProps, getClass, setProps } from './utils';
+import style from './Layout.module.css';
 /* eslint-disable  react/no-unused-prop-types*/
 
 function getContainerClassNames(props) {

package/es/Layout/__tests__/Box.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Box from "../Box";
+import Box from '../Box';
 describe('Box', () => {
   test('rendering the defult props', () => {
     const {

package/es/Layout/__tests__/Container.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Container from "../Container";
+import Container from '../Container';
 describe('Container', () => {
   test('rendering the defult props', () => {
     const {

package/es/Layout/index.js

@@ -1,5 +1,5 @@
-export { default as Container } from "./Container";
-export { default as Box } from "./Box"; // let Layout = {
+export { default as Container } from './Container';
+export { default as Box } from './Box'; // let Layout = {
 //   docs: {
 //     componentGroup: 'Layout',
 //     folderName: 'Style Guide',

package/es/ListItem/ListContainer.js

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

package/es/ListItem/ListItem.js

@@ -1,15 +1,15 @@
 /**** 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.module.css";
+import style from './ListItem.module.css';
 export default class ListItem extends React.Component {
   constructor(props) {
     super(props);