@zohodesk/components 1.6.22 → 1.6.23-exp-2

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

@@ -3,13 +3,13 @@
 exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelectWithAvatar"
     data-selector-id="multiSelectWithAvatar"
     data-test-id="multiSelectWithAvatar"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder undefined"
+      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[`MultiSelectWithAvatar 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
@@ -38,7 +37,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               aria-required="true"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelectWithAvatar_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelectWithAvatar_textBox"

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

@@ -25,7 +25,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   >
     <div
       aria-labelledby="1"
-      class="container effect    medium lgRadius danger   "
+      class="container effect medium lgRadius danger"
       data-id="tag_Tag"
       data-selector-id="tag"
       data-test-id="tag_Tag"
@@ -49,7 +49,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   >
     <div
       aria-labelledby="2"
-      class="container effect    medium lgRadius danger   "
+      class="container effect medium lgRadius danger"
       data-id="tag_Tag"
       data-selector-id="tag"
       data-test-id="tag_Tag"
@@ -73,7 +73,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   >
     <div
       aria-labelledby="3"
-      class="container effect    medium lgRadius danger   "
+      class="container effect medium lgRadius danger"
       data-id="tag_Tag"
       data-selector-id="tag"
       data-test-id="tag_Tag"

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

@@ -18,7 +18,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
       <li
         aria-label="Suggestions Option 1"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default     withBorder"
+        class="flex row alignItems_center list medium default withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="Suggestions Option 1"
@@ -103,7 +103,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text2"
         aria-selected="true"
-        class="flex row alignItems_center list medium  default activedefault    activewithBorder"
+        class="flex row alignItems_center list medium default activedefault activewithBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text2"
@@ -141,7 +141,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text3"
         aria-selected="true"
-        class="flex row alignItems_center list medium  default activedefault    activewithBorder"
+        class="flex row alignItems_center list medium default activedefault activewithBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text3"
@@ -179,7 +179,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text4"
         aria-selected="true"
-        class="flex row alignItems_center list medium  default activedefault    activewithBorder"
+        class="flex row alignItems_center list medium default activedefault activewithBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text4"
@@ -216,7 +216,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text5"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text5"
@@ -251,7 +251,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text6"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text6"
@@ -286,7 +286,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text7"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text7"
@@ -321,7 +321,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text8"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text8"
@@ -356,7 +356,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text9"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text9"
@@ -391,7 +391,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text10"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text10"

package/es/PopOver/PopOver.js

@@ -4,6 +4,7 @@ import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes
 import Popup from "../Popup/Popup";
 import { Box } from "../Layout";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { cn } from "@dot-system/css-utility";
 import style from "./PopOver.module.css";
 
 class PopOver extends React.Component {
@@ -102,7 +103,7 @@ class PopOver extends React.Component {
       return element;
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: style.popup
+      className: cn(style.popup)
     }, childrens);
   }
 
@@ -130,7 +131,7 @@ export class PopOverTarget extends React.Component {
       togglePopup
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.target,
+      className: cn(style.target),
       onClick: togglePopup,
       ref: this.getRef
     }, children);

package/es/Radio/Radio.js

@@ -8,6 +8,7 @@ import Label from "../Label/Label";
 import Typography from "../Typography/Typography";
 import { Container, Box } from "../Layout";
 import CssProvider from "../Provider/CssProvider";
+import { cn } from "@dot-system/css-utility";
 import style from "./Radio.module.css";
 export default class Radio extends React.Component {
   constructor(props) {
@@ -107,7 +108,7 @@ export default class Radio extends React.Component {
       name: name,
       value: value
     }), /*#__PURE__*/React.createElement("label", {
-      className: `${style.radioLabel} ${accessMode}`
+      className: cn(`${style.radioLabel} ${accessMode}`)
     }, /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 40 40"
@@ -115,12 +116,12 @@ export default class Radio extends React.Component {
       cx: "20",
       cy: "20",
       r: "19",
-      className: `${style.rdBox}`
+      className: cn(`${style.rdBox}`)
     }), checked ? /*#__PURE__*/React.createElement("circle", {
       cx: "20",
       cy: "20",
       r: "11.03",
-      className: `${style.centerPath}`
+      className: cn(`${style.centerPath}`)
     }) : null))), (text || secondaryText) && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.labelContainer