@zohodesk/components 1.6.21 → 1.6.22-exp-1

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -32,7 +32,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container  pointer hoverEfffect"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -40,8 +40,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             tabindex="-1"
           >
             <div
-              class="noShrink radio  
-            hoverprimary medium filled centerPathprimary"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -109,7 +108,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
 exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -138,7 +137,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container  pointer hoverEfffect"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -146,8 +145,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
             tabindex="-1"
           >
             <div
-              class="noShrink radio  
-            hoverprimary medium filled centerPathprimary"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -215,7 +213,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
 exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align center 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -244,7 +242,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container  pointer hoverEfffect"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -252,8 +250,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
             tabindex="-1"
           >
             <div
-              class="noShrink radio  
-            hoverprimary medium filled centerPathprimary"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -320,7 +317,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
 exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align end 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -349,7 +346,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container  pointer hoverEfffect"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -357,8 +354,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
             tabindex="-1"
           >
             <div
-              class="noShrink radio  
-            hoverprimary medium filled centerPathprimary"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -425,7 +421,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
 exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -454,7 +450,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container  pointer hoverEfffect"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -462,8 +458,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
             tabindex="-1"
           >
             <div
-              class="noShrink radio  
-            hoverprimary medium filled centerPathprimary"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -530,7 +525,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
 exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align start 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -559,7 +554,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container  pointer hoverEfffect"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -567,8 +562,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
             tabindex="-1"
           >
             <div
-              class="noShrink radio  
-            hoverprimary medium filled centerPathprimary"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -635,7 +629,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
 exports[`ListItemWithRadio rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItemWithRadioComp"
     data-selector-id="listItemWithRadio"
@@ -664,7 +658,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
             aria-checked="false"
             aria-hidden="true"
             aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container  pointer hoverEfffect"
+            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
             data-id="RadioComp"
             data-selector-id="container"
             data-test-id="RadioComp"
@@ -672,8 +666,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
             tabindex="-1"
           >
             <div
-              class="noShrink radio  
-            hoverprimary medium filled centerPathprimary"
+              class="noShrink radio hoverprimary medium filled centerPathprimary"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"

package/es/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/es/MultiSelect/MultiSelect.js

@@ -965,7 +965,7 @@ export class MultiSelectComponent extends React.Component {
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
+      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${textBoxClass} `,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {

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

@@ -3,13 +3,13 @@
 exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper  effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="advancedGroupMultiSelect"
     data-test-id="multiSelect"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -41,7 +40,7 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"

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

@@ -3,13 +3,13 @@
 exports[`AdvancedMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper   effect "
+    class="wrapper effect"
     data-id="multiSelectComp"
     data-selector-id="advancedMultiSelect"
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
         data-test-id="multiSelectComp_textBox"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -41,7 +40,7 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="textBoxIcon"
               data-selector-id="textBoxIcon"
               data-test-id="textBoxIcon"
@@ -74,13 +73,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
 exports[`AdvancedMultiSelect rendering the options array with objects and string 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper   effect "
+    class="wrapper effect"
     data-id="multiSelectComp"
     data-selector-id="advancedMultiSelect"
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -92,11 +91,10 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
         data-test-id="multiSelectComp_textBox"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -112,7 +110,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="textBoxIcon"
               data-selector-id="textBoxIcon"
               data-test-id="textBoxIcon"
@@ -200,7 +198,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="Apple"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default defaultHover  mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="true"
                       data-id="Apple"
@@ -236,7 +234,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="Orange"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="Orange"
@@ -272,7 +270,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                     <li
                       aria-label="string test"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="string test"
@@ -320,13 +318,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
 exports[`AdvancedMultiSelect rendering the options array with only objects using allowValueFallback 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper   effect "
+    class="wrapper effect"
     data-id="multiSelectComp"
     data-selector-id="advancedMultiSelect"
     data-test-id="multiSelectComp"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium  hasBorder borderColor_default"
+      class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -338,11 +336,10 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
         data-test-id="multiSelectComp_textBox"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-              "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -358,7 +355,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               aria-haspopup="true"
               aria-owns="1"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="textBoxIcon"
               data-selector-id="textBoxIcon"
               data-test-id="textBoxIcon"
@@ -446,7 +443,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                     <li
                       aria-label="Apple"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default defaultHover  mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="true"
                       data-id="Apple"
@@ -482,7 +479,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                     <li
                       aria-label="Orange"
                       aria-selected="false"
-                      class="flex row alignItems_center list medium  default   mediumwithTick  withBorder"
+                      class="flex row alignItems_center list medium default mediumwithTick withBorder"
                       data-a11y-inset-focus="true"
                       data-a11y-list-active="false"
                       data-id="Orange"

package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`EmptyState rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" default"
+    class="default"
     data-id="empty_noOptnsMsg"
     data-test-id="empty_noOptnsMsg"
     role="alert"

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

@@ -3,13 +3,13 @@
 exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     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"
@@ -21,11 +21,10 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -39,7 +38,7 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -86,13 +85,13 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
 exports[`MultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     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"
@@ -104,11 +103,10 @@ exports[`MultiSelect rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -122,7 +120,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -169,13 +167,13 @@ exports[`MultiSelect rendering the defult props 1`] = `
 exports[`MultiSelect rendering with limit feature 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelect"
     data-selector-id="multiSelect"
     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"
@@ -188,7 +186,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
       >
         <div
           aria-labelledby="7"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -204,9 +202,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -220,7 +216,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"
@@ -238,7 +234,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
       >
         <div
           aria-labelledby="8"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -254,9 +250,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -270,7 +264,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"
@@ -288,7 +282,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
       >
         <div
           aria-labelledby="9"
-          class="container effect    medium lgRadius danger  pointer "
+          class="container effect medium lgRadius danger pointer"
           data-id="tag_Tag"
           data-selector-id="tag"
           data-test-id="tag_Tag"
@@ -304,9 +298,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           </div>
           <button
             aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
+            class="buttonReset close lgRadiusClose closedanger"
             data-id="tag_RemoveTag"
             data-test-id="tag_RemoveTag"
             type="button"
@@ -320,7 +312,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"
@@ -337,11 +329,10 @@ exports[`MultiSelect rendering with limit feature 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium clearIconSpace
-          "
+          class="custmSpan custmSpanMedium clearIconSpace"
         />
         <div
-          class="flex row varClass customContainer    effect     container custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -355,7 +346,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
               aria-haspopup="true"
               aria-required="true"
               autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelect_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
@@ -399,7 +390,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/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`MultiSelectHeader rendering the basic value 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder selectAll"
+    class="flex row alignItems_center list medium default withBorder selectAll"
     data-a11y-inset-focus="true"
     data-id="MultiSelectHeader_selectAll"
     data-selector-id="listItemWithIcon"
@@ -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"