@zohodesk/dot 1.0.0-temp-58 → 1.0.0-temp-61

package/es/lookup/header/lookupHeaderCommon.module.css

@@ -1,19 +1,13 @@
 .container {
   min-height: var(--zd_size51);
   position: relative;
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
 }[dir=ltr] .container {
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
 }[dir=rtl] .container {
   padding: 0 var(--zd_size10) 0 var(--zd_size52);
 }
-.default {
-  background-color: var(--zdt_lookupheader_default_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
-}
-.white {
-  background-color: var(--zdt_lookupheader_white_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_white_border);
-}
 .searchContainer, .title {
   margin: 0 var(--zd_size20);
 }

package/lib/ImportantNotes/ImportantNotes.js

@@ -59,14 +59,13 @@ var ImportantNotes = /*#__PURE__*/function (_React$Component) {
           iconSize = _this$props.iconSize,
           children = _this$props.children,
           iconClass = _this$props.iconClass,
-          isCover = _this$props.isCover,
-          className = _this$props.className;
+          isCover = _this$props.isCover;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isInline: !isCover,
         isCover: false,
         alignBox: "row",
         align: "top",
-        className: "".concat(_ImportantNotesModule["default"].section, " ").concat(className || '')
+        className: _ImportantNotesModule["default"].section
       }, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ImportantNotesModule["default"].icon,
         align: "start"
@@ -91,8 +90,7 @@ ImportantNotes.propTypes = {
   iconName: _propTypes["default"].string,
   iconSize: _propTypes["default"].string,
   isCover: _propTypes["default"].bool,
-  text: _propTypes["default"].string,
-  className: _propTypes["default"].string
+  text: _propTypes["default"].string
 };
 ImportantNotes.defaultProps = {
   iconName: 'ZD-helpCentre',

package/lib/Provider.js

@@ -21,73 +21,73 @@ var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
 var _i18n2 = _interopRequireDefault(require("./i18n"));
 
-require("@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css");
+require("@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css");
+require("@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css");
+require("@zohodesk/svg/assets/Appearance/default/mode/defaultEmptyStates.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css");
 
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
@@ -95,29 +95,29 @@ var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider"
 
 var _Switch = _interopRequireDefault(require("@zohodesk/components/lib/Switch/Switch"));
 
-require("./Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css");
 
-require("./Appearance/default/mode/dotDefaultMode.module.css");
+require("../assets/Appearance/default/mode/dotDefaultMode.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css");
 
-require("./Appearance/dark/mode/dotDarkMode.module.css");
+require("../assets/Appearance/dark/mode/dotDarkMode.module.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

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,

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/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/Field/Field.js

@@ -62,7 +62,7 @@ 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]), " ", "formFieldLi_".concat(width), " ").concat(containerClass ? containerClass : '', " "),
+        className: "".concat(containerClass ? containerClass : '', " ").concat(column == 'single' ? "".concat(_FieldModule["default"].singleColumn) : "".concat(_FieldModule["default"][width], " ")),
         "data-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : '', " ", "fieldWidth_".concat(width))

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/lookup/header/ModuleHeader/ModuleHeader.js

@@ -80,12 +80,11 @@ var ModuleHeader = /*#__PURE__*/function (_PureComponent) {
           miniDescription = _this$props.miniDescription,
           dataId = _this$props.dataId,
           closeTitle = _this$props.closeTitle,
-          onSearchKeyDown = _this$props.onSearchKeyDown,
-          palette = _this$props.palette;
+          onSearchKeyDown = _this$props.onSearchKeyDown;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)]),
+        className: "".concat(_lookupHeaderCommonModule["default"].container),
         isCover: false,
         wrap: "wrap",
         dataId: dataId
@@ -135,11 +134,7 @@ ModuleHeader.propTypes = {
   title: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   closeTitle: _propTypes["default"].string,
-  onSearchKeyDown: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'white'])
-};
-ModuleHeader.defaultProps = {
-  palette: 'default'
+  onSearchKeyDown: _propTypes["default"].func
 };
 
 if (false) {

package/lib/lookup/header/TicketHeader/TicketHeader.js

@@ -82,14 +82,13 @@ var TicketHeader = /*#__PURE__*/function (_Component) {
           needOnTypeSearch = _this$props.needOnTypeSearch,
           getSearchBoxRef = _this$props.getSearchBoxRef,
           needViewsList = _this$props.needViewsList,
-          i18nKeys = _this$props.i18nKeys,
-          palette = _this$props.palette;
+          i18nKeys = _this$props.i18nKeys;
       var _i18nKeys$menuEmptyMe = i18nKeys.menuEmptyMessage,
           menuEmptyMessage = _i18nKeys$menuEmptyMe === void 0 ? 'No matches found' : _i18nKeys$menuEmptyMe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
+        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
         isCover: false,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -112,6 +111,8 @@ var TicketHeader = /*#__PURE__*/function (_Component) {
       })), needViewsList ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TicketHeaderModule["default"].dropdown),
         dataId: "filterIdselected"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: _TicketHeaderModule["default"].menuWrapper
       }, /*#__PURE__*/_react["default"].createElement(_ViewDropDown["default"], {
         dropBoxSize: "small",
         emptyMessage: menuEmptyMessage,
@@ -121,7 +122,7 @@ var TicketHeader = /*#__PURE__*/function (_Component) {
         textField: "displayLabel",
         selectedValue: selectedViewId,
         needCloseOnSelect: true
-      })) : null)), needSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }))) : null)), needSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_lookupHeaderCommonModule["default"].searchContainer, " ").concat(_lookupHeaderCommonResponsiveModule["default"].searchContainer, " ").concat(_TicketHeaderModule["default"].searchContainer)
       }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
         onSearch: onSearch,
@@ -155,12 +156,10 @@ TicketHeader.propTypes = {
   title: _propTypes["default"].string,
   i18nKeys: _propTypes["default"].shape({
     menuEmptyMessage: _propTypes["default"].string
-  }),
-  palette: _propTypes["default"].oneOf(['default', 'white'])
+  })
 };
 TicketHeader.defaultProps = {
-  i18nKeys: {},
-  palette: 'default'
+  i18nKeys: {}
 };
 
 if (false) {

package/lib/lookup/header/TicketHeader/TicketHeader.module.css

@@ -1,5 +1,5 @@
 .dropdown {
-  margin: 0 var(--zd_size8);
+  margin: 0 var(--zd_size20);
 }
 /* Responsive */
 [dir=ltr] .small .searchContainer {
@@ -20,3 +20,4 @@
 .extraSmall .container {
   flex-direction: column;
 }
+.menuWrapper{display: inline-block;}

package/lib/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -28,7 +28,6 @@
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   line-height: var(--zd_size20);
   color: var(--zdt_viewdropdown_label_text);
-  padding: 0 var(--zd_size12);
   cursor: pointer;
 }
 .labelText {

package/lib/lookup/header/lookupHeaderCommon.module.css

@@ -1,19 +1,13 @@
 .container {
   min-height: var(--zd_size51);
   position: relative;
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
 }[dir=ltr] .container {
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
 }[dir=rtl] .container {
   padding: 0 var(--zd_size10) 0 var(--zd_size52);
 }
-.default {
-  background-color: var(--zdt_lookupheader_default_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
-}
-.white {
-  background-color: var(--zdt_lookupheader_white_bg);
-  border-bottom: solid 1px var(--zdt_lookupheader_white_border);
-}
 .searchContainer, .title {
   margin: 0 var(--zd_size20);
 }