@zohodesk/components 1.6.21 → 1.6.22

package/README.md

@@ -2,6 +2,10 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.6.22
+
+- Reordered className values to ensure customClass is always appended last to adopt CSS utility .
+
 # 1.6.21
 
 - **Container,Box**

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

@@ -3,7 +3,7 @@
 exports[`Button component Should be render with the basic set customButtonclass with buttonClass  1`] = `
 <DocumentFragment>
   <button
-    class="customButtonClass bold primary medium"
+    class="bold primary medium customButtonClass"
     data-id="buttonComp"
     data-selector-id="button"
     data-test-id="buttonComp"
@@ -117,7 +117,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - loadi
         class="loading mediumloading"
       >
         <div
-          class="customStautusClassName loadingelement primaryelement"
+          class="loadingelement primaryelement customStautusClassName"
         />
       </div>
     </div>
@@ -142,7 +142,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
         class="successstate"
       >
         <div
-          class="customStautusClassName tickElement primaryTick"
+          class="tickElement primaryTick customStautusClassName"
         />
       </div>
     </div>

package/es/Button/css/cssJSLogic.js

@@ -25,7 +25,6 @@ export default function cssJSLogic({
   let statusLower = status.toLowerCase();
   let canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
   let buttonClass = compileClassNames({
-    [customButton]: !!customButton,
     [style.bold]: isBold,
     [style.default]: !needAppearance,
     [style[paletteLower]]: needAppearance,
@@ -34,20 +33,21 @@ export default function cssJSLogic({
     [style[`${size}Btn`]]: needAppearance && children,
     [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
     [`${style[`${paletteLower}Strike`]} ${style.strike}`]: disabled && canStrikeThrough && shouldStrikeThroughDisabled,
-    [style.loader]: !!needAppearance && statusLower !== 'none'
+    [style.loader]: !!needAppearance && statusLower !== 'none',
+    [customButton]: !!customButton
   });
   let loaderParentClass = compileClassNames({
-    [customStatusSize]: !!customStatusSize,
     [style.loading]: statusLower === 'loading',
     [style[`${size}loading`]]: statusLower === 'loading',
-    [style.successstate]: statusLower != 'loading'
+    [style.successstate]: statusLower != 'loading',
+    [customStatusSize]: !!customStatusSize
   });
   let loaderChildClass = compileClassNames({
-    [customStatus]: !!customStatus,
     [style.loadingelement]: statusLower === 'loading',
     [style[`${paletteLower}element`]]: statusLower === 'loading',
     [style.tickElement]: statusLower != 'loading',
-    [style[`${paletteLower}Tick`]]: statusLower != 'loading'
+    [style[`${paletteLower}Tick`]]: statusLower != 'loading',
+    [customStatus]: !!customStatus
   });
   return {
     buttonClass,

package/es/CheckBox/CheckBox.js

@@ -100,7 +100,7 @@ export default class CheckBox extends React.Component {
       "aria-hidden": ariaHidden,
       dataSelectorId: dataSelectorId || id
     }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.boxContainer} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`,
+      className: `${style.boxContainer} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}  ${customCBoxSize}`,
       align: secondaryText ? "start" : undefined
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
@@ -127,7 +127,7 @@ export default class CheckBox extends React.Component {
     })), checked ? /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 44 44",
-      className: `${style.tick} ${style[`${size}tick`]} ${customTickSize} ${disabled ? CssProvider('isDisabled') : ''}`
+      className: `${style.tick} ${style[`${size}tick`]}  ${disabled ? CssProvider('isDisabled') : ''} ${customTickSize}`
     }, /*#__PURE__*/React.createElement("polyline", {
       points: "12.56 19 19.61 26.06 40.39 5.28",
       className: `${style.tickPath} ${style.checkedtickPath}`

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

@@ -13,7 +13,7 @@ exports[`CheckBox component Should be disable 1`] = `
     tabindex="-1"
   >
     <div
-      class="noShrink boxContainer  medium  filled disabled"
+      class="noShrink boxContainer  medium filled disabled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -35,7 +35,7 @@ exports[`CheckBox component Should be disable 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick  disabled"
+          class="tick mediumtick  disabled "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -56,7 +56,7 @@ exports[`CheckBox component Should be disable 1`] = `
         class="label title medium disable font_default
           dotted cursor 
                                  
-                                disabled  "
+                                disabled "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -81,7 +81,7 @@ exports[`CheckBox component Should be isReadOnly 1`] = `
     tabindex="-1"
   >
     <div
-      class="noShrink boxContainer  medium  filled disabled"
+      class="noShrink boxContainer  medium filled disabled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -124,7 +124,7 @@ exports[`CheckBox component Should be render ID 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -162,7 +162,7 @@ exports[`CheckBox component Should be render ID 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -188,7 +188,7 @@ exports[`CheckBox component Should be render activeStyle is minus 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -231,7 +231,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -275,7 +275,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
     tabindex="-1"
   >
     <div
-      class="noShrink boxContainer  medium  filled disabled"
+      class="noShrink boxContainer  medium filled disabled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -312,7 +312,7 @@ exports[`CheckBox component Should be render disabledTitle and title 1`] = `
         class="label title medium disable font_default
           dotted cursor 
                                  
-                                disabled  "
+                                disabled "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -337,7 +337,7 @@ exports[`CheckBox component Should be render isClipped is false 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -380,7 +380,7 @@ exports[`CheckBox component Should be render isFilled 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -423,7 +423,7 @@ exports[`CheckBox component Should be render name 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -467,7 +467,7 @@ exports[`CheckBox component Should be render text 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -504,7 +504,7 @@ exports[`CheckBox component Should be render text 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -530,7 +530,7 @@ exports[`CheckBox component Should be render title 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -567,7 +567,7 @@ exports[`CheckBox component Should be render title 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -592,7 +592,7 @@ exports[`CheckBox component Should be render with the basic set of default props
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -636,7 +636,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -658,7 +658,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -679,7 +679,7 @@ exports[`CheckBox component Should render active - danger 1`] = `
         class="label title medium default font_default
           dotted cursor activedangerLabel
                                 checkeddangerLabel 
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -705,7 +705,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -727,7 +727,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -748,7 +748,7 @@ exports[`CheckBox component Should render active - primary 1`] = `
         class="label title medium default font_default
           dotted cursor activeprimaryLabel
                                 checkedprimaryLabel 
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -773,7 +773,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -810,7 +810,7 @@ exports[`CheckBox component Should render labelSize - default 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -835,7 +835,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -872,7 +872,7 @@ exports[`CheckBox component Should render labelSize - large 1`] = `
         class="label title large default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -897,7 +897,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -934,7 +934,7 @@ exports[`CheckBox component Should render labelSize - medium 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -959,7 +959,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -996,7 +996,7 @@ exports[`CheckBox component Should render labelSize - primary 1`] = `
         class="label title medium default font_primary
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1021,7 +1021,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1058,7 +1058,7 @@ exports[`CheckBox component Should render labelSize - small 1`] = `
         class="label title small default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1084,7 +1084,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1106,7 +1106,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1127,7 +1127,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - da
         class="label title medium default font_default
           dotted cursor activedangerLabel
                                 checkeddangerLabel 
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1153,7 +1153,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1175,7 +1175,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1196,7 +1196,7 @@ exports[`CheckBox component Should render palette and checkbox with checked - pr
         class="label title medium default font_default
           dotted cursor activeprimaryLabel
                                 checkedprimaryLabel 
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1221,7 +1221,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink alignSelf_start boxContainer withSecondaryText medium  filled"
+      class="noShrink alignSelf_start boxContainer withSecondaryText medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1258,7 +1258,7 @@ exports[`CheckBox component Should render secondaryText 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1289,7 +1289,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1326,7 +1326,7 @@ exports[`CheckBox component Should render size - danger 1`] = `
         class="label title medium danger font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1351,7 +1351,7 @@ exports[`CheckBox component Should render size - default 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1388,7 +1388,7 @@ exports[`CheckBox component Should render size - default 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1413,7 +1413,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1450,7 +1450,7 @@ exports[`CheckBox component Should render size - mandatory 1`] = `
         class="label title medium mandatory font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1476,7 +1476,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1498,7 +1498,7 @@ exports[`CheckBox component Should render size - medium 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1525,7 +1525,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1562,7 +1562,7 @@ exports[`CheckBox component Should render size - primary 1`] = `
         class="label title medium primary font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1587,7 +1587,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1624,7 +1624,7 @@ exports[`CheckBox component Should render size - secondary 1`] = `
         class="label title medium secondary font_default
           dotted cursor 
                                  
-                                pointer  "
+                                pointer "
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1650,7 +1650,7 @@ exports[`CheckBox component Should render size - small 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  small  filled"
+      class="noShrink boxContainer  small filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1672,7 +1672,7 @@ exports[`CheckBox component Should render size - small 1`] = `
           />
         </svg>
         <svg
-          class="tick smalltick  "
+          class="tick smalltick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1703,7 +1703,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1725,7 +1725,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1756,7 +1756,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
     tabindex="-1"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1778,7 +1778,7 @@ exports[`CheckBox component rendering ally ariaLabel , ariaLabelledby, ariaHidde
           />
         </svg>
         <svg
-          class="tick mediumtick  "
+          class="tick mediumtick   "
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1806,7 +1806,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium  filled"
+      class="noShrink boxContainer  medium filled"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1841,7 +1841,7 @@ exports[`CheckBox component rendering the Custom Props 1`] = `
     >
       <label
         class="label title medium default font_default
-          dotted cursor checkBoxCustomClass "
+          dotted cursor checkBoxCustomClass"
         data-id="label"
         data-selector-id="label"
         data-test-id="label"
@@ -1867,7 +1867,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink boxContainer  medium customCBoxSizeClass filled"
+      class="noShrink boxContainer  medium filled   customCBoxSizeClass"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1889,7 +1889,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick customTickSizeClass "
+          class="tick mediumtick   customTickSizeClass"
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1910,7 +1910,7 @@ exports[`CheckBox component rendering the Custom class 1`] = `
         class="label title medium default font_default
           dotted cursor 
                                  
-                                pointer customLabelClass "
+                                pointer customLabelClass"
         data-id="label"
         data-selector-id="label"
         data-test-id="label"