@zohodesk/dot 1.0.0-temp-39 → 1.0.0-temp-43

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/SecondaryText/AccountName.js

@@ -1,3 +1,5 @@
+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 ****/
@@ -26,8 +28,14 @@ export default class AccountName extends Component {
       fontWeight,
       secondaryAccountHref,
       secondaryAccountClick,
-      secondaryAccountText
+      secondaryAccountText,
+      customProps
     } = this.props;
+    let {
+      LinkProps = {},
+      TextProps = {},
+      SecondaryTextProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "baseline",
@@ -44,24 +52,24 @@ export default class AccountName extends Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.primaryAccountName,
       shrink: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       urlName: urlName,
       urlData: urlData,
       onClick: onClick,
       dataId: `${dataId}_link`,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
-    }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+    }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,
       onClick: secondaryAccountClick,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, secondaryAccountText))))));
+    }, SecondaryTextProps), secondaryAccountText))))));
   }
 
 }
@@ -79,12 +87,18 @@ AccountName.propTypes = {
   urlName: PropTypes.string,
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
-  secondaryAccountText: PropTypes.string
+  secondaryAccountText: PropTypes.string,
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object,
+    SecondaryTextProps: PropTypes.object
+  })
 };
 AccountName.defaultProps = {
   isLink: true,
   dataId: 'accountName',
-  fontWeight: 'regular'
+  fontWeight: 'regular',
+  customProps: {}
 };
 
 if (false) {

package/es/list/SecondaryText/ContactName.js

@@ -1,3 +1,5 @@
+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 { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -21,7 +23,8 @@ export default class ContactName extends Component {
       href,
       notAccessible = false,
       fontWeight,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
     let {
       sentimentTitles = {
@@ -32,6 +35,10 @@ export default class ContactName extends Component {
       paidTitle = 'Paid User'
     } = i18nKeys;
     let sentimentDataTitle = sentimentTitles[sentimentType];
+    let {
+      LinkProps = {},
+      TextProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "baseline",
@@ -45,7 +52,7 @@ export default class ContactName extends Component {
       iconClass: style.icon
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
@@ -53,12 +60,12 @@ export default class ContactName extends Component {
       title: dataTitle,
       dataId: `${dataId}_link`,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       "data-title": dataTitle
-    }, text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
+    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle
     })));
@@ -87,6 +94,10 @@ ContactName.propTypes = {
       neutral: PropTypes.string
     }),
     paidTitle: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object
   })
 };
 ContactName.defaultProps = {
@@ -94,7 +105,8 @@ ContactName.defaultProps = {
   isLink: true,
   dataId: 'contactName',
   fontWeight: 'regular',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };
 
 if (false) {

package/es/list/SecondaryText/Email.js

@@ -1,3 +1,5 @@
+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 ****/
@@ -20,21 +22,26 @@ export default class Email extends Component {
       href,
       isLink,
       target,
-      fontWeight
+      fontWeight,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    let {
+      LinkProps = {},
+      TextProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       title: title,
       urlData: urlData,
       urlName: urlName,
       target: target,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.secondaryText}  ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title
-    }, text));
+    }, TextProps), text));
   }
 
 }
@@ -47,11 +54,16 @@ Email.propTypes = {
   text: PropTypes.string,
   title: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object
+  })
 };
 Email.defaultProps = {
   isLink: true,
-  fontWeight: 'regular'
+  fontWeight: 'regular',
+  customProps: {}
 };
 
 if (false) {

package/es/list/SecondaryText/PhoneNumber.js

@@ -1,3 +1,5 @@
+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 ****/
@@ -22,9 +24,14 @@ export default class PhoneNumber extends Component {
       isLink,
       target,
       hasReload,
-      fontWeight
+      fontWeight,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    let {
+      LinkProps = {},
+      TextProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       title: title,
       urlData: urlData,
@@ -33,12 +40,12 @@ export default class PhoneNumber extends Component {
       target: target,
       hasReload: hasReload,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.phoneNumber} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title
-    }, text));
+    }, TextProps), text));
   }
 
 }
@@ -53,12 +60,17 @@ PhoneNumber.propTypes = {
   text: PropTypes.string,
   title: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object
+  })
 };
 PhoneNumber.defaultProps = {
   isLink: true,
   hasReload: false,
-  fontWeight: 'regular'
+  fontWeight: 'regular',
+  customProps: {}
 };
 
 if (false) {

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_size10);
-  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 */

package/es/list/SecondaryText/TicketId.js

@@ -1,3 +1,5 @@
+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 Link from '../../Link/Link';
@@ -18,20 +20,25 @@ export default class TicketId extends Component {
       url,
       target,
       urlName,
-      urlData
+      urlData,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    let {
+      LinkProps = {},
+      TicketIdProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
       "data-id": dataId,
       "data-title": dataTitle,
       onClick: !isLink && onClick
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+    }, TicketIdProps), isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       urlData: urlData,
       href: url,
       target: target,
       onClick: onClick
-    }, text) : text);
+    }, LinkProps), text) : text);
   }
 
 }
@@ -45,10 +52,15 @@ TicketId.propTypes = {
   text: PropTypes.string,
   url: PropTypes.string,
   urlData: PropTypes.string,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps: PropTypes.shape({
+    TicketIdProps: PropTypes.object,
+    LinkProps: PropTypes.object
+  })
 };
 TicketId.defaultProps = {
-  dataId: 'ticketId'
+  dataId: 'ticketId',
+  customProps: {}
 };
 
 if (false) {

package/es/list/SecondryPanel/docs/SecondryPanelDocs.module.css

@@ -15,10 +15,10 @@
 }
 .itemInner {
   composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  max-width: var(--zd_size240);
-  font-size: 13px;
   padding: 5px;
   background: #fafafa;
+  max-width: var(--zd_size240);
+  font-size: 13px;
 }
 .itemText {
   composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/lib/common/common.module.css';

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

@@ -1,10 +1,7 @@
 .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/Subject/Subject.js

@@ -1,3 +1,5 @@
+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 Link from '../../Link/Link';
@@ -20,9 +22,14 @@ export default class Subject extends Component {
       fontWeight,
       className,
       isDotted,
-      children
+      children,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    let {
+      LinkProps = {},
+      TextProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
@@ -31,11 +38,11 @@ export default class Subject extends Component {
       dataId: dataId,
       title: text,
       target: target
-    }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
+    }, LinkProps), children ? children : text) : /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]}`,
       "data-title": text,
       "data-id": dataId
-    }, text));
+    }, TextProps), text));
   }
 
 }
@@ -51,13 +58,18 @@ Subject.propTypes = {
   urlData: PropTypes.object,
   urlName: PropTypes.string,
   isDotted: PropTypes.bool,
-  children: PropTypes.node
+  children: PropTypes.node,
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object
+  })
 };
 Subject.defaultProps = {
   isLink: false,
   fontWeight: 'regular',
   className: '',
-  isDotted: true
+  isDotted: true,
+  customProps: {}
 };
 
 if (false) {

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

@@ -1,33 +1,26 @@
 .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 {
-  visibility: visible;
-  opacity: 1;
   transform: scale(1);
-}
-
-[dir=ltr] .bounceIn {
-  animation: bounceIn 700ms;
-}
-
-[dir=rtl] .bounceIn {
   animation: bounceIn 700ms;
+  visibility: visible;
+  opacity: 1;
 }
 
 @keyframes bounceIn {

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

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

@@ -73,7 +73,7 @@ export default class UserTime extends Component {
 UserTime.propTypes = {
   ago: PropTypes.string,
   containerClass: PropTypes.string,
-  dataId: PropTypes.dtring,
+  dataId: PropTypes.string,
   format: PropTypes.func,
   icon: PropTypes.oneOf(['closedTime', 'overdue', 'createdTime', 'completedTask', 'dueTime']),
   iconClass: PropTypes.string,

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

@@ -31,15 +31,9 @@
 }
 .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,12 +5,9 @@
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .avatarMargin {
+.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);
@@ -21,13 +18,8 @@
 }
 .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.js

@@ -301,7 +301,7 @@ export class StatusDropdown extends React.Component {
       tagName: "button",
       alignBox: "row",
       className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
-      onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,
+      onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
       eleRef: getTargetRef,
       align: targetAlign,
       isCover: false,

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

@@ -11,23 +11,16 @@
 .title {
   padding-top: var(--zd_size6);
 }
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
+.default_arrow,
+.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;
@@ -54,18 +47,12 @@
 .cursor {
   cursor: pointer;
 }
-[dir=ltr] .dropBoxContainer {
+.dropBoxContainer {
   text-align: left;
 }
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
-}
-[dir=ltr] .iconBox {
+.iconBox {
   margin-right: var(--zd_size4);
 }
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4);
-}
 .iconBox > i {
   display: block;
 }
@@ -74,8 +61,8 @@
   margin: 0 auto;
 }
 .seperatedLine {
-  height: var(--zd_size1);
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
+  height: var(--zd_size1);
   margin: var(--zd_size9) 0 var(--zd_size10);
 }
 .hiddenInput {