@zohodesk/components 1.0.0-temp-259.3 → 1.0.0-temp-259.5

package/es/v1/helpers/colorHelpers/text/textColor.module.css

@@ -1,368 +1,152 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
-.text-brand-80 {
-    color: var(--zd-text-brand);
-}
-
-.hover\:text-brand-80:hover {
-    color: var(--zd-text-brand);
-}
-
-.focus\:text-brand-80:focus {
-    color: var(--zd-text-brand);
-}
-
-.active\:text-brand-80:active {
-    color: var(--zd-text-brand);
-}
-
+.text-brand-80,
+.hover\:text-brand-80:hover,
+.focus\:text-brand-80:focus,
+.active\:text-brand-80:active,
 .selected\:text-brand-80 {
     color: var(--zd-text-brand);
 }
 
-.text-brand-100 {
-    color: var(--zdt_v1_palette_brand_hover_text);
-}
-
-.hover\:text-brand-100:hover {
-    color: var(--zdt_v1_palette_brand_hover_text);
-}
-
-.focus\:text-brand-100:focus {
-    color: var(--zdt_v1_palette_brand_hover_text);
-}
-
-.active\:text-brand-100:active {
-    color: var(--zdt_v1_palette_brand_hover_text);
-}
-
+.text-brand-100,
+.hover\:text-brand-100:hover,
+.focus\:text-brand-100:focus,
+.active\:text-brand-100:active,
 .selected\:text-brand-100 {
     color: var(--zdt_v1_palette_brand_hover_text);
 }
 
 /* Static Grey Palette */
-.text-grey-65 {
-    color: var(--zd-text-secondary);
-}
-
-.hover\:text-grey-65:hover {
-    color: var(--zd-text-secondary);
-}
-
-.focus\:text-grey-65:focus {
-    color: var(--zd-text-secondary);
-}
-
-.active\:text-grey-65:active {
-    color: var(--zd-text-secondary);
-}
-
+.text-grey-65,
+.hover\:text-grey-65:hover,
+.focus\:text-grey-65:focus,
+.active\:text-grey-65:active,
 .selected\:text-grey-65 {
     color: var(--zd-text-secondary);
 }
 
-.text-grey-100 {
-    color: var(--zdt_v1_palette_grey_hover_text);
-}
-
-.hover\:text-grey-100:hover {
-    color: var(--zdt_v1_palette_grey_hover_text);
-}
-
-.focus\:text-grey-100:focus {
-    color: var(--zdt_v1_palette_grey_hover_text);
-}
-
-.active\:text-grey-100:active {
-    color: var(--zdt_v1_palette_grey_hover_text);
-}
-
+.text-grey-100,
+.hover\:text-grey-100:hover,
+.focus\:text-grey-100:focus,
+.active\:text-grey-100:active,
 .selected\:text-grey-100 {
     color: var(--zdt_v1_palette_grey_hover_text);
 }
 
 /* Static Blue Palette */
-.text-blue-80 {
-    color: var(--zd-text-info);
-}
-
-.hover\:text-blue-80:hover {
-    color: var(--zd-text-info);
-}
-
-.focus\:text-blue-80:focus {
-    color: var(--zd-text-info);
-}
-
-.active\:text-blue-80:active {
-    color: var(--zd-text-info);
-}
-
+.text-blue-80,
+.hover\:text-blue-80:hover,
+.focus\:text-blue-80:focus,
+.active\:text-blue-80:active,
 .selected\:text-blue-80 {
     color: var(--zd-text-info);
 }
 
-.text-blue-100 {
-    color: var(--zd-text-info-hover);
-}
-
-.hover\:text-blue-100:hover {
-    color: var(--zd-text-info-hover);
-}
-
-.focus\:text-blue-100:focus {
-    color: var(--zd-text-info-hover);
-}
-
-.active\:text-blue-100:active {
-    color: var(--zd-text-info-hover);
-}
-
+.text-blue-100,
+.hover\:text-blue-100:hover,
+.focus\:text-blue-100:focus,
+.active\:text-blue-100:active,
 .selected\:text-blue-100 {
     color: var(--zd-text-info-hover);
 }
 
 /* Static Green Palette */
-.text-green-80 {
-    color: var(--zdt_v1_palette_green_text);
-}
-
-.hover\:text-green-80:hover {
-    color: var(--zdt_v1_palette_green_text);
-}
-
-.focus\:text-green-80:focus {
-    color: var(--zdt_v1_palette_green_text);
-}
-
-.active\:text-green-80:active {
-    color: var(--zdt_v1_palette_green_text);
-}
-
+.text-green-80,
+.hover\:text-green-80:hover,
+.focus\:text-green-80:focus,
+.active\:text-green-80:active,
 .selected\:text-green-80 {
     color: var(--zdt_v1_palette_green_text);
 }
 
-.text-green-100 {
-    color: var(--zdt_v1_palette_green_hover_text);
-}
-
-.hover\:text-green-100:hover {
-    color: var(--zdt_v1_palette_green_hover_text);
-}
-
-.focus\:text-green-100:focus {
-    color: var(--zdt_v1_palette_green_hover_text);
-}
-
-.active\:text-green-100:active {
-    color: var(--zdt_v1_palette_green_hover_text);
-}
-
+.text-green-100,
+.hover\:text-green-100:hover,
+.focus\:text-green-100:focus,
+.active\:text-green-100:active,
 .selected\:text-green-100 {
     color: var(--zdt_v1_palette_green_hover_text);
 }
 
 /* Static Orange Palette */
-.text-orange-80 {
-    color: var(--zdt_v1_palette_orange_text);
-}
-
-.hover\:text-orange-80:hover {
-    color: var(--zdt_v1_palette_orange_text);
-}
-
-.focus\:text-orange-80:focus {
-    color: var(--zdt_v1_palette_orange_text);
-}
-
-.active\:text-orange-80:active {
-    color: var(--zdt_v1_palette_orange_text);
-}
-
+.text-orange-80,
+.hover\:text-orange-80:hover,
+.focus\:text-orange-80:focus,
+.active\:text-orange-80:active,
 .selected\:text-orange-80 {
     color: var(--zdt_v1_palette_orange_text);
 }
 
-.text-orange-100 {
-    color: var(--zdt_v1_palette_orange_hover_text);
-}
-
-.hover\:text-orange-100:hover {
-    color: var(--zdt_v1_palette_orange_hover_text);
-}
-
-.focus\:text-orange-100:focus {
-    color: var(--zdt_v1_palette_orange_hover_text);
-}
-
-.active\:text-orange-100:active {
-    color: var(--zdt_v1_palette_orange_hover_text);
-}
-
+.text-orange-100,
+.hover\:text-orange-100:hover,
+.focus\:text-orange-100:focus,
+.active\:text-orange-100:active,
 .selected\:text-orange-100 {
     color: var(--zdt_v1_palette_orange_hover_text);
 }
 
 /* Static Red Palette */
-.text-red-70 {
-    color: var(--zdt_v1_palette_red_text);
-}
-
-.hover\:text-red-70:hover {
-    color: var(--zdt_v1_palette_red_text);
-}
-
-.focus\:text-red-70:focus {
-    color: var(--zdt_v1_palette_red_text);
-}
-
-.active\:text-red-70:active {
-    color: var(--zdt_v1_palette_red_text);
-}
-
+.text-red-70,
+.hover\:text-red-70:hover,
+.focus\:text-red-70:focus,
+.active\:text-red-70:active,
 .selected\:text-red-70 {
     color: var(--zdt_v1_palette_red_text);
 }
 
-.text-red-100 {
-    color: var(--zdt_v1_palette_red_hover_text);
-}
-
-.hover\:text-red-100:hover {
-    color: var(--zdt_v1_palette_red_hover_text);
-}
-
-.focus\:text-red-100:focus {
-    color: var(--zdt_v1_palette_red_hover_text);
-}
-
-.active\:text-red-100:active {
-    color: var(--zdt_v1_palette_red_hover_text);
-}
-
+.text-red-100,
+.hover\:text-red-100:hover,
+.focus\:text-red-100:focus,
+.active\:text-red-100:active,
 .selected\:text-red-100 {
     color: var(--zdt_v1_palette_red_hover_text);
 }
 
 /* Static Yellow Palette */
-.text-yellow-80 {
-    color: var(--zdt_v1_palette_yellow_text);
-}
-
-.hover\:text-yellow-80:hover {
-    color: var(--zdt_v1_palette_yellow_text);
-}
-
-.focus\:text-yellow-80:focus {
-    color: var(--zdt_v1_palette_yellow_text);
-}
-
-.active\:text-yellow-80:active {
-    color: var(--zdt_v1_palette_yellow_text);
-}
-
+.text-yellow-80,
+.hover\:text-yellow-80:hover,
+.focus\:text-yellow-80:focus,
+.active\:text-yellow-80:active,
 .selected\:text-yellow-80 {
     color: var(--zdt_v1_palette_yellow_text);
 }
 
-.text-yellow-100 {
-    color: var(--zdt_v1_palette_yellow_hover_text);
-}
-
-.hover\:text-yellow-100:hover {
-    color: var(--zdt_v1_palette_yellow_hover_text);
-}
-
-.focus\:text-yellow-100:focus {
-    color: var(--zdt_v1_palette_yellow_hover_text);
-}
-
-.active\:text-yellow-100:active {
-    color: var(--zdt_v1_palette_yellow_hover_text);
-}
-
+.text-yellow-100,
+.hover\:text-yellow-100:hover,
+.focus\:text-yellow-100:focus,
+.active\:text-yellow-100:active,
 .selected\:text-yellow-100 {
     color: var(--zdt_v1_palette_yellow_hover_text);
 }
 
 /* Utility Colors */
-.text-transparent {
-    color: var(--dot_mirror);
-}
-
-.hover\:text-transparent:hover {
-    color: var(--dot_mirror);
-}
-
-.focus\:text-transparent:focus {
-    color: var(--dot_mirror);
-}
-
-.active\:text-transparent:active {
-    color: var(--dot_mirror);
-}
-
+.text-transparent,
+.hover\:text-transparent:hover,
+.focus\:text-transparent:focus,
+.active\:text-transparent:active,
 .selected\:text-transparent {
     color: var(--dot_mirror);
 }
 
-.text-white {
-    color: var(--zd-text-inverse);
-}
-
-.hover\:text-white:hover {
-    color: var(--zd-text-inverse);
-}
-
-.focus\:text-white:focus {
-    color: var(--zd-text-inverse);
-}
-
-.active\:text-white:active {
-    color: var(--zd-text-inverse);
-}
-
+.text-white,
+.hover\:text-white:hover,
+.focus\:text-white:focus,
+.active\:text-white:active,
 .selected\:text-white {
     color: var(--zd-text-inverse);
 }
 
-.text-black {
-    color: var(--zd-text-primary);
-}
-
-.hover\:text-black:hover {
-    color: var(--zd-text-primary);
-}
-
-.focus\:text-black:focus {
-    color: var(--zd-text-primary);
-}
-
-.active\:text-black:active {
-    color: var(--zd-text-primary);
-}
-
+.text-black,
+.hover\:text-black:hover,
+.focus\:text-black:focus,
+.active\:text-black:active,
 .selected\:text-black {
     color: var(--zd-text-primary);
 }
 
 /* CTA-aware filled text — adapts to CTA theme */
-.text-brand-filled {
-    color: var(--zd-text-onBrand);
-}
-
-.hover\:text-brand-filled:hover {
-    color: var(--zd-text-onBrand);
-}
-
-.focus\:text-brand-filled:focus {
-    color: var(--zd-text-onBrand);
-}
-
-.active\:text-brand-filled:active {
-    color: var(--zd-text-onBrand);
-}
-
+.text-brand-filled,
+.hover\:text-brand-filled:hover,
+.focus\:text-brand-filled:focus,
+.active\:text-brand-filled:active,
 .selected\:text-brand-filled {
     color: var(--zd-text-onBrand);
 }

package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -135,7 +135,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold"
+                class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -184,7 +184,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold"
+                class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -262,7 +262,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons rtl basic icon-delete"
+                      class="zd_font_icons ff icon-delete basic d-inline-block d-align-middle rtl"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -64,7 +64,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down"
+              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -138,7 +138,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down"
+              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -201,7 +201,7 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down"
+              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -266,7 +266,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down"
+              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -344,7 +344,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down"
+              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -407,7 +407,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-down"
+              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"

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

@@ -36,7 +36,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           <span>
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-dropdown downArrow"
+              class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -61,7 +61,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons rtl basic icon-arrow-left3 fbold"
+            class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -78,7 +78,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons rtl basic icon-arrow-right3 fbold"
+            class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -682,7 +682,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                           >
                             <i
                               aria-hidden="true"
-                              class="zd_font_icons basic icon-down"
+                              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                               data-id="fontIcon"
                               data-selector-id="fontIcon"
                               data-test-id="fontIcon"
@@ -777,7 +777,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                           >
                             <i
                               aria-hidden="true"
-                              class="zd_font_icons basic icon-down"
+                              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                               data-id="fontIcon"
                               data-selector-id="fontIcon"
                               data-test-id="fontIcon"
@@ -872,7 +872,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                           >
                             <i
                               aria-hidden="true"
-                              class="zd_font_icons basic icon-down"
+                              class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                               data-id="fontIcon"
                               data-selector-id="fontIcon"
                               data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -21,7 +21,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       <span>
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-dropdown downArrow"
+          class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -45,7 +45,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons rtl basic icon-arrow-left3 fbold"
+        class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -61,7 +61,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons rtl basic icon-arrow-right3 fbold"
+        class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -57,7 +57,7 @@ exports[`DateWidget rendering the defult props 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Datepicker"
+                  class="zd_font_icons ff icon-Datepicker basic d-inline-block d-align-middle"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -89,7 +89,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down"
+                        class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -182,7 +182,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down"
+                        class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -275,7 +275,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down"
+                        class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"

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

@@ -216,7 +216,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold"
+                class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -264,7 +264,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold"
+                class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -312,7 +312,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold"
+                class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -390,7 +390,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons rtl basic icon-delete"
+                      class="zd_font_icons ff icon-delete basic d-inline-block d-align-middle rtl"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -31,7 +31,7 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-androidd"
+            class="zd_font_icons ff icon-androidd basic d-inline-block d-align-middle"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"