@zohodesk/components 1.0.0-alpha-241 → 1.0.0-alpha-244

package/README.md

@@ -32,6 +32,19 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-244
+
+- AdvancedGroupMultiSelect , AdvancedMultiSelect => textbox flexible ui fix and duplicate css removed
+
+# 1.0.0-alpha-243
+
+- DateTime, DateWidget => Portal Id support for fixed position.
+- YearView => Theme Variable support for month text.
+
+# 1.0.0-alpha-242
+
+- Tag -> defaultLink palette added
+
 # 1.0.0-alpha-241
 
 - Added unobserve element condition for Tooltip.

package/assets/Appearance/dark/mode/darkMode.module.css

@@ -121,6 +121,8 @@
 	--zdt_tag_pure_hover_bg: var(--zd_smoke6);
 	--zdt_tag_pure_hover_border: var(--zd_dark6);
 	--zdt_tag_dark_close_hover_bg: var(--dot_brightRed);
+	--zdt_tag_defaultLink_hover_bg: var(--zdt_cta_alpha_bg);
+	--zdt_tag_defaultLink_hover_text: var(--zdt_cta_primary_text);
 	
 	/* textbox */
 	--zdt_textbox_default_text: var(--dot_platinum);
@@ -261,23 +263,7 @@
 	--zdt_multiselect_box_bg: var(--dot_ebonyclay);
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_oslogrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: var(--dot_cadetblue);
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_platinum);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: var(--dot_ebonyclay);
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_oslogrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);
@@ -305,7 +291,7 @@
 	--zdt_datetime_datestr_hover_bg: var(--dot_tuna);
 	--zdt_datetime_separator_border: var(--dot_tuna);
 	--zdt_datetime_daystr_text: var(--dot_oslogrey);
-	--zdt_datetime_invalid_text: var(--dot_paleNavy);
+	--zdt_datetime_invalid_text: var(--dot_riverbed);
 	--zdt_datetime_invalid_hover_text: var(--dot_bittersweet);
 	--zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
 	--zdt_datetime_today_bg: var(--zdt_cta_primary_bg);
@@ -321,6 +307,7 @@
 	--zdt_yearview_yearbox_border: #384157;
 	--zdt_yearview_year_hover_text: var(--dot_platinum);
 	--zdt_yearview_yeartext_text: var(--dot_oslogrey);
+	--zdt_yearview_month_text: var(--dot_platinum);
 	
 	/* date widget */
 	--zdt_datewidget_input_border: var(--dot_inputLine);

package/assets/Appearance/default/mode/defaultMode.module.css

@@ -121,6 +121,8 @@
 	--zdt_tag_pure_hover_bg: var(--zd_smoke6);
 	--zdt_tag_pure_hover_border: var(--zd_dark6);
 	--zdt_tag_dark_close_hover_bg: var(--dot_brightRed);
+	--zdt_tag_defaultLink_hover_bg: var(--zdt_cta_alpha_bg);
+	--zdt_tag_defaultLink_hover_text: var(--zdt_cta_primary_text);
 	
 	/* textbox */
 	--zdt_textbox_default_text: var(--dot_black);
@@ -261,23 +263,7 @@
 	--zdt_multiselect_box_bg: var(--dot_white);
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_slateGrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: var(--dot_shuttleGrey);
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_black);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: var(--dot_white);
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_slateGrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);
@@ -321,6 +307,7 @@
 	--zdt_yearview_yearbox_border: var(--dot_paleBlue);
 	--zdt_yearview_year_hover_text: var(--dot_black);
 	--zdt_yearview_yeartext_text: var(--dot_slateGrey);
+	--zdt_yearview_month_text: var(--dot_black);
 	
 	/* date widget */
 	--zdt_datewidget_input_border: var(--dot_inputLine);

package/assets/Appearance/pureDark/mode/pureDarkMode.module.css

@@ -121,6 +121,8 @@
 	--zdt_tag_pure_hover_bg: var(--zd_smoke6);
 	--zdt_tag_pure_hover_border: var(--zd_dark6);
 	--zdt_tag_dark_close_hover_bg: var(--dot_brightRed);
+	--zdt_tag_defaultLink_hover_bg: var(--zdt_cta_alpha_bg);
+	--zdt_tag_defaultLink_hover_text: var(--zdt_cta_primary_text);
 	
 	/* textbox */
 	--zdt_textbox_default_text: var(--dot_platinum);
@@ -261,23 +263,7 @@
 	--zdt_multiselect_box_bg: #212121;
 	--zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
 	--zdt_multiselect_message_text: var(--dot_oslogrey);
-	
-	/* advanced multiselect */
-	--zdt_advancedmultiselect_default_border: var(--dot_inputLine);
-	--zdt_advancedmultiselect_transparent_border: var(--dot_mirror);
-	--zdt_advancedmultiselect_dark_border: var(--dot_mulledwine);
-	--zdt_advancedmultiselect_default_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_transparent_hover_border: var(--dot_inputLineHover);
-	--zdt_advancedmultiselect_dark_hover_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
-	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: #999;
-	--zdt_advancedmultiselect_delete_hover_text: var(--dot_platinum);
-	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
-	--zdt_advancedmultiselect_box_bg: #212121;
-	--zdt_advancedmultiselect_droppopup_text: var(--dot_oslogrey);
-	--zdt_advancedmultiselect_more_text: var(--zdt_cta_primary_text);
+	--zdt_multiselect_more_text: var(--zdt_cta_primary_text);
 	
 	/* ripple effect */
 	--zdt_rippleeffect_default_border: var(--dot_mirror);
@@ -305,7 +291,7 @@
 	--zdt_datetime_datestr_hover_bg: #161515;
 	--zdt_datetime_separator_border: #161515;
 	--zdt_datetime_daystr_text: #828994;
-	--zdt_datetime_invalid_text: var(--dot_paleNavy);
+	--zdt_datetime_invalid_text: var(--dot_riverbed);
 	--zdt_datetime_invalid_hover_text: var(--dot_bittersweet);
 	--zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
 	--zdt_datetime_today_bg: var(--zdt_cta_primary_bg);
@@ -321,6 +307,7 @@
 	--zdt_yearview_yearbox_border: #161515;
 	--zdt_yearview_year_hover_text: var(--dot_platinum);
 	--zdt_yearview_yeartext_text: #828994;
+	--zdt_yearview_month_text: var(--dot_platinum);
 	
 	/* date widget */
 	--zdt_datewidget_input_border: var(--dot_inputLine);

package/es/AppContainer/AppContainer.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/Avatar/Avatar.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/AvatarTeam/AvatarTeam.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/CheckBox/CheckBox.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/DateTime/DateTime.js

@@ -664,7 +664,8 @@ export default class DateTime extends React.PureComponent {
       isDefaultPosition,
       positionsOffset,
       targetOffset,
-      isRestrictScroll
+      isRestrictScroll,
+      dropBoxPortalId
     } = this.props;
     const {
       timeText = 'Time',
@@ -763,7 +764,8 @@ export default class DateTime extends React.PureComponent {
         isPadding: isPadding,
         positionsOffset: positionsOffset,
         targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll
+        isRestrictScroll: isRestrictScroll,
+        portalId: dropBoxPortalId
       }, /*#__PURE__*/React.createElement(Box, null, childEle));
     }) : null;
   }

package/es/DateTime/DateTime.module.css

@@ -25,7 +25,6 @@
 }
 
 .datesStr {
-  color: var(--zdt_datetime_datestr_text);
   font-family: var(--zd_regular);
 }
 .grid {
@@ -39,6 +38,7 @@
 .thArrow,
 .datesStr {
   font-size: var(--zd_font_size13);
+  color: var(--zdt_datetime_datestr_text);
 }
 .thArrow, .datesStr {
   cursor: pointer;

package/es/DateTime/DateWidget.js

@@ -982,7 +982,8 @@ class DateWidgetComponent extends React.Component {
       isAbsolutePositioningNeeded,
       positionsOffset,
       targetOffset,
-      isRestrictScroll
+      isRestrictScroll,
+      dropBoxPortalId
     } = this.props;
     const {
       selected: value = '',
@@ -1066,7 +1067,8 @@ class DateWidgetComponent extends React.Component {
       isAbsolute: isAbsolutePositioningNeeded,
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
-      isRestrictScroll: isRestrictScroll
+      isRestrictScroll: isRestrictScroll,
+      dropBoxPortalId: dropBoxPortalId
     }));
   }
 

package/es/DateTime/YearView.module.css

@@ -10,6 +10,7 @@
   font-size: var(--zd_font_size12);
   line-height: var(--zd_size26);
   height: var(--zd_size26);
+  color: var(--zdt_yearview_month_text);
   text-align: center;
   margin: 0 0 var(--zd_size1);
   cursor: pointer;

package/es/DropBox/DropBox.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';

package/es/ListItem/ListContainer.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React, { useCallback } from 'react';

package/es/ListItem/ListItem.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';

package/es/ListItem/ListItemWithAvatar.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';

package/es/ListItem/ListItemWithCheckBox.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/ListItem/ListItemWithIcon.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';

package/es/ListItem/ListItemWithRadio.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/Modal/Modal.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import Loader from '@zohodesk/svg/lib/svg/Loader';
 import Popup from '../Popup/Popup';
-import TextBox from '../TextBox/TextBox';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import MultiSelectHeader from '../MultiSelect/MultiSelectHeader';
@@ -897,6 +897,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     } = this.handleFilterSuggestions();
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -927,8 +928,9 @@ class AdvancedGroupMultiSelect extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize == 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} `
-    }, searchStr), /*#__PURE__*/React.createElement(TextBox, {
+      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `
+    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
       needBorder: false,
@@ -943,7 +945,9 @@ class AdvancedGroupMultiSelect extends React.Component {
       variant: variant,
       dataId: `${dataId}_textBox`,
       isReadOnly: isReadOnly,
-      customClass: style.custmInputWrapper,
+      customClass: {
+        customTBoxWrap: style.custmInputWrapper
+      },
       tabindex: isDisabled && '-1',
       htmlId: htmlId,
       a11y: {
@@ -955,8 +959,11 @@ class AdvancedGroupMultiSelect extends React.Component {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: autoComplete
-    })), !isReadOnly && !isDisabled && selectedGroupOptions.length > 1 ? /*#__PURE__*/React.createElement(Box, {
-      className: style.delete,
+    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.delete} ${style[`${palette}Delete`]}`,
       dataId: `${dataId}_clearIcon`,
       "data-title": clearText,
       onClick: this.handleDeselectAll,
@@ -965,7 +972,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';
@@ -11,7 +11,7 @@ import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
 import MultiSelectHeader from './MultiSelectHeader';
 import Popup from '../Popup/Popup';
-import Textbox from '../TextBox/TextBox';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -20,7 +20,7 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
-import style from './AdvancedMultiSelect.module.css';
+import style from './MultiSelect.module.css';
 /**** Methods ****/
 
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
@@ -428,8 +428,14 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       onClick: this.handleMoreClick,
       tagName: "button"
     }, `+ ${moreCount} More`) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Textbox, {
+      flexible: true,
+      className: style.wrapper,
+      adjust: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement("span", {
+      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `
+    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
       needBorder: false,
@@ -444,6 +450,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       variant: variant,
       isReadOnly: isReadOnly,
       tabindex: isDisabled && '-1',
+      customClass: {
+        customTBoxWrap: style.custmInputWrapper
+      },
       htmlId: htmlId,
       a11y: {
         role: 'combobox',
@@ -454,8 +463,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: false
-    })), isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
-      className: style.delete,
+    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.delete}`,
       dataId: dataIdClearIcon,
       "data-title": clearText,
       onClick: this.handleDeselectAll,
@@ -464,7 +476,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {

package/es/MultiSelect/MultiSelect.module.css

@@ -1,7 +1,6 @@
 .wrapper {
   position: relative;
 }
-
 .disabled, .readOnly {
   cursor: not-allowed;
 }
@@ -195,4 +194,13 @@
 }
 .search{
   padding: 0px 20px;
+}
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_multiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  background-color: var(--zdt_multiselect_delete_bg);
+  border: 0;
 }

package/es/MultiSelect/SelectedOptions.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';

package/es/MultiSelect/Suggestions.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';

package/es/Popup/Popup.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';

package/es/ResponsiveDropBox/ResponsiveDropBox.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';

package/es/Select/Select.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React, { Component } from 'react';

package/es/Switch/Switch.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import { PropTypes } from 'prop-types';

package/es/Tab/Tab.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /* eslint-disable react/forbid-component-props */
 

package/es/Tab/TabWrapper.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';

package/es/Tab/Tabs.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /* eslint-disable react/forbid-component-props */
 

package/es/Tag/Tag.js

@@ -170,7 +170,7 @@ Tag.propTypes = {
   initial: PropTypes.string,
   onRemove: PropTypes.func,
   onSelectTag: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted']),
+  palette: PropTypes.oneOf(['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink']),
   rounded: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium']),
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/es/Tag/Tag.module.css

@@ -158,7 +158,7 @@
   --tag_closeicon_bg_color: var(--zdt_tag_closeprimary_bg);
 }
 .default,
-.danger {
+.danger,.defaultLink {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
 .effect.default:hover {
@@ -184,7 +184,6 @@
 .activedangerClose:hover {
   --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
 }
-
 .secondary {
   --tag_bg_color: var(--zdt_tag_secondary_bg);
   --tag_text_color: var(--zdt_tag_secondary_text);
@@ -193,6 +192,11 @@
 .effect.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
+.activedefaultLink,
+.effect.defaultLink:hover{
+--tag_bg_color: var(--zdt_tag_defaultLink_hover_bg);
+--tag_text_color: var(--zdt_tag_defaultLink_hover_text);
+};
 
 .pureDotted {
   --tag_bg_color: var(--zdt_tag_pure_bg);

package/es/TextBox/TextBox.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/Textarea/Textarea.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
 import PropTypes from 'prop-types';