@zohodesk/dot 1.0.0-temp-122 → 1.0.0-temp-124

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -27,7 +27,8 @@ export default class AvatarStatus extends React.Component {
       customTextClass,
       statusTitle,
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarStatusProps = {},
@@ -52,6 +53,7 @@ export default class AvatarStatus extends React.Component {
       initial: initial,
       shape: shape,
       needTitle: needTitle,
+      needDefaultBorder: needDefaultBorder,
       needBorder: needBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       "data-title": statusTitle,

package/es/avatar/AvatarStatus/props/defaultProps.js

@@ -6,5 +6,7 @@ export const defaultProps = {
   palette: 'info',
   statusTitle: '',
   customProps: {},
-  dataSelectorId: 'avatarStatus'
+  dataSelectorId: 'avatarStatus',
+  needDefaultBorder: false,
+  needBorder: false
 };

package/es/avatar/AvatarStatus/props/propTypes.js

@@ -13,6 +13,8 @@ export const propTypes = {
   size: PropTypes.string,
   src: PropTypes.string,
   state: PropTypes.string,
+  needDefaultBorder: PropTypes.bool,
+  needBorder: PropTypes.bool,
   statusTitle: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -22,7 +22,8 @@ export default class AvatarWithTeam extends React.Component {
       teamClassName,
       borderOnActive,
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      teamBorderActive
     } = this.props;
     let {
       AvatarWithTeamProps = {},
@@ -81,7 +82,7 @@ export default class AvatarWithTeam extends React.Component {
       customClass: {
         customAvatar: customTextClass
       },
-      borderOnActive: borderOnActive
+      borderOnActive: teamBorderActive
     }, AvatarTeam2Props))) : null);
   }
 }

package/es/avatar/AvatarWithTeam/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   teamClassName: '',
   borderOnActive: false,
   customProps: {},
-  dataSelectorId: 'avatarWithTeam'
+  dataSelectorId: 'avatarWithTeam',
+  teamBorderActive: true
 };

package/es/avatar/AvatarWithTeam/props/propTypes.js

@@ -14,6 +14,7 @@ export const propTypes = {
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
   borderOnActive: PropTypes.bool,
+  teamBorderActive: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarWithTeamProps: PropTypes.object,
     Avatar1Props: PropTypes.object,

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -10,11 +10,13 @@ export default class BluePrintStatus extends React.Component {
     let {
       title
     } = this.props;
-    return /*#__PURE__*/React.createElement(Icon, {
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.container}`
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-blueprint",
       title: title,
       iconClass: style.iconStyle
-    });
+    }));
   }
 }
 BluePrintStatus.propTypes = propTypes;

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -1,14 +1,17 @@
-.iconStyle {
-  font-size: var(--zd_font_size10);
-}[dir=ltr] .iconStyle {
+.container {
+  display: inherit;
+}[dir=ltr] .container {
   padding-right: var(--zd_size5);
-}[dir=rtl] .iconStyle {
+}[dir=rtl] .container {
   padding-left: var(--zd_size5);
 }
-
 /* .danger {
   color: var(--dot_brightRed);
 }
 .default {
   color: var(--dot_shuttleGrey);
-} */
+} */
+.iconStyle {
+  display: block;
+  font-size: var(--zd_font_size10);
+}

package/es/list/SecondaryText/AccountName.js

@@ -6,6 +6,7 @@ import { AccountName_defaultProps } from './props/defaultProps';
 import { AccountName_propTypes } from './props/propTypes';
 
 /**** Components ****/
+import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Link from '../../Link/Link';
 
 /**** CSS ****/
@@ -34,30 +35,42 @@ export default class AccountName extends Component {
       TextProps = {},
       SecondaryTextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.primaryAccountNameCnt,
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "baseline",
+      isCover: false,
       "data-title": dataTitle,
-      "data-id": dataId
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "baseline",
+      isCover: false,
+      className: style.primaryAccountNameCnt
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.primaryAccountName,
+      shrink: true
+    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       urlName: urlName,
       urlData: urlData,
       onClick: onClick,
       dataId: `${dataId}_link`,
-      className: `${style.gridItem} ${style.link}`
+      className: style.link
     }, LinkProps, {
       ariaLabel: `Account Name ${text}`
     }), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
     }, text)) : /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.gridItem} ${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
-    }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Link, {
+      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
+    }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,
       onClick: secondaryAccountClick,
-      className: `${style.gridItem} ${style.link}`
+      className: style.link
     }, /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, SecondaryTextProps), secondaryAccountText)));
+    }, SecondaryTextProps), secondaryAccountText))))));
   }
 }
 AccountName.propTypes = AccountName_propTypes;

package/es/list/SecondaryText/ContactName.js

@@ -39,33 +39,39 @@ export default class ContactName extends Component {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.contactNameCnt,
-      "data-id": dataId
-    }, isPaidUser && /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-paiduser",
-      iconClass: style.paidUserIcon,
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "baseline",
+      isCover: false,
+      dataId: dataId
+    }, isPaidUser && /*#__PURE__*/React.createElement(Box, {
+      className: style.paidUserIcon,
       title: paidTitle,
       "aria-label": "Paid user"
-    }), /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-paiduser",
+      iconClass: style.icon
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
       title: dataTitle,
       dataId: `${dataId}_link`,
-      className: `${style.gridItem} ${style.link}`
+      className: style.link
     }, LinkProps, {
       ariaLabel: `Contact Name ${text}`
     }), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
     }, text)) : /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.gridItem} ${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
+      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       "data-title": dataTitle
-    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(SentimentStatus, {
+    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle
-    }));
+    })));
   }
 }
 ContactName.propTypes = ContactName_propTypes;

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

@@ -1,26 +1,30 @@
+.paidUserIcon {
+  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;
 }
-
 .disable {
   cursor: not-allowed;
 }
-
 .textBold {
   font-family: var(--zd_bold);
   color: var(--zdt_secondaryText_black_text);
 }
-
-.textStyle,
-.link {
-  display: block
+.textStyle, .link{
+display: block
 }
-
 .textStyle.textBold {
   font-family: var(--zd_bold);
   color: var(--zdt_secondaryText_black_text);
 }
-
 .ticketId,
 .link,
 .textStyle,
@@ -29,18 +33,15 @@
 .phoneNumber {
   color: var(--zdt_secondaryText_secondaryText_text);
 }
-
 .textStyle,
 .secondaryText {
   font-size: var(--zd_font_size12);
 }
-
 .ticketId,
 .phoneNumber,
 .ratingText {
   font-size: var(--zd_font_size12);
 }
-
 .textStyle,
 .secondaryText,
 .phoneNumber {
@@ -48,49 +49,42 @@
   max-width: 100%;
   display: block;
 }
-
 .textStyle, .secondaryText, .phoneNumber {
   cursor: pointer;
 }
-
 .textStyle:hover,
 .ticketIdLink,
 .phoneNumber:hover,
 .link:hover {
   color: var(--zdt_secondaryText_blue_text);
 }
-
 /* .link:focus, .link:focus .textStyle, .link:focus .phoneNumber{
   color: var(--zdt_secondaryText_blue_text);
 } */
 .ticketIdLink {
   cursor: pointer;
 }
-
-.ticketIdLink:hover,
-.ticketIdLink:focus {
+.ticketIdLink:hover, .ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
-
+.primaryAccountNameCnt {
+  max-width: 100%;
+}
 /* status */
 .font_regular {
   font-family: var(--zd_regular);
 }
-
 .font_semibold {
   font-family: var(--zd_semibold);
 }
-
 .font_bold {
   font-family: var(--zd_bold);
 }
-
 .font_semibold,
 .font_bold,
 .textBold {
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 .priorityText,
 .statusText {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
@@ -100,28 +94,23 @@
   font-size: var(--zd_font_size12);
   max-width: 100%;
 }
-
 .departmentText {
   font-size: var(--zd_font_size12);
   color: var(--zdt_secondaryText_secondaryText_text);
   max-width: 100%;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 /* HappinessRating Style */
 .happinessContainer {
   composes: inlineBlockMiddle from '../listCommon.module.css';
 }
-
 .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);
 }
@@ -130,52 +119,18 @@
 .gray {
   color: var(--zdt_secondaryText_gray_text);
 }
-
 .orange {
   color: var(--zdt_secondaryText_orage_text);
 }
-
 .green {
   color: var(--zdt_secondaryText_green_text);
 }
-
 .red {
   color: var(--zdt_secondaryText_red_text);
 }
-
 .blue {
   color: var(--zdt_secondaryText_blue_text);
 }
-
 .black {
   color: var(--zdt_secondaryText_black_text);
 }
-
-/* Contact Name */
-.contactNameCnt,
-.primaryAccountNameCnt {
-  display: inline-grid;
-  align-items: baseline;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, max-content);
-  max-width: 100%;
-}
-
-.paidUserIcon {
-  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);
-}
-
-.gridItem {
-  min-width: 0;
-}

package/es/list/SentimentStatus/SentimentStatus.js

@@ -16,11 +16,13 @@ export default class SentimentStatus extends React.Component {
       negative: 'ZD-botNegative',
       positive: 'ZD-botPositive'
     };
-    return /*#__PURE__*/React.createElement(Icon, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container,
+      "data-title": dataTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: icons[type],
-      iconClass: style.sentimentIcon,
-      title: dataTitle
-    });
+      iconClass: style.sentimentIcon
+    }));
   }
 }
 SentimentStatus.propTypes = propTypes;

package/es/list/SentimentStatus/SentimentStatus.module.css

@@ -1,7 +1,12 @@
-.sentimentIcon {
+.container {
+  vertical-align: middle;
   font-size: var(--zd_font_size10);
-}[dir=ltr] .sentimentIcon {
+}[dir=ltr] .container {
   margin: 0 0 0 var(--zd_size5);
-}[dir=rtl] .sentimentIcon {
+}[dir=rtl] .container {
   margin: 0 var(--zd_size5) 0 0;
-}
+}
+
+.sentimentIcon {
+  display: block;
+}

package/es/list/UserTime/UserTime.js

@@ -33,7 +33,7 @@ export default class UserTime extends Component {
       "data-id": dataId,
       "aria-label": title,
       tabIndex: "0"
-    }, icon && /*#__PURE__*/React.createElement("span", {
+    }, icon && /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconColor} ${style[iconColor] ? style[iconColor] : ''}`
     }, icon === 'closedTime' ? /*#__PURE__*/React.createElement(Icon, {
       iconClass: `${style.iconStyle} ${style.closedTime} ${style.f8} ${iconClass ? iconClass : ''}`,
@@ -56,7 +56,9 @@ export default class UserTime extends Component {
     }) : /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-dueTime",
       iconClass: `${style.iconStyle} ${style.f8} ${iconClass ? iconClass : ''}`
-    })), /*#__PURE__*/React.createElement(UserTimeDiffFormat, {
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(UserTimeDiffFormat, {
       type: type,
       page: page,
       isNeedTime: isNeedTime,
@@ -66,7 +68,7 @@ export default class UserTime extends Component {
       later: later,
       to: to,
       isOverdue: isOverdue
-    }));
+    })));
   }
 }
 UserTime.propTypes = propTypes;

package/es/list/UserTime/UserTime.module.css

@@ -2,74 +2,57 @@
   --text_color: var(--zdt_usertime_timeText);
   --icon_color: var(--zdt_usertime_icon_gray);
 }
-
 .container {
-  composes: varClass;
-  display: inline-grid;
-  grid-template-columns: minmax(0, max-content) minmax(0, max-content);
-  align-items: baseline;
+  composes: dInflex alignBaseline from '~@zohodesk/components/lib/common/common.module.css';
   max-width: 100%;
+  composes: varClass;
 }
-
 .f8 {
   font-size: var(--zd_font_size8);
 }
-
 .f9 {
   font-size: var(--zd_font_size9);
 }
-
 .f10 {
   font-size: var(--zd_font_size10);
 }
-
 .closedTime span:last-child:before,
 .completedTask span:first-child:before {
   color: inherit;
 }
-
 .closedTime span:first-child:before {
   color: var(--zdt_usertime_icon_green);
 }
-
 .textStyle {
   font-size: var(--zd_font_size12);
   color: var(--text_color);
   display: block;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 .iconStyle {
   display: block;
 }
-
 [dir=ltr] .iconStyle {
   margin-right: var(--zd_size3);
   margin-left: var(--zd_size1);
 }
-
 [dir=rtl] .iconStyle {
   margin-left: var(--zd_size3);
   margin-right: var(--zd_size1);
 }
-
 /* colors */
 .iconColor {
   color: var(--icon_color)
 }
-
 .red {
   --icon_color: var(--zdt_usertime_icon_red);
 }
-
 .green {
   --icon_color: var(--zdt_usertime_icon_green);
 }
-
 .orange {
   --icon_color: var(--zdt_usertime_icon_orange);
 }
-
 .gray {
   --icon_color: var(--zdt_usertime_icon_gray);
-}
+}

package/lib/avatar/AvatarStatus/AvatarStatus.js

@@ -50,7 +50,8 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         customTextClass = _this$props.customTextClass,
         statusTitle = _this$props.statusTitle,
         customProps = _this$props.customProps,
-        dataSelectorId = _this$props.dataSelectorId;
+        dataSelectorId = _this$props.dataSelectorId,
+        needDefaultBorder = _this$props.needDefaultBorder;
       var _customProps$AvatarSt = customProps.AvatarStatusProps,
         AvatarStatusProps = _customProps$AvatarSt === void 0 ? {} : _customProps$AvatarSt,
         _customProps$AvatarPr = customProps.AvatarProps,
@@ -74,6 +75,7 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         initial: initial,
         shape: shape,
         needTitle: needTitle,
+        needDefaultBorder: needDefaultBorder,
         needBorder: needBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
         "data-title": statusTitle,

package/lib/avatar/AvatarStatus/props/defaultProps.js

@@ -12,6 +12,8 @@ var defaultProps = {
   palette: 'info',
   statusTitle: '',
   customProps: {},
-  dataSelectorId: 'avatarStatus'
+  dataSelectorId: 'avatarStatus',
+  needDefaultBorder: false,
+  needBorder: false
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarStatus/props/propTypes.js

@@ -4,29 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _propTypes;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var propTypes = {
-  className: _propTypes["default"].string,
-  customTextClass: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  initial: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  needBorder: _propTypes["default"].bool,
-  needTitle: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
-  shape: _propTypes["default"].string,
-  size: _propTypes["default"].string,
-  src: _propTypes["default"].string,
-  state: _propTypes["default"].string,
-  statusTitle: _propTypes["default"].string,
-  textPalette: _propTypes["default"].oneOf(['white', 'black']),
-  title: _propTypes["default"].string,
-  dataSelectorId: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    AvatarStatusProps: _propTypes["default"].object,
-    AvatarProps: _propTypes["default"].object
-  })
-};
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var propTypes = (_propTypes = {
+  className: _propTypes2["default"].string,
+  customTextClass: _propTypes2["default"].string,
+  dataId: _propTypes2["default"].string,
+  initial: _propTypes2["default"].string,
+  name: _propTypes2["default"].string,
+  needBorder: _propTypes2["default"].bool,
+  needTitle: _propTypes2["default"].bool,
+  onClick: _propTypes2["default"].func,
+  palette: _propTypes2["default"].oneOf(['primary', 'secondary', 'info', 'default']),
+  shape: _propTypes2["default"].string,
+  size: _propTypes2["default"].string,
+  src: _propTypes2["default"].string,
+  state: _propTypes2["default"].string,
+  needDefaultBorder: _propTypes2["default"].bool
+}, _defineProperty(_propTypes, "needBorder", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusTitle", _propTypes2["default"].string), _defineProperty(_propTypes, "textPalette", _propTypes2["default"].oneOf(['white', 'black'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "dataSelectorId", _propTypes2["default"].string), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
+  AvatarStatusProps: _propTypes2["default"].object,
+  AvatarProps: _propTypes2["default"].object
+})), _propTypes);
 exports.propTypes = propTypes;

package/lib/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -49,7 +49,8 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
         teamClassName = _this$props.teamClassName,
         borderOnActive = _this$props.borderOnActive,
         customProps = _this$props.customProps,
-        dataSelectorId = _this$props.dataSelectorId;
+        dataSelectorId = _this$props.dataSelectorId,
+        teamBorderActive = _this$props.teamBorderActive;
       var _customProps$AvatarWi = customProps.AvatarWithTeamProps,
         AvatarWithTeamProps = _customProps$AvatarWi === void 0 ? {} : _customProps$AvatarWi,
         _customProps$Avatar1P = customProps.Avatar1Props,
@@ -110,7 +111,7 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
         customClass: {
           customAvatar: customTextClass
         },
-        borderOnActive: borderOnActive
+        borderOnActive: teamBorderActive
       }, AvatarTeam2Props))) : null);
     }
   }]);

package/lib/avatar/AvatarWithTeam/props/defaultProps.js

@@ -10,6 +10,7 @@ var defaultProps = {
   teamClassName: '',
   borderOnActive: false,
   customProps: {},
-  dataSelectorId: 'avatarWithTeam'
+  dataSelectorId: 'avatarWithTeam',
+  teamBorderActive: true
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarWithTeam/props/propTypes.js

@@ -21,6 +21,7 @@ var propTypes = {
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
   title: _propTypes["default"].string,
   borderOnActive: _propTypes["default"].bool,
+  teamBorderActive: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     AvatarWithTeamProps: _propTypes["default"].object,
     Avatar1Props: _propTypes["default"].object,

package/lib/list/BluePrintStatus/BluePrintStatus.js

@@ -31,11 +31,13 @@ var BluePrintStatus = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var title = this.props.title;
-      return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        className: "".concat(_BluePrintStatusModule["default"].container)
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-blueprint",
         title: title,
         iconClass: _BluePrintStatusModule["default"].iconStyle
-      });
+      }));
     }
   }]);
   return BluePrintStatus;

package/lib/list/BluePrintStatus/BluePrintStatus.module.css

@@ -1,14 +1,17 @@
-.iconStyle {
-  font-size: var(--zd_font_size10);
-}[dir=ltr] .iconStyle {
+.container {
+  display: inherit;
+}[dir=ltr] .container {
   padding-right: var(--zd_size5);
-}[dir=rtl] .iconStyle {
+}[dir=rtl] .container {
   padding-left: var(--zd_size5);
 }
-
 /* .danger {
   color: var(--dot_brightRed);
 }
 .default {
   color: var(--dot_shuttleGrey);
-} */
+} */
+.iconStyle {
+  display: block;
+  font-size: var(--zd_font_size10);
+}

package/lib/list/SecondaryText/AccountName.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Layout = require("@zohodesk/components/lib/Layout");
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 var _SecondaryTextModule = _interopRequireDefault(require("./SecondaryText.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -57,30 +58,42 @@ var AccountName = /*#__PURE__*/function (_Component) {
         TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp,
         _customProps$Secondar = customProps.SecondaryTextProps,
         SecondaryTextProps = _customProps$Secondar === void 0 ? {} : _customProps$Secondar;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SecondaryTextModule["default"].primaryAccountNameCnt,
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "baseline",
+        isCover: false,
         "data-title": dataTitle,
-        "data-id": dataId
-      }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+        dataId: dataId
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "baseline",
+        isCover: false,
+        className: _SecondaryTextModule["default"].primaryAccountNameCnt
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _SecondaryTextModule["default"].primaryAccountName,
+        shrink: true
+      }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
         href: href,
         urlName: urlName,
         urlData: urlData,
         onClick: onClick,
         dataId: "".concat(dataId, "_link"),
-        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
+        className: _SecondaryTextModule["default"].link
       }, LinkProps, {
         ariaLabel: "Account Name ".concat(text)
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
       }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
-      }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
+      }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         href: secondaryAccountHref,
         onClick: secondaryAccountClick,
-        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
+        className: _SecondaryTextModule["default"].link
       }, /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-      }, SecondaryTextProps), secondaryAccountText)));
+      }, SecondaryTextProps), secondaryAccountText))))));
     }
   }]);
   return AccountName;

package/lib/list/SecondaryText/ContactName.js

@@ -67,33 +67,39 @@ var ContactName = /*#__PURE__*/function (_Component) {
         LinkProps = _customProps$LinkProp === void 0 ? {} : _customProps$LinkProp,
         _customProps$TextProp = customProps.TextProps,
         TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SecondaryTextModule["default"].contactNameCnt,
-        "data-id": dataId
-      }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        name: "ZD-paiduser",
-        iconClass: _SecondaryTextModule["default"].paidUserIcon,
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "baseline",
+        isCover: false,
+        dataId: dataId
+      }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _SecondaryTextModule["default"].paidUserIcon,
         title: paidTitle,
         "aria-label": "Paid user"
-      }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        name: "ZD-paiduser",
+        iconClass: _SecondaryTextModule["default"].icon
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
         urlName: urlName,
         href: href,
         urlData: urlData,
         onClick: onClick,
         title: dataTitle,
         dataId: "".concat(dataId, "_link"),
-        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
+        className: _SecondaryTextModule["default"].link
       }, LinkProps, {
         ariaLabel: "Contact Name ".concat(text)
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
       }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
+        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
         "data-title": dataTitle
-      }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
+      }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
         type: sentimentType,
         dataTitle: sentimentDataTitle
-      }));
+      })));
     }
   }]);
   return ContactName;

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -1,26 +1,30 @@
+.paidUserIcon {
+  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;
 }
-
 .disable {
   cursor: not-allowed;
 }
-
 .textBold {
   font-family: var(--zd_bold);
   color: var(--zdt_secondaryText_black_text);
 }
-
-.textStyle,
-.link {
-  display: block
+.textStyle, .link{
+display: block
 }
-
 .textStyle.textBold {
   font-family: var(--zd_bold);
   color: var(--zdt_secondaryText_black_text);
 }
-
 .ticketId,
 .link,
 .textStyle,
@@ -29,18 +33,15 @@
 .phoneNumber {
   color: var(--zdt_secondaryText_secondaryText_text);
 }
-
 .textStyle,
 .secondaryText {
   font-size: var(--zd_font_size12);
 }
-
 .ticketId,
 .phoneNumber,
 .ratingText {
   font-size: var(--zd_font_size12);
 }
-
 .textStyle,
 .secondaryText,
 .phoneNumber {
@@ -48,49 +49,42 @@
   max-width: 100%;
   display: block;
 }
-
 .textStyle, .secondaryText, .phoneNumber {
   cursor: pointer;
 }
-
 .textStyle:hover,
 .ticketIdLink,
 .phoneNumber:hover,
 .link:hover {
   color: var(--zdt_secondaryText_blue_text);
 }
-
 /* .link:focus, .link:focus .textStyle, .link:focus .phoneNumber{
   color: var(--zdt_secondaryText_blue_text);
 } */
 .ticketIdLink {
   cursor: pointer;
 }
-
-.ticketIdLink:hover,
-.ticketIdLink:focus {
+.ticketIdLink:hover, .ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
-
+.primaryAccountNameCnt {
+  max-width: 100%;
+}
 /* status */
 .font_regular {
   font-family: var(--zd_regular);
 }
-
 .font_semibold {
   font-family: var(--zd_semibold);
 }
-
 .font_bold {
   font-family: var(--zd_bold);
 }
-
 .font_semibold,
 .font_bold,
 .textBold {
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 .priorityText,
 .statusText {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
@@ -100,28 +94,23 @@
   font-size: var(--zd_font_size12);
   max-width: 100%;
 }
-
 .departmentText {
   font-size: var(--zd_font_size12);
   color: var(--zdt_secondaryText_secondaryText_text);
   max-width: 100%;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 /* HappinessRating Style */
 .happinessContainer {
   composes: inlineBlockMiddle from '../listCommon.module.css';
 }
-
 .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);
 }
@@ -130,52 +119,18 @@
 .gray {
   color: var(--zdt_secondaryText_gray_text);
 }
-
 .orange {
   color: var(--zdt_secondaryText_orage_text);
 }
-
 .green {
   color: var(--zdt_secondaryText_green_text);
 }
-
 .red {
   color: var(--zdt_secondaryText_red_text);
 }
-
 .blue {
   color: var(--zdt_secondaryText_blue_text);
 }
-
 .black {
   color: var(--zdt_secondaryText_black_text);
 }
-
-/* Contact Name */
-.contactNameCnt,
-.primaryAccountNameCnt {
-  display: inline-grid;
-  align-items: baseline;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, max-content);
-  max-width: 100%;
-}
-
-.paidUserIcon {
-  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);
-}
-
-.gridItem {
-  min-width: 0;
-}

package/lib/list/SentimentStatus/SentimentStatus.js

@@ -38,11 +38,13 @@ var SentimentStatus = /*#__PURE__*/function (_React$Component) {
         negative: 'ZD-botNegative',
         positive: 'ZD-botPositive'
       };
-      return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _SentimentStatusModule["default"].container,
+        "data-title": dataTitle
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: icons[type],
-        iconClass: _SentimentStatusModule["default"].sentimentIcon,
-        title: dataTitle
-      });
+        iconClass: _SentimentStatusModule["default"].sentimentIcon
+      }));
     }
   }]);
   return SentimentStatus;

package/lib/list/SentimentStatus/SentimentStatus.module.css

@@ -1,7 +1,12 @@
-.sentimentIcon {
+.container {
+  vertical-align: middle;
   font-size: var(--zd_font_size10);
-}[dir=ltr] .sentimentIcon {
+}[dir=ltr] .container {
   margin: 0 0 0 var(--zd_size5);
-}[dir=rtl] .sentimentIcon {
+}[dir=rtl] .container {
   margin: 0 var(--zd_size5) 0 0;
-}
+}
+
+.sentimentIcon {
+  display: block;
+}

package/lib/list/UserTime/UserTime.js

@@ -57,7 +57,7 @@ var UserTime = /*#__PURE__*/function (_Component) {
         "data-id": dataId,
         "aria-label": title,
         tabIndex: "0"
-      }, icon && /*#__PURE__*/_react["default"].createElement("span", {
+      }, icon && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_UserTimeModule["default"].iconColor, " ").concat(_UserTimeModule["default"][iconColor] ? _UserTimeModule["default"][iconColor] : '')
       }, icon === 'closedTime' ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconClass: "".concat(_UserTimeModule["default"].iconStyle, " ").concat(_UserTimeModule["default"].closedTime, " ").concat(_UserTimeModule["default"].f8, " ").concat(iconClass ? iconClass : ''),
@@ -80,7 +80,9 @@ var UserTime = /*#__PURE__*/function (_Component) {
       }) : /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-dueTime",
         iconClass: "".concat(_UserTimeModule["default"].iconStyle, " ").concat(_UserTimeModule["default"].f8, " ").concat(iconClass ? iconClass : '')
-      })), /*#__PURE__*/_react["default"].createElement(_i18n.UserTimeDiffFormat, {
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement(_i18n.UserTimeDiffFormat, {
         type: type,
         page: page,
         isNeedTime: isNeedTime,
@@ -90,7 +92,7 @@ var UserTime = /*#__PURE__*/function (_Component) {
         later: later,
         to: to,
         isOverdue: isOverdue
-      }));
+      })));
     }
   }]);
   return UserTime;

package/lib/list/UserTime/UserTime.module.css

@@ -2,74 +2,57 @@
   --text_color: var(--zdt_usertime_timeText);
   --icon_color: var(--zdt_usertime_icon_gray);
 }
-
 .container {
-  composes: varClass;
-  display: inline-grid;
-  grid-template-columns: minmax(0, max-content) minmax(0, max-content);
-  align-items: baseline;
+  composes: dInflex alignBaseline from '~@zohodesk/components/lib/common/common.module.css';
   max-width: 100%;
+  composes: varClass;
 }
-
 .f8 {
   font-size: var(--zd_font_size8);
 }
-
 .f9 {
   font-size: var(--zd_font_size9);
 }
-
 .f10 {
   font-size: var(--zd_font_size10);
 }
-
 .closedTime span:last-child:before,
 .completedTask span:first-child:before {
   color: inherit;
 }
-
 .closedTime span:first-child:before {
   color: var(--zdt_usertime_icon_green);
 }
-
 .textStyle {
   font-size: var(--zd_font_size12);
   color: var(--text_color);
   display: block;
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-
 .iconStyle {
   display: block;
 }
-
 [dir=ltr] .iconStyle {
   margin-right: var(--zd_size3);
   margin-left: var(--zd_size1);
 }
-
 [dir=rtl] .iconStyle {
   margin-left: var(--zd_size3);
   margin-right: var(--zd_size1);
 }
-
 /* colors */
 .iconColor {
   color: var(--icon_color)
 }
-
 .red {
   --icon_color: var(--zdt_usertime_icon_red);
 }
-
 .green {
   --icon_color: var(--zdt_usertime_icon_green);
 }
-
 .orange {
   --icon_color: var(--zdt_usertime_icon_orange);
 }
-
 .gray {
   --icon_color: var(--zdt_usertime_icon_gray);
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-122",
+  "version": "1.0.0-temp-124",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,