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

package/es/list/ListLayout/ListLayout.module.css

@@ -35,10 +35,22 @@
   padding: var(--zd_size2) 0 ;
 }
 
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
+  /* css:theme-validation:ignore */
+}
+
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
 
+.compact,
+.classic,
+.superCompact {
+  /* css:theme-validation:ignore */
+}
+
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }

package/es/list/Subject/Subject.module.css

@@ -3,6 +3,7 @@
 }
 .subject {
   composes: varClass;
+  /* css:theme-validation:ignore */
   color: var(--subject_text);
   display: block;
 }

package/es/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/es/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/es/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/es/v1/notification/DesktopNotification/DesktopNotification.js

@@ -9,6 +9,7 @@ import AutoClose from '../../../actions/AutoClose';
 import Button from '@zohodesk/components/es/v1/Button/Button';
 import FormAction from '../../../FormAction/FormAction';
 import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from '../../../version2/notification/DesktopNotification/DesktopNotification.module.css';
 let buttonPaletteObject = {
   success: {
@@ -61,7 +62,8 @@ export function DesktopNotificationUI(props) {
     renderAlertIcon,
     customClass = {},
     i18nKeys = {},
-    customProps
+    customProps,
+    responsiveId
   } = props;
   let {
     closeTitle = 'Close'
@@ -90,66 +92,88 @@ export function DesktopNotificationUI(props) {
   let Zindex = isAnimate ? getNextIndex() : null;
   let uiVariantOne = title && (info || secondaryInfo);
   let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/React.createElement(Container, _extends({
-    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    renderAlertIcon: renderAlertIcon,
-    dataId: `${dataId}_close`,
-    needClose: needClose
-  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.section} ${style.infoText}`
-  }, subTitle && /*#__PURE__*/React.createElement("div", {
-    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
-  }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
-    className: `${info ? style.secondaryInfo : ''}`
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: style.footer
-  }, isMore ? /*#__PURE__*/React.createElement("div", {
-    className: `${style.message}`
-  }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/React.createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": `${dataId}_submitButton`,
-    "data-test-id": `${dataId}_submitButton`
-  }, /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    text: cancelText,
-    palette: "secondary",
-    dataId: `${dataId}_cancelButton`,
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    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, {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      renderAlertIcon: renderAlertIcon,
+      dataId: `${dataId}_close`,
+      needClose: needClose
+    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.section} ${style.infoText}`
+    }, subTitle && /*#__PURE__*/React.createElement("div", {
+      className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+    }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
+      className: `${info ? style.secondaryInfo : ''}`
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: style.footer
+    }, isMore ? /*#__PURE__*/React.createElement("div", {
+      className: `${style.message}`
+    }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/React.createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": `${dataId}_submitButton`,
+      "data-test-id": `${dataId}_submitButton`
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      text: cancelText,
+      palette: "secondary",
+      dataId: `${dataId}_cancelButton`,
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+  }));
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 DesktopNotificationUI.propTypes = defaultProps;

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

@@ -1,3 +1,4 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   isMore: false,
   isAnimate: true,
@@ -11,5 +12,6 @@ export default {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

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

@@ -4,7 +4,8 @@ export const propTypes = {
   onPortalClose: PropTypes.func,
   autoClose: PropTypes.bool,
   hideTime: PropTypes.string,
-  Element: PropTypes.element
+  Element: PropTypes.element,
+  responsiveId: PropTypes.string
 };
 export const DesktopNotificationUI_propTypes = {
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),

package/es/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -4,6 +4,8 @@ import propTypes from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import AlertClose from '../../alert/AlertClose/AlertClose';
 import AlertIcons from '../../alert/alertIcons/AlertIcons';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/v1/Typography/Typography';
 import style from '../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css';
 export default function DesktopNotificationHeader(props) {
   let {
@@ -15,36 +17,70 @@ export default function DesktopNotificationHeader(props) {
     needIcon,
     title,
     renderAlertIcon,
-    needClose
+    needClose,
+    responsiveId
   } = props;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     className: `${style.container} ${style[variant]} ${style[type]}`,
     isCover: false,
     wrap: "wrap"
-  }, needIcon ? /*#__PURE__*/React.createElement("div", {
-    className: style.iconContainer
-  }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/React.createElement(AlertIcons, {
-    type: type
-  })) : null, /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "center"
-  }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
-    className: style.title,
-    shrink: true
-  }, title) : /*#__PURE__*/React.createElement(Box, {
-    className: `${style.infoText}`
-  }, title))), needClose ? /*#__PURE__*/React.createElement(Box, {
-    className: style.close
-  }, /*#__PURE__*/React.createElement(AlertClose, {
-    onClose: onClose,
-    dataTitle: closeTitle,
-    dataId: dataId,
-    type: "light"
-  })) : null);
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
+      className: style.iconContainer
+    }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/React.createElement(AlertIcons, {
+      type: type
+    })) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "center"
+    }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_tagName: "h1",
+      $ui_size: uptoTablet ? '16' : '18',
+      $ui_lineHeight: "20",
+      $ui_weight: "bold",
+      $flag_reset: true,
+      $ui_wordBreak: "breakWord"
+    }, title)) : /*#__PURE__*/React.createElement(Box, {
+      className: `${style.infoText}`
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_size: "14",
+      $ui_wordBreak: "breakWord"
+    }, title)))), needClose ? /*#__PURE__*/React.createElement(Box, {
+      className: style.close
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      onClose: onClose,
+      dataTitle: closeTitle,
+      dataId: dataId,
+      type: "light"
+    })) : null);
+  }));
 }
 DesktopNotificationHeader.propTypes = propTypes;
 DesktopNotificationHeader.defaultProps = defaultProps; // if (__DOCS__) {

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

@@ -1,5 +1,7 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   needIcon: true,
   variant: 'primary',
-  needClose: true
+  needClose: true,
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

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

@@ -8,5 +8,6 @@ export default {
   title: PropTypes.string,
   renderAlertIcon: PropTypes.func,
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: PropTypes.oneOf(['primary', 'secondary'])
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  responsiveId: PropTypes.string
 };

package/es/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/es/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/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -9,6 +9,7 @@ import AutoClose from '../../../actions/AutoClose';
 import Button from '@zohodesk/components/lib/Button/Button';
 import FormAction from '../../../FormAction/FormAction';
 import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from './DesktopNotification.module.css';
 let buttonPaletteObject = {
   success: {
@@ -60,7 +61,8 @@ export function DesktopNotificationUI(props) {
     needClose,
     customClass = {},
     i18nKeys = {},
-    customProps
+    customProps,
+    responsiveId
   } = props;
   let {
     closeTitle = 'Close'
@@ -89,66 +91,87 @@ export function DesktopNotificationUI(props) {
   let Zindex = isAnimate ? getNextIndex() : null;
   let uiVariantOne = title && (info || secondaryInfo);
   let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__PURE__*/React.createElement(Container, _extends({
-    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
-    isCover: false,
-    dataId: dataId,
-    isInline: uiVariantTwo
-  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    dataId: `${dataId}_close`,
-    needClose: needClose
-  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.section} ${style.infoText}`
-  }, subTitle && /*#__PURE__*/React.createElement("div", {
-    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
-  }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
-    className: `${info ? style.secondaryInfo : ''}`
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: style.footer
-  }, isMore ? /*#__PURE__*/React.createElement("div", {
-    className: `${style.message}`,
-    tagName: "p"
-  }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/React.createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": `${dataId}_submitButton`,
-    "data-test-id": `${dataId}_submitButton`
-  }, /*#__PURE__*/React.createElement(Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
-    flexible: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    text: cancelText,
-    palette: "secondary",
-    dataId: `${dataId}_cancelButton`,
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    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, {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      dataId: `${dataId}_close`,
+      needClose: needClose
+    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.section} ${style.infoText}`
+    }, subTitle && /*#__PURE__*/React.createElement("div", {
+      className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+    }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
+      className: `${info ? style.secondaryInfo : ''}`
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: style.footer
+    }, isMore ? /*#__PURE__*/React.createElement("div", {
+      className: `${style.message}`,
+      tagName: "p"
+    }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/React.createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": `${dataId}_submitButton`,
+      "data-test-id": `${dataId}_submitButton`
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      text: cancelText,
+      palette: "secondary",
+      dataId: `${dataId}_cancelButton`,
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+  }));
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 export default function DesktopNotification(props) {

package/es/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/es/version2/notification/DesktopNotification/props/defaultProps.js

@@ -1,3 +1,4 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export const defaultProps = {
   isMore: false,
   isAnimate: true,
@@ -11,5 +12,6 @@ export const defaultProps = {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

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

@@ -4,7 +4,8 @@ export const propTypes = {
   onPortalClose: PropTypes.func,
   autoClose: PropTypes.bool,
   hideTime: PropTypes.string,
-  Element: PropTypes.element
+  Element: PropTypes.element,
+  responsiveId: PropTypes.string
 };
 export const DesktopNotificationUI_propTypes = {
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),