@zohodesk/dot 1.0.0-temp-206.2 → 1.0.0-temp-200.3

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: 1.6364;
+    line-height: 1.6;
     border-radius: 50%;
     cursor: pointer;
 }
@@ -154,6 +154,7 @@
 .imgItem {
     height: var(--zd_size60) ;
     min-width: var(--zd_size40) ;
+    /* css:theme-validation:ignore */
     position: relative;
     transition: border var(--zd_transition3);
     border-width: 2px;
@@ -168,6 +169,10 @@
     border-color: var(--zdt_attachmentviewer_hover_border);
 }
 
+.imgItem+.imgItem {
+    /* margin-left: 6px; */
+}
+
 [dir=ltr] .imgItem+.imgItem {
     margin-left: var(--zd_size12) ;
 }
@@ -230,16 +235,71 @@
     transform: rotateX(0deg);
 }
 
-.isAudio {
-    composes: audioImage from '../common/dot_common.module.css';
-    width: var(--zd_size100) ;
+.isAudio,
+.isVideo,
+.isPdf,
+.isMail,
+.isWriter,
+.isSheet,
+.isShow,
+.otherFile {
+    width: var(--zd_size60) ;
+}
+
+.isAudio, .isVideo, .isPdf, .isMail, .isWriter, .isSheet, .isShow, .otherFile {
     background-size: 100% 100%;
 }
 
-.isAudio .image {
+/* .isAudio {
+    composes: audioImage from '../common/dot_common.module.css';
+}
+
+.isVideo {
+    composes: videoImage from '../common/dot_common.module.css';
+}
+
+.isPdf {
+    composes: pdfImage from '../common/dot_common.module.css';
+}
+
+.isWriter {
+    composes: writerImage from '../common/dot_common.module.css';
+}
+
+.isSheet {
+    composes: sheetImage from '../common/dot_common.module.css';
+}
+
+.isShow {
+    composes: showImage from '../common/dot_common.module.css';
+}
+
+
+.isMail {
+    composes: mailImage from '../common/dot_common.module.css';
+}
+
+.otherFile {
+    composes: otherImage from '../common/dot_common.module.css';
+} */
+
+.isAudio .image,
+.isVideo .image,
+.isPdf .image,
+.isWriter .image,
+.isSheet .image,
+.isShow .image,
+.isMail .image,
+.otherFile .image {
     opacity: 0;
 }
 
+.previewFrame {
+    height: 100% ;
+    width: 100% ;
+    border: 0;
+}
+
 .video {
     position: absolute;
     top: 0 ;
@@ -357,9 +417,69 @@
 }
 
 .btn {
+    /* css:theme-validation:ignore */
     height: 100% ;
     width: 100% ;
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
+}
+
+.fileTypeImg {
+    margin: 0 auto var(--zd_size20) ;
+}
+
+.previewNone {
+    /* css:theme-validation:ignore */
+    color: #fff;
+    text-align: center;
+    margin: auto ;
+}
+
+.downloadLink {
+    /* css:theme-validation:ignore */
+    color: #0a73eb;
+    display: inline-block;
+    padding-top: var(--zd_size10) ;
+}
+
+.previewIconDiv {
+    width: var(--zd_size60) ;
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.prevFooterIcon,
+.prevIcon {
+    /* css:theme-validation:ignore */
+    color: #fff;
+}
+
+.prevFooterIcon, .prevIcon {
+    padding: var(--zd_size2) ;
+    margin: auto ;
+}
+
+.prevFooterIcon::before,
+.prevIcon::before {
+    /* css:theme-validation:ignore */
+}
+
+.prevFooterIcon::before, .prevIcon::before {
+    background-color: transparent;
+}
+
+[dir=ltr] .prevIcon::before {
+    border-radius: 10px 30px 10px 10px;
+}
+
+[dir=rtl] .prevIcon::before {
+    border-radius: 30px 10px 10px 10px;
+}
+
+[dir=ltr] .prevFooterIcon::before {
+    border-radius: 5px 17px 5px 5px
+}
+
+[dir=rtl] .prevFooterIcon::before {
+    border-radius: 17px 5px 5px 5px
 }

package/es/AttachmentViewer/__tests__/AttachmentImage.spec.js

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

package/es/AttachmentViewer/__tests__/AttachmentViewer.spec.js

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

package/es/AttachmentViewer/utils.js

@@ -153,4 +153,26 @@ export function checkFileSourcesValidation(_ref) {
       canZoom: isURLValid
     }));
   }
+}
+export function getBrowserWithVersion() {
+  const ua = navigator.userAgent;
+  let tem;
+  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
+
+  if (ua.toLowerCase().indexOf('edge') !== -1) {
+    return ua.substring(ua.toLowerCase().indexOf('edge'));
+  }
+
+  if (/trident/i.test(M[1])) {
+    tem = /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
+    return `IE ${tem[1] || ''}`;
+  }
+
+  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+
+  if ((tem = ua.match(/version\/([\.\d]+)/i)) !== null) {
+    M[2] = tem[1];
+  }
+
+  return M.join(' ');
 }

package/es/ChannelIcon/ChannelIcon.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
-import { getChannelMappingObj } from '../utils/ChannelIconMapping';
-import style from './ChannelIcon.module.css';
+import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
+import { getChannelMappingObj } from "../utils/ChannelIconMapping";
+import style from "./ChannelIcon.module.css";
 export default class ChannelIcon extends Component {
   constructor(props) {
     super(props);

package/es/ChannelIcon/__tests__/ChannelIcon.spec.js

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

package/es/DotProvider/DotProvider.js

@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, forwardRef } from "react";
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import useDotProvider from "./hooks/useDotProvider";
 const DotProvider = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/es/DotProvider/__tests__/DotProvider.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
-import DotProvider from '../DotProvider'; // snapshot test cases
+import DotProvider from "../DotProvider"; // snapshot test cases
 
 describe('DotProvider Snapshot', () => {
   const THEME_APPEARANCE = ['light', 'dark', 'pureDark'];

package/es/DotProvider/hooks/useDotProvider.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect } from 'react';
-import useDownloadAssetsAndSetAttr from './useDownloadAssetsAndSetAttr';
+import useDownloadAssetsAndSetAttr from "./useDownloadAssetsAndSetAttr";
 import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
 import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
 import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
@@ -8,7 +8,7 @@ import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/components/es/common/basic.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/components/lib/common/boxShadow.module.css';
-import '../../common/dot_boxShadow.module.css';
+import "../../common/dot_boxShadow.module.css";
 
 function useDotProvider(_ref) {
   let {

package/es/DotProvider/hooks/useDownloadAssetsAndSetAttr.js

@@ -1,8 +1,8 @@
 import { useMemo, useLayoutEffect } from 'react';
-import { getThemeAppearanceAssetPromise } from '../utils/assetPromiseHandlers/themeAppearanceAssetPromise.js';
-import { getThemeColorAssetPromise } from '../utils/assetPromiseHandlers/themeColorAssetPromise.js';
-import { getFontSizeAssetPromise } from '../utils/assetPromiseHandlers/fontSizeAssetPromise.js';
-import { getZoomSizeAssetPromise } from '../utils/assetPromiseHandlers/zoomSizeAssetPromise.js';
+import { getThemeAppearanceAssetPromise } from "../utils/assetPromiseHandlers/themeAppearanceAssetPromise.js";
+import { getThemeColorAssetPromise } from "../utils/assetPromiseHandlers/themeColorAssetPromise.js";
+import { getFontSizeAssetPromise } from "../utils/assetPromiseHandlers/fontSizeAssetPromise.js";
+import { getZoomSizeAssetPromise } from "../utils/assetPromiseHandlers/zoomSizeAssetPromise.js";
 export default function useDownloadAssetsAndSetAttr(_ref) {
   let {
     themeAppearance,

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Dark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css';
+import "./../../../../../../assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Light_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css';
+import "./../../../../../../assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_PureDark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css';
+import "./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_Dark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css';
+import "./../../../../../../assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_Light_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css';
+import "./../../../../../../assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_PureDark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css';
+import "./../../../../../../assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Dark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css';
+import "./../../../../../../assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Light_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css';
+import "./../../../../../../assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_PureDark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css';
+import "./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_Dark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css';
+import "./../../../../../../assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_Light_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css';
+import "./../../../../../../assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_PureDark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css';
+import "./../../../../../../assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Dark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css';
+import "./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Light_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css';
+import "./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot.js

@@ -1 +1 @@
-import './../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css';
+import "./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { THEME_APPEARANCES, THEME_COLORS } from '../utils/constants';
+import { THEME_APPEARANCES, THEME_COLORS } from "../utils/constants";
 export const propTypes = {
   themeAppearance: PropTypes.oneOf(THEME_APPEARANCES),
   themeColor: PropTypes.oneOf(THEME_COLORS),

package/es/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -1,4 +1,4 @@
-import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from './constants';
+import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
 export const themeAppearanceImports = {
   Lib_LightMode_Component: () => import(
   /* webpackChunkName: 'Lib_LightMode_Component' */
@@ -11,13 +11,13 @@ export const themeAppearanceImports = {
   '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'),
   Lib_LightMode_Dot: () => import(
   /* webpackChunkName: 'Lib_LightMode_Dot' */
-  './../../../assets/Appearance/light/mode/Dot_LightMode.module.css'),
+  "./../../../assets/Appearance/light/mode/Dot_LightMode.module.css"),
   Lib_DarkMode_Dot: () => import(
   /* webpackChunkName: 'Lib_DarkMode_Dot' */
-  './../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css'),
+  "./../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css"),
   Lib_PureDarkMode_Dot: () => import(
   /* webpackChunkName: 'Lib_PureDarkMode_Dot' */
-  './../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css'),
+  "./../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css"),
   Lib_LightMode_SVG: () => import(
   /* webpackChunkName: 'Lib_LightMode_SVG' */
   '@zohodesk/svg/assets/Appearance/light/mode/SVG_LightMode.module.css'),

package/es/DotProvider/utils/themeColorAssetsConfig.js

@@ -1,140 +1,140 @@
-import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from './constants';
+import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
 export const themeColorImports = {
   Lib_Blue_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Blue_Light_Component' */
-  '../libraryChunks/themes/component/blue/Blue_Light_Component'),
+  "../libraryChunks/themes/component/blue/Blue_Light_Component"),
   Lib_Blue_Dark_Component: () => import(
   /* webpackChunkName: 'Lib_Blue_Dark_Component' */
-  '../libraryChunks/themes/component/blue/Blue_Dark_Component'),
+  "../libraryChunks/themes/component/blue/Blue_Dark_Component"),
   Lib_Blue_PureDark_Component: () => import(
   /* webpackChunkName: 'Lib_Blue_PureDark_Component' */
-  '../libraryChunks/themes/component/blue/Blue_PureDark_Component'),
+  "../libraryChunks/themes/component/blue/Blue_PureDark_Component"),
   Lib_Green_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Green_Light_Component' */
-  '../libraryChunks/themes/component/green/Green_Light_Component'),
+  "../libraryChunks/themes/component/green/Green_Light_Component"),
   Lib_Green_Dark_Component: () => import(
   /* webpackChunkName: 'Lib_Green_Dark_Component' */
-  '../libraryChunks/themes/component/green/Green_Dark_Component'),
+  "../libraryChunks/themes/component/green/Green_Dark_Component"),
   Lib_Green_PureDark_Component: () => import(
   /* webpackChunkName: 'Lib_Green_PureDark_Component' */
-  '../libraryChunks/themes/component/green/Green_PureDark_Component'),
+  "../libraryChunks/themes/component/green/Green_PureDark_Component"),
   Lib_Orange_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Orange_Light_Component' */
-  '../libraryChunks/themes/component/orange/Orange_Light_Component'),
+  "../libraryChunks/themes/component/orange/Orange_Light_Component"),
   Lib_Orange_Dark_Component: () => import(
   /* webpackChunkName: 'Lib_Orange_Dark_Component' */
-  '../libraryChunks/themes/component/orange/Orange_Dark_Component'),
+  "../libraryChunks/themes/component/orange/Orange_Dark_Component"),
   Lib_Orange_PureDark_Component: () => import(
   /* webpackChunkName: 'Lib_Orange_PureDark_Component' */
-  '../libraryChunks/themes/component/orange/Orange_PureDark_Component'),
+  "../libraryChunks/themes/component/orange/Orange_PureDark_Component"),
   Lib_Red_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Red_Light_Component' */
-  '../libraryChunks/themes/component/red/Red_Light_Component'),
+  "../libraryChunks/themes/component/red/Red_Light_Component"),
   Lib_Red_Dark_Component: () => import(
   /* webpackChunkName: 'Lib_Red_Dark_Component' */
-  '../libraryChunks/themes/component/red/Red_Dark_Component'),
+  "../libraryChunks/themes/component/red/Red_Dark_Component"),
   Lib_Red_PureDark_Component: () => import(
   /* webpackChunkName: 'Lib_Red_PureDark_Component' */
-  '../libraryChunks/themes/component/red/Red_PureDark_Component'),
+  "../libraryChunks/themes/component/red/Red_PureDark_Component"),
   Lib_Yellow_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Yellow_Light_Component' */
-  '../libraryChunks/themes/component/yellow/Yellow_Light_Component'),
+  "../libraryChunks/themes/component/yellow/Yellow_Light_Component"),
   Lib_Yellow_Dark_Component: () => import(
   /* webpackChunkName: 'Lib_Yellow_Dark_Component' */
-  '../libraryChunks/themes/component/yellow/Yellow_Dark_Component'),
+  "../libraryChunks/themes/component/yellow/Yellow_Dark_Component"),
   Lib_Yellow_PureDark_Component: () => import(
   /* webpackChunkName: 'Lib_Yellow_PureDark_Component' */
-  '../libraryChunks/themes/component/yellow/Yellow_PureDark_Component'),
+  "../libraryChunks/themes/component/yellow/Yellow_PureDark_Component"),
   Lib_Blue_Light_Dot: () => import(
   /* webpackChunkName: 'Lib_Blue_Light_Dot' */
-  '../libraryChunks/themes/dot/blue/Blue_Light_Dot'),
+  "../libraryChunks/themes/dot/blue/Blue_Light_Dot"),
   Lib_Blue_Dark_Dot: () => import(
   /* webpackChunkName: 'Lib_Blue_Dark_Dot' */
-  '../libraryChunks/themes/dot/blue/Blue_Dark_Dot'),
+  "../libraryChunks/themes/dot/blue/Blue_Dark_Dot"),
   Lib_Blue_PureDark_Dot: () => import(
   /* webpackChunkName: 'Lib_Blue_PureDark_Dot' */
-  '../libraryChunks/themes/dot/blue/Blue_PureDark_Dot'),
+  "../libraryChunks/themes/dot/blue/Blue_PureDark_Dot"),
   Lib_Green_Light_Dot: () => import(
   /* webpackChunkName: 'Lib_Green_Light_Dot' */
-  '../libraryChunks/themes/dot/green/Green_Light_Dot'),
+  "../libraryChunks/themes/dot/green/Green_Light_Dot"),
   Lib_Green_Dark_Dot: () => import(
   /* webpackChunkName: 'Lib_Green_Dark_Dot' */
-  '../libraryChunks/themes/dot/green/Green_Dark_Dot'),
+  "../libraryChunks/themes/dot/green/Green_Dark_Dot"),
   Lib_Green_PureDark_Dot: () => import(
   /* webpackChunkName: 'Lib_Green_PureDark_Dot' */
-  '../libraryChunks/themes/dot/green/Green_PureDark_Dot'),
+  "../libraryChunks/themes/dot/green/Green_PureDark_Dot"),
   Lib_Orange_Light_Dot: () => import(
   /* webpackChunkName: 'Lib_Orange_Light_Dot' */
-  '../libraryChunks/themes/dot/orange/Orange_Light_Dot'),
+  "../libraryChunks/themes/dot/orange/Orange_Light_Dot"),
   Lib_Orange_Dark_Dot: () => import(
   /* webpackChunkName: 'Lib_Orange_Dark_Dot' */
-  '../libraryChunks/themes/dot/orange/Orange_Dark_Dot'),
+  "../libraryChunks/themes/dot/orange/Orange_Dark_Dot"),
   Lib_Orange_PureDark_Dot: () => import(
   /* webpackChunkName: 'Lib_Orange_PureDark_Dot' */
-  '../libraryChunks/themes/dot/orange/Orange_PureDark_Dot'),
+  "../libraryChunks/themes/dot/orange/Orange_PureDark_Dot"),
   Lib_Red_Light_Dot: () => import(
   /* webpackChunkName: 'Lib_Red_Light_Dot' */
-  '../libraryChunks/themes/dot/red/Red_Light_Dot'),
+  "../libraryChunks/themes/dot/red/Red_Light_Dot"),
   Lib_Red_Dark_Dot: () => import(
   /* webpackChunkName: 'Lib_Red_Dark_Dot' */
-  '../libraryChunks/themes/dot/red/Red_Dark_Dot'),
+  "../libraryChunks/themes/dot/red/Red_Dark_Dot"),
   Lib_Red_PureDark_Dot: () => import(
   /* webpackChunkName: 'Lib_Red_PureDark_Dot' */
-  '../libraryChunks/themes/dot/red/Red_PureDark_Dot'),
+  "../libraryChunks/themes/dot/red/Red_PureDark_Dot"),
   Lib_Yellow_Light_Dot: () => import(
   /* webpackChunkName: 'Lib_Yellow_Light_Dot' */
-  '../libraryChunks/themes/dot/yellow/Yellow_Light_Dot'),
+  "../libraryChunks/themes/dot/yellow/Yellow_Light_Dot"),
   Lib_Yellow_Dark_Dot: () => import(
   /* webpackChunkName: 'Lib_Yellow_Dark_Dot' */
-  '../libraryChunks/themes/dot/yellow/Yellow_Dark_Dot'),
+  "../libraryChunks/themes/dot/yellow/Yellow_Dark_Dot"),
   Lib_Yellow_PureDark_Dot: () => import(
   /* webpackChunkName: 'Lib_Yellow_PureDark_Dot' */
-  '../libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot'),
+  "../libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot"),
   Lib_Blue_Light_SVG: () => import(
   /* webpackChunkName: 'Lib_Blue_Light_SVG' */
-  '../libraryChunks/themes/svg/blue/Blue_Light_SVG'),
+  "../libraryChunks/themes/svg/blue/Blue_Light_SVG"),
   Lib_Blue_Dark_SVG: () => import(
   /* webpackChunkName: 'Lib_Blue_Dark_SVG' */
-  '../libraryChunks/themes/svg/blue/Blue_Dark_SVG'),
+  "../libraryChunks/themes/svg/blue/Blue_Dark_SVG"),
   Lib_Blue_PureDark_SVG: () => import(
   /* webpackChunkName: 'Lib_Blue_PureDark_SVG' */
-  '../libraryChunks/themes/svg/blue/Blue_PureDark_SVG'),
+  "../libraryChunks/themes/svg/blue/Blue_PureDark_SVG"),
   Lib_Green_Light_SVG: () => import(
   /* webpackChunkName: 'Lib_Green_Light_SVG' */
-  '../libraryChunks/themes/svg/green/Green_Light_SVG'),
+  "../libraryChunks/themes/svg/green/Green_Light_SVG"),
   Lib_Green_Dark_SVG: () => import(
   /* webpackChunkName: 'Lib_Green_Dark_SVG' */
-  '../libraryChunks/themes/svg/green/Green_Dark_SVG'),
+  "../libraryChunks/themes/svg/green/Green_Dark_SVG"),
   Lib_Green_PureDark_SVG: () => import(
   /* webpackChunkName: 'Lib_Green_PureDark_SVG' */
-  '../libraryChunks/themes/svg/green/Green_PureDark_SVG'),
+  "../libraryChunks/themes/svg/green/Green_PureDark_SVG"),
   Lib_Orange_Light_SVG: () => import(
   /* webpackChunkName: 'Lib_Orange_Light_SVG' */
-  '../libraryChunks/themes/svg/orange/Orange_Light_SVG'),
+  "../libraryChunks/themes/svg/orange/Orange_Light_SVG"),
   Lib_Orange_Dark_SVG: () => import(
   /* webpackChunkName: 'Lib_Orange_Dark_SVG' */
-  '../libraryChunks/themes/svg/orange/Orange_Dark_SVG'),
+  "../libraryChunks/themes/svg/orange/Orange_Dark_SVG"),
   Lib_Orange_PureDark_SVG: () => import(
   /* webpackChunkName: 'Lib_Orange_PureDark_SVG' */
-  '../libraryChunks/themes/svg/orange/Orange_PureDark_SVG'),
+  "../libraryChunks/themes/svg/orange/Orange_PureDark_SVG"),
   Lib_Red_Light_SVG: () => import(
   /* webpackChunkName: 'Lib_Red_Light_SVG' */
-  '../libraryChunks/themes/svg/red/Red_Light_SVG'),
+  "../libraryChunks/themes/svg/red/Red_Light_SVG"),
   Lib_Red_Dark_SVG: () => import(
   /* webpackChunkName: 'Lib_Red_Dark_SVG' */
-  '../libraryChunks/themes/svg/red/Red_Dark_SVG'),
+  "../libraryChunks/themes/svg/red/Red_Dark_SVG"),
   Lib_Red_PureDark_SVG: () => import(
   /* webpackChunkName: 'Lib_Red_PureDark_SVG' */
-  '../libraryChunks/themes/svg/red/Red_PureDark_SVG'),
+  "../libraryChunks/themes/svg/red/Red_PureDark_SVG"),
   Lib_Yellow_Light_SVG: () => import(
   /* webpackChunkName: 'Lib_Yellow_Light_SVG' */
-  '../libraryChunks/themes/svg/yellow/Yellow_Light_SVG'),
+  "../libraryChunks/themes/svg/yellow/Yellow_Light_SVG"),
   Lib_Yellow_Dark_SVG: () => import(
   /* webpackChunkName: 'Lib_Yellow_Dark_SVG' */
-  '../libraryChunks/themes/svg/yellow/Yellow_Dark_SVG'),
+  "../libraryChunks/themes/svg/yellow/Yellow_Dark_SVG"),
   Lib_Yellow_PureDark_SVG: () => import(
   /* webpackChunkName: 'Lib_Yellow_PureDark_SVG' */
-  '../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG')
+  "../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG")
 };
 export const themeColorMapping = {
   [LIBRARY_COMPONENT]: {

package/es/Drawer/Drawer.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
-import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
-import FreezeLayer from '../FreezeLayer/FreezeLayer';
+import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from "./props/defaultProps";
+import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from "./props/propTypes";
+import FreezeLayer from "../FreezeLayer/FreezeLayer";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import FormAction from '../FormAction/FormAction';
+import FormAction from "../FormAction/FormAction";
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import Heading from '@zohodesk/components/lib/Heading/Heading';
-import IconButton from '../IconButton/IconButton';
+import IconButton from "../IconButton/IconButton";
 import { Icon } from '@zohodesk/icons';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import style from './Drawer.module.css';
+import style from "./Drawer.module.css";
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class Header extends React.Component {
   render() {

package/es/Drawer/__tests__/Drawer.spec.js

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

package/es/Drawer/index.js

@@ -1 +1 @@
-export { Header, Content, Footer, default as Drawer } from './Drawer';
+export { Header, Content, Footer, default as Drawer } from "./Drawer";