@zohodesk/dot 1.7.18 → 1.7.20-exp.1

package/es/AttachmentViewer/utils.js

@@ -1,4 +1,4 @@
-import { isAudioFile } from "./Attachment";
+import { getExtensionFromFileName } from "./Attachment";
 export class Zoom {
   constructor() {
     const matrix = [1, 0, 0, 1, 0, 0]; // current view transform
@@ -120,6 +120,16 @@ export function checkImageValidity(src) {
     };
   });
 }
+export function checkVideoUrlValidity(url) {
+  return new Promise(resolve => {
+    const video = document.createElement('video');
+    video.src = url;
+
+    video.oncanplaythrough = () => resolve(true);
+
+    video.onerror = () => resolve(false);
+  });
+}
 export function checkAudioUrlValidity(url) {
   return new Promise(resolve => {
     const audio = new Audio(url);
@@ -134,23 +144,98 @@ export function checkAudioUrlValidity(url) {
   });
 }
 ;
+export function isValidDocument(url) {
+  if (!url) {
+    return false;
+  }
+
+  return true;
+}
+export const FILE_EXTENSIONS = {
+  audio: ['mp3', 'wav', 'wma', 'aac', 'm4r', 'm4a', 'flac', 'aiff', 'alac', 'ogg', 'opus', 'amr', 'mid', 'midi'],
+  video: ['mp4', 'mkv', 'mov', 'mpeg', 'mpg', 'flv', 'wmv', 'avi', 'webm', 'ogv', 'm4v', '3gp', '3g2'],
+  document: ['doc', 'docx', 'docm', 'dot', 'dotx', 'dotm', 'odt', 'rtf', 'txt', 'md', 'pages', 'xls', 'xlsx', 'xlsm', 'xlsb', 'csv', 'tsv', 'ods', 'sxc', 'numbers', 'ppt', 'pptx', 'pps', 'ppsx', 'pot', 'potx', 'odp', 'sxi', 'key', 'pdf', 'xml', 'json', 'yaml', 'yml', 'log', 'eml', 'msg'],
+  image: ['jpeg', 'jpg', 'png', 'apng', 'gif', 'bmp', 'dib', 'tiff', 'tif', 'ico', 'svg', 'webp', 'heic', 'heif', 'jfif', 'pjpeg', 'pjp', 'avif']
+};
+export const SUPPORTED_FILE_EXTENSIONS = {
+  image: ['jpeg', 'jpg', 'png', 'apng', 'gif', 'bmp', 'tiff', 'tif', 'ico', 'svg', 'heic', 'webp'],
+  doc: ['txt'],
+  pdf: ['pdf'],
+  html: ['html', 'htm', 'xhtml'],
+  ppt: ['ppt', 'pps', 'odp', 'sxi', 'pptx', 'ppsx', 'pot', 'potx', 'key'],
+  zip: ['rar', 'jar', 'zip'],
+  word: ['doc', 'docx', 'sxw', 'odt', 'docm', 'dot', 'dotm', 'dotx', 'rtf', 'pages'],
+  xml: ['xml'],
+  sheet: ['xls', 'xlsx', 'xlsm', 'xlsb', 'sxc', 'ods', 'csv', 'tsv', 'numbers'],
+  audio: ['mp3', 'wav', 'wma', 'aac', 'm4r', 'ogg', 'opus'],
+  video: ['mp4', 'mkv', 'mov', 'mpeg', 'flv', 'wmv', 'avi', 'webm', 'ogv'],
+  mail: ['eml', 'msg'],
+  linux: ['sh', 'bin'],
+  css: ['css'],
+  exe: ['exe'],
+  event: ['ics']
+};
 export function checkFileSourcesValidation(_ref) {
   let {
     fileName,
-    viewURL
+    viewURL,
+    previewUrl,
+    allowedPreviewExtensionsData
   } = _ref;
+  const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
 
-  if (isAudioFile(fileName)) {
-    const audioValidityPromise = checkAudioUrlValidity(viewURL);
-    return audioValidityPromise.then(isURLValid => ({
-      isViewURLValid: isURLValid,
+  if (!extension) {
+    return Promise.resolve({
+      isViewURLValid: false,
       canZoom: false
-    }));
-  } else {
-    const imageValidityPromise = checkImageValidity(viewURL);
-    return imageValidityPromise.then(isURLValid => ({
-      isViewURLValid: isURLValid,
-      canZoom: isURLValid
-    }));
+    });
+  }
+
+  const extensionSource = allowedPreviewExtensionsData || FILE_EXTENSIONS;
+
+  const fileExtensionValidation = type => {
+    const list = extensionSource[type];
+    if (!Array.isArray(list)) return false;
+    return list.map(e => e.toLowerCase()).includes(extension);
+  };
+
+  if (fileExtensionValidation('audio')) {
+    return checkAudioUrlValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
   }
+
+  if (fileExtensionValidation('video')) {
+    return checkVideoUrlValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
+  }
+
+  if (fileExtensionValidation('document')) {
+    const isValid = isValidDocument(previewUrl, fileName);
+    return Promise.resolve({
+      isViewURLValid: isValid,
+      canZoom: false
+    });
+  }
+
+  if (fileExtensionValidation('image')) {
+    return checkImageValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: isURLValid
+      };
+    });
+  }
+
+  return Promise.resolve({
+    isViewURLValid: false,
+    canZoom: false
+  });
 }

package/es/DotProvider/hooks/useDotProvider.js

@@ -7,6 +7,7 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/components/es/common/basic.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/components/es/common/boxShadow.module.css';
 import "../../common/dot_boxShadow.module.css";
 

package/es/Drawer/Drawer.module.css

@@ -109,7 +109,7 @@
 
 .title {
   color: var(--zdt_drawer_title_text);
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -20,7 +20,7 @@
   max-width: var(--zd_size430) ;
 }
 .title {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--titleColor);
   word-wrap: break-word;
 }

package/es/emptystate/EditionPage/EditionPage.css

@@ -6,12 +6,12 @@
 }
 .header {
   font-size: var(--zd_font_size20) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin-top: var(--zd_size16) ;
 }
 .description {
   font-size: var(--zd_font_size15) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin: var(--zd_size20) 0 ;
 }
 .content {

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,5 +1,5 @@
 .headtingText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   font-size: var(--zd_font_size50) ;
   letter-spacing: var(--zd_size1);
   margin-bottom: var(--zd_size5) ;

package/es/form/fields/TextEditor/TextEditor.js

@@ -243,7 +243,8 @@ export default class TextEditor extends Component {
       let customStyleTag = document.createElement('style');
       customStyleTag.type = 'text/css';
       const customizedCSS = `pre {white-space: pre-wrap} ${customCSS}`;
-      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
+      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}
+      @font-face {font-family: 'ZohoPuvi';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: ZDLato;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'Roboto';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
       customStyleTag.textContent = `${customizedCSS} ${fontCSS}`;
       iframeHead.appendChild(customStyleTag);
     }

package/es/form/fields/TextEditor/TextEditor.module.css

@@ -32,7 +32,7 @@
 .textEditor * {
   box-sizing: initial;
   line-height: initial;
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .textEditor {
@@ -717,7 +717,7 @@
 }
 
 :global .KB_Editor textarea.ze_area {
-  font-family: var(--zd_regular) !important;
+  font-weight: var(--zd-fw-normal) !important;
   font-size: var(--zd_font_size14)  !important;
   padding: var(--zd_size15) var(--zd_size20)  !important;
 }

package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -30,7 +30,7 @@
 .title {
   font-size: var(--zd_font_size16) ;
   line-height: 1;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }

package/es/list/SecondaryText/SecondaryText.module.css

@@ -15,14 +15,14 @@
   cursor: not-allowed;
 }
 .textBold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   color: var(--zdt_secondaryText_black_text);
 }
-.textStyle, .link{
-display: block
+.textStyle,.link{
+  display: block
 }
 .textStyle.textBold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   color: var(--zdt_secondaryText_black_text);
 }
 .ticketId,
@@ -64,7 +64,7 @@ display: block
 .ticketIdLink {
   cursor: pointer;
 }
-.ticketIdLink:hover, .ticketIdLink:focus {
+.ticketIdLink:hover,.ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
 .primaryAccountNameCnt {
@@ -72,13 +72,13 @@ display: block
 }
 /* status */
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 .font_semibold,
 .font_bold,

package/es/list/Subject/Subject.module.css

@@ -14,15 +14,15 @@
 }
 
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 
 .font_semibold,

package/es/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -1,12 +1,14 @@
 .container {
   text-align: center;
 }
+
 .image {
   margin: var(--zd_size20) auto ;
 }
+
 .contentDiv {
   font-size: var(--zd_font_size20) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   margin-top: var(--zd_size15) ;
-}
+}

package/es/lookup/header/Title/LookupTitle.module.css

@@ -1,21 +1,25 @@
 .title {
   font-size: var(--zd_font_size16) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   word-break: break-all;
   cursor: initial;
 }
+
 .bold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
+
 /* Palette */
 .default {
   color: var(--zdt_lookuptitle_default_text);
 }
+
 .primary {
   color: var(--zdt_lookuptitle_primary_text);
 }
+
 .danger {
   color: var(--zdt_lookuptitle_danger_text);
-}
+}

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -1,28 +1,35 @@
 .small {
   max-height: var(--zd_size200) ;
 }
+
 .medium {
   max-height: var(--zd_size348) ;
 }
+
 .large {
   max-height: var(--zd_size400) ;
 }
+
 .emptyState {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_viewdropdown_empty_text);
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   padding: var(--zd_size12) var(--zd_size15) ;
 }
+
 .hide {
   composes: vishidden from '~@zohodesk/components/es/common/common.module.css';
 }
+
 .container {
   position: relative;
 }
+
 .listItemContainer {
   padding: var(--zd_size10) 0 ;
 }
+
 /* Label Style */
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
@@ -30,21 +37,25 @@
   color: var(--zdt_viewdropdown_label_text);
   cursor: pointer;
 }
+
 .labelText {
   font-size: var(--zd_font_size12) ;
   max-width: var(--zd_size180) ;
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
+
 [dir=ltr] .labelText {
   margin-right: var(--zd_size5) ;
 }
+
 [dir=rtl] .labelText {
   margin-left: var(--zd_size5) ;
 }
+
 .labelCnt:hover .arrowIcon {
   color: var(--zdt_viewdropdown_hover_label_text);
 }
 
 .loader {
   padding: var(--zd_size12) var(--zd_size15) ;
-}
+}

package/es/setup/header/Search/Search.module.css

@@ -38,7 +38,7 @@
   letter-spacing: 0.2px;
   transition: all var(--zd_transition3) ease;
   color: var(--zdt_search_input_text);
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;

package/es/utils/General.js

@@ -43,4 +43,26 @@ export function formatPhoneUrl(phone) {
 
   return phone;
 }
-export const DUMMY_OBJECT = Object.freeze({});
+export const DUMMY_OBJECT = Object.freeze({});
+export function getBrowserWithVersion() {
+  const userAgent = navigator.userAgent;
+  let tempMatch;
+  let browserMatch = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
+
+  if (userAgent.toLowerCase().indexOf('edge') !== -1) {
+    return userAgent.substring(userAgent.toLowerCase().indexOf('edge'));
+  }
+
+  if (/trident/i.test(browserMatch[1])) {
+    tempMatch = /\brv[ :]+(\d+(\.\d+)?)/g.exec(userAgent) || [];
+    return `IE ${tempMatch[1] || ''}`;
+  }
+
+  browserMatch = browserMatch[2] ? [browserMatch[1], browserMatch[2]] : [navigator.appName, navigator.appVersion, '-?'];
+
+  if ((tempMatch = userAgent.match(/version\/([\.\d]+)/i)) !== null) {
+    browserMatch[2] = tempMatch[1];
+  }
+
+  return browserMatch.join(' ');
+}

package/es/v1/form/fields/TextEditor/TextEditor.js

@@ -243,7 +243,8 @@ export default class TextEditor extends Component {
       let customStyleTag = document.createElement('style');
       customStyleTag.type = 'text/css';
       const customizedCSS = `pre {white-space: pre-wrap} ${customCSS}`;
-      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
+      const fontCSS = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}
+      @font-face {font-family: 'ZohoPuvi';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: ZDLato;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'Roboto';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
       customStyleTag.textContent = `${customizedCSS} ${fontCSS}`;
       iframeHead.appendChild(customStyleTag);
     }

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

@@ -126,7 +126,8 @@
   --globalnotification_text_color: var(--zdt_globalnotification_info_text);
 }
 
-.danger,.error {
+.danger,
+.error {
   --commonalert_border_color: var(--zdt_commonalert_danger_border);
   --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
   --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
@@ -148,7 +149,7 @@
 
 .text {
   font-size: var(--zd_font_size14) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   line-height: 1.4286;
   overflow: hidden;

package/es/version2/errorstate/V2_ErrorStates.module.css

@@ -5,7 +5,7 @@
   margin-top: var(--zd_size15) ;
 }
 .title {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 .desc {
   line-height: 1.5714;

package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -1,6 +1,7 @@
 .varClass {
   --commonalert_border_color: var(--zdt_commonalert_default_border);
 }
+
 .container {
   composes: varClass;
   position: relative;
@@ -9,12 +10,15 @@
   border-color: var(--commonalert_border_color);
   border-width: 2px 0 0 0;
 }
+
 .headerLayout {
   min-height: var(--zd_size54) ;
 }
+
 [dir=ltr] .headerLayout {
   padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20) ;
 }
+
 [dir=rtl] .headerLayout {
   padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45) ;
 }
@@ -23,11 +27,13 @@
   --commonalert_border_color: var(--zdt_commonalert_success_border);
 }
 
-.info,.notification {
+.info,
+.notification {
   --commonalert_border_color: var(--zdt_commonalert_info_border);
 }
 
-.danger,.error {
+.danger,
+.error {
   --commonalert_border_color: var(--zdt_commonalert_danger_border);
 }
 
@@ -52,7 +58,7 @@
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size18) ;
   line-height: 1.2222;
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth wbreak from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   cursor: default;

package/es/version2/lookup/alertLookupCommonNew.module.css

@@ -14,7 +14,7 @@
 
 .noteTitle {
     font-size: var(--zd_font_size13) ;
-    font-family: var(--zd_semibold);
+    font-weight: var(--zd-fw-semibold);
     composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
 

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -36,7 +36,8 @@
 .large {
   width: var(--zd_size580) ;
 }
-.tapWidth{
+
+.tapWidth {
   max-width: 100% ;
   min-width: 100% ;
 }
@@ -109,7 +110,7 @@
 .subTitle {
   font-size: var(--zd_font_size15) ;
   line-height: 1.3333;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth wbreak from '~@zohodesk/components/es/common/common.module.css';
 }
 
@@ -130,4 +131,4 @@
 .footer {
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
+}

package/lib/ActionButton/ActionButton.module.css

@@ -98,7 +98,7 @@
 
 .txt {
   font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   text-transform: capitalize;
 }
 

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -53,5 +53,5 @@
 }
 .title {
   font-size: var(--zd_font_size11) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }

package/lib/Attachment/Attachment.module.css

@@ -14,15 +14,15 @@
   height: 100% ;
   width: 100% ;
   position: absolute;
-  top:0 
+  top: 0 
 }
 
 [dir=ltr] .disableLayer {
-  left:0 
+  left: 0 
 }
 
 [dir=rtl] .disableLayer {
-  right:0 
+  right: 0 
 }
 
 .attachmentHover {
@@ -66,6 +66,10 @@
   height: var(--zd_size40) ;
 }
 
+.attachleft {
+  padding: var(--zd_size3) ;
+}
+
 [dir=ltr] .attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }