@zohodesk/dot 1.9.18 → 1.9.20

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,
@@ -236,9 +238,4 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = CurrencyField;
 CurrencyField.propTypes = _propTypes.propTypes;
-CurrencyField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   CurrencyField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+CurrencyField.defaultProps = _defaultProps.defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CurrencyField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -10,11 +10,11 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer"
     >
       <div
-        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
+        class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -31,13 +31,13 @@ exports[`CurrencyField rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="noShrink iconContainer"
+          class="d-flex-shrink-0 iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-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,
@@ -250,9 +252,4 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = DateField;
 DateField.propTypes = _propTypes.propTypes;
-DateField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   DateField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+DateField.defaultProps = _defaultProps.defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DateField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -18,11 +18,11 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder dateDisplayValue"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -40,32 +40,32 @@ exports[`DateField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex column alignItems_center justifyContent_center datePickIcon"
+                    class="d-inline-flex d-flex-col d-items-center d-justify-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 ff icon-Datepicker basic d-inline-block d-align-middle"
                       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);
     }
   }]);
@@ -110,9 +112,4 @@ var FieldContainer = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = FieldContainer;
 FieldContainer.propTypes = _propTypes.propTypes;
-FieldContainer.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   FieldContainer.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+FieldContainer.defaultProps = _defaultProps.defaultProps;

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`FieldContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center"
+    class="d-flex d-flex-row d-items-center"
     data-id="containerComponent"
     data-selector-id="fieldContainer"
     data-test-id="containerComponent"

package/lib/form/fields/Fields.module.css

@@ -1,11 +1,11 @@
 .container,
 .checkboxFieldContainer {
-  position: relative;
+  composes: d-relative from global;
   word-break: break-word;
 }
 
 .fieldContainer {
-  position: relative;
+  composes: d-relative from global;
   min-height: var(--zd_size25) ;
 }
 
@@ -54,11 +54,12 @@
 }
 
 .cbTextPointer {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
-.disabled, .readonly {
-  cursor: not-allowed;
+.disabled,
+.readonly {
+  composes: d-cursor-not-allowed from global;
 }
 
 .cbTextReadonly,
@@ -74,15 +75,15 @@
 
 .radio,
 .radioWrap {
-  max-width: 100%  
+  composes: d-max-w-full from global;
 }
 
 .radiosWrapper {
-  gap: var(--zd_size10) 
+  composes: d-gap-[10px] from global;
 }
 
 .radioBox {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
   transition: border var(--zd_transition3);
   border: 1px solid var(--zdt_radiofield_box_border);
   border-radius: 6px;
@@ -121,16 +122,15 @@
 
 .periodContainer {
   composes: dflex flexrow flexwrap from '~@zohodesk/components/es/common/common.module.css';
-  width: 100% ;
+  composes: d-w-full from global;
   /*margin-left: 15px;*/
 }
 
 .phoneIcon {
+  composes: d-inline-block d-cursor-pointer from global;
   color: var(--zdt_fields_phoneicon_icon);
   margin-block: var(--zd_size15) 0 ;
   margin-inline:var(--zd_size10) ;
-  display: inline-block;
-  cursor: pointer;
 }
 
 .phoneIcon:hover {
@@ -138,8 +138,8 @@
 }
 
 .newtabIcon {
+  composes: d-cursor-pointer from global;
   color: var(--zdt_fields_newtabicon_icon);
-  cursor: pointer;
 }
 
 .newtabIcon:hover {
@@ -179,11 +179,10 @@
 }
 
 .newTab {
+  composes: d-hidden d-cursor-pointer from global;
   margin-inline-start: var(--zd_size6) ;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0 ;
-  display: none;
-  cursor: pointer;
 }
 
 .newTab:hover {
@@ -196,8 +195,8 @@
 
 .lockText {
   font-size: var(--zd_font_size13) ;
-  font-style: italic;
   composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-italic from global;
 }
 
 .labelMandatory:after {
@@ -221,11 +220,11 @@
 }
 
 .hasChildren {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .rightPlaceholder {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: var(--zd_size4) 
 }
 

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"], {
@@ -267,9 +269,4 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = MultiSelectField;
 MultiSelectField.propTypes = _propTypes.propTypes;
-MultiSelectField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   MultiSelectField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+MultiSelectField.defaultProps = _defaultProps.defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MultiSelectField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -13,13 +13,13 @@ exports[`MultiSelectField rendering the defult props 1`] = `
       data-test-id="multiSelect"
     >
       <div
-        class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
+        class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_auto shrink wrapper"
+          class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -28,11 +28,11 @@ exports[`MultiSelectField rendering the defult props 1`] = `
             class="custmSpan custmSpanMedium"
           />
           <div
-            class="flex row varClass customContainer effect container custmInputWrapper"
+            class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -54,25 +54,25 @@ exports[`MultiSelectField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="noShrink icon"
+                  class="d-flex-shrink-0 icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="inlineFlex row alignItems_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/lib/form/fields/PhoneField/PhoneField.js

@@ -228,9 +228,4 @@ var PhoneField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = PhoneField;
 PhoneField.propTypes = _propTypes.propTypes;
-PhoneField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   PhoneField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+PhoneField.defaultProps = _defaultProps.defaultProps;

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

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PhoneField rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row container"
+    class="d-flex d-h-full d-w-full d-flex-row container"
     data-id="containerComponent"
     data-selector-id="phoneField"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink phoneField"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 phoneField"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -22,11 +22,11 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -43,13 +43,13 @@ exports[`PhoneField rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-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="noShrink"
+      class="d-flex-shrink-0"
       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;
 
@@ -227,7 +229,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         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,
@@ -279,9 +281,4 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = RadioField;
 RadioField.propTypes = _propTypes.propTypes;
-RadioField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   RadioField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+RadioField.defaultProps = _defaultProps.defaultProps;