npm - @zohodesk/dot - Versions diffs - 1.9.15 → 1.9.17 - Mend

@zohodesk/dot 1.9.15 → 1.9.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (404) hide show

package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap CHANGED Viewed

@@ -10,33 +10,33 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex cover rowdir"
+      class="flex fullSize row"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
     >
       <div
-        class="flex cover coldir scrollnone"
+        class="flex fullSize column scroll_hidden"
         data-id="containerComponent"
         data-scroll-palette="dark"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrinkOff"
+          class="noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="header flex cover rowdir between"
+            class="flex fullSize row justifyContent_spaceBetween header"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
             tabindex="0"
           >
             <div
-              class="title shrinkOn"
+              class="shrink title"
               data-id="attachName"
               data-selector-id="box"
               data-test-id="attachName"
@@ -46,7 +46,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
               slack0.jpg
             </div>
             <div
-              class="count grow basis shrinkOff"
+              class="flexible basis_zero noShrink count"
               data-id="attachCountContainer"
               data-selector-id="box"
               data-test-id="attachCountContainer"
@@ -54,13 +54,13 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
               1/7
             </div>
             <div
-              class="menuBar shrinkOff"
+              class="noShrink menuBar"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="inflex rowdir wrap"
+                class="inlineFlex row wrap"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -69,7 +69,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   class="menu"
                 >
                   <a
-                    class="container  "
+                    class="container"
                     data-id="AttachmentViewer_downloadAttach"
                     data-test-id="AttachmentViewer_downloadAttach"
                     download="slack0.jpg"
@@ -79,7 +79,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <div
                       aria-pressed="false"
-                      class="large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                      class="inlineFlex column alignItems_center justifyContent_center large wrapper menuIcon effect default border borderHover hoverEffect"
                       data-id="iconContainer"
                       data-ishtml="false"
                       data-selector-id="iconButton"
@@ -87,7 +87,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download   icon_button_center  "
+                        class="zd_font_icons basic icon-download icon_button_center"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -103,7 +103,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 >
                   <button
                     aria-pressed="false"
-                    class="buttonReset large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper menuIcon effect default border borderHover hoverEffect"
                     data-id="iconContainer"
                     data-ishtml="false"
                     data-selector-id="iconButton"
@@ -111,7 +111,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-cross   icon_button_center  "
+                      class="zd_font_icons basic icon-cross icon_button_center"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -124,7 +124,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -132,13 +132,13 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
           tabindex="0"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="arrowBox  nrmlArrowBox hidden shrinkOff"
+              class="noShrink arrowBox nrmlArrowBox hidden"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -149,7 +149,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-arrow-left3 fbold arrow  rtl "
+                  class="zd_font_icons rtl basic icon-arrow-left3 fbold arrow"
                   data-id="leftAttachNav"
                   data-selector-id="fontIcon"
                   data-test-id="leftAttachNav"
@@ -158,14 +158,14 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
             </div>
             <div
               aria-describedby="1"
-              class="previewBox grow basis shrinkOff scrollboth"
+              class="flexible basis_zero noShrink scroll_both previewBox"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
               tabindex="0"
             >
               <div
-                class="imgBox flex cover rowdir both"
+                class="flex fullSize row alignItems_center justifyContent_center imgBox"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -173,7 +173,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 style="transform: translateX(0%); opacity: 1;"
               >
                 <div
-                  class="imgRef shrinkOff"
+                  class="noShrink imgRef"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
@@ -192,7 +192,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
               </div>
             </div>
             <div
-              class="arrowBox  nrmlArrowBox  shrinkOff"
+              class="noShrink arrowBox nrmlArrowBox"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -203,7 +203,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-arrow-right3 fbold arrow  rtl "
+                  class="zd_font_icons rtl basic icon-arrow-right3 fbold arrow"
                   data-id="rightAttachNav"
                   data-selector-id="fontIcon"
                   data-test-id="rightAttachNav"
@@ -213,31 +213,31 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
           </div>
         </div>
         <div
-          class="footer footerHeight  shrinkOff"
+          class="noShrink footer footerHeight"
           data-id="AttachmentViewer_attachPreviewFooter"
           data-selector-id="box"
           data-test-id="AttachmentViewer_attachPreviewFooter"
         >
           <div
-            class="footerHeight flex cover rowdir vCenter"
+            class="flex fullSize row alignItems_center footerHeight"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="listContainer flex cover rowdir vCenter scrollx"
+                class="flex fullSize row alignItems_center scroll_horizontal listContainer"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="imgItem selected  shrinkOff"
+                  class="noShrink imgItem selected"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -254,7 +254,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -271,7 +271,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -288,7 +288,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -305,7 +305,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -322,7 +322,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -339,7 +339,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  previewIconDiv shrinkOff"
+                  class="noShrink imgItem previewIconDiv"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -347,7 +347,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 >
                   <i
                     aria-hidden="true"
-                    class="zd_font_icons basic icon-fileMp3  prevFooterIcon  "
+                    class="zd_font_icons basic icon-fileMp3 prevFooterIcon"
                     data-id="fontIcon"
                     data-selector-id="fontIcon"
                     data-test-id="fontIcon"
@@ -360,7 +360,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         </div>
         <button
           aria-pressed="false"
-          class="buttonReset large wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
+          class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper button effect default border borderHover hoverEffect"
           data-id="attachToggle"
           data-ishtml="false"
           data-selector-id="iconButton"
@@ -368,7 +368,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
+            class="zd_font_icons basic icon-hideTab icon_button_center thumpIcon thumpIconActive"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -389,33 +389,33 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex cover rowdir"
+      class="flex fullSize row"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
     >
       <div
-        class="flex cover coldir scrollnone"
+        class="flex fullSize column scroll_hidden"
         data-id="containerComponent"
         data-scroll-palette="dark"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrinkOff"
+          class="noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="header flex cover rowdir between"
+            class="flex fullSize row justifyContent_spaceBetween header"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
             tabindex="0"
           >
             <div
-              class="title shrinkOn"
+              class="shrink title"
               data-id="attachName"
               data-selector-id="box"
               data-test-id="attachName"
@@ -425,7 +425,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
               slack0.jpg
             </div>
             <div
-              class="count grow basis shrinkOff"
+              class="flexible basis_zero noShrink count"
               data-id="attachCountContainer"
               data-selector-id="box"
               data-test-id="attachCountContainer"
@@ -433,13 +433,13 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
               1/7
             </div>
             <div
-              class="menuBar shrinkOff"
+              class="noShrink menuBar"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="inflex rowdir wrap"
+                class="inlineFlex row wrap"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -462,7 +462,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   class="menu"
                 >
                   <a
-                    class="container  "
+                    class="container"
                     data-id="AttachmentViewer_downloadAttach"
                     data-test-id="AttachmentViewer_downloadAttach"
                     download="slack0.jpg"
@@ -472,7 +472,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   >
                     <div
                       aria-pressed="false"
-                      class="large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                      class="inlineFlex column alignItems_center justifyContent_center large wrapper menuIcon effect default border borderHover hoverEffect"
                       data-id="iconContainer"
                       data-ishtml="false"
                       data-selector-id="iconButton"
@@ -480,7 +480,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download   icon_button_center  "
+                        class="zd_font_icons basic icon-download icon_button_center"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -496,7 +496,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                 >
                   <button
                     aria-pressed="false"
-                    class="buttonReset large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper menuIcon effect default border borderHover hoverEffect"
                     data-id="iconContainer"
                     data-ishtml="false"
                     data-selector-id="iconButton"
@@ -504,7 +504,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-cross   icon_button_center  "
+                      class="zd_font_icons basic icon-cross icon_button_center"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -517,7 +517,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -525,13 +525,13 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
           tabindex="0"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="arrowBox  nrmlArrowBox hidden shrinkOff"
+              class="noShrink arrowBox nrmlArrowBox hidden"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -542,7 +542,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-arrow-left3 fbold arrow  rtl "
+                  class="zd_font_icons rtl basic icon-arrow-left3 fbold arrow"
                   data-id="leftAttachNav"
                   data-selector-id="fontIcon"
                   data-test-id="leftAttachNav"
@@ -551,14 +551,14 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
             </div>
             <div
               aria-describedby="1"
-              class="previewBox grow basis shrinkOff scrollboth"
+              class="flexible basis_zero noShrink scroll_both previewBox"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
               tabindex="0"
             >
               <div
-                class="imgBox flex cover rowdir both"
+                class="flex fullSize row alignItems_center justifyContent_center imgBox"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -566,7 +566,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                 style="transform: translateX(0%); opacity: 1;"
               >
                 <div
-                  class="imgRef shrinkOff"
+                  class="noShrink imgRef"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
@@ -585,7 +585,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
               </div>
             </div>
             <div
-              class="arrowBox  nrmlArrowBox  shrinkOff"
+              class="noShrink arrowBox nrmlArrowBox"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -596,7 +596,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-arrow-right3 fbold arrow  rtl "
+                  class="zd_font_icons rtl basic icon-arrow-right3 fbold arrow"
                   data-id="rightAttachNav"
                   data-selector-id="fontIcon"
                   data-test-id="rightAttachNav"
@@ -606,31 +606,31 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
           </div>
         </div>
         <div
-          class="footer footerHeight  shrinkOff"
+          class="noShrink footer footerHeight"
           data-id="AttachmentViewer_attachPreviewFooter"
           data-selector-id="box"
           data-test-id="AttachmentViewer_attachPreviewFooter"
         >
           <div
-            class="footerHeight flex cover rowdir vCenter"
+            class="flex fullSize row alignItems_center footerHeight"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="listContainer flex cover rowdir vCenter scrollx"
+                class="flex fullSize row alignItems_center scroll_horizontal listContainer"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="imgItem selected  shrinkOff"
+                  class="noShrink imgItem selected"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -647,7 +647,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -664,7 +664,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -681,7 +681,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -698,7 +698,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -715,7 +715,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -732,7 +732,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  previewIconDiv shrinkOff"
+                  class="noShrink imgItem previewIconDiv"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -740,7 +740,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
                 >
                   <i
                     aria-hidden="true"
-                    class="zd_font_icons basic icon-fileMp3  prevFooterIcon  "
+                    class="zd_font_icons basic icon-fileMp3 prevFooterIcon"
                     data-id="fontIcon"
                     data-selector-id="fontIcon"
                     data-test-id="fontIcon"
@@ -753,7 +753,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
         </div>
         <button
           aria-pressed="false"
-          class="buttonReset large wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
+          class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper button effect default border borderHover hoverEffect"
           data-id="attachToggle"
           data-ishtml="false"
           data-selector-id="iconButton"
@@ -761,7 +761,7 @@ exports[`AttachmentViewer rendering with renderCustomIcons 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
+            class="zd_font_icons basic icon-hideTab icon_button_center thumpIcon thumpIconActive"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -782,33 +782,33 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex cover rowdir"
+      class="flex fullSize row"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
     >
       <div
-        class="flex cover coldir scrollnone"
+        class="flex fullSize column scroll_hidden"
         data-id="containerComponent"
         data-scroll-palette="dark"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrinkOff"
+          class="noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="header flex cover rowdir between"
+            class="flex fullSize row justifyContent_spaceBetween header"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
             tabindex="0"
           >
             <div
-              class="title shrinkOn"
+              class="shrink title"
               data-id="attachName"
               data-selector-id="box"
               data-test-id="attachName"
@@ -818,7 +818,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
               slack0.jpg
             </div>
             <div
-              class="count grow basis shrinkOff"
+              class="flexible basis_zero noShrink count"
               data-id="attachCountContainer"
               data-selector-id="box"
               data-test-id="attachCountContainer"
@@ -826,13 +826,13 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
               1/7
             </div>
             <div
-              class="menuBar shrinkOff"
+              class="noShrink menuBar"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="inflex rowdir wrap"
+                class="inlineFlex row wrap"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -841,7 +841,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   class="menu"
                 >
                   <a
-                    class="container  "
+                    class="container"
                     data-id="AttachmentViewer_downloadAttach"
                     data-test-id="AttachmentViewer_downloadAttach"
                     download="slack0.jpg"
@@ -851,7 +851,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   >
                     <div
                       aria-pressed="false"
-                      class="large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                      class="inlineFlex column alignItems_center justifyContent_center large wrapper menuIcon effect default border borderHover hoverEffect"
                       data-id="iconContainer"
                       data-ishtml="false"
                       data-selector-id="iconButton"
@@ -859,7 +859,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download   icon_button_center  "
+                        class="zd_font_icons basic icon-download icon_button_center"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -875,7 +875,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                 >
                   <button
                     aria-pressed="false"
-                    class="buttonReset large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper menuIcon effect default border borderHover hoverEffect"
                     data-id="iconContainer"
                     data-ishtml="false"
                     data-selector-id="iconButton"
@@ -883,7 +883,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-cross   icon_button_center  "
+                      class="zd_font_icons basic icon-cross icon_button_center"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -896,7 +896,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -904,13 +904,13 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
           tabindex="0"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="arrowBox  nrmlArrowBox hidden shrinkOff"
+              class="noShrink arrowBox nrmlArrowBox hidden"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -921,7 +921,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-arrow-left3 fbold arrow  rtl "
+                  class="zd_font_icons rtl basic icon-arrow-left3 fbold arrow"
                   data-id="leftAttachNav"
                   data-selector-id="fontIcon"
                   data-test-id="leftAttachNav"
@@ -930,14 +930,14 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
             </div>
             <div
               aria-describedby="1"
-              class="previewBox grow basis shrinkOff scrollboth"
+              class="flexible basis_zero noShrink scroll_both previewBox"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
               tabindex="0"
             >
               <div
-                class="imgBox flex cover rowdir both"
+                class="flex fullSize row alignItems_center justifyContent_center imgBox"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -945,7 +945,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                 style="transform: translateX(0%); opacity: 1;"
               >
                 <div
-                  class="imgRef shrinkOff"
+                  class="noShrink imgRef"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
@@ -969,7 +969,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
               </div>
             </div>
             <div
-              class="arrowBox  nrmlArrowBox  shrinkOff"
+              class="noShrink arrowBox nrmlArrowBox"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -980,7 +980,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-arrow-right3 fbold arrow  rtl "
+                  class="zd_font_icons rtl basic icon-arrow-right3 fbold arrow"
                   data-id="rightAttachNav"
                   data-selector-id="fontIcon"
                   data-test-id="rightAttachNav"
@@ -990,31 +990,31 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
           </div>
         </div>
         <div
-          class="footer footerHeight  shrinkOff"
+          class="noShrink footer footerHeight"
           data-id="AttachmentViewer_attachPreviewFooter"
           data-selector-id="box"
           data-test-id="AttachmentViewer_attachPreviewFooter"
         >
           <div
-            class="footerHeight flex cover rowdir vCenter"
+            class="flex fullSize row alignItems_center footerHeight"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="listContainer flex cover rowdir vCenter scrollx"
+                class="flex fullSize row alignItems_center scroll_horizontal listContainer"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="imgItem selected  shrinkOff"
+                  class="noShrink imgItem selected"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -1031,7 +1031,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -1048,7 +1048,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -1065,7 +1065,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -1082,7 +1082,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -1099,7 +1099,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem   shrinkOff"
+                  class="noShrink imgItem"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -1116,7 +1116,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  previewIconDiv shrinkOff"
+                  class="noShrink imgItem previewIconDiv"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -1124,7 +1124,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
                 >
                   <i
                     aria-hidden="true"
-                    class="zd_font_icons basic icon-fileMp3  prevFooterIcon  "
+                    class="zd_font_icons basic icon-fileMp3 prevFooterIcon"
                     data-id="fontIcon"
                     data-selector-id="fontIcon"
                     data-test-id="fontIcon"
@@ -1137,7 +1137,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
         </div>
         <button
           aria-pressed="false"
-          class="buttonReset large wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
+          class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper button effect default border borderHover hoverEffect"
           data-id="attachToggle"
           data-ishtml="false"
           data-selector-id="iconButton"
@@ -1145,7 +1145,7 @@ exports[`AttachmentViewer rendering with renderCustomImagePreviewElement 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
+            class="zd_font_icons basic icon-hideTab icon_button_center thumpIcon thumpIconActive"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"