@zohodesk/components 1.0.0-temp-240 → 1.0.0-temp-242

package/README.md

@@ -2,11 +2,61 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.22
+- **Popup**
+  - Refactored to use the dotkit `Popup` component.
+
+# 1.4.21
+
+- `Common Css`
+  - added `unicode-bidi: bidi-override;` in ltr-dir class for change direction to ltr in rtl mode.
+
+# 1.4.20
+
+- **Popup**
+  - Exposed the `recomputePosition` method to handle repositioning and dropdown alignment after chunk download.
+
+# 1.4.19
+
+- Added rtl:as:property comment for linear-gradient usages to ensure support in PostCSS
+- Added loading styles to all button variants and support given for theme-based loading for primary button.
+  - Impact: In **Button.module.css**, the class name successElement has been renamed to tickElement.
+Also, primarySuccess → primaryTick, and dangerSuccess → dangerTick.
+
+# 1.4.18
+
+- **Select** 
+  - `secondaryField` prop supported to render secondary value inside the options
+  - `searchFields` prop suppored to additional values based search
+
+- **MultiSelect**
+  - `secondaryField` prop supported to render secondary value inside the options
+  - `SuggestionsProps` supported under **customProps** prop
+
+- **SelectWithIcon** 
+  - `secondaryValueKey` prop supported to render secondary value inside the options
+  - `searchFields` prop suppored to additional values based search
+  - `ListItemProps` supported under **customProps** prop
+
+- **SelectWithAvatar**
+  - `secondaryField` prop supported to render secondary value inside the options
+  - `searchFields` prop suppored to additional values based search
+  - `customProps` props supported with **TextBoxProps**, **DropdownSearchTextBoxProps** and **SuggestionsProps**
+
+- **GroupSelect** 
+  - `secondaryField` option supported under **groupedOptions** prop to render secondary value inside the options
+  - `SuggestionsProps` supported under **customProps** prop
+
+- **ListItem, ListItemWithAvatar, ListItemWithCheckBox, ListItemWithIcon, ListItemWithRadio**
+  - `renderValueRightPlaceholderNode` prop supported to render elements after the value
+
 # 1.4.17
 
+- **Select, MultiSelect** - Fixed scroll jitter for the highlighted option when the virtualizer is enabled.
+- **Select** - `isAnimate` prop supported
 - `Switch_v1 css` - RTL issue on thumb position fixed.
 
-# 1.4.15 , 1.4.16
+# 1.4.14, 1.4.15 , 1.4.16
 
 - `Common Css`
   - added ltr class renamed to ltr-zone.

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

@@ -63,6 +63,7 @@
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 63.86%, calc(48.82% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_successfill_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_tertiaryfill_bg: hsla(217, 13.73%, calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
@@ -70,9 +71,12 @@
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_loading_default_border: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
+	--zdt_button_loading_success_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba( 74, 192, 100, 1) 50%, rgba( 74, 192, 100, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 74, 192, 100, 0.9) 0%, rgba( 74, 192, 100, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 74, 192, 100, 0.6) 0%, rgba( 74, 192, 100, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(74, 192, 100, 0.3) 0%, rgba(74, 192, 100, 0) 100%) 0% 100%;
+	--zdt_button_loading_secondary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba( 65, 72, 83, 1) 50%, rgba( 65, 72, 83, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 65, 72, 83, 0.9) 0%, rgba( 65, 72, 83, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 65, 72, 83, 0.6) 0%, rgba( 65, 72, 83, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(65, 72, 83, 0.3) 0%, rgba(65, 72, 83, 0) 100%) 0% 100%;
 	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_success_strike: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));

package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 }

package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(69, 161, 89, 1) 50%, rgba(45, 161, 89, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(45, 161, 89, 0.9) 0%, rgba(45, 161, 89, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(45, 161, 89, 0.6) 0%, rgba(45, 161, 89, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(45, 161, 89, 0.3) 0%, rgba(45, 161, 89, 0) 100%) 0% 100%;
 }

package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 128, 31, 1) 50%, rgba(255, 128, 31, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 128, 31, 0.9) 0%, rgba(255, 128, 31, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 128, 31, 0.6) 0%, rgba(255, 128, 31, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 128, 31, 0.3) 0%, rgba(255, 128, 31, 0) 100%) 0% 100%;
 }

package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%;
 }

package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%;
 }

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

@@ -63,6 +63,7 @@
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 75.38%, calc(38.24% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_successfill_border: hsla(133, 63.29%, calc(40.59% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_tertiaryfill_bg: hsla(220, 10.45%, calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
@@ -70,9 +71,12 @@
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_loading_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
+	--zdt_button_loading_success_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(38, 169, 66, 1) 50%, rgba(38, 169, 66, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(38, 169, 66, 0.9) 0%, rgba(38, 169, 66, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(38, 169, 66, 0.6) 0%, rgba(38, 169, 66, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(38, 169, 66, 0.3) 0%, rgba(38, 169, 66, 0) 100%) 0% 100%;
+	--zdt_button_loading_secondary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(65, 72, 83, 1) 50%, rgba(65, 72, 83, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(65, 72, 83, 0.9) 0%, rgba(65, 72, 83, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(65, 72, 83, 0.6) 0%, rgba(65, 72, 83, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(65, 72, 83, 0.3) 0%, rgba(65, 72, 83, 0) 100%) 0% 100%;
 	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_success_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));

package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(135, 7.41%, calc(78.82% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(38, 169, 66, 1) 50%, rgba(38, 169, 66, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(38, 169, 66, 0.9) 0%, rgba(38, 169, 66, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(38, 169, 66, 0.6) 0%, rgba(38, 169, 66, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(38, 169, 66, 0.3) 0%, rgba(38, 169, 66, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(27, 10.68%, calc(79.80% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(229, 119, 23, 1) 50%, rgba(229, 119, 23, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(229, 119, 23, 0.9) 0%, rgba(229, 119, 23, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(229, 119, 23, 0.6) 0%, rgba(229, 119, 23, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(229, 119, 23, 0.3) 0%, rgba(229, 119, 23, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(343, 4.76%, calc(71.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(45, 28.17%, calc(72.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(232, 185, 35, 1) 50%, rgba(232, 185, 35, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(232, 185, 35, 0.9) 0%, rgba(232, 185, 35, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(232, 185, 35, 0.6) 0%, rgba(232, 185, 35, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(232, 185, 35, 0.3) 0%, rgba(232, 185, 35, 0) 100%) 0% 100%;
 }

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

@@ -63,6 +63,7 @@
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 63.86%, calc(48.82% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_successfill_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_tertiaryfill_bg: hsla(0, 0.00%, calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
@@ -70,9 +71,12 @@
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_loading_default_border: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 	--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
+	--zdt_button_loading_success_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba( 74, 192, 100, 1) 50%, rgba( 74, 192, 100, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 74, 192, 100, 0.9) 0%, rgba( 74, 192, 100, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 74, 192, 100, 0.6) 0%, rgba( 74, 192, 100, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(74, 192, 100, 0.3) 0%, rgba(74, 192, 100, 0) 100%) 0% 100%;
+	--zdt_button_loading_secondary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba( 65, 72, 83, 1) 50%, rgba( 65, 72, 83, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 65, 72, 83, 0.9) 0%, rgba( 65, 72, 83, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 65, 72, 83, 0.6) 0%, rgba( 65, 72, 83, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(65, 72, 83, 0.3) 0%, rgba(65, 72, 83, 0) 100%) 0% 100%;
 	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_success_strike: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));

package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(69, 161, 89, 1) 50%, rgba(45, 161, 89, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(45, 161, 89, 0.9) 0%, rgba(45, 161, 89, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(45, 161, 89, 0.6) 0%, rgba(45, 161, 89, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(45, 161, 89, 0.3) 0%, rgba(45, 161, 89, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 128, 31, 1) 50%, rgba(255, 128, 31, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 128, 31, 0.9) 0%, rgba(255, 128, 31, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 128, 31, 0.6) 0%, rgba(255, 128, 31, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 128, 31, 0.3) 0%, rgba(255, 128, 31, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%;
 }

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

@@ -142,7 +142,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
         class="successstate"
       >
         <div
-          class="customStautusClassName successelement primarysuccess"
+          class="customStautusClassName tickElement primaryTick"
         />
       </div>
     </div>
@@ -263,7 +263,7 @@ exports[`Button component Should render Status of buttons - success 1`] = `
         class="successstate"
       >
         <div
-          class="successelement primarysuccess"
+          class="tickElement primaryTick"
         />
       </div>
     </div>

package/es/Button/css/Button.module.css

@@ -383,11 +383,36 @@
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
 
+.successelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+
+.successfilledelement {
+  --button_loading_bg_color: var(--zdt_button_successfill_bg);
+}
+
+.secondaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+}
+
+.secondaryelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+
+.tertiaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_tertiaryfill_bg);
+}
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
 .dangerelement:after,
-.dangerfilledelement:after {
+.dangerfilledelement:after,
+.successelement:after,
+.successfilledelement:after,
+.secondaryelement:after,
+.secondaryfilledelement:after,
+.tertiaryfilledelement:after {
   --button_loading_bg_color: inherit;
 }
 
@@ -421,18 +446,47 @@
   transform: rotateX(180deg);
 }
 
-.primarysuccess {
+.primaryTick {
   --button_success_border_color: var(--zdt_button_default_border);
 }
 
-.primaryfilled .successelement {
+.primaryfilled .tickElement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
 
-.dangersuccess {
+.successelement:before {
+  --button_loading_bg_color: var(--zdt_button_success_border);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_success_linear_gradient);
+}
+
+.secondaryelement:before {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
+.dangerTick {
   --button_success_border_color: var(--zdt_button_danger_border);
 }
 
+.successTick {
+  --button_success_border_color: var(--zdt_button_success_border);
+}
+
+.secondaryTick {
+  --button_success_border_color: var(--zdt_button_secondary_border);
+}
+
+.secondaryfilledTick {
+  --button_success_border_color: var(--zdt_button_secondary_border);
+}
+
+.secondaryfilledelement:before {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
 @keyframes crlrotate-ltr {
   0% {
     transform: scaleX(-1) rotate(0deg);
@@ -502,7 +556,7 @@
   z-index: 3;
 }
 
-.successelement {
+.tickElement {
   height: var(--zd_size15) ;
   position: relative;
   top: calc( var(--zd_size2) * -1 ) ;
@@ -609,5 +663,5 @@
 }
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
-  --button_border_color: var(--zdt_button_successfill_bg);
+  --button_border_color: var(--zdt_button_successfill_border);
 }

package/es/Button/css/cssJSLogic.js

@@ -47,8 +47,8 @@ export default function cssJSLogic(_ref) {
     [customStatus]: !!customStatus,
     [style.loadingelement]: statusLower === 'loading',
     [style[`${paletteLower}element`]]: statusLower === 'loading',
-    [style.successelement]: statusLower != 'loading',
-    [style[`${paletteLower}success`]]: statusLower != 'loading'
+    [style.tickElement]: statusLower != 'loading',
+    [style[`${paletteLower}Tick`]]: statusLower != 'loading'
   });
   return {
     buttonClass,

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

@@ -8,6 +8,54 @@ describe('Card', () => {
     } = render( /*#__PURE__*/React.createElement(Card, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, null, " ", /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isScrollAttribute is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      isScrollAttribute: true
+    }, " ", /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the dataId value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      dataId: "customdataId"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      customClass: "customClass"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the htmlId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      htmlId: "customHtmlId"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the a11y', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      a11y: {
+        role: 'button'
+      }
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false', async () => {
     const mockGetNextOptions = jest.fn(() => {
       return new Promise(resolve => {

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardContent } from "../Card";
+describe('CardContent', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, null, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isScrollAttribute is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const scroll = ['vertical', 'horizontal', 'both', 'none'];
+  test.each(scroll)('Should render with name - %s', scroll => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true,
+      scroll: scroll
+    }, /*#__PURE__*/React.createElement("div", null, "Test Animation")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering shrink is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customClass is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      customClass: "cardCustomClass"
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const preventParentScroll = ['vertical', 'horizontal', 'both'];
+  test.each(preventParentScroll)('Should render with name - %s', preventParentScroll => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true,
+      preventParentScroll: preventParentScroll
+    }, /*#__PURE__*/React.createElement("div", null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardHeader } from "../Card";
+describe('CardHeader', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isScroll is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, {
+      isScroll: true
+    }, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Children is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, null, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, {
+      customClass: "cardHeader-class"
+    }, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});