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

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

@@ -3,8 +3,8 @@
 	--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_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #6cbbfc;
 	--zdt_commonEmptyState_dark_link_hover: #2469ff;
 }

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

@@ -3,8 +3,8 @@
 	--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_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #4ac064;
 	--zdt_commonEmptyState_dark_link_hover: #0e7526;
 }

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

@@ -3,8 +3,8 @@
 	--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_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #e57717;
 	--zdt_commonEmptyState_dark_link_hover: #b25900;
 }

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

@@ -3,8 +3,8 @@
 	--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_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #ff6363;
 	--zdt_commonEmptyState_dark_link_hover: #ab1a18;
 }

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

@@ -3,8 +3,8 @@
 	--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_title: var(--dot_white);
+	--zdt_commonEmptyState_dark_description: var(--dot_white);
 	--zdt_commonEmptyState_dark_link: #e8b923;
 	--zdt_commonEmptyState_dark_link_hover: #b59100;
 }

package/es/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -34,10 +34,10 @@ export default class FreezeLayer__dark extends Component {
       needAutoZindex: true
     }, /*#__PURE__*/React.createElement("div", {
       style: {
-        color: 'var(--dot_text_black)',
+        color: 'var(--dot_black)',
         fontSize: '40px',
         padding: '100px',
-        background: 'var(--dot_bg_white)'
+        background: 'var(--dot_white)'
       }
     }, "Im children")));
   }

package/es/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -31,10 +31,10 @@ export default class FreezeLayer__default extends Component {
       animationName: "expand"
     }, /*#__PURE__*/React.createElement("span", {
       style: {
-        color: 'var(--dot_text_black)',
+        color: 'var(--dot_black)',
         fontSize: '40px',
         padding: '100px',
-        background: 'var(--dot_bg_white)'
+        background: 'var(--dot_white)'
       }
     }, "Im children")));
   }

package/es/ImportantNotes/ImportantNotes.js

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

package/es/Loader/docs/Loader__default.docs.js

@@ -8,7 +8,7 @@ export default class Loader__default extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", {
       style: {
-        background: 'var(--dot_bg_black)',
+        background: 'var(--dot_black)',
         height: '40px'
       }
     }, /*#__PURE__*/React.createElement(Loader, null));

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -43,13 +43,13 @@
 /* select dropdown */
 
 [data-mode='dark'] {
-  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
-  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
-  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
 }
 
 [data-mode='default'] {
-  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
-  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
-  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
 }

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 : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "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 : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "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: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${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 : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "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: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${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,16 +43,14 @@
 [dir=rtl] .checkboxText {
   padding-right: var(--zd_size6);
 }
+.cbTextReadonly {
+  cursor: not-allowed;
+}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled, .readonly {
-  cursor: not-allowed;
-}
-.cbTextReadonly,
-.disabled .fieldLabel,
-.readonly .fieldLabel {
-  --label_cursor: not-allowed;
+.disabled {
+  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
 }
 [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 : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "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: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${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 : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: "medium",
       id: id,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${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 : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "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: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${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: isReadOnly ? null : deleteTag.bind(this, name),
+        onRemove: deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-        isReadOnly: isReadOnly
+        disabled: 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} ${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
+    className: style.container
   }, /*#__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: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
+    customClass: `${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/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js

@@ -68,7 +68,7 @@ const TagsMultiSelectField__default = () => {
     style: {
       fontSize: '13px',
       marginLeft: '5px',
-      color: 'var(--dot_text_shuttleGrey)'
+      color: 'var(--dot_shuttleGrey)'
     }
   }, "shift+t")));
 };

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 : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "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: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${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/TextEditor/TextEditor.js

@@ -232,7 +232,7 @@ export default class TextEditor extends Component {
 
       if (isCustomScroll) {
         let link = document.createElement('style');
-        link.innerText = ".scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
+        link.innerText = "body{font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 0}.scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
         iframeHead.appendChild(link);
         iframe.classList.add('scroll');
       }

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} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`
+      className: `${style.container} ${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: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${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/TextEditorField/docs/TextEditorField__default.docs.js

@@ -22,7 +22,7 @@ export default class TextEditorField__default extends Component {
       flexible: true,
       style: {
         fontSize: '12px',
-        color: 'var(--dot_text_primary)',
+        color: 'var(--dot_primary)',
         textAlign: 'right'
       }
     }, "Placeholders")), /*#__PURE__*/React.createElement(TextEditorField, {

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 : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "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: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${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: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
+      className: `${column == 'single' ? `${style.singleColumn}` : `${style[width]}`} ${`formFieldLi_${width}`} ${containerClass ? containerClass : ''} `,
       "data-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''} ${`fieldWidth_${width}`}`

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

@@ -14,17 +14,20 @@ export default class Section extends Component {
       titleClass,
       className,
       column,
-      formName
+      formName,
+      innerContainerClass
     } = 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)));
   }
 
 }
@@ -34,7 +37,8 @@ Section.propTypes = {
   containerClass: PropTypes.string,
   dataId: PropTypes.string,
   title: PropTypes.string,
-  titleClass: PropTypes.string
+  titleClass: PropTypes.string,
+  innerContainerClass: PropTypes.string
 };
 
 if (false) {

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -6,10 +6,10 @@
   padding-left: var(--zd_size5);
 }
 /* .danger {
-  color: var(--dot_text_brightRed);
+  color: var(--dot_brightRed);
 }
 .default {
-  color: var(--dot_text_shuttleGrey);
+  color: var(--dot_shuttleGrey);
 } */
 .iconStyle {
   display: block;

package/es/list/DotNew/DotNew.module.css

@@ -1,15 +1,15 @@
 .medium {
   width: var(--zd_size6);
-  height: var(--zd_size6); 
+  height: var(--zd_size6);
 }
 .small{
   width: var(--zd_size5);
-  height: var(--zd_size5); 
+  height: var(--zd_size5);
 }
 .container{
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1); 
-  box-shadow: 0 0 0 0 var(--dot_bg_catskillWhite),
+   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+  box-shadow: 0 0 0 0 var(--dot_catskillWhite),
     0 0 0 0 rgba(10, 115, 235, 0.6); */
   border-radius: 50%;
   background-color: var(--zdt_dotnew_default_bg);

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

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

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

@@ -22,14 +22,24 @@ export default class ModuleHeader__default extends Component {
     let {
       searchStr
     } = this.state;
-    return /*#__PURE__*/React.createElement(ModuleHeader, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ModuleHeader, {
       title: "Find Duplicate",
       needSearch: true,
       searchStr: searchStr,
       onSearchChange: this.handleSearch,
       searchPlaceHolder: "Search",
-      miniDescription: "Select a field to search for duplicate records"
-    });
+      miniDescription: "Select a field to search for duplicate records",
+      onLookupClose: () => {}
+    }), /*#__PURE__*/React.createElement(ModuleHeader, {
+      title: "Find Duplicate",
+      needSearch: true,
+      searchStr: searchStr,
+      onSearchChange: this.handleSearch,
+      searchPlaceHolder: "Search",
+      miniDescription: "Select a field to search for duplicate records",
+      onLookupClose: () => {},
+      palette: "white"
+    }));
   }
 
 }

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

@@ -31,7 +31,8 @@ export default class TicketHeader extends Component {
       needOnTypeSearch,
       getSearchBoxRef,
       needViewsList,
-      i18nKeys
+      i18nKeys,
+      palette
     } = this.props;
     let {
       menuEmptyMessage = 'No matches found'
@@ -39,7 +40,7 @@ export default class TicketHeader extends Component {
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${commonStyle.container} ${commonResponsive.container} ${style.container}`,
+      className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
       isCover: false,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement("div", {
@@ -101,10 +102,12 @@ TicketHeader.propTypes = {
   title: PropTypes.string,
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
-  })
+  }),
+  palette: PropTypes.oneOf(['default', 'white'])
 };
 TicketHeader.defaultProps = {
-  i18nKeys: {}
+  i18nKeys: {},
+  palette: 'default'
 };
 
 if (false) {

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

@@ -1,13 +1,19 @@
 .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(--dot_white);
+  border-bottom: solid 1px var(--zdt_cta_grey_35_border);
+}
 .searchContainer, .title {
   margin: 0 var(--zd_size20);
 }

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -18,7 +18,7 @@
 [dir=rtl] .container {
   transform-origin: left center;
 }
-.globalNotify { 
+.globalNotify {
   max-width: var(--zd_size490);
   min-width: var(--zd_size394);
 }
@@ -62,12 +62,12 @@
 /* Container Style */
 .message {
   position: relative;
-  color: var(--zd_text_smoke18);
+  color: var(--zd_smoke18);
   font-size: var(--zd_font_size11);
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33);
   transition: padding var(--zd_transition3), height var(--zd_transition3);
-  border-top: 1px solid var(--zd_border_smoke1);
+  border-top: 1px solid var(--zd_smoke1);
   cursor: pointer;
 }
 [dir=ltr] .message {
@@ -77,7 +77,7 @@
   padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
 }
 .message:hover {
-  background: var(--zd_bg_alabaster);
+  background: var(--zd_alabaster);
 }
 /* Section */
 .section {
@@ -104,4 +104,3 @@
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
 }
-