@zohodesk/dot 1.9.17 → 1.9.19

package/lib/form/layout/Field/Field.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldModule = _interopRequireDefault(require("./Field.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -64,13 +66,13 @@ var Field = /*#__PURE__*/function (_Component) {
           containerClass = _this$props.containerClass,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " "), " ").concat(containerClass ? containerClass : ''),
+        className: (0, _cssUtility.cn)("".concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " "), " ").concat(containerClass ? containerClass : '')),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat("fieldWidth_".concat(width), " ", className ? className : '')
+        className: (0, _cssUtility.cn)("".concat("fieldWidth_".concat(width), " ", className ? className : ''))
       }, children)), rowBreak && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _FieldModule["default"].rowBreak
+        className: (0, _cssUtility.cn)(_FieldModule["default"].rowBreak)
       }));
     }
   }]);
@@ -80,8 +82,4 @@ var Field = /*#__PURE__*/function (_Component) {
 
 exports["default"] = Field;
 Field.propTypes = _propTypes.propTypes;
-Field.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Field.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+Field.defaultProps = _defaultProps.defaultProps;

package/lib/form/layout/Field/Field.module.css

@@ -1,5 +1,5 @@
 .container {
-  min-width: 0 ;
+  composes: d-min-w-0 from global;
 }
 .half {
   flex: 1 1 50% ;
@@ -9,14 +9,11 @@
   flex: 1 1 100% ;
 }
 .fieldContaier {
-  display: inline-block;
-  width: 100% ;
-  vertical-align: middle;
+  composes: d-inline-block d-w-full d-align-middle from global;
 }
 .rowBreak {
-  display: block;
-  width: 100% ;
+  composes: d-block d-w-full from global;
 }
 .singleColumn {
-  width: 100% ;
+  composes: d-w-full from global;
 }

package/lib/form/layout/Field/__tests__/__snapshots__/Field.spec.js.snap

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

package/lib/form/layout/Section/Section.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ModuleFormSectionModule = _interopRequireDefault(require("./ModuleFormSection.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -64,11 +66,11 @@ var Section = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": dataId,
         "data-test-id": dataId,
-        className: containerClass ? containerClass : ''
+        className: (0, _cssUtility.cn)(containerClass ? containerClass : '')
       }, title && /*#__PURE__*/_react["default"].createElement("div", {
-        className: titleClass ? titleClass : ''
+        className: (0, _cssUtility.cn)(titleClass ? titleClass : '')
       }, title), /*#__PURE__*/_react["default"].createElement("div", {
-        className: " ".concat(column == 'single' ? _ModuleFormSectionModule["default"].singleColumn : '', " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)(" ".concat(column == 'single' ? _ModuleFormSectionModule["default"].singleColumn : '', " ").concat(className ? className : '')),
         "data-id": formName && formName,
         "data-test-id": formName && formName
       }, this.props.children));
@@ -79,8 +81,4 @@ var Section = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 exports["default"] = Section;
-Section.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Section.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+Section.propTypes = _propTypes.propTypes;

package/lib/form/layout/Section/__tests__/__snapshots__/Section.spec.js.snap

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

package/lib/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -17,6 +17,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SetupDetailLayoutModule = _interopRequireDefault(require("./SetupDetailLayout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -114,7 +116,7 @@ var SetupDetailLayout = /*#__PURE__*/function (_React$Component) {
         className: _SetupDetailLayoutModule["default"].infoText
       }, helpInfoTitle), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("span", {
         onClick: this.toggleHelpInfo,
-        className: _SetupDetailLayoutModule["default"].infoClose,
+        className: (0, _cssUtility.cn)(_SetupDetailLayoutModule["default"].infoClose),
         "data-title": closeText,
         "data-id": "".concat(dataId, "_close"),
         "data-test-id": "".concat(dataId, "_close")
@@ -133,11 +135,7 @@ var SetupDetailLayout = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = SetupDetailLayout;
 SetupDetailLayout.propTypes = _propTypes.SetupDetailLayout_propTypes;
-SetupDetailLayout.defaultProps = _defaultProps.SetupDetailLayout_defaultProps; // if (__DOCS__) {
-//   SetupDetailLayout.docs = {
-//     componentGroup: 'Template'
-//   };
-// }
+SetupDetailLayout.defaultProps = _defaultProps.SetupDetailLayout_defaultProps;
 
 var SetupHeader = /*#__PURE__*/function (_Component) {
   _inherits(SetupHeader, _Component);
@@ -181,7 +179,7 @@ var SetupHeader = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _SetupDetailLayoutModule["default"].back
       }, needBack ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SetupDetailLayoutModule["default"].backIcon,
+        className: (0, _cssUtility.cn)(_SetupDetailLayoutModule["default"].backIcon),
         onClick: onBackClick,
         "data-title": backText,
         "data-id": "".concat(dataId, "_back"),
@@ -210,9 +208,9 @@ var SetupHeader = /*#__PURE__*/function (_Component) {
         alignBox: "row",
         className: _SetupDetailLayoutModule["default"].rightPanel
       }, getRightPlaceHolder())) : null, needHelpInfo ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, needHelpInfoWrapper ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SetupDetailLayoutModule["default"].helpInfoCont
+        className: (0, _cssUtility.cn)(_SetupDetailLayoutModule["default"].helpInfoCont)
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SetupDetailLayoutModule["default"].helpInfo,
+        className: (0, _cssUtility.cn)(_SetupDetailLayoutModule["default"].helpInfo),
         onClick: openHelpInfo,
         "data-title": infoText,
         "data-id": "".concat(dataId, "_info"),
@@ -220,7 +218,7 @@ var SetupHeader = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-info31"
       }))) : /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_SetupDetailLayoutModule["default"].helpInfo, " ").concat(_SetupDetailLayoutModule["default"].mr15),
+        className: (0, _cssUtility.cn)("".concat(_SetupDetailLayoutModule["default"].helpInfo, " ").concat(_SetupDetailLayoutModule["default"].mr15)),
         onClick: openHelpInfo,
         "data-title": infoText,
         "data-id": "".concat(dataId, "_info"),

package/lib/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -7,16 +7,14 @@
   width: var(--zd_size60) ;
 }
 .backIcon {
+  composes: d-inline-block d-text-center d-cursor-pointer from global;
   height: var(--zd_size30) ;
   width: var(--zd_size30) ;
   font-size: var(--zd_font_size12) ;
-  display: inline-block;
   color: var(--zdt_setupdetail_backicon);
   margin-inline-start: var(--zd_size19) ;
   line-height: 2.5;
-  text-align: center;
   border-radius: 50%;
-  cursor: pointer;
 }
 
 .backIcon:hover {
@@ -35,7 +33,7 @@
   composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
 }
 .helpInfoCont {
-  position: absolute;
+  composes: d-absolute from global;
   z-index: 10;
   padding-block: var(--zd_size12) 0 ;
   padding-inline: 0 var(--zd_size15) ;
@@ -47,16 +45,14 @@
   left: 0 ;
 }
 .helpInfo {
+  composes: d-inline-block d-text-center d-cursor-pointer from global;
   line-height: 2.3636;
   height: var(--zd_size28) ;
   width: var(--zd_size28) ;
   color: var(--zdt_setupdetail_helpinfo_text);
   font-size: var(--zd_font_size11) ;
-  display: inline-block;
   border: 1px solid var(--zdt_setupdetail_helpinfo);
   border-radius: 2px;
-  text-align: center;
-  cursor: pointer;
 }
 .mr15 {
   margin-inline-end: var(--zd_size15) ;
@@ -70,8 +66,8 @@
   padding-inline: var(--zd_size60) var(--zd_size25) ;
 }
 .popup {
+  composes: d-absolute from global;
   z-index: 3;
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
   width: var(--zd_size330) ;
@@ -103,11 +99,11 @@
 }
 
 .infoIcon {
+  composes: d-text-center from global;
   height: var(--zd_size26) ;
   width: var(--zd_size26) ;
   font-size: var(--zd_font_size12) ;
   line-height: 2;
-  text-align: center;
   border: 1px solid var(--zdt_setupdetail_infoicon_border);
   border-radius: 2px;
 }
@@ -119,9 +115,9 @@
 }
 
 .infoClose {
+  composes: d-cursor-pointer from global;
   font-size: var(--zd_font_size28) ;
   color: var(--zdt_setupdetail_infoclose);
-  cursor: pointer;
 }
 
 .infoFooter {

package/lib/layout/SetupDetailLayout/__tests__/__snapshots__/SetupDetailLayout.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SetupDetailLayout rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="SetupDetailLayout"
     data-scroll="true"
     data-selector-id="container"

package/lib/layout/SubtabLayout/SubtabLayout.js

@@ -19,6 +19,8 @@ var _Card = require("@zohodesk/components/es/Card");
 
 var _PlusIcon = _interopRequireDefault(require("../../PlusIcon/PlusIcon"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SubtabLayoutModule = _interopRequireDefault(require("./SubtabLayout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -95,7 +97,7 @@ var SubtabHeader = /*#__PURE__*/function (_React$Component) {
         adjust: getRightPlaceHolder ? true : false,
         className: leftClassName
       }, label ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SubtabLayoutModule["default"].label
+        className: (0, _cssUtility.cn)(_SubtabLayoutModule["default"].label)
       }, label) : null, getLeftPlaceHolder), getRightPlaceHolder && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
@@ -238,8 +240,4 @@ var SubtabLayout = /*#__PURE__*/function (_React$Component4) {
 
 exports["default"] = SubtabLayout;
 SubtabLayout.defaultProps = _defaultProps.SubtabLayout_defaultProps;
-SubtabLayout.propTypes = _propTypes.SubtabLayout_propTypes; // if (__DOCS__) {
-//   SubtabLayout.docs = {
-//     componentGroup: 'Template'
-//   };
-// }
+SubtabLayout.propTypes = _propTypes.SubtabLayout_propTypes;

package/lib/layout/SubtabLayout/SubtabLayout.module.css

@@ -4,8 +4,8 @@
 
 .tabHead,
 .shadowStyle {
-  position: relative;
   composes: varClass;
+  composes: d-relative from global;
 }
 
 .tabHead, .shadowStyle {
@@ -17,7 +17,7 @@
 }
 
 .plusIconLine {
-  position: relative;
+  composes: d-relative from global;
   z-index: 2;
 }
 
@@ -131,7 +131,7 @@
 }
 
 .cursor {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .footer {

package/lib/layout/SubtabLayout/__tests__/__snapshots__/SubtabLayout.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SubtabLayout rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="subTabLayout"
     data-scroll="true"
     data-selector-id="container"

package/lib/list/AvatarFlip/AvatarFlip.js

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

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AvatarFlip rendering the defult props 1`] = `
 <DocumentFragment>
@@ -13,14 +13,14 @@ exports[`AvatarFlip rendering the defult props 1`] = `
       data-test-id="tic-list-filp"
     >
       <div
-        class="flex fullSize column alignItems_center justifyContent_center front"
+        class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center front"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
           aria-checked="false"
-          class="inlineFlex row alignItems_center container pointer primary"
+          class="d-inline-flex d-flex-row d-items-center container pointer primary"
           data-id="listViewCheckBox_undefined"
           data-selector-id="checkbox_undefined"
           data-test-id="listViewCheckBox_undefined"
@@ -28,7 +28,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
           tabindex="0"
         >
           <div
-            class="noShrink boxContainer medium filled"
+            class="d-flex-shrink-0 boxContainer medium filled"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -59,7 +59,7 @@ exports[`AvatarFlip rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="flex fullSize column alignItems_center justifyContent_center back"
+        class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center back"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/lib/list/BluePrintStatus/BluePrintStatus.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _BluePrintStatusModule = _interopRequireDefault(require("./BluePrintStatus.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -53,7 +55,7 @@ var BluePrintStatus = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var title = this.props.title;
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_BluePrintStatusModule["default"].container)
+        className: (0, _cssUtility.cn)("".concat(_BluePrintStatusModule["default"].container))
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-blueprint",
         title: title,
@@ -66,8 +68,4 @@ var BluePrintStatus = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = BluePrintStatus;
-BluePrintStatus.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   BluePrintStatus.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+BluePrintStatus.propTypes = _propTypes.propTypes;

package/lib/list/BluePrintStatus/BluePrintStatus.module.css

@@ -9,6 +9,6 @@
   color: var(--dot_shuttleGrey);
 } */
 .iconStyle {
-  display: block;
+  composes: d-block from global;
   font-size: var(--zd_font_size10) ;
 }

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

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

package/lib/list/Comment/Comment.js

@@ -17,6 +17,8 @@ var _icons = require("@zohodesk/icons");
 
 var _Button = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/Button"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _CommentModule = _interopRequireDefault(require("./Comment.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -76,7 +78,7 @@ var Comment = /*#__PURE__*/function (_Component) {
         name: "ZD-TK-commentLine",
         iconClass: _CommentModule["default"].commentIcon
       }), count && /*#__PURE__*/_react["default"].createElement("span", {
-        className: _CommentModule["default"].count
+        className: (0, _cssUtility.cn)(_CommentModule["default"].count)
       }, count));
     }
   }]);
@@ -86,9 +88,4 @@ var Comment = /*#__PURE__*/function (_Component) {
 
 exports["default"] = Comment;
 Comment.defaultProps = _defaultProps.defaultProps;
-Comment.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Comment.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Comment'
-//   };
-// }
+Comment.propTypes = _propTypes.propTypes;

package/lib/list/Comment/Comment.module.css

@@ -4,20 +4,18 @@
 .container {
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
+  composes: d-relative d-cursor-pointer from global;
   color: var(--icon_color);
   padding-inline: var(--zd_size2) ;
   padding-block:0 ;
-  cursor: pointer;
 }
 .container:hover {
   --icon_color: var(--zdt_comment_hover_iconText);
 }
 .count {
-  position: absolute;
+  composes: d-absolute d-text-center from global;
   top: var(--zd_size1) ;
   font-size: var(--zd_font_size9) ;
-  text-align: center;
 }
 [dir=ltr] .count {
   left: 100% ;

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

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

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -155,11 +155,5 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
 
 DepartmentDropDown.defaultProps = _defaultProps.defaultProps;
 DepartmentDropDown.propTypes = _propTypes.propTypes;
-var _default = DepartmentDropDown; // if (__DOCS__) {
-//   DepartmentDropDown.docs = {
-//     folderName: 'List',
-//     componentGroup: 'DepartmentDropDown'
-//   };
-// }
-
+var _default = DepartmentDropDown;
 exports["default"] = _default;

package/lib/list/DepartmentDropDown/DepartmentDropDown.module.css

@@ -1,5 +1,5 @@
 .departmentBox {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .departmentBox :global .toggleDropIcon {
   color: var(--zdt_departmentdropdown_default_text);

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DepartmentDropDown rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
     data-selector-id="toggleDropdown"
   >
     <div
-      class="flex row alignItems_center"
+      class="d-flex d-flex-row d-items-center"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -16,14 +16,14 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
         aria-expanded="false"
         aria-haspopup="true"
         aria-labelledby="1"
-        class="flex row alignItems_center buttonReset cursor departmentBox"
+        class="d-flex d-flex-row d-items-center buttonReset cursor departmentBox"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <span
           aria-hidden="true"
-          class="shrink value toggleDropText"
+          class="d-min-w-0 d-flex-shrink value toggleDropText"
           data-id="undefined_value"
           data-selector-id="box"
           data-test-id="undefined_value"
@@ -35,7 +35,7 @@ exports[`DepartmentDropDown rendering the defult props 1`] = `
         </span>
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-down toggleDropIcon arrow default_arrow"
+          class="zd_font_icons ff icon-down basic d-inline-block d-align-middle toggleDropIcon arrow default_arrow"
           data-id="statusdownarrow"
           data-selector-id="fontIcon"
           data-test-id="statusdownarrow"

package/lib/list/Dot/Dot.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DotModule = _interopRequireDefault(require("./Dot.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,7 +61,7 @@ var Dot = /*#__PURE__*/function (_Component) {
           className = _this$props.className,
           spacingType = _this$props.spacingType;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DotModule["default"].dot, " ").concat(_DotModule["default"][spacingType], " ").concat(className)
+        className: (0, _cssUtility.cn)("".concat(_DotModule["default"].dot, " ").concat(_DotModule["default"][spacingType], " ").concat(className))
       }, ".");
     }
   }]);

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

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

package/lib/list/DotNew/DotNew.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DotNewModule = _interopRequireDefault(require("./DotNew.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -60,7 +62,7 @@ var DotNew = /*#__PURE__*/function (_Component) {
           dataTitle = _this$props.dataTitle,
           size = _this$props.size;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DotNewModule["default"].container, " ").concat(_DotNewModule["default"][size], " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_DotNewModule["default"].container, " ").concat(_DotNewModule["default"][size], " ").concat(className ? className : '')),
         "data-title": dataTitle
       });
     }
@@ -71,9 +73,4 @@ var DotNew = /*#__PURE__*/function (_Component) {
 
 exports["default"] = DotNew;
 DotNew.propTypes = _propTypes.propTypes;
-DotNew.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   DotNew.docs = {
-//     folderName: 'List',
-//     componentGroup: 'DotNew'
-//   };
-// }
+DotNew.defaultProps = _defaultProps.defaultProps;

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

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