@zohodesk/dot 1.0.0-temp-191.1 → 1.0.0-temp-192

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

@@ -0,0 +1,60 @@
+export function processFiles(_ref) {
+  let {
+    type,
+    libArray,
+    mapping,
+    imports,
+    mode,
+    theme
+  } = _ref;
+
+  if (type === 'appearance') {
+    const importFilesArray = [];
+    libArray.map(libName => {
+      const importFile = mapping[libName][mode];
+      importFilesArray.push(importFile);
+    });
+    importFiles({
+      file: importFilesArray,
+      imports: imports
+    });
+  }
+
+  if (type === 'theme') {
+    const importFilesArray = [];
+    libArray.map(libName => {
+      const importFile = mapping[libName][theme][mode];
+      importFilesArray.push(importFile);
+    });
+    importFiles({
+      file: importFilesArray,
+      imports: imports
+    });
+  }
+
+  if (type === 'zoom') {
+    return imports[mapping.zoomSize]();
+  }
+
+  if (type === 'font') {
+    return imports[mapping.fontSize]();
+  }
+}
+export function importFiles(_ref2) {
+  let {
+    file,
+    imports
+  } = _ref2;
+  const promises = [];
+  file.forEach(fileKey => {
+    if (imports[fileKey]) {
+      promises.push(imports[fileKey]());
+    } else {
+      console.error(`Import not found for ${fileKey}`);
+    }
+  });
+  return Promise.all(promises).catch(error => {
+    console.error(`Error importing files:`, error);
+    return Promise.reject(error);
+  });
+}

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

@@ -0,0 +1,12 @@
+export const imports = {
+  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 mapping = {
+  zoomSize: 'Lib_ZoomSize',
+  fontSize: 'Lib_FontSize'
+};

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

@@ -0,0 +1,220 @@
+export const themeImports = {
+  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 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'
+    }
+  }
+};

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