@zohodesk/dot 1.9.17 → 1.9.19

package/es/list/Icons/AddNewIcon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AddNewIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class AddNewIcon extends React.Component {
@@ -14,7 +15,7 @@ export default class AddNewIcon extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`,
+      className: cn(`${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle

package/es/list/Icons/CompleteIcon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CompleteIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class CompleteIcon extends React.Component {
@@ -15,7 +16,7 @@ export default class CompleteIcon extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${btnStyle.buttonReset} ${className ? className : ''}`,
+      className: cn(`${style.iconStyle} ${style.blueHover} ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle

package/es/list/Icons/DeleteIcon.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DeleteComponent_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
@@ -15,7 +16,7 @@ export default class DeleteComponent extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.redHover} ${btnStyle.buttonReset} ${className ? className : ''} `,
+      className: cn(`${style.iconStyle} ${style.redHover} ${btnStyle.buttonReset} ${className ? className : ''} `),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

package/es/list/Icons/EditIcon.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EditIcon_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
@@ -15,7 +16,7 @@ export default class EditIcon extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`,
+      className: cn(`${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

package/es/list/Icons/FloatingIcons.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { FloatingIcons_defaultProps } from "./props/defaultProps";
 import { FloatingIcons_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 export default class FloatingIcons extends Component {
   constructor(props) {
@@ -14,7 +15,7 @@ export default class FloatingIcons extends Component {
     } = this.props;
     const icons = React.Children.toArray(children).filter(o => o);
     return /*#__PURE__*/React.createElement("span", {
-      className: `${style.container}`
+      className: cn(`${style.container}`)
     }, icons.map(child => /*#__PURE__*/React.cloneElement(child, {
       iconClass
     })));
@@ -22,9 +23,4 @@ export default class FloatingIcons extends Component {
 
 }
 FloatingIcons.propTypes = FloatingIcons_propTypes;
-FloatingIcons.defaultProps = FloatingIcons_defaultProps; // if (__DOCS__) {
-//   FloatingIcons.docs = {
-//     folderName: 'List',
-//     componentGroup: 'FloatingIcons'
-//   };
-// }
+FloatingIcons.defaultProps = FloatingIcons_defaultProps;

package/es/list/Icons/Icons.module.css

@@ -3,10 +3,10 @@
   composes: inlineFlex from '../listCommon.module.css';
 }
 .iconStyle {
+  composes: d-cursor-pointer from global;
   color: var(--zdt_icons_default);
   width: var(--zd_size33) ;
   padding: 0 var(--zd_size8) ;
-  cursor: pointer;
 }
 .blueHover:hover {
   color: var(--zdt_icons_hover_blue);

package/es/list/Icons/ReadUnreadIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ReadUnreadIcon_defaultProps } from "./props/defaultProps";
 import { ReadUnreadIcon_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export default class ReadUnreadIcon extends React.Component {
@@ -18,7 +19,7 @@ export default class ReadUnreadIcon extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`,
+      className: cn(`${style.iconStyle} ${style.blueHover}  ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

package/es/list/Icons/SmartIcon.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { SmartIcon_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Icons.module.css";
 import { Icon } from '@zohodesk/icons';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
@@ -14,7 +15,7 @@ export default class SmartIcon extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${btnStyle.buttonReset} ${className ? className : ''}`,
+      className: cn(`${style.iconStyle} ${style.blueHover} ${btnStyle.buttonReset} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,

package/es/list/Icons/__tests__/__snapshots__/AddNewIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AddNewIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`AddNewIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-addTickets"
+      class="zd_font_icons ff icon-addTickets basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/CompleteIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CompleteIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`CompleteIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-checkbox"
+      class="zd_font_icons ff icon-checkbox basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/DeleteIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DeleteIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`DeleteIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-delete"
+      class="zd_font_icons ff icon-delete basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/EditIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`EditIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`EditIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-edit"
+      class="zd_font_icons ff icon-edit basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/FloatingIcons.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`FloatingIcons rendering the defult props 1`] = `
 <DocumentFragment>

package/es/list/Icons/__tests__/__snapshots__/ReadUnreadIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ReadUnreadIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`ReadUnreadIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-unread"
+      class="zd_font_icons ff icon-unread basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/Icons/__tests__/__snapshots__/SmartIcon.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SmartIcon rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`SmartIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-peek"
+      class="zd_font_icons ff icon-peek basic d-inline-block d-align-middle"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/list/ListLayout/ListLayout.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { ListLayout_defaultProps } from "./props/defaultProps";
 import { ListLayout_propTypes, Column_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
+import { cn } from "@dot-system/css-utility";
 import style from "./ListLayout.module.css";
 export default class ListLayout extends Component {
   constructor(props) {
@@ -36,7 +37,7 @@ export default class ListLayout extends Component {
       ariaSetsize
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} ${containerClass} `,
+      className: cn(`${style.container} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} ${containerClass} `),
       onClick: onClick,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
@@ -75,9 +76,4 @@ export class Column extends Component {
   }
 
 }
-Column.propTypes = Column_propTypes; // if (__DOCS__) {
-//   ListLayout.docs = {
-//     folderName: 'List',
-//     componentGroup: 'ListLayout'
-//   };
-// }
+Column.propTypes = Column_propTypes;

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

@@ -3,8 +3,8 @@
 }
 
 .container {
-  position: relative;
   composes: varClass;
+  composes: d-relative from global;
 }
 
 .listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
@@ -16,7 +16,7 @@
 }
 
 .cursorPointer {
-  cursor: pointer
+  composes: d-cursor-pointer from global;
 }
 
 /* View */

package/es/list/ListLayout/__tests__/__snapshots__/ListLayout.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListLayout rendering the defult props 1`] = `
 <DocumentFragment>
@@ -10,7 +10,7 @@ exports[`ListLayout rendering the defult props 1`] = `
     role="listitem"
   >
     <div
-      class="flex fullSize row innerContainer"
+      class="d-flex d-h-full d-w-full d-flex-row innerContainer"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"

package/es/list/ListStencils/ListStencils.js

@@ -7,6 +7,7 @@ import { propTypes } from "./props/propTypes";
 import Stencils from '@zohodesk/components/es/Stencils/Stencils';
 /*** CSS ***/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./ListStencils.module.css";
 export default class ListStencils extends Component {
   render() {
@@ -16,27 +17,27 @@ export default class ListStencils extends Component {
       customId
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[listType]}`,
+      className: cn(`${style.container} ${style[listType]}`),
       "data-test-id": testId ? testId + '_listStencils' : null,
       "data-id": customId ? customId + '_listStencils' : null,
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.innerContainer
+      className: cn(style.innerContainer)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.avatar
+      className: cn(style.avatar)
     }, /*#__PURE__*/React.createElement(Stencils, {
       shape: "circle",
       size: listType === 'classic' ? 'large' : listType === 'compact' ? 'medium' : 'small'
     })), /*#__PURE__*/React.createElement("div", {
-      className: style.detailsColumn
+      className: cn(style.detailsColumn)
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.detailsInnerColumn}`
+      className: cn(`${style.detailsInnerColumn}`)
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.primaryRow
+      className: cn(style.primaryRow)
     }, /*#__PURE__*/React.createElement(Stencils, {
       size: "default"
     })), /*#__PURE__*/React.createElement("div", {
-      className: style.secondaryRow
+      className: cn(style.secondaryRow)
     }, /*#__PURE__*/React.createElement(Stencils, {
       size: "medium"
     }))))));
@@ -44,9 +45,4 @@ export default class ListStencils extends Component {
 
 }
 ListStencils.propTypes = propTypes;
-ListStencils.defaultProps = defaultProps; // if (__DOCS__) {
-//   ListStencils.docs = {
-//     folderName: 'List',
-//     componentGroup: 'ListStencils'
-//   };
-// }
+ListStencils.defaultProps = defaultProps;

package/es/list/ListStencils/ListStencils.module.css

@@ -1,6 +1,5 @@
 .container {
-  position: relative;
-  width: 100% ;
+  composes: d-relative d-w-full from global;
   padding-inline: var(--zd_size30) ;
   padding-block:0 ;
 }
@@ -15,8 +14,7 @@
   margin-inline-end: var(--zd_size25) ;
 }
 .detailsColumn {
-  min-height: 0 ;
-  min-width: 0 ;
+  composes: d-min-w-0 d-min-h-0 from global;
 }
 .primaryRow {
   composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/es/common/common.module.css';

package/es/list/ListStencils/__tests__/__snapshots__/ListStencils.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListStencils customId and testId 1`] = `
 <DocumentFragment>

package/es/list/SecondaryText/AccountName.js

@@ -94,9 +94,4 @@ export default class AccountName extends Component {
 
 }
 AccountName.propTypes = AccountName_propTypes;
-AccountName.defaultProps = AccountName_defaultProps; // if (__DOCS__) {
-//   AccountName.docs = {
-//     folderName: 'List',
-//     componentGroup: 'AccountName'
-//   };
-// }
+AccountName.defaultProps = AccountName_defaultProps;

package/es/list/SecondaryText/ContactName.js

@@ -90,9 +90,4 @@ export default class ContactName extends Component {
 
 }
 ContactName.propTypes = ContactName_propTypes;
-ContactName.defaultProps = ContactName_defaultProps; // if (__DOCS__) {
-//   ContactName.docs = {
-//     folderName: 'List',
-//     componentGroup: 'ContactName'
-//   };
-// }
+ContactName.defaultProps = ContactName_defaultProps;

package/es/list/SecondaryText/DepartmentText.js

@@ -29,9 +29,4 @@ export default class DepartmentText extends Component {
   }
 
 }
-DepartmentText.propTypes = DepartmentText_propTypes; // if (__DOCS__) {
-//   DepartmentText.docs = {
-//     folderName: 'List',
-//     componentGroup: 'DepartmentText'
-//   };
-// }
+DepartmentText.propTypes = DepartmentText_propTypes;

package/es/list/SecondaryText/Email.js

@@ -60,9 +60,4 @@ export default class Email extends Component {
 
 }
 Email.propTypes = Email_propTypes;
-Email.defaultProps = Email_defaultProps; // if (__DOCS__) {
-//   Email.docs = {
-//     folderName: 'List',
-//     componentGroup: 'EmailText'
-//   };
-// }
+Email.defaultProps = Email_defaultProps;

package/es/list/SecondaryText/HappinessRating.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { HappinessRating_propTypes } from "./props/propTypes";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./SecondaryText.module.css";
 export default class HappinessRating extends Component {
   render() {
@@ -12,20 +13,15 @@ export default class HappinessRating extends Component {
       src
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.happinessContainer} ${className ? className : ''}`
+      className: cn(`${style.happinessContainer} ${className ? className : ''}`)
     }, /*#__PURE__*/React.createElement("img", {
-      className: `${style.happinessImg}`,
+      className: cn(`${style.happinessImg}`),
       src: src
     }), /*#__PURE__*/React.createElement("span", {
-      className: style.ratingText,
+      className: cn(style.ratingText),
       "data-title": text
     }, `${text}%`));
   }
 
 }
-HappinessRating.propTypes = HappinessRating_propTypes; // if (__DOCS__) {
-//   HappinessRating.docs = {
-//     folderName: 'List',
-//     componentGroup: 'HappinessRating'
-//   };
-// }
+HappinessRating.propTypes = HappinessRating_propTypes;

package/es/list/SecondaryText/PhoneNumber.js

@@ -64,9 +64,4 @@ export default class PhoneNumber extends Component {
 
 }
 PhoneNumber.propTypes = PhoneNumber_propTypes;
-PhoneNumber.defaultProps = PhoneNumber_defaultProps; // if (__DOCS__) {
-//   PhoneNumber.docs = {
-//     folderName: 'List',
-//     componentGroup: 'PhoneNumberText'
-//   };
-// }
+PhoneNumber.defaultProps = PhoneNumber_defaultProps;

package/es/list/SecondaryText/PriorityText.js

@@ -32,9 +32,4 @@ export default class PriorityText extends Component {
 
 }
 PriorityText.propTypes = PriorityText_propTypes;
-PriorityText.defaultProps = PriorityText_defaultProps; // if (__DOCS__) {
-//   PriorityText.docs = {
-//     folderName: 'List',
-//     componentGroup: 'PriorityText'
-//   };
-// }
+PriorityText.defaultProps = PriorityText_defaultProps;

package/es/list/SecondaryText/SecondaryText.js

@@ -40,9 +40,4 @@ export default class SecondaryText extends Component {
 
 }
 SecondaryText.propTypes = SecondaryText_propTypes;
-SecondaryText.defaultProps = SecondaryText_defaultProps; // if (__DOCS__) {
-//   SecondaryText.docs = {
-//     folderName: 'List',
-//     componentGroup: 'SecondaryText'
-//   };
-// }
+SecondaryText.defaultProps = SecondaryText_defaultProps;

package/es/list/SecondaryText/SecondaryText.module.css

@@ -1,17 +1,16 @@
 .paidUserIcon {
+  composes: d-relative d-align-middle from global;
   margin-inline-end: var(--zd_size5) ;
-  vertical-align: middle;
   bottom: var(--zd_size1) ;
-  position: relative;
   font-size: var(--zd_font_size8) ;
 }
 
 .icon {
-  display: block;
+  composes: d-block from global;
 }
 
 .disable {
-  cursor: not-allowed;
+  composes: d-cursor-not-allowed from global;
 }
 
 .textBold {
@@ -20,7 +19,7 @@
 }
 
 .link {
-  display: block
+  composes: d-block from global;
 }
 
 .ticketId,
@@ -37,9 +36,8 @@
 }
 
 .linkWithText {
+  composes: d-max-w-full d-cursor-pointer from global;
   color: var(--zdt_secondaryText_secondaryText_text);
-  max-width: 100% ;
-  cursor: pointer;
 }
 
 .linkWithText:hover {
@@ -48,11 +46,7 @@
 
 .secondaryText,
 .phoneNumber {
-  max-width: 100% ;
-}
-
-.secondaryText, .phoneNumber {
-  cursor: pointer;
+  composes: d-max-w-full d-cursor-pointer from global;
 }
 
 .ticketIdLink,
@@ -65,7 +59,7 @@
   color: var(--zdt_secondaryText_blue_text);
 } */
 .ticketIdLink {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .ticketIdLink:hover,
@@ -74,7 +68,7 @@
 }
 
 .primaryAccountNameCnt {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 /* status */
@@ -97,12 +91,12 @@
 }
 
 .priorityText {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 .departmentText {
+  composes: d-max-w-full from global;
   color: var(--zdt_secondaryText_secondaryText_text);
-  max-width: 100% ;
 }
 
 /* HappinessRating Style */
@@ -111,10 +105,10 @@
 }
 
 .happinessImg {
+  composes: d-align-middle from global;
   width: var(--zd_size13) ;
   margin-block:0 ;
   margin-inline:0 var(--zd_size4) ;
-  vertical-align: middle;
 }
 
 /* colors */

package/es/list/SecondaryText/StatusText.js

@@ -33,9 +33,4 @@ export default class StatusText extends Component {
 
 }
 StatusText.propTypes = StatusText_propTypes;
-StatusText.defaultProps = StatusText_defaultProps; // if (__DOCS__) {
-//   StatusText.docs = {
-//     folderName: 'List',
-//     componentGroup: 'StatusText'
-//   };
-// }
+StatusText.defaultProps = StatusText_defaultProps;

package/es/list/SecondaryText/TicketId.js

@@ -6,6 +6,7 @@ import { TicketId_propTypes } from "./props/propTypes";
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import { DUMMY_OBJECT } from '@zohodesk/components/es/utils/Common';
 import Link from "../../Link/Link";
+import { cn } from "@dot-system/css-utility";
 import style from "./SecondaryText.module.css";
 export default class TicketId extends Component {
   constructor(props) {
@@ -33,7 +34,7 @@ export default class TicketId extends Component {
       TicketIdProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
+      className: cn(`${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`),
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,
@@ -51,9 +52,4 @@ export default class TicketId extends Component {
 
 }
 TicketId.propTypes = TicketId_propTypes;
-TicketId.defaultProps = TicketId_defaultProps; // if (__DOCS__) {
-//   TicketId.docs = {
-//     folderName: 'List',
-//     componentGroup: 'TicketId'
-//   };
-// }
+TicketId.defaultProps = TicketId_defaultProps;