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

package/lib/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -20,32 +20,32 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var themeAppearanceImports = {
   Lib_LightMode_Component: function Lib_LightMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/appearance/component/Light_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/appearance/component/Light_Component"));
     });
   },
   Lib_DarkMode_Component: function Lib_DarkMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/appearance/component/Dark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/appearance/component/Dark_Component"));
     });
   },
   Lib_PureDarkMode_Component: function Lib_PureDarkMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/appearance/component/PureDark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/appearance/component/PureDark_Component"));
     });
   },
   Lib_LightMode_Dot: function Lib_LightMode_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('./../../../assets/Appearance/light/mode/Dot_LightMode.module.css'));
+      return _interopRequireWildcard(require("./../../../assets/Appearance/light/mode/Dot_LightMode.module.css"));
     });
   },
   Lib_DarkMode_Dot: function Lib_DarkMode_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('./../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css'));
+      return _interopRequireWildcard(require("./../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css"));
     });
   },
   Lib_PureDarkMode_Dot: function Lib_PureDarkMode_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('./../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css'));
+      return _interopRequireWildcard(require("./../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css"));
     });
   },
   Lib_LightMode_SVG: function Lib_LightMode_SVG() {

package/lib/DotProvider/utils/themeColorAssetsConfig.js

@@ -20,227 +20,227 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var themeColorImports = {
   Lib_Blue_Light_Component: function Lib_Blue_Light_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/blue/Blue_Light_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/blue/Blue_Light_Component"));
     });
   },
   Lib_Blue_Dark_Component: function Lib_Blue_Dark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/blue/Blue_Dark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/blue/Blue_Dark_Component"));
     });
   },
   Lib_Blue_PureDark_Component: function Lib_Blue_PureDark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/blue/Blue_PureDark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/blue/Blue_PureDark_Component"));
     });
   },
   Lib_Green_Light_Component: function Lib_Green_Light_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/green/Green_Light_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/green/Green_Light_Component"));
     });
   },
   Lib_Green_Dark_Component: function Lib_Green_Dark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/green/Green_Dark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/green/Green_Dark_Component"));
     });
   },
   Lib_Green_PureDark_Component: function Lib_Green_PureDark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/green/Green_PureDark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/green/Green_PureDark_Component"));
     });
   },
   Lib_Orange_Light_Component: function Lib_Orange_Light_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/orange/Orange_Light_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/orange/Orange_Light_Component"));
     });
   },
   Lib_Orange_Dark_Component: function Lib_Orange_Dark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/orange/Orange_Dark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/orange/Orange_Dark_Component"));
     });
   },
   Lib_Orange_PureDark_Component: function Lib_Orange_PureDark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/orange/Orange_PureDark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/orange/Orange_PureDark_Component"));
     });
   },
   Lib_Red_Light_Component: function Lib_Red_Light_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/red/Red_Light_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/red/Red_Light_Component"));
     });
   },
   Lib_Red_Dark_Component: function Lib_Red_Dark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/red/Red_Dark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/red/Red_Dark_Component"));
     });
   },
   Lib_Red_PureDark_Component: function Lib_Red_PureDark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/red/Red_PureDark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/red/Red_PureDark_Component"));
     });
   },
   Lib_Yellow_Light_Component: function Lib_Yellow_Light_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/yellow/Yellow_Light_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/yellow/Yellow_Light_Component"));
     });
   },
   Lib_Yellow_Dark_Component: function Lib_Yellow_Dark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/yellow/Yellow_Dark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/yellow/Yellow_Dark_Component"));
     });
   },
   Lib_Yellow_PureDark_Component: function Lib_Yellow_PureDark_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/component/yellow/Yellow_PureDark_Component'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/component/yellow/Yellow_PureDark_Component"));
     });
   },
   Lib_Blue_Light_Dot: function Lib_Blue_Light_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/blue/Blue_Light_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/blue/Blue_Light_Dot"));
     });
   },
   Lib_Blue_Dark_Dot: function Lib_Blue_Dark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/blue/Blue_Dark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/blue/Blue_Dark_Dot"));
     });
   },
   Lib_Blue_PureDark_Dot: function Lib_Blue_PureDark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/blue/Blue_PureDark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/blue/Blue_PureDark_Dot"));
     });
   },
   Lib_Green_Light_Dot: function Lib_Green_Light_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/green/Green_Light_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/green/Green_Light_Dot"));
     });
   },
   Lib_Green_Dark_Dot: function Lib_Green_Dark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/green/Green_Dark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/green/Green_Dark_Dot"));
     });
   },
   Lib_Green_PureDark_Dot: function Lib_Green_PureDark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/green/Green_PureDark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/green/Green_PureDark_Dot"));
     });
   },
   Lib_Orange_Light_Dot: function Lib_Orange_Light_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/orange/Orange_Light_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/orange/Orange_Light_Dot"));
     });
   },
   Lib_Orange_Dark_Dot: function Lib_Orange_Dark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/orange/Orange_Dark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/orange/Orange_Dark_Dot"));
     });
   },
   Lib_Orange_PureDark_Dot: function Lib_Orange_PureDark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/orange/Orange_PureDark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/orange/Orange_PureDark_Dot"));
     });
   },
   Lib_Red_Light_Dot: function Lib_Red_Light_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/red/Red_Light_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/red/Red_Light_Dot"));
     });
   },
   Lib_Red_Dark_Dot: function Lib_Red_Dark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/red/Red_Dark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/red/Red_Dark_Dot"));
     });
   },
   Lib_Red_PureDark_Dot: function Lib_Red_PureDark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/red/Red_PureDark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/red/Red_PureDark_Dot"));
     });
   },
   Lib_Yellow_Light_Dot: function Lib_Yellow_Light_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/yellow/Yellow_Light_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/yellow/Yellow_Light_Dot"));
     });
   },
   Lib_Yellow_Dark_Dot: function Lib_Yellow_Dark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/yellow/Yellow_Dark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/yellow/Yellow_Dark_Dot"));
     });
   },
   Lib_Yellow_PureDark_Dot: function Lib_Yellow_PureDark_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot"));
     });
   },
   Lib_Blue_Light_SVG: function Lib_Blue_Light_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/blue/Blue_Light_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/blue/Blue_Light_SVG"));
     });
   },
   Lib_Blue_Dark_SVG: function Lib_Blue_Dark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/blue/Blue_Dark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/blue/Blue_Dark_SVG"));
     });
   },
   Lib_Blue_PureDark_SVG: function Lib_Blue_PureDark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/blue/Blue_PureDark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/blue/Blue_PureDark_SVG"));
     });
   },
   Lib_Green_Light_SVG: function Lib_Green_Light_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/green/Green_Light_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/green/Green_Light_SVG"));
     });
   },
   Lib_Green_Dark_SVG: function Lib_Green_Dark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/green/Green_Dark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/green/Green_Dark_SVG"));
     });
   },
   Lib_Green_PureDark_SVG: function Lib_Green_PureDark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/green/Green_PureDark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/green/Green_PureDark_SVG"));
     });
   },
   Lib_Orange_Light_SVG: function Lib_Orange_Light_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/orange/Orange_Light_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/orange/Orange_Light_SVG"));
     });
   },
   Lib_Orange_Dark_SVG: function Lib_Orange_Dark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/orange/Orange_Dark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/orange/Orange_Dark_SVG"));
     });
   },
   Lib_Orange_PureDark_SVG: function Lib_Orange_PureDark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/orange/Orange_PureDark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/orange/Orange_PureDark_SVG"));
     });
   },
   Lib_Red_Light_SVG: function Lib_Red_Light_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/red/Red_Light_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/red/Red_Light_SVG"));
     });
   },
   Lib_Red_Dark_SVG: function Lib_Red_Dark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/red/Red_Dark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/red/Red_Dark_SVG"));
     });
   },
   Lib_Red_PureDark_SVG: function Lib_Red_PureDark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/red/Red_PureDark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/red/Red_PureDark_SVG"));
     });
   },
   Lib_Yellow_Light_SVG: function Lib_Yellow_Light_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/yellow/Yellow_Light_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/yellow/Yellow_Light_SVG"));
     });
   },
   Lib_Yellow_Dark_SVG: function Lib_Yellow_Dark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/yellow/Yellow_Dark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/yellow/Yellow_Dark_SVG"));
     });
   },
   Lib_Yellow_PureDark_SVG: function Lib_Yellow_PureDark_SVG() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG'));
+      return _interopRequireWildcard(require("../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG"));
     });
   }
 };

package/lib/Drawer/Drawer.js

@@ -345,7 +345,10 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           subDrawerActive = _this$props5.subDrawerActive,
           customClass = _this$props5.customClass,
           needAutoZindex = _this$props5.needAutoZindex,
-          innerPortalName = _this$props5.innerPortalName;
+          innerPortalName = _this$props5.innerPortalName,
+          onAnimateEnter = _this$props5.onAnimateEnter,
+          postAnimateStyles = _this$props5.postAnimateStyles,
+          onAnimateExit = _this$props5.onAnimateExit;
       var zindexNumber = isActive ? this.getNextIndex() : '';
       return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
@@ -361,7 +364,10 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           palette: palette,
           forwardRef: forwardRef,
           customClass: customClass,
-          needAutoZindex: needAutoZindex
+          needAutoZindex: needAutoZindex,
+          onAnimateEnter: onAnimateEnter,
+          postAnimateStyles: postAnimateStyles,
+          onAnimateExit: onAnimateExit
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/Drawer/__tests__/Drawer.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _Drawer = _interopRequireDefault(require("../Drawer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 var sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
 var palettes = ['dark', 'default', 'darkLight', 'plain'];
 var subDrawerSizes = ['xsmall', 'small', 'medium'];

package/lib/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/lib/Drawer/props/propTypes.js

@@ -63,6 +63,9 @@ var Drawer_propTypes = {
   needFocusScope: _propTypes["default"].bool,
   customProps: _propTypes["default"].object,
   innerPortalName: _propTypes["default"].string,
-  a11y: _propTypes["default"].object
+  a11y: _propTypes["default"].object,
+  onAnimateEnter: _propTypes["default"].func,
+  postAnimateStyles: _propTypes["default"].object,
+  onAnimateExit: _propTypes["default"].func
 };
 exports.Drawer_propTypes = Drawer_propTypes;

package/lib/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/lib/FreezeLayer/FreezeLayer.js

@@ -39,7 +39,10 @@ function FreezeLayer(props) {
       forwardRef = props.forwardRef,
       isSvgMask = props.isSvgMask,
       needAutoZindex = props.needAutoZindex,
-      customStyle = props.customStyle;
+      customStyle = props.customStyle,
+      onAnimateEnter = props.onAnimateEnter,
+      postAnimateStyles = props.postAnimateStyles,
+      onAnimateExit = props.onAnimateExit;
   var finalStyle = (0, _utils.mergeStyle)(_FreezeLayerModule["default"], customStyle);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
@@ -77,7 +80,10 @@ function FreezeLayer(props) {
     component: _Layout.Container,
     alignBox: "row",
     align: align,
-    dataId: "reactFreezeLayer"
+    dataId: "reactFreezeLayer",
+    onEnterComplete: onAnimateEnter,
+    postEnterStyles: postAnimateStyles,
+    onExitComplete: onAnimateExit
   }, children) : isSvgMask ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: align,

package/lib/FreezeLayer/props/propTypes.js

@@ -24,7 +24,10 @@ var propTypes = {
   palette: _propTypes["default"].oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: _propTypes["default"].bool,
   customStyle: _propTypes["default"].object,
-  zIndex: _propTypes["default"].oneOf(['3', '5', '7', '10'])
+  zIndex: _propTypes["default"].oneOf(['3', '5', '7', '10']),
+  onAnimateEnter: _propTypes["default"].func,
+  postAnimateStyles: _propTypes["default"].object,
+  onAnimateExit: _propTypes["default"].func
 };
 exports.propTypes = propTypes;
 var _default = propTypes;

package/lib/Hooks/Dragger/useDragger.js

@@ -97,6 +97,8 @@ function useDragger(_ref) {
     style.top = "".concat(top, "px");
     style.left = "".concat(left, "px");
     style.width = "".concat(width, "px");
+    style.bottom = 'initial';
+    style.right = 'initial';
     style.position = 'fixed';
     offset.current.x = draggableEle.current.offsetLeft - e.clientX;
     offset.current.y = draggableEle.current.offsetTop - e.clientY;

package/lib/IconButton/IconButton.js

@@ -182,7 +182,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         isBold: isBold,
         size: iconSize,
         name: iconName,
-        iconClass: iconClass
+        iconClass: "".concat(iconClass, " ").concat(_IconButtonModule["default"].icon_button_center)
       }) : null, children ? children : null));
     }
   }]);

package/lib/IconButton/IconButton.module.css

@@ -46,4 +46,7 @@
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}
+.icon_button_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
 }

package/lib/IconButton/__tests__/__snapshots__/IconButton.spec.js.snap

@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css

@@ -52,11 +52,11 @@
   }
   [dir=ltr] .bulletActive::after {
     left:-100% ;
-    animation:  progressLoading-ltr 5s linear infinite;
+    animation: progressLoading 5s linear infinite;
   }
   [dir=rtl] .bulletActive::after {
     right:-100% ;
-    animation:  progressLoading-rtl 5s linear infinite;
+    animation: progressLoading 5s linear infinite;
   }
   [dir=ltr] .animationPaused::after {
     animation-play-state: paused;
@@ -64,20 +64,11 @@
   [dir=rtl] .animationPaused::after {
     animation-play-state: paused;
   }
-  @keyframes progressLoading-ltr {
+  @keyframes progressLoading {
     0% {
-      left: -100% ;
+      inset-inline-start: -100%;
     }
     100% {
-      left: 0% ;
+      inset-inline-start: 0%;
     }
   }
-  @keyframes progressLoading-rtl {
-    0% {
-      left: -100% ;
-    }
-    100% {
-      left: 0% ;
-    }
-  }
-