@zohodesk/dot 1.9.18 → 1.9.19

package/lib/version2/lookup/AlertLookup/AlertLookup.js

@@ -29,6 +29,8 @@ var _Section = _interopRequireDefault(require("../../../lookup/Section/Section")
 
 var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AlertLookupNewModule = _interopRequireDefault(require("./AlertLookupNew.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -215,7 +217,7 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
       }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_AlertLookupNewModule["default"].innerSection, " ").concat(_AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] ? _AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] : '', " ").concat(sectionClass)
+        className: (0, _cssUtility.cn)("".concat(_AlertLookupNewModule["default"].innerSection, " ").concat(_AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] ? _AlertLookupNewModule["default"]["".concat(scroll, "Scroll")] : '', " ").concat(sectionClass))
       }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isHtmlContent && message ? /*#__PURE__*/_react["default"].createElement("div", {
         id: ariaMessageId,
         dangerouslySetInnerHTML: {
@@ -225,9 +227,9 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
         id: ariaMessageId
       }, message), confirmationMessage && /*#__PURE__*/_react["default"].createElement("div", {
         id: ariaConfirmMsgId,
-        className: "".concat(message ? _AlertLookupNewModule["default"].confirmMsgText : '')
+        className: (0, _cssUtility.cn)("".concat(message ? _AlertLookupNewModule["default"].confirmMsgText : ''))
       }, confirmationMessage)))), renderFooterNode || submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _AlertLookupNewModule["default"].footer
+        className: (0, _cssUtility.cn)(_AlertLookupNewModule["default"].footer)
       }, (0, _renderNode["default"])(renderFooterNode) || /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
         size: "small",
         paddingLeftSize: "xmedium"
@@ -263,9 +265,4 @@ var AlertLookup = /*#__PURE__*/function (_Component) {
 
 exports["default"] = AlertLookup;
 AlertLookup.propTypes = _propTypes.propTypes;
-AlertLookup.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   AlertLookup.docs = {
-//     componentGroup: 'AlertLookup',
-//     folderName: 'Alert'
-//   };
-// }
+AlertLookup.defaultProps = _defaultProps.defaultProps;

package/lib/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -1,5 +1,5 @@
 .section {
-  min-height: auto ;
+  composes: d-min-h-auto from global;
 }
 
 .innerSection {
@@ -26,14 +26,14 @@
 }
 
 .footer {
-  overflow: hidden;
+  composes: d-overflow-hidden from global;
   border-radius: 0 0 10px 10px;
 }
 
 .horizontalScroll,
 .verticalScroll,
 .bothScroll {
-  height: 100% ;
+  composes: d-h-full from global;
 }
 
 .horizontalScroll {

package/lib/version2/lookup/AlertLookup/__tests__/__snapshots__/AlertLookup.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlertLookup rendering isActive is true defult 1`] = `
 <DocumentFragment>
@@ -8,7 +8,7 @@ exports[`AlertLookup rendering isActive is true defult 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"

package/lib/version2/lookup/alertLookupCommonNew.module.css

@@ -20,9 +20,9 @@
 }
 
 .noteUl {
+    composes: d-m-0 from global;
     padding-block: var(--zd_size14) 0 ;
     padding-inline: var(--zd_size16) ;
-    margin: 0 ;
 }
 
 .noteUl li {

package/lib/version2/notification/DesktopNotification/DesktopNotification.js

@@ -28,6 +28,8 @@ var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotif
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DesktopNotificationModule = _interopRequireDefault(require("./DesktopNotification.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -132,7 +134,7 @@ function DesktopNotificationUI(props) {
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DesktopNotificationModule["default"].parentElement,
+    className: (0, _cssUtility.cn)(_DesktopNotificationModule["default"].parentElement),
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {},
@@ -161,17 +163,17 @@ function DesktopNotificationUI(props) {
     }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
       flexible: true
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
+      className: (0, _cssUtility.cn)("".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText))
     }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
+      className: (0, _cssUtility.cn)("".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : ''))
     }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
+      className: (0, _cssUtility.cn)("".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : ''))
     }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
       flexible: true
     }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-      className: _DesktopNotificationModule["default"].footer
+      className: (0, _cssUtility.cn)(_DesktopNotificationModule["default"].footer)
     }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(_DesktopNotificationModule["default"].message),
+      className: (0, _cssUtility.cn)("".concat(_DesktopNotificationModule["default"].message)),
       tagName: "p"
     }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
       size: "small",
@@ -208,9 +210,4 @@ function DesktopNotification(props) {
 }
 
 DesktopNotification.propTypes = _propTypes.propTypes;
-DesktopNotification.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   DesktopNotification.docs = {
-//     componentGroup: 'DesktopNotification',
-//     folderName: 'Alert'
-//   };
-// }
+DesktopNotification.defaultProps = _defaultProps.defaultProps;

package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -1,14 +1,12 @@
 .parentElement {
+  composes: d-relative from global;
   margin-block-end: var(--zd_size7) ;
-  position: relative;
 }
 
 .container {
+  composes: d-relative d-max-h-full d-pointer-events-auto from global;
   color: var(--zdt_desktopnotification_text);
   transition: all var(--zd_transition4);
-  position: relative;
-  max-height: 100% ;
-  pointer-events: auto;
   background-color: var(--zdt_desktopnotification_bg);
   box-shadow: var(--zd_bs_desktopnotification_container);
   border-radius: 0 0 10px 10px;
@@ -38,8 +36,7 @@
 }
 
 .tapWidth {
-  max-width: 100% ;
-  min-width: 100% ;
+  composes: d-min-w-full d-max-w-full from global;
 }
 
 /* Animation Style */
@@ -69,7 +66,7 @@
 }
 
 .leftnoanimate {
-  opacity: 1;
+  composes: d-opacity-100 from global;
   transform: translateX(0) scale(1);
 }
 
@@ -83,14 +80,13 @@
 .message {
   padding-block: var(--zd_size10) ;
   padding-inline: var(--zd_size76) var(--zd_size20) ;
-  position: relative;
   color: var(--zdt_desktopnotification_message_text);
   font-size: var(--zd_font_size11) ;
   composes: dotted textCap from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative d-cursor-pointer from global;
   height: var(--zd_size33) ;
   transition: padding var(--zd_transition3), height var(--zd_transition3);
   border-top: 1px solid var(--zdt_desktopnotification_message_border);
-  cursor: pointer;
 }
 
 .message:hover {
@@ -126,6 +122,6 @@
 }
 
 .footer {
-  overflow: hidden;
+  composes: d-overflow-hidden from global;
   border-radius: 0 0 10px 10px;
 }

package/lib/version2/notification/DesktopNotification/__tests__/__snapshots__/DesktopNotification.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DesktopNotification rendering the defult props 1`] = `
 <DocumentFragment>
@@ -8,19 +8,19 @@ exports[`DesktopNotification rendering the defult props 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex column container leftanimate"
+      class="d-flex d-flex-col container leftanimate"
       data-id="toastMessage"
       data-selector-id="container"
       data-test-id="toastMessage"
     >
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex row wrap alignItems_center container primary_header"
+          class="d-flex d-flex-row d-flex-wrap d-items-center container primary_header"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
@@ -100,19 +100,19 @@ exports[`DesktopNotification rendering the defult props 1`] = `
             </div>
           </div>
           <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"
           >
             <div
-              class="flex fullSize row"
+              class="d-flex d-h-full d-w-full d-flex-row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="shrink"
+                class="d-min-w-0 d-flex-shrink"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
@@ -124,13 +124,13 @@ exports[`DesktopNotification rendering the defult props 1`] = `
             </div>
           </div>
           <div
-            class="noShrink close"
+            class="d-flex-shrink-0 close"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="inlineFlex row alignItems_center justifyContent_center close light"
+              class="d-inline-flex d-flex-row d-items-center d-justify-center close light"
               data-id="toastMessage_close"
               data-selector-id="container"
               data-test-id="toastMessage_close"
@@ -138,14 +138,14 @@ exports[`DesktopNotification rendering the defult props 1`] = `
               tabindex="0"
             >
               <div
-                class="noShrink"
+                class="d-flex-shrink-0"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Cross fbold closeIcon"
+                  class="zd_font_icons ff icon-Cross basic d-inline-block d-align-middle d-font-bold closeIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -157,13 +157,13 @@ exports[`DesktopNotification rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex fullSize column"
+          class="d-flex d-h-full d-w-full d-flex-col"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -23,6 +23,8 @@ var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomRespon
 
 var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DesktopNotificationHeaderModule = _interopRequireDefault(require("./DesktopNotificationHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -98,7 +100,7 @@ var DesktopNotificationHeader = /*#__PURE__*/function (_Component) {
       }, function (_ref2) {
         var uptoTablet = _ref2.uptoTablet;
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _DesktopNotificationHeaderModule["default"].iconContainer
+          className: (0, _cssUtility.cn)(_DesktopNotificationHeaderModule["default"].iconContainer)
         }, /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
           type: type
         })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -141,9 +143,4 @@ var DesktopNotificationHeader = /*#__PURE__*/function (_Component) {
 
 exports["default"] = DesktopNotificationHeader;
 DesktopNotificationHeader.propTypes = _propTypes.propTypes;
-DesktopNotificationHeader.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   DesktopNotificationHeader.docs = {
-//     componentGroup: 'DesktopNotificationHeader',
-//     folderName: 'Alert'
-//   };
-// }
+DesktopNotificationHeader.defaultProps = _defaultProps.defaultProps;

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -4,12 +4,11 @@
 
 .container {
   composes: varClass;
+  composes: d-relative d-border-solid from global;
   min-height: var(--zd_size54) ;
-  position: relative;
   /*css:theme-validation:ignore*/
   color: var(--zdt_desktopnotification_text);
   background-color: var(--alert_lookup_bg_color);
-  border-style: solid;
   border-color: var(--commonalert_border_color);
   border-width: 2px 0 0 0;
 }
@@ -21,7 +20,7 @@
 }
 
 .infoText {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 /* Palette */

package/lib/version2/notification/DesktopNotificationHeader/__tests__/__snapshots__/DesktopNotificationHeader.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DesktopNotificationHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container primary_header"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container primary_header"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -83,19 +83,19 @@ exports[`DesktopNotificationHeader rendering the defult props 1`] = `
       </div>
     </div>
     <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"
     >
       <div
-        class="flex fullSize row"
+        class="d-flex d-h-full d-w-full d-flex-row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink"
+          class="d-min-w-0 d-flex-shrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -107,27 +107,27 @@ exports[`DesktopNotificationHeader rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink close"
+      class="d-flex-shrink-0 close"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="inlineFlex row alignItems_center justifyContent_center close light"
+        class="d-inline-flex d-flex-row d-items-center d-justify-center close light"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
         tabindex="0"
       >
         <div
-          class="noShrink"
+          class="d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-Cross fbold closeIcon"
+            class="zd_font_icons ff icon-Cross basic d-inline-block d-align-middle d-font-bold closeIcon"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.9.18",
-  "main": "lib/index",
+  "version": "1.9.19",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "private": false,
   "publishConfig": {
@@ -17,24 +17,27 @@
     "LIBRARY"
   ],
   "scripts": {
-    "clean": "cdt clean lib es coverage assets && mkdir assets",
+    "lint:css": "cd ../ && npx stylelint dot/src/**/*.css",
+    "clean": "cdt clean lib es coverage test-slices assets && mkdir assets",
     "dubCheck": "npx z-node-plugins dub:check ../components/src ../internal/desk-components/src node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es node_modules/@zohodesk/svg/es",
-    "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:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "prepare": "npm run clean && npm run css:build",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
+    "test": "ZDTestingFramework unit-test",
+    "test:changed": "ZDTestingFramework unit-test --onlyChanged",
+    "snap-update": "npm run test-clean && ZDTestingFramework unit-test -u",
+    "unit:report": "ZDTestingFramework ut-report",
+    "coverage": "ZDTestingFramework unit-test --coverage",
     "customTest": "node ./__testUtils__/runTest.js",
-    "test": "react-cli test",
-    "_test": "",
-    "snap-update": "npm run test-clean && npm run test -- -u",
+    "test-clean": "cdt clean ./coverage ./test-slices ./unittest ./es ./lib ./package-lock.json ./result.json ",
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
     "prepublishOnly": "node ../prePublish.js && npm run downloadOnly && npm run css:review  && npm run review:props",
     "postpublish": "node ../postPublish.js",
-    "test-clean": "cdt clean ./coverage  ./unittest  ./es  ./lib  ./package-lock.json ./result.json",
     "download": "npm run downloadOnly  && cd ../ && npm run download",
     "downloadOnly": "cdt clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps",
     "expublish": "node ../publish.js -- exp",
@@ -42,7 +45,7 @@
     "variable:addignore": "npx css-variable-migrator addignore ./src",
     "variable:convert": "npx css-variable-migrator convert ./src",
     "variable:check": "npx css-variable-migrator check ./src",
-    "css:review": " npm run dubCheck && npm run css:lineheight:validate && npm run theme:validate ",
+    "css:review": " npm run lint:css && npm run dubCheck && npm run css:lineheight:validate && npm run theme:validate ",
     "theme:validate": "npx z-node-plugins theme:validate ./src ./.cli ./.cli/stringContains.js",
     "theme:addignore": "npx z-node-plugins theme:addignore ./src ./.cli ./.cli/stringContains.js",
     "theme:removeignore": "npx z-node-plugins theme:removeignore ./src ./.cli",
@@ -63,41 +66,43 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@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/a11y": "2.3.9",
+    "@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.10",
     "@zohodesk/client_build_tool": "0.0.23",
     "@zohodesk-private/client_deployment_tool": "0.0.7",
-    "@zohodesk/components": "1.6.23",
+    "@zohodesk/components": "1.6.31",
     "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.11",
-    "@zohodesk/layout": "3.2.1",
+    "@zohodesk/icons": "1.4.1",
+    "@zohodesk/layout": "3.2.4",
     "@zohodesk/react-cli": "1.1.27",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/svg": "1.4.1",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/variables": "1.3.2",
+    "@zohodesk/variables": "1.3.3",
     "@zohodesk/virtualizer": "1.0.13",
     "postcss-discard-comments": "^7.0.5",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
     "@zohodesk/jsx_attribute_wrapper": "1.0.0",
-    "@dot-system/css-utility": "0.1.1"
+    "@dot-system/css-utility": "0.1.6",
+    "@babel/preset-react": "7.29.7",
+    "@zohodesk/testinglibrary": "4.1.16"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
-    "@zohodesk/variables": "1.3.2",
-    "@zohodesk/components": "1.6.23",
-    "@zohodesk/icons": "1.3.11",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/variables": "1.3.3",
+    "@zohodesk/components": "1.6.31",
+    "@zohodesk/icons": "1.4.1",
+    "@zohodesk/svg": "1.4.1",
     "@zohodesk/virtualizer": "1.0.13",
     "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",
-    "@dot-system/css-utility": "0.1.1"
+    "@zohodesk/a11y": "2.3.10",
+    "@zohodesk/layout": "3.2.4",
+    "@dot-system/css-utility": "0.1.6"
   }
 }

package/ut.config.js

@@ -0,0 +1,106 @@
+const path = require('path');
+
+// Notes for future maintainers:
+// - @zohodesk/unit-testing-framework runs `JSON.stringify(config)` before
+//   handing this to Jest, so every value here must be JSON-serializable
+//   (no functions, no live RegExp objects — patterns are strings).
+// - The framework REPLACES its default config with this file when present
+//   (despite the "Merging..." log line in config-loader.js), so this file
+//   must be self-contained.
+
+// `@zohodesk/unit-testing-framework/package.json` isn't in its exports map,
+// so resolve via the main entry (points to build/index.js) and step up.
+const FRAMEWORK_BUILD = path.dirname(
+  require.resolve('@zohodesk/unit-testing-framework')
+);
+
+// Pin Jest 30's jsdom env — bare "jsdom" can resolve to Jest 26/27 copies
+// pulled in by react-cli / react-scripts, which crash under Jest 30.
+const JEST_JSDOM_ENV = require.resolve('jest-environment-jsdom', {
+  paths: [require.resolve('@zohodesk/unit-testing-framework')]
+});
+
+module.exports = {
+  rootDir: __dirname,
+  roots: ['<rootDir>/src'],
+
+  testEnvironment: JEST_JSDOM_ENV,
+
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.(spec|test).[jt]s?(x)',
+    '<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)'
+  ],
+
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/build/',
+    '/lib/',
+    '/es/',
+    '/dist/',
+    '/coverage/',
+    '/unittest/'
+  ],
+
+  moduleFileExtensions: ['js', 'jsx', 'mjs', 'cjs', 'json', 'ts', 'tsx', 'node'],
+
+  transform: {
+    // Absolute paths — the framework JSON.stringifies this config before Jest
+    // resolves transforms, so bare package names can point at a missing nested
+    // copy under unit-testing-framework/node_modules.
+    '^.+\\.[jt]sx?$': [
+      require.resolve('babel-jest'),
+      {
+        presets: [
+          [require.resolve('@babel/preset-env'), { targets: { node: 'current' } }],
+          [require.resolve('@babel/preset-react'), { runtime: 'classic' }]
+        ]
+      }
+    ],
+    '^.+\\.(svg|png|jpg|jpeg|gif|webp|woff2?|ttf|eot|otf|mp4|webm)$':
+      '<rootDir>/__testUtils__/fileTransform.js',
+    // Enumerable class-name map (not identity-obj-proxy) — mergeStyle spreads
+    // the style object, which yields {} for a non-enumerable Proxy.
+    '^.+\\.(css|less|scss|sass)$':
+      '<rootDir>/__testUtils__/cssModulesTransform.js'
+  },
+
+  // @zohodesk/* and @dot-system/* ship untranspiled ESM in some places, so
+  // let babel-jest transform them.
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@zohodesk|@zohodesk-private|@dot-system)/)'
+  ],
+
+  moduleNameMapper: {
+    // Prefer the ES build for @zohodesk libraries (mirrors react-cli's libAlias).
+    '^@zohodesk/(components|dot|icons|svg|variables|virtualizer|hooks|utils|a11y|layout|dotkit)/lib(.*)$':
+      '@zohodesk/$1/es$2'
+  },
+
+  // Injects `jest` on globalThis so tests that don't `import { jest }` from
+  // '@jest/globals' still work under the framework's runner. before run
+  setupFiles: [
+    path.join(FRAMEWORK_BUILD, 'src', 'environment', 'globals-inject.js')
+  ],
+
+  // Existing test bootstrap: @testing-library/react configure, ResizeObserver
+  // mock, requestAnimationFrame shim, className `cn` wrapper on React.createElement.
+  setupFilesAfterEnv: [
+    '<rootDir>/__testUtils__/globals.js',
+    '@testing-library/jest-dom'
+  ],
+
+  clearMocks: true,
+  passWithNoTests: true,
+  testTimeout: 20000,
+
+  // Coverage tuning (used only when `--coverage` is passed).
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/__tests__/**',
+    '!src/**/*.spec.{js,jsx,ts,tsx}',
+    '!src/**/*.test.{js,jsx,ts,tsx}',
+    '!src/**/index.js'
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['json', 'json-summary', 'text', 'html']
+};