@zohodesk/dot 1.9.18 → 1.9.20

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RadioField rendering options with isBoxStyle 1`] = `
 <DocumentFragment>
@@ -15,7 +15,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox"
           data-id="1"
           data-selector-id="container"
           data-test-id="1"
@@ -23,7 +23,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
           tabindex="0"
         >
           <div
-            class="noShrink radio hoverprimary medium filled centerPathprimary"
+            class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -50,7 +50,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -73,7 +73,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
         <div
           aria-checked="false"
           aria-readonly="true"
-          class="flex row alignItems_center justifyContent_center container disabled radioBox primaryTextOnly"
+          class="d-flex d-flex-row d-items-center d-justify-center container disabled radioBox primaryTextOnly"
           data-id="2"
           data-selector-id="container"
           data-test-id="2"
@@ -82,7 +82,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink radio medium filled centerPathprimary disabled"
+            class="d-flex-shrink-0 radio medium filled centerPathprimary disabled"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -109,7 +109,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -132,7 +132,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox"
           data-id="3"
           data-selector-id="container"
           data-test-id="3"
@@ -140,7 +140,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink radio hoverprimary medium filled centerPathprimary"
+            class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -167,13 +167,13 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex row alignItems_center"
+              class="d-flex d-flex-row d-items-center"
               data-id="flex"
               data-test-id="flex"
             >
@@ -187,13 +187,13 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
                 Delhi
               </label>
               <div
-                class="flex row alignItems_center"
+                class="d-flex d-flex-row d-items-center"
                 data-id="flex"
                 data-test-id="flex"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-info infoIcon"
+                  class="zd_font_icons ff icon-info basic d-inline-block d-align-middle infoIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -211,7 +211,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect radioBox primaryTextOnly hoverableRadioBox"
           data-id="4"
           data-selector-id="container"
           data-test-id="4"
@@ -219,7 +219,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink radio hoverprimary medium filled centerPathprimary"
+            class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -246,7 +246,7 @@ exports[`RadioField rendering options with isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -296,7 +296,7 @@ exports[`RadioField rendering with options 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
           data-id="1"
           data-selector-id="container"
           data-test-id="1"
@@ -304,7 +304,7 @@ exports[`RadioField rendering with options 1`] = `
           tabindex="0"
         >
           <div
-            class="noShrink radio hoverprimary medium filled centerPathprimary"
+            class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -331,7 +331,7 @@ exports[`RadioField rendering with options 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -354,7 +354,7 @@ exports[`RadioField rendering with options 1`] = `
         <div
           aria-checked="false"
           aria-readonly="true"
-          class="flex row alignItems_center justifyContent_center container disabled"
+          class="d-flex d-flex-row d-items-center d-justify-center container disabled"
           data-id="2"
           data-selector-id="container"
           data-test-id="2"
@@ -363,7 +363,7 @@ exports[`RadioField rendering with options 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink radio medium filled centerPathprimary disabled"
+            class="d-flex-shrink-0 radio medium filled centerPathprimary disabled"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -390,7 +390,7 @@ exports[`RadioField rendering with options 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -413,7 +413,7 @@ exports[`RadioField rendering with options 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
           data-id="3"
           data-selector-id="container"
           data-test-id="3"
@@ -421,7 +421,7 @@ exports[`RadioField rendering with options 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink radio hoverprimary medium filled centerPathprimary"
+            class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -448,13 +448,13 @@ exports[`RadioField rendering with options 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex row alignItems_center"
+              class="d-flex d-flex-row d-items-center"
               data-id="flex"
               data-test-id="flex"
             >
@@ -468,13 +468,13 @@ exports[`RadioField rendering with options 1`] = `
                 Delhi
               </label>
               <div
-                class="flex row alignItems_center"
+                class="d-flex d-flex-row d-items-center"
                 data-id="flex"
                 data-test-id="flex"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-info infoIcon"
+                  class="zd_font_icons ff icon-info basic d-inline-block d-align-middle infoIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -492,7 +492,7 @@ exports[`RadioField rendering with options 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
           data-id="4"
           data-selector-id="container"
           data-test-id="4"
@@ -500,7 +500,7 @@ exports[`RadioField rendering with options 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink radio hoverprimary medium filled centerPathprimary"
+            class="d-flex-shrink-0 radio hoverprimary medium filled centerPathprimary"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -527,7 +527,7 @@ exports[`RadioField rendering with options 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -564,7 +564,7 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect radioBox withSecondaryText hoverableRadioBox"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect radioBox withSecondaryText hoverableRadioBox"
           data-id="1"
           data-selector-id="container"
           data-test-id="1"
@@ -572,7 +572,7 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
           tabindex="0"
         >
           <div
-            class="noShrink alignSelf_start radio hoverprimary medium filled centerPathprimary withSecondaryText"
+            class="d-flex-shrink-0 d-self-start radio hoverprimary medium filled centerPathprimary withSecondaryText"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -599,7 +599,7 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -628,7 +628,7 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
         <div
           aria-checked="false"
           aria-readonly="true"
-          class="flex row alignItems_center justifyContent_center container disabled radioBox withSecondaryText"
+          class="d-flex d-flex-row d-items-center d-justify-center container disabled radioBox withSecondaryText"
           data-id="2"
           data-selector-id="container"
           data-test-id="2"
@@ -637,7 +637,7 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink alignSelf_start radio medium filled centerPathprimary disabled withSecondaryText"
+            class="d-flex-shrink-0 d-self-start radio medium filled centerPathprimary disabled withSecondaryText"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -664,7 +664,7 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -692,7 +692,7 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect radioBox withSecondaryText hoverableRadioBox"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect radioBox withSecondaryText hoverableRadioBox"
           data-id="3"
           data-selector-id="container"
           data-test-id="3"
@@ -700,7 +700,7 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink alignSelf_start radio hoverprimary medium filled centerPathprimary withSecondaryText"
+            class="d-flex-shrink-0 d-self-start radio hoverprimary medium filled centerPathprimary withSecondaryText"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -727,13 +727,13 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex row alignItems_center"
+              class="d-flex d-flex-row d-items-center"
               data-id="flex"
               data-test-id="flex"
             >
@@ -747,13 +747,13 @@ exports[`RadioField rendering with secondaryTextOptions & isBoxStyle 1`] = `
                 Delhi
               </label>
               <div
-                class="flex row alignItems_center"
+                class="d-flex d-flex-row d-items-center"
                 data-id="flex"
                 data-test-id="flex"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-info infoIcon"
+                  class="zd_font_icons ff icon-info basic d-inline-block d-align-middle infoIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -791,7 +791,7 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
           data-id="1"
           data-selector-id="container"
           data-test-id="1"
@@ -799,7 +799,7 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
           tabindex="0"
         >
           <div
-            class="noShrink alignSelf_start radio hoverprimary medium filled centerPathprimary withSecondaryText"
+            class="d-flex-shrink-0 d-self-start radio hoverprimary medium filled centerPathprimary withSecondaryText"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -826,7 +826,7 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -855,7 +855,7 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
         <div
           aria-checked="false"
           aria-readonly="true"
-          class="flex row alignItems_center justifyContent_center container disabled"
+          class="d-flex d-flex-row d-items-center d-justify-center container disabled"
           data-id="2"
           data-selector-id="container"
           data-test-id="2"
@@ -864,7 +864,7 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink alignSelf_start radio medium filled centerPathprimary disabled withSecondaryText"
+            class="d-flex-shrink-0 d-self-start radio medium filled centerPathprimary disabled withSecondaryText"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -891,7 +891,7 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -919,7 +919,7 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
         <div
           aria-checked="false"
           aria-readonly="false"
-          class="flex row alignItems_center justifyContent_center container pointer hoverEfffect"
+          class="d-flex d-flex-row d-items-center d-justify-center container pointer hoverEfffect"
           data-id="3"
           data-selector-id="container"
           data-test-id="3"
@@ -927,7 +927,7 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
           tabindex="-1"
         >
           <div
-            class="noShrink alignSelf_start radio hoverprimary medium filled centerPathprimary withSecondaryText"
+            class="d-flex-shrink-0 d-self-start radio hoverprimary medium filled centerPathprimary withSecondaryText"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -954,13 +954,13 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
             </label>
           </div>
           <div
-            class="flexible basis_zero noShrink labelContainer"
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 labelContainer"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex row alignItems_center"
+              class="d-flex d-flex-row d-items-center"
               data-id="flex"
               data-test-id="flex"
             >
@@ -974,13 +974,13 @@ exports[`RadioField rendering with secondaryTextOptions 1`] = `
                 Delhi
               </label>
               <div
-                class="flex row alignItems_center"
+                class="d-flex d-flex-row d-items-center"
                 data-id="flex"
                 data-test-id="flex"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-info infoIcon"
+                  class="zd_font_icons ff icon-info basic d-inline-block d-align-middle infoIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"

package/lib/form/fields/SelectField/SelectField.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 }; }
@@ -156,7 +158,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       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"], {
@@ -183,7 +185,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
           }
         }
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : '')
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '', " ").concat(fieldClass ? fieldClass : ''))
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({
         options: options,
         selectedValue: selectedValue,
@@ -238,9 +240,4 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = SelectField;
 SelectField.propTypes = _propTypes.propTypes;
-SelectField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   SelectField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+SelectField.defaultProps = _defaultProps.defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SelectField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -19,11 +19,11 @@ exports[`SelectField rendering the defult props 1`] = `
           data-test-id="selectComponent"
         >
           <div
-            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             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"
@@ -51,39 +51,39 @@ exports[`SelectField 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 justifyContent_center rightPlaceholder"
+                    class="d-inline-flex d-flex-row d-items-center d-justify-center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
                       data-id="selectComponent_downIcon"
                       data-selector-id="container"
                       data-test-id="selectComponent_downIcon"
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down"
+                        class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -39,6 +39,8 @@ var _General = require("../../../utils/General");
 
 var _Common = require("@zohodesk/components/es/utils/Common.js");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TagsMultiSelectModule = _interopRequireDefault(require("./TagsMultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -235,7 +237,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
+        className: (0, _cssUtility.cn)("".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className)),
         onClick: _General.stopBubbling,
         "data-id": "".concat(dataId, "_tagsContainer"),
         "data-test-id": "".concat(dataId, "_tagsContainer"),
@@ -277,7 +279,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         shrink: true,
         className: _TagsMultiSelectModule["default"].inputWrapper
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _TagsMultiSelectModule["default"].custmSpan
+        className: (0, _cssUtility.cn)(_TagsMultiSelectModule["default"].custmSpan)
       }, name), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: htmlId,
         dataId: "".concat(dataId, "_tagInp"),
@@ -387,8 +389,4 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = TagsMultiSelect;
 TagsMultiSelect.propTypes = _propTypes.propTypes;
-TagsMultiSelect.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   TagsMultiSelect.docs = {
-//     componentGroup: 'TagsMultiSelect'
-//   };
-// }
+TagsMultiSelect.defaultProps = _defaultProps.defaultProps;