@zohodesk/dot 1.0.0-temp-193.5 → 1.0.0-temp-193.7

package/es/form/layout/Field/Field.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Field.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Field.module.css';
 export default class Field extends Component {
   render() {
     let {

package/es/form/layout/Field/__tests__/Field.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Field from "../Field";
+import Field from '../Field';
 describe('Field', () => {
   test('rendering the defult props', () => {
     const {

package/es/form/layout/Section/Section.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { propTypes } from "./props/propTypes";
-import style from "./ModuleFormSection.module.css";
+import { propTypes } from './props/propTypes';
+import style from './ModuleFormSection.module.css';
 export default class Section extends Component {
   constructor(props) {
     super(props);

package/es/form/layout/Section/__tests__/Section.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Section from "../Section";
+import Section from '../Section';
 describe('Section', () => {
   test('rendering the defult props', () => {
     const {

package/es/form/layout/index.js

@@ -1,2 +1,2 @@
-export { default as Field } from "./Field/Field";
-export { default as Section } from "./Section/Section";
+export { default as Field } from './Field/Field';
+export { default as Section } from './Section/Section';

package/es/index.js

@@ -1,51 +1,51 @@
-export { default as ActionButton } from "./ActionButton/ActionButton";
-export { default as AutoClose } from "./actions/AutoClose";
-export * from "./alert";
-export { default as AlphabeticList } from "./AlphabeticList/AlphabeticList";
-export { default as Attachment } from "./Attachment/Attachment";
-export { default as AttachmentViewer } from "./AttachmentViewer/AttachmentViewer";
-export * from "./avatar";
-export { default as ChannelIcon } from "./ChannelIcon/ChannelIcon";
-import * as _Drawer from "./Drawer/Drawer";
+export { default as ActionButton } from './ActionButton/ActionButton';
+export { default as AutoClose } from './actions/AutoClose';
+export * from './alert';
+export { default as AlphabeticList } from './AlphabeticList/AlphabeticList';
+export { default as Attachment } from './Attachment/Attachment';
+export { default as AttachmentViewer } from './AttachmentViewer/AttachmentViewer';
+export * from './avatar';
+export { default as ChannelIcon } from './ChannelIcon/ChannelIcon';
+import * as _Drawer from './Drawer/Drawer';
 export { _Drawer as Drawer };
-export { default as ToggleDropDown } from "./dropdown/ToggleDropDown/ToggleDropDown";
-export { default as CommonEmptyState } from "./emptystate/CommonEmptyState/CommonEmptyState";
-export { default as EditionPage } from "./emptystate/EditionPage/EditionPage";
-import * as _errorstate from "./errorstate";
+export { default as ToggleDropDown } from './dropdown/ToggleDropDown/ToggleDropDown';
+export { default as CommonEmptyState } from './emptystate/CommonEmptyState/CommonEmptyState';
+export { default as EditionPage } from './emptystate/EditionPage/EditionPage';
+import * as _errorstate from './errorstate';
 export { _errorstate as errorstate };
-export { default as ExternalLink } from "./ExternalLink/ExternalLink";
-export { default as FlipCard } from "./FlipCard/FlipCard";
-import * as _fields from "./form/fields";
+export { default as ExternalLink } from './ExternalLink/ExternalLink';
+export { default as FlipCard } from './FlipCard/FlipCard';
+import * as _fields from './form/fields';
 export { _fields as fields };
-import * as _fields_layout from "./form/layout/";
+import * as _fields_layout from './form/layout/';
 export { _fields_layout as fields_layout };
-export { default as FormAction } from "./FormAction/FormAction";
-export { default as FreezeLayer } from "./FreezeLayer/FreezeLayer";
-export { default as IconButton } from "./IconButton/IconButton";
-export { default as Image } from "./Image/Image";
-export { default as ImportantNotes } from "./ImportantNotes/ImportantNotes";
-import * as _SetupDetailLayout from "./layout/SetupDetailLayout";
+export { default as FormAction } from './FormAction/FormAction';
+export { default as FreezeLayer } from './FreezeLayer/FreezeLayer';
+export { default as IconButton } from './IconButton/IconButton';
+export { default as Image } from './Image/Image';
+export { default as ImportantNotes } from './ImportantNotes/ImportantNotes';
+import * as _SetupDetailLayout from './layout/SetupDetailLayout';
 export { _SetupDetailLayout as SetupDetailLayout };
-import * as _SubtabLayout from "./layout/SubtabLayout";
+import * as _SubtabLayout from './layout/SubtabLayout';
 export { _SubtabLayout as SubtabLayout };
-export { default as Link } from "./Link/Link";
-import * as _list from "./list";
+export { default as Link } from './Link/Link';
+import * as _list from './list';
 export { _list as list };
-export { default as Loader } from "./Loader/Loader";
-export { default as Message, MessageUI, MessageNew } from "./Message/Message";
-export { default as MessageBanner } from "./MessageBanner/MessageBanner";
-export { default as NewStar } from "./NewStar/NewStar";
-export { default as PlusIcon } from "./PlusIcon/PlusIcon";
-import * as _Provider from "./Provider/Config";
+export { default as Loader } from './Loader/Loader';
+export { default as Message, MessageUI, MessageNew } from './Message/Message';
+export { default as MessageBanner } from './MessageBanner/MessageBanner';
+export { default as NewStar } from './NewStar/NewStar';
+export { default as PlusIcon } from './PlusIcon/PlusIcon';
+import * as _Provider from './Provider/Config';
 export { _Provider as Provider };
-import * as _lookup from "./lookup";
+import * as _lookup from './lookup';
 export { _lookup as lookup };
-export { default as Separator } from "./Separator/Separator";
-import * as _setup from "./setup";
+export { default as Separator } from './Separator/Separator';
+import * as _setup from './setup';
 export { _setup as setup };
-import * as _svg from "./svg";
+import * as _svg from './svg';
 export { _svg as svg };
-export { default as ToastMessage } from "./ToastMessage/ToastMessage";
-export { default as Upload } from "./Upload/Upload";
-import * as _version from "./version2";
+export { default as ToastMessage } from './ToastMessage/ToastMessage';
+export { default as Upload } from './Upload/Upload';
+import * as _version from './version2';
 export { _version as version2 };

package/es/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from "./props/defaultProps";
-import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from "./props/propTypes";
+import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from './props/defaultProps';
+import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Icon } from '@zohodesk/icons';
-import style from "./SetupDetailLayout.module.css";
+import style from './SetupDetailLayout.module.css';
 export default class SetupDetailLayout extends React.Component {
   constructor(props) {
     super(props);

package/es/layout/SetupDetailLayout/__tests__/SetupDetailLayout.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import SetupDetailLayout from "../SetupDetailLayout";
+import SetupDetailLayout from '../SetupDetailLayout';
 describe('SetupDetailLayout', () => {
   test('rendering the defult props', () => {
     const {

package/es/layout/SetupDetailLayout/index.js

@@ -1,4 +1,4 @@
-export { default as SetupDetailLayout } from "./SetupDetailLayout";
-export { SetupHeader } from "./SetupDetailLayout";
-export { SetupFooter } from "./SetupDetailLayout";
-export { SetupContent } from "./SetupDetailLayout";
+export { default as SetupDetailLayout } from './SetupDetailLayout';
+export { SetupHeader } from './SetupDetailLayout';
+export { SetupFooter } from './SetupDetailLayout';
+export { SetupContent } from './SetupDetailLayout';

package/es/layout/SubtabLayout/SubtabLayout.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from "./props/propTypes";
-import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from "./props/defaultProps";
+import { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from './props/propTypes';
+import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from './props/defaultProps';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import PlusIcon from "../../PlusIcon/PlusIcon";
-import style from "./SubtabLayout.module.css";
+import PlusIcon from '../../PlusIcon/PlusIcon';
+import style from './SubtabLayout.module.css';
 export class SubtabHeader extends React.Component {
   render() {
     let {

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -1,165 +1,165 @@
-.varClass {
-  --borderColor: var(--zdt_subtablayout_border);
-}
-
-.tabHead,
-.shadowStyle {
-  position: relative;
-  composes: varClass;
-}
-
-.tabHead, .shadowStyle {
-  background: var(--zdt_subtablayout_tabhead_bg);
-}
-
-[dir=ltr] .left {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .left {
-  margin-left: var(--zd_size15) ;
-}
-
-.plusIconLine {
-  position: relative;
-  z-index: 2;
-}
-
-.plusIconLine::before {
-  position: absolute;
-  content: '';
-  width: var(--zd_size1) ;
-  height: var(--zd_size28) ;
-  top: var(--zd_size38) ;
-  z-index: -1;
-  background: var(--zdt_subtablayout_plusicon_bg);
-}
-
-[dir=ltr] .plusIconLine::before {
-  left: var(--zd_size20) ;
-}
-
-[dir=rtl] .plusIconLine::before {
-  right: var(--zd_size20) ;
-}
-
-.primary_borderStyle, .secondary_borderStyle {
-  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
-}
-
-.tertiary_borderStyle {
-  border-bottom: 1px solid var(--borderColor);
-}
-
-.shadowStyle::before {
-  bottom: 0 ;
-  content: '';
-  position: absolute;
-  top: var(--zd_size20) ;
-  z-index: -1;
-  box-shadow: var(--zd_bs_subtablayout_shadow);
-  border-radius: 100px/10px;
-}
-
-[dir=ltr] .shadowStyle::before {
-  left: var(--zd_size50) ;
-  right: var(--zd_size50) ;
-}
-
-[dir=rtl] .shadowStyle::before {
-  right: var(--zd_size50) ;
-  left: var(--zd_size50) ;
-}
-
-.aside {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.title {
-  color: var(--zdt_subtablayout_title_text);
-  font-size: var(--zd_font_size15) ;
-}
-
-.label {
-  font-size: var(--zd_font_size12) ;
-  color: var(--zdt_subtablayout_label_text);
-}
-
-.primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
-  padding-top: var(--zd_size27) ;
-  padding-bottom: var(--zd_size26) ;
-}
-
-[dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
-  padding-left: var(--zd_size25) ;
-}
-
-[dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
-  padding-right: var(--zd_size25) ;
-}
-
-[dir=ltr] .primary, [dir=ltr] .primary_peek {
-  padding-right: var(--zd_size25) ;
-}
-
-[dir=rtl] .primary, [dir=rtl] .primary_peek {
-  padding-left: var(--zd_size25) ;
-}
-
-[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
-  padding-right: var(--zd_size115) ;
-}
-
-[dir=rtl] .secondary, [dir=rtl] .secondary_peek {
-  padding-left: var(--zd_size115) ;
-}
-
-[dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
-  padding-right: var(--zd_size25) ;
-}
-
-[dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
-  padding-left: var(--zd_size25) ;
-}
-
-[dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
-  padding-right: var(--zd_size115) ;
-}
-
-[dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
-  padding-left: var(--zd_size115) ;
-}
-
-.tertiary,
-.tertiary_peek {
-  height: var(--zd_size50) ;
-}
-
-.tertiary, .tertiary_detailFooter {
-  padding: 0 var(--zd_size65) ;
-}
-
-.tertiary_peek, .tertiary_peekFooter {
-  padding: 0 var(--zd_size42) ;
-}
-
-.cursor {
-  cursor: pointer;
-}
-
-.footer {
-  composes: varClass;
-  border-top: 1px solid var(--borderColor);
-}
-
-.medium {
-  height: var(--zd_size40) ;
-}
-
-.large {
-  height: var(--zd_size45) ;
-}
-
-.xlarge {
-  height: var(--zd_size50) ;
+.varClass {
+  --borderColor: var(--zdt_subtablayout_border);
+}
+
+.tabHead,
+.shadowStyle {
+  position: relative;
+  composes: varClass;
+}
+
+.tabHead, .shadowStyle {
+  background: var(--zdt_subtablayout_tabhead_bg);
+}
+
+[dir=ltr] .left {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .left {
+  margin-left: var(--zd_size15) ;
+}
+
+.plusIconLine {
+  position: relative;
+  z-index: 2;
+}
+
+.plusIconLine::before {
+  position: absolute;
+  content: '';
+  width: var(--zd_size1) ;
+  height: var(--zd_size28) ;
+  top: var(--zd_size38) ;
+  z-index: -1;
+  background: var(--zdt_subtablayout_plusicon_bg);
+}
+
+[dir=ltr] .plusIconLine::before {
+  left: var(--zd_size20) ;
+}
+
+[dir=rtl] .plusIconLine::before {
+  right: var(--zd_size20) ;
+}
+
+.primary_borderStyle, .secondary_borderStyle {
+  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
+}
+
+.tertiary_borderStyle {
+  border-bottom: 1px solid var(--borderColor);
+}
+
+.shadowStyle::before {
+  bottom: 0 ;
+  content: '';
+  position: absolute;
+  top: var(--zd_size20) ;
+  z-index: -1;
+  box-shadow: var(--zd_bs_subtablayout_shadow);
+  border-radius: 100px/10px;
+}
+
+[dir=ltr] .shadowStyle::before {
+  left: var(--zd_size50) ;
+  right: var(--zd_size50) ;
+}
+
+[dir=rtl] .shadowStyle::before {
+  right: var(--zd_size50) ;
+  left: var(--zd_size50) ;
+}
+
+.aside {
+  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.title {
+  color: var(--zdt_subtablayout_title_text);
+  font-size: var(--zd_font_size15) ;
+}
+
+.label {
+  font-size: var(--zd_font_size12) ;
+  color: var(--zdt_subtablayout_label_text);
+}
+
+.primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
+  padding-top: var(--zd_size27) ;
+  padding-bottom: var(--zd_size26) ;
+}
+
+[dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=ltr] .primary, [dir=ltr] .primary_peek {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=rtl] .primary, [dir=rtl] .primary_peek {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
+  padding-right: var(--zd_size115) ;
+}
+
+[dir=rtl] .secondary, [dir=rtl] .secondary_peek {
+  padding-left: var(--zd_size115) ;
+}
+
+[dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
+  padding-right: var(--zd_size115) ;
+}
+
+[dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
+  padding-left: var(--zd_size115) ;
+}
+
+.tertiary,
+.tertiary_peek {
+  height: var(--zd_size50) ;
+}
+
+.tertiary, .tertiary_detailFooter {
+  padding: 0 var(--zd_size65) ;
+}
+
+.tertiary_peek, .tertiary_peekFooter {
+  padding: 0 var(--zd_size42) ;
+}
+
+.cursor {
+  cursor: pointer;
+}
+
+.footer {
+  composes: varClass;
+  border-top: 1px solid var(--borderColor);
+}
+
+.medium {
+  height: var(--zd_size40) ;
+}
+
+.large {
+  height: var(--zd_size45) ;
+}
+
+.xlarge {
+  height: var(--zd_size50) ;
 }

package/es/layout/SubtabLayout/__tests__/SubtabLayout.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import SubtabLayout from "../SubtabLayout";
+import SubtabLayout from '../SubtabLayout';
 describe('SubtabLayout', () => {
   test('rendering the defult props', () => {
     const {

package/es/layout/SubtabLayout/index.js

@@ -1,4 +1,4 @@
-export { default as SubtabLayout } from "./SubtabLayout";
-export { SubtabHeader } from "./SubtabLayout";
-export { SubtabContent } from "./SubtabLayout";
-export { SubtabFooter } from "./SubtabLayout";
+export { default as SubtabLayout } from './SubtabLayout';
+export { SubtabHeader } from './SubtabLayout';
+export { SubtabContent } from './SubtabLayout';
+export { SubtabFooter } from './SubtabLayout';

package/es/list/AvatarFlip/AvatarFlip.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import FlipCard from "../../FlipCard/FlipCard";
-import style from "./AvatarFlip.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import FlipCard from '../../FlipCard/FlipCard';
+import style from './AvatarFlip.module.css';
 export default class AvatarFlip extends Component {
   render() {
     let {

package/es/list/AvatarFlip/__tests__/AvatarFlip.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AvatarFlip from "../AvatarFlip";
+import AvatarFlip from '../AvatarFlip';
 describe('AvatarFlip', () => {
   test('rendering the defult props', () => {
     const {

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { propTypes } from "./props/propTypes";
-import style from "./BluePrintStatus.module.css";
+import { propTypes } from './props/propTypes';
+import style from './BluePrintStatus.module.css';
 import { Icon } from '@zohodesk/icons';
 export default class BluePrintStatus extends React.Component {
   constructor(props) {

package/es/list/BluePrintStatus/__tests__/BluePrintStatus.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import BluePrintStatus from "../BluePrintStatus";
+import BluePrintStatus from '../BluePrintStatus';
 describe('BluePrintStatus', () => {
   test('rendering the defult props', () => {
     const {

package/es/list/Comment/Comment.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/lib/semantic/Button/Button';
-import style from "./Comment.module.css";
+import style from './Comment.module.css';
 export default class Comment extends Component {
   constructor(props) {
     super(props);

package/es/list/Comment/Comment.module.css

@@ -1,29 +1,29 @@
-.varClass {
-  --icon_color: var(--zdt_comment_iconText);
-}
-.container {
-  composes: varClass;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
-  color: var(--icon_color);
-  padding: 0 var(--zd_size2) ;
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_comment_hover_iconText);
-}
-.count {
-  position: absolute;
-  top: var(--zd_size1) ;
-  font-size: var(--zd_font_size9) ;
-  text-align: center;
-}
-[dir=ltr] .count {
-  left: 100% ;
-}
-[dir=rtl] .count {
-  right: 100% ;
-}
-.commentIcon {
-  font-size: var(--zd_font_size13) ;
-}
+.varClass {
+  --icon_color: var(--zdt_comment_iconText);
+}
+.container {
+  composes: varClass;
+  composes: inlineBlockMiddle from '../listCommon.module.css';
+  position: relative;
+  color: var(--icon_color);
+  padding: 0 var(--zd_size2) ;
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_comment_hover_iconText);
+}
+.count {
+  position: absolute;
+  top: var(--zd_size1) ;
+  font-size: var(--zd_font_size9) ;
+  text-align: center;
+}
+[dir=ltr] .count {
+  left: 100% ;
+}
+[dir=rtl] .count {
+  right: 100% ;
+}
+.commentIcon {
+  font-size: var(--zd_font_size13) ;
+}