@zohodesk/dot 1.0.0-temp-56 → 1.0.0-temp-60

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -5,16 +5,10 @@
   --linkHoverColor: var(--zdt_commonEmptyState_default_link_hover);
 }
 .container {
-  composes: varClass;
   text-align: center;
-}
-[dir=ltr] .container {
   margin-left: auto;
   margin-right: auto;
-}
-[dir=rtl] .container {
-  margin-right: auto;
-  margin-left: auto;
+  composes: varClass;
 }
 .fluid {
   max-width: var(--zd_size430);
@@ -50,19 +44,20 @@
 .linkDescWrapper {
   margin-top: var(--zd_size20);
 }
-[dir=ltr] .linkDesc, [dir=ltr] .desc {
+.linkDesc,
+.desc {
   margin-right: var(--zd_size4);
 }
-[dir=rtl] .linkDesc, [dir=rtl] .desc {
-  margin-left: var(--zd_size4);
+.small .desc {
+  line-height: 1.58;
 }
-.desc {
-  line-height: var(--zd_size19);
+.medium .desc {
+  line-height: 1.35;
 }
 .link {
+  cursor: pointer;
   color: var(--linkColor);
   display: inline-block;
-  cursor: pointer;
 }
 .link:hover {
   color: var(--linkHoverColor);

package/es/emptystate/EditionPage/EditionPage.css

@@ -19,23 +19,17 @@
 }
 .footer {
   font-size: var(--zd_font_size13);
+  margin: var(--zd_size10) 0 var(--zd_size80) 0;
   position: relative;
   display: inline-block;
-  margin: var(--zd_size10) 0 var(--zd_size80) 0;
 }
 .footer::before {
   content: '';
-  position: absolute;
-  top: calc(var(--zd_size10) * -1);
   border-top: var(--zd_size1) solid var(--zdt_editionpage_footer_text);
-}
-[dir=ltr] .footer::before {
+  position: absolute;
   left: calc(var(--zd_size20) * -1);
   right: calc(var(--zd_size20) * -1);
-}
-[dir=rtl] .footer::before {
-  right: calc(var(--zd_size20) * -1);
-  left: calc(var(--zd_size20) * -1);
+  top: calc(var(--zd_size10) * -1);
 }
 .button {
   color: var(--zdt_editionpage_primary_text);

package/es/errorstate/EmptyStates.module.css

@@ -1,4 +1,5 @@
-.container, .tabletContainer {
+.container,
+.tabletContainer {
   text-align: center;
   background-color: var(--zdt_emptystate_default_bg);
 }
@@ -13,35 +14,28 @@
 }
 .header {
   min-width: var(--zd_size400);
-  display: inline-block;
   margin: 0 auto;
-}
-[dir=ltr] .header {
+  display: inline-block;
   text-align: left;
 }
-[dir=rtl] .header {
-  text-align: right;
-}
 .title,
 .tabletTitle,
 .mobileTitle {
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-  letter-spacing: var(--zd_size1);
-}
-.title, .tabletTitle, .mobileTitle {
   margin-bottom: var(--zd_size5);
+  letter-spacing: var(--zd_size1);
 }
 .title {
   font-size: var(--zd_font_size50);
-  line-height: var(--zd_size70);
+  line-height: 1.4;
 }
 .tabletTitle {
   font-size: var(--zd_font_size24);
-  line-height: var(--zd_size50);
+  line-height: 2.08;
 }
 .mobileTitle {
   font-size: var(--zd_font_size22);
-  line-height: var(--zd_size30);
+  line-height: 1.36;
 }
 .subtitle {
   font-size: var(--zd_font_size30);
@@ -58,14 +52,15 @@
 }
 
 .footer {
-  display: inline-block;
   text-align: center;
   margin: 0 auto;
+  display: inline-block;
 }
 .footerWidth {
   min-width: var(--zd_size400);
 }
-.btmText, .tabletBtmText {
+.btmText,
+.tabletBtmText {
   margin-bottom: var(--zd_size10);
 }
 .btmText {
@@ -74,7 +69,9 @@
 .tabletBtmText {
   font-size: var(--zd_font_size12);
 }
-.imageContainer, .tabletImageContainer, .mobileImageContainer {
+.imageContainer,
+.tabletImageContainer,
+.mobileImageContainer {
   margin-bottom: var(--zd_size30);
 }
 .imageContainer {

package/es/errorstate/Inconvenience/Inconvenience.module.css

@@ -1,7 +1,4 @@
 .imageContainer {
   margin-top: calc(var(--zd_size35) * -1);
-}[dir=ltr] .imageContainer {
   margin-left: calc(var(--zd_size30) * -1);
-}[dir=rtl] .imageContainer {
-  margin-right: calc(var(--zd_size30) * -1);
 }

package/es/errorstate/LinkText/LinkText.module.css

@@ -1,6 +1,6 @@
 .text {
   color: var(--zdt_linktext_default_text);
   display: inline-block;
-  font-size: var(--zd_font_size15);
   cursor: pointer;
+  font-size: var(--zd_font_size15);
 }

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,8 +1,8 @@
 .headtingText {
   font-family: var(--zd_semibold);
   font-size: var(--zd_font_size50);
-  letter-spacing: var(--zd_size1);
   margin-bottom: var(--zd_size5);
+  letter-spacing: var(--zd_size1);
 }
 .title,
 .headtingText,
@@ -13,9 +13,9 @@
   font-size: var(--zd_font_size30);
 }
 .lastBox {
-  line-height: var(--zd_size24);
-  font-size: var(--zd_font_size14);
   margin: 0 auto;
+  line-height: 1.71;
+  font-size: var(--zd_font_size14);
   margin-bottom: var(--zd_size20);
 }
 .lineText {

package/es/errorstate/WillBack/WillBack.module.css

@@ -16,7 +16,9 @@
 .header {
   min-width: var(--zd_size450);
 }
-.imageContainer, .tabletImageContainer, .mobileImageContainer {
+.imageContainer,
+.tabletImageContainer,
+.mobileImageContainer {
   margin-top: calc(var(--zd_size70) * -1);
   margin-bottom: var(--zd_size30);
 }

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -104,7 +104,7 @@ export default class CheckBoxField extends PureComponent {
       title: lockedInfoText
     }) : null);
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
       className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -120,7 +120,7 @@ export default class CurrencyField extends PureComponent {
 
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -128,7 +128,7 @@ export default class CurrencyField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/DateField/DateField.js

@@ -124,7 +124,7 @@ export default class DateField extends PureComponent {
     } = customProps;
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -134,7 +134,7 @@ export default class DateField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-info",

package/es/form/fields/Fields.module.css

@@ -34,38 +34,25 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
+  padding-left: var(--zd_size6);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
-[dir=ltr] .checkboxText {
-  padding-left: var(--zd_size6);
-}
-[dir=rtl] .checkboxText {
-  padding-right: var(--zd_size6);
+.cbTextReadonly {
+  cursor: not-allowed;
 }
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled, .readonly {
-  cursor: not-allowed;
+.disabled {
+  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
 }
-.cbTextReadonly,
-.disabled .fieldLabel,
-.readonly .fieldLabel {
-  --label_cursor: not-allowed;
-}
-[dir=ltr] .radio {
+.radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
 }
-[dir=rtl] .radio {
-  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32);
-}
-[dir=ltr] .duration {
+.duration {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .duration {
-  margin-left: var(--zd_size15);
-}
 .durationWidth {
   width: var(--zd_size94);
 }
@@ -79,8 +66,8 @@
 }
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
-  display: inline-block;
   margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
+  display: inline-block;
   cursor: pointer;
 }
 .phoneIcon:hover {
@@ -99,13 +86,8 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
   margin-left: var(--zd_size5);
-}
-[dir=rtl] .lockIcon, [dir=rtl] .infoIcon {
-  margin-right: var(--zd_size5);
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
 }
 /* .infoIcon {
   opacity: 0;
@@ -123,25 +105,15 @@
 }
 .timeFormat {
   font-size: var(--zd_font_size11);
-  color: var(--zdt_fields_lockicon_icon);
-}
-[dir=ltr] .timeFormat {
   margin-left: var(--zd_size4);
-}
-[dir=rtl] .timeFormat {
-  margin-right: var(--zd_size4);
+  color: var(--zdt_fields_lockicon_icon);
 }
 .newTab {
+  margin-left: var(--zd_size6);
+  cursor: pointer;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0;
   display: none;
-  cursor: pointer;
-}
-[dir=ltr] .newTab {
-  margin-left: var(--zd_size6);
-}
-[dir=rtl] .newTab {
-  margin-right: var(--zd_size6);
 }
 .newTab:hover {
   color: var(--zdt_fields_phoneicon_icon);
@@ -156,28 +128,18 @@
 }
 .labelMandatory:after {
   content: '*';
-  color: var(--zdt_fields_lockicon_hover_icon);
-}
-[dir=ltr] .labelMandatory:after {
   padding-left: var(--zd_size2);
-}
-[dir=rtl] .labelMandatory:after {
-  padding-right: var(--zd_size2);
+  color: var(--zdt_fields_lockicon_hover_icon);
 }
 .ePhiTag {
   composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
-  font-size: var(--zd_font_size12);
-  height: var(--zd_size18);
-  line-height: var(--zd_size18);
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
+  font-size: var(--zd_font_size12);
   padding: 0 var(--zd_size5);
   border-radius: var(--zd_size3);
-}
-[dir=ltr] .ePhiTag {
   margin-left: var(--zd_size8);
-}
-[dir=rtl] .ePhiTag {
-  margin-right: var(--zd_size8);
+  height: var(--zd_size18);
+  line-height: 1.5;
 }

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -136,7 +136,7 @@ export default class MultiSelectField extends PureComponent {
     let isDarkPalette = palette === 'dark';
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -146,7 +146,7 @@ export default class MultiSelectField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
       ,
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/RadioField/RadioField.js

@@ -55,14 +55,14 @@ export default class RadioField extends PureComponent {
       ValidationMessageProps2 = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: "medium",
       id: id,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`

package/es/form/fields/SelectField/SelectField.js

@@ -104,7 +104,7 @@ export default class SelectField extends PureComponent {
     } = customProps;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -112,7 +112,7 @@ export default class SelectField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -146,10 +146,10 @@ export default class TagsMultiSelect extends React.Component {
         key: index
       }, /*#__PURE__*/React.createElement(Tag, {
         text: name,
-        onRemove: isReadOnly ? null : deleteTag.bind(this, name),
+        onRemove: deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-        isReadOnly: isReadOnly
+        disabled: isReadOnly
       })) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -1,28 +1,26 @@
 .tag {
   max-width: 100%;
 }
-[dir=ltr] .moreLess, [dir=ltr] .tag {
+.moreLess,
+.tag {
   margin: 0 var(--zd_size6) var(--zd_size6) 0;
 }
-[dir=rtl] .moreLess, [dir=rtl] .tag {
-  margin: 0 0 var(--zd_size6) var(--zd_size6);
-}
 .input {
   height: var(--zd_size20);
-  width: 100%;
   margin-bottom: var(--zd_size4);
+  width: 100%;
 }
 .viewpopNew {
   max-height: var(--zd_size250);
 }
 .tagDiv {
-  max-height: var(--zd_size160);
   margin-top: var(--zd_size5);
+  max-height: var(--zd_size160);
 }
 .hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
@@ -66,15 +64,10 @@
   font-size: 0;
 }
 .newTagLabel {
+  margin-right: var(--zd_size5);
   color: var(--zdt_tagsmultiselect_labelt_text);
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .newTagLabel {
-  margin-right: var(--zd_size5);
-}
-[dir=rtl] .newTagLabel {
-  margin-left: var(--zd_size5);
-}
 .dotted {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -94,13 +87,8 @@
 .custmInp {
   position: absolute;
   top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInp {
   left: 0;
-}
-[dir=rtl] .custmInp {
-  right: 0;
+  width: 100%;
 }
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -182,7 +182,7 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: `${style.container} ${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
+    className: style.container
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "baseline",
@@ -193,7 +193,7 @@ const TagsMultiSelectField = props => {
     id: id,
     size: labelSize,
     palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
+    customClass: `${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
     dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     htmlFor: htmlId
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css

@@ -1,9 +1,6 @@
 .count {
   color: var(--zdt_tagsmultiselectField_count_text);
   font-size: var(--zd_font_size12);
-  word-break: break-word;
-}[dir=ltr] .count {
   margin-left: var(--zd_size4);
-}[dir=rtl] .count {
-  margin-right: var(--zd_size4);
+  word-break: break-word;
 }

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -97,7 +97,7 @@ export default class TextBoxField extends PureComponent {
     } = ePhiData;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -105,7 +105,7 @@ export default class TextBoxField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {