@zohodesk/dot 1.0.0-temp-51 → 1.0.0-temp-55

package/lib/Appearance/dark/mode/dotDarkMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'] {
+[data-mode='dark'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: #583a45;
   --zdt_commonalert_success_hover_bg: #2c4e42;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: #262f3d;
   --zdt_commonalert_danger_hover_bg: #583a45;
   --zdt_commonalert_error_hover_bg: #583a45;
   --zdt_commonalert_warning_hover_bg: #583c2c;

package/lib/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -1,10 +1,10 @@
-[data-mode='dark'][data-theme='blue'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #479dff;
-    --zdt_commonEmptyState_dark_link_hover: #2469ff;
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #479dff;
+	--zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/lib/Appearance/dark/themes/green/greenDarkDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='dark'][data-theme='green'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #45a159;
-    --zdt_commonEmptyState_dark_link_hover: #0e7c1c;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #45a159;
+	--zdt_commonEmptyState_dark_link_hover: #0e7c1c;
 }

package/lib/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='dark'][data-theme='orange'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #ff801f;
-    --zdt_commonEmptyState_dark_link_hover: #a85100;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #ff801f;
+	--zdt_commonEmptyState_dark_link_hover: #a85100;
 }

package/lib/Appearance/dark/themes/red/redDarkDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='dark'][data-theme='red'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #e94f4f;
-    --zdt_commonEmptyState_dark_link_hover: #a81111;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #e94f4f;
+	--zdt_commonEmptyState_dark_link_hover: #a81111;
 }

package/lib/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='dark'][data-theme='yellow'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #d79835;
-    --zdt_commonEmptyState_dark_link_hover: #9b6808;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #d79835;
+	--zdt_commonEmptyState_dark_link_hover: #9b6808;
 }

package/lib/Appearance/default/mode/dotDefaultMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_success_hover_bg: #e9f7ef;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: var(--dot_bg_lavender);
   --zdt_commonalert_danger_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_error_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_warning_hover_bg: #fff1e6;

package/lib/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
-[data-mode='default'][data-theme='blue'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #6cbbfc;
-    --zdt_commonEmptyState_dark_link_hover: #2469ff;
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #6cbbfc;
+	--zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

package/lib/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='green'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #4ac064;
-    --zdt_commonEmptyState_dark_link_hover: #0e7526;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(15, 34, 38, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #4ac064;
+	--zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

package/lib/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='orange'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #e57717;
-    --zdt_commonEmptyState_dark_link_hover: #b25900;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(36, 30, 19, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #e57717;
+	--zdt_commonEmptyState_dark_link_hover: #b25900;
 }

package/lib/Appearance/default/themes/red/redDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='red'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
-    
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #ff6363;
-    --zdt_commonEmptyState_dark_link_hover: #ab1a18;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(34, 15, 27, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #ff6363;
+	--zdt_commonEmptyState_dark_link_hover: #ab1a18;
 }

package/lib/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='default'][data-theme='yellow'] {
-    /* freezelayer */
-    --zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
-
-    /* common empty state */
-    --zdt_commonEmptyState_dark_title: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_description: var(--dot_text_white);
-    --zdt_commonEmptyState_dark_link: #e8b923;
-    --zdt_commonEmptyState_dark_link_hover: #b59100;
+	/* freezelayer */
+	--zdt_freezelayer_darklight_bg: rgba(34, 36, 18, 0.94);
+	
+	/* common empty state */
+	--zdt_commonEmptyState_dark_title: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_text_white);
+	--zdt_commonEmptyState_dark_link: #e8b923;
+	--zdt_commonEmptyState_dark_link_hover: #b59100;
 }

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -153,7 +153,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
       }) : null);
 
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, isDirectCol && labelElement, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')

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

@@ -165,7 +165,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
 
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -173,7 +173,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

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

@@ -171,7 +171,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 : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -181,7 +181,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
         onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-info",

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

@@ -43,14 +43,16 @@
 [dir=rtl] .checkboxText {
   padding-right: var(--zd_size6);
 }
-.cbTextReadonly {
-  cursor: not-allowed;
-}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled {
-  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
+.disabled, .readonly {
+  cursor: not-allowed;
+}
+.cbTextReadonly,
+.disabled .fieldLabel,
+.readonly .fieldLabel {
+  --label_cursor: not-allowed;
 }
 [dir=ltr] .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;

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

@@ -184,7 +184,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 : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -194,7 +194,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
         ,
-        customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

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

@@ -105,14 +105,14 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           _customProps$Validati2 = customProps.ValidationMessageProps2,
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",
         id: id,
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-        customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: 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_medium : '', " ").concat(_FieldsModule["default"].radioContainer)

package/lib/form/fields/SelectField/SelectField.js

@@ -152,7 +152,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 : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -160,7 +160,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

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

@@ -200,10 +200,10 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           key: index
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
           text: name,
-          onRemove: deleteTag.bind(_this3, name),
+          onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
           closeTitle: i18nKeys.deleteText,
           palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-          disabled: isReadOnly
+          isReadOnly: isReadOnly
         })) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
@@ -226,7 +226,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         isReadOnly: isReadOnly,
         ref: this.textBoxRef,
         needBorder: false,
-        placeHolder: tagsList.length ? '' : '-',
+        placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
         onClick: !isReadOnly ? handleTogglePopup : undefined,
         customClass: {
           customTBoxWrap: _TagsMultiSelectModule["default"].custmInp,
@@ -329,7 +329,8 @@ TagsMultiSelect.propTypes = {
     errorMessage: _propTypes["default"].string.isRequired,
     deleteText: _propTypes["default"].string.isRequired,
     lessText: _propTypes["default"].string.isRequired,
-    moreText: _propTypes["default"].string.isRequired
+    moreText: _propTypes["default"].string.isRequired,
+    placeholderText: _propTypes["default"].string
   }),
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
   needBorder: _propTypes["default"].bool,

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -220,7 +220,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TagsMultiSelectFieldModule["default"].container
+    className: "".concat(_TagsMultiSelectFieldModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: "baseline",
@@ -231,7 +231,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     id: id,
     size: labelSize,
     palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
+    customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
     dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
     htmlFor: htmlId
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/form/fields/TextBoxField/TextBoxField.js

@@ -146,7 +146,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
           ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -154,7 +154,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

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

@@ -156,7 +156,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
           _ePhiData$ePhiStatus = ePhiData.ePhiStatus,
           ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(className)
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || '')
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
@@ -167,7 +167,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: !isReadOnly && !isDisabled ? id : undefined,
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
         onClick: this.handleLabelClick,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-info",

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

@@ -119,7 +119,7 @@ var TextEditorWrapper = /*#__PURE__*/function (_Component) {
           isEditorShow: true
         });
       } else {
-        if (!this.state.isEditorFocus) {
+        if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
           this.setState({
             isEditorShow: false
           });

package/lib/form/fields/TextareaField/TextareaField.js

@@ -142,7 +142,7 @@ var TextareaField = /*#__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 : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -151,7 +151,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         id: id,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/form/layout/Section/Section.js

@@ -60,19 +60,16 @@ var Section = /*#__PURE__*/function (_Component) {
           titleClass = _this$props.titleClass,
           className = _this$props.className,
           column = _this$props.column,
-          formName = _this$props.formName,
-          innerContainerClass = _this$props.innerContainerClass;
+          formName = _this$props.formName;
       return /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": dataId,
         className: containerClass ? containerClass : ''
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: innerContainerClass ? innerContainerClass : ''
       }, title && /*#__PURE__*/_react["default"].createElement("div", {
         className: titleClass ? titleClass : ''
       }, title), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : '', " ").concat(column == 'single' ? _ModuleFormSectionModule["default"].singleColumn : ''),
         "data-id": formName && formName
-      }, this.props.children)));
+      }, this.props.children));
     }
   }]);
 
@@ -86,8 +83,7 @@ Section.propTypes = {
   containerClass: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   title: _propTypes["default"].string,
-  titleClass: _propTypes["default"].string,
-  innerContainerClass: _propTypes["default"].string
+  titleClass: _propTypes["default"].string
 };
 
 if (false) {

package/lib/version2/GlobalNotification/GlobalNotification.js

@@ -102,7 +102,8 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
           hideMessage = _this$props3.hideMessage,
           onClick = _this$props3.onClick,
           _this$props3$i18nKeys = _this$props3.i18nKeys,
-          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys;
+          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys,
+          customProps = _this$props3.customProps;
       var _i18nKeys$closeTitle = i18nKeys.closeTitle,
           closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
       return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
@@ -110,7 +111,8 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
         message: message,
         hideMessage: hideMessage,
         onClick: onClick,
-        closeTitle: closeTitle
+        closeTitle: closeTitle,
+        customProps: customProps
       });
     }
   }]);
@@ -126,7 +128,13 @@ GlobalNotification.propTypes = {
   onClick: _propTypes["default"].func,
   showMessage: _propTypes["default"].bool,
   type: _propTypes["default"].oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: _propTypes["default"].object
+  i18nKeys: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    ExtraProps: _propTypes["default"].object
+  })
+};
+GlobalNotification.defaultProps = {
+  customProps: {}
 };
 
 if (false) {
@@ -149,11 +157,15 @@ function GlobalNotificationUI(props) {
       message = props.message,
       onClick = props.onClick,
       _props$closeTitle = props.closeTitle,
-      closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle,
+      _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? {} : _props$customProps;
+  var _customProps$ExtraPro = customProps.ExtraProps,
+      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "".concat(_GlobalNotificationModule["default"].message, " ").concat(type ? _GlobalNotificationModule["default"][type] : ''),
     "data-id": "show_".concat(type, "_message")
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: "".concat(_GlobalNotificationModule["default"].container),
     alignBox: "row",
     isCover: false,