@zohodesk/components 1.0.0-temp-227 → 1.0.0-temp-228

package/README.md

@@ -1,30 +1,41 @@
 # DOT Style Guide
 
-Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
-
-
-# 1.3.4
-
-- **MultiSelect** -  `renderCustomClearComponent` and `renderCustomToggleIndicator` props supported to customize the clear and toggle indicatior icon.
-- **Select** -  `renderCustomSearchClearComponent` and `renderCustomToggleIndicator` props supported to customize the search input clear and toggle indicatior icon.
-- **TextBoxIcon** -  `renderCustomClearComponent` prop supported to customize the input clear.  
-
-# 1.3.3
-
-- **Stencils**
-  - Added `isAnimated` prop to support Stencils without Animation.
-  - Added `square` shape in existing shape collection
-- **TabWrapper**
-  - Added `vertical-reverse, row-reverse` alignment suport in align propType
+In this Package, we Provide Some Basic Components to Build Web App
+
+- Avatar
+- AvatarTeam
+- Accordion
+- Animation
+- Button
+- Buttongroup
+- Card
+- CheckBox
+- DateTime
+- DropBox
+- Icon
+- Label
+- Layout
+- ListItem
+- MultiSelect
+- Popup
+- Radio
+- Responsive
+- Ribbon
+- Select
+- GroupSelect
+- Stencils
+- Switch
+- Tab
+- Tag
+- Textarea
+- TextBox
+- TextBoxIcon
+- Tooltip
 
 # 1.3.2
 
 - **Popup**
   - Added `scrollDebounceTime` prop to support debounce control for fixed popup scroll behavior.
-- **VelocityAnimationGroup** - Added support for the following props:
-  - `onEnterComplete` - Callback triggered after enter animation completes.
-  - `onExitComplete` - Callback triggered after exit animation completes.
-  - `postEnterStyles` - Inline styles applied to the element once the enter animation has finished.  
   
 # 1.3.1
 

package/assets/Appearance/dark/mode/Component_v2_DarkMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='dark'] {
+	/* switch */
+	--zdt_v2_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_bg: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_hover_bg: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_thumb_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_onLabel: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_offLabel: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/assets/Appearance/light/mode/Component_v2_LightMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='light'] {
+	/* switch */
+	--zdt_v2_switch_track_on_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_bg: hsla(213, 27.27%, calc(87.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_on_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_hover_bg: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_thumb_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_onLabel: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_offLabel: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_offLabel_hover: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/assets/Appearance/pureDark/mode/Component_v2_PureDarkMode.module.css

@@ -0,0 +1,11 @@
+[data-mode='pureDark'] {
+	/* switch */
+	--zdt_v2_switch_track_on_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_bg: hsla(0, 0.00%, calc(20.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_on_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_track_off_hover_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_thumb_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_onLabel: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v2_switch_offLabel: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v2_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+}

package/es/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Accordion_defaultProps } from "./props/defaultProps";
-import { Accordion_propTypes } from "./props/propTypes";
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
 export default class Accordion extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/AccordionItem.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from "./props/defaultProps";
-import { AccordionItem_propTypes } from "./props/propTypes";
-import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
-import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
+import { AccordionItem_defaultProps } from './props/defaultProps';
+import { AccordionItem_propTypes } from './props/propTypes';
+import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 export default class AccordionItem extends React.Component {
   constructor(props) {
     super(props);

package/es/Accordion/__tests__/Accordion.spec.js

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

package/es/Accordion/__tests__/AccordionItem.spec.js

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

package/es/Accordion/index.js

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

package/es/Animation/Animation.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
-import { animationStyle } from "./utils";
+import { animationStyle } from './utils';
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);

package/es/Animation/__tests__/Animation.spec.js

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

package/es/Animation/utils.js

@@ -1,4 +1,4 @@
-import style from "../common/transition.module.css";
+import style from '../common/transition.module.css';
 export const animationStyle = {
   zoomIn: {
     enter: style.zoomInEnter,

package/es/AppContainer/AppContainer.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Tooltip from "../Tooltip/Tooltip";
-import "../common/basic.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Tooltip from '../Tooltip/Tooltip';
+import '../common/basic.module.css';
 import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
@@ -11,10 +11,10 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../common/a11y.module.css";
-import "../common/boxShadow.module.css";
-import style from "./AppContainer.module.css";
-import { getLibraryConfig, setLibraryConfig } from "../Provider/Config";
+import '../common/a11y.module.css';
+import '../common/boxShadow.module.css';
+import style from './AppContainer.module.css';
+import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -81,13 +81,12 @@ export default class AppContainer extends React.Component {
 
     if (this.containerElement && needTooltip) {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
-      this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
+      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.unObserveElement();
+      setLibraryConfig({
+        getTooltipContainer: () => null
+      });
     }
-
-    setLibraryConfig({
-      getTooltipContainer: () => null
-    });
   }
 
   render() {

package/es/AppContainer/__tests__/AppContainer.spec.js

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

package/es/Avatar/Avatar.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getInitial } from "../utils/getInitial";
-import AvatarSize from "../Provider/AvatarSize";
-import style from "./Avatar.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getInitial } from '../utils/getInitial';
+import AvatarSize from '../Provider/AvatarSize';
+import style from './Avatar.module.css';
 /*
 1. need to change name into firstName lastName
 2. pattern support via context as well as props

package/es/Avatar/__tests__/Avatar.spec.js

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

package/es/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import Avatar from "../Avatar/Avatar";
-import style from "./AvatarTeam.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import Avatar from '../Avatar/Avatar';
+import style from './AvatarTeam.module.css';
 /* once avatar support firstname lastname and pattern
 pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
 

package/es/AvatarTeam/__tests__/AvatarTeam.spec.js

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

package/es/AvatarTeam/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as AvatarProps } from "../../Avatar/props/propTypes";
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes';
 export const propTypes = {
   dataId: PropTypes.string,
   dataSelectorId: PropTypes.string,

package/es/Button/Button.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import style from "./css/Button.module.css";
+import style from './css/Button.module.css';
 /*
 Button text and children props?
 use children for both cases

package/es/Button/__tests__/Button.spec.js

@@ -1,11 +1,6 @@
 import React from 'react';
-import Button from "../Button";
-import { render, cleanup } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-afterEach(() => {
-  cleanup();
-});
+import Button from '../Button';
+import { render } from "@testing-library/react";
 describe('Button component', () => {
   test('Should be render with the basic set of default props', () => {
     const {
@@ -111,132 +106,4 @@ describe('Button component', () => {
   //     const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
   //     expect(asFragment()).toMatchSnapshot();
   // });
-});
-describe('Button - Unit Testing', () => {
-  test('Should render with text prop', () => {
-    const {
-      getByText
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      text: "Click Me"
-    }));
-    expect(getByText('Click Me')).toBeInTheDocument();
-  });
-  test('Should render with children prop', () => {
-    const {
-      getByText
-    } = render( /*#__PURE__*/React.createElement(Button, null, "Click Me"));
-    expect(getByText('Click Me')).toBeInTheDocument();
-  });
-  test('Should apply custom styles from customStyle prop', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      customStyle: {
-        bold: 'customBoldClass'
-      }
-    })); // expect(getByRole('button').getAttribute('class')).toContain('customBoldClass');
-
-    expect(getByRole('button')).toHaveClass('customBoldClass');
-  });
-  test('Should apply custom classes from customClass prop', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      customClass: {
-        customButton: 'customButtonClass'
-      }
-    }));
-    expect(getByRole('button')).toHaveClass('customButtonClass');
-  });
-  test('Should be disabled when disabled prop is true', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      disabled: true
-    }));
-    expect(getByRole('button')).toBeDisabled();
-  });
-  test('Should expose element with getRef prop', () => {
-    const getRef = jest.fn();
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      getRef: getRef
-    }));
-    expect(getRef).toHaveBeenCalledWith(getByRole('button'));
-  });
-  test('Should trigger onClick function', () => {
-    const onClick = jest.fn();
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      onClick: onClick
-    })); // fireEvent.click(getByRole('button'));
-
-    userEvent.click(getByRole('button'));
-    expect(onClick).toHaveBeenCalled();
-  });
-  test('Should not trigger onClick when disabled', () => {
-    const onClick = jest.fn();
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      disabled: true,
-      onClick: onClick
-    }));
-    userEvent.click(getByRole('button'));
-    expect(onClick).not.toHaveBeenCalled();
-  });
-  test('Should render with correct data-id attribute', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      dataId: "testButton"
-    }));
-    expect(getByRole('button')).toHaveAttribute('data-id', 'testButton');
-  });
-  test('Should render with correct data-selector-id attribute', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      dataSelectorId: "testSelector"
-    }));
-    expect(getByRole('button')).toHaveAttribute('data-selector-id', 'testSelector');
-  });
-  test('Should render with correct title attribute', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      title: "Test Title"
-    }));
-    expect(getByRole('button')).toHaveAttribute('data-title', 'Test Title');
-  });
-  test('Should render with correct id attribute', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      id: "buttonElement"
-    }));
-    expect(getByRole('button')).toHaveAttribute('id', 'buttonElement');
-  });
-  test('Should apply a11y props correctly', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      a11y: {
-        'aria-label': 'test'
-      }
-    }));
-    expect(getByRole('button')).toHaveAttribute('aria-label', 'test');
-  });
-  test('Should apply customProps correctly', () => {
-    const {
-      getByRole
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      customProps: {
-        'data-custom-attr': 'true'
-      }
-    }));
-    expect(getByRole('button')).toHaveAttribute('data-custom-attr', 'true');
-  });
 });

package/es/Button/index.js

@@ -1,2 +1,2 @@
-export { default as Button } from "./Button";
-export { default as ButtonPropTypes } from "./props/propTypes";
+export { default as Button } from './Button';
+export { default as ButtonPropTypes } from './props/propTypes';

package/es/Button/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { dummyFunction } from "../../utils/dummyFunction";
+import { dummyFunction } from '../../utils/dummyFunction';
 export const defaultProps = {
   children: null,
   dataId: 'buttonComp',

package/es/Buttongroup/Buttongroup.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Buttongroup.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Buttongroup.module.css';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['footer','header',
 'tab','alignleft','alignright','aligncenter' ] }] */
 

package/es/Buttongroup/__tests__/Buttongroup.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Buttongroup from "../Buttongroup.js";
+import Buttongroup from '../Buttongroup.js';
 import { render } from "@testing-library/react";
 describe('Buttongrop - ', () => {
   test('rendering the default props', () => {

package/es/Card/Card.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from "./props/propTypes";
-import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from "./props/defaultProps";
-import { Container, Box } from "../Layout";
-import { getLibraryConfig } from "../Provider/Config";
-import style from "./Card.module.css";
+import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
+import { Container, Box } from '../Layout';
+import { getLibraryConfig } from '../Provider/Config';
+import style from './Card.module.css';
 /* eslint-disable react/forbid-component-props */
 
 /*

package/es/Card/__tests__/Card.spec.js

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

package/es/Card/index.js

@@ -1,4 +1,4 @@
-export { default as Card } from "./Card";
-export { CardHeader } from "./Card";
-export { CardContent } from "./Card";
-export { CardFooter } from "./Card";
+export { default as Card } from './Card';
+export { CardHeader } from './Card';
+export { CardContent } from './Card';
+export { CardFooter } from './Card';

package/es/CheckBox/CheckBox.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { propTypes } from "./props/propTypes";
-import { defaultProps } from "./props/defaultProps";
-import Label from "../Label/Label";
-import { Container, Box } from "../Layout";
-import CssProvider from "../Provider/CssProvider";
-import style from "./CheckBox.module.css";
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import Label from '../Label/Label';
+import { Container, Box } from '../Layout';
+import CssProvider from '../Provider/CssProvider';
+import style from './CheckBox.module.css';
 export default class CheckBox extends React.Component {
   constructor(props) {
     super(props);

package/es/CheckBox/__tests__/CheckBox.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CheckBox from "../CheckBox";
+import CheckBox from '../CheckBox';
 import { render } from "@testing-library/react";
 describe('CheckBox component', () => {
   test('Should be render with the basic set of default props', () => {

package/es/DateTime/CalendarView.js

@@ -1,10 +1,10 @@
 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.module.css";
-import { getMonthEnd } from "../utils/datetime/common";
-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.module.css';
+import { getMonthEnd } from '../utils/datetime/common';
+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/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.module.css";
-import { formatDate, getMonthEnd } from "../utils/datetime/common";
-import { getIsEmptyValue } from "../utils/Common";
-import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from "./constants";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { Box } from "../Layout";
-import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from "./dateFormatUtils";
-import { getDateText } from "./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.module.css';
+import { formatDate, getMonthEnd } from '../utils/datetime/common';
+import { getIsEmptyValue } from '../utils/Common';
+import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from './constants';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { Box } from '../Layout';
+import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from './dateFormatUtils';
+import { getDateText } from './dateFormatUtils/dateFormat';
 
 function title(date, year, month) {
   let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];

package/es/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.module.css";
+import style from './DateTime.module.css';
 export default class DateTimePopupFooter extends PureComponent {
   render() {
     const {