@zohodesk/dot 1.0.0-beta.252 → 1.0.0-beta.254

package/assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='blue'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(16, 16, 16, 0.9);
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( 0.9 + var(--zd_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: var(--dot_butterflyblue);
-	--zdt_commonEmptyState_dark_link_hover: #2469ff;
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(212, 100%, calc(64% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(221, 100%, calc(57% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: #171717;
-	--zdt_attachmentviewer_header_border: #222;
-	--zdt_attachmentviewer_footer_bg: #171717;
-	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(0 * 1%), calc(13% + var(--zd_pureDark_lighter_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( + var(--zd_alpha_high)));
 }

package/assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='green'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(16, 16, 16, 0.9);
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( 0.9 + var(--zd_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #45a159;
-	--zdt_commonEmptyState_dark_link_hover: #0e7c1c;
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(133, 40%, calc(45% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(128, 80%, calc(27% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: #171717;
-	--zdt_attachmentviewer_header_border: #222;
-	--zdt_attachmentviewer_footer_bg: #171717;
-	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(0 * 1%), calc(13% + var(--zd_pureDark_lighter_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( + var(--zd_alpha_high)));
 }

package/assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='orange'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(16, 16, 16, 0.9);
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( 0.9 + var(--zd_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: var(--dot_cadmiumorange);
-	--zdt_commonEmptyState_dark_link_hover: #a85100;
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(26, 100%, calc(56% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(29, 100%, calc(33% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: #171717;
-	--zdt_attachmentviewer_header_border: #222;
-	--zdt_attachmentviewer_footer_bg: #171717;
-	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(0 * 1%), calc(13% + var(--zd_pureDark_lighter_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( + var(--zd_alpha_high)));
 }

package/assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='red'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(16, 16, 16, 0.9);
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( 0.9 + var(--zd_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #e94f4f;
-	--zdt_commonEmptyState_dark_link_hover: #a81111;
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(0, 78%, calc(61% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(0, 82%, calc(36% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: #171717;
-	--zdt_attachmentviewer_header_border: #222;
-	--zdt_attachmentviewer_footer_bg: #171717;
-	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(0 * 1%), calc(13% + var(--zd_pureDark_lighter_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( + var(--zd_alpha_high)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: rgba(16, 16, 16, 0.9);
+	--zdt_freezelayer_darklight_bg: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( 0.9 + var(--zd_alpha_high)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: var(--dot_white);
-	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #d79835;
-	--zdt_commonEmptyState_dark_link_hover: #9b6808;
+	--zdt_commonEmptyState_dark_title: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_description: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_commonEmptyState_dark_link: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: #171717;
-	--zdt_attachmentviewer_header_border: #222;
-	--zdt_attachmentviewer_footer_bg: #171717;
-	--zdt_attachmentviewer_arrow_bg_hover: rgb(16 16 16 / 40%);
+	--zdt_attachmentviewer_header_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_attachmentviewer_header_border: hsla(0, calc(0 * 1%), calc(13% + var(--zd_pureDark_lighter_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, calc(0 * 1%), calc(9% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(0 * 1%), calc(6% + var(--zd_pureDark_default_lValue)), calc( + var(--zd_alpha_high)));
 }

package/css_error.log

@@ -0,0 +1 @@
+DOT Package error log:

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -132,11 +132,11 @@
 }
 
 [dir=ltr] .footer {
-    padding-right:var(--zd_size68)
+    padding-right: var(--zd_size68)
 }
 
 [dir=rtl] .footer {
-    padding-left:var(--zd_size68)
+    padding-left: var(--zd_size68)
 }
 
 .footerHeight {
@@ -191,7 +191,7 @@
     height: 100%;
     opacity: 0.3;
     background-color: var(--zdt_attachmentviewer_selected_after_bg);
-    box-shadow: 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset;
+    box-shadow: var(--zd_bs_attachmentviewer_selected);
 }
 
 [dir=ltr] .selected::after {
@@ -350,5 +350,4 @@
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
-}
-
+}

package/es/Drawer/Drawer.js

@@ -2,6 +2,7 @@ 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 { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
 import FormAction from '../FormAction/FormAction';
@@ -166,7 +167,7 @@ export default class Drawer extends React.Component {
       eleRef: this.createRef
     }, /*#__PURE__*/React.createElement(Card, {
       onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
+        cancelBubblingEffect(e);
         onBodyClick(e);
       }
     }, childrenWithProps));
@@ -178,7 +179,7 @@ export default class Drawer extends React.Component {
     }, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
       className: styleByResolutions,
       onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
+        cancelBubblingEffect(e);
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true

package/es/Drawer/Drawer.module.css

@@ -1,79 +1,100 @@
 .container {
   transition: width var(--zd_transition3);
-  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
+  box-shadow: var(--zd_bs_drawer_shadow);
   background-color: var(--zdt_drawer_default_bg);
 }
+
 .isOverlay {
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
+
 [dir=ltr] .isOverlay {
   right: 0;
 }
+
 [dir=rtl] .isOverlay {
   left: 0;
 }
+
 .columns {
   pointer-events: initial;
 }
+
 .drawerModal {
   position: relative;
 }
+
 .secondDrawer {
   background-color: var(--zdt_drawer_default_bg);
-  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
+  box-shadow: var(--zd_bs_drawer_shadow);
 }
+
 .secondMobDrawer {
   position: absolute;
   top: 0;
   z-index: 1;
 }
+
 [dir=ltr] .secondMobDrawer {
   right: 0;
 }
+
 [dir=rtl] .secondMobDrawer {
   left: 0;
 }
+
 .mobModal {
   position: absolute;
   top: 0;
   bottom: 0;
 }
+
 [dir=ltr] .mobModal {
   right: 0;
   left: 0;
 }
+
 [dir=rtl] .mobModal {
   left: 0;
   right: 0;
 }
+
 .xsmall {
   width: var(--zd_size360);
 }
+
 .small {
   width: var(--zd_size410);
 }
+
 .medium {
   width: var(--zd_size660);
 }
+
 .xmedium {
   width: var(--zd_size730);
 }
+
 .large {
   width: var(--zd_size936);
 }
+
 .xlarge {
   width: var(--zd_size840);
 }
+
 .xxlarge {
   width: var(--zd_size1142);
 }
+
 .mbleSize,
 .default {
   width: 100%;
 }
+
 .header {
   min-height: var(--zd_size50);
   background-color: var(--zdt_drawer_header_bg);
@@ -81,71 +102,89 @@
   padding-top: var(--zd_size10);
   padding-bottom: var(--zd_size10);
 }
+
 .subheader {
   min-height: var(--zd_size28);
 }
+
 .title {
-  color: var( --zdt_drawer_title_text);
+  color: var(--zdt_drawer_title_text);
   font: var(--zd_font_size16) var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .title {
   padding: 0 var(--zd_size10) 0 0;
 }
+
 [dir=rtl] .title {
   padding: 0 0 0 var(--zd_size10);
 }
+
 [dir=ltr] .smallHeaderPadding {
   padding-right: var(--zd_size11);
   padding-left: var(--zd_size30);
 }
+
 [dir=rtl] .smallHeaderPadding {
   padding-left: var(--zd_size11);
   padding-right: var(--zd_size30);
 }
+
 [dir=ltr] .smallContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
+
 [dir=rtl] .smallContentPadding {
   padding-right: var(--zd_size30);
   padding-left: var(--zd_size30);
 }
+
 [dir=ltr] .mediumHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size30);
 }
+
 [dir=rtl] .mediumHeaderPadding {
   padding-left: var(--zd_size15);
   padding-right: var(--zd_size30);
 }
+
 [dir=ltr] .mediumContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
+
 [dir=rtl] .mediumContentPadding {
   padding-right: var(--zd_size30);
   padding-left: var(--zd_size30);
 }
+
 [dir=ltr] .largeHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size50);
 }
+
 [dir=rtl] .largeHeaderPadding {
   padding-left: var(--zd_size15);
   padding-right: var(--zd_size50);
 }
+
 [dir=ltr] .largeContentPadding {
   padding-left: var(--zd_size50);
   padding-right: var(--zd_size50);
 }
+
 [dir=rtl] .largeContentPadding {
   padding-right: var(--zd_size50);
   padding-left: var(--zd_size50);
 }
+
 [dir=ltr] .iconWrapper {
   margin-right: var(--zd_size10);
 }
+
 [dir=rtl] .iconWrapper {
   margin-left: var(--zd_size10);
 }

package/es/FreezeLayer/props/propTypes.js

@@ -15,4 +15,5 @@ export const propTypes = {
   runOnMount: PropTypes.bool,
   customStyle: PropTypes.object,
   zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
-};
+};
+export default propTypes;

package/es/FreezeLayer/useFreezeLayer.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { isTextSelected } from '@zohodesk/components/es/utils/Common';
+import { isTextSelected, cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { getDotLibraryConfig } from '../Provider/Config';
 export default function useFreezeLayer(_ref) {
   let {
@@ -9,9 +9,11 @@ export default function useFreezeLayer(_ref) {
   const [isActive, setActive] = useState(propsActive);
   const [isChildActive, setChildActive] = useState(false);
   let isFreezeLayerEnabled = useRef(false);
-  function handleClick() {
+  function handleClick(e) {
     if (onClick && !isTextSelected()) {
-      onClick();
+      onClick(e);
+    } else {
+      cancelBubblingEffect(e);
     }
   }
   function enableFreeze() {

package/es/Link/Link.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import style from './Link.module.css';
 import LinkContext from './LinkContext';
 export default class Link extends React.Component {
@@ -19,14 +20,14 @@ export default class Link extends React.Component {
       onCallBack
     } = this.context.options;
     if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
-      e && e.stopPropagation();
+      cancelBubblingEffect(e);
       return;
     }
     onClick && onClick(e);
     if (!hasReload && target != '_blank') {
       e && e.preventDefault();
     }
-    e && e.stopPropagation();
+    cancelBubblingEffect(e);
     !onClick && onCallBack && onCallBack(urlOutput, href, e);
   }
   addHttp(url) {

package/es/Message/Message.module.css

@@ -17,7 +17,7 @@
   position: relative;
   display: inline-block;
   pointer-events: initial;
-  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
+  box-shadow: var(--zd_bs_message_container);
   border-radius: 0 0 5px 5px;
   background: var(--zdt_message_default_bg);
 }

package/es/PlusIcon/PlusIcon.module.css

@@ -1,16 +1,19 @@
 .container {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
   border-radius: 50%;
-  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
+  box-shadow: var(--zd_bs_plusicon_container);
   cursor: pointer;
   background-color: var(--zdt_plusicon_bg);
 }
+
 .plusIcon {
   border: 1px solid var(--zdt_plusicon_border);
 }
+
 .icon {
   color: var(--zdt_plusicon_text);
 }
+
 .plusIcon:hover {
   border-color: var(--zdt_plusicon_hover_border);
-}
+}

package/es/ToastMessage/ToastMessage.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 //components
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
@@ -11,10 +12,6 @@ import AutoClose from '../actions/AutoClose';
 import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 //style
 import style from './ToastMessage.module.css';
-function removeClose(e) {
-  e && e.stopPropagation && e.stopPropagation();
-  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-}
 function ToastMessageUI(props) {
   let [messageState, setMessageState] = useState(props.messageState);
   let {
@@ -54,7 +51,7 @@ function ToastMessageUI(props) {
     onClose && onClose();
   }
   function changeMessageState(e) {
-    removeClose(e);
+    cancelBubblingEffect(e);
     setMessageState(!messageState);
   }
   let animateClass = isClose ? style.rightanimate : style.leftanimate;

package/es/ToastMessage/ToastMessage.module.css

@@ -3,7 +3,7 @@
   position: relative;
   max-height: 100%;
   border-radius: 5px;
-  box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
+  box-shadow: var(--zd_bs_toastmessage_container);
   background-color: var(--zdt_toastmessage_default_bg);
   margin-bottom: var(--zd_size7);
 }[dir=ltr] .container {
@@ -149,6 +149,7 @@
 .alertleft {
   padding: var(--zd_size15) var(--zd_size25);
 }
+
 .alertico {
   min-width: var(--zd_size50);
 }
@@ -232,17 +233,17 @@
   background: var(--zdt_toastmessage_dropdown_bg);
 }
 
-.dropdown > i {
+.dropdown>i {
   position: absolute;
   top: 50%;
 }
 
-[dir=ltr] .dropdown > i {
+[dir=ltr] .dropdown>i {
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
-[dir=rtl] .dropdown > i {
+[dir=rtl] .dropdown>i {
   right: 50%;
   transform: translate(50%, -50%);
 }
@@ -260,7 +261,7 @@
   transition: padding var(--zd_transition3), height var(--zd_transition3);
   border-top: 1px solid var(--zdt_toastmessage_message_border);
   cursor: pointer;
-  margin:0;
+  margin: 0;
 }
 
 [dir=ltr] .message {
@@ -325,4 +326,4 @@
 
 .primaryPlain {
   color: var(--zdt_toastmessage_primary_text);
-}
+}

package/es/actions/AutoClose.js

@@ -1,10 +1,7 @@
 import React, { useState, useEffect } from 'react';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-function removeClose(e) {
-  e && e.stopPropagation && e.stopPropagation();
-  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-}
 export default function AutoClose(props) {
   let {
     Element,
@@ -15,7 +12,7 @@ export default function AutoClose(props) {
   } = props;
   let [isClose, setClose] = useState(givenClose);
   function onClose(e) {
-    removeClose(e);
+    cancelBubblingEffect(e);
     onPortalClose && onPortalClose();
   }
   useEffect(() => {

package/es/common/dot_boxShadow.module.css

@@ -0,0 +1,38 @@
+:root {
+    /* attachment viewer */
+    --zd_bs_attachmentviewer_selected: var(--zd_bs_contrast_outline, 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset);
+
+    /* texteditor */
+    --zd_bs_texteditor_menu: var(--zd_bs_contrast_outline, -1px 1px 2px 0 var(--zdt_texteditor_menu_after_box_shadow));
+    --zd_bs_texteditor_ul: var(--zd_bs_contrast_outline, 0 1px 32px 0 var(--zdt_texteditor_dropdown_box_shadow));
+
+    /* subtab layout */
+    --zd_bs_subtablayout_shadow: var(--zd_bs_contrast_outline, 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow));
+
+    /* drawer */
+    --zd_bs_drawer_shadow: var(--zd_bs_contrast_outline, 0 6px 12px var(--zdt_drawer_default_box_shadow));
+
+    /* dot new */
+    --zd_bs_dotnew_shadow: var(--zd_bs_contrast_outline, 0 0 15px 1px var(--zdt_dotnew_default_box_shadow));
+
+    /* tag new */
+    --zd_bs_tagnew_shadow: var(--zd_bs_contrast_outline, 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow));
+
+    /* lookup section */
+    --zd_bs_lookupsection_shadow: var(--zd_bs_contrast_outline, 0px 4px 20px var(--zdt_lookupsection_box_shadow));
+
+    /* message */
+    --zd_bs_message_container: var(--zd_bs_contrast_outline, 0 0 19px 1px var(--zdt_message_default_box_shadow));
+
+    /* plus icon */
+    --zd_bs_plusicon_container: var(--zd_bs_contrast_outline, 0 2px 3px 0 var(--zdt_plusicon_box_shadow));
+
+    /* toast message */
+    --zd_bs_toastmessage_container: var(--zd_bs_contrast_outline, 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow));
+
+    /* global notification */
+    --zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--globalnotification_box_shadow));
+
+    /* desktop notification */
+    --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
+}

package/es/common/dot_docStyle.module.css

@@ -0,0 +1,35 @@
+[data-mode='default']:global(.zd-contrast) {
+  color: #000;
+  background: #fff;
+  border-color: #000;
+}
+
+[data-mode='dark']:global(.zd-contrast) {
+  color: #fff;
+  background-color: #101319;
+  border-color: #fff;
+}
+
+[data-mode='pureDark']:global(.zd-contrast) {
+  color: #fff;
+  background-color: #080808;
+  border-color: #fff;
+}
+
+:global(.zd-contrast) {
+  --zd_bs_contrast_outline: 0 0 2px var(--zdt_contrast_shadow);
+  --zd_bs_contrast_none: 0 0 0 transparent;
+  --zd_lightmode_grey_bg: -0%;
+}
+
+:global(.zd-contrast-level1) {
+  --zd_contrastLevel: 10;
+}
+
+:global(.zd-contrast-level2) {
+  --zd_contrastLevel: 20;
+}
+
+:global(.zd-contrast-level3) {
+  --zd_contrastLevel: 40;
+}