@zohodesk/components 1.6.24 → 1.6.26

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(--zdt_v1_palette_brand_text);
-}
-
-.hover\:text-brand-80:hover {
-    color: var(--zdt_v1_palette_brand_text);
-}
-
-.focus\:text-brand-80:focus {
-    color: var(--zdt_v1_palette_brand_text);
-}
-
-.active\:text-brand-80:active {
-    color: var(--zdt_v1_palette_brand_text);
-}
-
+.text-brand-80,
+.hover\:text-brand-80:hover,
+.focus\:text-brand-80:focus,
+.active\:text-brand-80:active,
 .selected\:text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
-}
-
-.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);
+    color: var(--zd-text-brand);
 }
 
+.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(--zdt_v1_palette_grey_text);
-}
-
-.hover\:text-grey-65:hover {
-    color: var(--zdt_v1_palette_grey_text);
-}
-
-.focus\:text-grey-65:focus {
-    color: var(--zdt_v1_palette_grey_text);
-}
-
-.active\:text-grey-65:active {
-    color: var(--zdt_v1_palette_grey_text);
-}
-
+.text-grey-65,
+.hover\:text-grey-65:hover,
+.focus\:text-grey-65:focus,
+.active\:text-grey-65:active,
 .selected\:text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
-}
-
-.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);
+    color: var(--zd-text-secondary);
 }
 
+.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(--zdt_v1_palette_blue_text);
-}
-
-.hover\:text-blue-80:hover {
-    color: var(--zdt_v1_palette_blue_text);
-}
-
-.focus\:text-blue-80:focus {
-    color: var(--zdt_v1_palette_blue_text);
-}
-
-.active\:text-blue-80:active {
-    color: var(--zdt_v1_palette_blue_text);
-}
-
+.text-blue-80,
+.hover\:text-blue-80:hover,
+.focus\:text-blue-80:focus,
+.active\:text-blue-80:active,
 .selected\:text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
-}
-
-.text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
-}
-
-.hover\:text-blue-100:hover {
-    color: var(--zdt_v1_palette_blue_hover_text);
-}
-
-.focus\:text-blue-100:focus {
-    color: var(--zdt_v1_palette_blue_hover_text);
-}
-
-.active\:text-blue-100:active {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info);
 }
 
+.text-blue-100,
+.hover\:text-blue-100:hover,
+.focus\:text-blue-100:focus,
+.active\:text-blue-100:active,
 .selected\:text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    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(--zdt_v1_palette_white);
-}
-
-.hover\:text-white:hover {
-    color: var(--zdt_v1_palette_white);
-}
-
-.focus\:text-white:focus {
-    color: var(--zdt_v1_palette_white);
-}
-
-.active\:text-white:active {
-    color: var(--zdt_v1_palette_white);
-}
-
+.text-white,
+.hover\:text-white:hover,
+.focus\:text-white:focus,
+.active\:text-white:active,
 .selected\:text-white {
-    color: var(--zdt_v1_palette_white);
-}
-
-.text-black {
-    color: var(--zdt_v1_palette_black);
-}
-
-.hover\:text-black:hover {
-    color: var(--zdt_v1_palette_black);
-}
-
-.focus\:text-black:focus {
-    color: var(--zdt_v1_palette_black);
-}
-
-.active\:text-black:active {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-inverse);
 }
 
+.text-black,
+.hover\:text-black:hover,
+.focus\:text-black:focus,
+.active\:text-black:active,
 .selected\:text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 /* CTA-aware filled text — adapts to CTA theme */
-.text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
-}
-
-.hover\:text-brand-filled:hover {
-    color: var(--zdt_v1_palette_brand_filled_text);
-}
-
-.focus\:text-brand-filled:focus {
-    color: var(--zdt_v1_palette_brand_filled_text);
-}
-
-.active\:text-brand-filled:active {
-    color: var(--zdt_v1_palette_brand_filled_text);
-}
-
+.text-brand-filled,
+.hover\:text-brand-filled:hover,
+.focus\:text-brand-filled:focus,
+.active\:text-brand-filled:active,
 .selected\:text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }

package/es/v1/shared/{Loader/Loader.js → Spinner/Spinner.js}

@@ -2,9 +2,9 @@ import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
 import { cn } from "@dot-system/css-utility";
-import style from "./Loader_v1.module.css";
+import style from "./Spinner_v1.module.css";
 
-const Loader = props => {
+const Spinner = props => {
   const {
     customClass
   } = props;
@@ -29,6 +29,6 @@ const Loader = props => {
   }));
 };
 
-Loader.propTypes = propTypes;
-Loader.defaultProps = defaultProps;
-export default Loader;
+Spinner.propTypes = propTypes;
+Spinner.defaultProps = defaultProps;
+export default Spinner;

package/es/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js}

@@ -1,17 +1,17 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Loader from "../Loader";
-describe('Loader', () => {
+import Spinner from "../Spinner";
+describe('Spinner', () => {
   test('renders default snapshot', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Loader, null));
+    } = render( /*#__PURE__*/React.createElement(Spinner, null));
     expect(asFragment()).toMatchSnapshot();
   });
   test('renders with customClass', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Loader, {
+    } = render( /*#__PURE__*/React.createElement(Spinner, {
       customClass: {
         wrapper: 'my-custom-class'
       }

package/{lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → es/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Loader renders default snapshot 1`] = `
+exports[`Spinner renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
@@ -24,7 +24,7 @@ exports[`Loader renders default snapshot 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Loader renders with customClass 1`] = `
+exports[`Spinner renders with customClass 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"

package/lib/Accordion/Accordion.js

@@ -128,9 +128,4 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Accordion;
 Accordion.propTypes = _propTypes.Accordion_propTypes;
-Accordion.defaultProps = _defaultProps.Accordion_defaultProps; // if (__DOCS__) {
-//   Accordion.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }
+Accordion.defaultProps = _defaultProps.Accordion_defaultProps;

package/lib/Accordion/AccordionItem.js

@@ -105,9 +105,4 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AccordionItem;
 AccordionItem.propTypes = _propTypes.AccordionItem_propTypes;
-AccordionItem.defaultProps = _defaultProps.AccordionItem_defaultProps; // if (__DOCS__) {
-//   AccordionItem.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }
+AccordionItem.defaultProps = _defaultProps.AccordionItem_defaultProps;

package/lib/Animation/Animation.js

@@ -92,11 +92,4 @@ var Animation = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Animation;
 Animation.propTypes = _propTypes.propTypes;
-Animation.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Animation.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+Animation.defaultProps = _defaultProps.defaultProps;

package/lib/AppContainer/AppContainer.js

@@ -206,9 +206,4 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AppContainer;
 AppContainer.propTypes = _propTypes.propTypes;
-AppContainer.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   AppContainer.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide'
-//   };
-// }
+AppContainer.defaultProps = _defaultProps.defaultProps;

package/lib/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"