@zohodesk/dot 1.0.0-temp-212 → 1.0.0-temp-200.8

package/lib/Onboarding/css/Onboarding.module.css

@@ -2,6 +2,15 @@
   width: var(--zd_size360) ;
 }
 
+
+.positon_absolute{
+  position: absolute;
+}
+
+.positon_fixed{
+  position: fixed;
+}
+
 [dir=ltr] .mainContainerAnimation{
   transform-origin: 100% 100%;
   animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
@@ -41,6 +50,7 @@
   border-top-right-radius: inherit;
 }
 
+
 .mediaElement {
   width: 100% ;
   height: 100% ;
@@ -51,8 +61,10 @@
 }
 
 .image {
+  user-drag: none;
+  -webkit-user-drag: none;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover; 
 }
 
 /* image filter layer */
@@ -450,7 +462,13 @@
 .carouselInner {
   transition: transform var(--zd_transition3) cubic-bezier(0.5, 0.11, 0.15, 1);
   width: 100% ;
-  transform: translate3d(var(--local_translate_movement), 0, 0)
+}
+[dir=ltr] .carouselInner {
+  transform: translateX(var(--local_translate_movement))
+  /*rtl:translateX(calc(var(--local_translate_movement) * -1))*/;
+}
+[dir=rtl] .carouselInner {
+  transform: translateX(calc(var(--local_translate_movement) * -1));
 }
 .carouselItem {
   width: 100% 

package/lib/Onboarding/hooks/useOnboarding.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _react = require("react");
+
 var _useMergeState3 = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeState"));
 
+var _useDragger = _interopRequireDefault(require("../../Hooks/Dragger/useDragger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -21,7 +25,16 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var useOnboarding = function useOnboarding(props) {
+var useOnboarding = function useOnboarding(_ref) {
+  var dragBoundaryLimit = _ref.dragBoundaryLimit,
+      isDraggable = _ref.isDraggable;
+  var dragRef = (0, _react.useRef)(null);
+  (0, _useDragger["default"])({
+    isActive: isDraggable,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  });
+
   var _useMergeState = (0, _useMergeState3["default"])({
     videoLookupLink: '',
     isVideoLookupOpen: false,
@@ -50,6 +63,7 @@ var useOnboarding = function useOnboarding(props) {
 
   return {
     state: state,
+    dragRef: dragRef,
     openVideoLookup: openVideoLookup,
     closeVideoLookup: closeVideoLookup
   };

package/lib/Onboarding/hooks/useOnboardingSlider.js

@@ -23,7 +23,8 @@ var autoplayDelay = 50; // 5000ms divided by 100 for smoother animation
 
 var useOnboardingSlider = function useOnboardingSlider(_ref) {
   var isAutoPlayAnimation = _ref.isAutoPlayAnimation,
-      sliderData = _ref.sliderData;
+      sliderData = _ref.sliderData,
+      animationClass = _ref.animationClass;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -36,6 +37,7 @@ var useOnboardingSlider = function useOnboardingSlider(_ref) {
       setAutoplay = _useState4[1];
 
   var progressRef = (0, _react.useRef)(0);
+  var mainContainerEleRef = (0, _react.useRef)(null);
   var totalSlidesArrayLen = sliderData.length;
   var handleSliderIndexChange = (0, _react.useCallback)(function (index) {
     progressRef.current = 0;
@@ -43,15 +45,20 @@ var useOnboardingSlider = function useOnboardingSlider(_ref) {
   }, []);
   var handleSliderNext = (0, _react.useCallback)(function () {
     progressRef.current = 0;
-    setCurrentSlide(currentSlide + 1);
+    setCurrentSlide(function (prev) {
+      return prev + 1;
+    });
     setAutoplay(false);
-  }, [currentSlide]);
+  }, []);
   var handleMouseEnter = (0, _react.useCallback)(function () {
     setAutoplay(false);
   }, []);
   var handleMouseLeave = (0, _react.useCallback)(function () {
     setAutoplay(true);
   }, []);
+  var handleAnimationEnd = (0, _react.useCallback)(function () {
+    mainContainerEleRef.current && mainContainerEleRef.current.classList.remove(animationClass);
+  }, [animationClass]);
   (0, _react.useEffect)(function () {
     var progressInterval;
 
@@ -74,10 +81,12 @@ var useOnboardingSlider = function useOnboardingSlider(_ref) {
     sliderIndex: currentSlide,
     isAnimationPaused: !autoplay,
     translateMovementVal: translateMovementVal,
+    mainContainerEleRef: mainContainerEleRef,
     handleMouseEnter: handleMouseEnter,
     handleMouseLeave: handleMouseLeave,
     handleSliderIndexChange: handleSliderIndexChange,
-    handleSliderNext: handleSliderNext
+    handleSliderNext: handleSliderNext,
+    handleAnimationEnd: handleAnimationEnd
   };
 };
 

package/lib/Onboarding/props/defaultProps.js

@@ -7,6 +7,7 @@ exports.defaultProps = void 0;
 var defaultProps = {
   ribbonText: "New",
   videoLookupCloseText: "Esc",
+  closeIconTooltip: "Close",
   isAutoPlayAnimation: true,
   customId: "onboarding",
   testId: 'onboarding',
@@ -15,6 +16,16 @@ var defaultProps = {
   customProps: {},
   hasBouncAnimationOnMount: true,
   hasCloseIcon: true,
-  hasRibbon: true
+  hasRibbon: true,
+  tagAttributes: {},
+  a11yAttributes: {},
+  isDraggable: true,
+  position: "static",
+  dragBoundaryLimit: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
 };
 exports.defaultProps = defaultProps;

package/lib/Onboarding/props/propTypes.js

@@ -26,15 +26,26 @@ var propTypes = {
   testId: _propTypes["default"].string,
   hasRibbon: _propTypes["default"].bool,
   customId: _propTypes["default"].string,
+  position: _propTypes["default"].string,
+  isDraggable: _propTypes["default"].bool,
   ribbonText: _propTypes["default"].string,
   hasCloseIcon: _propTypes["default"].bool,
   customStyle: _propTypes["default"].object,
+  tagAttributes: _propTypes["default"].object,
+  a11yAttributes: _propTypes["default"].object,
   hasExpandedButton: _propTypes["default"].bool,
+  closeIconTooltip: _propTypes["default"].string,
   isAutoPlayAnimation: _propTypes["default"].bool,
   onPrimaryButtonClick: _propTypes["default"].func,
   videoLookupCloseText: _propTypes["default"].string,
   onSecondaryButtonClick: _propTypes["default"].func,
   hasBouncAnimationOnMount: _propTypes["default"].bool,
+  dragBoundaryLimit: _propTypes["default"].shape({
+    top: _propTypes["default"].number,
+    left: _propTypes["default"].number,
+    right: _propTypes["default"].number,
+    bottom: _propTypes["default"].number
+  }),
   sliderData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     heading: _propTypes["default"].string,
     imageSource: _propTypes["default"].string,

package/lib/PlusIcon/__tests__/__snapshots__/PlusIcon.spec.js.snap

@@ -15,7 +15,7 @@ exports[`PlusIcon renders with  size is  - medium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -41,7 +41,7 @@ exports[`PlusIcon renders with  size is  - small 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -67,7 +67,7 @@ exports[`PlusIcon renders with  size is  - xlarge 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`PlusIcon renders with  size is  - xmedium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -119,7 +119,7 @@ exports[`PlusIcon renders with  size is  - xsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -145,7 +145,7 @@ exports[`PlusIcon renders with  size is  - xxsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -171,7 +171,7 @@ exports[`PlusIcon renders with customClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -197,7 +197,7 @@ exports[`PlusIcon renders with dataId prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -223,7 +223,7 @@ exports[`PlusIcon renders with default props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -249,7 +249,7 @@ exports[`PlusIcon renders with iconClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus   custom-icon-class icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus   custom-icon-class icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -275,7 +275,7 @@ exports[`PlusIcon renders with iconName prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -301,7 +301,7 @@ exports[`PlusIcon renders with iconSize prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,7 +328,7 @@ exports[`PlusIcon renders with title prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/VideoLookup/__tests__/VideoLookup.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _VideoLookup = _interopRequireDefault(require("../VideoLookup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('VideoLookup', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_VideoLookup["default"], null)),

package/lib/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -770,7 +770,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/avatar/AvatarIcon/AvatarIcon.js

@@ -79,7 +79,7 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
           AvatarIconProps = _customProps$AvatarIc === void 0 ? {} : _customProps$AvatarIc;
       var border = borderOnHover || onClick;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_AvatarIconModule["default"].container, " ").concat(borderOnActive ? _AvatarIconModule["default"].borderOnActive : border ? _AvatarIconModule["default"].borderOnHover : '', " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarIconModule["default"][palette], " ").concat(className),
+        className: "".concat(_AvatarIconModule["default"].container, " ").concat(borderOnActive ? _AvatarIconModule["default"].borderOnActive : border ? _AvatarIconModule["default"].borderOnHover : '', " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarIconModule["default"][palette] ? _AvatarIconModule["default"][palette] : '', " ").concat(className),
         onClick: onClick,
         dataId: dataId,
         "data-title": title,
@@ -90,7 +90,7 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
       }, AvatarIconProps), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: name,
         size: iconSize,
-        iconClass: " ".concat(iconClass, " ").concat(_AvatarIconModule["default"].iconColor, " ").concat(iconColor ? " ".concat(_AvatarIconModule["default"]["icon_".concat(iconColor)]) : '', " "),
+        iconClass: " ".concat(iconClass, " ").concat(_AvatarIconModule["default"].avatar_align_center, "  ").concat(_AvatarIconModule["default"].iconColor, " ").concat(iconColor ? " ".concat(_AvatarIconModule["default"]["icon_".concat(iconColor)] ? _AvatarIconModule["default"]["icon_".concat(iconColor)] : '') : '', " "),
         isBold: isIconBold
       }));
     }

package/lib/avatar/AvatarIcon/AvatarIcon.module.css

@@ -56,3 +56,6 @@
   --icon_color: var(--zdt_avatarIcon_dark_icon);
 }
 
+.avatar_align_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
+}

package/lib/avatar/AvatarIcon/__tests__/__snapshots__/AvatarIcon.spec.js.snap

@@ -10,7 +10,7 @@ exports[`AvatarIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-add-ag    iconColor  undefined   "
+      class="zd_font_icons basic icon-add-ag    avatar_align_center  iconColor     "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -19,7 +19,7 @@ var _Popup = _interopRequireDefault(require("@zohodesk/components/lib/Popup/Popu
 
 var _Layout = require("@zohodesk/components/lib/Layout");
 
-var _ListItem = _interopRequireDefault(require("@zohodesk/components/lib/ListItem/ListItem"));
+var _ListItem = _interopRequireDefault(require("@zohodesk/components/es/ListItem/ListItem"));
 
 var _ListItemWithIcon = _interopRequireDefault(require("@zohodesk/components/lib/ListItem/ListItemWithIcon"));
 
@@ -281,8 +281,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           keyName = _this$props6.keyName,
           isGroupDropDown = _this$props6.isGroupDropDown,
           groupOptionsKey = _this$props6.groupOptionsKey,
-          groupNameKey = _this$props6.groupNameKey;
+          groupNameKey = _this$props6.groupNameKey,
+          searchFields = _this$props6.searchFields;
       searchValue = searchValue.trim().toLowerCase();
+      searchFields.push(keyName !== 'value' ? keyName : 'value');
       var result = [];
 
       if (isGroupDropDown) {
@@ -292,8 +294,15 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           var name = group[groupNameKey];
           var groupOptions = group[groupOptionsKey];
           var datas = groupOptions.filter(function (list) {
-            var value = list[keyName];
-            return value.toLowerCase().includes(searchValue);
+            return searchFields.some(function (key) {
+              var val = list[key];
+
+              if (val === null || val === undefined) {
+                return false;
+              } else {
+                return val.toLowerCase().includes(searchValue);
+              }
+            });
           });
 
           if (datas.length) {
@@ -309,7 +318,15 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             return true;
           }
 
-          return item[keyName].toLowerCase().includes(searchValue);
+          return searchFields.some(function (key) {
+            var val = item[key];
+
+            if (val === null || val === undefined) {
+              return false;
+            } else {
+              return val.toLowerCase().includes(searchValue);
+            }
+          });
         });
 
         if (filteredOptions.length) {
@@ -783,7 +800,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 _item$disableTitle = item.disableTitle,
                 disableTitle = _item$disableTitle === void 0 ? '' : _item$disableTitle,
                 _item$isDisabled = item.isDisabled,
-                isDisabled = _item$isDisabled === void 0 ? false : _item$isDisabled;
+                isDisabled = _item$isDisabled === void 0 ? false : _item$isDisabled,
+                secondaryValue = item.secondaryValue;
             listIndex += 1;
             return iconName ? /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
               key: listIndex,
@@ -811,7 +829,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 role: isSearch ? 'option' : 'menuitem',
                 ariaSelected: selectedId === item[idName],
                 ariaLabel: item[keyName]
-              }
+              },
+              secondaryValue: secondaryValue
             }, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
               key: listIndex,
               dataId: item[keyName],
@@ -835,7 +854,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 role: isSearch ? 'option' : 'menuitem',
                 ariaSelected: selectedId === item[idName],
                 ariaLabel: item[keyName]
-              }
+              },
+              secondaryValue: secondaryValue
             }, ListItemProps));
           }));
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -850,7 +870,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               _item$isDisabled2 = item.isDisabled,
               isDisabled = _item$isDisabled2 === void 0 ? false : _item$isDisabled2,
               _item$disableTitle2 = item.disableTitle,
-              disableTitle = _item$disableTitle2 === void 0 ? '' : _item$disableTitle2;
+              disableTitle = _item$disableTitle2 === void 0 ? '' : _item$disableTitle2,
+              secondaryValue = item.secondaryValue;
 
           if (!needDivider) {
             listIndex += 1;
@@ -886,7 +907,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
-            }
+            },
+            secondaryValue: secondaryValue
           }, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: listIndex,
             dataId: item[keyName],
@@ -910,7 +932,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
-            }
+            },
+            secondaryValue: secondaryValue
           }, ListItemProps)));
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,

package/lib/dropdown/ToggleDropDown/props/defaultProps.js

@@ -31,6 +31,7 @@ var defaultProps = {
   needMultiLineText: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customClass: {}
+  customClass: {},
+  searchFields: []
 };
 exports.defaultProps = defaultProps;

package/lib/dropdown/ToggleDropDown/props/propTypes.js

@@ -89,6 +89,7 @@ var propTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   from: _propTypes["default"].string,
-  top: _propTypes["default"].number
+  top: _propTypes["default"].number,
+  searchFields: _propTypes["default"].array
 };
 exports.propTypes = propTypes;

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -54,12 +54,12 @@
 .desc{
   word-wrap: break-word;
 }
-[dir=ltr] .linkDesc, [dir=ltr] .desc {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .linkDesc, [dir=rtl] .desc {
+[dir=ltr] .linkDesc+.link, [dir=ltr] .desc+.link {
   margin-left: var(--zd_size4) ;
 }
+[dir=rtl] .linkDesc+.link, [dir=rtl] .desc+.link {
+  margin-right: var(--zd_size4) ;
+}
 .small .desc {
   line-height: 1.584;
 }
@@ -68,7 +68,6 @@
 }
 .link {
   color: var(--linkColor);
-  display: inline-block;
   cursor: pointer;
 }
 .link:hover {

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -114,3 +114,7 @@
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);
 }
+
+.searchEmpty{
+  padding:0 var(--zd_size10) 
+}

package/lib/list/ListStencils/__tests__/__snapshots__/ListStencils.spec.js.snap

@@ -15,7 +15,7 @@ exports[`ListStencils customId and testId 1`] = `
         class="avatar"
       >
         <div
-          class="container circle clarge primary "
+          class="container animate circle size_large primary "
         />
       </div>
       <div
@@ -28,14 +28,14 @@ exports[`ListStencils customId and testId 1`] = `
             class="primaryRow"
           >
             <div
-              class="container rectangular default primary "
+              class="container animate rect default primary "
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container rectangular medium primary "
+              class="container animate rect medium primary "
             />
           </div>
         </div>
@@ -58,7 +58,7 @@ exports[`ListStencils rendering the defult props 1`] = `
         class="avatar"
       >
         <div
-          class="container circle clarge primary "
+          class="container animate circle size_large primary "
         />
       </div>
       <div
@@ -71,14 +71,14 @@ exports[`ListStencils rendering the defult props 1`] = `
             class="primaryRow"
           >
             <div
-              class="container rectangular default primary "
+              class="container animate rect default primary "
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container rectangular medium primary "
+              class="container animate rect medium primary "
             />
           </div>
         </div>

package/lib/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap

@@ -12,7 +12,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-cross    "
+      class="zd_font_icons basic icon-cross   icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/lookup/header/TicketHeader/__tests__/__snapshots__/TicketHeader.spec.js.snap

@@ -46,7 +46,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/utils/General.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DUMMY_OBJECT = void 0;
 exports.formatPhoneUrl = formatPhoneUrl;
+exports.getBrowserWithVersion = getBrowserWithVersion;
 exports.getFullName = getFullName;
 exports.shallowDiff = shallowDiff;
 exports.stopBubbling = stopBubbling;
@@ -59,4 +60,27 @@ function formatPhoneUrl(phone) {
 }
 
 var DUMMY_OBJECT = Object.freeze({});
-exports.DUMMY_OBJECT = DUMMY_OBJECT;
+exports.DUMMY_OBJECT = DUMMY_OBJECT;
+
+function getBrowserWithVersion() {
+  var userAgent = navigator.userAgent;
+  var tempMatch;
+  var browserMatch = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
+
+  if (userAgent.toLowerCase().indexOf('edge') !== -1) {
+    return userAgent.substring(userAgent.toLowerCase().indexOf('edge'));
+  }
+
+  if (/trident/i.test(browserMatch[1])) {
+    tempMatch = /\brv[ :]+(\d+(\.\d+)?)/g.exec(userAgent) || [];
+    return "IE ".concat(tempMatch[1] || '');
+  }
+
+  browserMatch = browserMatch[2] ? [browserMatch[1], browserMatch[2]] : [navigator.appName, navigator.appVersion, '-?'];
+
+  if ((tempMatch = userAgent.match(/version\/([\.\d]+)/i)) !== null) {
+    browserMatch[2] = tempMatch[1];
+  }
+
+  return browserMatch.join(' ');
+}