@zohodesk/dot 1.9.17 → 1.9.19

package/lib/list/GridStencils/GridStencils.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _GridStencilsModule = _interopRequireDefault(require("./GridStencils.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -56,17 +58,17 @@ var GridStencils = /*#__PURE__*/function (_React$Component) {
           styles = _this$props.styles,
           order = _this$props.order;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: from == 'leftPanel' && isThreeLayout ? "".concat(_GridStencilsModule["default"].stenLoading, " ").concat(_GridStencilsModule["default"].threeLayout) : from == 'leftPanel' ? "".concat(_GridStencilsModule["default"].stenLoading, " ").concat(_GridStencilsModule["default"].leftCont) : _GridStencilsModule["default"].stenLoading,
+        className: (0, _cssUtility.cn)(from == 'leftPanel' && isThreeLayout ? "".concat(_GridStencilsModule["default"].stenLoading, " ").concat(_GridStencilsModule["default"].threeLayout) : from == 'leftPanel' ? "".concat(_GridStencilsModule["default"].stenLoading, " ").concat(_GridStencilsModule["default"].leftCont) : _GridStencilsModule["default"].stenLoading),
         style: styles,
         order: order
       }, lineBar ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _GridStencilsModule["default"].stenLoadbody
+        className: (0, _cssUtility.cn)(_GridStencilsModule["default"].stenLoadbody)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_GridStencilsModule["default"].lineBar, " ").concat(_GridStencilsModule["default"].stenListBAr)
+        className: (0, _cssUtility.cn)("".concat(_GridStencilsModule["default"].lineBar, " ").concat(_GridStencilsModule["default"].stenListBAr))
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_GridStencilsModule["default"].lineBar2, " ").concat(_GridStencilsModule["default"].stenListBAr)
+        className: (0, _cssUtility.cn)("".concat(_GridStencilsModule["default"].lineBar2, " ").concat(_GridStencilsModule["default"].stenListBAr))
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_GridStencilsModule["default"].lineBar3, " ").concat(_GridStencilsModule["default"].stenListBAr)
+        className: (0, _cssUtility.cn)("".concat(_GridStencilsModule["default"].lineBar3, " ").concat(_GridStencilsModule["default"].stenListBAr))
       })) : '');
     }
   }]);
@@ -75,9 +77,4 @@ var GridStencils = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = GridStencils;
-GridStencils.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   GridStencils.docs = {
-//     folderName: 'List',
-//     componentGroup: 'GridStencils'
-//   };
-// }
+GridStencils.propTypes = _propTypes.propTypes;

package/lib/list/GridStencils/GridStencils.module.css

@@ -1,7 +1,7 @@
 .stenLoading {
+  composes: d-relative from global;
   padding-block: var(--zd_size13) var(--zd_size11) ;
   padding-inline:var(--zd_size15) ;
-  position: relative;
   margin-block-end: var(--zd_size10) ;
   background-color: var(--zdt_gridstencils_default_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
@@ -54,10 +54,9 @@
   border-radius: 5px;
 }
 .stenListBAr {
-  position: relative;
+  composes: d-relative d-bg-no-repeat from global;
   background: var(--zdt_gridstencils_listbar_bg);
   background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
 }
 [dir=ltr] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
@@ -74,9 +73,9 @@
   -webkit-animation-timing-function: linear;
 }
 .stenListBAr {
+  composes: d-bg-no-repeat from global;
   background: var(--zdt_gridstencils_listbar_bg);
   background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
 }
 [dir=ltr] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);

package/lib/list/GridStencils/__tests__/__snapshots__/GridStencils.spec.js.snap

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

package/lib/list/Icons/AddNewIcon.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
@@ -61,7 +63,7 @@ var AddNewIcon = /*#__PURE__*/function (_React$Component) {
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle

package/lib/list/Icons/CompleteIcon.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
@@ -62,7 +64,7 @@ var CompleteIcon = /*#__PURE__*/function (_React$Component) {
           iconSize = _this$props.iconSize;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle

package/lib/list/Icons/DeleteIcon.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -62,7 +64,7 @@ var DeleteComponent = /*#__PURE__*/function (_React$Component) {
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '', " "),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '', " ")),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,

package/lib/list/Icons/EditIcon.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -62,7 +64,7 @@ var EditIcon = /*#__PURE__*/function (_React$Component) {
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,

package/lib/list/Icons/FloatingIcons.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -65,7 +67,7 @@ var FloatingIcons = /*#__PURE__*/function (_Component) {
       });
 
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_IconsModule["default"].container)
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].container))
       }, icons.map(function (child) {
         return /*#__PURE__*/_react["default"].cloneElement(child, {
           iconClass: iconClass
@@ -79,9 +81,4 @@ var FloatingIcons = /*#__PURE__*/function (_Component) {
 
 exports["default"] = FloatingIcons;
 FloatingIcons.propTypes = _propTypes.FloatingIcons_propTypes;
-FloatingIcons.defaultProps = _defaultProps.FloatingIcons_defaultProps; // if (__DOCS__) {
-//   FloatingIcons.docs = {
-//     folderName: 'List',
-//     componentGroup: 'FloatingIcons'
-//   };
-// }
+FloatingIcons.defaultProps = _defaultProps.FloatingIcons_defaultProps;

package/lib/list/Icons/Icons.module.css

@@ -3,10 +3,10 @@
   composes: inlineFlex from '../listCommon.module.css';
 }
 .iconStyle {
+  composes: d-cursor-pointer from global;
   color: var(--zdt_icons_default);
   width: var(--zd_size33) ;
   padding: 0 var(--zd_size8) ;
-  cursor: pointer;
 }
 .blueHover:hover {
   color: var(--zdt_icons_hover_blue);

package/lib/list/Icons/ReadUnreadIcon.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
@@ -66,7 +68,7 @@ var ReadUnreadIcon = /*#__PURE__*/function (_React$Component) {
           iconSize = _this$props.iconSize;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, "  ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,

package/lib/list/Icons/SmartIcon.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -65,7 +67,7 @@ var SmartIcon = /*#__PURE__*/function (_Component) {
           className = _this$props.className;
       return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(className ? className : '')),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,

package/lib/list/Icons/__tests__/__snapshots__/AddNewIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AddNewIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`AddNewIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-addTickets"
+      class="zd_font_icons ff icon-addTickets basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/list/Icons/__tests__/__snapshots__/CompleteIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CompleteIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`CompleteIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-checkbox"
+      class="zd_font_icons ff icon-checkbox basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/list/Icons/__tests__/__snapshots__/DeleteIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DeleteIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`DeleteIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-delete"
+      class="zd_font_icons ff icon-delete basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/list/Icons/__tests__/__snapshots__/EditIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`EditIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`EditIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-edit"
+      class="zd_font_icons ff icon-edit basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/list/Icons/__tests__/__snapshots__/FloatingIcons.spec.js.snap

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

package/lib/list/Icons/__tests__/__snapshots__/ReadUnreadIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ReadUnreadIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`ReadUnreadIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-unread"
+      class="zd_font_icons ff icon-unread basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/list/Icons/__tests__/__snapshots__/SmartIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SmartIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`SmartIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-peek"
+      class="zd_font_icons ff icon-peek basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/list/ListLayout/ListLayout.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ListLayoutModule = _interopRequireDefault(require("./ListLayout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -82,7 +84,7 @@ var ListLayout = /*#__PURE__*/function (_Component) {
           ariaPosinset = a11y.ariaPosinset,
           ariaSetsize = a11y.ariaSetsize;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListLayoutModule["default"].container, " ").concat(needHover ? _ListLayoutModule["default"].listHover : '', " ").concat(isActive ? _ListLayoutModule["default"].active : '', " ").concat(_ListLayoutModule["default"][view], " ").concat(onClick && needPointer ? _ListLayoutModule["default"].cursorPointer : '', " ").concat(isHovered ? _ListLayoutModule["default"].hoveredStyle : '', " ").concat(isKeyboardActive ? _ListLayoutModule["default"].keyboardActive : '', " ").concat(containerClass, " "),
+        className: (0, _cssUtility.cn)("".concat(_ListLayoutModule["default"].container, " ").concat(needHover ? _ListLayoutModule["default"].listHover : '', " ").concat(isActive ? _ListLayoutModule["default"].active : '', " ").concat(_ListLayoutModule["default"][view], " ").concat(onClick && needPointer ? _ListLayoutModule["default"].cursorPointer : '', " ").concat(isHovered ? _ListLayoutModule["default"].hoveredStyle : '', " ").concat(isKeyboardActive ? _ListLayoutModule["default"].keyboardActive : '', " ").concat(containerClass, " ")),
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
@@ -137,9 +139,4 @@ var Column = /*#__PURE__*/function (_Component2) {
 }(_react.Component);
 
 exports.Column = Column;
-Column.propTypes = _propTypes.Column_propTypes; // if (__DOCS__) {
-//   ListLayout.docs = {
-//     folderName: 'List',
-//     componentGroup: 'ListLayout'
-//   };
-// }
+Column.propTypes = _propTypes.Column_propTypes;

package/lib/list/ListLayout/ListLayout.module.css

@@ -3,8 +3,8 @@
 }
 
 .container {
-  position: relative;
   composes: varClass;
+  composes: d-relative from global;
 }
 
 .listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
@@ -16,7 +16,7 @@
 }
 
 .cursorPointer {
-  cursor: pointer
+  composes: d-cursor-pointer from global;
 }
 
 /* View */

package/lib/list/ListLayout/__tests__/__snapshots__/ListLayout.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListLayout rendering the defult props 1`] = `
 <DocumentFragment>
@@ -10,7 +10,7 @@ exports[`ListLayout rendering the defult props 1`] = `
     role="listitem"
   >
     <div
-      class="flex fullSize row innerContainer"
+      class="d-flex d-h-full d-w-full d-flex-row innerContainer"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"

package/lib/list/ListStencils/ListStencils.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Stencils = _interopRequireDefault(require("@zohodesk/components/es/Stencils/Stencils"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ListStencilsModule = _interopRequireDefault(require("./ListStencils.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,27 +64,27 @@ var ListStencils = /*#__PURE__*/function (_Component) {
           testId = _this$props.testId,
           customId = _this$props.customId;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListStencilsModule["default"].container, " ").concat(_ListStencilsModule["default"][listType]),
+        className: (0, _cssUtility.cn)("".concat(_ListStencilsModule["default"].container, " ").concat(_ListStencilsModule["default"][listType])),
         "data-test-id": testId ? testId + '_listStencils' : null,
         "data-id": customId ? customId + '_listStencils' : null,
         "aria-hidden": "true"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ListStencilsModule["default"].innerContainer
+        className: (0, _cssUtility.cn)(_ListStencilsModule["default"].innerContainer)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ListStencilsModule["default"].avatar
+        className: (0, _cssUtility.cn)(_ListStencilsModule["default"].avatar)
       }, /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
         shape: "circle",
         size: listType === 'classic' ? 'large' : listType === 'compact' ? 'medium' : 'small'
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ListStencilsModule["default"].detailsColumn
+        className: (0, _cssUtility.cn)(_ListStencilsModule["default"].detailsColumn)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListStencilsModule["default"].detailsInnerColumn)
+        className: (0, _cssUtility.cn)("".concat(_ListStencilsModule["default"].detailsInnerColumn))
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ListStencilsModule["default"].primaryRow
+        className: (0, _cssUtility.cn)(_ListStencilsModule["default"].primaryRow)
       }, /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
         size: "default"
       })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ListStencilsModule["default"].secondaryRow
+        className: (0, _cssUtility.cn)(_ListStencilsModule["default"].secondaryRow)
       }, /*#__PURE__*/_react["default"].createElement(_Stencils["default"], {
         size: "medium"
       }))))));
@@ -94,9 +96,4 @@ var ListStencils = /*#__PURE__*/function (_Component) {
 
 exports["default"] = ListStencils;
 ListStencils.propTypes = _propTypes.propTypes;
-ListStencils.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   ListStencils.docs = {
-//     folderName: 'List',
-//     componentGroup: 'ListStencils'
-//   };
-// }
+ListStencils.defaultProps = _defaultProps.defaultProps;

package/lib/list/ListStencils/ListStencils.module.css

@@ -1,6 +1,5 @@
 .container {
-  position: relative;
-  width: 100% ;
+  composes: d-relative d-w-full from global;
   padding-inline: var(--zd_size30) ;
   padding-block:0 ;
 }
@@ -15,8 +14,7 @@
   margin-inline-end: var(--zd_size25) ;
 }
 .detailsColumn {
-  min-height: 0 ;
-  min-width: 0 ;
+  composes: d-min-w-0 d-min-h-0 from global;
 }
 .primaryRow {
   composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/es/common/common.module.css';

package/lib/list/ListStencils/__tests__/__snapshots__/ListStencils.spec.js.snap

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

package/lib/list/SecondaryText/AccountName.js

@@ -147,9 +147,4 @@ var AccountName = /*#__PURE__*/function (_Component) {
 
 exports["default"] = AccountName;
 AccountName.propTypes = _propTypes.AccountName_propTypes;
-AccountName.defaultProps = _defaultProps.AccountName_defaultProps; // if (__DOCS__) {
-//   AccountName.docs = {
-//     folderName: 'List',
-//     componentGroup: 'AccountName'
-//   };
-// }
+AccountName.defaultProps = _defaultProps.AccountName_defaultProps;

package/lib/list/SecondaryText/ContactName.js

@@ -151,9 +151,4 @@ var ContactName = /*#__PURE__*/function (_Component) {
 
 exports["default"] = ContactName;
 ContactName.propTypes = _propTypes.ContactName_propTypes;
-ContactName.defaultProps = _defaultProps.ContactName_defaultProps; // if (__DOCS__) {
-//   ContactName.docs = {
-//     folderName: 'List',
-//     componentGroup: 'ContactName'
-//   };
-// }
+ContactName.defaultProps = _defaultProps.ContactName_defaultProps;

package/lib/list/SecondaryText/DepartmentText.js

@@ -80,9 +80,4 @@ var DepartmentText = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 exports["default"] = DepartmentText;
-DepartmentText.propTypes = _propTypes.DepartmentText_propTypes; // if (__DOCS__) {
-//   DepartmentText.docs = {
-//     folderName: 'List',
-//     componentGroup: 'DepartmentText'
-//   };
-// }
+DepartmentText.propTypes = _propTypes.DepartmentText_propTypes;

package/lib/list/SecondaryText/Email.js

@@ -110,9 +110,4 @@ var Email = /*#__PURE__*/function (_Component) {
 
 exports["default"] = Email;
 Email.propTypes = _propTypes.Email_propTypes;
-Email.defaultProps = _defaultProps.Email_defaultProps; // if (__DOCS__) {
-//   Email.docs = {
-//     folderName: 'List',
-//     componentGroup: 'EmailText'
-//   };
-// }
+Email.defaultProps = _defaultProps.Email_defaultProps;

package/lib/list/SecondaryText/HappinessRating.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -58,12 +60,12 @@ var HappinessRating = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           src = _this$props.src;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SecondaryTextModule["default"].happinessContainer, " ").concat(className ? className : '')
+        className: (0, _cssUtility.cn)("".concat(_SecondaryTextModule["default"].happinessContainer, " ").concat(className ? className : ''))
       }, /*#__PURE__*/_react["default"].createElement("img", {
-        className: "".concat(_SecondaryTextModule["default"].happinessImg),
+        className: (0, _cssUtility.cn)("".concat(_SecondaryTextModule["default"].happinessImg)),
         src: src
       }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SecondaryTextModule["default"].ratingText,
+        className: (0, _cssUtility.cn)(_SecondaryTextModule["default"].ratingText),
         "data-title": text
       }, "".concat(text, "%")));
     }
@@ -73,9 +75,4 @@ var HappinessRating = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 exports["default"] = HappinessRating;
-HappinessRating.propTypes = _propTypes.HappinessRating_propTypes; // if (__DOCS__) {
-//   HappinessRating.docs = {
-//     folderName: 'List',
-//     componentGroup: 'HappinessRating'
-//   };
-// }
+HappinessRating.propTypes = _propTypes.HappinessRating_propTypes;

package/lib/list/SecondaryText/PhoneNumber.js

@@ -114,9 +114,4 @@ var PhoneNumber = /*#__PURE__*/function (_Component) {
 
 exports["default"] = PhoneNumber;
 PhoneNumber.propTypes = _propTypes.PhoneNumber_propTypes;
-PhoneNumber.defaultProps = _defaultProps.PhoneNumber_defaultProps; // if (__DOCS__) {
-//   PhoneNumber.docs = {
-//     folderName: 'List',
-//     componentGroup: 'PhoneNumberText'
-//   };
-// }
+PhoneNumber.defaultProps = _defaultProps.PhoneNumber_defaultProps;

package/lib/list/SecondaryText/PriorityText.js

@@ -84,9 +84,4 @@ var PriorityText = /*#__PURE__*/function (_Component) {
 
 exports["default"] = PriorityText;
 PriorityText.propTypes = _propTypes.PriorityText_propTypes;
-PriorityText.defaultProps = _defaultProps.PriorityText_defaultProps; // if (__DOCS__) {
-//   PriorityText.docs = {
-//     folderName: 'List',
-//     componentGroup: 'PriorityText'
-//   };
-// }
+PriorityText.defaultProps = _defaultProps.PriorityText_defaultProps;

package/lib/list/SecondaryText/SecondaryText.js

@@ -98,9 +98,4 @@ var SecondaryText = /*#__PURE__*/function (_Component) {
 
 exports["default"] = SecondaryText;
 SecondaryText.propTypes = _propTypes.SecondaryText_propTypes;
-SecondaryText.defaultProps = _defaultProps.SecondaryText_defaultProps; // if (__DOCS__) {
-//   SecondaryText.docs = {
-//     folderName: 'List',
-//     componentGroup: 'SecondaryText'
-//   };
-// }
+SecondaryText.defaultProps = _defaultProps.SecondaryText_defaultProps;