@zohodesk/dot 1.9.18 → 1.9.20

package/es/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/es/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/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -11,6 +11,7 @@ import TagsMultiSelect from "../TagsMultiSelect/TagsMultiSelect";
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** css ****/
 
+import { cn } from "@dot-system/css-utility";
 import fieldStyle from "../Fields.module.css";
 import style from "./TagsMultiSelectField.module.css";
 
@@ -193,7 +194,7 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`,
+    className: cn(`${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`),
     tabIndex: "0",
     "aria-label": `${labelName}`,
     "data-selector-id": dataSelectorId
@@ -277,10 +278,5 @@ TagsMultiSelectField.propTypes = propTypes;
 TagsMultiSelectField.defaultProps = defaultProps;
 const TagsMultiSelectField_Component = Popup(TagsMultiSelectField);
 TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
-TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes; // if (__DOCS__) {
-//   TagsMultiSelectField.docs = {
-//     componentGroup: 'TagsMultiSelectField'
-//   };
-// }
-
+TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes;
 export default TagsMultiSelectField_Component;

package/es/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/es/form/fields/TextBoxField/TextBoxField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class TextBoxField extends PureComponent {
   constructor(props) {
@@ -93,7 +94,7 @@ export default class TextBoxField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -122,7 +123,7 @@ export default class TextBoxField extends PureComponent {
         }
       }
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: uniqueId,
       id: id,
@@ -165,9 +166,4 @@ export default class TextBoxField extends PureComponent {
 
 }
 TextBoxField.propTypes = propTypes;
-TextBoxField.defaultProps = defaultProps; // if (__DOCS__) {
-//   TextBoxField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+TextBoxField.defaultProps = defaultProps;

package/es/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/es/form/fields/TextEditor/TextEditor.js

@@ -10,6 +10,7 @@ import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImag
 
 /***** components *****/
 
+import { cn } from "@dot-system/css-utility";
 import styles from "./TextEditor.module.css";
 /* eslint-disable camelcase */
 
@@ -424,15 +425,10 @@ export default class TextEditor extends Component {
     }), editorDoc && ImgLazyLoad ? /*#__PURE__*/React.createElement(ImgLazyLoad, {
       node: editorDoc
     }) : null, isReadOnly || isDisabled ? /*#__PURE__*/React.createElement("div", {
-      className: styles.readOnlyMask
+      className: cn(styles.readOnlyMask)
     }) : null);
   }
 
 }
 TextEditor.defaultProps = defaultProps;
-TextEditor.propTypes = propTypes; // if (__DOCS__) {
-//   TextEditor.docs = {
-//     componentGroup: 'Fields',
-//     folderName: 'TextEditor'
-//   };
-// }
+TextEditor.propTypes = propTypes;

package/es/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/es/form/fields/TextEditor/__tests__/TextEditor.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import TextEditor from "../TextEditor";
+global.__DEVELOPMENT__ = false;
 describe('TextEditor', () => {
   test('rendering the defult props', () => {
     const {

package/es/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/es/form/fields/TextEditorField/TextEditorField.js

@@ -12,6 +12,7 @@ import TextEditorWrapper from "../TextEditorWrapper/TextEditorWrapper";
 import FieldContainer from "../FieldContainer/FieldContainer";
 /** Css */
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class TextEditorField extends PureComponent {
   constructor(props) {
@@ -109,7 +110,7 @@ export default class TextEditorField extends PureComponent {
       ValidationMessageProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`),
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
@@ -135,7 +136,7 @@ export default class TextEditorField extends PureComponent {
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, /*#__PURE__*/React.createElement(TextEditorWrapper, _extends({
       needEditor: needEditor,
       onChange: this.handleChange,
@@ -176,8 +177,4 @@ export default class TextEditorField extends PureComponent {
 
 }
 TextEditorField.propTypes = propTypes;
-TextEditorField.defaultProps = defaultProps; // if (__DOCS__) {
-//   TextEditorField.docs = {
-//     componentGroup: 'Fields'
-//   };
-// }
+TextEditorField.defaultProps = defaultProps;

package/es/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/es/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -9,6 +9,7 @@ import TextEditor from "../TextEditor/TextEditor";
 import Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { editorContentValidate } from "../../../utils/editorUtils";
+import { cn } from "@dot-system/css-utility";
 import style from "./TextEditorWrapper.module.css";
 /* eslint-disable react/no-deprecated */
 
@@ -130,7 +131,7 @@ export default class TextEditorWrapper extends Component {
     };
     let editorOptionsObject = Object.assign(defaultObj, editorOptions);
     return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
+      className: cn(style.container),
       "data-selector-id": dataSelectorId
     }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, _extends({
       onFocus: this.handleTextareaFocus,
@@ -153,7 +154,7 @@ export default class TextEditorWrapper extends Component {
       isActive: isEditorShow,
       component: "div"
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.textEditor
+      className: cn(style.textEditor)
     }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, _extends({
       id: id,
       value: value,

package/es/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/es/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/es/form/fields/TextareaField/TextareaField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class TextareaField extends PureComponent {
   constructor(props) {
@@ -123,7 +124,7 @@ export default class TextareaField extends PureComponent {
       }
     }));
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -150,11 +151,11 @@ export default class TextareaField extends PureComponent {
         }
       }
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, !renderRightPlaceholderNode ? textAreaContent : /*#__PURE__*/React.createElement("div", {
-      className: style.hasChildren
+      className: cn(style.hasChildren)
     }, textAreaContent, /*#__PURE__*/React.createElement("div", {
-      className: `${style.rightPlaceholder} ${rightPlaceholderCustomClass}`
+      className: cn(`${style.rightPlaceholder} ${rightPlaceholderCustomClass}`)
     }, renderRightPlaceholderNode)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,
@@ -172,9 +173,4 @@ export default class TextareaField extends PureComponent {
 
 }
 TextareaField.propTypes = propTypes;
-TextareaField.defaultProps = defaultProps; // if (__DOCS__) {
-//   TextareaField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+TextareaField.defaultProps = defaultProps;

package/es/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/es/form/fields/ValidationMessage/ValidationMessage.js

@@ -6,6 +6,7 @@ import { propTypes } from "./props/propTypes";
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import { renderNode, isRenderable } from '@zohodesk/utils';
 import Label from '@zohodesk/components/es/Label/Label';
+import { cn } from "@dot-system/css-utility";
 import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
 import { Icon } from '@zohodesk/icons';
 import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
@@ -83,7 +84,7 @@ export default class ValidationMessage extends React.Component {
       customClass: `${style.lable} ${customLabelClass}`,
       id: id
     }), tooltip ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${colors[palette]}`,
+      className: cn(`${style.icon} ${colors[palette]}`),
       "data-title": tooltip
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-information57",
@@ -93,9 +94,4 @@ export default class ValidationMessage extends React.Component {
 
 }
 ValidationMessage.propTypes = propTypes;
-ValidationMessage.defaultProps = defaultProps; // if (__DOCS__) {
-//   ValidationMessage.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'Style Guide'
-//   };
-// }
+ValidationMessage.defaultProps = defaultProps;

package/es/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/es/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/es/form/layout/Field/Field.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Field.module.css";
 export default class Field extends Component {
   render() {
@@ -14,20 +15,16 @@ export default class Field extends Component {
       dataId
     } = this.props;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `${column == 'single' ? `${style.singleColumn}` : `${style[width]} `} ${containerClass ? containerClass : ''}`,
+      className: cn(`${column == 'single' ? `${style.singleColumn}` : `${style[width]} `} ${containerClass ? containerClass : ''}`),
       "data-id": dataId,
       "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${`fieldWidth_${width}`} ${className ? className : ''}`
+      className: cn(`${`fieldWidth_${width}`} ${className ? className : ''}`)
     }, children)), rowBreak && /*#__PURE__*/React.createElement("div", {
-      className: style.rowBreak
+      className: cn(style.rowBreak)
     }));
   }
 
 }
 Field.propTypes = propTypes;
-Field.defaultProps = defaultProps; // if (__DOCS__) {
-//   Field.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+Field.defaultProps = defaultProps;

package/es/form/layout/Field/Field.module.css

@@ -1,5 +1,5 @@
 .container {
-  min-width: 0 ;
+  composes: d-min-w-0 from global;
 }
 .half {
   flex: 1 1 50% ;
@@ -9,14 +9,11 @@
   flex: 1 1 100% ;
 }
 .fieldContaier {
-  display: inline-block;
-  width: 100% ;
-  vertical-align: middle;
+  composes: d-inline-block d-w-full d-align-middle from global;
 }
 .rowBreak {
-  display: block;
-  width: 100% ;
+  composes: d-block d-w-full from global;
 }
 .singleColumn {
-  width: 100% ;
+  composes: d-w-full from global;
 }

package/es/form/layout/Field/__tests__/__snapshots__/Field.spec.js.snap

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