@zohodesk/dot 1.0.0-temp-107 → 1.0.0-temp-109

package/es/errorstate/EmptyStates.module.css

@@ -1,5 +1,4 @@
-.container,
-.tabletContainer {
+.container, .tabletContainer {
   text-align: center;
   background-color: var(--zdt_emptystate_default_bg);
 }
@@ -14,17 +13,24 @@
 }
 .header {
   min-width: var(--zd_size400);
-  margin: 0 auto;
   display: inline-block;
+  margin: 0 auto;
+}
+[dir=ltr] .header {
   text-align: left;
 }
+[dir=rtl] .header {
+  text-align: right;
+}
 .title,
 .tabletTitle,
 .mobileTitle {
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-  margin-bottom: var(--zd_size5);
   letter-spacing: var(--zd_size1);
 }
+.title, .tabletTitle, .mobileTitle {
+  margin-bottom: var(--zd_size5);
+}
 .title {
   font-size: var(--zd_font_size50);
   line-height: var(--zd_size70);
@@ -52,15 +58,14 @@
 }
 
 .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 {
@@ -69,9 +74,7 @@
 .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,4 +1,7 @@
 .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;
-  cursor: pointer;
   font-size: var(--zd_font_size15);
+  cursor: pointer;
 }

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

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

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

@@ -16,9 +16,7 @@
 .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/Fields.module.css

@@ -34,15 +34,19 @@
   -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);
+}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled,
-.readonly {
+.disabled, .readonly {
   cursor: not-allowed;
 }
 .cbTextReadonly,
@@ -50,12 +54,18 @@
 .readonly .fieldLabel {
   --label_cursor: not-allowed;
 }
-.radio {
+[dir=ltr] .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
 }
-.duration {
+[dir=rtl] .radio {
+  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32);
+}
+[dir=ltr] .duration {
   margin-right: var(--zd_size15);
 }
+[dir=rtl] .duration {
+  margin-left: var(--zd_size15);
+}
 .durationWidth {
   width: var(--zd_size94);
 }
@@ -69,8 +79,8 @@
 }
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
-  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
   display: inline-block;
+  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
   cursor: pointer;
 }
 .phoneIcon:hover {
@@ -89,9 +99,14 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  margin-left: var(--zd_size5);
   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);
+}
 /* .infoIcon {
   opacity: 0;
   visibility: hidden;
@@ -108,15 +123,25 @@
 }
 .timeFormat {
   font-size: var(--zd_font_size11);
-  margin-left: var(--zd_size4);
   color: var(--zdt_fields_lockicon_icon);
 }
+[dir=ltr] .timeFormat {
+  margin-left: var(--zd_size4);
+}
+[dir=rtl] .timeFormat {
+  margin-right: var(--zd_size4);
+}
 .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);
@@ -131,18 +156,28 @@
 }
 .labelMandatory:after {
   content: '*';
-  padding-left: var(--zd_size2);
   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);
+}
 .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);
-  height: var(--zd_size18);
-  line-height: var(--zd_size18);
+}
+[dir=rtl] .ePhiTag {
+  margin-right: var(--zd_size8);
 }

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

@@ -140,7 +140,7 @@ export default class MultiSelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
-      id: uniqueId,
+      id: id,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette
       // onClick={this.handleLabelClick}

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

@@ -94,7 +94,8 @@ export default class SelectField extends PureComponent {
       onFocus,
       iconOnHover,
       customProps,
-      renderLabelProps
+      renderLabelProps,
+      ariaLabelledby
     } = this.props;
     const {
       LabelProps = {},
@@ -118,7 +119,9 @@ export default class SelectField extends PureComponent {
       customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps))), /*#__PURE__*/React.createElement("div", {
+    }, LabelProps, {
+      id: uniqueId
+    }))), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
     }, /*#__PURE__*/React.createElement(Select, _extends({
       options: options,
@@ -150,7 +153,9 @@ export default class SelectField extends PureComponent {
       isDefaultSelectValue: isDefaultSelectValue,
       placeHolder: placeHolder,
       iconOnHover: iconOnHover
-    }, SelectProps), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    }, SelectProps, {
+      ariaLabelledby: uniqueId
+    }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,
       type: errorType,

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

@@ -1,26 +1,28 @@
 .tag {
   max-width: 100%;
 }
-.moreLess,
-.tag {
+[dir=ltr] .moreLess, [dir=ltr] .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);
-  margin-bottom: var(--zd_size4);
   width: 100%;
+  margin-bottom: var(--zd_size4);
 }
 .viewpopNew {
   max-height: var(--zd_size250);
 }
 .tagDiv {
-  margin-top: var(--zd_size5);
   max-height: var(--zd_size160);
+  margin-top: var(--zd_size5);
 }
 .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);
@@ -64,10 +66,15 @@
   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';
 }
@@ -87,9 +94,14 @@
 .custmInp {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
 }
+[dir=ltr] .custmInp {
+  left: 0;
+}
+[dir=rtl] .custmInp {
+  right: 0;
+}
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);
 }

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

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