@zohodesk/dot 1.3.3 → 1.4.1

package/lib/list/Thread/Thread.module.css

@@ -4,6 +4,7 @@
 .container {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
   cursor: pointer;
 }

package/lib/list/index.js

@@ -125,12 +125,6 @@ Object.defineProperty(exports, "Thread", {
     return _Thread["default"];
   }
 });
-Object.defineProperty(exports, "UserTime", {
-  enumerable: true,
-  get: function get() {
-    return _UserTime["default"];
-  }
-});
 
 var _AvatarFlip = _interopRequireDefault(require("./AvatarFlip/AvatarFlip"));
 
@@ -164,8 +158,6 @@ var _TagNew = _interopRequireDefault(require("./TagNew/TagNew"));
 
 var _Thread = _interopRequireDefault(require("./Thread/Thread"));
 
-var _UserTime = _interopRequireDefault(require("./UserTime/UserTime"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/setup/header/Search/Search.module.css

@@ -35,6 +35,7 @@
   font-size: var(--zd_font_size13) ;
   width: 100% ;
   letter-spacing: 0.2px;
+  /* css:theme-validation:ignore */
   transition: all var(--zd_transition3) ease;
   color: var(--zdt_search_input_text);
   font-family: var(--zd_regular);

package/lib/setup/table/TableRow/SetupTableRow.module.css

@@ -9,6 +9,7 @@
   margin-left: var(--zd_size40) ;
   margin-right: var(--zd_size40) ;
 }
+
 .container:hover {
-  background-color: var( --zdt_setuptablerow_hover_bg);
-}
+  background-color: var(--zdt_setuptablerow_hover_bg);
+}

package/lib/v1/alert/AlertHeader/AlertHeader.js

@@ -88,10 +88,11 @@ function AlertHeader(props) {
     shrink: true,
     id: htmlId
   }, title), children && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
     adjust: true,
     flexible: true
   }, children))), onClose && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: _AlertHeaderNewModule["default"].close
+    className: finalStyle.close
   }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
     onClose: onClose,
     dataTitle: closeTitle,

package/lib/v1/list/Comment/Comment.js

@@ -13,8 +13,6 @@ var _propTypes = require("../../../list/Comment/props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
-var _i18n = require("@zohodesk/i18n");
-
 var _Button = _interopRequireDefault(require("@zohodesk/components/es/v1/semantic/Button/Button"));
 
 var _CommentModule = _interopRequireDefault(require("../../../list/Comment/Comment.module.css"));
@@ -24,17 +22,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function Comment(props) {
   var count = props.count,
       onClick = props.onClick,
-      className = props.className;
-  var i18N = _i18n.i18NProviderUtils.getI18NValue;
-  var commentCount = parseInt(count);
-  var commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many', count) : i18N('support.comment.one');
+      className = props.className,
+      title = props.title;
   return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     customClass: "".concat(_CommentModule["default"].container, " ").concat(className, " "),
     onClick: onClick,
     dataId: "commentLstContainer",
-    title: commentTitle,
+    title: title,
     a11y: {
-      ariaLabel: commentTitle
+      ariaLabel: title
     }
   }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
     name: "ZD-TK-commentLine",

package/lib/v1/list/index.js

@@ -125,12 +125,6 @@ Object.defineProperty(exports, "Thread", {
     return _Thread["default"];
   }
 });
-Object.defineProperty(exports, "UserTime", {
-  enumerable: true,
-  get: function get() {
-    return _UserTime["default"];
-  }
-});
 
 var _AvatarFlip = _interopRequireDefault(require("./AvatarFlip/AvatarFlip"));
 
@@ -164,8 +158,6 @@ var _TagNew = _interopRequireDefault(require("./TagNew/TagNew"));
 
 var _Thread = _interopRequireDefault(require("./Thread/Thread"));
 
-var _UserTime = _interopRequireDefault(require("./UserTime/UserTime"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -1,18 +1,16 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DesktopNotificationUI = DesktopNotificationUI;
 exports["default"] = DesktopNotification;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("../../../version2/notification/DesktopNotification/props/defaultProps");
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
-var _propTypes = require("../../../version2/notification/DesktopNotification/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/es/v1/Layout");
 
@@ -26,14 +24,12 @@ 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 }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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); }
 
 var buttonPaletteObject = {
@@ -85,11 +81,13 @@ function DesktopNotificationUI(props) {
       size = props.size,
       onClose = props.onClose,
       needClose = props.needClose,
+      renderAlertIcon = props.renderAlertIcon,
       _props$customClass = props.customClass,
       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,68 +113,86 @@ 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)
-  }, 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;
+DesktopNotificationUI.propTypes = _defaultProps["default"];
 
 function DesktopNotification(props) {
   return /*#__PURE__*/_react["default"].createElement(_AutoClose["default"], _extends({}, props, {
@@ -185,7 +201,7 @@ function DesktopNotification(props) {
 }
 
 DesktopNotification.propTypes = _propTypes.propTypes;
-DesktopNotification.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+DesktopNotification.defaultProps = _defaultProps["default"]; // if (__DOCS__) {
 //   DesktopNotification.docs = {
 //     componentGroup: 'DesktopNotification',
 //     folderName: 'Alert'

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Config = require("../../../../Provider/Config");
+
+var _default = {
+  isMore: false,
+  isAnimate: true,
+  isClose: false,
+  autoClose: false,
+  hideTime: '3000',
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  needIcon: true,
+  titleVariant: 'primary',
+  isShrinkView: false,
+  needClose: true,
+  customProps: {},
+  dataSelectorId: 'desktopNotification',
+  responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
+};
+exports["default"] = _default;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.DesktopNotificationUI_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  isClose: _propTypes["default"].bool,
+  onPortalClose: _propTypes["default"].func,
+  autoClose: _propTypes["default"].bool,
+  hideTime: _propTypes["default"].string,
+  Element: _propTypes["default"].element,
+  responsiveId: _propTypes["default"].string
+};
+exports.propTypes = propTypes;
+var DesktopNotificationUI_propTypes = {
+  type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  cancelText: _propTypes["default"].string,
+  submitText: _propTypes["default"].string,
+  submitType: _propTypes["default"].oneOf(['primary', 'danger', 'success']),
+  isMore: _propTypes["default"].bool,
+  customClass: _propTypes["default"].object,
+  dataId: _propTypes["default"].string,
+  getBottomContainer: _propTypes["default"].func,
+  getSectionContainer: _propTypes["default"].func,
+  getSubmitContainer: _propTypes["default"].func,
+  i18nKeys: _propTypes["default"].object,
+  dataSelectorId: _propTypes["default"].string,
+  info: _propTypes["default"].string,
+  isAnimate: _propTypes["default"].bool,
+  isShrinkView: _propTypes["default"].bool,
+  message: _propTypes["default"].string,
+  needAutoZindex: _propTypes["default"].bool,
+  needClose: _propTypes["default"].bool,
+  needIcon: _propTypes["default"].bool,
+  onCancel: _propTypes["default"].func,
+  onClose: _propTypes["default"].func,
+  onSubmit: _propTypes["default"].func,
+  secondaryInfo: _propTypes["default"].string,
+  size: _propTypes["default"].oneOf(['medium', 'large']),
+  subTitle: _propTypes["default"].string,
+  titleVariant: _propTypes["default"].oneOf(['primary', 'secondary']),
+  isClose: _propTypes["default"].bool,
+  renderAlertIcon: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    ExtraProps: _propTypes["default"].object
+  }),
+  title: _propTypes["default"].string
+};
+exports.DesktopNotificationUI_propTypes = DesktopNotificationUI_propTypes;

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

@@ -1,17 +1,15 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = DesktopNotificationHeader;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("../../../version2/notification/DesktopNotificationHeader/props/defaultProps");
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
-var _propTypes = require("../../../version2/notification/DesktopNotificationHeader/props/propTypes");
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _Layout = require("@zohodesk/components/es/v1/Layout");
 
@@ -19,13 +17,13 @@ var _AlertClose = _interopRequireDefault(require("../../alert/AlertClose/AlertCl
 
 var _AlertIcons = _interopRequireDefault(require("../../alert/alertIcons/AlertIcons"));
 
-var _DesktopNotificationHeaderModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css"));
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/v1/Typography/Typography"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _DesktopNotificationHeaderModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function DesktopNotificationHeader(props) {
   var onClose = props.onClose,
@@ -36,39 +34,70 @@ function DesktopNotificationHeader(props) {
       type = _props$type === void 0 ? '' : _props$type,
       needIcon = props.needIcon,
       title = props.title,
-      needClose = props.needClose;
+      renderAlertIcon = props.renderAlertIcon,
+      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
-  }, /*#__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.propTypes;
-DesktopNotificationHeader.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+DesktopNotificationHeader.propTypes = _propTypes["default"];
+DesktopNotificationHeader.defaultProps = _defaultProps["default"]; // if (__DOCS__) {
 //   DesktopNotificationHeader.docs = {
 //     componentGroup: 'DesktopNotificationHeader',
 //     folderName: 'Alert'

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  closeTitle: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  needClose: _propTypes["default"].bool,
+  needIcon: _propTypes["default"].bool,
+  onClose: _propTypes["default"].func,
+  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']),
+  responsiveId: _propTypes["default"].string
+};
+exports["default"] = _default;