@zohodesk/components 1.6.25 → 1.6.27

package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css

@@ -16,30 +16,15 @@
 	--zdt_v1_label_secondary_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
-	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
-	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
-	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
-	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
-	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
-	--zdt_v1_palette_grey_light_bg: hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_light_border: hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_light_hover_bg: hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
+	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
 	--zdt_v1_palette_grey_bg: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_border: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_hover_border: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_hover_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(213, calc(var(--zd-saturation, 1) * 27.27%), calc(23.73% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/light/mode/Component_v1_LightMode.module.css

@@ -16,30 +16,15 @@
 	--zdt_v1_label_secondary_text: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
-	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
-	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
-	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
-	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
-	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
-	--zdt_v1_palette_grey_light_bg: hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_light_border: hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_light_hover_bg: hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
+	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
 	--zdt_v1_palette_grey_bg: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_text: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_border: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_hover_border: hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_hover_text: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css

@@ -16,30 +16,15 @@
 	--zdt_v1_label_secondary_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
-	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
-	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
-	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
-	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
-	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
-	--zdt_v1_palette_grey_light_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_light_border: hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_light_hover_bg: hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
+	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
 	--zdt_v1_palette_grey_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_grey_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_v1_palette_grey_hover_border: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_v1_palette_blue_hover_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/es/Accordion/Accordion.js

@@ -78,9 +78,4 @@ export default class Accordion extends React.Component {
 
 }
 Accordion.propTypes = Accordion_propTypes;
-Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
-//   Accordion.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }
+Accordion.defaultProps = Accordion_defaultProps;

package/es/Accordion/AccordionItem.js

@@ -56,9 +56,4 @@ export default class AccordionItem extends React.Component {
 
 }
 AccordionItem.propTypes = AccordionItem_propTypes;
-AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
-//   AccordionItem.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }
+AccordionItem.defaultProps = AccordionItem_defaultProps;

package/es/Animation/Animation.js

@@ -42,11 +42,4 @@ export default class Animation extends React.Component {
 
 }
 Animation.propTypes = propTypes;
-Animation.defaultProps = defaultProps; // if (__DOCS__) {
-//   Animation.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+Animation.defaultProps = defaultProps;

package/es/AppContainer/AppContainer.js

@@ -132,9 +132,4 @@ export default class AppContainer extends React.Component {
 
 }
 AppContainer.propTypes = propTypes;
-AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
-//   AppContainer.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide'
-//   };
-// }
+AppContainer.defaultProps = defaultProps;

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

@@ -3,7 +3,7 @@
 exports[`AppContainer rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col 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="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -30,13 +30,13 @@ exports[`AppContainer rendering the Custom props 1`] = `
 exports[`AppContainer rendering the childern as element 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -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="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -89,13 +89,13 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
 exports[`AppContainer rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container AppcontainerClass"
+    class="d-flex d-h-full d-w-full d-flex-col container AppcontainerClass"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -113,13 +113,13 @@ exports[`AppContainer rendering the customClass 1`] = `
 exports[`AppContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -137,13 +137,13 @@ exports[`AppContainer rendering the defult props 1`] = `
 exports[`AppContainer rendering the needTooltip is false 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,13 +155,13 @@ exports[`AppContainer rendering the needTooltip is false 1`] = `
 exports[`AppContainer rendering the tooltipClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -179,13 +179,13 @@ exports[`AppContainer rendering the tooltipClass 1`] = `
 exports[`AppContainer rendering the tooltipParentClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/es/Avatar/Avatar.js

@@ -188,9 +188,4 @@ export default class Avatar extends React.Component {
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
 Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = []; // if (__DOCS__) {
-//   Avatar.docs = {
-//     componentGroup: 'Avatar Group',
-//     folderName: 'Style Guide'
-//   };
-// }
+Avatar.validImageURLs = [];

package/es/AvatarTeam/AvatarTeam.js

@@ -76,10 +76,4 @@ export default class AvatarTeam extends React.Component {
 
 }
 AvatarTeam.defaultProps = defaultProps;
-AvatarTeam.propTypes = propTypes; // if (__DOCS__) {
-//   AvatarTeam.docs = {
-//     componentGroup: 'Avatar Group',
-//     folderName: 'Style Guide',
-//     external: true
-//   };
-// }
+AvatarTeam.propTypes = propTypes;

package/es/Button/Button.js

@@ -70,9 +70,4 @@ Button.defaultProps = defaultProps;
 Button.propTypes = propTypes;
 export default withComponentRegistrar(Button, {
   name: 'ZDC_Button'
-}); // if (__DOCS__) {
-//   Button.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide'
-//   };
-// }
+});

package/es/Buttongroup/Buttongroup.js

@@ -35,17 +35,4 @@ export default class Buttongroup extends React.Component {
 
 }
 Buttongroup.defaultProps = defaultProps;
-Buttongroup.propTypes = propTypes; // if (__DOCS__) {
-//   Buttongroup.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide',
-//     external: false,
-//     description: ' ',
-//     images: [
-//       {
-//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.png',
-//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.psd'
-//       }
-//     ]
-//   };
-// }
+Buttongroup.propTypes = propTypes;

package/es/Card/Card.js

@@ -276,15 +276,7 @@ export default class Card extends Component {
 
 }
 Card.propTypes = Card_propTypes;
-Card.defaultProps = Card_defaultProps; // if (__DOCS__) {
-//   Card.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
-
+Card.defaultProps = Card_defaultProps;
 export class CardFooter extends Component {
   render() {
     let {

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

@@ -3,13 +3,13 @@
 exports[`Card rendering the a11y 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       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 fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
      
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       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="flex fullSize column customClass"
+    class="d-flex d-h-full d-w-full d-flex-col customClass"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       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 fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="customdataId"
     data-selector-id="container"
     data-test-id="customdataId"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       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 fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     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 fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       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 fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-scroll="true"
     data-selector-id="container"
@@ -125,7 +125,7 @@ exports[`Card rendering the isScrollAttribute is true 1`] = `
   >
      
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       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 fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       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 fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="scrollToTopCardContent"
       data-selector-id="cardContent"
       data-test-id="scrollToTopCardContent"

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

@@ -3,7 +3,7 @@
 exports[`CardContent Should render with name - both 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink scroll_both"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-auto"
     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="flexible basis_zero noShrink scroll_vertical preventScrollBubbleBoth"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden d-overscroll-contain"
     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="flexible basis_zero noShrink scroll_horizontal"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-x-auto d-overflow-y-hidden"
     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="flexible basis_zero noShrink scroll_vertical preventScrollBubbleX"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden d-overscroll-x-contain"
     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="flexible basis_zero noShrink scroll_hidden"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-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="flexible basis_zero noShrink scroll_vertical"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
     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="flexible basis_zero noShrink scroll_vertical preventScrollBubbleY"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden d-overscroll-y-contain"
     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="flexible basis_zero noShrink scroll_vertical"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
     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="flexible basis_zero noShrink scroll_vertical cardCustomClass"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden 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="flexible basis_zero noShrink scroll_vertical"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
     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="flexible basis_zero shrink scroll_vertical"
+    class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
     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="flexible basis_zero noShrink scroll_vertical"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
     data-id="CardContent"
     data-selector-id="cardContent"
     data-test-id="CardContent"

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

@@ -3,7 +3,7 @@
 exports[`CardHeader rendering the Children is true 1`] = `
 <DocumentFragment>
   <div
-    class="noShrink notScroll"
+    class="d-flex-shrink-0 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="noShrink notScroll cardHeader-class"
+    class="d-flex-shrink-0 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="noShrink notScroll"
+    class="d-flex-shrink-0 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="noShrink scroll"
+    class="d-flex-shrink-0 scroll"
     data-id="CardHeader"
     data-selector-id="cardHeader"
     data-test-id="CardHeader"