@zohodesk/components 1.6.19 → 1.6.21

package/es/css.js

@@ -7,7 +7,6 @@ import '@zohodesk/icons/lib/Icon/Icon.module.css';
 import "./common/animation.module.css";
 import "./common/transition.module.css";
 import "./common/common.module.css";
-import "./Layout/Layout.module.css";
 import "./Avatar/Avatar.module.css";
 import "./AvatarTeam/AvatarTeam.module.css";
 import "./Button/Button.module.css";

package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon  active    inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon  active"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -25,7 +25,7 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   disabled   inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon   disabled"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -46,7 +46,7 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon    readonly  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon    readonly"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -67,7 +67,7 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon rotated     inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -110,7 +110,7 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon     arrowIcon_containerClass"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -131,7 +131,7 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
@@ -152,7 +152,7 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -203,7 +203,7 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"

package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder active"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom disabled borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_all effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_all effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     flex rowdir"
+    class="flex row varClass customContainer    effect"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_dark hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_error hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_transparent hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />

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

@@ -3,7 +3,7 @@
 exports[`AppContainer rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-container="true"
     data-id="AppContainer"
     data-props="true"
@@ -11,7 +11,7 @@ exports[`AppContainer rendering the Custom props 1`] = `
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -30,13 +30,13 @@ exports[`AppContainer rendering the Custom props 1`] = `
 exports[`AppContainer rendering the childern as element 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -58,13 +58,13 @@ exports[`AppContainer rendering the childern as element 1`] = `
 exports[`AppContainer rendering the childern as element in array 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -89,13 +89,13 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
 exports[`AppContainer rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="container AppcontainerClass flex cover coldir"
+    class="flex fullSize column container AppcontainerClass"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -113,13 +113,13 @@ exports[`AppContainer rendering the customClass 1`] = `
 exports[`AppContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -137,13 +137,13 @@ exports[`AppContainer rendering the defult props 1`] = `
 exports[`AppContainer rendering the needTooltip is false 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,13 +155,13 @@ exports[`AppContainer rendering the needTooltip is false 1`] = `
 exports[`AppContainer rendering the tooltipClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -179,13 +179,13 @@ exports[`AppContainer rendering the tooltipClass 1`] = `
 exports[`AppContainer rendering the tooltipParentClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

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

@@ -3,13 +3,13 @@
 exports[`Card rendering the a11y 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -24,14 +24,14 @@ exports[`Card rendering the a11y 1`] = `
 exports[`Card rendering the children 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
      
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -45,13 +45,13 @@ exports[`Card rendering the children 1`] = `
 exports[`Card rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="customClass flex cover coldir"
+    class="flex fullSize column customClass"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -65,13 +65,13 @@ exports[`Card rendering the customClass 1`] = `
 exports[`Card rendering the dataId value 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="customdataId"
     data-selector-id="container"
     data-test-id="customdataId"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -85,7 +85,7 @@ exports[`Card rendering the dataId value 1`] = `
 exports[`Card rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -96,13 +96,13 @@ exports[`Card rendering the defult props 1`] = `
 exports[`Card rendering the htmlId 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -117,7 +117,7 @@ exports[`Card rendering the htmlId 1`] = `
 exports[`Card rendering the isScrollAttribute is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-scroll="true"
     data-selector-id="container"
@@ -125,7 +125,7 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
   >
      
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="CardContent"
       data-selector-id="cardContent"
       data-test-id="CardContent"
@@ -139,13 +139,13 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
 exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="scrollToBottomCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToBottomCardContent"
@@ -161,13 +161,13 @@ exports[`Card should trigger fetch, when scroll to the bottom of the card while
 exports[`Card should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff scrolly"
+      class="flexible basis_zero noShrink scroll_vertical"
       data-id="scrollToTopCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToTopCardContent"

package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`CardContent Should render with name - both 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrollboth"
+    class="flexible basis_zero noShrink scroll_both"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -19,7 +19,7 @@ exports[`CardContent Should render with name - both 1`] = `
 exports[`CardContent Should render with name - both 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleBoth"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleBoth"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -35,7 +35,7 @@ exports[`CardContent Should render with name - both 2`] = `
 exports[`CardContent Should render with name - horizontal 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrollx"
+    class="flexible basis_zero noShrink scroll_horizontal"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -51,7 +51,7 @@ exports[`CardContent Should render with name - horizontal 1`] = `
 exports[`CardContent Should render with name - horizontal 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleX"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleX"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -67,7 +67,7 @@ exports[`CardContent Should render with name - horizontal 2`] = `
 exports[`CardContent Should render with name - none 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrollnone"
+    class="flexible basis_zero noShrink scroll_hidden"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -83,7 +83,7 @@ exports[`CardContent Should render with name - none 1`] = `
 exports[`CardContent Should render with name - vertical 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -99,7 +99,7 @@ exports[`CardContent Should render with name - vertical 1`] = `
 exports[`CardContent Should render with name - vertical 2`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly preventScrollBubbleY"
+    class="flexible basis_zero noShrink scroll_vertical preventScrollBubbleY"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -115,7 +115,7 @@ exports[`CardContent Should render with name - vertical 2`] = `
 exports[`CardContent rendering children 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -128,7 +128,7 @@ exports[`CardContent rendering children 1`] = `
 exports[`CardContent rendering customClass is true 1`] = `
 <DocumentFragment>
   <div
-    class="cardCustomClass grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical cardCustomClass"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -141,7 +141,7 @@ exports[`CardContent rendering customClass is true 1`] = `
 exports[`CardContent rendering isScrollAttribute is true 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-scroll="true"
     data-selector-id="cardContent"
@@ -155,7 +155,7 @@ exports[`CardContent rendering isScrollAttribute is true 1`] = `
 exports[`CardContent rendering shrink is true 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOn scrolly"
+    class="flexible basis_zero shrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"
@@ -168,7 +168,7 @@ exports[`CardContent rendering shrink is true 1`] = `
 exports[`CardContent rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"

package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`CardHeader rendering the Children is true 1`] = `
 <DocumentFragment>
   <div
-    class="notScroll  shrinkOff"
+    class="noShrink notScroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -16,7 +16,7 @@ exports[`CardHeader rendering the Children is true 1`] = `
 exports[`CardHeader rendering the customClass  1`] = `
 <DocumentFragment>
   <div
-    class="notScroll cardHeader-class shrinkOff"
+    class="noShrink notScroll cardHeader-class"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -29,7 +29,7 @@ exports[`CardHeader rendering the customClass  1`] = `
 exports[`CardHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="notScroll  shrinkOff"
+    class="noShrink notScroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"
@@ -40,7 +40,7 @@ exports[`CardHeader rendering the defult props 1`] = `
 exports[`CardHeader rendering the isScroll is true 1`] = `
 <DocumentFragment>
   <div
-    class="scroll  shrinkOff"
+    class="noShrink scroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"