@zohodesk/dot 1.0.0-temp-195 → 1.0.0-temp-193.11

package/es/v1/DotProvider/utils/sizeAssetsConfig.js

@@ -0,0 +1,12 @@
+export const assetImports = {
+  Lib_ZoomSize: () => import(
+  /* webpackChunkName: 'Lib_ZoomSize' */
+  '@zohodesk/variables/assets/sizeVariables.module.css'),
+  Lib_FontSize: () => import(
+  /* webpackChunkName: 'Lib_FontSize' */
+  '@zohodesk/variables/assets/fontsizeVariables.module.css')
+};
+export const assetImportMapping = {
+  zoomSize: 'Lib_ZoomSize',
+  fontSize: 'Lib_FontSize'
+};

package/es/v1/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -0,0 +1,47 @@
+import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
+export const assetImports = {
+  Lib_LightMode_Component: () => import(
+  /* webpackChunkName: 'Lib_LightMode_Component' */
+  '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'),
+  Lib_DarkMode_Component: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Component' */
+  '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css'),
+  Lib_PureDarkMode_Component: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Component' */
+  '@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"),
+  Lib_DarkMode_Dot: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Dot' */
+  "./../../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css"),
+  Lib_PureDarkMode_Dot: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Dot' */
+  "./../../../../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'),
+  Lib_DarkMode_SVG: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_SVG' */
+  '@zohodesk/svg/assets/Appearance/dark/mode/SVG_DarkMode.module.css'),
+  Lib_PureDarkMode_SVG: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_SVG' */
+  '@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css')
+};
+export const assetImportMapping = {
+  [LIBRARY_COMPONENT]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Component',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Component',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Component'
+  },
+  [LIBRARY_DOT]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Dot',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Dot',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Dot'
+  },
+  [LIBRARY_SVG]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_SVG',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_SVG',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_SVG'
+  }
+};

package/es/v1/DotProvider/utils/themeColorAssetsConfig.js

@@ -0,0 +1,221 @@
+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 assetImports = {
+  Lib_Blue_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Blue_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Green_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Orange_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Orange_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Red_Dark_Component: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Yellow_Light_Component: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Yellow_PureDark_Component: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Blue_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Green_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Green_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Orange_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Red_Light_Dot: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Red_PureDark_Dot: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Yellow_Dark_Dot: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Blue_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Blue_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Green_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Orange_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Orange_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Red_Dark_SVG: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Yellow_Light_SVG: () => import(
+  /* webpackChunkName: 'Lib_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"),
+  Lib_Yellow_PureDark_SVG: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_SVG' */
+  "../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG")
+};
+export const assetImportMapping = {
+  [LIBRARY_COMPONENT]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Component'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Component'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Component'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Component'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Component',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Component',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Component'
+    }
+  },
+  [LIBRARY_DOT]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Dot'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Dot'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Dot'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Dot'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Dot',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Dot',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Dot'
+    }
+  },
+  [LIBRARY_SVG]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_SVG'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_SVG'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_SVG'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_SVG'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_SVG',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_SVG',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_SVG'
+    }
+  }
+};

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -1,178 +1,178 @@
-.varClass {
-  /* globalnotfication default variables */
-  --commonalert_border_color: var(--zdt_commonalert_default_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
-}
-
-.message {
-  composes: varClass;
-  position: absolute;
-  top: 0 ;
-  z-index: 1000;
-  width: var(--zd_size420) ;
-  text-align: center;
-  margin: auto ;
-}
-
-[dir=ltr] .message {
-  left: 0 ;
-  right: 0 ;
-}
-
-[dir=rtl] .message {
-  right: 0 ;
-  left: 0 ;
-}
-
-.stackShadowOne::after,
-.stackShadowTwo::before {
-  content: '';
-  position: absolute;
-  height: var(--zd_size20) ;
-}
-
-.stackShadowOne::after, .stackShadowTwo::before {
-  background-color: var(--globalnotification_bg_color);
-  border-radius: 0 0 6px 6px;
-  box-shadow: var(--zd_bs_globalnotification_container);
-}
-
-[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
-  left: 50% ;
-  right: 50% ;
-  transform: translate(-50%);
-  animation: behindInfo 0.8s forwards;
-}
-
-[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
-  right: 50% ;
-  left: 50% ;
-  transform: translate(50%);
-  animation: behindInfo 0.8s forwards;
-}
-
-.stackShadowTwo::before {
-  width: 90% ;
-  bottom: calc( var(--zd_size10) * -1 ) ;
-}
-
-.stackShadowOne::after {
-  width: 95% ;
-  bottom: calc( var(--zd_size5) * -1 ) ;
-}
-
-@keyframes behindInfo {
-
-  0%,
-  40% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.container {
-  position: relative;
-  pointer-events: initial;
-  color: var(--globalnotification_text_color);
-  z-index: 1;
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  width: 100% ;
-  box-shadow: var(--zd_bs_globalnotification_container);
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  background-color: var(--globalnotification_bg_color);
-  border-style: solid;
-  border-color: var(--commonalert_border_color);
-  border-width: 2px 1px 1px 1px;
-}
-
-[dir=ltr] .container {
-  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
-}
-
-.icon {
-  width: var(--zd_size44) ;
-  height: var(--zd_size44) ;
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  margin: auto 0 ;
-}
-
-[dir=ltr] .icon {
-  left: var(--zd_size18) ;
-}
-
-[dir=rtl] .icon {
-  right: var(--zd_size18) ;
-}
-
-.success {
-  --commonalert_border_color: var(--zdt_commonalert_success_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_success_text);
-}
-
-.info {
-  --commonalert_border_color: var(--zdt_commonalert_info_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_info_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_info_text);
-}
-
-.danger {
-  --commonalert_border_color: var(--zdt_commonalert_danger_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
-}
-
-.error {
-  --commonalert_border_color: var(--zdt_commonalert_error_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_error_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_error_text);
-}
-
-.warning {
-  --commonalert_border_color: var(--zdt_commonalert_warning_border);
-  --globalnotification_bg_color: var(--zdt_globalnotification_warning_bg);
-  --globalnotification_text_color: var(--zdt_globalnotification_warning_text);
-}
-
-.text {
-  font-size: var(--zd_font_size14) ;
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: 1.4286;
-  overflow: hidden;
-}
-
-[dir=ltr] .text {
-  text-align: left;
-}
-
-[dir=rtl] .text {
-  text-align: right;
-}
-
-.close {
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  height: var(--zd_size25) ;
-}
-
-[dir=ltr] .close {
-  right: var(--zd_size12) ;
-  margin: auto 0 auto var(--zd_size25) ;
-}
-
-[dir=rtl] .close {
-  left: var(--zd_size12) ;
-  margin: auto var(--zd_size25) auto 0 ;
+.varClass {
+  /* globalnotfication default variables */
+  --commonalert_border_color: var(--zdt_commonalert_default_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
+}
+
+.message {
+  composes: varClass;
+  position: absolute;
+  top: 0 ;
+  z-index: 1000;
+  width: var(--zd_size420) ;
+  text-align: center;
+  margin: auto ;
+}
+
+[dir=ltr] .message {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .message {
+  right: 0 ;
+  left: 0 ;
+}
+
+.stackShadowOne::after,
+.stackShadowTwo::before {
+  content: '';
+  position: absolute;
+  height: var(--zd_size20) ;
+}
+
+.stackShadowOne::after, .stackShadowTwo::before {
+  background-color: var(--globalnotification_bg_color);
+  border-radius: 0 0 6px 6px;
+  box-shadow: var(--zd_bs_globalnotification_container);
+}
+
+[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
+  left: 50% ;
+  right: 50% ;
+  transform: translate(-50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
+  right: 50% ;
+  left: 50% ;
+  transform: translate(50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+.stackShadowTwo::before {
+  width: 90% ;
+  bottom: calc( var(--zd_size10) * -1 ) ;
+}
+
+.stackShadowOne::after {
+  width: 95% ;
+  bottom: calc( var(--zd_size5) * -1 ) ;
+}
+
+@keyframes behindInfo {
+
+  0%,
+  40% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.container {
+  position: relative;
+  pointer-events: initial;
+  color: var(--globalnotification_text_color);
+  z-index: 1;
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  width: 100% ;
+  box-shadow: var(--zd_bs_globalnotification_container);
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  background-color: var(--globalnotification_bg_color);
+  border-style: solid;
+  border-color: var(--commonalert_border_color);
+  border-width: 2px 1px 1px 1px;
+}
+
+[dir=ltr] .container {
+  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
+}
+
+[dir=rtl] .container {
+  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
+}
+
+.icon {
+  width: var(--zd_size44) ;
+  height: var(--zd_size44) ;
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  margin: auto 0 ;
+}
+
+[dir=ltr] .icon {
+  left: var(--zd_size18) ;
+}
+
+[dir=rtl] .icon {
+  right: var(--zd_size18) ;
+}
+
+.success {
+  --commonalert_border_color: var(--zdt_commonalert_success_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_success_text);
+}
+
+.info {
+  --commonalert_border_color: var(--zdt_commonalert_info_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_info_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_info_text);
+}
+
+.danger {
+  --commonalert_border_color: var(--zdt_commonalert_danger_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
+}
+
+.error {
+  --commonalert_border_color: var(--zdt_commonalert_error_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_error_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_error_text);
+}
+
+.warning {
+  --commonalert_border_color: var(--zdt_commonalert_warning_border);
+  --globalnotification_bg_color: var(--zdt_globalnotification_warning_bg);
+  --globalnotification_text_color: var(--zdt_globalnotification_warning_text);
+}
+
+.text {
+  font-size: var(--zd_font_size14) ;
+  font-family: var(--zd_semibold);
+  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  line-height: 1.4286;
+  overflow: hidden;
+}
+
+[dir=ltr] .text {
+  text-align: left;
+}
+
+[dir=rtl] .text {
+  text-align: right;
+}
+
+.close {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  height: var(--zd_size25) ;
+}
+
+[dir=ltr] .close {
+  right: var(--zd_size12) ;
+  margin: auto 0 auto var(--zd_size25) ;
+}
+
+[dir=rtl] .close {
+  left: var(--zd_size12) ;
+  margin: auto var(--zd_size25) auto 0 ;
 }