@zohodesk/components 1.6.20 → 1.6.22

package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap

@@ -4,8 +4,8 @@ exports[`CheckBox component Should be disable 1`] = `
 <DocumentFragment>
   <div
     aria-checked="true"
-    class="container disabled  
-        checkedprimary   flex rowdir vCenter"
+    class="flex row alignItems_center container disabled  
+        checkedprimary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -13,7 +13,7 @@ exports[`CheckBox component Should be disable 1`] = `
     tabindex="-1"
   >
     <div
-      class="boxContainer  medium  filled disabled shrinkOff"
+      class="noShrink boxContainer  medium filled disabled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -35,7 +35,7 @@ exports[`CheckBox component Should be disable 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick  disabled"
+          class="tick mediumtick  disabled "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -47,7 +47,7 @@ exports[`CheckBox component Should be disable 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -56,7 +56,7 @@ exports[`CheckBox component Should be disable 1`] = `
         class="label title medium disable font_default
           dotted cursor 
                                  
-                                disabled  "
+                                disabled "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -73,8 +73,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container readonly  
-           inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container readonly"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -82,7 +81,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
     tabindex="-1"
   >
     <div
-      class="boxContainer  medium  filled disabled shrinkOff"
+      class="noShrink boxContainer  medium filled disabled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -117,8 +116,7 @@ exports[`CheckBox component Should be render ID 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="checkBoxId"
     data-test-id="checkBox"
@@ -126,7 +124,7 @@ exports[`CheckBox component Should be render ID 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,7 +153,7 @@ exports[`CheckBox component Should be render ID 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -164,7 +162,7 @@ exports[`CheckBox component Should be render ID 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -182,8 +180,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -191,7 +188,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -226,8 +223,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="dataSelectorIdCheck"
     data-test-id="checkBox"
@@ -235,7 +231,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -270,8 +266,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container disabled  
-           flex rowdir vCenter"
+    class="flex row alignItems_center container disabled"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -280,7 +275,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
     tabindex="-1"
   >
     <div
-      class="boxContainer  medium  filled disabled shrinkOff"
+      class="noShrink boxContainer  medium filled disabled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -308,7 +303,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -317,7 +312,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
         class="label title medium disable font_default
           dotted cursor 
                                  
-                                disabled  "
+                                disabled "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -334,8 +329,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -343,7 +337,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -378,8 +372,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -387,7 +380,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -422,8 +415,7 @@ exports[`CheckBox component Should be render name 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -431,7 +423,7 @@ exports[`CheckBox component Should be render name 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -467,8 +459,7 @@ exports[`CheckBox component Should be render text 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -476,7 +467,7 @@ exports[`CheckBox component Should be render text 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -504,7 +495,7 @@ exports[`CheckBox component Should be render text 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -513,7 +504,7 @@ exports[`CheckBox component Should be render text 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -530,8 +521,7 @@ exports[`CheckBox component Should be render title 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -540,7 +530,7 @@ exports[`CheckBox component Should be render title 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -568,7 +558,7 @@ exports[`CheckBox component Should be render title 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -577,7 +567,7 @@ exports[`CheckBox component Should be render title 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -594,8 +584,7 @@ exports[`CheckBox component Should be render with the basic set of default props
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -603,7 +592,7 @@ exports[`CheckBox component Should be render with the basic set of default props
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -638,8 +627,8 @@ exports[`CheckBox component Should render active - danger 1`] = `
 <DocumentFragment>
   <div
     aria-checked="true"
-    class="container pointer danger 
-        checkeddanger   flex rowdir vCenter"
+    class="flex row alignItems_center container pointer danger 
+        checkeddanger"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -647,7 +636,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -669,7 +658,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -681,7 +670,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -690,7 +679,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
         class="label title medium default font_default
           dotted cursor activedangerLabel
                                 checkeddangerLabel 
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -707,8 +696,8 @@ exports[`CheckBox component Should render active - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="true"
-    class="container pointer primary 
-        checkedprimary   flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary 
+        checkedprimary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -716,7 +705,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -738,7 +727,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -750,7 +739,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -759,7 +748,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
         class="label title medium default font_default
           dotted cursor activeprimaryLabel
                                 checkedprimaryLabel 
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -776,8 +765,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -785,7 +773,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -813,7 +801,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -822,7 +810,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -839,8 +827,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -848,7 +835,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -876,7 +863,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -885,7 +872,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
         class="label title large default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -902,8 +889,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -911,7 +897,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -939,7 +925,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -948,7 +934,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -965,8 +951,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -974,7 +959,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1002,7 +987,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1011,7 +996,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
         class="label title medium default font_primary
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1028,8 +1013,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1037,7 +1021,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1065,7 +1049,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1074,7 +1058,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
         class="label title small default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1091,8 +1075,8 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
 <DocumentFragment>
   <div
     aria-checked="true"
-    class="container pointer danger 
-        checkeddanger   flex rowdir vCenter"
+    class="flex row alignItems_center container pointer danger 
+        checkeddanger"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1100,7 +1084,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1122,7 +1106,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1134,7 +1118,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1143,7 +1127,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
         class="label title medium default font_default
           dotted cursor activedangerLabel
                                 checkeddangerLabel 
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1160,8 +1144,8 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
 <DocumentFragment>
   <div
     aria-checked="true"
-    class="container pointer primary 
-        checkedprimary   flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary 
+        checkedprimary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1169,7 +1153,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1191,7 +1175,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1203,7 +1187,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1212,7 +1196,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
         class="label title medium default font_default
           dotted cursor activeprimaryLabel
                                 checkedprimaryLabel 
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1229,8 +1213,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1238,7 +1221,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer withSecondaryText medium  filled  shrinkOff selfStart"
+      class="noShrink alignSelf_start boxContainer withSecondaryText medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1266,7 +1249,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1275,7 +1258,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1298,8 +1281,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1307,7 +1289,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1335,7 +1317,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1344,7 +1326,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
         class="label title medium danger font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1361,8 +1343,7 @@ exports[`CheckBox component Should render size - default 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1370,7 +1351,7 @@ exports[`CheckBox component Should render size - default 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1398,7 +1379,7 @@ exports[`CheckBox component Should render size - default 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1407,7 +1388,7 @@ exports[`CheckBox component Should render size - default 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1424,8 +1405,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1433,7 +1413,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1461,7 +1441,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1470,7 +1450,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
         class="label title medium mandatory font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1487,8 +1467,8 @@ exports[`CheckBox component Should render size - medium 1`] = `
 <DocumentFragment>
   <div
     aria-checked="true"
-    class="container pointer primary 
-        checkedprimary   inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary 
+        checkedprimary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1496,7 +1476,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1518,7 +1498,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1537,8 +1517,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1546,7 +1525,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1574,7 +1553,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1583,7 +1562,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
         class="label title medium primary font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1600,8 +1579,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1609,7 +1587,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1637,7 +1615,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1646,7 +1624,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
         class="label title medium secondary font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1663,8 +1641,8 @@ exports[`CheckBox component Should render size - small 1`] = `
 <DocumentFragment>
   <div
     aria-checked="true"
-    class="container pointer primary 
-        checkedprimary   inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary 
+        checkedprimary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1672,7 +1650,7 @@ exports[`CheckBox component Should render size - small 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  small  filled  shrinkOff"
+      class="noShrink boxContainer  small filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1694,7 +1672,7 @@ exports[`CheckBox component Should render size - small 1`] = `
           />
         </svg>
         <svg
-          class="tick smalltick  "
+          class="tick smalltick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1716,8 +1694,8 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     aria-hidden="false"
     aria-label="ariaLabelCheckBox"
     aria-labelledby="ariaLabelledbyCheckBox"
-    class="container pointer primary 
-        checkedprimary   inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary 
+        checkedprimary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1725,7 +1703,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1747,7 +1725,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1769,8 +1747,8 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     aria-hidden="true"
     aria-label="ariaLabelCheckBox"
     aria-labelledby="ariaLabelledbyCheckBox"
-    class="container pointer primary 
-        checkedprimary   inflex rowdir vCenter"
+    class="inlineFlex row alignItems_center container pointer primary 
+        checkedprimary"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1778,7 +1756,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     tabindex="-1"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1800,7 +1778,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1819,8 +1797,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
-    class="container pointer primary 
-           flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary"
     data-id="checkBox"
     data-props="true"
     data-selector-id="container"
@@ -1829,7 +1806,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium  filled  shrinkOff"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1857,14 +1834,14 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <label
         class="label title medium default font_default
-          dotted cursor checkBoxCustomClass "
+          dotted cursor checkBoxCustomClass"
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1881,8 +1858,8 @@ exports[`CheckBox component rendering the Custom class 1`] = `
 <DocumentFragment>
   <div
     aria-checked="true"
-    class="container pointer primary 
-        checkedprimary  customCheckBoxClass flex rowdir vCenter"
+    class="flex row alignItems_center container pointer primary 
+        checkedprimary  customCheckBoxClass"
     data-id="checkBox"
     data-selector-id="container"
     data-test-id="checkBox"
@@ -1890,7 +1867,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
     tabindex="0"
   >
     <div
-      class="boxContainer  medium customCBoxSizeClass filled  shrinkOff"
+      class="noShrink boxContainer  medium filled   customCBoxSizeClass"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1912,7 +1889,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick customTickSizeClass "
+          class="tick mediumtick   customTickSizeClass"
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1924,7 +1901,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
       </label>
     </div>
     <div
-      class="labelContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink labelContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1933,7 +1910,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer customLabelClass "
+                                pointer customLabelClass"
         data-id="label"
         data-selector-id="label"
         data-test-id="label"