@zohodesk/components 1.6.21 → 1.6.22

package/es/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/es/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/es/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/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -45,26 +45,26 @@ export default function cssJSLogic({
     [style.main]: true,
     [style.hidden]: !isActive,
     [style.responsive]: !!isModel,
-    [customMobileDropBoxWrap]: !!isModel,
-    [customDropBoxWrap]: !isModel,
     [style.container]: isAbsolute && !isModel,
     [style[boxPosition]]: isAbsolute && !isModel,
     [style.fixedContainer]: !isAbsolute && !isModel,
     [style[size]]: size && !isModel,
     [style.boxDirection]: !isModel && isActive && isArrow,
     [style.arrow]: !isModel && isActive && isArrow && isAbsolute,
-    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding
+    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding,
+    [customMobileDropBoxWrap]: !!isModel,
+    [customDropBoxWrap]: !isModel
   });
   let subContainerClass = compileClassNames({
     [style.subContainer]: true,
-    [customMobileDropBox]: !!isModel,
     [style.mobRadius]: !!isModel,
     [style.slideUp]: !!isModel && isActive,
-    [customDropBox]: !isModel,
     [style.shadow]: !isModel,
     [style.boxPadding]: !isModel && isBoxPaddingNeed,
     [style.radius]: !isModel && isRadius,
-    [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle
+    [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle,
+    [customMobileDropBox]: !!isModel,
+    [customDropBox]: !isModel
   });
   let inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 

package/es/DropDown/DropDownItem.js

@@ -54,7 +54,7 @@ export default class DropDownItem extends React.Component {
       customClass = ''
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
+      className: `${style.list}  ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''} ${customClass}`,
       onClick: this.onClick,
       onMouseOver: this.onHover,
       ref: this.getRef,

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

@@ -39,7 +39,7 @@ export default class Label extends React.Component {
     } = a11y;
     const labelElement = /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
+          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass}`,
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,

package/es/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/es/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/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

@@ -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/es/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/es/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/es/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/es/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/es/Radio/Radio.js

@@ -99,7 +99,7 @@ export default class Radio extends React.Component {
       "aria-readonly": ariaReadonly
     }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
-            ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio} ${!isEditable ? `${style.disabled}` : ''} ${secondaryText ? style.withSecondaryText : ''}`,
+            ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${!isEditable ? `${style.disabled}` : ''} ${secondaryText ? style.withSecondaryText : ''} ${customRadio} `,
       align: secondaryText ? "start" : undefined
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",