@zohodesk/dot 1.0.0-temp-165 → 1.0.0-temp-167

package/lib/v1/notification/DesktopNotification/DesktopNotification.js

@@ -24,6 +24,8 @@ var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction
 
 var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader/DesktopNotificationHeader"));
 
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
 var _DesktopNotificationModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotification/DesktopNotification.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -84,7 +86,8 @@ function DesktopNotificationUI(props) {
       customClass = _props$customClass === void 0 ? {} : _props$customClass,
       _props$i18nKeys = props.i18nKeys,
       i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
-      customProps = props.customProps;
+      customProps = props.customProps,
+      responsiveId = props.responsiveId;
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
       closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   var containerClass = customClass.containerClass;
@@ -110,66 +113,82 @@ function DesktopNotificationUI(props) {
   var Zindex = isAnimate ? getNextIndex() : null;
   var uiVariantOne = title && (info || secondaryInfo);
   var uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref2) {
+    var mediaQueryOR = _ref2.mediaQueryOR;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _DesktopNotificationModule["default"].parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-    className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, " ").concat(_DesktopNotificationModule["default"]["".concat(size)] ? _DesktopNotificationModule["default"]["".concat(size)] : '', " ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass),
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    renderAlertIcon: renderAlertIcon,
-    dataId: "".concat(dataId, "_close"),
-    needClose: needClose
-  })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
-  }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
-  }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DesktopNotificationModule["default"].footer
-  }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].message)
-  }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": "".concat(dataId, "_submitButton"),
-    "data-test-id": "".concat(dataId, "_submitButton")
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    text: cancelText,
-    palette: "secondary",
-    dataId: "".concat(dataId, "_cancelButton"),
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, function (_ref3) {
+    var uptoTablet = _ref3.uptoTablet;
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+      className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n             ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, "\n             ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
+      isCover: false,
+      dataId: dataId,
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      renderAlertIcon: renderAlertIcon,
+      dataId: "".concat(dataId, "_close"),
+      needClose: needClose
+    })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
+    }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
+    }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _DesktopNotificationModule["default"].footer
+    }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].message)
+    }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": "".concat(dataId, "_submitButton"),
+      "data-test-id": "".concat(dataId, "_submitButton")
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: cancelText,
+      palette: "secondary",
+      dataId: "".concat(dataId, "_cancelButton"),
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null);
+  }));
 }
 
 DesktopNotificationUI.propTypes = _propTypes.DesktopNotificationUI_propTypes;

package/lib/v1/notification/DesktopNotification/props/defaultProps.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
+var _Config = require("../../../../Provider/Config");
+
 var _default = {
   isMore: false,
   isAnimate: true,
@@ -17,6 +20,7 @@ var _default = {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
 };
 exports["default"] = _default;

package/lib/v1/notification/DesktopNotification/props/propTypes.js

@@ -14,7 +14,8 @@ var propTypes = {
   onPortalClose: _propTypes["default"].func,
   autoClose: _propTypes["default"].bool,
   hideTime: _propTypes["default"].string,
-  Element: _propTypes["default"].element
+  Element: _propTypes["default"].element,
+  responsiveId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;
 var DesktopNotificationUI_propTypes = {

package/lib/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -17,6 +17,10 @@ var _AlertClose = _interopRequireDefault(require("../../alert/AlertClose/AlertCl
 
 var _AlertIcons = _interopRequireDefault(require("../../alert/alertIcons/AlertIcons"));
 
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/v1/Typography/Typography"));
+
 var _DesktopNotificationHeaderModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -31,35 +35,65 @@ function DesktopNotificationHeader(props) {
       needIcon = props.needIcon,
       title = props.title,
       renderAlertIcon = props.renderAlertIcon,
-      needClose = props.needClose;
+      needClose = props.needClose,
+      responsiveId = props.responsiveId;
+
+  function responsiveFunc(_ref) {
+    var mediaQueryOR = _ref.mediaQueryOR;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     align: "vertical",
     alignBox: "row",
     className: "".concat(_DesktopNotificationHeaderModule["default"].container, " ").concat(_DesktopNotificationHeaderModule["default"][variant], " ").concat(_DesktopNotificationHeaderModule["default"][type]),
     isCover: false,
     wrap: "wrap"
-  }, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DesktopNotificationHeaderModule["default"].iconContainer
-  }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
-    type: type
-  })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    alignBox: "row",
-    align: "center"
-  }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: _DesktopNotificationHeaderModule["default"].title,
-    shrink: true
-  }, title) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
-  }, title))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: _DesktopNotificationHeaderModule["default"].close
-  }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
-    onClose: onClose,
-    dataTitle: closeTitle,
-    dataId: dataId,
-    type: "light"
-  })) : null);
+  }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, function (_ref2) {
+    var uptoTablet = _ref2.uptoTablet;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: _DesktopNotificationHeaderModule["default"].iconContainer
+    }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
+      type: type
+    })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "row",
+      align: "center"
+    }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      shrink: true
+    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $i18n_dataTitle: title,
+      $ui_className: _DesktopNotificationHeaderModule["default"].title,
+      $ui_tagName: "h1",
+      $ui_size: uptoTablet ? '16' : '18',
+      $ui_lineHeight: "20",
+      $ui_weight: "bold",
+      $flag_reset: true,
+      $ui_wordBreak: "breakWord"
+    }, title)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
+    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $i18n_dataTitle: title,
+      $ui_className: _DesktopNotificationHeaderModule["default"].title,
+      $ui_size: "14",
+      $ui_wordBreak: "breakWord"
+    }, title)))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: _DesktopNotificationHeaderModule["default"].close
+    }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
+      onClose: onClose,
+      dataTitle: closeTitle,
+      dataId: dataId,
+      type: "light"
+    })) : null);
+  }));
 }
 
 DesktopNotificationHeader.propTypes = _propTypes["default"];

package/lib/v1/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
+var _Config = require("../../../../Provider/Config");
+
 var _default = {
   needIcon: true,
   variant: 'primary',
-  needClose: true
+  needClose: true,
+  responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
 };
 exports["default"] = _default;

package/lib/v1/notification/DesktopNotificationHeader/props/propTypes.js

@@ -18,6 +18,7 @@ var _default = {
   title: _propTypes["default"].string,
   renderAlertIcon: _propTypes["default"].func,
   type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: _propTypes["default"].oneOf(['primary', 'secondary'])
+  variant: _propTypes["default"].oneOf(['primary', 'secondary']),
+  responsiveId: _propTypes["default"].string
 };
 exports["default"] = _default;

package/lib/version2/GlobalNotification/GlobalNotification.module.css

@@ -29,6 +29,9 @@
 .container {
   position: relative;
   pointer-events: initial;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   color: var(--globalnotification_text_color);
   max-width: var(--zd_size490) ;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';

package/lib/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -4,6 +4,7 @@
 .container {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   background-color: var(--zdt_alertlookup_bg);
   border-style: solid;
   border-color: var(--commonalert_border_color);

package/lib/version2/notification/DesktopNotification/DesktopNotification.js

@@ -26,6 +26,8 @@ var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction
 
 var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader/DesktopNotificationHeader"));
 
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
 var _DesktopNotificationModule = _interopRequireDefault(require("./DesktopNotification.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -89,7 +91,8 @@ function DesktopNotificationUI(props) {
       customClass = _props$customClass === void 0 ? {} : _props$customClass,
       _props$i18nKeys = props.i18nKeys,
       i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
-      customProps = props.customProps;
+      customProps = props.customProps,
+      responsiveId = props.responsiveId;
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
       closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   var containerClass = customClass.containerClass;
@@ -115,66 +118,82 @@ function DesktopNotificationUI(props) {
   var Zindex = isAnimate ? getNextIndex() : null;
   var uiVariantOne = title && (info || secondaryInfo);
   var uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref2) {
+    var mediaQueryOR = _ref2.mediaQueryOR;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _DesktopNotificationModule["default"].parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-    className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, " ").concat(_DesktopNotificationModule["default"]["".concat(size)] ? _DesktopNotificationModule["default"]["".concat(size)] : '', " ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass),
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    dataId: "".concat(dataId, "_close"),
-    needClose: needClose
-  })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
-  }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
-  }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DesktopNotificationModule["default"].footer
-  }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].message),
-    tagName: "p"
-  }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": "".concat(dataId, "_submitButton"),
-    "data-test-id": "".concat(dataId, "_submitButton")
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    text: cancelText,
-    palette: "secondary",
-    dataId: "".concat(dataId, "_cancelButton"),
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, function (_ref3) {
+    var uptoTablet = _ref3.uptoTablet;
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+      className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n            ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, "  ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
+      isCover: false,
+      dataId: dataId,
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      dataId: "".concat(dataId, "_close"),
+      needClose: needClose
+    })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
+    }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
+    }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _DesktopNotificationModule["default"].footer
+    }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].message),
+      tagName: "p"
+    }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": "".concat(dataId, "_submitButton"),
+      "data-test-id": "".concat(dataId, "_submitButton")
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: cancelText,
+      palette: "secondary",
+      dataId: "".concat(dataId, "_cancelButton"),
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null);
+  }));
 }
 
 DesktopNotificationUI.propTypes = _propTypes.DesktopNotificationUI_propTypes;

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

@@ -28,6 +28,7 @@
 }
 
 /* Size */
+
 .medium {
   width: var(--zd_size452) ;
 }
@@ -35,6 +36,10 @@
 .large {
   width: var(--zd_size580) ;
 }
+.tapWidth{
+  max-width: 100% ;
+  min-width: 100% ;
+}
 
 /* Animation Style */
 .closeAnimation {
@@ -76,12 +81,12 @@
 /* Container Style */
 .message {
   position: relative;
-  color: var(--zd_smoke18);
+  color: var(--zdt_desktopnotification_message_text);
   font-size: var(--zd_font_size11) ;
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33) ;
   transition: padding var(--zd_transition3), height var(--zd_transition3);
-  border-top: 1px solid var(--zd_smoke1);
+  border-top: 1px solid var(--zdt_desktopnotification_message_border);
   cursor: pointer;
 }
 [dir=ltr] .message {
@@ -92,7 +97,7 @@
 }
 
 .message:hover {
-  background: var(--zd_alabaster);
+  background: var(--zdt_desktopnotification_message_hover_bg);
 }
 
 /* Section */
@@ -100,6 +105,7 @@
   padding: var(--zd_size15) var(--zd_size30) var(--zd_size30) ;
 }
 
+
 .subTitle {
   font-size: var(--zd_font_size15) ;
   line-height: 1.3333;
@@ -124,4 +130,4 @@
 .footer {
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
+}

package/lib/version2/notification/DesktopNotification/props/defaultProps.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _Config = require("../../../../Provider/Config");
+
 var defaultProps = {
   isMore: false,
   isAnimate: true,
@@ -17,6 +20,7 @@ var defaultProps = {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
 };
 exports.defaultProps = defaultProps;

package/lib/version2/notification/DesktopNotification/props/propTypes.js

@@ -14,7 +14,8 @@ var propTypes = {
   onPortalClose: _propTypes["default"].func,
   autoClose: _propTypes["default"].bool,
   hideTime: _propTypes["default"].string,
-  Element: _propTypes["default"].element
+  Element: _propTypes["default"].element,
+  responsiveId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;
 var DesktopNotificationUI_propTypes = {