@zohodesk/dot 1.0.0-temp-212 → 1.0.0-temp-200.8

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/appearance/component/Dark_Component.js

@@ -1,2 +1,2 @@
 import '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css';
-import '@zohodesk/components/assets/Appearance/dark/mode/Component_v2_DarkMode.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css';

package/es/DotProvider/libraryChunks/appearance/component/Light_Component.js

@@ -1,2 +1,2 @@
 import '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css';
-import '@zohodesk/components/assets/Appearance/light/mode/Component_v2_LightMode.module.css';
+import '@zohodesk/components/assets/Appearance/light/mode/Component_v1_LightMode.module.css';

package/es/DotProvider/libraryChunks/appearance/component/PureDark_Component.js

@@ -1,2 +1,2 @@
 import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css';
-import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_v2_PureDarkMode.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css';

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,23 +1,23 @@
-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' */
-  '../libraryChunks/appearance/component/Light_Component'),
+  "../libraryChunks/appearance/component/Light_Component"),
   Lib_DarkMode_Component: () => import(
   /* webpackChunkName: 'Lib_DarkMode_Component' */
-  '../libraryChunks/appearance/component/Dark_Component'),
+  "../libraryChunks/appearance/component/Dark_Component"),
   Lib_PureDarkMode_Component: () => import(
   /* webpackChunkName: 'Lib_PureDarkMode_Component' */
-  '../libraryChunks/appearance/component/PureDark_Component'),
+  "../libraryChunks/appearance/component/PureDark_Component"),
   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() {
@@ -233,7 +233,10 @@ export default class Drawer extends React.Component {
       subDrawerActive,
       customClass,
       needAutoZindex,
-      innerPortalName
+      innerPortalName,
+      onAnimateEnter,
+      postAnimateStyles,
+      onAnimateExit
     } = this.props;
     let zindexNumber = isActive ? this.getNextIndex() : '';
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -252,7 +255,10 @@ export default class Drawer extends React.Component {
         palette: palette,
         forwardRef: forwardRef,
         customClass: customClass,
-        needAutoZindex: needAutoZindex
+        needAutoZindex: needAutoZindex,
+        onAnimateEnter: onAnimateEnter,
+        postAnimateStyles: postAnimateStyles,
+        onAnimateExit: onAnimateExit
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Container, {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Content } from '../Drawer';
+import { Content } from "../Drawer";
 const paddingSizes = ['small', 'medium', 'large'];
 const visibilityStates = [true, false];
 describe('Content Component Snapshots', () => {

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

@@ -1,6 +1,13 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import Drawer from '../Drawer';
+import { render, cleanup } from '@testing-library/react';
+import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
+import Drawer from "../Drawer";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 const sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
 const palettes = ['dark', 'default', 'darkLight', 'plain'];
 const subDrawerSizes = ['xsmall', 'small', 'medium'];

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Footer } from '../Drawer';
+import { Footer } from "../Drawer";
 const sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
 const variants = ['primary', 'secondary', 'tertiary', 'default'];
 describe('Footer Component Snapshots', () => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { Header } from '../Drawer';
+import { Header } from "../Drawer";
 const paddingSizes = ['small', 'medium', 'large']; // describe('Header Component', () => {
 //   describe('Snapshots', () => {
 //     test('renders with default props', () => {

package/es/Drawer/__tests__/__snapshots__/Header.spec.js.snap

@@ -73,7 +73,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title an
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -438,7 +438,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, c
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -539,7 +539,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -736,7 +736,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

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";

package/es/Drawer/props/propTypes.js

@@ -50,5 +50,8 @@ export const Drawer_propTypes = {
   needFocusScope: PropTypes.bool,
   customProps: PropTypes.object,
   innerPortalName: PropTypes.string,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  onAnimateEnter: PropTypes.func,
+  postAnimateStyles: PropTypes.object,
+  onAnimateExit: PropTypes.func
 };

package/es/ExternalLink/ExternalLink.js

@@ -1,10 +1,10 @@
 /**** Libraries ****/
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 /**** CSS ****/
 
-import style from './ExternalLink.module.css';
+import style from "./ExternalLink.module.css";
 export default class ExternalLink extends React.Component {
   addHttp(url) {
     const regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);

package/es/ExternalLink/__tests__/ExternalLink.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ExternalLink from '../ExternalLink';
+import ExternalLink from "../ExternalLink";
 describe('ExternalLink', () => {
   const target = ['_blank', '_self'];
   test('renders with default props', () => {

package/es/FlipCard/FlipCard.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import AvatarUser from '../avatar/AvatarUser/AvatarUser';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import AvatarUser from "../avatar/AvatarUser/AvatarUser";
+import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
 import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
 import { Container } from '@zohodesk/components/lib/Layout';
-import ChannelIcon from '../ChannelIcon/ChannelIcon';
+import ChannelIcon from "../ChannelIcon/ChannelIcon";
 import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
-import style from './FlipCard.module.css';
-import { stopBubbling } from '../utils/General';
+import style from "./FlipCard.module.css";
+import { stopBubbling } from "../utils/General";
 export default class FlipCard extends Component {
   constructor(props) {
     super(props);

package/es/FlipCard/__tests__/FlipCard.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import FlipCard from '../FlipCard';
+import FlipCard from "../FlipCard";
 describe('FlipCard', () => {
   const palettes = ['primary', 'secondary', 'info', 'default'];
   const textPalettes = ['white', 'black'];

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

@@ -161,7 +161,7 @@ exports[`FlipCard renders correctly with channel: chat and action: outgoing 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -255,7 +255,7 @@ exports[`FlipCard renders correctly with channel: email and action: incoming 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -525,7 +525,7 @@ exports[`FlipCard renders correctly with className, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1250,7 +1250,7 @@ exports[`FlipCard renders correctly with iconSize as a number and channel & acti
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1835,7 +1835,7 @@ exports[`FlipCard renders correctly with palette, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -3824,7 +3824,7 @@ exports[`FlipCard renders with icon 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-ch-email    iconColor  undefined   "
+            class="zd_font_icons basic icon-ch-email    avatar_align_center  iconColor     "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/es/FormAction/FormAction.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from './FormAction.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./FormAction.module.css";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 export const LeftSide = props => {
   props.children;