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

package/es/list/SecondaryText/AccountName.js

@@ -36,40 +36,44 @@ export default class AccountName extends Component {
       TextProps = {},
       SecondaryTextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "baseline",
-      isCover: false,
-      "data-title": dataTitle,
-      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.link
-    }, LinkProps), /*#__PURE__*/React.createElement("div", {
-      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
-      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.link
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, SecondaryTextProps), secondaryAccountText))))));
+    return (
+      /*#__PURE__*/
+      // <Container
+      //   alignBox='row'
+      //   align='baseline'
+      //   isCover={false}
+      //   data-title={dataTitle}
+      //   dataId={dataId}
+      // >
+      // <Box flexible>
+      React.createElement("div", {
+        className: style.primaryAccountNameCnt,
+        "data-title": dataTitle,
+        "data-id": dataId
+      }, /*#__PURE__*/React.createElement(React.Fragment, {
+        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}`
+      }, LinkProps), /*#__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, {
+        href: secondaryAccountHref,
+        onClick: secondaryAccountClick,
+        className: `${style.gridItem} ${style.link}`
+      }, /*#__PURE__*/React.createElement("div", _extends({
+        className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+      }, SecondaryTextProps), secondaryAccountText))) //   </Box>
+      // </Container>
+
+    );
   }
 
 }

package/es/list/SecondaryText/ContactName.js

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

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

@@ -1,10 +1,3 @@
-.paidUserIcon {
-  margin-right: var(--zd_size5);
-  vertical-align: middle;
-  bottom: var(--zd_size1);
-  position: relative;
-  font-size: var(--zd_font_size8);
-}
 .icon {
   display: block;
 }
@@ -42,11 +35,13 @@ 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,
@@ -62,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);
@@ -101,9 +93,14 @@ display: block
 }
 .happinessImg {
   width: var(--zd_size10);
-  margin: 0 var(--zd_size4) 0 0;
   vertical-align: middle;
 }
+[dir=ltr] .happinessImg {
+  margin: 0 var(--zd_size4) 0 0;
+}
+[dir=rtl] .happinessImg {
+  margin: 0 0 0 var(--zd_size4);
+}
 
 /* colors */
 .gray {
@@ -124,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;
+}

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

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

package/es/list/TagNew/TagNew.module.css

@@ -1,26 +1,33 @@
 .tagStyle {
-  border-radius: var(--zd_size14);
-  background-color: var(--zdt_tagnew_default_bg);
-  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
   min-width: var(--zd_size70);
   height: var(--zd_size28);
   font-size: var(--zd_font_size13);
   color: var(--zdt_tagnew_default_text);
-  padding: 0 var(--zd_size15);
   composes: inlineFlex from '../listCommon.module.css';
   composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
-  transform: scale(0);
   transition: all var(--zd_transition2) ease 0s;
   opacity: 0;
   visibility: hidden;
+  border-radius: var(--zd_size14);
+  background-color: var(--zdt_tagnew_default_bg);
+  box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
+  padding: 0 var(--zd_size15);
+  transform: scale(0);
   cursor: pointer;
 }
 
 .bounceIn {
-  transform: scale(1);
-  animation: bounceIn 700ms;
   visibility: visible;
   opacity: 1;
+  transform: scale(1);
+}
+
+[dir=ltr] .bounceIn {
+  animation: bounceIn 700ms;
+}
+
+[dir=rtl] .bounceIn {
+  animation: bounceIn 700ms;
 }
 
 @keyframes bounceIn {

package/es/list/Thread/Thread.module.css

@@ -16,9 +16,15 @@
 .align_left .count {
   position: absolute;
   line-height: normal;
+  top: var(--zd_size3);
+}
+[dir=ltr] .align_left .count {
   text-align: left;
   left: var(--zd_size8);
-  top: var(--zd_size3);
+}
+[dir=rtl] .align_left .count {
+  text-align: right;
+  right: var(--zd_size8);
 }
 .align_right {
   composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
@@ -26,6 +32,12 @@
 .align_right .count {
   position: relative;
   bottom: var(--zd_size2);
+}
+[dir=ltr] .align_right .count {
   right: var(--zd_size5);
   float: right;
+}
+[dir=rtl] .align_right .count {
+  left: var(--zd_size5);
+  float: left;
 }

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

@@ -31,9 +31,15 @@
 }
 .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)

package/es/list/listCommon.module.css

@@ -5,9 +5,12 @@
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
-.avatarMargin {
+[dir=ltr] .avatarMargin {
   margin-right: var(--zd_size25);
 }
+[dir=rtl] .avatarMargin {
+  margin-left: var(--zd_size25);
+}
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   font-size: var(--zd_font_size16);
@@ -18,8 +21,13 @@
 }
 .statusColumn {
   composes: inlineBlockMiddle;
+}
+[dir=ltr] .statusColumn {
   text-align: right;
 }
+[dir=rtl] .statusColumn {
+  text-align: left;
+}
 .classic .floatingIconContainer {
   display: none;
 }

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -11,16 +11,23 @@
 .title {
   padding-top: var(--zd_size6);
 }
-.default_arrow,
-.overlay_arrow {
+[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
   padding: 0 0 0 var(--zd_size5);
 }
+[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
+  padding: 0 var(--zd_size5) 0 0;
+}
 .overlay_arrow {
   position: absolute;
-  left: 100%;
   top: 50%;
   transform: translateY(-50%) perspective(1px);
 }
+[dir=ltr] .overlay_arrow {
+  left: 100%;
+}
+[dir=rtl] .overlay_arrow {
+  right: 100%;
+}
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
@@ -47,12 +54,18 @@
 .cursor {
   cursor: pointer;
 }
-.dropBoxContainer {
+[dir=ltr] .dropBoxContainer {
   text-align: left;
 }
-.iconBox {
+[dir=rtl] .dropBoxContainer {
+  text-align: right;
+}
+[dir=ltr] .iconBox {
   margin-right: var(--zd_size4);
 }
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size4);
+}
 .iconBox > i {
   display: block;
 }
@@ -61,8 +74,8 @@
   margin: 0 auto;
 }
 .seperatedLine {
-  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   height: var(--zd_size1);
+  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   margin: var(--zd_size9) 0 var(--zd_size10);
 }
 .hiddenInput {

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -2,46 +2,56 @@
   color: var(--zdt_statuslistitem_list_text);
   font-size: var(--zd_font_size13);
   position: relative;
-  cursor: pointer;
   list-style: none;
+  cursor: pointer;
 }
-.withBorder {
+[dir=ltr] .withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
 }
-.small {
+[dir=rtl] .withBorder {
+  border-right: 1px solid var(--zdt_statuslistitem_default_border);
+}
+[dir=ltr] .small {
   padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
 }
+[dir=rtl] .small {
+  padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+}
 .medium {
   padding: var(--zd_size9) var(--zd_size20);
 }
 .large {
-  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
   height: var(--zd_size48);
 }
+[dir=ltr] .large {
+  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
+}
+[dir=rtl] .large {
+  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+}
 
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 
-.withBorder.active {
+[dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
 }
 
-.default.hover,
-.default.effect:hover {
+[dir=rtl] .withBorder.active {
+  border-right-color: var(--zdt_statuslistitem_default_active_border);
+}
+
+.default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
-.primary.hover,
-.primary.effect:hover,
-.selected {
+.primary.hover, .primary.effect:hover, .selected {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-.secondary.hover,
-.secondary.effect:hover {
+.secondary.hover, .secondary.effect:hover {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-.list.active.default,
-.list.active.primary {
+.list.active.default, .list.active.primary {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
 .list.active.secondary {
@@ -55,21 +65,34 @@
 .tickIcon {
   color: var(--zdt_statuslistitem_tickicon);
   position: absolute;
+}
+[dir=ltr] .tickIcon {
   right: var(--zd_size20);
 }
+[dir=rtl] .tickIcon {
+  left: var(--zd_size20);
+}
 .tickIcon > i {
   display: block;
 }
-.active.withTick {
+[dir=ltr] .active.withTick {
   padding-right: var(--zd_size39);
 }
+[dir=rtl] .active.withTick {
+  padding-left: var(--zd_size39);
+}
 /* Status Type */
 .statusType {
   width: var(--zd_size8);
   height: var(--zd_size8);
   border-radius: 50%;
+}
+[dir=ltr] .statusType {
   margin-right: var(--zd_size13);
 }
+[dir=rtl] .statusType {
+  margin-left: var(--zd_size13);
+}
 .black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }

package/es/lookup/Lookup/Lookup.module.css

@@ -1,12 +1,12 @@
 .container {
-  padding-bottom: var(--zd_size10);
   font-size: var(--zd_font_size16);
+  padding-bottom: var(--zd_size10);
 }
 .box {
   position: relative;
-  margin: auto;
   height: 100%;
   width: 100%;
+  margin: auto;
 }
 /* Size */
 .smallSize {

package/es/lookup/Section/LookupSection.module.css

@@ -1,8 +1,8 @@
 .section {
   max-height: 80%;
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  background-color: var(--zdt_lookupsection_bg);
   min-height: var(--zd_size390);
   height: auto;
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  background-color: var(--zdt_lookupsection_bg);
   box-shadow: 0px 4px 20px var(--zdt_lookupsection_box_shadow);
 }

package/es/lookup/header/Close/LookupClose.module.css

@@ -1,15 +1,15 @@
 .container {
-  text-align: center;
   width: var(--zd_size25);
   height: var(--zd_size25);
   line-height: var(--zd_size25);
-  cursor: pointer;
-  border-radius: 50%;
   color: var(--zdt_lookupclose_default_text);
   transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
   font-size: var(--zd_font_size9);
+  text-align: center;
+  cursor: pointer;
+  border-radius: 50%;
 }
 .container:hover {
-  background-color: var(--zdt_lookupclose_default_hover_bg);
   color: var(--zdt_lookupclose_default_hover_text);
+  background-color: var(--zdt_lookupclose_default_hover_bg);
 }

package/es/lookup/header/Search/LookupSearch.module.css

@@ -3,16 +3,16 @@
   transition: var(--zd_transition1);
   width: var(--zd_size96);
   height: var(--zd_size28);
-  background: none;
   position: relative;
+}.searchStyle, .boxStyle {
+  background: none;
 }
 .boxStyle {
   width: var(--zd_size160);
   border-radius: 4px;
   border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.searchStyle:hover,
-.boxStyle:hover {
+.searchStyle:hover, .boxStyle:hover {
   border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
 .focusWidth {
@@ -20,29 +20,38 @@
 }
 .drpSearchBox {
   position: relative;
-  cursor: pointer;
   height: var(--zd_size28);
+  cursor: pointer;
 }
 .drpSearchBox::after {
   content: '';
-  right: calc(var(--zd_size1) * -1);
   position: absolute;
   top: var(--zd_size8);
   bottom: var(--zd_size8);
+}
+[dir=ltr] .drpSearchBox::after {
+  right: calc(var(--zd_size1) * -1);
   border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.inputBox,
-.drpSearchBox {
+[dir=rtl] .drpSearchBox::after {
+  left: calc(var(--zd_size1) * -1);
+  border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
+}
+.inputBox, .drpSearchBox {
   padding: 0 var(--zd_size9);
 }
-.searchIconBox {
+[dir=ltr] .searchIconBox {
   padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9);
 }
-.active,
-.boxStyle.active,
-.lineActive.drpSearchBox::after {
+[dir=rtl] .searchIconBox {
+  padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0;
+}
+.active, .boxStyle.active, .lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
-.iconArrow {
+[dir=ltr] .iconArrow {
   margin-left: var(--zd_size5);
 }
+[dir=rtl] .iconArrow {
+  margin-right: var(--zd_size5);
+}

package/es/lookup/header/TicketHeader/TicketHeader.module.css

@@ -2,12 +2,15 @@
   margin: 0 var(--zd_size20);
 }
 /* Responsive */
-.small .searchContainer {
+[dir=ltr] .small .searchContainer {
   text-align: left;
 }
+[dir=rtl] .small .searchContainer {
+  text-align: right;
+}
 .small .searchContainer input {
-  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
   width: var(--zd_size193);
+  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
 }
 .small .innerContainer,
 .extraSmall .innerContainer {

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -9,10 +9,10 @@
 }
 .emptyState {
   font-size: var(--zd_font_size14);
-  padding: var(--zd_size12) var(--zd_size15);
   color: var(--zdt_viewdropdown_empty_text);
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size12) var(--zd_size15);
 }
 .hide {
   composes: vishidden from '~@zohodesk/components/lib/common/common.module.css';
@@ -27,15 +27,20 @@
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   line-height: var(--zd_size20);
-  cursor: pointer;
   color: var(--zdt_viewdropdown_label_text);
+  cursor: pointer;
 }
 .labelText {
   font-size: var(--zd_font_size12);
-  margin-right: var(--zd_size5);
   max-width: var(--zd_size180);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .labelText {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .labelText {
+  margin-left: var(--zd_size5);
+}
 .labelCnt:hover .arrowIcon {
   color: var(--zdt_viewdropdown_hover_label_text);
 }