@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

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

@@ -4,8 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 var defaultProps = {
   palette: 'default',
+  customClass: _constants.DUMMY_OBJECT,
+  customProps: _constants.DUMMY_OBJECT,
+  isDraggable: true,
   dragBoundaryLimit: {
     top: 0,
     left: 50,

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

@@ -7,12 +7,22 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("@zohodesk/components/es/Layout/props/propTypes");
+
+var _propTypes3 = require("../../Title/props/propTypes");
+
+var _propTypes4 = require("../../Close/props/propTypes");
+
+var _propTypes5 = require("../../Search/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
   getSearchBoxRef: _propTypes["default"].func,
   miniDescription: _propTypes["default"].string,
   needOnTypeSearch: _propTypes["default"].bool,
+  renderTitleChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderSecondaryContent: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   needSearch: _propTypes["default"].bool,
   onLookupClose: _propTypes["default"].func,
   onSearch: _propTypes["default"].func,
@@ -20,12 +30,26 @@ var propTypes = {
   searchPlaceHolder: _propTypes["default"].string,
   searchStr: _propTypes["default"].string,
   title: _propTypes["default"].string,
+  htmlId: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   closeTitle: _propTypes["default"].string,
   onSearchKeyDown: _propTypes["default"].func,
   palette: _propTypes["default"].oneOf(['default', 'white']),
   children: _propTypes["default"].any,
   childNearTitle: _propTypes["default"].any,
-  dragBoundaryLimit: _propTypes["default"].object
+  customClass: _propTypes["default"].shape({
+    container: _propTypes["default"].string,
+    title: _propTypes["default"].string,
+    close: _propTypes["default"].string
+  }),
+  isDraggable: _propTypes["default"].bool,
+  dragBoundaryLimit: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    container: _propTypes["default"].shape(_propTypes2.ContainerProps),
+    titleWrapper: _propTypes["default"].shape(_propTypes2.ContainerProps),
+    title: _propTypes["default"].shape(_propTypes3.propTypes),
+    search: _propTypes["default"].shape(_propTypes5.Search_propTypes),
+    close: _propTypes["default"].shape(_propTypes4.propTypes)
+  })
 };
 exports.propTypes = propTypes;

package/lib/lookup/header/Search/Search.js

@@ -27,6 +27,8 @@ var _debounce = require("@zohodesk/components/es/utils/debounce");
 
 var _Common = require("@zohodesk/components/es/utils/Common");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LookupSearchModule = _interopRequireDefault(require("./LookupSearch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -237,7 +239,7 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         isCover: false,
         alignBox: "row",
         align: "vertical",
-        className: "\n          ".concat(style.wrapper, " ").concat(isBoxed ? style.boxType : style.borderType, " \n          ").concat(isActiveState ? "".concat(style.active, " ").concat(activeClass || '') : '', "\n          ").concat(isFocusWidth ? style.focusWidth : '', "\n        ")
+        className: "\n          ".concat(style.wrapper, " ").concat(isBoxed ? style.boxType : style.borderType, " \n          ").concat(isFocusWidth ? style.focusWidth : '', "  ").concat(isActiveState ? "".concat(style.active, " ").concat(activeClass || '') : '', "\n        ")
       }, typeof renderChildren == 'function' ? renderChildren({
         isActive: isActive,
         isFocus: isFocus
@@ -259,7 +261,7 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         size: "11",
         iconClass: "".concat(style.searchIcon, " ").concat(isBoxed ? style.searchIconBox : '')
       }) : null, hasSeparator ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: style.separator
+        className: (0, _cssUtility.cn)(style.separator)
       }) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         onClick: _Common.cancelBubblingEffect

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

@@ -3,32 +3,29 @@
 exports[`Search rendering the customized style search 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper searchWrapperClass borderType 
-          
-          
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper searchWrapperClass borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer    effect     container   flex rowdir"
+        class="flex row varClass customContainer effect container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -39,13 +36,13 @@ exports[`Search rendering the customized style search 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -60,32 +57,29 @@ exports[`Search rendering the customized style search 1`] = `
 exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper borderType 
-          
-          
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer    effect     container   flex rowdir"
+        class="flex row varClass customContainer effect container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -96,13 +90,13 @@ exports[`Search rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -117,32 +111,29 @@ exports[`Search rendering the defult props 1`] = `
 exports[`Search rendering the prop hasSeparator is false 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper borderType 
-          
-          
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer    effect     container   flex rowdir"
+        class="flex row varClass customContainer effect container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -153,13 +144,13 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -174,10 +165,7 @@ exports[`Search rendering the prop hasSeparator is false 1`] = `
 exports[`Search rendering the prop hasSeparator is true 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper borderType 
-          
-          
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper borderType"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -186,23 +174,23 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
       class="separator"
     />
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer    effect     container   flex rowdir"
+        class="flex row varClass customContainer effect container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -213,13 +201,13 @@ exports[`Search rendering the prop hasSeparator is true 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
@@ -238,16 +226,13 @@ exports[`Search rendering the renderChildren props via function 1`] = `
     data-selector-id="toggleDropdown"
   >
     <div
-      class="flex rowdir vCenter"
+      class="flex row alignItems_center"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="wrapper borderType 
-          
-          
-         flex rowdir vCenter"
+        class="flex row alignItems_center wrapper borderType"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -256,23 +241,23 @@ exports[`Search rendering the renderChildren props via function 1`] = `
           All Fields
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer    effect     container   flex rowdir"
+            class="flex row varClass customContainer effect container"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <input
-                class="  container small  default  effect  borderColor_default  "
+                class="container small default effect borderColor_default"
                 data-a11y-autofocus="true"
                 data-id="textBoxIcon"
                 data-selector-id="textBoxIcon"
@@ -283,13 +268,13 @@ exports[`Search rendering the renderChildren props via function 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -306,32 +291,29 @@ exports[`Search rendering the renderChildren props via function 1`] = `
 exports[`Search rendering the search active 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper borderType 
-          active 
-          focusWidth
-         flex rowdir vCenter"
+    class="flex row alignItems_center wrapper borderType focusWidth active"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="varClass customContainer    effect  active   container   flex rowdir"
+        class="flex row varClass customContainer effect active container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
-            class="  container small  default  effect  borderColor_default  "
+            class="container small default effect borderColor_default"
             data-a11y-autofocus="true"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
@@ -342,13 +324,13 @@ exports[`Search rendering the search active 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

package/lib/lookup/header/TicketHeader/TicketHeader.js

@@ -25,6 +25,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _useDragger = _interopRequireDefault(require("../../../Hooks/Dragger/useDragger"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _lookupHeaderCommonModule = _interopRequireDefault(require("../lookupHeaderCommon.module.css"));
 
 var _lookupHeaderCommonResponsiveModule = _interopRequireDefault(require("../lookupHeaderCommonResponsive.module.css"));
@@ -95,7 +97,7 @@ function TicketHeader(props) {
     className: "".concat(_TicketHeaderModule["default"].dropdown),
     dataId: "filterIdselected"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TicketHeaderModule["default"].menuWrapper
+    className: (0, _cssUtility.cn)(_TicketHeaderModule["default"].menuWrapper)
   }, /*#__PURE__*/_react["default"].createElement(_ViewDropDown["default"], {
     dropBoxSize: "small",
     emptyMessage: menuEmptyMessage,
@@ -116,7 +118,7 @@ function TicketHeader(props) {
     needOnTypeSearch: needOnTypeSearch,
     getRef: getSearchBoxRef
   })) : null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _lookupHeaderCommonModule["default"].closeContainer
+    className: (0, _cssUtility.cn)(_lookupHeaderCommonModule["default"].closeContainer)
   }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
     onClose: onLookupClose,
     dataId: "close"

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

@@ -3,32 +3,32 @@
 exports[`TicketHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container default undefined container flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container default container"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="innerContainer flex coldir wrap"
+        class="flex column wrap innerContainer"
         data-id="lookupView"
         data-selector-id="container"
         data-test-id="lookupView"
       >
         <div
-          class="title shrinkOff"
+          class="noShrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title default "
+            class="title default"
           />
         </div>
       </div>
@@ -38,7 +38,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
     >
       <button
         aria-pressed="false"
-        class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+        class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
         data-id="close"
         data-ishtml="false"
         data-selector-id="iconButton"
@@ -46,7 +46,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross   icon_button_center  "
+          class="zd_font_icons basic icon-cross icon_button_center"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/lookup/header/Title/Title.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LookupTitleModule = _interopRequireDefault(require("./LookupTitle.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -58,9 +60,11 @@ var Title = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           text = _this$props.text,
           palette = _this$props.palette,
-          isBold = _this$props.isBold;
+          isBold = _this$props.isBold,
+          htmlId = _this$props.htmlId;
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_LookupTitleModule["default"].title, " ").concat(_LookupTitleModule["default"][palette], " ").concat(isBold ? _LookupTitleModule["default"].bold : ''),
+        id: htmlId,
+        className: (0, _cssUtility.cn)("".concat(_LookupTitleModule["default"].title, " ").concat(_LookupTitleModule["default"][palette], " ").concat(isBold ? _LookupTitleModule["default"].bold : '')),
         "data-title": text
       }, text);
     }

package/lib/lookup/header/Title/__tests__/__snapshots__/Titles.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Title rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="title default "
+    class="title default"
   />
 </DocumentFragment>
 `;

package/lib/lookup/header/Title/props/propTypes.js

@@ -11,6 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var propTypes = {
   isBold: _propTypes["default"].bool,
+  htmlId: _propTypes["default"].string,
   palette: _propTypes["default"].oneOf(['default', 'primary', 'danger']),
   text: _propTypes["default"].string
 };

package/lib/lookup/header/ViewDropDown/ViewDropDown.js

@@ -33,6 +33,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/es/Loader/Loader"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ViewDropDownModule = _interopRequireDefault(require("./ViewDropDown.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -131,16 +133,16 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           selectedId = _this$state.selectedId;
       var suggestions = this.handleFilterSuggestions();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ViewDropDownModule["default"].container,
+        className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].container),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         onClick: this.togglePopup,
         ref: getTargetRef
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ViewDropDownModule["default"].labelCnt, " ").concat(isPopupOpen ? _ViewDropDownModule["default"].focused : '')
+        className: (0, _cssUtility.cn)("".concat(_ViewDropDownModule["default"].labelCnt, " ").concat(isPopupOpen ? _ViewDropDownModule["default"].focused : ''))
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _ViewDropDownModule["default"].labelText,
+        className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].labelText),
         "data-title": selected,
         "data-id": "".concat(dataId, "_selectedValue"),
         "data-test-id": "".concat(dataId, "_selectedValue")
@@ -187,7 +189,7 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           eleRef: _this2.suggestionContainerRef,
           customClass: !tabletMode && dropBoxSize ? _ViewDropDownModule["default"][dropBoxSize] : ''
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].listItemContainer,
+          className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].listItemContainer),
           "data-id": "".concat(dataId, "_Options")
         }, suggestions.map(function () {
           var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -212,9 +214,9 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           align: "both",
           className: _ViewDropDownModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : searchStr ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].emptyState
+          className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].emptyState)
         }, searchEmptyMessage || emptyMessage) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].emptyState
+          className: (0, _cssUtility.cn)(_ViewDropDownModule["default"].emptyState)
         }, emptyMessage)))));
       }) : null);
     }

package/lib/lookup/header/ViewDropDown/__test__/__snapshots__/ViewDropDown.spec.js.snap

@@ -9,7 +9,7 @@ exports[`ViewDropDown rendering the defult props 1`] = `
   >
     <div>
       <div
-        class="labelCnt "
+        class="labelCnt"
       >
         <span
           class="labelText"
@@ -19,7 +19,7 @@ exports[`ViewDropDown rendering the defult props 1`] = `
         />
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrowIcon  "
+          class="zd_font_icons basic icon-down arrowIcon"
           data-id="ViewDropDown_icon"
           data-selector-id="fontIcon"
           data-test-id="ViewDropDown_icon"

package/lib/setup/header/Button/Button.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _HeaderButtonModule = _interopRequireDefault(require("./HeaderButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,7 +61,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           onClick = _this$props.onClick,
           id = _this$props.id;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _HeaderButtonModule["default"].container
+        className: (0, _cssUtility.cn)(_HeaderButtonModule["default"].container)
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         id: id,
         onClick: onClick,