@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/lib/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap

@@ -3,28 +3,27 @@
 exports[`CheckBoxField rendering the custom children 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="checkBoxField"
   >
     <div
-      class="checkboxFieldContainer "
+      class="checkboxFieldContainer"
     >
       <div
-        class="flex rowdir top"
+        class="flex row alignItems_start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="checkboxRow shrinkOff"
+          class="noShrink checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="container pointer primary 
-           inflex rowdir vCenter"
+            class="inlineFlex row alignItems_center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -32,7 +31,7 @@ exports[`CheckBoxField rendering the custom children 1`] = `
             tabindex="0"
           >
             <div
-              class="boxContainer  medium  filled  shrinkOff"
+              class="noShrink boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -41,7 +40,7 @@ exports[`CheckBoxField rendering the custom children 1`] = `
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -62,13 +61,13 @@ exports[`CheckBoxField rendering the custom children 1`] = `
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex rowdir vCenter"
+            class="flex row alignItems_center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
@@ -95,28 +94,27 @@ exports[`CheckBoxField rendering the custom children 1`] = `
 exports[`CheckBoxField rendering the custom label children via renderLabelProps 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="checkBoxField"
   >
     <div
-      class="checkboxFieldContainer "
+      class="checkboxFieldContainer"
     >
       <div
-        class="flex rowdir top"
+        class="flex row alignItems_start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="checkboxRow shrinkOff"
+          class="noShrink checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="container pointer primary 
-           inflex rowdir vCenter"
+            class="inlineFlex row alignItems_center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -124,7 +122,7 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
             tabindex="0"
           >
             <div
-              class="boxContainer  medium  filled  shrinkOff"
+              class="noShrink boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -133,7 +131,7 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -154,13 +152,13 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex rowdir vCenter"
+            class="flex row alignItems_center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
@@ -187,28 +185,27 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
 exports[`CheckBoxField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="checkBoxField"
   >
     <div
-      class="checkboxFieldContainer "
+      class="checkboxFieldContainer"
     >
       <div
-        class="flex rowdir top"
+        class="flex row alignItems_start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="checkboxRow shrinkOff"
+          class="noShrink checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="container pointer primary 
-           inflex rowdir vCenter"
+            class="inlineFlex row alignItems_center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -216,7 +213,7 @@ exports[`CheckBoxField rendering the defult props 1`] = `
             tabindex="0"
           >
             <div
-              class="boxContainer  medium  filled  shrinkOff"
+              class="noShrink boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -225,7 +222,7 @@ exports[`CheckBoxField rendering the defult props 1`] = `
                 type="hidden"
               />
               <label
-                class="checkbox pointer medium "
+                class="checkbox pointer medium"
               >
                 <svg
                   viewBox="0 0 40 40"
@@ -246,13 +243,13 @@ exports[`CheckBoxField rendering the defult props 1`] = `
           </div>
         </div>
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex rowdir vCenter"
+            class="flex row alignItems_center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -23,6 +23,8 @@ var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -168,7 +170,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       var isFocusable = !needReadOnlyStyle || !isReadOnly && needReadOnlyStyle;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
@@ -190,7 +192,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         testId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : ''))
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: uniqueId,
         id: id,

package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -3,24 +3,24 @@
 exports[`CurrencyField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="currencyField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
-            class="  container xmedium  primary  effect  borderColor_default  "
+            class="container xmedium primary effect borderColor_default"
             data-id="textBoxIcon"
             data-selector-id="textBoxIcon"
             data-test-id="textBoxIcon"
@@ -31,13 +31,13 @@ exports[`CurrencyField rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"

package/lib/form/fields/DateField/DateField.js

@@ -23,6 +23,8 @@ var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -175,7 +177,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var getAriaId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
@@ -203,9 +205,9 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
           }
         }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : ''))
       }, isLocked && lockedValueText ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _FieldsModule["default"].lockText
+        className: (0, _cssUtility.cn)(_FieldsModule["default"].lockText)
       }, lockedValueText) : /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], _extends({
         textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
         textBoxVariant: textBoxVariant,

package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -3,33 +3,33 @@
 exports[`DateField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="dateField"
   >
     <div
-      class="fieldContainer "
+      class="fieldContainer"
     >
       <div
         class="container"
       >
         <div
-          class=" textBox  enabled"
+          class="textBox enabled"
           data-id="dateField(formatted_undefined)_widget"
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <input
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default  "
+                class="pointer container xmedium primary effect borderColor_default"
                 data-id="dateField(formatted_undefined)"
                 data-selector-id="textBoxIcon"
                 data-test-id="dateField(formatted_undefined)"
@@ -40,32 +40,32 @@ exports[`DateField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="datePickIcon inflex coldir both"
+                    class="inlineFlex column alignItems_center justifyContent_center datePickIcon"
                     data-id="dateField(formatted_undefined)_datePicker"
                     data-selector-id="container"
                     data-test-id="dateField(formatted_undefined)_datePicker"
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-Datepicker    "
+                      class="zd_font_icons basic icon-Datepicker"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

package/lib/form/fields/FieldContainer/FieldContainer.js

@@ -17,6 +17,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _icons = require("@zohodesk/icons");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -100,7 +102,7 @@ var FieldContainer = /*#__PURE__*/function (_PureComponent) {
         "data-title": ePhiTitle,
         "data-id": "".concat(dataId, "_ePHI"),
         "data-test-id": "".concat(dataId, "_ePHI"),
-        className: _FieldsModule["default"].ePhiTag
+        className: (0, _cssUtility.cn)(_FieldsModule["default"].ePhiTag)
       }, ePhiText) : null, renderEnd ? renderEnd() : null);
     }
   }]);

package/lib/form/fields/FieldContainer/__tests__/__snapshots__/FieldContainer.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`FieldContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex rowdir vCenter"
+    class="flex row alignItems_center"
     data-id="containerComponent"
     data-selector-id="fieldContainer"
     data-test-id="containerComponent"

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -23,6 +23,8 @@ var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -188,7 +190,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
       var isDarkPalette = palette === 'dark';
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {

package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -3,37 +3,36 @@
 exports[`MultiSelectField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container "
+    class="container"
     data-selector-id="multiSelectField"
   >
     <div
-      class="wrapper     effect"
+      class="wrapper effect"
       data-id="multiSelect"
       data-selector-id="multiSelect"
       data-test-id="multiSelect"
     >
       <div
-        class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+        class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="wrapper grow basisAuto shrinkOn"
+          class="flexible basis_auto shrink wrapper"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class=" custmSpan custmSpanMedium 
-          "
+            class="custmSpan custmSpanMedium"
           />
           <div
-            class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+            class="flex row varClass customContainer effect container custmInputWrapper"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -43,7 +42,7 @@ exports[`MultiSelectField rendering the defult props 1`] = `
                 aria-haspopup="true"
                 aria-required="true"
                 autocomplete="off"
-                class="  container medium  default  effect  borderColor_default  "
+                class="container medium default effect borderColor_default"
                 data-id="multiSelect_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="multiSelect_textBox"
@@ -55,25 +54,25 @@ exports[`MultiSelectField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir vCenter"
+                    class="inlineFlex row alignItems_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/lib/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap

@@ -3,36 +3,36 @@
 exports[`PhoneField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover rowdir"
+    class="flex fullSize row container"
     data-id="containerComponent"
     data-selector-id="phoneField"
     data-test-id="containerComponent"
   >
     <div
-      class="phoneField grow basis shrinkOff"
+      class="flexible basis_zero noShrink phoneField"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="container "
+        class="container"
         data-selector-id="textBoxField"
       >
         <div
-          class="fieldContainer "
+          class="fieldContainer"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <input
-                class="  container xmedium  primary  effect  borderColor_default  "
+                class="container xmedium primary effect borderColor_default"
                 data-id="textBoxIcon"
                 data-selector-id="textBoxIcon"
                 data-test-id="textBoxIcon"
@@ -43,13 +43,13 @@ exports[`PhoneField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -60,7 +60,7 @@ exports[`PhoneField rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/lib/form/fields/RadioField/RadioField.js

@@ -23,6 +23,8 @@ var _Radio = _interopRequireDefault(require("@zohodesk/components/es/Radio/Radio
 
 var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -182,7 +184,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           _customClass$customRa2 = customClass.customRadioClass,
           customRadioClass = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(customWrapperClass),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(customWrapperClass)),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
@@ -203,7 +205,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           }
         }
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer))
       }, options.map(function (option, index) {
         var _compileClassNames;
 
@@ -224,10 +226,10 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           title: infoTooltip,
           iconClass: _FieldsModule["default"].infoIcon
         }, InfoIconProps)), renderRightPlaceholderNode) : renderRightPlaceholderNode;
-        var radioBoxClasses = isBoxStyle ? (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customRadioClass, !!customRadioClass), _defineProperty(_compileClassNames, _FieldsModule["default"].radioBox, true), _defineProperty(_compileClassNames, _FieldsModule["default"].withSecondaryText, !!secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].primaryTextOnly, !secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].hoverableRadioBox, !isDisabledState), _defineProperty(_compileClassNames, _FieldsModule["default"].radioBoxActive, isChecked), _compileClassNames)) : '';
+        var radioBoxClasses = isBoxStyle ? (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, _FieldsModule["default"].radioBox, true), _defineProperty(_compileClassNames, _FieldsModule["default"].withSecondaryText, !!secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].primaryTextOnly, !secondaryText), _defineProperty(_compileClassNames, _FieldsModule["default"].hoverableRadioBox, !isDisabledState), _defineProperty(_compileClassNames, _FieldsModule["default"].radioBoxActive, isChecked), _defineProperty(_compileClassNames, customRadioClass, !!customRadioClass), _compileClassNames)) : '';
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: text,
-          className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap, " ").concat(customRadioWrapperClass)
+          className: (0, _cssUtility.cn)("".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap, " ").concat(customRadioWrapperClass))
         }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({}, customProps, {
           id: index,
           value: value,