@zohodesk/components 1.6.20 → 1.6.21

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

@@ -3,11 +3,11 @@
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -23,19 +23,19 @@ exports[`TextBoxIcon component Should be render children 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="icon  shrinkOff"
+          class="noShrink icon"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -55,11 +55,11 @@ exports[`TextBoxIcon component Should be render children 1`] = `
 exports[`TextBoxIcon component Should be render htmlId  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -76,13 +76,13 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -95,11 +95,11 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is false  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -115,13 +115,13 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -134,12 +134,12 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is true  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly flex rowdir"
+    class="flex row varClass customContainer   border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly"
     data-selector-id="textBoxIcon"
     data-title=""
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -157,13 +157,13 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -176,11 +176,11 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -196,19 +196,19 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="icon rotated shrinkOff"
+          class="noShrink icon rotated"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -228,11 +228,11 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 exports[`TextBoxIcon component Should be render id 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -249,13 +249,13 @@ exports[`TextBoxIcon component Should be render id 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -268,11 +268,11 @@ exports[`TextBoxIcon component Should be render id 1`] = `
 exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -288,13 +288,13 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -307,12 +307,12 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom disabled borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
     data-title=""
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -329,13 +329,13 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -348,11 +348,11 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder active   container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -368,13 +368,13 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -387,11 +387,11 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom readonly borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -408,13 +408,13 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -427,11 +427,11 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
 exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -448,13 +448,13 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -467,11 +467,11 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 exports[`TextBoxIcon component Should be render name 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -488,13 +488,13 @@ exports[`TextBoxIcon component Should be render name 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -507,11 +507,11 @@ exports[`TextBoxIcon component Should be render name 1`] = `
 exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     container   flex rowdir"
+    class="flex row varClass customContainer    effect     container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -527,13 +527,13 @@ exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -546,11 +546,11 @@ exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom readonly borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -567,13 +567,13 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -586,11 +586,11 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -606,13 +606,13 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -625,11 +625,11 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
 exports[`TextBoxIcon component Should be render placeholder 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -646,13 +646,13 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -665,11 +665,11 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
 exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -685,19 +685,19 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <button
-          class="buttonReset icon shrinkOff"
+          class="noShrink buttonReset icon"
           data-id="textBoxIcon_ClearIcon"
           data-selector-id="box"
           data-test-id="textBoxIcon_ClearIcon"
@@ -705,7 +705,7 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
         >
           <div
             aria-hidden="true"
-            class="flex cover coldir both"
+            class="flex fullSize column alignItems_center justifyContent_center"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -729,12 +729,12 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 exports[`TextBoxIcon component Should be render title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom disabled borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
     data-title="TextBoxIconTitle"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -751,13 +751,13 @@ exports[`TextBoxIcon component Should be render title 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -770,11 +770,11 @@ exports[`TextBoxIcon component Should be render title 1`] = `
 exports[`TextBoxIcon component Should be render value is number 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -790,13 +790,13 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -809,11 +809,11 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
 exports[`TextBoxIcon component Should be render value is string and length greater than 1 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -829,19 +829,19 @@ exports[`TextBoxIcon component Should be render value is string and length great
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <button
-          class="buttonReset icon shrinkOff"
+          class="noShrink buttonReset icon"
           data-id="textBoxIcon_ClearIcon"
           data-selector-id="box"
           data-test-id="textBoxIcon_ClearIcon"
@@ -849,7 +849,7 @@ exports[`TextBoxIcon component Should be render value is string and length great
         >
           <div
             aria-hidden="true"
-            class="flex cover coldir both"
+            class="flex fullSize column alignItems_center justifyContent_center"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -873,11 +873,11 @@ exports[`TextBoxIcon component Should be render value is string and length great
 exports[`TextBoxIcon component Should be render value is string and length less than 1 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -893,13 +893,13 @@ exports[`TextBoxIcon component Should be render value is string and length less
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -912,11 +912,11 @@ exports[`TextBoxIcon component Should be render value is string and length less
 exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon_data_selector_id"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -932,13 +932,13 @@ exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -951,11 +951,11 @@ exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
 exports[`TextBoxIcon component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -971,13 +971,13 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -990,11 +990,11 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
 exports[`TextBoxIcon component Should render Varient - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1010,13 +1010,13 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1029,11 +1029,11 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
 exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1049,13 +1049,13 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1068,11 +1068,11 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1088,13 +1088,13 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1107,11 +1107,11 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1127,13 +1127,13 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1146,11 +1146,11 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_error hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1166,13 +1166,13 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1185,11 +1185,11 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_transparent hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1205,13 +1205,13 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1224,11 +1224,11 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 exports[`TextBoxIcon component Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1244,13 +1244,13 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1263,11 +1263,11 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
 exports[`TextBoxIcon component Should render size  - small 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1283,13 +1283,13 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1302,11 +1302,11 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
 exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1322,13 +1322,13 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1341,11 +1341,11 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1361,13 +1361,13 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1380,11 +1380,11 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 exports[`TextBoxIcon component Should render type  - number 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1400,13 +1400,13 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1419,11 +1419,11 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
 exports[`TextBoxIcon component Should render type  - password 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1439,13 +1439,13 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1458,11 +1458,11 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
 exports[`TextBoxIcon component Should render type  - text 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1478,13 +1478,13 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1497,11 +1497,11 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
 exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1518,13 +1518,13 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1537,11 +1537,11 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 exports[`TextBoxIcon component rendering the Custom class 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon  flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1557,13 +1557,13 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
       />
     </div>
     <div
-      class="iconContainer customTBoxIconTextBox shrinkOff"
+      class="noShrink iconContainer customTBoxIconTextBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -1576,11 +1576,11 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
 exports[`TextBoxIcon component rendering the i18n value 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
     data-selector-id="textBoxIcon"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1596,19 +1596,19 @@ exports[`TextBoxIcon component rendering the i18n value 1`] = `
       />
     </div>
     <div
-      class="iconContainer  shrinkOff"
+      class="noShrink iconContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <button
-          class="buttonReset icon shrinkOff"
+          class="noShrink buttonReset icon"
           data-id="textBoxIcon_ClearIcon"
           data-selector-id="box"
           data-test-id="textBoxIcon_ClearIcon"
@@ -1616,7 +1616,7 @@ exports[`TextBoxIcon component rendering the i18n value 1`] = `
         >
           <div
             aria-hidden="true"
-            class="flex cover coldir both"
+            class="flex fullSize column alignItems_center justifyContent_center"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"