@zohodesk/components 1.6.23 → 1.6.25

package/lib/TextBox/TextBox.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TextBoxModule = _interopRequireDefault(require("./TextBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -194,7 +196,7 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
         "aria-activedescendant": ariaActivedescendant,
         "aria-readonly": ariaReadonly,
         "aria-multiselectable": ariaMultiselectable,
-        className: "".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(isScrollPrevent ? _TextBoxModule["default"].inputDotted : '', " ").concat(customClass ? customClass : ''),
+        className: (0, _cssUtility.cn)("".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(isScrollPrevent ? _TextBoxModule["default"].inputDotted : '', " ").concat(customClass ? customClass : '')),
         "data-id": "".concat(dataId),
         "data-test-id": "".concat(dataId),
         "data-selector-id": dataSelectorId,

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Textbox component Should be render autoComplete false  1`] = `
 <DocumentFragment>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>

package/lib/Textarea/Textarea.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -133,7 +135,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
-        className: "".concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass, " "),
+        className: (0, _cssUtility.cn)("".concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass, " ")),
         placeholder: placeHolder
       }, options, {
         "data-id": dataId,

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Textarea component Should be render  cols only  1`] = `
 <DocumentFragment>

package/lib/Tooltip/Tooltip.js

@@ -21,6 +21,8 @@ var _selectn = _interopRequireDefault(require("selectn"));
 
 var _cssUtils = require("../utils/cssUtils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -558,7 +560,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 
       var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(_cssUtils.whiteSpaceClassMapping[tooltipWhiteSpaceModification]);
       return title ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TooltipModule["default"].tooltiptext, " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_TooltipModule["default"].tooltiptext, " ").concat(customClass)),
         style: {
           left: left,
           top: top,
@@ -568,18 +570,18 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
         "data-id": dataId,
         "data-test-id": dataId
       }, !dataTooltipnoArrow ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_TooltipModule["default"].tooltiparrow, " ").concat(arrowStyle),
+        className: (0, _cssUtility.cn)("".concat(_TooltipModule["default"].tooltiparrow, " ").concat(arrowStyle)),
         style: {
           left: arrowLeft,
           top: arrowTop
         }
       }) : null, isHtml ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: tooltipCss,
+        className: (0, _cssUtility.cn)(tooltipCss),
         dangerouslySetInnerHTML: {
           __html: title
         }
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: tooltipCss
+        className: (0, _cssUtility.cn)(tooltipCss)
       }, title)) : null;
     }
   }]);

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Typography Should render decoration - default 1`] = `
 <DocumentFragment>
@@ -2697,7 +2697,7 @@ exports[`Typography with highlight should render separate customised render the
   >
     The 
     <div
-      aria-labelledby="2"
+      aria-labelledby="1"
       class="container effect medium lgRadius default"
       data-id="tag_Tag"
       data-selector-id="tag"
@@ -2708,14 +2708,14 @@ exports[`Typography with highlight should render separate customised render the
       <div
         aria-hidden="true"
         class="text mediumtext"
-        id="2"
+        id="1"
       >
         Sun
       </div>
     </div>
      and 
     <div
-      aria-labelledby="3"
+      aria-labelledby="2"
       class="container effect medium lgRadius default"
       data-id="tag_Tag"
       data-selector-id="tag"
@@ -2726,7 +2726,7 @@ exports[`Typography with highlight should render separate customised render the
       <div
         aria-hidden="true"
         class="text mediumtext"
-        id="3"
+        id="2"
       >
         Moon
       </div>

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

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

package/lib/VelocityAnimation/VelocityAnimationGroup/__tests__/__snapshots__/VelocityAnimationGroup.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`VelocityAnimationGroup rendering isActive is true 1`] = `
 <DocumentFragment>

package/lib/deprecated/Switch/Switch.js

@@ -15,6 +15,8 @@ var _Layout = require("../../v1/Layout");
 
 var _Label = _interopRequireDefault(require("../../v1/Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SwitchModule = _interopRequireDefault(require("../../Switch/Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -72,7 +74,7 @@ var Switch = function Switch(props) {
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "checkbox",
     id: id,
-    className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
+    className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : '')),
     name: name,
     value: value,
     checked: checked,
@@ -83,7 +85,7 @@ var Switch = function Switch(props) {
     htmlFor: id,
     "data-id": dataId,
     "data-test-id": dataId,
-    className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+    className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)),
     tabIndex: isReadOnly || disabled ? '-1' : '0'
   })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
     text: text,

package/lib/semantic/Button/Button.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _semanticButtonModule = _interopRequireDefault(require("./semanticButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -71,7 +73,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           ariaControls = a11y.ariaControls,
           ariaLabelledby = a11y.ariaLabelledby;
       return /*#__PURE__*/_react["default"].createElement("button", {
-        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_semanticButtonModule["default"].buttonReset, " ").concat(customClass)),
         "aria-label": ariaLabel,
         "aria-haspopup": ariaHaspopup,
         "aria-expanded": ariaExpanded,

package/lib/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap

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

package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>

package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>

package/lib/v1/Button/Button.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
@@ -27,7 +29,7 @@ var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
 var _constants2 = require("./constants");
 
-var _Loader = _interopRequireDefault(require("../shared/Loader/Loader"));
+var _Spinner = _interopRequireDefault(require("../shared/Spinner/Spinner"));
 
 var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));
 
@@ -135,7 +137,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
       $ui_justifyContent: "center",
       $ui_className: loaderClassName,
       testId: testId ? "".concat(testId, "_loader") : undefined
-    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
+    }, /*#__PURE__*/_react["default"].createElement(_Spinner["default"], null));
   };
 
   var _renderSuccess = function _renderSuccess() {
@@ -222,7 +224,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
   return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
     ref: ref,
     type: type,
-    className: buttonClassName,
+    className: (0, _cssUtility.cn)(buttonClassName),
     "aria-busy": isLoading,
     "aria-disabled": isDisabledState,
     "aria-readonly": isReadOnly,

package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 <DocumentFragment>

package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

package/lib/v1/Switch/Switch.js

@@ -23,6 +23,8 @@ var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
 var _Label = _interopRequireDefault(require("../../Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _Switch_v1Module = _interopRequireDefault(require("./css/Switch_v1.module.css"));
 
 var _excluded = ["ariaDisabled", "ariaLabel"];
@@ -127,20 +129,20 @@ var Switch = function Switch(props) {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    className: trackClass,
+    className: (0, _cssUtility.cn)(trackClass),
     "data-title": title,
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
   })), /*#__PURE__*/_react["default"].createElement("svg", {
-    className: thumbClass,
+    className: (0, _cssUtility.cn)(thumbClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
     cx: "50%",
     cy: "50%",
     r: _contants.THUMB_RADIUS[size]
   })), hasStateIndication ? /*#__PURE__*/_react["default"].createElement("svg", {
-    className: labelIndicationClass,
+    className: (0, _cssUtility.cn)(labelIndicationClass),
     xmlns: "http://www.w3.org/2000/svg"
   }, isChecked ? /*#__PURE__*/_react["default"].createElement("rect", {
     width: "100%",

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>

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

@@ -11,33 +11,35 @@ var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
-var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
+var _cssUtility = require("@dot-system/css-utility");
+
+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: "".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: _Loader_v1Module["default"].spinnerTrack,
+    className: (0, _cssUtility.cn)(_Spinner_v1Module["default"].spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/_react["default"].createElement("circle", {
-    className: _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://goo.gl/fbAQLP
+// 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/v1/shared/SuccessTick/SuccessTick.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SuccessTick_v1Module = _interopRequireDefault(require("./SuccessTick_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,7 +22,7 @@ var SuccessTick = function SuccessTick(props) {
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper),
+    className: (0, _cssUtility.cn)("".concat(_SuccessTick_v1Module["default"].tick, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SuccessTick renders default snapshot 1`] = `
 <DocumentFragment>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.23",
+  "version": "1.6.25",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -19,25 +19,26 @@
   "scripts": {
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "lint": "npx eslint ./src",
-    "clean": "cdt clean build unittest coverage es lib assets && mkdir assets",
+    "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",
     "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",
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
-    "coverage": "react-cli coverage",
     "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",
-    "report": "react-cli publish:report",
-    "test": "react-cli test",
+    "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-clean": "cdt clean ./coverage ./unittest ./es ./lib ./package-lock.json ./result.json ",
-    "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": "npm run init && react-cli sstest",
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy  && npm run externalDocHTMLChange",
     "download": "npm run download_only && cd ../ && npm run download",
@@ -72,7 +73,7 @@
     "@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/color-variable-preprocessor": "1.3.4",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
     "@zohodesk-private/node-plugins": "1.1.15",
     "@zohodesk-private/react-prop-validator": "1.2.3",
@@ -80,9 +81,9 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/icons": "1.3.14",
     "@zohodesk/layout": "3.2.1",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/svg": "1.3.12",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
@@ -92,8 +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.1",
-    "@zohodesk-private/client_deployment_tool": "0.0.7"
+    "@dot-system/css-utility": "0.1.2",
+    "@zohodesk-private/client_deployment_tool": "0.0.7",
+    "@babel/preset-react": "7.29.7",
+    "@zohodesk/testinglibrary": "4.1.10"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -102,9 +105,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.11",
+    "@zohodesk/icons": "1.3.14",
     "@zohodesk/variables": "1.3.2",
-    "@zohodesk/svg": "1.3.10",
+    "@zohodesk/svg": "1.3.12",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
@@ -114,6 +117,6 @@
     "@zohodesk/layout": "3.2.1",
     "@zohodesk/dotkit": "1.0.10",
     "color": "4.2.3",
-    "@dot-system/css-utility": "0.1.1"
+    "@dot-system/css-utility": "0.1.2"
   }
 }

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']
+};