@zohodesk/dot 1.9.18 → 1.9.19

package/es/TagWithIcon/TagWithIcon.module.css

@@ -14,7 +14,7 @@
 
 .small,
 .large {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
   height: var(--zd_size18) ;
   padding-inline: var(--zd_size6) ;
   padding-block:0 ;

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TagWithIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center wrapper grey large"
+    class="d-inline-flex d-flex-row d-items-center wrapper grey large"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/es/ToastMessage/ToastMessage.js

@@ -10,6 +10,7 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import AutoClose from "../actions/AutoClose";
+import { cn } from "@dot-system/css-utility";
 import a11yStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css'; //style
 
 import style from "./ToastMessage.module.css";
@@ -122,7 +123,7 @@ function ToastMessageUI(props) {
     "data-title": subject,
     id: titleId
   }, subject)), info ? /*#__PURE__*/React.createElement("p", {
-    className: style.alertMessage,
+    className: cn(style.alertMessage),
     "data-title": info,
     id: infoId
   }, info) : null, getInnerBottomContainer ? /*#__PURE__*/React.createElement("div", null, getInnerBottomContainer()) : null), type == 'information' && needClose ? /*#__PURE__*/React.createElement(Box, {
@@ -139,7 +140,7 @@ function ToastMessageUI(props) {
   }, /*#__PURE__*/React.createElement(Container, {
     className: style.alerttab
   }, needClose ? /*#__PURE__*/React.createElement("button", {
-    className: `${a11yStyle.buttonReset} ${style.closeIcon}`,
+    className: cn(`${a11yStyle.buttonReset} ${style.closeIcon}`),
     onClick: onClose,
     "data-id": `${dataId}_closeRight`,
     "data-test-id": `${dataId}_closeRight`
@@ -196,8 +197,4 @@ export default function ToastMessage(props) {
   }));
 }
 ToastMessage.propTypes = propTypes;
-ToastMessage.defaultProps = defaultProps; // if (__DOCS__) {
-//   ToastMessage.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+ToastMessage.defaultProps = defaultProps;

package/es/ToastMessage/ToastMessage.module.css

@@ -1,8 +1,7 @@
 .container {
+  composes: d-relative d-max-h-full from global;
   transition: all var(--zd_transition4);
   margin-block-end: var(--zd_size7) ;
-  position: relative;
-  max-height: 100% ;
   border-radius: 5px;
   box-shadow: var(--zd_bs_toastmessage_container);
   background-color: var(--zdt_toastmessage_default_bg);
@@ -38,7 +37,7 @@
 }
 
 .leftnoanimate {
-  opacity: 1;
+  composes: d-opacity-100 from global;
   transform: translateX(0) scale(1);
 }
 
@@ -49,11 +48,11 @@
 }
 
 .alertifychild {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .alertifybanner {
-  overflow: hidden;
+  composes: d-overflow-hidden from global;
 }
 
 [dir=ltr] .alertifybanner {
@@ -80,9 +79,8 @@
   font-size: var(--zd_font_size10) ;
   color: var(--zdt_toastmessage_popbutton_text);
   composes: wbreak textCap from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative d-cursor-pointer from global;
   transition: all var(--zd_transition3);
-  position: relative;
-  cursor: pointer;
 }
 
 .mainbutton {
@@ -180,17 +178,16 @@
 }
 
 .buttonText {
+  composes: d-text-center d-cursor-pointer from global;
   font-size: inherit ;
   line-height: normal;
   padding-block:0 ;
   padding-inline: var(--zd_size7) ;
-  text-align: center;
-  cursor: pointer;
 }
 
 .closeIcon,
 .closeIconPrimary {
-  position: absolute;
+  composes: d-absolute d-cursor-pointer from global;
   top: 0 ;
   z-index: 1;
   color: var(--zdt_toastmessage_closeicon);
@@ -198,7 +195,6 @@
 
 .closeIcon, .closeIconPrimary {
   padding:var(--zd_size2) ;
-  cursor: pointer;
 }
 
 [dir=ltr] .closeIcon, [dir=ltr] .closeIconPrimary {
@@ -224,9 +220,8 @@
 }
 
 .dropdown {
+  composes: d-relative d-h-full from global;
   width: var(--zd_size23) ;
-  position: relative;
-  height: 100% ;
   color: var(--zdt_toastmessage_dropdown_text);
   background: var(--zdt_toastmessage_dropdown_bg);
 }
@@ -253,15 +248,13 @@
 .message {
   padding-block: var(--zd_size10) ;
   padding-inline: var(--zd_size76) var(--zd_size20) ;
-  position: relative;
   color: var(--zdt_toastmessage_popbutton_text);
   font-size: var(--zd_font_size11) ;
   composes: dotted textCap from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative d-cursor-pointer d-m-0 from global;
   height: var(--zd_size33) ;
   transition: padding var(--zd_transition3), height var(--zd_transition3);
   border-top: 1px solid var(--zdt_toastmessage_message_border);
-  cursor: pointer;
-  margin: 0 ;
 }
 
 .messageOff {
@@ -282,7 +275,7 @@
   height: var(--zd_size29) ;
   line-height: var(--zd_size29);
   composes: rounded from '~@zohodesk/components/es/common/common.module.css';
-  text-align: center;
+  composes: d-text-center from global;
 }
 
 .successFill {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ToastMessage rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`ToastMessage rendering the defult props 1`] = `
     aria-describedby="2"
     aria-labelledby="1"
     aria-live="assertive"
-    class="flex column container leftanimate"
+    class="d-flex d-flex-col container leftanimate"
     data-id="toastMessage"
     data-selector-id="toastMessage"
     data-test-id="toastMessage"
@@ -15,31 +15,31 @@ exports[`ToastMessage rendering the defult props 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flexible basis_zero noShrink alertifychild"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 alertifychild"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize row alertifybanner"
+        class="d-flex d-h-full d-w-full d-flex-row alertifybanner"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_zero noShrink alertleft"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 alertleft"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="noShrink alertico"
+              class="d-flex-shrink-0 alertico"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -47,19 +47,19 @@ exports[`ToastMessage rendering the defult props 1`] = `
               <span />
             </div>
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex row alignItems_center"
+                class="d-flex d-flex-row d-items-center"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="flexible basis_zero noShrink alertTitle"
+                  class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 alertTitle"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
@@ -70,13 +70,13 @@ exports[`ToastMessage rendering the defult props 1`] = `
           </div>
         </div>
         <div
-          class="noShrink alertright"
+          class="d-flex-shrink-0 alertright"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize column alerttab"
+            class="d-flex d-h-full d-w-full d-flex-col alerttab"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

package/es/Upload/Upload.js

@@ -4,6 +4,7 @@ import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import Image from "../Image/Image";
+import { cn } from "@dot-system/css-utility";
 import style from "./Upload.module.css";
 export default class Upload extends React.Component {
   render() {
@@ -35,7 +36,7 @@ export default class Upload extends React.Component {
     }, /*#__PURE__*/React.createElement(React.Fragment, null, isPreview ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_attachLoading`,
       "data-test-id": `${dataId}_attachLoading`,
-      className: style.loader,
+      className: cn(style.loader),
       style: {
         width: `${progressValue}%`
       }
@@ -45,7 +46,7 @@ export default class Upload extends React.Component {
       alt: "Uploaded Image",
       dataId: `${dataId}_fileName`
     }), /*#__PURE__*/React.createElement("div", {
-      className: style.overlay,
+      className: cn(style.overlay),
       onClick: onClick
     })) : /*#__PURE__*/React.createElement(Box, {
       className: style.attachInfo,
@@ -55,9 +56,9 @@ export default class Upload extends React.Component {
       name: iconName,
       iconClass: style.fileIcon
     }), /*#__PURE__*/React.createElement("div", {
-      className: style.attachsize
+      className: cn(style.attachsize)
     }, fileSize))), typeof onRemove !== 'undefined' && onRemove != null ? /*#__PURE__*/React.createElement("span", {
-      className: style.uploadclose,
+      className: cn(style.uploadclose),
       onClick: onRemove,
       "data-id": `${dataId}_deleteUpload`,
       "data-test-id": `${dataId}_deleteUpload`
@@ -69,8 +70,4 @@ export default class Upload extends React.Component {
 
 }
 Upload.propTypes = propTypes;
-Upload.defaultProps = defaultProps; // if (__DOCS__) {
-//   Upload.docs = {
-//     componentGroup: 'Upload'
-//   };
-// }
+Upload.defaultProps = defaultProps;

package/es/Upload/Upload.module.css

@@ -1,8 +1,6 @@
 .container {
-  position: relative;
+  composes: d-relative d-align-middle d-cursor-pointer from global;
   transition: all var(--zd_transition3);
-  vertical-align: middle;
-  cursor: pointer;
   padding:var(--zd_size5) ;
   border-radius: 2px;
 }
@@ -16,7 +14,7 @@
 }
 
 .overlay {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
   background-color: var(--zdt_upload_overlay_bg);
@@ -43,12 +41,12 @@
 }
 
 .preview {
+  composes: d-cursor-default from global;
   opacity: 0.4;
-  cursor: default;
 }
 
 .loader {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: calc( var(--zd_size1) * -1 ) ;
   height: var(--zd_size2) ;
   width: 0% ;
@@ -72,8 +70,7 @@
 }
 
 .uploadimage {
-  width: 100% ;
-  height: 100% ;
+  composes: d-size-full from global;
 }
 
 .attachInfo {
@@ -91,7 +88,7 @@
   padding-inline:0 ;
   letter-spacing: 1px;
   composes: dotted from "~@zohodesk/components/es/common/common.module.css";
-  text-transform: uppercase;
+  composes: d-uppercase from global;
 }
 
 .light .attachsize {
@@ -103,13 +100,12 @@
 }
 
 .uploadclose {
+  composes: d-absolute d-text-center from global;
   height: var(--zd_size12) ;
   width: var(--zd_size12) ;
   top: 0 ;
-  position: absolute;
   line-height: 0.8333;
   font-size: var(--zd_font_size12) ;
-  text-align: center;
 }
 
 [dir=ltr] .uploadclose {
@@ -140,8 +136,7 @@
 
 .uploadclose,
 .overlay {
-  opacity: 0;
-  visibility: hidden;
+  composes: d-invisible d-opacity-0 from global;
   transition: var(--zd_transition3);
 }
 

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Upload rendering the dataId prop with isPreview isPreviewType are true  1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium preview"
+    class="d-inline-flex d-flex-col container light medium preview"
     data-id="TestdataId"
     data-selector-id="upload"
     data-test-id="TestdataId"
@@ -29,7 +29,7 @@ exports[`Upload rendering the dataId prop with isPreview isPreviewType are true
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold"
+        class="zd_font_icons ff icon-close-e basic d-inline-block d-align-middle d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -42,7 +42,7 @@ exports[`Upload rendering the dataId prop with isPreview isPreviewType are true
 exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium preview"
+    class="d-inline-flex d-flex-col container light medium preview"
     data-id="TestdataId"
     data-selector-id="upload"
     data-test-id="TestdataId"
@@ -53,7 +53,7 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
       data-test-id="TestdataId_attachLoading"
     />
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="TestdataId_openNewTab"
       data-selector-id="box"
       data-test-id="TestdataId_openNewTab"
@@ -69,7 +69,7 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold"
+        class="zd_font_icons ff icon-close-e basic d-inline-block d-align-middle d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -82,13 +82,13 @@ exports[`Upload rendering the dataId prop with isPreviewType is false 1`] = `
 exports[`Upload rendering the dataSelectorId prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="selectorId"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -104,13 +104,13 @@ exports[`Upload rendering the dataSelectorId prop 1`] = `
 exports[`Upload rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -126,13 +126,13 @@ exports[`Upload rendering the defult props 1`] = `
 exports[`Upload rendering the fileSize prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -150,20 +150,20 @@ exports[`Upload rendering the fileSize prop 1`] = `
 exports[`Upload rendering the iconName prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fileIcon"
+        class="zd_font_icons ff icon-close-e basic d-inline-block d-align-middle fileIcon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -179,7 +179,7 @@ exports[`Upload rendering the iconName prop 1`] = `
 exports[`Upload rendering the imgSrc prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -201,7 +201,7 @@ exports[`Upload rendering the imgSrc prop 1`] = `
 exports[`Upload rendering the isPreview prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium preview"
+    class="d-inline-flex d-flex-col container light medium preview"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -212,7 +212,7 @@ exports[`Upload rendering the isPreview prop 1`] = `
       data-test-id="upload_attachLoading"
     />
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -228,13 +228,13 @@ exports[`Upload rendering the isPreview prop 1`] = `
 exports[`Upload rendering the isPreview prop is false 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -250,13 +250,13 @@ exports[`Upload rendering the isPreview prop is false 1`] = `
 exports[`Upload rendering the isPreviewType false prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -272,7 +272,7 @@ exports[`Upload rendering the isPreviewType false prop 1`] = `
 exports[`Upload rendering the isPreviewType true prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -293,13 +293,13 @@ exports[`Upload rendering the isPreviewType true prop 1`] = `
 exports[`Upload rendering the onRemove prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -315,7 +315,7 @@ exports[`Upload rendering the onRemove prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-close-e fbold"
+        class="zd_font_icons ff icon-close-e basic d-inline-block d-align-middle d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,13 +328,13 @@ exports[`Upload rendering the onRemove prop 1`] = `
 exports[`Upload rendering the palette of - light 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -350,13 +350,13 @@ exports[`Upload rendering the palette of - light 1`] = `
 exports[`Upload rendering the palette of - night 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container night medium"
+    class="d-inline-flex d-flex-col container night medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -372,7 +372,7 @@ exports[`Upload rendering the palette of - night 1`] = `
 exports[`Upload rendering the progressValue prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium preview"
+    class="d-inline-flex d-flex-col container light medium preview"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
@@ -384,7 +384,7 @@ exports[`Upload rendering the progressValue prop 1`] = `
       style="width: 90%;"
     />
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -400,13 +400,13 @@ exports[`Upload rendering the progressValue prop 1`] = `
 exports[`Upload rendering the size of - medium 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -422,13 +422,13 @@ exports[`Upload rendering the size of - medium 1`] = `
 exports[`Upload rendering the size of - small 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light small"
+    class="d-inline-flex d-flex-col container light small"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"
@@ -444,14 +444,14 @@ exports[`Upload rendering the size of - small 1`] = `
 exports[`Upload rendering the tooltip prop 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex column container light medium"
+    class="d-inline-flex d-flex-col container light medium"
     data-id="upload"
     data-selector-id="upload"
     data-test-id="upload"
     data-title="Tooltip"
   >
     <div
-      class="noShrink attachInfo"
+      class="d-flex-shrink-0 attachInfo"
       data-id="upload_openNewTab"
       data-selector-id="box"
       data-test-id="upload_openNewTab"