@zohodesk/dot 1.0.0-temp-137 → 1.0.0-temp.139

package/es/layout/List/ThreadsList/ThreadListItemCommon.module.css

@@ -0,0 +1,345 @@
+.normal {
+  border: 1px solid var(--zdt_conversationList_border);
+  background-color: var(--zdt_thread_bg);
+}
+
+.threadShrink {
+  background-color: var(--zdt_subtabList_bg_hover);
+}
+
+[dir=ltr] .avatarWrapper {
+  margin-right: var(--zd_size15);
+}
+
+[dir=rtl] .avatarWrapper {
+  margin-left: var(--zd_size15);
+}
+
+.agentName {
+  font-size: var(--zd_font_size14);
+  composes: bold from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_conversationList_agentName_text);
+}
+
+.agentNameHover:hover,
+.primaryText {
+  color: var(--zdt_conversationList_agent_text);
+}
+
+.agentNameHover:hover, .primaryText {
+  cursor: pointer;
+}
+
+.attachCount {
+  top: calc(var(--zd_size4) * -1);
+  color: var(--zdt_conversationList_attachCount_text);
+  position: relative;
+  font-size: var(--zd_font_size10);
+}
+
+.attachIconWrapper {
+  composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.attachmentWrapper {
+  margin-top: var(--zd_size5);
+}
+
+.thrdPlain {
+  font-size: var(--zd_font_size14);
+  word-break: break-word;
+  composes: oflowx from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_conversationList_thread_text);
+}
+
+.thrdPlain table {
+  word-break: initial;
+}
+
+.thrdPlainContent {
+  line-height: var(--zd_size20);
+}
+
+.thrdPlain a {
+  color: var(--zdt_conversationList_primary_text);
+}
+
+.thrdPlain a:hover {
+  color: var(--zdt_conversationList_primary_hover_text);
+}
+
+.thrdPlain img[src*='/ImageDisplay'], .thrdPlain img[src*='/inlineImages'], .thrdPlain img[src*='/ViewMailAttachment.do'] {
+  cursor: pointer;
+}
+
+[dir=ltr] .thrdPlain blockquote {
+  margin: 0 0 0 var(--zd_size4);
+}
+
+[dir=rtl] .thrdPlain blockquote {
+  margin: 0 var(--zd_size4) 0 0;
+}
+
+.thrdPlain img {
+  max-width: 100%;
+}
+
+.whiteBg.thrdPlain a,
+.whiteBg .thrdPlain a {
+  color: var(--zdt_conversationList_agent_text);
+}
+
+.whiteBg.thrdPlain a:hover,
+.whiteBg .thrdPlain a:hover {
+  color: var(--zdt_conversationList_agent_hover_text);
+}
+
+/* opposite colors applied in variables to show original theme colors for selection area in inverted threads */
+.invert .thrdPlain ::selection,
+.invert.thrdPlain ::selection,
+.invert .thrdPlain::selection,
+.invert.thrdPlain::selection {
+  color: var(--zdt_inverted_selection_text);
+}
+.invert .thrdPlain ::selection, .invert.thrdPlain ::selection, .invert .thrdPlain::selection, .invert.thrdPlain::selection {
+  background-color: var(--zdt_selection_bg);
+}
+
+.invert .thrdPlain ::-moz-selection,
+.invert.thrdPlain ::-moz-selection,
+.invert .thrdPlain::-moz-selection,
+.invert.thrdPlain::-moz-selection {
+  color: var(--zdt_inverted_selection_text);
+}
+
+.invert .thrdPlain ::-moz-selection, .invert.thrdPlain ::-moz-selection, .invert .thrdPlain::-moz-selection, .invert.thrdPlain::-moz-selection {
+  background-color: var(--zdt_selection_bg);
+}
+
+.invert .thrdPlain,
+.invert.thrdPlain {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* <img> and <a> elements selection inverted again below. So, to avoid opposite colors in <img> & <a> area original colors variables used below */
+.invert .thrdPlain img::selection,
+.invert.thrdPlain img::selection {
+  color: var(--zdt_selection_text);
+}
+.invert .thrdPlain img::selection, .invert.thrdPlain img::selection {
+  background-color: var(--zdt_selection_bg);
+}
+
+.invert .thrdPlain img::-moz-selection,
+.invert.thrdPlain img::-moz-selection {
+  color: var(--zdt_selection_text);
+}
+
+.invert .thrdPlain img::-moz-selection, .invert.thrdPlain img::-moz-selection {
+  background-color: var(--zdt_selection_bg);
+}
+
+.invert img,
+.invert video {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+.dotted {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+
+
+/* ----- */
+.draftText,
+.forumText,
+.showVisitor,
+.response,
+.bestAns {
+  font-size: var(--zd_font_size12);
+}
+
+.draftText {
+  color: var(--zdt_threadList_Draft_text);
+}
+
+.forumText {
+  color: var(--zdt_conversationList_secondaryText);
+}
+
+.bestAns {
+  color: var(--zdt_threadList_BestAns_text);
+}
+
+.time {
+  font-size: var(--zd_font_size12);
+  color: var(--zdt_conversationList_time_text);
+}
+
+.recipientsCont {
+  line-height: 0;
+  color: var(--zdt_threadList_secondaryText);
+  border: 1px solid var(--zdt_threadList_recipient_border);
+  padding: var(--zd_size2);
+  border-radius: 1px;
+  cursor: pointer;
+}
+
+.recipientsCont:hover {
+  color: var(--zdt_threadList_secondaryText_hover);
+  border: 1px solid var(--zdt_threadList_recipient_border_hover);
+}
+
+[dir=ltr] .recipientsHide {
+  transform: rotate(-90deg);
+}
+
+[dir=rtl] .recipientsHide {
+  transform: rotate(90deg);
+}
+
+.ratingImage {
+  height: var(--zd_size15);
+  width: var(--zd_size15);
+}
+
+[dir=ltr] .icnBtnSpace {
+  margin-right: var(--zd_size8);
+}
+
+[dir=rtl] .icnBtnSpace {
+  margin-left: var(--zd_size8);
+}
+
+.cntntOvrLd {
+  margin-top: var(--zd_size30);
+}
+
+.cntntOvrLdSpn {
+  color: var(--zdt_threadList_secondaryText);
+  font-size: var(--zd_font_size14);
+}
+
+.cntOvrLdLnk {
+  color: var(--zdt_threadList_link_text);
+  vertical-align: middle;
+  font-size: var(--zd_font_size14);
+}
+
+[dir=ltr] .cntOvrLdLnk {
+  margin-left: var(--zd_size2);
+}
+
+[dir=rtl] .cntOvrLdLnk {
+  margin-right: var(--zd_size2);
+}
+
+.showVisitor,
+.hideVisitor,
+.response {
+  text-decoration: underline;
+  color: var(--zdt_threadList_secondaryText);
+}
+
+.showVisitor:hover,
+.hideVisitor:hover,
+.response:hover {
+  text-decoration: none;
+  color: var(--zdt_threadList_secondaryText_hover);
+}
+
+.quotedIcon {
+  color: var(--zdt_threadList_expand_icon);
+  cursor: pointer;
+}
+
+.quotedIcon:hover {
+  color: var(--zdt_threadList_secondaryText);
+}
+
+.quotedIcon.isOpened {
+  color: var(--zdt_threadList_expand_icon_active);
+}
+
+.quote {
+  margin: var(--zd_size15);
+}
+
+.visitorInfo {
+  margin: var(--zd_size20) 0;
+}
+
+.metaText {
+  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+  cursor: pointer;
+}
+
+.subjectWrapper {
+  margin-top: var(--zd_size11);
+}
+
+.delivered, .readByAll, .read, .failed {
+  padding: 0 var(--zd_size2);
+}
+
+[dir=ltr] .delivered, [dir=ltr] .readByAll, [dir=ltr] .read, [dir=ltr] .failed {
+  margin-left: var(--zd_size4);
+}
+
+[dir=rtl] .delivered, [dir=rtl] .readByAll, [dir=rtl] .read, [dir=rtl] .failed {
+  margin-right: var(--zd_size4);
+}
+
+.delivered:hover {
+  background-color: var(--zdt_readReceipts_statusIcon_grey_bg);
+}
+
+.readByAll {
+  color: var(--zdt_readReceipts_statusIcon_green)
+}
+
+.readByAll:hover {
+  background-color: var(--zdt_readReceipts_statusIcon_green_bg);
+}
+
+.read {
+  color: var(--zdt_readReceipts_statusIcon_blue)
+}
+
+.read:hover {
+  background-color: var(--zdt_readReceipts_statusIcon_blue_bg);
+}
+
+.failed {
+  color: var(--zdt_readReceipts_statusIcon_red)
+}
+
+.failed:hover {
+  background-color: var(--zdt_readReceipts_statusIcon_red_bg);
+}
+
+.threadWrapper {
+  height: 100%;
+}
+
+.expanded {
+  height: calc(100% - calc(var(--threadListMargin) * 2));
+}
+
+.navigationArrow {
+  color: var(--zdt_threadList_recipient_border)
+}
+
+.navigationArrow:hover {
+  color: var(--zdt_threadList_recipient_border_hover)
+}
+
+[dir=ltr] .upArrow {
+  transform: rotate(180deg);
+  margin-right: var(--zd_size10);
+}
+
+[dir=rtl] .upArrow {
+  transform: rotate(-180deg);
+  margin-left: var(--zd_size10);
+}

package/es/layout/List/ThreadsList/ThreadListItemFromTab.module.css

@@ -0,0 +1,35 @@
+.listWrapper,
+.mobileListWrapper {
+    letter-spacing: 0.2px;
+    transition: var(--zd_transition3)
+}.listWrapper, .mobileListWrapper {
+    padding-top: var(--zd_size12);
+    padding-bottom: var(--zd_size12);
+    margin: var(--zd_size8);
+    border-radius: var(--zd_size4)
+}
+[dir=ltr] .mobileListWrapper {
+    padding-left: var(--zd_size16);
+    padding-right: var(--zd_size16);
+}
+[dir=rtl] .mobileListWrapper {
+    padding-right: var(--zd_size16);
+    padding-left: var(--zd_size16);
+}
+[dir=ltr] .listWrapper {
+    padding-left: var(--zd_size20);
+    padding-right: var(--zd_size16);
+}
+[dir=rtl] .listWrapper {
+    padding-right: var(--zd_size20);
+    padding-left: var(--zd_size16);
+}
+[dir=ltr] .chnlIcn {
+    margin-right: var(--zd_size14);
+}
+[dir=rtl] .chnlIcn {
+  margin-left: var(--zd_size14);
+}
+.lineSpace {
+  margin-top: var(--zd_size4)
+}

package/es/layout/List/ThreadsList/ThreadListItemFromTabUI.js

@@ -0,0 +1,282 @@
+import React from 'react';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import VelocityAnimation from '@zohodesk/components/es/VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import tabStyle from './ThreadListItemFromTab.module.css';
+import commonTabStyle from '../common/SubTabListItemTabCommon.module.css';
+import commonIconStyle from '../common/twoToneIconColor.module.css';
+import commonThreadStyle from './ThreadListItemCommon.module.css';
+export default function ThreadListItemFromTabUI(props) {
+  const {
+    getAvatar,
+    getName,
+    getSentiment,
+    getDraft,
+    getTag,
+    getResponseDeleted,
+    getDraftWithTime,
+    getReadStatus,
+    getBestAnswer,
+    getViaChannel,
+    getViaCustomChannel,
+    getRecipentsIcon,
+    getKeyWords,
+    getRatingImg,
+    getChannelInfo,
+    getAttachmentIcon,
+    getMoreDropdown,
+    getRecipents,
+    getAudioMsg,
+    getTruncateOption,
+    getQuotedOption,
+    getQuotedContent,
+    getVisitorOption,
+    getVisitorInfo,
+    getSummary,
+    getContent,
+    getAttachment,
+    isPeekView,
+    isPopupOpen,
+    isNightMode,
+    dataId,
+    id,
+    onThreadClick,
+    threadRef,
+    onContainerCLick,
+    containerRef,
+    customList,
+    authorType,
+    isRecipients,
+    channel,
+    showVisitor,
+    needToShowContent,
+    hasTelephonyAudio,
+    isThreadOpened,
+    showQuotedContent,
+    getReadReceiptsLookup,
+    isMobile,
+    needReadStatus,
+    getImScrollComp,
+    ViewInLightDarkBg,
+    getTheme,
+    children
+  } = props;
+  let invertClass = isNightMode ? ViewInLightDarkBg ? commonThreadStyle.whiteBg : commonThreadStyle.invert : '';
+  return /*#__PURE__*/React.createElement("div", {
+    "data-desk-mode": ViewInLightDarkBg ? 'default' : '',
+    "data-desk-theme": ViewInLightDarkBg ? getTheme : '',
+    className: `${commonTabStyle.wrapper}
+                ${isMobile ? tabStyle.mobileListWrapper : tabStyle.listWrapper}
+                    ${commonThreadStyle.normal}
+                    ${!isThreadOpened ? commonThreadStyle.threadShrink : ''}
+                    ${customList}`,
+    "data-id": dataId,
+    key: id,
+    id: id,
+    ref: threadRef,
+    "data-a11y-focus": !isThreadOpened
+  }, children ? children : null, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false
+  }, getAvatar ? /*#__PURE__*/React.createElement(Box, {
+    className: commonThreadStyle.avatarWrapper
+  }, getAvatar({
+    size: 'medium'
+  })) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    dataId: "secThreadPanel",
+    onClick: onThreadClick,
+    className: commonTabStyle.pointer
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: `${commonTabStyle.pointer} ${commonThreadStyle.icnBtnSpace}`
+  }, getName ? /*#__PURE__*/React.createElement(React.Fragment, null, getName({
+    'is-dot': 'true',
+    className: `${commonThreadStyle.agentName} ${authorType === 'AGENT' ? commonThreadStyle.agentNameHover : ''} ${commonTabStyle.dotted}`
+  })) : null, getSentiment ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getSentiment({
+    iconSize: '9'
+  }))) : null, getBestAnswer ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "Best Answer",
+    className: `${commonThreadStyle.bestAns} ${commonThreadStyle.dotted}`
+  }, getBestAnswer())) : null, getViaChannel ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: commonThreadStyle.forumText
+  }, getViaChannel({
+    className: `${commonThreadStyle.primaryText} ${commonThreadStyle.dotted}`
+  }))) : null, getViaCustomChannel ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: commonThreadStyle.forumText
+  }, getViaCustomChannel({
+    className: `${commonThreadStyle.primaryText} ${commonThreadStyle.dotted}`
+  }))) : null)), getRatingImg ? getRatingImg({
+    className: `${commonThreadStyle.ratingImage} ${commonThreadStyle.icnBtnSpace}`
+  }) : null, getChannelInfo ? getChannelInfo({
+    iconClass: `${tabStyle.chnlIcn} ${commonIconStyle.primary}`
+  }) : null, getAttachmentIcon ? /*#__PURE__*/React.createElement(Box, null, getAttachmentIcon({
+    innerProps: {
+      className: commonThreadStyle.attachCount
+    },
+    wrapperProps: {
+      className: ` ${commonThreadStyle.attachIconWrapper} ${commonThreadStyle.icnBtnSpace}`
+    }
+  })) : null, getMoreDropdown ? /*#__PURE__*/React.createElement(Box, {
+    className: `${commonTabStyle.posRel} `
+  }, getMoreDropdown()) : null), /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    dataId: "secThreadPanel",
+    onClick: onThreadClick,
+    className: commonTabStyle.pointer
+  }, getTag ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "privateThread"
+  }, getTag())) : null, getDraft ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "draftThread",
+    className: `${commonThreadStyle.draftText} ${commonThreadStyle.dotted}`
+  }, getDraft())) : null, getResponseDeleted ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: `${commonThreadStyle.forumText} ${commonThreadStyle.dotted}`
+  }, getResponseDeleted())) : null, getDraftWithTime ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getDraftWithTime({
+    className: commonThreadStyle.time
+  }))) : null, needReadStatus ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getReadStatus({
+    readAllClass: {
+      iconClass: commonThreadStyle.readByAll
+    },
+    readToClass: {
+      iconClass: commonThreadStyle.read
+    },
+    deliveredClass: {
+      iconClass: commonThreadStyle.delivered
+    },
+    failedClass: {
+      iconClass: commonThreadStyle.failed
+    }
+  }))) : null, getRecipentsIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: `${commonTabStyle.dot}`
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    "is-dot": "true"
+  }, getRecipentsIcon({
+    className: `${commonThreadStyle.recipientsCont} ${!isRecipients ? commonThreadStyle.recipientsHide : ''}`
+  }))) : null, getKeyWords ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    "is-dot": "true"
+  }, getKeyWords())) : null, getImScrollComp ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: `${commonTabStyle.dot} ${commonTabStyle.visibleOnHover}`
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    "is-dot": "true",
+    className: commonTabStyle.visibleOnHover
+  }, getImScrollComp({
+    downArrow: {
+      iconClass: `${commonThreadStyle.navigationArrow} ${commonThreadStyle.upArrow}`
+    },
+    upArrow: {
+      iconClass: commonThreadStyle.navigationArrow
+    }
+  }))) : null))), getRecipents ? getRecipents() : null, /*#__PURE__*/React.createElement("div", {
+    onClick: onContainerCLick,
+    ref: containerRef,
+    className: commonThreadStyle.subjectWrapper
+  }, getAudioMsg ? getAudioMsg() : null, /*#__PURE__*/React.createElement(VelocityAnimation, {
+    name: "slideDown",
+    isActive: needToShowContent && !hasTelephonyAudio
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-id": "content",
+    className: invertClass
+  }, getContent ? getContent({
+    className: commonThreadStyle.thrdPlain
+  }) : null, getTruncateOption ? /*#__PURE__*/React.createElement("div", {
+    className: commonThreadStyle.cntntOvrLd
+  }, getTruncateOption({
+    textProps: {
+      className: commonThreadStyle.cntntOvrLdSpn
+    },
+    linkProps: {
+      className: commonThreadStyle.cntOvrLdLnk
+    }
+  })) : null, getQuotedOption ? getQuotedOption({
+    textProps: {
+      className: commonThreadStyle.response
+    },
+    iconProps: {
+      iconClass: `${commonThreadStyle.quotedIcon} ${showQuotedContent ? commonThreadStyle.isOpened : ''}`
+    }
+  }) : null, getQuotedContent ? getQuotedContent({
+    className: `${commonThreadStyle.thrdPlain} ${channel === 'FEEDBACK' ? commonThreadStyle.quote : ''}`
+  }) : null, getVisitorOption ? /*#__PURE__*/React.createElement("div", {
+    className: commonThreadStyle.visitorInfo
+  }, getVisitorOption({
+    wrapperProps: {
+      className: !showVisitor ? commonThreadStyle.showVisitor : ''
+    },
+    innerProps: {
+      className: commonThreadStyle.hideVisitor
+    }
+  })) : null, getVisitorInfo ? getVisitorInfo({
+    className: `${invertClass} ${commonThreadStyle.thrdPlain} ${commonThreadStyle.thrdPlainContent}`
+  }) : null)), getSummary ? getSummary({
+    className: `${invertClass} ${commonThreadStyle.thrdPlain} ${commonThreadStyle.thrdPlainContent} ${needToShowContent ? '' : commonThreadStyle.metaText}`
+  }) : null, getAttachment ? getAttachment({
+    customWrapperProps: {
+      className: commonThreadStyle.attachmentWrapper
+    },
+    customAttahmentProps: {
+      size: 'medium'
+    }
+  }) : null), getReadReceiptsLookup ? getReadReceiptsLookup({
+    readAllClass: {
+      iconClass: commonThreadStyle.readByAll
+    },
+    readToClass: {
+      iconClass: commonThreadStyle.read
+    },
+    deliveredClass: {
+      iconClass: commonThreadStyle.delivered
+    },
+    failedClass: {
+      iconClass: commonThreadStyle.failed
+    }
+  }) : null);
+}

package/es/layout/List/ThreadsList/ThreadListItemWeb.module.css

@@ -0,0 +1,35 @@
+.listWrapper,
+.peekListWrapper {
+    letter-spacing: 0.2px;
+    transition: var(--zd_transition3)
+}.listWrapper, .peekListWrapper {
+    padding-top: var(--zd_size15);
+    padding-bottom: var(--zd_size9);
+    margin: var(--zd_size6);
+    border-radius: var(--zd_size4)
+}
+[dir=ltr] .peekListWrapper {
+    padding-left: var(--zd_size35);
+    padding-right: var(--zd_size23);
+}
+[dir=rtl] .peekListWrapper {
+    padding-right: var(--zd_size35);
+    padding-left: var(--zd_size23);
+}
+[dir=ltr] .listWrapper {
+    padding-left: var(--zd_size58);
+    padding-right: var(--zd_size23);
+}
+[dir=rtl] .listWrapper {
+    padding-right: var(--zd_size58);
+    padding-left: var(--zd_size23);
+}
+.chnlIcn {
+  display: block
+}
+[dir=ltr] .chnlIcn {
+    margin-right: var(--zd_size14)
+}
+[dir=rtl] .chnlIcn {
+  margin-left: var(--zd_size14)
+}