@zohodesk/dot 1.9.18 → 1.9.20

package/es/AlphabeticList/AlphabeticList.js

@@ -5,6 +5,7 @@ import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticChara
 import { Container, Box } from '@zohodesk/components/es/Layout';
 /*** CSS ***/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./AlphabeticList.module.css";
 export default class AlphabeticList extends React.PureComponent {
   constructor(props) {
@@ -57,7 +58,7 @@ export default class AlphabeticList extends React.PureComponent {
       dataId: `All_${dataId}`
     }, /*#__PURE__*/React.createElement("span", {
       onClick: this.handleSelectAll,
-      className: `${style.heading} ${style.letter}`,
+      className: cn(`${style.heading} ${style.letter}`),
       "data-title": allTitle
     }, allText)), letters.map(letter => /*#__PURE__*/React.createElement(AlphabeticListItem, {
       id: letter,
@@ -103,7 +104,7 @@ class AlphabeticListItem extends React.PureComponent {
       onClick: this.handleClick,
       dataId: `${text}_${dataId}`
     }, /*#__PURE__*/React.createElement("span", {
-      className: style.letter
+      className: cn(style.letter)
     }, text));
   }
 

package/es/AlphabeticList/AlphabeticList.module.css

@@ -6,10 +6,9 @@
 .container {
   composes: varClass;
   composes: h100 from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-p-0 d-m-0 from global;
   list-style: none;
   pointer-events: initial;
-  margin: 0 ;
-  padding: 0 ;
 }
 .column .title {
   margin-block-end: var(--zd_size3) ;
@@ -27,21 +26,19 @@
 }
 .heading {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .list {
+  composes: d-text-center d-cursor-pointer from global;
   font-size: var(--zd_font_size11) ;
   flex-basis: var(--zd_size12) ;
   color: var(--textColor);
-  text-align: center;
-  cursor: pointer;
 }
 .title {
   flex-basis: var(--zd_size15) ;
 }
 .letter {
-  text-transform: uppercase;
-  display: inline-block;
+  composes: d-inline-block d-uppercase from global;
 }
 .numbers .list {
   max-height: var(--zd_size35) ;

package/es/AlphabeticList/__tests__/__snapshots__/AlphabeticList.spec.js.snap

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlphabeticList rendering the defult props 1`] = `
 <DocumentFragment>
   <ul
-    class="flex column container column"
+    class="d-flex d-flex-col container column"
     data-id="navigationDiv"
     data-selector-id="alphabeticList"
     data-test-id="navigationDiv"
   >
     <li
-      class="noShrink list title"
+      class="d-flex-shrink-0 list title"
       data-id="All_Navi"
       data-selector-id="box"
       data-test-id="All_Navi"
@@ -22,7 +22,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="A_Navi"
       data-selector-id="box"
       data-test-id="A_Navi"
@@ -34,7 +34,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="B_Navi"
       data-selector-id="box"
       data-test-id="B_Navi"
@@ -46,7 +46,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="C_Navi"
       data-selector-id="box"
       data-test-id="C_Navi"
@@ -58,7 +58,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="D_Navi"
       data-selector-id="box"
       data-test-id="D_Navi"
@@ -70,7 +70,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="E_Navi"
       data-selector-id="box"
       data-test-id="E_Navi"
@@ -82,7 +82,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="F_Navi"
       data-selector-id="box"
       data-test-id="F_Navi"
@@ -94,7 +94,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="G_Navi"
       data-selector-id="box"
       data-test-id="G_Navi"
@@ -106,7 +106,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="H_Navi"
       data-selector-id="box"
       data-test-id="H_Navi"
@@ -118,7 +118,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="I_Navi"
       data-selector-id="box"
       data-test-id="I_Navi"
@@ -130,7 +130,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="J_Navi"
       data-selector-id="box"
       data-test-id="J_Navi"
@@ -142,7 +142,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="K_Navi"
       data-selector-id="box"
       data-test-id="K_Navi"
@@ -154,7 +154,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="L_Navi"
       data-selector-id="box"
       data-test-id="L_Navi"
@@ -166,7 +166,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="M_Navi"
       data-selector-id="box"
       data-test-id="M_Navi"
@@ -178,7 +178,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="N_Navi"
       data-selector-id="box"
       data-test-id="N_Navi"
@@ -190,7 +190,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="O_Navi"
       data-selector-id="box"
       data-test-id="O_Navi"
@@ -202,7 +202,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="P_Navi"
       data-selector-id="box"
       data-test-id="P_Navi"
@@ -214,7 +214,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="Q_Navi"
       data-selector-id="box"
       data-test-id="Q_Navi"
@@ -226,7 +226,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="R_Navi"
       data-selector-id="box"
       data-test-id="R_Navi"
@@ -238,7 +238,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="S_Navi"
       data-selector-id="box"
       data-test-id="S_Navi"
@@ -250,7 +250,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="T_Navi"
       data-selector-id="box"
       data-test-id="T_Navi"
@@ -262,7 +262,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="U_Navi"
       data-selector-id="box"
       data-test-id="U_Navi"
@@ -274,7 +274,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="V_Navi"
       data-selector-id="box"
       data-test-id="V_Navi"
@@ -286,7 +286,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="W_Navi"
       data-selector-id="box"
       data-test-id="W_Navi"
@@ -298,7 +298,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="X_Navi"
       data-selector-id="box"
       data-test-id="X_Navi"
@@ -310,7 +310,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="Y_Navi"
       data-selector-id="box"
       data-test-id="Y_Navi"
@@ -322,7 +322,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
       </span>
     </li>
     <li
-      class="flexible basis_zero noShrink list"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 list"
       data-id="Z_Navi"
       data-selector-id="box"
       data-test-id="Z_Navi"

package/es/Attachment/Attachment.js

@@ -4,6 +4,7 @@ import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import Link from "../Link/Link";
+import { cn } from "@dot-system/css-utility";
 import style from "./Attachment.module.css";
 export default class Attachment extends React.Component {
   render() {
@@ -83,14 +84,10 @@ export default class Attachment extends React.Component {
       iconClass: style.downIcon
     })) : null, isDisabled ? /*#__PURE__*/React.createElement("div", {
       "data-title": tooltip,
-      className: style.disableLayer
+      className: cn(style.disableLayer)
     }) : null);
   }
 
 }
 Attachment.propTypes = propTypes;
-Attachment.defaultProps = defaultProps; // if (__DOCS__) {
-//   Attachment.docs = {
-//     componentGroup: 'Attachment'
-//   };
-// }
+Attachment.defaultProps = defaultProps;

package/es/Attachment/Attachment.module.css

@@ -1,6 +1,5 @@
 .attachment {
-  position: relative;
-  overflow: hidden;
+  composes: d-relative d-overflow-hidden from global;
   color: var(--zdt_attachment_default_text);
   border: 1px solid var(--zdt_attachment_default_border);
   border-radius: 2px;
@@ -11,9 +10,7 @@
 }
 
 .disableLayer {
-  height: 100% ;
-  width: 100% ;
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0  
 }
 
@@ -26,7 +23,7 @@
 }
 
 .attachmentHover {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .palette_default {
@@ -129,11 +126,9 @@
 }
 
 .attachDownload {
-  position: absolute;
+  composes: d-hidden d-absolute d-text-center from global;
   top: calc( var(--zd_size1) * -1 ) ;
-  display: none;
   background-color: var(--zdt_attachment_download_bg);
-  text-align: center;
 }
 
 [dir=ltr] .attachDownload {

package/es/Attachment/__tests__/__snapshots__/Attachment.spec.js.snap

@@ -1,34 +1,34 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Attachment rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row attachment palette_default medium"
+    class="d-inline-flex d-flex-row attachment palette_default medium"
     data-id="attachment"
     data-selector-id="attachment"
     data-test-id="attachment"
     tabindex="0"
   >
     <div
-      class="flexible basis_zero noShrink attachright"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 attachright"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize column justifyContent_center"
+        class="d-flex d-h-full d-w-full d-flex-col d-justify-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="noShrink footer"
+          class="d-flex-shrink-0 footer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex row alignItems_baseline"
+            class="d-flex d-flex-row d-items-baseline"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -43,7 +43,7 @@ exports[`Attachment rendering the defult props 1`] = `
 exports[`Attachment with props rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row attachment attachmentHover palette_default medium"
+    class="d-inline-flex d-flex-row attachment attachmentHover palette_default medium"
     data-id="test_id"
     data-selector-id="test_selector"
     data-test-id="test_id"
@@ -51,32 +51,32 @@ exports[`Attachment with props rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink attachleft"
+      class="d-flex-shrink-0 attachleft"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize column alignItems_center justifyContent_center"
+        class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       />
     </div>
     <div
-      class="flexible basis_zero noShrink attachright"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 attachright"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize column justifyContent_center"
+        class="d-flex d-h-full d-w-full d-flex-col d-justify-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="noShrink atatchName"
+          class="d-flex-shrink-0 atatchName"
           data-id="test_id_filename"
           data-selector-id="box"
           data-test-id="test_id_filename"
@@ -85,19 +85,19 @@ exports[`Attachment with props rendering the defult props 1`] = `
           test_file
         </div>
         <div
-          class="noShrink footer"
+          class="d-flex-shrink-0 footer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex row alignItems_baseline"
+            class="d-flex d-flex-row d-items-baseline"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="basis_auto shrink attachSize"
+              class="d-basis-auto d-min-w-0 d-flex-shrink attachSize"
               data-id="test_id_filesize"
               data-selector-id="box"
               data-test-id="test_id_filesize"
@@ -106,13 +106,13 @@ exports[`Attachment with props rendering the defult props 1`] = `
               10MB
             </div>
             <div
-              class="noShrink dot"
+              class="d-flex-shrink-0 dot"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             />
             <div
-              class="basis_auto shrink attachSize"
+              class="d-basis-auto d-min-w-0 d-flex-shrink attachSize"
               data-id="test_id_fileinfo"
               data-selector-id="box"
               data-test-id="test_id_fileinfo"
@@ -135,7 +135,7 @@ exports[`Attachment with props rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-download-new downIcon"
+        class="zd_font_icons ff icon-download-new basic d-inline-block d-align-middle downIcon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/es/AttachmentViewer/AttachmentImage.js

@@ -9,6 +9,7 @@ import { checkImageValidity } from "./utils";
 import Image from "../Image/Image";
 /** * CSS ** */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./AttachmentViewer.module.css";
 export default class AttachmentImage extends Component {
   constructor(props) {
@@ -98,11 +99,11 @@ export default class AttachmentImage extends Component {
       customChildrenClass = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.spinLoad}`,
+      className: cn(`${style.spinLoad}`),
       "data-id": `${dataId}_loader`,
       "data-test-id": `${dataId}_loader`
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     })) : isImageValid ? this.renderImage() : children ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       htmlId: id,

package/es/AttachmentViewer/AttachmentViewer.js

@@ -19,6 +19,7 @@ import { DUMMY_OBJECT } from "../utils/General";
 import { getExtensionFromFileName, getAttachmentIconDetails } from "./Attachment";
 import { shallowDiff } from "../utils/General";
 import { checkFileSourcesValidation, FILE_EXTENSIONS } from "./utils";
+import { cn } from "@dot-system/css-utility";
 import style from "./AttachmentViewer.module.css";
 export default class AttachmentViewer extends Component {
   constructor(props) {
@@ -324,7 +325,7 @@ export default class AttachmentViewer extends Component {
   renderIframe(previewurl) {
     return /*#__PURE__*/React.createElement("iframe", _extends({
       src: previewurl,
-      className: style.previewFrame
+      className: cn(style.previewFrame)
     }, this.props.customProps.iframeProps));
   }
 
@@ -463,7 +464,7 @@ export default class AttachmentViewer extends Component {
         id: `imgPreviewRef${i}`
       }, selectedIndex == i && /*#__PURE__*/React.createElement(React.Fragment, null, this.isAudioFileType(name) ? /*#__PURE__*/React.createElement("audio", _extends({
         controls: true,
-        className: style.zoomIn,
+        className: cn(style.zoomIn),
         "data-id": `${dataId}_audioPreview`,
         "data-test-id": `${dataId}_audioPreview`
       }, audioProps), /*#__PURE__*/React.createElement("source", {
@@ -471,16 +472,16 @@ export default class AttachmentViewer extends Component {
         type: `audio/${extension}`
       })) : this.isVideoFileType(name) ? /*#__PURE__*/React.createElement("video", _extends({
         controls: true,
-        className: style.zoomIn,
+        className: cn(style.zoomIn),
         "data-id": `${dataId}_videoPreview`,
         "data-test-id": `${dataId}_videoPreview`
       }, videoProps), /*#__PURE__*/React.createElement("source", {
         src: viewUrl,
         type: `video/${extension}`
       })) : this.isImageFileType(name) || children ? this.renderImageFrame() : type === "document" && previewurl != null ? this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
-        className: style.previewNone
+        className: cn(style.previewNone)
       }, /*#__PURE__*/React.createElement("div", {
-        className: style.fileTypeImg
+        className: cn(style.fileTypeImg)
       }, this.getPreviewIconData(name, '70')), /*#__PURE__*/React.createElement(Typography, {
         $ui_size: "20",
         $ui_weight: "semibold"
@@ -575,7 +576,7 @@ export default class AttachmentViewer extends Component {
       selectedIndex,
       totalLen
     }), canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
+      className: cn(uptoTablet ? style.mobileMenu : style.menu),
       onClick: this.zoomOut.bind(this, selectedIndex),
       "data-id": "zoomOut",
       "data-test-id": "zoomOut",
@@ -589,7 +590,7 @@ export default class AttachmentViewer extends Component {
         ariaLabel: i18nKeys.zoomOutText
       }
     })) : /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
+      className: cn(uptoTablet ? style.mobileMenu : style.menu),
       onClick: e => this.zoomIn(e, selectedIndex),
       "data-id": "zoomIn",
       "data-test-id": "zoomIn",
@@ -603,7 +604,7 @@ export default class AttachmentViewer extends Component {
         ariaLabel: i18nKeys.zoomInText
       }
     })) : null, canOpenInNewTab ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu
+      className: cn(uptoTablet ? style.mobileMenu : style.menu)
     }, /*#__PURE__*/React.createElement(Link, {
       href: selectedImgUrl,
       target: "_blank",
@@ -619,7 +620,7 @@ export default class AttachmentViewer extends Component {
         ariaLabel: i18nKeys.newTabText
       }
     }))) : null, needDownload ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu
+      className: cn(uptoTablet ? style.mobileMenu : style.menu)
     }, /*#__PURE__*/React.createElement(Link, {
       href: downloadUrl,
       downloadName: selectedAttachment.name,
@@ -638,7 +639,7 @@ export default class AttachmentViewer extends Component {
         ariaLabel: i18nKeys.downloadText
       }
     }))) : null, /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
+      className: cn(uptoTablet ? style.mobileMenu : style.menu),
       onClick: this.closeAttachmentViewer,
       "data-id": "closeAttach",
       "data-test-id": "closeAttach",
@@ -664,7 +665,7 @@ export default class AttachmentViewer extends Component {
       "data-title": i18nKeys.previousText,
       "data-title-position": "left"
     }, /*#__PURE__*/React.createElement("button", {
-      className: style.btn,
+      className: cn(style.btn),
       "aria-label": i18nKeys.previousText
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowLeft3",
@@ -685,7 +686,7 @@ export default class AttachmentViewer extends Component {
       "data-title": i18nKeys.nextText,
       "data-title-position": "right"
     }, /*#__PURE__*/React.createElement("button", {
-      className: style.btn,
+      className: cn(style.btn),
       "aria-label": i18nKeys.nextText
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowRight3",
@@ -773,8 +774,4 @@ export default class AttachmentViewer extends Component {
 
 }
 AttachmentViewer.propTypes = AttachmentViewer_propTypes;
-AttachmentViewer.defaultProps = AttachmentViewer_defaultProps; // if (__DOCS__) {
-//   AttachmentViewer.docs = {
-//     componentGroup: "Molecule"
-//   };
-// }
+AttachmentViewer.defaultProps = AttachmentViewer_defaultProps;