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

package/{lib → assets}/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css

@@ -5,6 +5,6 @@
 	/* common empty state */
 	--zdt_commonEmptyState_dark_title: var(--dot_white);
 	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #ff801f;
+	--zdt_commonEmptyState_dark_link: var(--dot_cadmiumorange);
 	--zdt_commonEmptyState_dark_link_hover: #a85100;
 }

package/{src → assets}/Appearance/default/mode/dotDefaultMode.module.css

@@ -142,7 +142,7 @@
 	--zdt_fields_lockicon_icon: var(--dot_shuttleGrey);
 	--zdt_fields_lockicon_hover_icon: var(--dot_brightRed);
 	--zdt_fields_phitag_text: var(--dot_camarone);
-	--zdt_fields_phitag_bg: #f2faf5;
+	--zdt_fields_phitag_bg: var(--dot_blacksqueeze);
 	--zdt_fields_phitag_border: rgba(38, 169, 66, 0.2);
 	--zdt_fields_newtabicon_icon: var(--dot_black);
 	--zdt_fields_newtabicon_hover_icon: var(--zdt_cta_primary_text);
@@ -214,8 +214,8 @@
 	--zdt_gridstencils_default_bg: var(--dot_white);
 	--zdt_gridstencils_default_border: var(--zd_gallery1);
 	--zdt_gridstencils_after_bg: var(--zd_smoke4);
-	--zdt_gridstencils_listbar_bg: #f6f7f8;
-	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(left, #f6f7f8 0, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+	--zdt_gridstencils_listbar_bg: var(--zd_smoke78);
+	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
 	
 	/* icons */
 	--zdt_icons_default: var(--dot_shuttleGrey);
@@ -349,18 +349,18 @@
 	--zdt_headerlink_hover_text: var(--zdt_cta_primary_border);
 	
 	/* search */
-	--zdt_search_input_border: #999;
-	--zdt_search_input_text: #333;
+	--zdt_search_input_border: var(--zd_dark6);
+	--zdt_search_input_text: var(--zd_dark4);
 	--zdt_search_input_bg: var(--dot_white);
 	--zdt_search_input_focus_border: var(--zdt_cta_primary_border);
-	--zdt_search_icon: #999;
-	--zdt_search_hover_icon: #666;
+	--zdt_search_icon: var(--zd_dark6);
+	--zdt_search_hover_icon: var(--zd_dark5);
 	--zdt_search_placeholder_text: var(--zd_smoke12);
 	
 	/* views */
-	--zdt_views_icon: #999;
-	--zdt_views_border: #e1e1e1;
-	--zdt_views_hover_icon: #666;
+	--zdt_views_icon: var(--zd_dark6);
+	--zdt_views_border: var(--zd_smoke29);
+	--zdt_views_hover_icon: var(--zd_dark5);
 	--zdt_views_active_icon: var(--zdt_cta_primary_text);
 	
 	/* help tips description */
@@ -463,7 +463,7 @@
 	/* global notification */
 	--zdt_globalnotification_default_bg: var(--dot_whiteSmoke);
 	--zdt_globalnotification_default_text: var(--dot_black);
-	--zdt_globalnotification_success_bg: #f2faf5;
+	--zdt_globalnotification_success_bg: var(--dot_blacksqueeze);
 	--zdt_globalnotification_success_text: var(--dot_black);
 	--zdt_globalnotification_info_bg: var(--zdt_cta_primary_light_bg);
 	--zdt_globalnotification_info_text: var(--dot_black);
@@ -487,13 +487,13 @@
 	--zdt_tagsmultiselect_labelt_text: var(--dot_shuttleGrey);
 	--zdt_tagsmultiselect_default_border: var(--dot_inputLine);
 	--zdt_tagsmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_tagsmultiselect_dark_border: #4b5168;
+	--zdt_tagsmultiselect_dark_border: var(--dot_mulledwine);
 	--zdt_tagsmultiselect_default_hover_border: var(--dot_inputLineHover);
 	--zdt_tagsmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_tagsmultiselect_dark_hover_border: #9699a6;
+	--zdt_tagsmultiselect_dark_hover_border: var(--dot_stardust);
 	--zdt_tagsmultiselect_default_active_border: var(--dot_inputLineFocus);
 	--zdt_tagsmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_tagsmultiselect_dark_active_border: #9699a6;
+	--zdt_tagsmultiselect_dark_active_border: var(--dot_stardust);
 	--zdt_tagsmultiselect_more_text: var(--zdt_cta_primary_text);
 	--zdt_tagsmultiselect_more_hover_text: var(--zdt_cta_primary_hover_text);
 	

package/{es → assets}/Appearance/default/themes/green/greenDefaultDotTheme.module.css

@@ -5,6 +5,6 @@
 	/* common empty state */
 	--zdt_commonEmptyState_dark_title: var(--dot_white);
 	--zdt_commonEmptyState_dark_description: var(--dot_white);
-	--zdt_commonEmptyState_dark_link: #4ac064;
+	--zdt_commonEmptyState_dark_link: var(--dot_darkmint);
 	--zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

package/es/ImportantNotes/ImportantNotes.js

@@ -15,15 +15,14 @@ export default class ImportantNotes extends React.Component {
       iconSize,
       children,
       iconClass,
-      isCover,
-      className
+      isCover
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       isInline: !isCover,
       isCover: false,
       alignBox: "row",
       align: "top",
-      className: `${style.section} ${className || ''}`
+      className: style.section
     }, iconName ? /*#__PURE__*/React.createElement(Box, {
       className: style.icon,
       align: "start"
@@ -44,8 +43,7 @@ ImportantNotes.propTypes = {
   iconName: PropTypes.string,
   iconSize: PropTypes.string,
   isCover: PropTypes.bool,
-  text: PropTypes.string,
-  className: PropTypes.string
+  text: PropTypes.string
 };
 ImportantNotes.defaultProps = {
   iconName: 'ZD-helpCentre',

package/es/Provider.js

@@ -7,65 +7,65 @@ import datetime from '@zohodesk/datetimejs';
 import i18n from './i18n';
 /* component pkg - default mode & themes */
 
-import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
 /* component pkg - dark mode & themes */
 
-import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
 /* svg pkg - default mode & themes */
 
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/mode/defaultEmptyStates.module.css';
 /* svg pkg - dark mode & themes */
 
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css';
 import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
 import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import Switch from '@zohodesk/components/lib/Switch/Switch';
 /* dot pkg - default mode & themes */
 
-import './Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
-import './Appearance/default/themes/green/greenDefaultDotTheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
-import './Appearance/default/themes/red/redDefaultDotTheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
-import './Appearance/default/mode/dotDefaultMode.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
+import '../assets/Appearance/default/mode/dotDefaultMode.module.css';
 /* dot pkg - dark mode & themes */
 
-import './Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
-import './Appearance/dark/themes/green/greenDarkDotTheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
-import './Appearance/dark/themes/red/redDarkDotTheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
-import './Appearance/dark/mode/dotDarkMode.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
+import '../assets/Appearance/dark/mode/dotDarkMode.module.css';
 datetime.tz.set({
   timezone: 'Asia/Kolkata',
   _packed: '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -104,7 +104,7 @@ export default class CheckBoxField extends PureComponent {
       title: lockedInfoText
     }) : null);
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
       className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -120,7 +120,7 @@ export default class CurrencyField extends PureComponent {
 
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -128,7 +128,7 @@ export default class CurrencyField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/DateField/DateField.js

@@ -124,7 +124,7 @@ export default class DateField extends PureComponent {
     } = customProps;
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -134,7 +134,7 @@ export default class DateField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-info",

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

@@ -136,7 +136,7 @@ export default class MultiSelectField extends PureComponent {
     let isDarkPalette = palette === 'dark';
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -146,7 +146,7 @@ export default class MultiSelectField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
       ,
-      customClass: `${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/RadioField/RadioField.js

@@ -55,14 +55,14 @@ export default class RadioField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: "medium",
       id: id,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`

package/es/form/fields/SelectField/SelectField.js

@@ -104,7 +104,7 @@ export default class SelectField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -112,7 +112,7 @@ export default class SelectField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -146,10 +146,10 @@ export default class TagsMultiSelect extends React.Component {
         key: index
       }, /*#__PURE__*/React.createElement(Tag, {
         text: name,
-        onRemove: deleteTag.bind(this, name),
+        onRemove: isReadOnly ? null : deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-        disabled: isReadOnly
+        isReadOnly: isReadOnly
       })) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -182,7 +182,7 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: style.container
+    className: `${style.container} ${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "baseline",
@@ -193,7 +193,7 @@ const TagsMultiSelectField = props => {
     id: id,
     size: labelSize,
     palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
+    customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
     dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     htmlFor: htmlId
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -97,7 +97,7 @@ export default class TextBoxField extends PureComponent {
     } = ePhiData;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -105,7 +105,7 @@ export default class TextBoxField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -108,7 +108,7 @@ export default class TextEditorField extends PureComponent {
       ePhiStatus = false
     } = ePhiData;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${className}`
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`
     }, /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
@@ -119,7 +119,7 @@ export default class TextEditorField extends PureComponent {
       htmlFor: !isReadOnly && !isDisabled ? id : undefined,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       onClick: this.handleLabelClick,
-      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps))), infoText ? /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-info",

package/es/form/fields/TextareaField/TextareaField.js

@@ -95,7 +95,7 @@ export default class TextareaField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -104,7 +104,7 @@ export default class TextareaField extends PureComponent {
       id: id,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/layout/Field/Field.js

@@ -13,7 +13,7 @@ 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]}`} ${`formFieldLi_${width}`} ${containerClass ? containerClass : ''} `,
+      className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
       "data-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''} ${`fieldWidth_${width}`}`

package/es/form/layout/Section/Section.js

@@ -14,20 +14,17 @@ export default class Section extends Component {
       titleClass,
       className,
       column,
-      formName,
-      innerContainerClass
+      formName
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       "data-id": dataId,
       className: containerClass ? containerClass : ''
-    }, /*#__PURE__*/React.createElement("div", {
-      className: innerContainerClass ? innerContainerClass : ''
     }, title && /*#__PURE__*/React.createElement("div", {
       className: titleClass ? titleClass : ''
     }, title), /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
       "data-id": formName && formName
-    }, this.props.children)));
+    }, this.props.children));
   }
 
 }
@@ -37,8 +34,7 @@ Section.propTypes = {
   containerClass: PropTypes.string,
   dataId: PropTypes.string,
   title: PropTypes.string,
-  titleClass: PropTypes.string,
-  innerContainerClass: PropTypes.string
+  titleClass: PropTypes.string
 };
 
 if (false) {

package/es/lookup/header/ModuleHeader/ModuleHeader.js

@@ -28,13 +28,12 @@ export default class ModuleHeader extends PureComponent {
       miniDescription,
       dataId,
       closeTitle,
-      onSearchKeyDown,
-      palette
+      onSearchKeyDown
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
+      className: `${commonStyle.container}`,
       isCover: false,
       wrap: "wrap",
       dataId: dataId
@@ -80,11 +79,7 @@ ModuleHeader.propTypes = {
   title: PropTypes.string,
   dataId: PropTypes.string,
   closeTitle: PropTypes.string,
-  onSearchKeyDown: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'white'])
-};
-ModuleHeader.defaultProps = {
-  palette: 'default'
+  onSearchKeyDown: PropTypes.func
 };
 
 if (false) {

package/es/lookup/header/TicketHeader/TicketHeader.js

@@ -31,8 +31,7 @@ export default class TicketHeader extends Component {
       needOnTypeSearch,
       getSearchBoxRef,
       needViewsList,
-      i18nKeys,
-      palette
+      i18nKeys
     } = this.props;
     let {
       menuEmptyMessage = 'No matches found'
@@ -40,7 +39,7 @@ export default class TicketHeader extends Component {
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
+      className: `${commonStyle.container} ${commonResponsive.container} ${style.container}`,
       isCover: false,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement("div", {
@@ -63,6 +62,8 @@ export default class TicketHeader extends Component {
     })), needViewsList ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.dropdown}`,
       dataId: "filterIdselected"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.menuWrapper
     }, /*#__PURE__*/React.createElement(ViewDropDown, {
       dropBoxSize: "small",
       emptyMessage: menuEmptyMessage,
@@ -72,7 +73,7 @@ export default class TicketHeader extends Component {
       textField: "displayLabel",
       selectedValue: selectedViewId,
       needCloseOnSelect: true
-    })) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
+    }))) : null)), needSearch ? /*#__PURE__*/React.createElement(Box, {
       className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer} ${style.searchContainer}`
     }, /*#__PURE__*/React.createElement(Search, {
       onSearch: onSearch,
@@ -102,12 +103,10 @@ TicketHeader.propTypes = {
   title: PropTypes.string,
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
-  }),
-  palette: PropTypes.oneOf(['default', 'white'])
+  })
 };
 TicketHeader.defaultProps = {
-  i18nKeys: {},
-  palette: 'default'
+  i18nKeys: {}
 };
 
 if (false) {

package/es/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/es/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 {