@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -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
@@ -44,7 +44,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="1"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="hourField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="hourField_textBox"
@@ -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"
@@ -111,7 +111,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -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
@@ -137,7 +137,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="3"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="minuteField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="minuteField_textBox"
@@ -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"
@@ -204,7 +204,7 @@ exports[`Time rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -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
@@ -230,7 +230,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="5"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="ampmField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="ampmField_textBox"
@@ -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/lib/DropBox/DropBox.js

@@ -27,6 +27,8 @@ var _Common = require("./../utils/Common");
 
 var _isMobilePopover = _interopRequireDefault(require("./utils/isMobilePopover"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropBoxModule = _interopRequireDefault(require("./css/DropBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -100,13 +102,13 @@ function DropBox(props) {
   return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
+    className: (0, _cssUtility.cn)("".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze)),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxModule["default"].freezeLayer,
+    className: (0, _cssUtility.cn)(_DropBoxModule["default"].freezeLayer),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
   }) : null, dropBoxEle)) : dropBoxEle;

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -21,6 +21,8 @@ var _propTypes = require("./props/propTypes");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -125,7 +127,7 @@ function DropBoxElement(props) {
       inlineStyle = _cssJSLogic.inlineStyle;
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: boxClassName,
+    className: (0, _cssUtility.cn)(boxClassName),
     "data-id": "".concat(dataId),
     "data-test-id": "".concat(dataId),
     "data-selector-id": dataSelectorId,
@@ -145,22 +147,22 @@ function DropBoxElement(props) {
     "dot-ui-element": "dropbox"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     tabIndex: "-1",
-    className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),
+    className: (0, _cssUtility.cn)("".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")])),
     onClick: onClick,
     "data-id": "".concat(dataId, "_subcontainer"),
     "data-test-id": "".concat(dataId, "_subcontainer"),
     "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
     ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].closeBar
+    className: (0, _cssUtility.cn)(_DropBoxElementModule["default"].closeBar)
   }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].arrowPosition,
+    className: (0, _cssUtility.cn)(_DropBoxElementModule["default"].arrowPosition),
     style: arrowstyle,
     "data-id": "".concat(dataId, "_arrow"),
     "data-test-id": "".concat(dataId, "_arrow"),
     "data-selector-id": "".concat(dataSelectorId, "_arrow")
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].arrowShape
+    className: (0, _cssUtility.cn)(_DropBoxElementModule["default"].arrowShape)
   })), children));
 }
 

package/lib/DropDown/DropDown.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownModule = _interopRequireDefault(require("./DropDown.module.css"));
 
 var _PopOver = _interopRequireWildcard(require("../PopOver/PopOver"));
@@ -154,7 +156,7 @@ var DropDownItemContainer = /*#__PURE__*/function (_React$Component4) {
           children = _this$props.children,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DropDownModule["default"].listGroup,
+        className: (0, _cssUtility.cn)(_DropDownModule["default"].listGroup),
         onScroll: this.onScroll,
         ref: this.getRef,
         "data-id": dataId,

package/lib/DropDown/DropDownHeading.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownHeadingModule = _interopRequireDefault(require("./DropDownHeading.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -66,7 +68,7 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
           ariaLabelledby = a11y.ariaLabelledby,
           ariaLabel = a11y.ariaLabel;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownHeadingModule["default"][palette], " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_DropDownHeadingModule["default"][palette], " ").concat(customClass)),
         "data-title": title,
         role: role,
         "aria-labelledby": ariaLabelledby,

package/lib/DropDown/DropDownItem.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownItemModule = _interopRequireDefault(require("./DropDownItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -101,20 +103,20 @@ var DropDownItem = /*#__PURE__*/function (_React$Component) {
           _this$props4$customCl = _this$props4.customClass,
           customClass = _this$props4$customCl === void 0 ? '' : _this$props4$customCl;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownItemModule["default"].list, "  ").concat(active ? _DropDownItemModule["default"].listActive : hightlight ? _DropDownItemModule["default"].listHover : '', " ").concat(children && children[1] ? _DropDownItemModule["default"].padding : '', " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_DropDownItemModule["default"].list, "  ").concat(active ? _DropDownItemModule["default"].listActive : hightlight ? _DropDownItemModule["default"].listHover : '', " ").concat(children && children[1] ? _DropDownItemModule["default"].padding : '', " ").concat(customClass)),
         onClick: this.onClick,
         onMouseOver: this.onHover,
         ref: this.getRef,
         "data-id": dataId,
         "data-test-id": dataId
       }, children && children[0] ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].children
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].children)
       }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].children
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].children)
       }, " ", children, " ") : null, value ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].value
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].value)
       }, value) : '', children && children[1] ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].user
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].user)
       }, " ", children[1], " ") : '');
     }
   }]);

package/lib/DropDown/DropDownSearch.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownSearchModule = _interopRequireDefault(require("./DropDownSearch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -90,7 +92,7 @@ var DropDownSearch = /*#__PURE__*/function (_React$Component) {
           _customClass$customTe = customClass.customTextBox,
           customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass),
+        className: (0, _cssUtility.cn)("".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass)),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {

package/lib/DropDown/DropDownSeparator.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownSeparatorModule = _interopRequireDefault(require("./DropDownSeparator.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -52,7 +54,7 @@ var DropDownSeparator = /*#__PURE__*/function (_React$Component) {
       var _this$props$customCla = this.props.customClass,
           customClass = _this$props$customCla === void 0 ? '' : _this$props$customCla;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownSeparatorModule["default"].separator, " ").concat(customClass)
+        className: (0, _cssUtility.cn)("".concat(_DropDownSeparatorModule["default"].separator, " ").concat(customClass))
       });
     }
   }]);

package/lib/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DropDownHeading rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="light "
+    class="light"
     data-id="DropDownHeading"
     data-selector-id="dropdownHeading"
     data-test-id="DropDownHeading"

package/lib/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/lib/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap

@@ -3,12 +3,12 @@
 exports[`DropDownSearch rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="search mediumSearch "
+    class="search mediumSearch"
     data-id="DropDownSearch"
     data-test-id="DropDownSearch"
   >
     <input
-      class="  container medium  default border effect  borderColor_default  "
+      class="container medium default border effect borderColor_default"
       data-id="textBox"
       data-selector-id="textBox"
       data-test-id="textBox"

package/lib/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DropDownSeparator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="separator "
+    class="separator"
   />
 </DocumentFragment>
 `;

package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_breakSpaces "
+    class="reset whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_normal "
+    class="reset whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -21,7 +21,7 @@ exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_nowrap "
+    class="reset whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_pre "
+    class="reset whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -39,7 +39,7 @@ exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preLine "
+    class="reset whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -48,7 +48,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preWrap "
+    class="reset whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>
@@ -57,7 +57,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset  "
+    class="reset"
   />
 </DocumentFragment>
 `;

package/lib/Label/Label.js

@@ -17,6 +17,8 @@ var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LabelModule = _interopRequireDefault(require("./Label.module.css"));
 
 var _LabelColorsModule = _interopRequireDefault(require("./LabelColors.module.css"));
@@ -82,7 +84,7 @@ var Label = /*#__PURE__*/function (_React$Component) {
       var tabIndex = a11y.tabIndex;
 
       var labelElement = /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass)),
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,

package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -3,8 +3,7 @@
 exports[`Label rendering the Id 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -18,8 +17,7 @@ exports[`Label rendering the Id 1`] = `
 exports[`Label rendering the clipped is true 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-          dotted cursor "
+    class="label title medium default font_default dotted cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -32,8 +30,7 @@ exports[`Label rendering the clipped is true 1`] = `
 exports[`Label rendering the customClass 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor LabelCustomClass"
+    class="label title medium default font_default cursor LabelCustomClass"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -46,8 +43,7 @@ exports[`Label rendering the customClass 1`] = `
 exports[`Label rendering the defult props 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -60,8 +56,7 @@ exports[`Label rendering the defult props 1`] = `
 exports[`Label rendering the htmlFor 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -75,8 +70,7 @@ exports[`Label rendering the htmlFor 1`] = `
 exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           pointer "
+    class="label title medium default font_default pointer"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -89,8 +83,7 @@ exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`
 exports[`Label rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium danger font_default
-           cursor "
+    class="label title medium danger font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -103,8 +96,7 @@ exports[`Label rendering the palette of- danger 1`] = `
 exports[`Label rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium dark font_default
-           cursor "
+    class="label title medium dark font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -117,8 +109,7 @@ exports[`Label rendering the palette of- dark 1`] = `
 exports[`Label rendering the palette of- default 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -131,8 +122,7 @@ exports[`Label rendering the palette of- default 1`] = `
 exports[`Label rendering the palette of- disable 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium disable font_default
-           cursor "
+    class="label title medium disable font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -145,8 +135,7 @@ exports[`Label rendering the palette of- disable 1`] = `
 exports[`Label rendering the palette of- mandatory 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium mandatory font_default
-           cursor "
+    class="label title medium mandatory font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -159,8 +148,7 @@ exports[`Label rendering the palette of- mandatory 1`] = `
 exports[`Label rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium primary font_default
-           cursor "
+    class="label title medium primary font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -173,8 +161,7 @@ exports[`Label rendering the palette of- primary 1`] = `
 exports[`Label rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium secondary font_default
-           cursor "
+    class="label title medium secondary font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -187,8 +174,7 @@ exports[`Label rendering the palette of- secondary 1`] = `
 exports[`Label rendering the size of- large 1`] = `
 <DocumentFragment>
   <label
-    class="label title large default font_default
-           cursor "
+    class="label title large default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -201,8 +187,7 @@ exports[`Label rendering the size of- large 1`] = `
 exports[`Label rendering the size of- medium 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -215,8 +200,7 @@ exports[`Label rendering the size of- medium 1`] = `
 exports[`Label rendering the size of- small 1`] = `
 <DocumentFragment>
   <label
-    class="label title small default font_default
-           cursor "
+    class="label title small default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -229,8 +213,7 @@ exports[`Label rendering the size of- small 1`] = `
 exports[`Label rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <label
-    class="label title xsmall default font_default
-           cursor "
+    class="label title xsmall default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -243,8 +226,7 @@ exports[`Label rendering the size of- xsmall 1`] = `
 exports[`Label rendering the title 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -258,8 +240,7 @@ exports[`Label rendering the title 1`] = `
 exports[`Label rendering the type of- subtitle 1`] = `
 <DocumentFragment>
   <label
-    class="label subtitle medium default font_default
-           cursor "
+    class="label subtitle medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -272,8 +253,7 @@ exports[`Label rendering the type of- subtitle 1`] = `
 exports[`Label rendering the type of- title 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -286,8 +266,7 @@ exports[`Label rendering the type of- title 1`] = `
 exports[`Label rendering the variant of- default 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -300,8 +279,7 @@ exports[`Label rendering the variant of- default 1`] = `
 exports[`Label rendering the variant of- primary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_primary
-           cursor "
+    class="label title medium default font_primary cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -320,8 +298,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
     style="gap: 6px;"
   >
     <label
-      class="label title large danger font_default
-           cursor "
+      class="label title large danger font_default cursor"
       data-id="label"
       data-selector-id="label"
       data-test-id="label"
@@ -353,8 +330,7 @@ exports[`Label rendering with renderRightPlaceholderNode 1`] = `
     data-test-id="flex"
   >
     <label
-      class="label title medium default font_default
-           cursor "
+      class="label title medium default font_default cursor"
       data-id="label"
       data-selector-id="label"
       data-test-id="label"