@zohodesk/dot 1.0.0-beta.234 → 1.0.0-beta.235

package/es/list/Icons/props/propTypes.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+export const AddNewIcon_propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  onClick: PropTypes.func
+};
+export const CompleteIcon_propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func
+};
+export const DeleteComponent_propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func
+};
+export const EditIcon_propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func
+};
+export const FloatingIcons_propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element),
+  iconClass: PropTypes.string
+};
+export const ReadUnreadIcon_propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClassName: PropTypes.string,
+  iconClass: PropTypes.string,
+  onClick: PropTypes.func,
+  isRead: PropTypes.bool,
+  iconSize: PropTypes.string
+};
+export const SmartIcon_propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  features: PropTypes.array,
+  iconClass: PropTypes.string,
+  module: PropTypes.string,
+  onClick: PropTypes.func
+};

package/es/list/ListLayout/ListLayout.js

@@ -1,7 +1,8 @@
-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); }
+function _extends() { _extends = Object.assign || 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); }
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { ListLayout_defaultProps } from './props/defaultProps';
+import { ListLayout_propTypes, Column_propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import style from './ListLayout.module.css';
 export default class ListLayout extends Component {
@@ -54,40 +55,8 @@ export default class ListLayout extends Component {
   }
 
 }
-ListLayout.propTypes = {
-  align: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  containerClass: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  isActive: PropTypes.bool,
-  needHover: PropTypes.bool,
-  onClick: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaLabel: PropTypes.string,
-    ariaPosinset: PropTypes.number,
-    ariaSetsize: PropTypes.number
-  }),
-  onMouseEnter: PropTypes.func,
-  view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
-  needPointer: PropTypes.bool,
-  isKeyboardActive: PropTypes.bool
-};
-ListLayout.defaultProps = {
-  needHover: true,
-  view: 'classic',
-  isActive: false,
-  dataId: 'ticketsListInPopup',
-  a11y: {},
-  isHovered: false,
-  onMouseEnter: () => {},
-  needPointer: true,
-  isKeyboardActive: false
-};
+ListLayout.propTypes = ListLayout_propTypes;
+ListLayout.defaultProps = ListLayout_defaultProps;
 export class Column extends Component {
   constructor(props) {
     super(props);
@@ -104,10 +73,7 @@ export class Column extends Component {
   }
 
 }
-Column.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
+Column.propTypes = Column_propTypes;
 
 if (false) {
   ListLayout.docs = {

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

@@ -8,7 +8,8 @@
 .listHover:hover, .hoveredStyle{
   background-color: var(--zdt_listLayout_hover_bg);
 }
-.active, .active:hover {
+.active,
+.active:hover {
   background-color: var(--zdt_listLayout_active_bg);
 }
 .cursorPointer{
@@ -16,43 +17,34 @@
 }
 /* View */
 .classic .innerContainer {
-  min-height: var(--zd_size70);
   padding: var(--zd_size13) 0;
+  min-height: var(--zd_size70);
 }
 .compact .innerContainer {
-  min-height: var(--zd_size41);
   padding: var(--zd_size5) 0;
+  min-height: var(--zd_size41);
 }
 .superCompact .innerContainer {
-  min-height: var(--zd_size35);
   padding: var(--zd_size2) 0;
+  min-height: var(--zd_size35);
 }
-.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
-[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
+.compact,
+.classic,
+.superCompact {
   border-left: var(--zd_size2) solid transparent;
 }
-[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
-  border-right: var(--zd_size2) solid transparent;
-}
-[dir=ltr] .keyboardActive, [dir=ltr] .active{
+.keyboardActive, .active{
   border-top-left-radius: var(--zd_size5);
   border-bottom-left-radius: var(--zd_size5);
 }
-[dir=rtl] .keyboardActive, [dir=rtl] .active{
-  border-top-right-radius: var(--zd_size5);
-  border-bottom-right-radius: var(--zd_size5);
-}
-[dir=ltr] .keyboardActive{
+.keyboardActive{
   border-left-color: var(--zdt_listLayout_keyboard_active_border);
 }
-[dir=rtl] .keyboardActive{
-  border-right-color: var(--zdt_listLayout_keyboard_active_border);
-}
-[dir=ltr] .active{
+.active{
   border-left-color: var(--zdt_listLayout_active_border);
-}
-[dir=rtl] .active{
-  border-right-color: var(--zdt_listLayout_active_border);
 }

package/es/list/ListLayout/props/defaultProps.js

@@ -0,0 +1,11 @@
+export const ListLayout_defaultProps = {
+  needHover: true,
+  view: 'classic',
+  isActive: false,
+  dataId: 'ticketsListInPopup',
+  a11y: {},
+  isHovered: false,
+  onMouseEnter: () => {},
+  needPointer: true,
+  isKeyboardActive: false
+};

package/es/list/ListLayout/props/propTypes.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+export const ListLayout_propTypes = {
+  align: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  containerClass: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  isActive: PropTypes.bool,
+  needHover: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    ariaPosinset: PropTypes.number,
+    ariaSetsize: PropTypes.number
+  }),
+  onMouseEnter: PropTypes.func,
+  view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
+  needPointer: PropTypes.bool,
+  isKeyboardActive: PropTypes.bool
+};
+export const Column_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};

package/es/list/ListStencils/ListStencils.js

@@ -1,6 +1,7 @@
 /*** Libraries ***/
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /*** Components ***/
 
 import Stencils from '@zohodesk/components/lib/Stencils/Stencils';
@@ -37,12 +38,8 @@ export default class ListStencils extends Component {
   }
 
 }
-ListStencils.propTypes = {
-  listType: PropTypes.oneOf(['classic', 'compact', 'superCompact'])
-};
-ListStencils.defaultProps = {
-  listType: 'classic'
-};
+ListStencils.propTypes = propTypes;
+ListStencils.defaultProps = defaultProps;
 
 if (false) {
   ListStencils.docs = {

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

@@ -10,12 +10,9 @@
 .detailsInnerColumn {
   composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .avatar {
+.avatar {
   margin-right: var(--zd_size25);
 }
-[dir=rtl] .avatar {
-  margin-left: var(--zd_size25);
-}
 .detailsColumn {
   min-height: 0;
   min-width: 0;
@@ -33,23 +30,21 @@
 .classic .secondaryRow {
   margin-top: var(--zd_size10);
 }
-[dir=ltr] .compact .secondaryRow, [dir=ltr] .superCompact .secondaryRow {
+.compact .secondaryRow,
+.superCompact .secondaryRow {
   margin-left: var(--zd_size30);
 }
-[dir=rtl] .compact .secondaryRow, [dir=rtl] .superCompact .secondaryRow {
-  margin-right: var(--zd_size30);
-}
 .classic .innerContainer {
-  height: var(--zd_size70);
   padding: var(--zd_size13) 0;
+  height: var(--zd_size70);
 }
 .compact .innerContainer {
-  height: var(--zd_size41);
   padding: var(--zd_size5) 0;
+  height: var(--zd_size41);
 }
 .superCompact .innerContainer {
-  height: var(--zd_size35);
   padding: var(--zd_size2) 0;
+  height: var(--zd_size35);
 }
 .classic .detailsInnerColumn {
   -webkit-box-orient: vertical;

package/es/list/ListStencils/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  listType: 'classic'
+};

package/es/list/ListStencils/props/propTypes.js

@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  listType: PropTypes.oneOf(['classic', 'compact', 'superCompact'])
+};

package/es/list/SecondaryText/AccountName.js

@@ -1,10 +1,11 @@
-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); }
+function _extends() { _extends = Object.assign || 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); }
 
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { AccountName_defaultProps } from './props/defaultProps';
+import { AccountName_propTypes } from './props/propTypes';
 /**** Components ****/
 
 import { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -73,33 +74,8 @@ export default class AccountName extends Component {
   }
 
 }
-AccountName.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  notAccessible: PropTypes.bool,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string,
-  secondaryAccountHref: PropTypes.string,
-  secondaryAccountClick: PropTypes.func,
-  secondaryAccountText: PropTypes.string,
-  customProps: PropTypes.shape({
-    LinkProps: PropTypes.object,
-    TextProps: PropTypes.object,
-    SecondaryTextProps: PropTypes.object
-  })
-};
-AccountName.defaultProps = {
-  isLink: true,
-  dataId: 'accountName',
-  fontWeight: 'regular',
-  customProps: {}
-};
+AccountName.propTypes = AccountName_propTypes;
+AccountName.defaultProps = AccountName_defaultProps;
 
 if (false) {
   AccountName.docs = {

package/es/list/SecondaryText/ContactName.js

@@ -1,7 +1,8 @@
-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); }
+function _extends() { _extends = Object.assign || 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); }
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { ContactName_defaultProps } from './props/defaultProps';
+import { ContactName_propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Link from '../../Link/Link';
 import SentimentStatus from '../SentimentStatus/SentimentStatus';
@@ -72,42 +73,8 @@ export default class ContactName extends Component {
   }
 
 }
-ContactName.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  isPaidUser: PropTypes.bool,
-  notAccessible: PropTypes.bool,
-  onClick: PropTypes.func,
-  sentimentTitle: PropTypes.string,
-  sentimentType: PropTypes.oneOf(['positive', 'negative', 'neutral']),
-  text: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    sentimentTitles: PropTypes.shape({
-      positive: PropTypes.string,
-      negative: PropTypes.string,
-      neutral: PropTypes.string
-    }),
-    paidTitle: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    LinkProps: PropTypes.object,
-    TextProps: PropTypes.object
-  })
-};
-ContactName.defaultProps = {
-  isPaidUser: false,
-  isLink: true,
-  dataId: 'contactName',
-  fontWeight: 'regular',
-  i18nKeys: {},
-  customProps: {}
-};
+ContactName.propTypes = ContactName_propTypes;
+ContactName.defaultProps = ContactName_defaultProps;
 
 if (false) {
   ContactName.docs = {

package/es/list/SecondaryText/DepartmentText.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { DepartmentText_propTypes } from './props/propTypes';
 import style from './SecondaryText.module.css';
 export default class DepartmentText extends Component {
   constructor(props) {
@@ -21,13 +21,7 @@ export default class DepartmentText extends Component {
   }
 
 }
-DepartmentText.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  text: PropTypes.string
-};
-DepartmentText.defaultProps = {};
+DepartmentText.propTypes = DepartmentText_propTypes;
 
 if (false) {
   DepartmentText.docs = {

package/es/list/SecondaryText/Email.js

@@ -1,10 +1,11 @@
-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); }
+function _extends() { _extends = Object.assign || 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); }
 
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Email_defaultProps } from './props/defaultProps';
+import { Email_propTypes } from './props/propTypes';
 /**** Components ****/
 
 import Link from '../../Link/Link';
@@ -45,26 +46,8 @@ export default class Email extends Component {
   }
 
 }
-Email.propTypes = {
-  className: PropTypes.string,
-  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  target: PropTypes.string,
-  text: PropTypes.string,
-  title: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string,
-  customProps: PropTypes.shape({
-    LinkProps: PropTypes.object,
-    TextProps: PropTypes.object
-  })
-};
-Email.defaultProps = {
-  isLink: true,
-  fontWeight: 'regular',
-  customProps: {}
-};
+Email.propTypes = Email_propTypes;
+Email.defaultProps = Email_defaultProps;
 
 if (false) {
   Email.docs = {

package/es/list/SecondaryText/HappinessRating.js

@@ -1,6 +1,6 @@
 /**** Libraries ****/
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { HappinessRating_propTypes } from './props/propTypes';
 /**** CSS ****/
 
 import style from './SecondaryText.module.css';
@@ -23,12 +23,7 @@ export default class HappinessRating extends Component {
   }
 
 }
-HappinessRating.propTypes = {
-  className: PropTypes.string,
-  src: PropTypes.string,
-  text: PropTypes.string
-};
-HappinessRating.defaultProps = {};
+HappinessRating.propTypes = HappinessRating_propTypes;
 
 if (false) {
   HappinessRating.docs = {

package/es/list/SecondaryText/PhoneNumber.js

@@ -1,10 +1,11 @@
-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); }
+function _extends() { _extends = Object.assign || 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); }
 
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { PhoneNumber_defaultProps } from './props/defaultProps';
+import { PhoneNumber_propTypes } from './props/propTypes';
 /**** Components ****/
 
 import Link from '../../Link/Link';
@@ -49,29 +50,8 @@ export default class PhoneNumber extends Component {
   }
 
 }
-PhoneNumber.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  hasReload: PropTypes.bool,
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  target: PropTypes.string,
-  text: PropTypes.string,
-  title: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string,
-  customProps: PropTypes.shape({
-    LinkProps: PropTypes.object,
-    TextProps: PropTypes.object
-  })
-};
-PhoneNumber.defaultProps = {
-  isLink: true,
-  hasReload: false,
-  fontWeight: 'regular',
-  customProps: {}
-};
+PhoneNumber.propTypes = PhoneNumber_propTypes;
+PhoneNumber.defaultProps = PhoneNumber_defaultProps;
 
 if (false) {
   PhoneNumber.docs = {

package/es/list/SecondaryText/PriorityText.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { PriorityText_defaultProps } from './props/defaultProps';
+import { PriorityText_propTypes } from './props/propTypes';
 import style from './SecondaryText.module.css';
 export default class PriorityText extends Component {
   constructor(props) {
@@ -22,17 +23,8 @@ export default class PriorityText extends Component {
   }
 
 }
-PriorityText.propTypes = {
-  className: PropTypes.string,
-  color: PropTypes.oneOf(['red', 'green', 'gray', 'orange']),
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  text: PropTypes.string
-};
-PriorityText.defaultProps = {
-  color: 'black',
-  dataId: 'priority'
-};
+PriorityText.propTypes = PriorityText_propTypes;
+PriorityText.defaultProps = PriorityText_defaultProps;
 
 if (false) {
   PriorityText.docs = {

package/es/list/SecondaryText/SecondaryText.js

@@ -1,7 +1,8 @@
-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); }
+function _extends() { _extends = Object.assign || 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); }
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { SecondaryText_defaultProps } from './props/defaultProps';
+import { SecondaryText_propTypes } from './props/propTypes';
 import style from './SecondaryText.module.css';
 export default class SecondaryText extends Component {
   constructor(props) {
@@ -29,19 +30,8 @@ export default class SecondaryText extends Component {
   }
 
 }
-SecondaryText.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  customProps: PropTypes.shape({
-    SecondaryTextProps: PropTypes.object
-  })
-};
-SecondaryText.defaultProps = {
-  customProps: {}
-};
+SecondaryText.propTypes = SecondaryText_propTypes;
+SecondaryText.defaultProps = SecondaryText_defaultProps;
 
 if (false) {
   SecondaryText.docs = {

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

@@ -1,12 +1,9 @@
 .paidUserIcon {
+  margin-right: var(--zd_size5);
   vertical-align: middle;
   bottom: var(--zd_size1);
   position: relative;
   font-size: var(--zd_font_size8);
-}[dir=ltr] .paidUserIcon {
-  margin-right: var(--zd_size5);
-}[dir=rtl] .paidUserIcon {
-  margin-left: var(--zd_size5);
 }
 .icon {
   display: block;
@@ -45,13 +42,11 @@ display: block
 .textStyle,
 .secondaryText,
 .phoneNumber {
+  cursor: pointer;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   max-width: 100%;
   display: block;
 }
-.textStyle, .secondaryText, .phoneNumber {
-  cursor: pointer;
-}
 .textStyle:hover,
 .ticketIdLink,
 .phoneNumber:hover,
@@ -106,13 +101,8 @@ display: block
 }
 .happinessImg {
   width: var(--zd_size13);
-  vertical-align: middle;
-}
-[dir=ltr] .happinessImg {
   margin: 0 var(--zd_size4) 0 0;
-}
-[dir=rtl] .happinessImg {
-  margin: 0 0 0 var(--zd_size4);
+  vertical-align: middle;
 }
 
 /* colors */