@zohodesk/components 1.6.24 → 1.6.26

package/lib/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/lib/v1/shared/{Loader/Loader.js → Spinner/Spinner.js}

@@ -13,33 +13,33 @@ var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
 var _cssUtility = require("@dot-system/css-utility");
 
-var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
+var _Spinner_v1Module = _interopRequireDefault(require("./Spinner_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var Loader = function Loader(props) {
+var Spinner = function Spinner(props) {
   var customClass = props.customClass;
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: (0, _cssUtility.cn)("".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper)),
+    className: (0, _cssUtility.cn)("".concat(_Spinner_v1Module["default"].spinner, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
-    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerTrack),
+    className: (0, _cssUtility.cn)(_Spinner_v1Module["default"].spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/_react["default"].createElement("circle", {
-    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerHead),
+    className: (0, _cssUtility.cn)(_Spinner_v1Module["default"].spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"
   }));
 };
 
-Loader.propTypes = _propTypes["default"];
-Loader.defaultProps = _defaultProps["default"];
-var _default = Loader;
+Spinner.propTypes = _propTypes["default"];
+Spinner.defaultProps = _defaultProps["default"];
+var _default = Spinner;
 exports["default"] = _default;

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

@@ -4,19 +4,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Loader = _interopRequireDefault(require("../Loader"));
+var _Spinner = _interopRequireDefault(require("../Spinner"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Loader', function () {
+describe('Spinner', function () {
   test('renders default snapshot', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('renders with customClass', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
       customClass: {
         wrapper: 'my-custom-class'
       }

package/{es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → lib/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.24",
-  "main": "es/index.js",
+  "version": "1.6.26",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "private": false,
   "publishConfig": {
@@ -21,10 +21,10 @@
     "lint": "npx eslint ./src",
     "clean": "cdt clean build unittest test-slices coverage es lib assets && mkdir assets",
     "dubCheck": "npx z-node-plugins dub:check node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
-    "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
+    "init": "npm run clean",
     "common_package_build": "cd ../common && npm run build && cd ../components",
-    "build:lib": "cbt build:lib src,assets lib,assets",
-    "build:es": "cbt build:es src,assets es,assets",
+    "build:lib": "cbt build:lib src lib",
+    "build:es": "cbt build:es src es",
     "build:es:watch": "cbt build:es src es",
     "build": "npm run theme:validate && npm run build:lib && npm run build:es && npm run cssVariableConvert ",
     "build:local": "npm run build",
@@ -32,7 +32,7 @@
     "prepare": "npm run init &&  npm run css:build ",
     "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
     "postpublish": "node ../postPublish.js",
-    "test": "ZDTestingFramework unit-test",
+    "test_": "npx ZDTestingFramework unit-test",
     "test:changed": "ZDTestingFramework unit-test --onlyChanged",
     "snap-update": "npm run test-clean && ZDTestingFramework unit-test -u",
     "unit:report": "ZDTestingFramework ut-report",
@@ -73,17 +73,17 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@dot-system/css-audit-tool": "1.0.1",
-    "@zohodesk-private/color-variable-preprocessor": "1.3.3",
-    "@zohodesk-private/css-variable-migrator": "1.0.11",
-    "@zohodesk-private/node-plugins": "1.1.15",
-    "@zohodesk-private/react-prop-validator": "1.2.3",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.4",
+    "@zohodesk-private/css-variable-migrator": "1.0.12",
+    "@zohodesk-private/node-plugins": "1.1.16",
+    "@zohodesk-private/react-prop-validator": "1.2.4",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.11",
-    "@zohodesk/layout": "3.2.1",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/icons": "1.4.0",
+    "@zohodesk/layout": "3.2.2",
+    "@zohodesk/svg": "1.4.0",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
@@ -93,10 +93,10 @@
     "@zohodesk/client_build_tool": "0.0.23",
     "color": "4.2.3",
     "@zohodesk/jsx_attribute_wrapper": "1.0.0",
-    "@dot-system/css-utility": "0.1.2",
+    "@dot-system/css-utility": "0.1.4",
     "@zohodesk-private/client_deployment_tool": "0.0.7",
     "@babel/preset-react": "7.29.7",
-    "@zohodesk/testinglibrary": "4.1.10"
+    "@zohodesk/testinglibrary": "4.1.16"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -105,18 +105,18 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/icons": "1.4.0",
     "@zohodesk/variables": "1.3.2",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/svg": "1.4.0",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
-    "@zohodesk/layout": "3.2.1",
+    "@zohodesk/layout": "3.2.2",
     "@zohodesk/dotkit": "1.0.10",
     "color": "4.2.3",
-    "@dot-system/css-utility": "0.1.2"
+    "@dot-system/css-utility": "0.1.4"
   }
 }