@zohodesk/dot 1.9.18 → 1.9.20

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

@@ -1,8 +1,8 @@
 .container {
-  position: relative;
+  composes: d-relative from global;
 }
 .tag {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .moreLess,
 .tag {
@@ -10,9 +10,9 @@
   margin-inline:0 var(--zd_size6) ;
 }
 .input {
+  composes: d-w-full from global;
   height: var(--zd_size20) ;
   margin-block-end: var(--zd_size4) ;
-  width: 100% ;
 }
 .viewpopNew {
   max-height: var(--zd_size250) ;
@@ -54,16 +54,15 @@
   border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
 }
 .moreLess {
+  composes: d-cursor-pointer from global;
   color: var(--zdt_tagsmultiselect_more_text);
   font-size: var(--zd_font_size13) ;
-  cursor: pointer;
 }
 .moreLess:hover {
   color: var(--zdt_tagsmultiselect_more_hover_text);
 }
 .inputWrapper {
-  position: relative;
-  max-width: 100% ;
+  composes: d-relative d-max-w-full from global;
   min-width: var(--zd_size5) ;
   font-size: 0 ;
 }
@@ -84,20 +83,13 @@
   margin-block-start: var(--zd_size1) ;
 }
 .custmSpan {
+  composes: d-inline-block d-overflow-hidden d-invisible d-max-w-full d-align-middle d-whitespace-nowrap d-opacity-0 from global;
   height: var(--zd_size25) ;
   padding-inline-end: var(--zd_size28) ;
-  display: inline-block;
-  vertical-align: middle;
-  opacity: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 100% ;
-  visibility: hidden;
 }
 .custmInp {
-  position: absolute;
+  composes: d-absolute d-w-full from global;
   top: 0 ;
-  width: 100% ;
 }
 [dir=ltr] .custmInp {
   left: 0 ;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TagsMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
@@ -9,13 +9,13 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
     data-test-id="_tagsContainer"
   >
     <div
-      class="flex row wrap alignItems_center scroll_vertical tagDiv"
+      class="d-flex d-flex-row d-flex-wrap d-items-center d-overflow-y-auto d-overflow-x-hidden tagDiv"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="flexible basis_auto shrink inputWrapper"
+        class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink inputWrapper"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -24,11 +24,11 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="flex row varClass customContainer effect container custmInp"
+          class="d-flex d-flex-row varClass customContainer effect container custmInp"
           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"
@@ -45,13 +45,13 @@ exports[`TagsMultiSelect 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/TagsMultiSelectField/TagsMultiSelectField.js

@@ -25,6 +25,8 @@ var _TagsMultiSelect = _interopRequireDefault(require("../TagsMultiSelect/TagsMu
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 var _TagsMultiSelectFieldModule = _interopRequireDefault(require("./TagsMultiSelectField.module.css"));
@@ -232,7 +234,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+    className: (0, _cssUtility.cn)("".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
     tabIndex: "0",
     "aria-label": "".concat(labelName),
     "data-selector-id": dataSelectorId
@@ -316,11 +318,6 @@ TagsMultiSelectField.propTypes = _propTypes.propTypes;
 TagsMultiSelectField.defaultProps = _defaultProps.defaultProps;
 var TagsMultiSelectField_Component = (0, _Popup["default"])(TagsMultiSelectField);
 TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
-TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes; // if (__DOCS__) {
-//   TagsMultiSelectField.docs = {
-//     componentGroup: 'TagsMultiSelectField'
-//   };
-// }
-
+TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes;
 var _default = TagsMultiSelectField_Component;
 exports["default"] = _default;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TagsMultiSelectField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -15,13 +15,13 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
       data-test-id="_tagsContainer"
     >
       <div
-        class="flex row wrap alignItems_center scroll_vertical tagDiv"
+        class="d-flex d-flex-row d-flex-wrap d-items-center d-overflow-y-auto d-overflow-x-hidden tagDiv"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_auto shrink inputWrapper"
+          class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink inputWrapper"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -30,11 +30,11 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="flex row varClass customContainer effect container custmInp"
+            class="d-flex d-flex-row varClass customContainer effect container custmInp"
             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,13 +51,13 @@ exports[`TagsMultiSelectField 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/TextBoxField/TextBoxField.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 }; }
@@ -144,7 +146,7 @@ var TextBoxField = /*#__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"], {
@@ -173,7 +175,7 @@ var TextBoxField = /*#__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)] : ''))
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: uniqueId,
         id: id,
@@ -220,9 +222,4 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = TextBoxField;
 TextBoxField.propTypes = _propTypes.propTypes;
-TextBoxField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   TextBoxField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+TextBoxField.defaultProps = _defaultProps.defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextBoxField rendering the defult props 1`] = `
 <DocumentFragment>
@@ -10,11 +10,11 @@ exports[`TextBoxField 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[`TextBoxField 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/TextEditor/TextEditor.js

@@ -19,6 +19,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _editorUtils = require("../../../utils/editorUtils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TextEditorModule = _interopRequireDefault(require("./TextEditor.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -447,7 +449,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
       }), editorDoc && ImgLazyLoad ? /*#__PURE__*/_react["default"].createElement(ImgLazyLoad, {
         node: editorDoc
       }) : null, isReadOnly || isDisabled ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TextEditorModule["default"].readOnlyMask
+        className: (0, _cssUtility.cn)(_TextEditorModule["default"].readOnlyMask)
       }) : null);
     }
   }]);
@@ -457,9 +459,4 @@ var TextEditor = /*#__PURE__*/function (_Component) {
 
 exports["default"] = TextEditor;
 TextEditor.defaultProps = _defaultProps.defaultProps;
-TextEditor.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   TextEditor.docs = {
-//     componentGroup: 'Fields',
-//     folderName: 'TextEditor'
-//   };
-// }
+TextEditor.propTypes = _propTypes.propTypes;

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

@@ -2,14 +2,10 @@
 
 /* editor common css */
 .icon {
-  position: relative;
+  composes: d-inline-block d-relative d-align-middle d-text-inherit d-fill-current from global;
   top: calc( var(--zd_size1) * -1 ) ;
-  display: inline-block;
-  vertical-align: middle;
   width: var(--zd_size24) ;
   height: var(--zd_size24) ;
-  color: inherit;
-  fill: currentColor;
 }
 
 .small {
@@ -18,7 +14,7 @@
 }
 
 .threeDotIcon {
-  display: inline-block;
+  composes: d-inline-block from global;
 }
 
 [dir=ltr] .threeDotIcon {
@@ -36,8 +32,7 @@
 }
 
 .textEditor {
-  height: 100% ;
-  width: 100% ;
+  composes: d-size-full from global;
 }
 
 .textEditor :global .KB_Editor {
@@ -706,15 +701,11 @@
 
 .disable,
 .readOnly {
-  position: relative;
-}
-
-.disable, .readOnly {
-  cursor: not-allowed;
+  composes: d-relative d-cursor-not-allowed from global;
 }
 
 .readOnlyMask {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
 }

package/lib/form/fields/TextEditor/__tests__/TextEditor.spec.js

@@ -8,6 +8,7 @@ var _TextEditor = _interopRequireDefault(require("../TextEditor"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+global.__DEVELOPMENT__ = false;
 describe('TextEditor', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextEditor["default"], null)),

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

@@ -1,16 +1,16 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column textEditor large borderTop light editorHide"
+    class="d-flex d-h-full d-w-full d-flex-col textEditor large borderTop light editorHide"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"
     data-test-id="containerComponent"
   >
     <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"

package/lib/form/fields/TextEditorField/TextEditorField.js

@@ -21,6 +21,8 @@ var _TextEditorWrapper = _interopRequireDefault(require("../TextEditorWrapper/Te
 
 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 }; }
@@ -157,7 +159,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
           _customProps$Validati = customProps.ValidationMessageProps,
           ValidationMessageProps = _customProps$Validati === void 0 ? {} : _customProps$Validati;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || '')),
         "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
@@ -183,7 +185,7 @@ var TextEditorField = /*#__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(_TextEditorWrapper["default"], _extends({
         needEditor: needEditor,
         onChange: this.handleChange,
@@ -228,8 +230,4 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = TextEditorField;
 TextEditorField.propTypes = _propTypes.propTypes;
-TextEditorField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   TextEditorField.docs = {
-//     componentGroup: 'Fields'
-//   };
-// }
+TextEditorField.defaultProps = _defaultProps.defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextEditorField rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -21,6 +21,8 @@ var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/componen
 
 var _editorUtils = require("../../../utils/editorUtils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TextEditorWrapperModule = _interopRequireDefault(require("./TextEditorWrapper.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -179,7 +181,7 @@ var TextEditorWrapper = /*#__PURE__*/function (_Component) {
       };
       var editorOptionsObject = Object.assign(defaultObj, editorOptions);
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TextEditorWrapperModule["default"].container,
+        className: (0, _cssUtility.cn)(_TextEditorWrapperModule["default"].container),
         "data-selector-id": dataSelectorId
       }, !isEditorShow ? /*#__PURE__*/_react["default"].createElement(_Textarea["default"], _extends({
         onFocus: this.handleTextareaFocus,
@@ -202,7 +204,7 @@ var TextEditorWrapper = /*#__PURE__*/function (_Component) {
         isActive: isEditorShow,
         component: "div"
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TextEditorWrapperModule["default"].textEditor
+        className: (0, _cssUtility.cn)(_TextEditorWrapperModule["default"].textEditor)
       }, isEditorShow && needEditor ? /*#__PURE__*/_react["default"].createElement(_TextEditor["default"], _extends({
         id: id,
         value: value,

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

@@ -1,13 +1,11 @@
 .container{
-  position: relative;
+  composes: d-relative from global;
   min-height: var(--zd_size28) ;
 }
 .textBox {
+  composes: d-absolute d-w-full d-cursor-text from global;
   height: var(--zd_size28) ;
-  width: 100% ;
-  position: absolute;
   transition: border var(--zd_transition2) linear 0s;
-  cursor: text;
 }
 [dir=ltr] .textBox {
   left: 0 ;
@@ -18,7 +16,7 @@
   animation: fadeIn var(--zd_transition4);
 }
 .textEditor {
-  position: relative;
+  composes: d-relative from global;
   z-index: 1;
   /*  Variable:Ignore  */
   padding-inline-end: 1px;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextEditorWrapper rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/form/fields/TextareaField/TextareaField.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 TextareaField = /*#__PURE__*/function (_PureComponent) {
       }));
 
       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"], {
@@ -202,11 +204,11 @@ var TextareaField = /*#__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)] : ''))
       }, !renderRightPlaceholderNode ? textAreaContent : /*#__PURE__*/_react["default"].createElement("div", {
-        className: _FieldsModule["default"].hasChildren
+        className: (0, _cssUtility.cn)(_FieldsModule["default"].hasChildren)
       }, textAreaContent, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].rightPlaceholder, " ").concat(rightPlaceholderCustomClass)
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].rightPlaceholder, " ").concat(rightPlaceholderCustomClass))
       }, renderRightPlaceholderNode)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,
@@ -228,9 +230,4 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = TextareaField;
 TextareaField.propTypes = _propTypes.propTypes;
-TextareaField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   TextareaField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+TextareaField.defaultProps = _defaultProps.defaultProps;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextareaField rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/form/fields/ValidationMessage/ValidationMessage.js

@@ -19,6 +19,8 @@ var _utils = require("@zohodesk/utils");
 
 var _Label = _interopRequireDefault(require("@zohodesk/components/es/Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LabelColorsModule = _interopRequireDefault(require("@zohodesk/components/es/Label/LabelColors.module.css"));
 
 var _icons = require("@zohodesk/icons");
@@ -143,7 +145,7 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
         customClass: "".concat(_ValidationMessageModule["default"].lable, " ").concat(customLabelClass),
         id: id
       }), tooltip ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_ValidationMessageModule["default"].icon, " ").concat(_LabelColorsModule["default"][palette]),
+        className: (0, _cssUtility.cn)("".concat(_ValidationMessageModule["default"].icon, " ").concat(_LabelColorsModule["default"][palette])),
         "data-title": tooltip
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-information57",
@@ -157,9 +159,4 @@ var ValidationMessage = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = ValidationMessage;
 ValidationMessage.propTypes = _propTypes.propTypes;
-ValidationMessage.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   ValidationMessage.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'Style Guide'
-//   };
-// }
+ValidationMessage.defaultProps = _defaultProps.defaultProps;

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

@@ -2,20 +2,20 @@
   font-size: 0 ;
 }
 .lable{
-  display: inline;
+  composes: d-inline from global;
 }
 .icon{
+  composes: d-inline-block from global;
   margin-block:0 ;
   margin-inline: var(--zd_size5) ;
   /*css:theme-validation:ignore*/
   color:var(--label_text_color);
-  display: inline-block;
 }
 .primary {
-  position: absolute;
   top: 100% ;
   margin-block-start: var(--zd_size5) ;
   composes:basic;
+  composes: d-absolute from global;
 }
 [dir=ltr] .primary {
   left: 0 ;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ValidationMessage rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/form/layout/Field/Field.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldModule = _interopRequireDefault(require("./Field.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -64,13 +66,13 @@ var Field = /*#__PURE__*/function (_Component) {
           containerClass = _this$props.containerClass,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " "), " ").concat(containerClass ? containerClass : ''),
+        className: (0, _cssUtility.cn)("".concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " "), " ").concat(containerClass ? containerClass : '')),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat("fieldWidth_".concat(width), " ", className ? className : '')
+        className: (0, _cssUtility.cn)("".concat("fieldWidth_".concat(width), " ", className ? className : ''))
       }, children)), rowBreak && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _FieldModule["default"].rowBreak
+        className: (0, _cssUtility.cn)(_FieldModule["default"].rowBreak)
       }));
     }
   }]);
@@ -80,8 +82,4 @@ var Field = /*#__PURE__*/function (_Component) {
 
 exports["default"] = Field;
 Field.propTypes = _propTypes.propTypes;
-Field.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Field.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+Field.defaultProps = _defaultProps.defaultProps;