@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/es/ListItem/ListItemWithCheckBox.js

@@ -7,6 +7,7 @@ import { ListItemWithCheckBox_Props } from "./props/propTypes";
 import CheckBox from "../CheckBox/CheckBox";
 import { Box, Container } from "../Layout";
 import { renderNode, isRenderable } from '@zohodesk/utils';
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -105,7 +106,7 @@ export default class ListItemWithCheckBox extends React.Component {
     }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.contentWrapper
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: cn(`${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`),
       "data-id": iconBoxDataId,
       "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {

package/es/ListItem/ListItemWithIcon.js

@@ -12,6 +12,7 @@ import { ListItemWithIcon_Props } from "./props/propTypes";
 import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithIcon extends React.Component {
   constructor(props) {
@@ -122,7 +123,7 @@ export default class ListItemWithIcon extends React.Component {
       className: `${style.contentWrapper} ${!iconName && lhsAlignContent !== 'start' ? style[`alignLhsBox_${lhsAlignContent}`] : ''}`
     }, iconName && /*#__PURE__*/React.createElement("div", {
       "aria-hidden": true,
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: cn(`${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`),
       "data-id": iconBoxDataId,
       "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {
@@ -133,7 +134,7 @@ export default class ListItemWithIcon extends React.Component {
       name: iconName,
       size: iconSize
     }))), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
-      className: iconClass
+      className: cn(iconClass)
     }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: `${style.leftBox} ${style.selfAlign_center}`

package/es/ListItem/ListItemWithRadio.js

@@ -7,6 +7,7 @@ import ListContainer from "./ListContainer";
 import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
 import { ListItemWithRadio_Props } from "./props/propTypes";
 import { renderNode, isRenderable } from '@zohodesk/utils';
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -106,7 +107,7 @@ export default class ListItemWithRadio extends React.Component {
     }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.contentWrapper
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: cn(`${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`),
       "data-id": iconBoxDataId,
       "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {

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

@@ -3,7 +3,7 @@
 exports[`ListContainer ListContainer with Align Base Line 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_baseline list medium  default     withBorder"
+    class="flex row alignItems_baseline list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="containerComponent"
     data-selector-id="listContainer"
@@ -16,7 +16,7 @@ exports[`ListContainer ListContainer with Align Base Line 1`] = `
 exports[`ListContainer 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="containerComponent"
     data-selector-id="listContainer"

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

@@ -3,7 +3,7 @@
 exports[`ListItem ListItem 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="listItem"
     data-selector-id="listItem"
@@ -42,7 +42,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
 exports[`ListItem ListItem 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="listItem"
     data-selector-id="listItem"
@@ -81,7 +81,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
 exports[`ListItem Should render with renderBeforeChildren 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="listItem"
     data-selector-id="listItem"
@@ -128,7 +128,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
 exports[`ListItem 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="listItem"
     data-selector-id="listItem"

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

@@ -3,7 +3,7 @@
 exports[`ListItemWithAvatar ListItemWithAvatar 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -57,7 +57,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
 exports[`ListItemWithAvatar ListItemWithAvatar 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -111,7 +111,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
 exports[`ListItemWithAvatar ListItemWithAvatar 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -164,7 +164,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
 exports[`ListItemWithAvatar ListItemWithAvatar 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -217,7 +217,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
 exports[`ListItemWithAvatar ListItemWithAvatar 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -270,7 +270,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
 exports[`ListItemWithAvatar ListItemWithAvatar 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"
@@ -323,7 +323,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
 exports[`ListItemWithAvatar 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="List_ListItemWithAvatar"
     data-selector-id="listItemWithAvatar"

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

@@ -3,7 +3,7 @@
 exports[`ListItemWithCheckBox ListItemWithCheckBox 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="List_ListItemWithCheckBox"
     data-selector-id="listItemWithCheckBox"
@@ -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"
@@ -48,7 +48,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -109,7 +109,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
 exports[`ListItemWithCheckBox ListItemWithCheckBox 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="List_ListItemWithCheckBox"
     data-selector-id="listItemWithCheckBox"
@@ -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"
@@ -154,7 +154,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -215,7 +215,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
 exports[`ListItemWithCheckBox ListItemWithCheckBox 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="List_ListItemWithCheckBox"
     data-selector-id="listItemWithCheckBox"
@@ -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"
@@ -260,7 +260,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -320,7 +320,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
 exports[`ListItemWithCheckBox ListItemWithCheckBox 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="List_ListItemWithCheckBox"
     data-selector-id="listItemWithCheckBox"
@@ -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"
@@ -365,7 +365,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -425,7 +425,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
 exports[`ListItemWithCheckBox ListItemWithCheckBox 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="List_ListItemWithCheckBox"
     data-selector-id="listItemWithCheckBox"
@@ -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"
@@ -470,7 +470,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -530,7 +530,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
 exports[`ListItemWithCheckBox ListItemWithCheckBox 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="List_ListItemWithCheckBox"
     data-selector-id="listItemWithCheckBox"
@@ -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"
@@ -575,7 +575,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -635,7 +635,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
 exports[`ListItemWithCheckBox 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="List_ListItemWithCheckBox"
     data-selector-id="listItemWithCheckBox"
@@ -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"
@@ -680,7 +680,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"

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

@@ -3,7 +3,7 @@
 exports[`ListItemWithIcon ListItemWithIcon 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="list"
     data-selector-id="listItemWithIcon"
@@ -57,7 +57,7 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
 exports[`ListItemWithIcon ListItemWithIcon 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="list"
     data-selector-id="listItemWithIcon"
@@ -111,7 +111,7 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
 exports[`ListItemWithIcon ListItemWithIcon 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="list"
     data-selector-id="listItemWithIcon"
@@ -164,7 +164,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue  text and LHS ali
 exports[`ListItemWithIcon ListItemWithIcon 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="list"
     data-selector-id="listItemWithIcon"
@@ -217,7 +217,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue  text and LHS ali
 exports[`ListItemWithIcon ListItemWithIcon 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="list"
     data-selector-id="listItemWithIcon"
@@ -270,7 +270,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
 exports[`ListItemWithIcon ListItemWithIcon 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="list"
     data-selector-id="listItemWithIcon"
@@ -323,7 +323,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
 exports[`ListItemWithIcon 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="list"
     data-selector-id="listItemWithIcon"

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"