@zohodesk/dot 1.9.1 → 1.9.3

package/es/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -2,8 +2,8 @@
 
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_pre  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -11,8 +11,8 @@ exports[`Subject rendering the defult props 1`] = `
 
 exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_breakSpaces  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -20,8 +20,8 @@ exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 
 exports[`Subject rendering the whiteSpace of -normal 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_normal  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -29,8 +29,8 @@ exports[`Subject rendering the whiteSpace of -normal 1`] = `
 
 exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_nowrap  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -38,8 +38,8 @@ exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_pre  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -47,8 +47,8 @@ exports[`Subject rendering the whiteSpace of -pre 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preLine  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -56,8 +56,8 @@ exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preWrap  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>

package/es/list/Subject/props/defaultProps.js

@@ -4,5 +4,7 @@ export const defaultProps = {
   className: '',
   isDotted: true,
   customProps: {},
-  whiteSpace: 'pre'
+  whiteSpace: 'pre',
+  isHighlighted: false,
+  highlightData: {}
 };

package/es/list/Subject/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as typographyProps } from '@zohodesk/components/es/Typography/props/propTypes';
 export const propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -16,5 +17,8 @@ export const propTypes = {
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
   }),
-  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']),
+  // Highlight props
+  isHighlighted: PropTypes.bool,
+  highlightData: typographyProps.$ui_highlightConfig
 };

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -178,8 +178,12 @@ export class StatusDropdown extends React.Component {
       targetOffset,
       renderTargetElement,
       renderFooterElement,
-      a11y = {}
+      a11y = {},
+      customClass
     } = this.props;
+    const {
+      dropBoxClass = ''
+    } = customClass;
     const {
       tabIndex = 0,
       ariaLabelledby,
@@ -247,7 +251,8 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: dropBoxClass
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,

package/es/list/status/StatusDropdown/props/defaultProps.js

@@ -18,5 +18,6 @@ export const defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  customClass: {}
 };

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -56,5 +56,8 @@ export const propTypes = {
   positionsOffset: PropTypes.object,
   renderTargetElement: PropTypes.func,
   renderFooterElement: PropTypes.node,
-  targetOffset: PropTypes.object
+  targetOffset: PropTypes.object,
+  customClass: PropTypes.shape({
+    dropBoxClass: PropTypes.string
+  })
 };

package/es/list/status/StatusListItem/StatusListItem.js

@@ -1,3 +1,5 @@
+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';
 import { defaultProps } from "./props/defaultProps";
@@ -68,7 +70,8 @@ export default class StatusListItem extends React.Component {
       a11y,
       needMultiLineText,
       customClass,
-      children
+      children,
+      lhsAlignContent
     } = this.props;
     let options = {};
     let {
@@ -84,13 +87,13 @@ export default class StatusListItem extends React.Component {
       options.target = `_${target}`;
     }
 
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       "aria-label": ariaLabel,
       "data-a11y-inset-focus": insetFocus,
       isCover: false,
-      align: "baseline",
+      align: "vertical",
       alignBox: "row",
       className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
       dataId: String(value).replace("'", '_'),
@@ -99,10 +102,11 @@ export default class StatusListItem extends React.Component {
       eleRef: this.getRef,
       tagName: isLink ? 'a' : 'li',
       "data-title": isDisabled ? disableTitle : null,
-      tabindex: isDisabled ? '-1' : '0',
-      ...options,
-      ...a11y
+      tabindex: isDisabled ? '-1' : '0'
+    }, options, a11y), /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
       className: `${style.statusType} ${style[bulletColor]}`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
@@ -120,7 +124,7 @@ export default class StatusListItem extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -1,9 +1,16 @@
+.varClass {
+  --statuslistitem_multiline_lineheight: 1.5385;
+  --statuslistitem_font_size: var(--zd_font_size13);
+  --statuslistitem_min_height: 35px;
+}
+
 .list {
+  composes: varClass;
   color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--zd_font_size13) ;
+  font-size: var(--statuslistitem_font_size);
   position: relative;
   list-style: none;
-  min-height: var(--zd_size35) ;
+  min-height: var(--statuslistitem_min_height);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -22,7 +29,7 @@
   padding: var(--zd_size7) var(--zd_size20) ;
 }
 .large {
-  height: var(--zd_size48) ;
+  --statuslistitem_min_height: 48px;
 }
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -36,9 +43,8 @@
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
+.multiLineValue {
+  composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -88,24 +94,39 @@
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
+.contentWrapper {
+  composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  width: 100% ;
+}
 /* Status Type */
-.statusType {
-  width: var(--zd_size8) ;
-  height: var(--zd_size8) ;
+.statusType{
+  position: relative;
+  composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
+  min-width: var(--zd_size20) ;
+}
+.statusType::after{
+  /* css:validation:ignore */
+  --status_listitem_bullet_size: var(--zd_font_size8);
+
+  content: '';
+  height: var(--status_listitem_bullet_size);
+  width: var(--status_listitem_bullet_size);
   border-radius: 50%;
 }
-[dir=ltr] .statusType {
-  margin-right: var(--zd_size13) ;
+[dir=ltr] .statusType::after{
+  margin-right: var(--zd_size12) ;
 }
-[dir=rtl] .statusType {
-  margin-left: var(--zd_size13) ;
+[dir=rtl] .statusType::after{
+  margin-left: var(--zd_size12) ;
 }
-.black {
+
+.black.statusType::after {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-.orange {
+.orange.statusType::after {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-.green {
+.green.statusType::after {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/es/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`StatusListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="list medium default     withBorder  flex rowdir baseline"
+    class="list medium default     withBorder  flex rowdir vCenter"
     data-a11y-inset-focus="true"
     data-id="undefined"
     data-selector-id="container"
@@ -11,35 +11,42 @@ exports[`StatusListItem rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="statusType black shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    />
-    <div
-      class="grow basis shrinkOn"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="statusType black shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      />
+      <div
+        class="grow basis shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOn"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        />
-        <div
-          class="shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        />
+          class="flex cover rowdir vCenter"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="value shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          />
+          <div
+            class="shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          />
+        </div>
       </div>
     </div>
   </li>

package/es/list/status/StatusListItem/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   bulletColor: 'black',
   a11y: {},
   needMultiLineText: false,
-  customClass: ''
+  customClass: '',
+  lhsAlignContent: 'start'
 };

package/es/list/status/StatusListItem/props/propTypes.js

@@ -27,5 +27,6 @@ export const propTypes = {
     ariaHidden: PropTypes.bool
   }),
   customClass: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end'])
 };

package/es/lookup/Lookup/Lookup.js

@@ -1,3 +1,5 @@
+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';
 import { defaultProps } from "./props/defaultProps";
@@ -77,7 +79,7 @@ export default class Lookup extends Component {
       needFocusLoop = true,
       needEnterAction = true
     } = focusScopeProps;
-    const content = /*#__PURE__*/React.createElement("div", {
+    const content = /*#__PURE__*/React.createElement("div", _extends({
       ref: this.createRef,
       tabIndex: "-1",
       "data-a11y-need-focus-style": "false",
@@ -89,9 +91,8 @@ export default class Lookup extends Component {
       id: htmlId,
       className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
       "data-id": dataId,
-      "data-test-id": dataId,
-      ...a11yAttributes
-    }, /*#__PURE__*/React.createElement(Container, {
+      "data-test-id": dataId
+    }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
       "data-drag-container": "true",
       isCover: false,
       className: `${isMinHeight ? style.wrapper : style.coverwrap} ${style.containerWidth} ${containerClass}`

package/es/lookup/header/Search/Search.js

@@ -1,3 +1,5 @@
+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 */
 
 /*** Libraries ***/
@@ -103,11 +105,7 @@ export default class Search extends Component {
       isArrow: false,
       isToggleStateNeeded: true,
       selectedId: selectedId
-    }, /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
-      ...searchUIExtraProps
-    })) : /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
-      ...searchUIExtraProps
-    });
+    }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
   }
 
 }

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -1,3 +1,5 @@
+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 { defaultProps } from "./props/defaultProps";
 import { propTypes, UI_propTypes, new_propTypes } from "./props/propTypes";
@@ -113,7 +115,7 @@ export default class GlobalNotification extends React.Component {
       closeTitle = 'Close'
     } = i18nKeys;
     const notificationData = this.getNotificationData();
-    return /*#__PURE__*/React.createElement(GlobalNotificationUI, { ...notificationData,
+    return /*#__PURE__*/React.createElement(GlobalNotificationUI, _extends({}, notificationData, {
       hideMessage: hideMessage,
       onClick: onClick,
       closeTitle: closeTitle,
@@ -123,7 +125,7 @@ export default class GlobalNotification extends React.Component {
       onClose: this.onClose,
       needShadow: shadowClose && needShadow,
       eleRef: eleRef
-    });
+    }));
   }
 
 }
@@ -158,7 +160,7 @@ export function GlobalNotificationUI(props) {
   let {
     ExtraProps = {}
   } = customProps;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({
     ref: eleRef,
     className: ` ${style.message} 
         ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
@@ -167,9 +169,8 @@ export function GlobalNotificationUI(props) {
     "data-id": `show_${type}_message`,
     "data-test-id": `show_${type}_message`,
     tabIndex: 0,
-    "data-selector-id": dataSelectorId,
-    ...ExtraProps
-  }, /*#__PURE__*/React.createElement(Container, {
+    "data-selector-id": dataSelectorId
+  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",
     isCover: false,
@@ -201,8 +202,8 @@ export function GlobalNotificationUI(props) {
 }
 GlobalNotificationUI.propTypes = UI_propTypes;
 export function GlobalNotificationNew(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: GlobalNotificationUI
-  });
+  }));
 }
 GlobalNotificationNew.propTypes = new_propTypes;

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -1,3 +1,5 @@
+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';
 import { defaultProps } from "./props/defaultProps";
@@ -121,7 +123,7 @@ export default class AlertLookup extends Component {
       ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
       ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
     };
-    return /*#__PURE__*/React.createElement(Lookup, {
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
       onClose: onEsc == 'close' ? onClose : onCancelClick,
       needFocusScope: true,
       isActive: isActive,
@@ -131,9 +133,8 @@ export default class AlertLookup extends Component {
       onClick: onLookupClick,
       customClass: containerClass,
       a11y: a11y,
-      childAnimationName: childAnimationName,
-      ...LookupProps
-    }, /*#__PURE__*/React.createElement(Container, {
+      childAnimationName: childAnimationName
+    }, LookupProps), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: align,
       wrap: "wrap"
@@ -142,15 +143,14 @@ export default class AlertLookup extends Component {
       className: style.section
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "column"
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, {
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
       htmlId: ariaTitleId,
       title: title,
       type: type,
       needIcon: needIcon,
       onClose: onClose,
-      breakChildren: wrapHeader,
-      ...AlertHeaderProps
-    }, headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
+      breakChildren: wrapHeader
+    }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
@@ -169,30 +169,30 @@ export default class AlertLookup extends Component {
     }, /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xmedium"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, _extends({
       text: submitText,
       dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
       onClick: onSubmitClick,
       palette: buttonPalette,
       customProps: {
         'data-a11y-autofocus': isDefaultFocus
-      },
-      ...PrimaryButtonProps,
+      }
+    }, PrimaryButtonProps, {
       a11y: {
         'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
       },
       id: ariaLeaveButtonId
-    }), cancelText && /*#__PURE__*/React.createElement(Button, {
+    })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,
       onClick: onCancelClick,
-      palette: "secondary",
-      ...SecondaryButtonProps,
+      palette: "secondary"
+    }, SecondaryButtonProps, {
       a11y: {
         'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
       },
       id: ariaStayButtonId
-    })))) : null))));
+    }))))) : null))));
   }
 
 }

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -1,3 +1,5 @@
+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 } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes, DesktopNotificationUI_propTypes } from "./props/propTypes";
@@ -117,14 +119,13 @@ export function DesktopNotificationUI(props) {
     let {
       uptoTablet
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
             ${isShrinkView ? style.globalNotify : ''} ${containerClass}  ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
       isCover: false,
       dataId: dataId,
-      isInline: uiVariantTwo,
-      ...ExtraProps
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
       type: type,
       title: title,
       variant: titleVariant,
@@ -177,9 +178,9 @@ export function DesktopNotificationUI(props) {
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 export default function DesktopNotification(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: DesktopNotificationUI
-  });
+  }));
 }
 DesktopNotification.propTypes = propTypes;
 DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {