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

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

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

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

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

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

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -296,9 +296,7 @@
 
   /* lookup header common */
   --zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
-  --zdt_lookupheader_white_bg: var(--dot_bg_white);
   --zdt_lookupheader_default_border: var(--zdt_cta_grey_35_border);
-  --zdt_lookupheader_white_border: var(--zdt_cta_grey_15_border);
   --zdt_lookupheader_para_text: var(--dot_text_shuttleGrey);
   --zdt_lookupheader_input_border: var(--zd_border_smoke33);
 
@@ -459,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_success_hover_bg: #e9f7ef;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: var(--dot_bg_lavender);
   --zdt_commonalert_danger_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_error_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_warning_hover_bg: #fff1e6;

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

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

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

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

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

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

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

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

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

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

package/src/form/fields/CheckBoxField/CheckBoxField.js

@@ -118,7 +118,13 @@ export default class CheckBoxField extends PureComponent {
     );
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+            }`}
         data-title={isDisabled ? title : ''}
       >
         {isDirectCol && labelElement}

package/src/form/fields/CurrencyField/CurrencyField.js

@@ -101,7 +101,13 @@ export default class CurrencyField extends PureComponent {
 
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+            }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -116,7 +122,7 @@ export default class CurrencyField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${labelCustomClass} ${
+              customClass={`${style.fieldLabel} ${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/DateField/DateField.js

@@ -106,7 +106,13 @@ export default class DateField extends PureComponent {
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -123,7 +129,7 @@ export default class DateField extends PureComponent {
                   : labelPalette
               }
               onClick={isDisabled || isReadOnly ? null : this.handleLabelClick}
-              customClass={`${labelCustomClass} ${
+              customClass={`${style.fieldLabel} ${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               dataId={

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

@@ -38,14 +38,17 @@
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
-.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;
 }
 .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;

package/src/form/fields/MultiSelectField/MultiSelectField.js

@@ -118,7 +118,13 @@ export default class MultiSelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -137,7 +143,7 @@ export default class MultiSelectField extends PureComponent {
                   : labelPalette
               }
               // onClick={this.handleLabelClick}
-              customClass={`${isMandatory ? style.labelMandatory : ''}`}
+              customClass={`${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`}
               dataId={
                 isDisabled
                   ? `${dataId}_label_disabled`

package/src/form/fields/RadioField/RadioField.js

@@ -52,7 +52,13 @@ export default class RadioField extends PureComponent {
     } = customProps;
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -63,7 +69,7 @@ export default class RadioField extends PureComponent {
             palette={
               isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default'
             }
-            customClass={`${isMandatory ? style.labelMandatory : ''}`}
+            customClass={`${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`}
             dataId={
               isDisabled
                 ? `${dataId}_label_disabled`

package/src/form/fields/SelectField/SelectField.js

@@ -100,7 +100,13 @@ export default class SelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -115,7 +121,7 @@ export default class SelectField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${labelCustomClass} ${
+              customClass={`${style.fieldLabel} ${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -141,10 +141,10 @@ export default class TagsMultiSelect extends React.Component {
                   <Box className={style.tag} key={index}>
                     <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}
                     />
                   </Box>
                 ) : null;
@@ -176,7 +176,7 @@ export default class TagsMultiSelect extends React.Component {
               isReadOnly={isReadOnly}
               ref={this.textBoxRef}
               needBorder={false}
-              placeHolder={tagsList.length ? '' : '-'}
+              placeHolder={tagsList.length ? '' : (i18nKeys.placeholderText || '-')}
               onClick={!isReadOnly ? handleTogglePopup : undefined}
               customClass={{
                 customTBoxWrap: style.custmInp,
@@ -308,7 +308,8 @@ TagsMultiSelect.propTypes = {
     errorMessage: PropTypes.string.isRequired,
     deleteText: PropTypes.string.isRequired,
     lessText: PropTypes.string.isRequired,
-    moreText: PropTypes.string.isRequired
+    moreText: PropTypes.string.isRequired,
+    placeholderText: PropTypes.string
   }),
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   needBorder: PropTypes.bool,

package/src/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -168,7 +168,15 @@ const TagsMultiSelectField = props => {
   }, []);
 
   return (
-    <div className={style.container}>
+    <div 
+      className={`${style.container} ${
+          isDisabled
+            ? fieldStyle.disabled
+            : isReadOnly
+            ? fieldStyle.readonly
+            : ''
+        }`}
+    >
       <Container alignBox='row' align='baseline' isCover={false}>
         {labelName && (
           <Label
@@ -179,7 +187,7 @@ const TagsMultiSelectField = props => {
             palette={
               isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette
             }
-            customClass={`${isMandatory ? fieldStyle.labelMandatory : ''} ${
+            customClass={`${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${
               labelClass ? labelClass : ''
             }`}
             dataId={

package/src/form/fields/TextBoxField/TextBoxField.js

@@ -88,7 +88,13 @@ export default class TextBoxField extends PureComponent {
 
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -103,7 +109,7 @@ export default class TextBoxField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${labelCustomClass} ${
+              customClass={`${style.fieldLabel} ${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/fields/TextEditorField/TextEditorField.js

@@ -98,7 +98,15 @@ export default class TextEditorField extends PureComponent {
     } = customProps;
     let { ePhiTitle = '', ePhiText = '', ePhiStatus = false } = ePhiData;
     return (
-      <div className={`${style.container} ${className}`}>
+      <div 
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        } ${className || ''}`}
+      >
         <Container isCover={false} alignBox='row' align='vertical'>
           {labelName && (
             <Box>
@@ -114,7 +122,7 @@ export default class TextEditorField extends PureComponent {
                     : labelPalette
                 }
                 onClick={this.handleLabelClick}
-                customClass={`${labelCustomClass} ${
+                customClass={`${style.fieldLabel} ${labelCustomClass} ${
                   isMandatory ? style.labelMandatory : ''
                 }`}
                 dataId={

package/src/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -47,7 +47,7 @@ export default class TextEditorWrapper extends Component {
     ) {
       this.setState({ isEditorShow: true });
     } else {
-      if (!this.state.isEditorFocus) {
+      if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
         this.setState({ isEditorShow: false });
       }
     }

package/src/form/fields/TextareaField/TextareaField.js

@@ -87,7 +87,13 @@ export default class TextareaField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return (
       <div
-        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        className={`${style.container} ${
+          isDisabled
+            ? style.disabled
+            : isReadOnly
+            ? style.readonly
+            : ''
+        }`}
         data-title={isDisabled ? title : ''}
       >
         {labelName && (
@@ -103,7 +109,7 @@ export default class TextareaField extends PureComponent {
                   ? 'primary'
                   : labelPalette
               }
-              customClass={`${labelCustomClass} ${
+              customClass={`${style.fieldLabel} ${labelCustomClass} ${
                 isMandatory ? style.labelMandatory : ''
               }`}
               htmlFor={uniqueId}

package/src/form/layout/Field/Field.js

@@ -16,10 +16,9 @@ export default class Field extends Component {
     return (
       <React.Fragment>
         <div
-          className={`${
-            column == 'single' ? `${style.singleColumn}` : `${style[width]}`
-          } ${`formFieldLi_${width}`} ${containerClass ? containerClass : ''} `} 
-          data-id={dataId}
+          className={`${containerClass ? containerClass : ''} ${
+            column == 'single' ? `${style.singleColumn}` : `${style[width]} `
+          }`} data-id={dataId}
         >
           <div
             className={`${className ? className : ''} ${`fieldWidth_${width}`}`}

package/src/form/layout/Section/Section.js

@@ -14,21 +14,18 @@ export default class Section extends Component {
       titleClass,
       className,
       column,
-      formName,
-      innerContainerClass
+      formName
     } = this.props;
     return (
       <div data-id={dataId} className={containerClass ? containerClass : ''}>
-        <div className={innerContainerClass ? innerContainerClass : '' }>
-          {title && <div className={titleClass ? titleClass : ''}>{title}</div>}
-          <div
-            className={`${className ? className : ''} ${
-              column == 'single' ? style.singleColumn : ''
-            }`}
-            data-id={formName && formName}
-          >
-            {this.props.children}
-          </div>
+        {title && <div className={titleClass ? titleClass : ''}>{title}</div>}
+        <div
+          className={`${className ? className : ''} ${
+            column == 'single' ? style.singleColumn : ''
+          }`}
+          data-id={formName && formName}
+        >
+          {this.props.children}
         </div>
       </div>
     );
@@ -40,8 +37,7 @@ Section.propTypes = {
   containerClass: PropTypes.string,
   dataId: PropTypes.string,
   title: PropTypes.string,
-  titleClass: PropTypes.string,
-  innerContainerClass: PropTypes.string
+  titleClass: PropTypes.string
 };
 if (__DOCS__) {
   Section.docs = {

package/src/lookup/header/ModuleHeader/ModuleHeader.js

@@ -29,14 +29,13 @@ export default class ModuleHeader extends PureComponent {
       miniDescription,
       dataId,
       closeTitle,
-      onSearchKeyDown,
-      palette
+      onSearchKeyDown
     } = this.props;
     return (
       <Container
         align='vertical'
         alignBox='row'
-        className={`${commonStyle.container} ${commonStyle[`${palette}`]}`}
+        className={`${commonStyle.container}`}
         isCover={false}
         wrap='wrap'
         dataId={dataId}
@@ -88,14 +87,9 @@ ModuleHeader.propTypes = {
   title: PropTypes.string,
   dataId: PropTypes.string,
   closeTitle: PropTypes.string,
-  onSearchKeyDown: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'white'])
+  onSearchKeyDown: PropTypes.func
 };
 
-ModuleHeader.defaultProps = {
-  palette: 'default'
-}
-
 if (__DOCS__) {
   ModuleHeader.docs = {
     componentGroup: 'Lookup'

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

@@ -22,27 +22,14 @@ export default class ModuleHeader__default extends Component {
   render() {
     let { searchStr } = this.state;
     return (
-      <div>
-        <ModuleHeader
-          title='Find Duplicate'
-          needSearch
-          searchStr={searchStr}
-          onSearchChange={this.handleSearch}
-          searchPlaceHolder='Search'
-          miniDescription="Select a field to search for duplicate records"
-          onLookupClose={()=>{}}
-        />
-        <ModuleHeader
-          title='Find Duplicate'
-          needSearch
-          searchStr={searchStr}
-          onSearchChange={this.handleSearch}
-          searchPlaceHolder='Search'
-          miniDescription="Select a field to search for duplicate records"
-          onLookupClose={()=>{}}
-          palette='white'
-        />
-      </div>
+      <ModuleHeader
+        title='Find Duplicate'
+        needSearch
+        searchStr={searchStr}
+        onSearchChange={this.handleSearch}
+        searchPlaceHolder='Search'
+        miniDescription="Select a field to search for duplicate records"
+      />
     );
   }
 }

package/src/lookup/header/TicketHeader/TicketHeader.js

@@ -32,15 +32,14 @@ export default class TicketHeader extends Component {
       needOnTypeSearch,
       getSearchBoxRef,
       needViewsList,
-      i18nKeys,
-      palette
+      i18nKeys
     } = this.props;
     let { menuEmptyMessage = 'No matches found' } = i18nKeys;
     return (
       <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'
       >
@@ -110,13 +109,11 @@ TicketHeader.propTypes = {
   title: PropTypes.string,
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
-  }),
-  palette: PropTypes.oneOf(['default', 'white'])
+  })
 };
 
 TicketHeader.defaultProps = {
-  i18nKeys: {},
-  palette: 'default'
+  i18nKeys: {}
 };
 
 if (__DOCS__) {

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

@@ -2,15 +2,9 @@
   min-height: var(--zd_size51);
   position: relative;
   padding: 0 var(--zd_size52) 0 var(--zd_size10);
-}
-.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);