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

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -1,10 +1,13 @@
 .container {
-  padding: var(--zd_size3) var(--zd_size15);
-  margin-left: var(--zd_size15);
   position: relative;
   line-height: var(--zd_size18);
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size3) var(--zd_size15);
   cursor: pointer;
+}[dir=ltr] .container {
+  margin-left: var(--zd_size15);
+}[dir=rtl] .container {
+  margin-right: var(--zd_size15);
 }
 .container:hover {
   background: var(--zdt_selectdropzdt_selectdropdown_hover_bg down_hover_bg);
@@ -16,9 +19,14 @@
 }
 .departIcon {
   color: var(--zdt_selectdropdown_departicon);
-  margin-left: var(--zd_size5);
   cursor: pointer;
 }
+[dir=ltr] .departIcon {
+  margin-left: var(--zd_size5);
+}
+[dir=rtl] .departIcon {
+  margin-right: var(--zd_size5);
+}
 .rulesPopup {
   max-height: var(--zd_size260);
   padding: var(--zd_size10) 0;

package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -9,16 +9,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;
@@ -44,12 +51,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;
 }
@@ -70,10 +83,10 @@
 }
 .hiddenInputElement{
   width: 100%;
-  padding: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  padding: 0;
   border: 0;
 }
 .groupName {

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

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

package/es/emptystate/EditionPage/EditionPage.css

@@ -19,17 +19,23 @@
 }
 .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: '';
-  border-top: var(--zd_size1) solid var(--zdt_editionpage_footer_text);
   position: absolute;
+  top: calc(var(--zd_size10) * -1);
+  border-top: var(--zd_size1) solid var(--zdt_editionpage_footer_text);
+}
+[dir=ltr] .footer::before {
   left: calc(var(--zd_size20) * -1);
   right: calc(var(--zd_size20) * -1);
-  top: calc(var(--zd_size10) * -1);
+}
+[dir=rtl] .footer::before {
+  right: calc(var(--zd_size20) * -1);
+  left: calc(var(--zd_size20) * -1);
 }
 .button {
   color: var(--zdt_editionpage_primary_text);

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,28 +13,35 @@
 }
 .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: 1.4;
+  line-height: var(--zd_size70);
 }
 .tabletTitle {
   font-size: var(--zd_font_size24);
-  line-height: 2.08;
+  line-height: var(--zd_size50);
 }
 .mobileTitle {
   font-size: var(--zd_font_size22);
-  line-height: 1.36;
+  line-height: var(--zd_size30);
 }
 .subtitle {
   font-size: var(--zd_font_size30);
@@ -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: 1.71;
+  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/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 : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "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 : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "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: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${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 : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "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: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${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,25 +34,38 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
-  padding-left: var(--zd_size6);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
-.cbTextReadonly {
-  cursor: not-allowed;
+[dir=ltr] .checkboxText {
+  padding-left: var(--zd_size6);
+}
+[dir=rtl] .checkboxText {
+  padding-right: var(--zd_size6);
 }
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled {
-  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
+.disabled, .readonly {
+  cursor: not-allowed;
 }
-.radio {
+.cbTextReadonly,
+.disabled .fieldLabel,
+.readonly .fieldLabel {
+  --label_cursor: not-allowed;
+}
+[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);
 }
@@ -66,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 {
@@ -86,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;
@@ -105,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);
@@ -128,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: 1.5;
+}
+[dir=rtl] .ePhiTag {
+  margin-right: var(--zd_size8);
 }

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 : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "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: `${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${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 : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: "medium",
       id: id,
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${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 : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "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: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${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: deleteTag.bind(this, name),
+        onRemove: isReadOnly ? null : deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
         palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-        disabled: isReadOnly
+        isReadOnly: isReadOnly
       })) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,

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.js

@@ -182,7 +182,7 @@ const TagsMultiSelectField = props => {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: style.container
+    className: `${style.container} ${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`
   }, /*#__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: `${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
+    customClass: `${fieldStyle.fieldLabel} ${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,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);
 }

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 : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
       "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: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {