@zohodesk/dot 1.9.15 → 1.9.17

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

@@ -4,7 +4,7 @@ exports[`IconButton Checking the "Children" 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -27,7 +27,7 @@ exports[`IconButton eleRef prop is a function 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -45,7 +45,7 @@ exports[`IconButton rendering ally 1`] = `
     aria-label="ariaLabel"
     aria-labelledby="ariaLabelledby"
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -60,7 +60,7 @@ exports[`IconButton rendering ally 2`] = `
     aria-expanded="false"
     aria-haspopup="false"
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -73,7 +73,7 @@ exports[`IconButton rendering in ClassName 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper IconButtonClass effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -86,7 +86,7 @@ exports[`IconButton rendering in Icon 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
+      class="zd_font_icons basic icon-infoStroke fbold icon_button_center iconClass"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -108,7 +108,7 @@ exports[`IconButton rendering in dataIsHtml is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="true"
     data-selector-id="iconButton"
@@ -121,7 +121,7 @@ exports[`IconButton rendering in isDisabled is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover disabled"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -135,7 +135,7 @@ exports[`IconButton rendering in title 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -149,7 +149,7 @@ exports[`IconButton rendering isNeedEffect is False 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -162,7 +162,7 @@ exports[`IconButton rendering needButtonTag 1`] = `
 <DocumentFragment>
   <div
     aria-pressed="false"
-    class="large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -175,7 +175,7 @@ exports[`IconButton rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -188,7 +188,7 @@ exports[`IconButton rendering the hovertypes- bg 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border bgHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -201,7 +201,7 @@ exports[`IconButton rendering the hovertypes- border 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border borderHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -214,7 +214,7 @@ exports[`IconButton rendering the hovertypes- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -227,7 +227,7 @@ exports[`IconButton rendering the isActive true with palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover active hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -240,7 +240,7 @@ exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primary_active effect primary border defaultHover active hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -253,7 +253,7 @@ exports[`IconButton rendering the isActive true with palette of- primaryFilled 1
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primaryFilled_active effect primaryFilled border defaultHover active hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -266,7 +266,7 @@ exports[`IconButton rendering the palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -279,7 +279,7 @@ exports[`IconButton rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primary effect primary border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -292,7 +292,7 @@ exports[`IconButton rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primaryFilled effect primaryFilled border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -305,7 +305,7 @@ exports[`IconButton rendering the size of- large 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -318,7 +318,7 @@ exports[`IconButton rendering the size of- medium 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset medium wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset medium wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -331,7 +331,7 @@ exports[`IconButton rendering the size of- small 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset small wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset small wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -344,7 +344,7 @@ exports[`IconButton rendering the size of- xlarge 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset xlarge wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset xlarge wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -357,7 +357,7 @@ exports[`IconButton rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset xsmall wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset xsmall wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -370,7 +370,7 @@ exports[`IconButton rendering tourId 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"

package/es/Image/Image.js

@@ -24,7 +24,7 @@ export default class Image extends React.Component {
       "data-title": title,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: ` ${className} ${isCover ? style.imgFullSize : style.imgMaxFullSize} `,
+      className: `${isCover ? style.imgFullSize : style.imgMaxFullSize} ${className}`,
       onClick: onClick,
       id: htmlId,
       ref: eleRef,

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

@@ -4,7 +4,7 @@ exports[`Image -  checking  "isCover" is false 1`] = `
 <DocumentFragment>
   <img
     alt="Lamp"
-    class="  imgFullSize "
+    class="imgFullSize"
     src="https://www.w3schools.com/images/lamp.jpg"
   />
 </DocumentFragment>
@@ -14,7 +14,7 @@ exports[`Image -  rendering  "dataid" value 1`] = `
 <DocumentFragment>
   <img
     alt="Lamp"
-    class="  imgMaxFullSize "
+    class="imgMaxFullSize"
     data-id="imageData"
     data-test-id="imageData"
     src="https://www.w3schools.com/images/lamp.jpg"
@@ -26,7 +26,7 @@ exports[`Image -  rendering "Id" value 1`] = `
 <DocumentFragment>
   <img
     alt="Lamp"
-    class="  imgMaxFullSize "
+    class="imgMaxFullSize"
     id="test"
     src="https://www.w3schools.com/images/lamp.jpg"
   />
@@ -37,7 +37,7 @@ exports[`Image -  rendering "Original" value 1`] = `
 <DocumentFragment>
   <img
     alt="Lamp"
-    class="  imgMaxFullSize "
+    class="imgMaxFullSize"
     data-original="https://www.w3schools.com/images/lamp.jpg"
     src="https://www.w3schools.com/images/lamp.jpg"
   />
@@ -48,7 +48,7 @@ exports[`Image -  rendering "alt" and "src" value  1`] = `
 <DocumentFragment>
   <img
     alt="Lamp"
-    class="  imgMaxFullSize "
+    class="imgMaxFullSize"
     src="https://www.w3schools.com/images/lamp.jpg"
   />
 </DocumentFragment>
@@ -58,7 +58,7 @@ exports[`Image -  rendering "title" value 1`] = `
 <DocumentFragment>
   <img
     alt="Lamp"
-    class="  imgMaxFullSize "
+    class="imgMaxFullSize"
     data-title="ImageTest Value"
     src="https://www.w3schools.com/images/lamp.jpg"
   />
@@ -68,7 +68,7 @@ exports[`Image -  rendering "title" value 1`] = `
 exports[`Image -  rendering the default props 1`] = `
 <DocumentFragment>
   <img
-    class="  imgMaxFullSize "
+    class="imgMaxFullSize"
   />
 </DocumentFragment>
 `;

package/es/ImportantNotes/ImportantNotes.js

@@ -24,7 +24,7 @@ export default class ImportantNotes extends React.Component {
       isCover: false,
       alignBox: "row",
       align: "top",
-      className: `${style.section} ${className || ''}`
+      className: `${style.section} ${className}`
     }, iconName ? /*#__PURE__*/React.createElement(Box, {
       className: style.icon,
       align: "start"

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

@@ -3,20 +3,20 @@
 exports[`ImportantNotes rendering the children 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre    "
+        class="zd_font_icons basic icon-help-centre"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -24,7 +24,7 @@ exports[`ImportantNotes rendering the children 1`] = `
       />
     </div>
     <div
-      class="title grow basis shrinkOff"
+      class="flexible basis_zero noShrink title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -38,20 +38,20 @@ exports[`ImportantNotes rendering the children 1`] = `
 exports[`ImportantNotes rendering the className prop 1`] = `
 <DocumentFragment>
   <div
-    class="section customClass flex rowdir top"
+    class="flex row alignItems_start section customClass"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre    "
+        class="zd_font_icons basic icon-help-centre"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -65,20 +65,20 @@ exports[`ImportantNotes rendering the className prop 1`] = `
 exports[`ImportantNotes rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre    "
+        class="zd_font_icons basic icon-help-centre"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -92,20 +92,20 @@ exports[`ImportantNotes rendering the defult props 1`] = `
 exports[`ImportantNotes rendering the iconClass 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-info  customIconClass  "
+        class="zd_font_icons basic icon-info customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -119,20 +119,20 @@ exports[`ImportantNotes rendering the iconClass 1`] = `
 exports[`ImportantNotes rendering the iconName prop 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-info    "
+        class="zd_font_icons basic icon-info"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -140,7 +140,7 @@ exports[`ImportantNotes rendering the iconName prop 1`] = `
       />
     </div>
     <div
-      class="title grow basis shrinkOff"
+      class="flexible basis_zero noShrink title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -154,7 +154,7 @@ exports[`ImportantNotes rendering the iconName prop 1`] = `
 exports[`ImportantNotes rendering the iconName prop and text and children are empty 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -165,13 +165,13 @@ exports[`ImportantNotes rendering the iconName prop and text and children are em
 exports[`ImportantNotes rendering the iconName prop is null and given text value 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="title grow basis shrinkOff"
+      class="flexible basis_zero noShrink title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -185,20 +185,20 @@ exports[`ImportantNotes rendering the iconName prop is null and given text value
 exports[`ImportantNotes rendering the iconSize 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-info    "
+        class="zd_font_icons basic icon-info"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -212,20 +212,20 @@ exports[`ImportantNotes rendering the iconSize 1`] = `
 exports[`ImportantNotes rendering the isCover prop is false 1`] = `
 <DocumentFragment>
   <div
-    class="section  inflex rowdir top"
+    class="inlineFlex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre    "
+        class="zd_font_icons basic icon-help-centre"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -239,20 +239,20 @@ exports[`ImportantNotes rendering the isCover prop is false 1`] = `
 exports[`ImportantNotes rendering the isCover prop is true 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre    "
+        class="zd_font_icons basic icon-help-centre"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -266,20 +266,20 @@ exports[`ImportantNotes rendering the isCover prop is true 1`] = `
 exports[`ImportantNotes rendering the text and children prop 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre    "
+        class="zd_font_icons basic icon-help-centre"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -287,7 +287,7 @@ exports[`ImportantNotes rendering the text and children prop 1`] = `
       />
     </div>
     <div
-      class="title grow basis shrinkOff"
+      class="flexible basis_zero noShrink title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -301,20 +301,20 @@ exports[`ImportantNotes rendering the text and children prop 1`] = `
 exports[`ImportantNotes rendering the text and children prop is empty 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre    "
+        class="zd_font_icons basic icon-help-centre"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,20 +328,20 @@ exports[`ImportantNotes rendering the text and children prop is empty 1`] = `
 exports[`ImportantNotes rendering the text prop 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex rowdir top"
+    class="flex row alignItems_start section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="icon shrinkOff selfStart"
+      class="noShrink alignSelf_start icon"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-help-centre    "
+        class="zd_font_icons basic icon-help-centre"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -349,7 +349,7 @@ exports[`ImportantNotes rendering the text prop 1`] = `
       />
     </div>
     <div
-      class="title grow basis shrinkOff"
+      class="flexible basis_zero noShrink title"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"