@zohodesk/components 1.6.21 → 1.6.22

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -21,7 +21,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       <span>
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-dropdown  downArrow  "
+          class="zd_font_icons  basic icon-dropdown   downArrow"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -45,7 +45,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-arrow-left3 fbold   rtl "
+        class="zd_font_icons  rtl basic icon-arrow-left3 fbold  "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -61,7 +61,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-arrow-right3 fbold   rtl "
+        class="zd_font_icons  rtl basic icon-arrow-right3 fbold  "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -6,12 +6,12 @@ exports[`DateWidget rendering the defult props 1`] = `
     class="container"
   >
     <div
-      class=" textBox  enabled"
+      class=" textBox  enabled "
       data-id="dateWidget_widget"
       data-test-id="dateWidget_widget"
     >
       <div
-        class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder"
+        class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  placeHolder"
         data-selector-id="textBoxIcon"
       >
         <div
@@ -57,7 +57,7 @@ exports[`DateWidget rendering the defult props 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Datepicker    "
+                  class="zd_font_icons  basic icon-Datepicker   "
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,7 +27,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -89,7 +89,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down    "
+                        class="zd_font_icons  basic icon-down   "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -120,7 +120,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -182,7 +182,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down    "
+                        class="zd_font_icons  basic icon-down   "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -213,7 +213,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container input"
+            class="flex row varClass customContainer   border_bottom effect borderColor_default hasBorder    container  input"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -275,7 +275,7 @@ exports[`Time rendering the defult props 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down    "
+                        class="zd_font_icons  basic icon-down   "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"

package/lib/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -55,8 +55,8 @@ function cssJSLogic(_ref) {
       customMobileDropBoxWrap = _customClass$customMo2 === void 0 ? '' : _customClass$customMo2;
   var animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
-  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style.boxDirection, !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style.arrow, !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style.paddingSpace, !isModel && isActive && !isArrow && isPadding), _compileClassNames));
-  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style.shadow, !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
+  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style.boxDirection, !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style.arrow, !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style.paddingSpace, !isModel && isActive && !isArrow && isPadding), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _compileClassNames));
+  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, style.shadow, !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, customDropBox, !isModel), _compileClassNames2));
   var inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 
   if (zIndexStyle) {

package/lib/DropDown/DropDownItem.js

@@ -101,7 +101,7 @@ var DropDownItem = /*#__PURE__*/function (_React$Component) {
           _this$props4$customCl = _this$props4.customClass,
           customClass = _this$props4$customCl === void 0 ? '' : _this$props4$customCl;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownItemModule["default"].list, " ").concat(customClass, " ").concat(active ? _DropDownItemModule["default"].listActive : hightlight ? _DropDownItemModule["default"].listHover : '', " ").concat(children && children[1] ? _DropDownItemModule["default"].padding : ''),
+        className: "".concat(_DropDownItemModule["default"].list, "  ").concat(active ? _DropDownItemModule["default"].listActive : hightlight ? _DropDownItemModule["default"].listHover : '', " ").concat(children && children[1] ? _DropDownItemModule["default"].padding : '', " ").concat(customClass),
         onClick: this.onClick,
         onMouseOver: this.onHover,
         ref: this.getRef,

package/lib/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DropDownItem rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="list   "
+    class="list    "
     data-id="dropDwnItemContainer"
     data-test-id="dropDwnItemContainer"
   />

package/lib/Label/Label.js

@@ -82,7 +82,7 @@ var Label = /*#__PURE__*/function (_React$Component) {
       var tabIndex = a11y.tabIndex;
 
       var labelElement = /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass, " "),
+        className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass),
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,

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

@@ -4,7 +4,7 @@ exports[`Label rendering the Id 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -19,7 +19,7 @@ exports[`Label rendering the clipped is true 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-          dotted cursor  "
+          dotted cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -33,7 +33,7 @@ exports[`Label rendering the customClass 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor LabelCustomClass "
+           cursor LabelCustomClass"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -47,7 +47,7 @@ exports[`Label rendering the defult props 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -61,7 +61,7 @@ exports[`Label rendering the htmlFor 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -76,7 +76,7 @@ exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           pointer  "
+           pointer "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -90,7 +90,7 @@ exports[`Label rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <label
     class="label title medium danger font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -104,7 +104,7 @@ exports[`Label rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <label
     class="label title medium dark font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -118,7 +118,7 @@ exports[`Label rendering the palette of- default 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -132,7 +132,7 @@ exports[`Label rendering the palette of- disable 1`] = `
 <DocumentFragment>
   <label
     class="label title medium disable font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -146,7 +146,7 @@ exports[`Label rendering the palette of- mandatory 1`] = `
 <DocumentFragment>
   <label
     class="label title medium mandatory font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -160,7 +160,7 @@ exports[`Label rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <label
     class="label title medium primary font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -174,7 +174,7 @@ exports[`Label rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <label
     class="label title medium secondary font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -188,7 +188,7 @@ exports[`Label rendering the size of- large 1`] = `
 <DocumentFragment>
   <label
     class="label title large default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -202,7 +202,7 @@ exports[`Label rendering the size of- medium 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -216,7 +216,7 @@ exports[`Label rendering the size of- small 1`] = `
 <DocumentFragment>
   <label
     class="label title small default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -230,7 +230,7 @@ exports[`Label rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <label
     class="label title xsmall default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -244,7 +244,7 @@ exports[`Label rendering the title 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -259,7 +259,7 @@ exports[`Label rendering the type of- subtitle 1`] = `
 <DocumentFragment>
   <label
     class="label subtitle medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -273,7 +273,7 @@ exports[`Label rendering the type of- title 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -287,7 +287,7 @@ exports[`Label rendering the variant of- default 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_default
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -301,7 +301,7 @@ exports[`Label rendering the variant of- primary 1`] = `
 <DocumentFragment>
   <label
     class="label title medium default font_primary
-           cursor  "
+           cursor "
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -321,7 +321,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
   >
     <label
       class="label title large danger font_default
-           cursor  "
+           cursor "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"
@@ -354,7 +354,7 @@ exports[`Label rendering with renderRightPlaceholderNode 1`] = `
   >
     <label
       class="label title medium default font_default
-           cursor  "
+           cursor "
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -39,7 +39,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
             tabindex="-1"
           >
             <div
-              class="noShrink boxContainer  medium  filled"
+              class="noShrink boxContainer  medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -145,7 +145,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
             tabindex="-1"
           >
             <div
-              class="noShrink boxContainer  medium  filled"
+              class="noShrink boxContainer  medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -251,7 +251,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
             tabindex="-1"
           >
             <div
-              class="noShrink boxContainer  medium  filled"
+              class="noShrink boxContainer  medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -356,7 +356,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
             tabindex="-1"
           >
             <div
-              class="noShrink boxContainer  medium  filled"
+              class="noShrink boxContainer  medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -461,7 +461,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
             tabindex="-1"
           >
             <div
-              class="noShrink boxContainer  medium  filled"
+              class="noShrink boxContainer  medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -566,7 +566,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
             tabindex="-1"
           >
             <div
-              class="noShrink boxContainer  medium  filled"
+              class="noShrink boxContainer  medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -671,7 +671,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
             tabindex="-1"
           >
             <div
-              class="noShrink boxContainer  medium  filled"
+              class="noShrink boxContainer  medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"

package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap

@@ -24,7 +24,7 @@ exports[`MobileHeader rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <button
-          class="buttonText bold plainprimary medium"
+          class="bold plainprimary medium buttonText"
           data-id="buttonComp"
           data-selector-id="button"
           data-test-id="buttonComp"

package/lib/MultiSelect/MultiSelect.js

@@ -1050,7 +1050,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(textBoxClass, " "),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -96,7 +96,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -342,7 +342,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div

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

@@ -9,7 +9,7 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default   hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -25,7 +25,7 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
           "
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -92,7 +92,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default   hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -108,7 +108,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -175,7 +175,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default   hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -205,8 +205,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <button
             aria-label="Delete"
             class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            lgRadiusClose  closedanger "
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -220,7 +219,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
+                class="zd_font_icons  basic icon-close2 fbold  "
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -255,8 +254,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <button
             aria-label="Delete"
             class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            lgRadiusClose  closedanger "
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -270,7 +268,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
+                class="zd_font_icons  basic icon-close2 fbold  "
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -305,8 +303,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           <button
             aria-label="Delete"
             class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            lgRadiusClose  closedanger "
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -320,7 +317,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
+                class="zd_font_icons  basic icon-close2 fbold  "
                 data-id="fontIcon"
                 data-selector-id="fontIcon"
                 data-test-id="fontIcon"
@@ -341,7 +338,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           "
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -399,7 +396,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-delete    rtl "
+                      class="zd_font_icons  rtl basic icon-delete   "
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -31,7 +31,7 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-androidd    "
+            class="zd_font_icons  basic icon-androidd   "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -9,7 +9,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
     data-test-id="multiSelectWithAvatar"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  undefined hasBorder"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder undefined"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -25,7 +25,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
           "
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer    effect     container  custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/Radio/Radio.js

@@ -150,7 +150,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": ariaLabelledby,
         "aria-readonly": ariaReadonly
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(!isEditable ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio, " ").concat(!isEditable ? "".concat(_RadioModule["default"].disabled) : '', " ").concat(secondaryText ? _RadioModule["default"].withSecondaryText : ''),
+        className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(!isEditable ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(!isEditable ? "".concat(_RadioModule["default"].disabled) : '', " ").concat(secondaryText ? _RadioModule["default"].withSecondaryText : '', " ").concat(customRadio, " "),
         align: secondaryText ? "start" : undefined
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",