@zohodesk/dot 1.9.18 → 1.9.20

package/lib/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlertHeader renders falls back when neither iconName nor matching iconType is available 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -12,19 +12,19 @@ exports[`AlertHeader renders falls back when neither iconName nor matching iconT
       class="iconContainer"
     />
     <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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -42,7 +42,7 @@ exports[`AlertHeader renders falls back when neither iconName nor matching iconT
 exports[`AlertHeader renders iconName is provided 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -52,26 +52,26 @@ exports[`AlertHeader renders iconName is provided 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -89,7 +89,7 @@ exports[`AlertHeader renders iconName is provided 1`] = `
 exports[`AlertHeader renders iconType and iconSize is fales 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -99,26 +99,26 @@ exports[`AlertHeader renders iconType and iconSize is fales 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -136,7 +136,7 @@ exports[`AlertHeader renders iconType and iconSize is fales 1`] = `
 exports[`AlertHeader renders iconType and iconSize is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -146,7 +146,7 @@ exports[`AlertHeader renders iconType and iconSize is true 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -154,19 +154,19 @@ exports[`AlertHeader renders iconType and iconSize is true 1`] = `
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -184,7 +184,7 @@ exports[`AlertHeader renders iconType and iconSize is true 1`] = `
 exports[`AlertHeader renders with breakChildren prop 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -194,26 +194,26 @@ exports[`AlertHeader renders with breakChildren prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row wrap alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -223,7 +223,7 @@ exports[`AlertHeader renders with breakChildren prop 1`] = `
           />
         </div>
         <div
-          class="flexible basis_auto noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-auto d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -241,7 +241,7 @@ exports[`AlertHeader renders with breakChildren prop 1`] = `
 exports[`AlertHeader renders with children content 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -251,26 +251,26 @@ exports[`AlertHeader renders with children content 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -280,7 +280,7 @@ exports[`AlertHeader renders with children content 1`] = `
           />
         </div>
         <div
-          class="flexible basis_auto noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-auto d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -298,7 +298,7 @@ exports[`AlertHeader renders with children content 1`] = `
 exports[`AlertHeader renders with custom iconClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -308,26 +308,26 @@ exports[`AlertHeader renders with custom iconClass 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger custom-icon-class"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger custom-icon-class"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -345,7 +345,7 @@ exports[`AlertHeader renders with custom iconClass 1`] = `
 exports[`AlertHeader renders with dataId prop 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertDataId_alertHeader"
     data-selector-id="container"
     data-test-id="alertDataId_alertHeader"
@@ -355,26 +355,26 @@ exports[`AlertHeader renders with dataId prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -392,7 +392,7 @@ exports[`AlertHeader renders with dataId prop 1`] = `
 exports[`AlertHeader renders with default props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -402,26 +402,26 @@ exports[`AlertHeader renders with default props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -439,7 +439,7 @@ exports[`AlertHeader renders with default props 1`] = `
 exports[`AlertHeader renders with iconType - alert 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -449,26 +449,26 @@ exports[`AlertHeader renders with iconType - alert 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -486,7 +486,7 @@ exports[`AlertHeader renders with iconType - alert 1`] = `
 exports[`AlertHeader renders with iconType - delete 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -496,26 +496,26 @@ exports[`AlertHeader renders with iconType - delete 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-ic-social_delete-20 iconStyle icon_delete text_danger"
+        class="zd_font_icons ff icon-ic-social_delete-20 basic d-inline-block d-align-middle iconStyle icon_delete text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -533,7 +533,7 @@ exports[`AlertHeader renders with iconType - delete 1`] = `
 exports[`AlertHeader renders with iconType - remoteAssist 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -543,26 +543,26 @@ exports[`AlertHeader renders with iconType - remoteAssist 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-task-demo iconStyle icon_remoteAssist text_danger"
+        class="zd_font_icons ff icon-task-demo basic d-inline-block d-align-middle iconStyle icon_remoteAssist text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -580,7 +580,7 @@ exports[`AlertHeader renders with iconType - remoteAssist 1`] = `
 exports[`AlertHeader renders with iconType - splitTicket 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -590,26 +590,26 @@ exports[`AlertHeader renders with iconType - splitTicket 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-split_new iconStyle icon_splitTicket text_danger"
+        class="zd_font_icons ff icon-split_new basic d-inline-block d-align-middle iconStyle icon_splitTicket text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -627,7 +627,7 @@ exports[`AlertHeader renders with iconType - splitTicket 1`] = `
 exports[`AlertHeader renders with iconType - update 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -637,26 +637,26 @@ exports[`AlertHeader renders with iconType - update 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-update iconStyle icon_update text_danger"
+        class="zd_font_icons ff icon-update basic d-inline-block d-align-middle iconStyle icon_update text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -674,25 +674,25 @@ exports[`AlertHeader renders with iconType - update 1`] = `
 exports[`AlertHeader renders with needIcon false 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
   >
     <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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -710,7 +710,7 @@ exports[`AlertHeader renders with needIcon false 1`] = `
 exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -720,26 +720,26 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -754,14 +754,14 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       </div>
     </div>
     <div
-      class="noShrink"
+      class="d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <button
         aria-pressed="false"
-        class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+        class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
         data-id="alertHeader_close"
         data-ishtml="false"
         data-selector-id="iconButton"
@@ -770,7 +770,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross icon_button_center"
+          class="zd_font_icons ff icon-cross basic d-inline-block d-align-middle icon_button_center"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -785,7 +785,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
 exports[`AlertHeader renders with palette - danger 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -795,26 +795,26 @@ exports[`AlertHeader renders with palette - danger 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -832,7 +832,7 @@ exports[`AlertHeader renders with palette - danger 1`] = `
 exports[`AlertHeader renders with palette - default 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -842,26 +842,26 @@ exports[`AlertHeader renders with palette - default 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_default"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_default"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -879,7 +879,7 @@ exports[`AlertHeader renders with palette - default 1`] = `
 exports[`AlertHeader renders with palette - primary 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container primary"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container primary"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -889,26 +889,26 @@ exports[`AlertHeader renders with palette - primary 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_primary"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_primary"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -926,7 +926,7 @@ exports[`AlertHeader renders with palette - primary 1`] = `
 exports[`AlertHeader renders with title 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -936,26 +936,26 @@ exports[`AlertHeader renders with title 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
+        class="zd_font_icons ff icon-exclamation-thincircle basic d-inline-block d-align-middle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </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 fullSize row alignItems_center"
+        class="d-flex d-h-full d-w-full d-flex-row d-items-center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"