@zohodesk/dot 1.0.0-temp-68 → 1.0.0-temp-69

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,20 +5,27 @@
     composes: varClass;
     min-height: var(--zd_size54);
     position: relative;
+    color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;
     border-color: var(--commonalert_border_color);
     border-width: 2px 0 0 0;
-    color: var(--zdt_desktopnotification_text);
   }
   
   .title {
-    margin: 0 var(--zd_size5) 0 var(--zd_size10);
     font-size: var(--zd_font_size18);
     line-height: var(--zd_size22);
     font-family: var(--zd_bold);
     composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
+  
+  [dir=ltr] .title {
+  margin: 0 var(--zd_size5) 0 var(--zd_size10);
+  }
+  
+  [dir=rtl] .title {
+    margin: 0 var(--zd_size10) 0 var(--zd_size5);
+  }
 
   .infoText {
     font-size: var(--zd_font_size14);
@@ -50,8 +57,11 @@
 
 
 /* Primary Header */
-.primary {
-    padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
+[dir=ltr] .primary {
+  padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
+}
+[dir=rtl] .primary {
+    padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
 }
 
 .primary .iconContainer {
@@ -66,14 +76,26 @@
   .primary .close {
     position: absolute;
     top: var(--zd_size12);
-    right: var(--zd_size12);
+  }
+  
+  [dir=ltr] .primary .close {
+  right: var(--zd_size12);
+  }
+  
+  [dir=rtl] .primary .close {
+    left: var(--zd_size12);
   }
 
   /* Secondary Header */
   .secondary {
-    padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
-    border-radius: 0 0 var(--zd_size10) var(--zd_size10);
     composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+    border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  }
+  [dir=ltr] .secondary {
+  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
+  }
+  [dir=rtl] .secondary {
+    padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
   }
 
   .secondary .infoText {
@@ -86,15 +108,30 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    left: var(--zd_size18);
     margin: auto 0;
   }
 
+  [dir=ltr] .secondary .iconContainer {
+  left: var(--zd_size18);
+  }
+
+  [dir=rtl] .secondary .iconContainer {
+    right: var(--zd_size18);
+  }
+
   .secondary .close {
     position: absolute;
     top: 0;
     bottom: 0;
-    right: var(--zd_size12);
-    margin: auto 0 auto var(--zd_size25);
     height: var(--zd_size25);
+  }
+
+  [dir=ltr] .secondary .close {
+  right: var(--zd_size12);
+  margin: auto 0 auto var(--zd_size25);
+  }
+
+  [dir=rtl] .secondary .close {
+    left: var(--zd_size12);
+    margin: auto var(--zd_size25) auto 0;
   }

package/lib/ActionButton/ActionButton.module.css

@@ -119,7 +119,6 @@
 .btn {
   height: 100%;
   width: 100%;
-  color:var(--dot_mirror)
 }
 .popupWrapper {
   padding: var(--zd_size10) 0;

package/lib/FreezeLayer/FreezeLayer.js

@@ -17,10 +17,10 @@ var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/componen
 
 var _FreezeLayerModule = _interopRequireDefault(require("./FreezeLayer.module.css"));
 
-var _KeyboardApi = require("../utils/KeyboardApi");
-
 var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
 
+var _Config = require("../Provider/Config");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -63,10 +63,29 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
       isChildActive: false
     };
     _this.getNextIndex = (0, _ZindexProvider.getZIndex)(_assertThisInitialized(_this));
+    _this.isFreezeLayerEnabled = false;
     return _this;
   }
 
   _createClass(FreezeLayer, [{
+    key: "enableFreeze",
+    value: function enableFreeze() {
+      if (!this.isFreezeLayerEnabled) {
+        this.isFreezeLayerEnabled = true;
+        var freezeLayerEnable = ((0, _Config.getDotLibraryConfig)('freezeLayer') || {}).enable;
+        freezeLayerEnable && freezeLayerEnable();
+      }
+    }
+  }, {
+    key: "disableFreeze",
+    value: function disableFreeze() {
+      if (this.isFreezeLayerEnabled) {
+        this.isFreezeLayerEnabled = false;
+        var freezeLayerDisable = ((0, _Config.getDotLibraryConfig)('freezeLayer') || {}).disable;
+        freezeLayerDisable && freezeLayerDisable();
+      }
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var isActive = this.props.isActive;
@@ -75,6 +94,7 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
         this.setState({
           isChildActive: true
         });
+        this.enableFreeze();
       }
     }
   }, {
@@ -86,7 +106,8 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
 
       if (isActive != prevProps.isActive) {
         if (isActive) {
-          _KeyboardApi.Shortcut && _KeyboardApi.Shortcut.setState(false);
+          this.enableFreeze(); // Shortcut && Shortcut.setState(false);
+
           this.setState({
             isActive: true
           }, function () {
@@ -95,7 +116,8 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
             });
           });
         } else {
-          _KeyboardApi.Shortcut && _KeyboardApi.Shortcut.setState(true);
+          this.disableFreeze(); // Shortcut && Shortcut.setState(true);
+
           this.setState({
             isChildActive: false
           }, function () {
@@ -106,6 +128,11 @@ var FreezeLayer = /*#__PURE__*/function (_Component) {
         }
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.disableFreeze();
+    }
   }, {
     key: "render",
     value: function render() {

package/lib/Provider/Config.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDotLibraryConfig = getDotLibraryConfig;
+exports.setDotLibraryConfig = setDotLibraryConfig;
+var config = {
+  freezeLayer: {
+    enable: function enable() {},
+    disable: function disable() {}
+  }
+};
+
+function getDotLibraryConfig(key) {
+  return config[key];
+}
+
+function setDotLibraryConfig(configObj) {
+  config = Object.assign({}, config, configObj);
+}

package/lib/deprecated/utils/General.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatCurrency = formatCurrency;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function formatCurrency(number, symbol) {
+  // format number 1000000 to 1,234,567
+  if (number && number != 0) {
+    var typeOfData = _typeof(number);
+
+    var isDecimal = typeOfData == 'string' ? number.indexOf('.') != -1 : !Number.isInteger(number);
+
+    if (isDecimal) {
+      var val = number.toString().split('.');
+      var arr1 = "".concat(val[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      var finalVal = "".concat(symbol).concat(arr1, ".").concat(val[1]);
+      return finalVal;
+    } else {
+      var value = "".concat(symbol).concat(number.toString().replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ','));
+      return value;
+    }
+  }
+
+  return number;
+}

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -154,7 +154,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, isDirectCol && labelElement, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -23,8 +23,6 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
-var _General = require("../../../utils/General");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -145,7 +143,8 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
           needReadOnlyStyle = _this$props3.needReadOnlyStyle,
           isClickable = _this$props3.isClickable,
           userCurrencyType = _this$props3.userCurrencyType,
-          customProps = _this$props3.customProps;
+          customProps = _this$props3.customProps,
+          formatCurrency = _this$props3.formatCurrency;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$TextBoxP = customProps.TextBoxProps,
@@ -158,7 +157,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
       var formatValue = value;
 
       if (!isActive && value != 0) {
-        formatValue = (0, _General.formatCurrency)(value, userCurrencyType);
+        formatValue = formatCurrency(value, userCurrencyType);
       } else {
         formatValue = value;
       }
@@ -166,7 +165,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
@@ -266,7 +265,8 @@ CurrencyField.propTypes = {
     TextBoxProps: _propTypes["default"].object,
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
-  })
+  }),
+  formatCurrency: _propTypes["default"].func
 };
 CurrencyField.defaultProps = {
   errorType: 'primary',
@@ -282,7 +282,8 @@ CurrencyField.defaultProps = {
   labelCustomClass: '',
   isClickable: false,
   needReadOnlyStyle: true,
-  customProps: {}
+  customProps: {},
+  formatCurrency: function formatCurrency() {}
 };
 
 if (false) {

package/lib/form/fields/DateField/DateField.js

@@ -172,7 +172,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
       var getAriaId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -185,7 +185,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/form/fields/PhoneField/PhoneField.js

@@ -169,7 +169,7 @@ var PhoneField = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxField["default"], _extends({

package/lib/form/fields/RadioField/RadioField.js

@@ -106,7 +106,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",

package/lib/form/fields/SelectField/SelectField.js

@@ -153,7 +153,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/form/fields/TextBoxField/TextBoxField.js

@@ -147,7 +147,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/form/fields/TextEditor/TextEditor.module.css

@@ -649,7 +649,18 @@
   right: 0;
   left: 0;
 }
-.readOnly :global .KB_Editor_menus,
-.editorHide :global .KB_Editor {
+.readOnly :global .KB_Editor_menus {
   display: none !important;
 }
+.editorHide :global .KB_Editor {
+  position: absolute !important;
+  top: 0;
+  opacity: 0;
+  visibility: hidden;
+}
+[dir=ltr] .editorHide :global .KB_Editor {
+  left: 0;
+}
+[dir=rtl] .editorHide :global .KB_Editor {
+  right: 0;
+}

package/lib/form/fields/TextareaField/TextareaField.js

@@ -143,7 +143,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/list/SecondaryText/AccountName.js

@@ -82,40 +82,44 @@ 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(_Layout.Container, {
-        alignBox: "row",
-        align: "baseline",
-        isCover: false,
-        "data-title": dataTitle,
-        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: _SecondaryTextModule["default"].link
-      }, LinkProps), /*#__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"].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: _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))))));
+      return (
+        /*#__PURE__*/
+        // <Container
+        //   alignBox='row'
+        //   align='baseline'
+        //   isCover={false}
+        //   data-title={dataTitle}
+        //   dataId={dataId}
+        // >
+        // <Box flexible>
+        _react["default"].createElement("div", {
+          className: _SecondaryTextModule["default"].primaryAccountNameCnt,
+          "data-title": dataTitle,
+          "data-id": dataId
+        }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          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)
+        }, LinkProps), /*#__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"], {
+          href: secondaryAccountHref,
+          onClick: secondaryAccountClick,
+          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_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))) //   </Box>
+        // </Container>
+
+      );
     }
   }]);
 

package/lib/list/SecondaryText/ContactName.js

@@ -93,36 +93,30 @@ 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(_Layout.Container, {
-        alignBox: "row",
-        align: "baseline",
-        isCover: false,
-        dataId: dataId
-      }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _SecondaryTextModule["default"].paidUserIcon,
-        title: paidTitle
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      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"].icon
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+        iconClass: _SecondaryTextModule["default"].paidUserIcon,
+        title: paidTitle
+      }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
         urlName: urlName,
         href: href,
         urlData: urlData,
         onClick: onClick,
         title: dataTitle,
         dataId: "".concat(dataId, "_link"),
-        className: _SecondaryTextModule["default"].link
+        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
       }, LinkProps), /*#__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"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
+        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").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(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
+      }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
         type: sentimentType,
         dataTitle: sentimentDataTitle
-      })));
+      }));
     }
   }]);
 
@@ -164,7 +158,8 @@ ContactName.defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  sentimentType: 'positive'
 };
 
 if (false) {

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

@@ -1,13 +1,3 @@
-.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;
 }
@@ -67,9 +57,6 @@ display: block
 .ticketIdLink:hover, .ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
-.primaryAccountNameCnt {
-  max-width: 100%;
-}
 /* status */
 .font_regular {
   font-family: var(--zd_regular);
@@ -134,3 +121,31 @@ display: block
 .black {
   color: var(--zdt_secondaryText_black_text);
 }
+/* Contact Name */
+.contactNameCnt {
+  display: inline-grid;
+  grid-template-columns: minmax(auto,max-content) 1fr minmax(auto,max-content);
+  align-items: baseline;
+}
+.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;
+}
+/* Account Name */
+.primaryAccountNameCnt {
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: 1fr minmax(auto,max-content);
+  align-items: baseline;
+}