@zohodesk/dot 1.9.18 → 1.9.20

package/lib/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js

@@ -6,6 +6,8 @@ var _react2 = require("@testing-library/react");
 
 var _StatusDropdown = _interopRequireDefault(require("../StatusDropdown"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('StatusDropdown', function () {
@@ -18,7 +20,7 @@ describe('StatusDropdown', function () {
     var renderTargetElement = function renderTargetElement(_ref) {
       var isPopupOpen = _ref.isPopupOpen;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: isPopupOpen ? 'popupOpened' : 'popupClosed'
+        className: (0, _cssUtility.cn)(isPopupOpen ? 'popupOpened' : 'popupClosed')
       }, "Target Element");
     };
 

package/lib/list/status/StatusDropdown/__tests__/__snapshots__/StatusDropdown.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`StatusDropdown rendering target element 1`] = `
 <DocumentFragment>
@@ -23,21 +23,21 @@ exports[`StatusDropdown rendering the defult props 1`] = `
       aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
-      class="flex row alignItems_center container buttonReset cursor"
+      class="d-flex d-flex-row d-items-center container buttonReset cursor"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
       tabindex="0"
     >
       <span
-        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"
       />
       <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/status/StatusListItem/StatusListItem.js

@@ -19,6 +19,8 @@ var _icons = require("@zohodesk/icons");
 
 var _CssProvider = _interopRequireDefault(require("@zohodesk/components/es/Provider/CssProvider"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _StatusListItemModule = _interopRequireDefault(require("./StatusListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -162,7 +164,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         shrink: true,
         className: needMultiLineText ? _StatusListItemModule["default"].multiLineValue : _StatusListItemModule["default"].value
       }, value), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children && children))), needTick && active ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _StatusListItemModule["default"].tickIcon,
+        className: (0, _cssUtility.cn)(_StatusListItemModule["default"].tickIcon),
         "aria-hidden": ariaHidden
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
@@ -176,9 +178,4 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = StatusListItem;
 StatusListItem.defaultProps = _defaultProps.defaultProps;
-StatusListItem.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   StatusListItem.docs = {
-//     componentGroup: 'StatusListItem',
-//     folderName: 'List'
-//   };
-// }
+StatusListItem.propTypes = _propTypes.propTypes;

package/lib/list/status/StatusListItem/StatusListItem.module.css

@@ -6,12 +6,11 @@
 
 .list {
   composes: varClass;
+  composes: d-relative d-cursor-pointer from global;
   color: var(--zdt_statuslistitem_list_text);
   font-size: var(--statuslistitem_font_size);
-  position: relative;
   list-style: none;
   min-height: var(--statuslistitem_min_height);
-  cursor: pointer;
 }
 [dir=ltr] .withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
@@ -69,8 +68,8 @@
   color: var(--zdt_statuslistitem_secondary_effect_text);
 }
 .tickIcon {
+  composes: d-absolute from global;
   color: var(--zdt_statuslistitem_tickicon);
-  position: absolute;
   top:50% ;
   transform: translateY(-50%);
 }
@@ -88,12 +87,12 @@
 }
 .contentWrapper {
   composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
-  width: 100% ;
+  composes: d-w-full from global;
 }
 /* Status Type */
 .statusType{
-  position: relative;
   composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative from global;
   min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
   min-width: var(--zd_size20) ;
 }

package/lib/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`StatusListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium default withBorder"
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="undefined"
     data-selector-id="container"
@@ -11,37 +11,37 @@ exports[`StatusListItem rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="noShrink alignSelf_start statusType black"
+        class="d-flex-shrink-0 d-self-start statusType black"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="flexible basis_zero shrink"
+        class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex fullSize row alignItems_center"
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="shrink value"
+            class="d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           />
           <div
-            class="noShrink"
+            class="d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/lib/lookup/EmptyPage/EmptyPage.js

@@ -21,6 +21,8 @@ var _EmptyContact = _interopRequireDefault(require("@zohodesk/svg/es/emptystate/
 
 var _EmptyProducts = _interopRequireDefault(require("@zohodesk/svg/es/emptystate/version3/EmptyProducts"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LookupEmptyPageModule = _interopRequireDefault(require("./LookupEmptyPage.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -99,11 +101,11 @@ var EmptyPage = /*#__PURE__*/function (_Component) {
           type = _this$props.type,
           title = _this$props.title;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _LookupEmptyPageModule["default"].container,
+        className: (0, _cssUtility.cn)(_LookupEmptyPageModule["default"].container),
         "data-id": "empty_".concat(type),
         "data-test-id": "empty_".concat(type)
       }, this.renderEmptyState(type), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _LookupEmptyPageModule["default"].contentDiv
+        className: (0, _cssUtility.cn)(_LookupEmptyPageModule["default"].contentDiv)
       }, title));
     }
   }]);
@@ -113,8 +115,4 @@ var EmptyPage = /*#__PURE__*/function (_Component) {
 
 exports["default"] = EmptyPage;
 EmptyPage.propTypes = _propTypes.propTypes;
-EmptyPage.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   EmptyPage.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+EmptyPage.defaultProps = _defaultProps.defaultProps;

package/lib/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -1,5 +1,5 @@
 .container {
-  text-align: center;
+  composes: d-text-center from global;
 }
 
 .image {

package/lib/lookup/EmptyPage/__tests__/__snapshots__/EmptyPage.spec.js.snap

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

package/lib/lookup/Lookup/Lookup.js

@@ -19,6 +19,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LookupModule = _interopRequireDefault(require("./Lookup.module.css"));
 
 var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
@@ -161,7 +163,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
         "aria-label": ariaLabel,
         "aria-modal": ariaModal,
         id: htmlId,
-        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")], " ").concat(_LookupModule["default"]["".concat(placement, "Box")], " ").concat(lookupClass ? lookupClass : ''),
+        className: (0, _cssUtility.cn)("".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")], " ").concat(_LookupModule["default"]["".concat(placement, "Box")], " ").concat(lookupClass ? lookupClass : '')),
         "data-id": dataId,
         "data-test-id": dataId
       }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -216,8 +218,4 @@ var Lookup = /*#__PURE__*/function (_Component) {
 
 exports["default"] = Lookup;
 Lookup.propTypes = _propTypes.propTypes;
-Lookup.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Lookup.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+Lookup.defaultProps = _defaultProps.defaultProps;

package/lib/lookup/Lookup/Lookup.module.css

@@ -13,24 +13,22 @@
 }
 
 .overlayLayer {
-  position: absolute;
   inset: 0 ;
   composes: blockEvent from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-absolute from global;
 }
 
 .box {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .topCenterBox {
-  height: 100% ;
-  width: 100% ;
+  composes: d-size-full from global;
   margin: auto ;
 }
 
 .centerBox {
-  max-height: 100% ;
-  width: 100% ;
+  composes: d-w-full d-max-h-full from global;
   margin: auto ;
 }
 
@@ -39,7 +37,7 @@
 }
 
 .containerWidth {
-  width: 100% ;
+  composes: d-w-full from global;
 }
 
 /* Size */

package/lib/lookup/Lookup/__tests__/__snapshots__/Lookup.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Lookup snapshot -  Render with a11y attributes 1`] = `
 <DocumentFragment>
@@ -8,7 +8,7 @@ exports[`Lookup snapshot -  Render with a11y attributes 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"
@@ -25,7 +25,7 @@ exports[`Lookup snapshot -  Render with childAnimationName=expand 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"
@@ -42,7 +42,7 @@ exports[`Lookup snapshot -  Render with children 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"
@@ -59,7 +59,7 @@ exports[`Lookup snapshot -  Render with custom classes 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"
@@ -76,7 +76,7 @@ exports[`Lookup snapshot -  Render with customProps 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"
@@ -93,7 +93,7 @@ exports[`Lookup snapshot -  Render with dataId 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"
@@ -107,7 +107,7 @@ exports[`Lookup snapshot -  Render with default props 1`] = `<DocumentFragment /
 exports[`Lookup snapshot -  Render with hasFreezeLayer=false 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row justifyContent_center overlayLayer"
+    class="d-flex d-h-full d-w-full d-flex-row d-justify-center overlayLayer"
     data-id="fldValue"
     data-selector-id="container"
     data-test-id="fldValue"
@@ -120,7 +120,7 @@ exports[`Lookup snapshot -  Render with hasFreezeLayer=false 1`] = `
       tabindex="-1"
     >
       <div
-        class="flex column coverwrap containerWidth"
+        class="d-flex d-flex-col coverwrap containerWidth"
         data-drag-container="true"
         data-id="containerComponent"
         data-selector-id="container"
@@ -139,7 +139,7 @@ exports[`Lookup snapshot -  Render with htmlId 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"
@@ -156,7 +156,7 @@ exports[`Lookup snapshot -  Render with isActive=true 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"
@@ -173,7 +173,7 @@ exports[`Lookup snapshot -  Render with isMinHeight=true 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"
@@ -190,7 +190,7 @@ exports[`Lookup snapshot -  Render with placement=center 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -207,7 +207,7 @@ exports[`Lookup snapshot -  Render with placement=topCenter 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"
@@ -224,7 +224,7 @@ exports[`Lookup snapshot -  Render with size=full 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"
@@ -241,7 +241,7 @@ exports[`Lookup snapshot -  Render with size=large 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"
@@ -258,7 +258,7 @@ exports[`Lookup snapshot -  Render with size=small 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"
@@ -275,7 +275,7 @@ exports[`Lookup snapshot -  Render with size=xlarge 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"
@@ -292,7 +292,7 @@ exports[`Lookup snapshot -  Render with size=xmedium 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/lookup/Section/__tests__/__snapshots__/Section.spec.js.snap

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Section Render with alignBox as column 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column section"
+    class="d-flex d-h-full d-w-full d-flex-col section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <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"
@@ -21,13 +21,13 @@ exports[`Section Render with alignBox as column 1`] = `
 exports[`Section Render with alignBox as column-reverse 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize columnReverse section"
+    class="d-flex d-h-full d-w-full d-flex-col-reverse section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <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"
@@ -39,13 +39,13 @@ exports[`Section Render with alignBox as column-reverse 1`] = `
 exports[`Section Render with alignBox as row 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row section"
+    class="d-flex d-h-full d-w-full d-flex-row section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <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"
@@ -57,13 +57,13 @@ exports[`Section Render with alignBox as row 1`] = `
 exports[`Section Render with alignBox as row-reverse 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize rowReverse section"
+    class="d-flex d-h-full d-w-full d-flex-row-reverse section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <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"
@@ -75,13 +75,13 @@ exports[`Section Render with alignBox as row-reverse 1`] = `
 exports[`Section Render with children 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column section"
+    class="d-flex d-h-full d-w-full d-flex-col section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <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"
@@ -97,13 +97,13 @@ exports[`Section Render with children 1`] = `
 exports[`Section Render with className 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column section custom-class"
+    class="d-flex d-h-full d-w-full d-flex-col section custom-class"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <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"
@@ -115,13 +115,13 @@ exports[`Section Render with className 1`] = `
 exports[`Section Render with customProps 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column alignItems_center section"
+    class="d-flex d-h-full d-w-full d-flex-col d-items-center section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -133,13 +133,13 @@ exports[`Section Render with customProps 1`] = `
 exports[`Section Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column section"
+    class="d-flex d-h-full d-w-full d-flex-col section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <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"

package/lib/lookup/header/Close/Close.js

@@ -74,8 +74,4 @@ var Close = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = Close;
 Close.propTypes = _propTypes.propTypes;
-Close.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Close.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+Close.defaultProps = _defaultProps.defaultProps;

package/lib/lookup/header/Close/LookupClose.module.css

@@ -1,12 +1,11 @@
 .container {
+  composes: d-text-center d-cursor-pointer from global;
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
   line-height: 2.7778;
   color: var(--zdt_lookupclose_default_text);
   transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
   font-size: var(--zd_font_size9) ;
-  text-align: center;
-  cursor: pointer;
   border-radius: 50%;
 }
 .container:hover {

package/lib/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlphabeticList rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="closeButton"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -12,7 +12,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-cross icon_button_center"
+      class="zd_font_icons ff icon-cross basic d-inline-block d-align-middle icon_button_center"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/lookup/header/ModuleHeader/ModuleHeader.js

@@ -21,6 +21,8 @@ var _Search = _interopRequireDefault(require("../Search/Search"));
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _lookupHeaderCommonModule = _interopRequireDefault(require("../lookupHeaderCommon.module.css"));
 
 var _lookupHeaderCommonResponsiveModule = _interopRequireDefault(require("../lookupHeaderCommonResponsive.module.css"));
@@ -106,7 +108,7 @@ function ModuleHeader(props) {
     text: title,
     htmlId: htmlId
   })), (0, _renderNode["default"])(renderTitleChildren)), (0, _renderNode["default"])(renderSecondaryContent), miniDescription && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _lookupHeaderCommonModule["default"].para
+    className: (0, _cssUtility.cn)(_lookupHeaderCommonModule["default"].para)
   }, miniDescription)), needSearch && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     className: "".concat(_lookupHeaderCommonModule["default"].searchContainer, " ").concat(_lookupHeaderCommonResponsiveModule["default"].searchContainer)
   }, /*#__PURE__*/_react["default"].createElement(_Search["default"], _extends({
@@ -120,7 +122,7 @@ function ModuleHeader(props) {
     getRef: getSearchBoxRef,
     onKeyDown: onSearchKeyDown
   }))), children ? children : '', onLookupClose ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_lookupHeaderCommonModule["default"].closeContainer, " ").concat(customCloseClass)
+    className: (0, _cssUtility.cn)("".concat(_lookupHeaderCommonModule["default"].closeContainer, " ").concat(customCloseClass))
   }, /*#__PURE__*/_react["default"].createElement(_Close["default"], _extends({
     dataId: "close"
   }, customCloseProps, {