@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/lib/Ribbon/Ribbon.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _RibbonModule = _interopRequireDefault(require("./Ribbon.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -61,18 +63,18 @@ var Ribbon = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props.customClass,
           dataSelectorId = _this$props.dataSelectorId;
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_RibbonModule["default"].basic, " ").concat(type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? "".concat(_RibbonModule["default"]["plain_".concat(palette)], " \n                 ").concat(type === 'box' ? _RibbonModule["default"]["box_".concat(palette)] : '', " ").concat(type === 'stamp' ? _RibbonModule["default"]["stamp_".concat(palette)] : '') : "".concat(_RibbonModule["default"]["palette_".concat(palette)], " ").concat(type === 'default' ? _RibbonModule["default"]["default_".concat(palette)] : '') : '', " ").concat(_RibbonModule["default"][size], " ").concat(_RibbonModule["default"][type], " ").concat(customClass, " "),
+        className: (0, _cssUtility.cn)("".concat(_RibbonModule["default"].basic, " ").concat(type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? "".concat(_RibbonModule["default"]["plain_".concat(palette)], " \n                 ").concat(type === 'box' ? _RibbonModule["default"]["box_".concat(palette)] : '', " ").concat(type === 'stamp' ? _RibbonModule["default"]["stamp_".concat(palette)] : '') : "".concat(_RibbonModule["default"]["palette_".concat(palette)], " ").concat(type === 'default' ? _RibbonModule["default"]["default_".concat(palette)] : '') : '', " ").concat(_RibbonModule["default"][size], " ").concat(_RibbonModule["default"][type], " ").concat(customClass, " ")),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, type === 'sticker' ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _RibbonModule["default"].after
+        className: (0, _cssUtility.cn)(_RibbonModule["default"].after)
       }) : null, children ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _RibbonModule["default"].children
+        className: (0, _cssUtility.cn)(_RibbonModule["default"].children)
       }, children) : null, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _RibbonModule["default"].childText
+        className: (0, _cssUtility.cn)(_RibbonModule["default"].childText)
       }, text), type === 'sticker' ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _RibbonModule["default"].before
+        className: (0, _cssUtility.cn)(_RibbonModule["default"].before)
       }) : null);
     }
   }]);

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

@@ -3,7 +3,7 @@
 exports[`Label rendering children  1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default large default  "
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -27,7 +27,7 @@ exports[`Label rendering children  1`] = `
 exports[`Label rendering the customClass 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default large default ribbonCustomClass "
+    class="basic palette_default default_default large default ribbonCustomClass"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -44,7 +44,7 @@ exports[`Label rendering the customClass 1`] = `
 exports[`Label rendering the defult props 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default large default  "
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -61,7 +61,7 @@ exports[`Label rendering the defult props 1`] = `
 exports[`Label rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_danger default_danger large default  "
+    class="basic palette_danger default_danger large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -78,7 +78,7 @@ exports[`Label rendering the palette of- danger 1`] = `
 exports[`Label rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_dark default_dark large default  "
+    class="basic palette_dark default_dark large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -95,7 +95,7 @@ exports[`Label rendering the palette of- dark 1`] = `
 exports[`Label rendering the palette of- default 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default large default  "
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -112,7 +112,7 @@ exports[`Label rendering the palette of- default 1`] = `
 exports[`Label rendering the palette of- info 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_info default_info large default  "
+    class="basic palette_info default_info large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -129,7 +129,7 @@ exports[`Label rendering the palette of- info 1`] = `
 exports[`Label rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_primary default_primary large default  "
+    class="basic palette_primary default_primary large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -146,7 +146,7 @@ exports[`Label rendering the palette of- primary 1`] = `
 exports[`Label rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_secondary default_secondary large default  "
+    class="basic palette_secondary default_secondary large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -163,7 +163,7 @@ exports[`Label rendering the palette of- secondary 1`] = `
 exports[`Label rendering the size - large 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default large default  "
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -180,7 +180,7 @@ exports[`Label rendering the size - large 1`] = `
 exports[`Label rendering the size - medium 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default medium default  "
+    class="basic palette_default default_default medium default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -197,7 +197,7 @@ exports[`Label rendering the size - medium 1`] = `
 exports[`Label rendering the size - small 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default small default  "
+    class="basic palette_default default_default small default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -214,7 +214,7 @@ exports[`Label rendering the size - small 1`] = `
 exports[`Label rendering the size - xlarge 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default xlarge default  "
+    class="basic palette_default default_default xlarge default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -231,8 +231,7 @@ exports[`Label rendering the size - xlarge 1`] = `
 exports[`Label rendering the type - box 1`] = `
 <DocumentFragment>
   <span
-    class="basic plain_default 
-                 box_default  large box  "
+    class="basic plain_default box_default large box"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -249,7 +248,7 @@ exports[`Label rendering the type - box 1`] = `
 exports[`Label rendering the type - default 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default default_default large default  "
+    class="basic palette_default default_default large default"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -266,7 +265,7 @@ exports[`Label rendering the type - default 1`] = `
 exports[`Label rendering the type - flag 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default  large flag  "
+    class="basic palette_default large flag"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -283,8 +282,7 @@ exports[`Label rendering the type - flag 1`] = `
 exports[`Label rendering the type - plain 1`] = `
 <DocumentFragment>
   <span
-    class="basic plain_default 
-                   large plain  "
+    class="basic plain_default large plain"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -301,7 +299,7 @@ exports[`Label rendering the type - plain 1`] = `
 exports[`Label rendering the type - ribbon 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default  large ribbon  "
+    class="basic palette_default large ribbon"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -318,8 +316,7 @@ exports[`Label rendering the type - ribbon 1`] = `
 exports[`Label rendering the type - stamp 1`] = `
 <DocumentFragment>
   <span
-    class="basic plain_default 
-                  stamp_default large stamp  "
+    class="basic plain_default stamp_default large stamp"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -336,7 +333,7 @@ exports[`Label rendering the type - stamp 1`] = `
 exports[`Label rendering the type - sticker 1`] = `
 <DocumentFragment>
   <span
-    class="basic palette_default  large sticker  "
+    class="basic palette_default large sticker"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"
@@ -359,7 +356,7 @@ exports[`Label rendering the type - sticker 1`] = `
 exports[`Label rendering the type - tag 1`] = `
 <DocumentFragment>
   <span
-    class="basic  large tag  "
+    class="basic large tag"
     data-id="ribbonComp"
     data-selector-id="ribbon"
     data-test-id="ribbonComp"

package/lib/Select/GroupSelect.js

@@ -39,6 +39,8 @@ var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/Re
 
 var _CustomResponsive = require("../Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 var _dropDownUtils = require("../utils/dropDownUtils");
@@ -711,13 +713,13 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
+        className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : '')),
         "data-id": dataIdSlctComp,
         "data-test-id": dataIdSlctComp,
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(className ? className : '')),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -824,7 +826,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           customClass: _SelectModule["default"].box,
           onScroll: _this7.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
           inputRef: _this7.searchInputRef,
           maxLength: maxLength,
@@ -853,7 +855,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: groupId
           }, groupName && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _SelectModule["default"].groupTitle
+            className: (0, _cssUtility.cn)(_SelectModule["default"].groupTitle)
           }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
             text: groupName,
             a11y: {

package/lib/Select/Select.js

@@ -45,6 +45,8 @@ var _Common = require("../utils/Common.js");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -906,11 +908,11 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         inputFieldLineA11y: inputFieldLineA11y
       });
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
+        className: (0, _cssUtility.cn)("".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(className ? className : '')),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1079,7 +1081,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           onScroll: _this7.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
           a11y: {
             ariaControls: setAriaId,

package/lib/Select/SelectWithAvatar.js

@@ -41,6 +41,8 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _MultiSelectModule = _interopRequireDefault(require("../MultiSelect/MultiSelect.module.css"));
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
@@ -256,7 +258,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : '')),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
@@ -348,7 +350,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           onScroll: _this2.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
           inputRef: _this2.searchInputRef,
           maxLength: maxLength,
@@ -370,7 +372,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           customClass: "".concat(!tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
           eleRef: _this2.suggestionContainerRef
         }, groupName ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].title
+          className: (0, _cssUtility.cn)(_MultiSelectModule["default"].title)
         }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
           text: groupName,
           a11y: {

package/lib/Select/SelectWithIcon.js

@@ -39,6 +39,8 @@ var _Common = require("../utils/Common.js");
 
 var _dropDownUtils = require("../utils/dropDownUtils.js");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -460,11 +462,11 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
+        className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(className ? className : '')),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -567,7 +569,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
             role: 'listbox'
           }
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          className: (0, _cssUtility.cn)("".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size]))
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
           onClear: _this5.onSearchClear,
           onChange: _this5.onSearch,

package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`GroupSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium   "
+    class="container box_medium"
     data-id="selectComponent"
     data-selector-id="groupSelect"
     data-test-id="selectComponent"
@@ -14,7 +14,7 @@ exports[`GroupSelect rendering the defult props 1`] = `
       data-test-id="GroupSelect"
     >
       <div
-        class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -30,7 +30,7 @@ exports[`GroupSelect rendering the defult props 1`] = `
             aria-owns="1"
             aria-readonly="true"
             autocomplete="off"
-            class="  container medium  default  effect  borderColor_default  "
+            class="container medium default effect borderColor_default"
             data-id="GroupSelect_textBox"
             data-selector-id="textBoxIcon"
             data-test-id="GroupSelect_textBox"
@@ -68,7 +68,7 @@ exports[`GroupSelect 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="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"