@zohodesk/dot 1.0.0-temp-183 → 1.0.0-temp-181.8

package/lib/v1/DotWrapper/utils/themeProperties.js

@@ -0,0 +1,325 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeMapping = exports.themeImports = void 0;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var themeImports = {
+  Lib_Blue_Light_Component: function Lib_Blue_Light_Component() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Blue_PureDark_Component: function Lib_Blue_PureDark_Component() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Green_Dark_Component: function Lib_Green_Dark_Component() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Orange_Light_Component: function Lib_Orange_Light_Component() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Orange_PureDark_Component: function Lib_Orange_PureDark_Component() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Red_Dark_Component: function Lib_Red_Dark_Component() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Yellow_Light_Component: function Lib_Yellow_Light_Component() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Yellow_PureDark_Component: function Lib_Yellow_PureDark_Component() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Blue_Dark_Dot: function Lib_Blue_Dark_Dot() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Green_Light_Dot: function Lib_Green_Light_Dot() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Green_PureDark_Dot: function Lib_Green_PureDark_Dot() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Orange_Dark_Dot: function Lib_Orange_Dark_Dot() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Red_Light_Dot: function Lib_Red_Light_Dot() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Red_PureDark_Dot: function Lib_Red_PureDark_Dot() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Yellow_Dark_Dot: function Lib_Yellow_Dark_Dot() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Blue_Light_SVG: function Lib_Blue_Light_SVG() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Blue_PureDark_SVG: function Lib_Blue_PureDark_SVG() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Green_Dark_SVG: function Lib_Green_Dark_SVG() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Orange_Light_SVG: function Lib_Orange_Light_SVG() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Orange_PureDark_SVG: function Lib_Orange_PureDark_SVG() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Red_Dark_SVG: function Lib_Red_Dark_SVG() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Yellow_Light_SVG: function Lib_Yellow_Light_SVG() {
+    return Promise.resolve().then(function () {
+      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'));
+    });
+  },
+  Lib_Yellow_PureDark_SVG: function Lib_Yellow_PureDark_SVG() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG'));
+    });
+  }
+};
+exports.themeImports = themeImports;
+var themeMapping = {
+  component: {
+    blue: {
+      light: 'Lib_Blue_Light_Component',
+      dark: 'Lib_Blue_Dark_Component',
+      pureDark: 'Lib_Blue_PureDark_Component'
+    },
+    green: {
+      light: 'Lib_Green_Light_Component',
+      dark: 'Lib_Green_Dark_Component',
+      pureDark: 'Lib_Green_PureDark_Component'
+    },
+    orange: {
+      light: 'Lib_Orange_Light_Component',
+      dark: 'Lib_Orange_Dark_Component',
+      pureDark: 'Lib_Orange_PureDark_Component'
+    },
+    red: {
+      light: 'Lib_Red_Light_Component',
+      dark: 'Lib_Red_Dark_Component',
+      pureDark: 'Lib_Red_PureDark_Component'
+    },
+    yellow: {
+      light: 'Lib_Yellow_Light_Component',
+      dark: 'Lib_Yellow_Dark_Component',
+      pureDark: 'Lib_Yellow_PureDark_Component'
+    }
+  },
+  dot: {
+    blue: {
+      light: 'Lib_Blue_Light_Dot',
+      dark: 'Lib_Blue_Dark_Dot',
+      pureDark: 'Lib_Blue_PureDark_Dot'
+    },
+    green: {
+      light: 'Lib_Green_Light_Dot',
+      dark: 'Lib_Green_Dark_Dot',
+      pureDark: 'Lib_Green_PureDark_Dot'
+    },
+    orange: {
+      light: 'Lib_Orange_Light_Dot',
+      dark: 'Lib_Orange_Dark_Dot',
+      pureDark: 'Lib_Orange_PureDark_Dot'
+    },
+    red: {
+      light: 'Lib_Red_Light_Dot',
+      dark: 'Lib_Red_Dark_Dot',
+      pureDark: 'Lib_Red_PureDark_Dot'
+    },
+    yellow: {
+      light: 'Lib_Yellow_Light_Dot',
+      dark: 'Lib_Yellow_Dark_Dot',
+      pureDark: 'Lib_Yellow_PureDark_Dot'
+    }
+  },
+  svg: {
+    blue: {
+      light: 'Lib_Blue_Light_SVG',
+      dark: 'Lib_Blue_Dark_SVG',
+      pureDark: 'Lib_Blue_PureDark_SVG'
+    },
+    green: {
+      light: 'Lib_Green_Light_SVG',
+      dark: 'Lib_Green_Dark_SVG',
+      pureDark: 'Lib_Green_PureDark_SVG'
+    },
+    orange: {
+      light: 'Lib_Orange_Light_SVG',
+      dark: 'Lib_Orange_Dark_SVG',
+      pureDark: 'Lib_Orange_PureDark_SVG'
+    },
+    red: {
+      light: 'Lib_Red_Light_SVG',
+      dark: 'Lib_Red_Dark_SVG',
+      pureDark: 'Lib_Red_PureDark_SVG'
+    },
+    yellow: {
+      light: 'Lib_Yellow_Light_SVG',
+      dark: 'Lib_Yellow_Dark_SVG',
+      pureDark: 'Lib_Yellow_PureDark_SVG'
+    }
+  }
+};
+exports.themeMapping = themeMapping;

package/lib/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 ;
 }