@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -1,83 +1,83 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .hover\:bg-brand-80:hover {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .focus\:bg-brand-80:focus {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .active\:bg-brand-80:active {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .selected\:bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .hover\:bg-brand-100:hover {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .focus\:bg-brand-100:focus {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .active\:bg-brand-100:active {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .selected\:bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .hover\:bg-brand-10:hover {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .focus\:bg-brand-10:focus {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .active\:bg-brand-10:active {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .selected\:bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 /* color not available */
 .bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .hover\:bg-brand-20:hover {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .focus\:bg-brand-20:focus {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .active\:bg-brand-20:active {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .selected\:bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 /* Static Grey Palette */
@@ -122,23 +122,23 @@
 }
 
 .bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .hover\:bg-grey-10:hover {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .focus\:bg-grey-10:focus {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .active\:bg-grey-10:active {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .selected\:bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .bg-grey-15 {
@@ -163,23 +163,23 @@
 
 /* Static Blue Palette */
 .bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .hover\:bg-blue-80:hover {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .focus\:bg-blue-80:focus {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .active\:bg-blue-80:active {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .selected\:bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .bg-blue-100 {
@@ -569,23 +569,23 @@
 
 /* Utility Colors */
 .bg-transparent {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .hover\:bg-transparent:hover {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .focus\:bg-transparent:focus {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .active\:bg-transparent:active {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .selected\:bg-transparent {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .bg-white {

package/es/v1/helpers/colorHelpers/border/borderColor.module.css

@@ -62,84 +62,84 @@
 
 /* Static Grey Palette */
 .border-grey-65 {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .hover\:border-grey-65:hover {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .focus\:border-grey-65:focus {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .active\:border-grey-65:active {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .selected\:border-grey-65 {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .border-grey-55 {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .hover\:border-grey-55:hover {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .focus\:border-grey-55:focus {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .active\:border-grey-55:active {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .selected\:border-grey-55 {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .border-grey-15 {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .hover\:border-grey-15:hover {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .focus\:border-grey-15:focus {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .active\:border-grey-15:active {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .selected\:border-grey-15 {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 /* Static Blue Palette */
 .border-blue-80 {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .hover\:border-blue-80:hover {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .focus\:border-blue-80:focus {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .active\:border-blue-80:active {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .selected\:border-blue-80 {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .border-blue-100 {

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

@@ -1,22 +1,22 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .hover\:text-brand-80:hover {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .focus\:text-brand-80:focus {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .active\:text-brand-80:active {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .selected\:text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .text-brand-100 {
@@ -41,23 +41,23 @@
 
 /* Static Grey Palette */
 .text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .hover\:text-grey-65:hover {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .focus\:text-grey-65:focus {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .active\:text-grey-65:active {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .selected\:text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .text-grey-100 {
@@ -82,43 +82,43 @@
 
 /* Static Blue Palette */
 .text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .hover\:text-blue-80:hover {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .focus\:text-blue-80:focus {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .active\:text-blue-80:active {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .selected\:text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .hover\:text-blue-100:hover {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .focus\:text-blue-100:focus {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .active\:text-blue-100:active {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .selected\:text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 /* Static Green Palette */
@@ -307,62 +307,62 @@
 }
 
 .text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .hover\:text-white:hover {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .focus\:text-white:focus {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .active\:text-white:active {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .selected\:text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .hover\:text-black:hover {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .focus\:text-black:focus {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .active\:text-black:active {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .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);
+    color: var(--zd-text-onBrand);
 }
 
 .hover\:text-brand-filled:hover {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .focus\:text-brand-filled:focus {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .active\:text-brand-filled:active {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .selected\:text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }

package/es/v1/shared/Loader/Loader.js

@@ -1,6 +1,7 @@
 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";
 
 const Loader = props => {
@@ -11,17 +12,17 @@ const Loader = props => {
     wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.spinner} ${wrapper}`,
+    className: cn(`${style.spinner} ${wrapper}`),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("circle", {
-    className: style.spinnerTrack,
+    className: cn(style.spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/React.createElement("circle", {
-    className: style.spinnerHead,
+    className: cn(style.spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"

package/es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Loader renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="spinner "
+    class="spinner"
     role="img"
     viewBox="0 0 24 24"
   >

package/es/v1/shared/SuccessTick/SuccessTick.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import { cn } from "@dot-system/css-utility";
 import style from "./SuccessTick_v1.module.css";
 
 const SuccessTick = props => {
@@ -11,7 +12,7 @@ const SuccessTick = props => {
     wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.tick} ${wrapper}`,
+    className: cn(`${style.tick} ${wrapper}`),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SuccessTick renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="tick "
+    class="tick"
     role="img"
     viewBox="0 0 24 24"
   >

package/lib/Accordion/Accordion.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -107,7 +109,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           ariaExpanded = a11y.ariaExpanded,
           ariaHaspopup = a11y.ariaHaspopup;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
+        className: (0, _cssUtility.cn)(className ? className : ''),
         style: {
           height: height
         },

package/lib/Accordion/AccordionItem.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -80,13 +82,13 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
       unMountItem = unMountItem !== undefined ? unMountItem : unMount;
       var role = a11y.role;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className ? className : '',
+        className: (0, _cssUtility.cn)(className ? className : ''),
         "data-id": dataId,
         "data-test-id": dataId,
         role: role,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: innerClass ? innerClass : '',
+        className: (0, _cssUtility.cn)(innerClass ? innerClass : ''),
         onClick: selectMenu.bind(this, id)
       }, children[0]), unMountItem ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
         name: "slideDown",

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Accordion rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AccordionItem rendering the defult props 1`] = `
 <DocumentFragment>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Animation rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/AppContainer/AppContainer.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 require("../common/basic.module.css");
 
 require("@zohodesk/variables/assets/colorVariables.module.css");
@@ -188,7 +190,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, children)), needTooltip ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
-        className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
+        className: (0, _cssUtility.cn)("".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass)),
         "data-id": "".concat(dataId, "_tooltip"),
         "data-test-id": "".concat(dataId, "_tooltip"),
         "data-selector-id": "".concat(dataSelectorId, "_tooltip")

package/lib/AppContainer/AppContainer.module.css

@@ -8,12 +8,18 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container, .container button, .container input, .container textarea ,.container select {
+
+.container,
+.container button,
+.container input,
+.container textarea,
+.container select {
   /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
+  font-family: var(--zd-font-family), var(--zd_fallback_font, Lato);
 }
+
 .tooltip {
   height: 0 ;
   font-size: 0 ;
   /* contain:strict */
-}
+}