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

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

@@ -180,7 +180,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",
@@ -191,7 +191,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,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,15 +97,15 @@ export default class TextBoxField extends PureComponent {
     } = ePhiData;
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
-      "data-title": isDisabled ? title : ''
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
     }, /*#__PURE__*/React.createElement(Label, _extends({
       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/TextEditor/TextEditor.js

@@ -21,7 +21,8 @@ export default class TextEditor extends Component {
     super(props);
     this.state = {
       isEditorLoad: false,
-      isResourceLoaded: false
+      isResourceLoaded: false,
+      isEditorShow: false
     };
     let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
     bind.apply(this, methods);
@@ -199,7 +200,8 @@ export default class TextEditor extends Component {
       isCustomScroll
     } = this.props;
     this.setState({
-      isEditorLoad: true
+      isEditorLoad: true,
+      isEditorShow: true
     });
     let {
       id
@@ -232,7 +234,7 @@ export default class TextEditor extends Component {
 
       if (isCustomScroll) {
         let link = document.createElement('style');
-        link.innerText = ".scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
+        link.innerText = "body{font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 0}.scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
         iframeHead.appendChild(link);
         iframe.classList.add('scroll');
       }
@@ -377,12 +379,13 @@ export default class TextEditor extends Component {
       isReadOnly
     } = this.props;
     let {
-      isEditorLoad
+      isEditorLoad,
+      isEditorShow
     } = this.state;
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]} 
-        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''}`,
+        ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${!isEditorShow ? styles.editorHide : ''}`,
       dataId: dataId,
       "data-isEditor": true
     }, loadingComponent && !isEditorLoad ? loadingComponent : null, /*#__PURE__*/React.createElement(Box, {

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

@@ -17,13 +17,8 @@
 }
 .threeDotIcon {
   display: inline-block;
-}
-[dir=ltr] .threeDotIcon {
   transform: rotate(90deg);
 }
-[dir=rtl] .threeDotIcon {
-  transform: rotate(-90deg);
-}
 .textEditor * {
   box-sizing: initial;
   line-height: initial;
@@ -37,31 +32,59 @@
   box-sizing: border-box;
 }
 .light :global .KB_Editor {
-  color: var(--zdt_texteditor_default_text);
   background-color: var(--zdt_texteditor_default_bg);
+  color: var(--zdt_texteditor_default_text);
 }
 .night :global .KB_Editor {
-  color: var(--zdt_texteditor_night_text);
   background-color: var(--zdt_texteditor_night_bg);
+  color: var(--zdt_texteditor_night_text);
 }
-.small :global .KB_Editor_menus, .medium :global .KB_Editor_menus, .large :global .KB_Editor_menus, .xlarge :global .KB_Editor_menus, .default :global .KB_Editor_menus {
+.small :global .KB_Editor_menus,
+.medium :global .KB_Editor_menus,
+.large :global .KB_Editor_menus,
+.xlarge :global .KB_Editor_menus,
+.default :global .KB_Editor_menus {
   background-color: var(--zdt_texteditor_menu_bg);
   box-shadow: none;
 }
-.medium.borderTop :global .KB_Editor, .large.borderTop :global .KB_Editor, .xlarge.borderTop :global .KB_Editor, .default.borderTop :global .KB_Editor {
+.medium.borderTop :global .KB_Editor,
+.large.borderTop :global .KB_Editor,
+.xlarge.borderTop :global .KB_Editor,
+.default.borderTop :global .KB_Editor {
   border: 0;
   border-top: 1px solid var(--zdt_texteditor_default_border);
 }
-.medium.borderAll :global .KB_Editor, .large.borderAll :global .KB_Editor, .xlarge.borderAll :global .KB_Editor, .default.borderAll :global .KB_Editor {
+.medium.borderAll :global .KB_Editor,
+.large.borderAll :global .KB_Editor,
+.xlarge.borderAll :global .KB_Editor,
+.default.borderAll :global .KB_Editor {
   border: solid 1px var(--zdt_texteditor_default_border);
 }
 
-.medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type, .medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.TextSize_Type, .medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Text_Type, .large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type, .large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.TextSize_Type, .large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Text_Type, .xlarge :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type, .xlarge :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.TextSize_Type, .xlarge :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Text_Type, .default :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type, .default :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.TextSize_Type, .default :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Text_Type {
+.medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type,
+.medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.TextSize_Type,
+.medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Text_Type,
+.large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type,
+.large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.TextSize_Type,
+.large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Text_Type,
+.xlarge :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type,
+.xlarge :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.TextSize_Type,
+.xlarge :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Text_Type,
+.default :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type,
+.default :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.TextSize_Type,
+.default :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Text_Type {
   border: solid 1px var(--zdt_texteditor_default_border);
   background-color: transparent;
 }
 
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .medium :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext, .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext, .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
   background-color: transparent;
 }
 
@@ -75,11 +98,8 @@
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
-  color: var(--zdt_texteditor_default_text);
-}
-
-.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
   background-color: var(--zdt_texteditor_menu_li_bg);
+  color: var(--zdt_texteditor_default_text);
 }
 
 .textEditor :global .KB_Editor_MultiTools li .Kbeditor_more_icon svg {
@@ -128,8 +148,6 @@
 .default :global .KB_Editor_menus {
   min-height: unset; /* check point 1 */
   flex: 0 0 auto;
-}
-.large :global .KB_Editor_menus, .default :global .KB_Editor_menus {
   padding: var(--zd_size6);
   border-bottom: 0;
 }
@@ -141,26 +159,20 @@
 }
 .large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+  padding: 0;
+  float: unset;
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-}
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
-  padding: 0;
-  float: unset;
-}
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: 0;
 }
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
-  margin-left: 0;
-}
 .large :global .KB_Editor_menus .KB_Editor_MultiTools li span,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools li span {
   line-height: 0;
 }
-.large :global .KB_Editor_menus .KB_Editor_MultiTools li.fright, .defaults :global .KB_Editor_menus .KB_Editor_MultiTools li.fright {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools li.fright,
+.defaults :global .KB_Editor_menus .KB_Editor_MultiTools li.fright {
   float: unset !important;
 }
 .large :global .KB_Editor_menus > ul > li > span > svg,
@@ -176,10 +188,8 @@
 .large :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg,
 .default :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg {
   height: var(--zd_size10);
-  width: var(--zd_size17);
-}
-.large :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg, .default :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg {
   padding: var(--zd_size7) var(--zd_size5);
+  width: var(--zd_size17);
 }
 .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Bdr_div,
 .large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type,
@@ -190,27 +200,18 @@
 .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
   line-height: unset;
-}
-.large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Bdr_div, .large :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type, .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .large :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext, .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Bdr_div, .default :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type, .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .default :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
   padding: var(--zd_size3) var(--zd_size6);
 }
 .large :global .KB_Editor_menus .ze_spell,
 .default :global .KB_Editor_menus .ze_spell {
   top: initial;
   bottom: calc(var(--zd_size32) * -1);
-}
-[dir=ltr] .large :global .KB_Editor_menus .ze_spell, [dir=ltr] .default :global .KB_Editor_menus .ze_spell {
   right: 0;
 }
-[dir=rtl] .large :global .KB_Editor_menus .ze_spell, [dir=rtl] .default :global .KB_Editor_menus .ze_spell {
-  left: 0;
-}
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: var(--zd_size2);
 }
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
-  margin-left: var(--zd_size2);
-}
 
 /* xlarge type editor - reply area, blue print cases - full height hover style */
 .xlarge :global .KB_Editor,
@@ -242,8 +243,8 @@
 }
 .xlarge :global .KB_Editor_menus {
   min-height: 37px; /* check point 1 */
-  flex: 0 0 auto;
   padding: 0;
+  flex: 0 0 auto;
 }
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools {
   -ms-flex-wrap: wrap;
@@ -251,19 +252,14 @@
   min-height: inherit;
 }
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+  padding: 0;
+  float: unset;
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 0;
-  float: unset;
-}
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: 0;
 }
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
-  margin-left: 0;
-}
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools li span {
   line-height: 0;
 }
@@ -271,8 +267,6 @@
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText,
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
   line-height: 0;
-}
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Bdr_div, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
   padding: var(--zd_size6);
 }
 .xlarge :global .KB_Editor_menus > ul > li > span > svg {
@@ -285,29 +279,24 @@
 }
 .xlarge :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg {
   height: var(--zd_size9);
-  width: var(--zd_size17);
   padding: var(--zd_size7) var(--zd_size5);
+  width: var(--zd_size17);
 }
 .xlarge :global .KB_Editor_menus .ze_spell {
   top: initial;
   bottom: -32px;
-}
-[dir=ltr] .xlarge :global .KB_Editor_menus .ze_spell {
   right: 0;
 }
-[dir=rtl] .xlarge :global .KB_Editor_menus .ze_spell {
-  left: 0;
-}
 
 .xlarge :global .KB_Editor_menus > ul > li > span.SnippetIcon svg {
   width: var(--zd_size17);
-  height: var(--zd_size21);
   padding: 0 var(--zd_size7);
+  height: var(--zd_size21);
 }
 .xlarge :global .KB_Editor_menus > ul > li > span.TemplateIcon svg {
   width: var(--zd_size16);
-  height: var(--zd_size16);
   padding: 0 var(--zd_size9);
+  height: var(--zd_size16);
 }
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .SnippetIcon {
   position: relative;
@@ -317,16 +306,10 @@
   position: absolute;
   height: 100%;
   width: var(--zd_size1);
-  top: 0;
-}
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .SnippetIcon::after {
   border-right: 1px solid var(--zdt_texteditor_default_border);
+  top: 0;
   right: 0;
 }
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .SnippetIcon::after {
-  border-left: 1px solid var(--zdt_texteditor_default_border);
-  left: 0;
-}
 .xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon {
   top: initial;
   padding: 0 var(--zd_size7);
@@ -354,18 +337,12 @@
   height: var(--zd_size21);
   padding: 0 var(--zd_size4);
 }
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText {
   padding: var(--zd_size8) var(--zd_size8) var(--zd_size7) var(--zd_size4);
 }
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_PlainText {
-  padding: var(--zd_size8) var(--zd_size4) var(--zd_size7) var(--zd_size8);
-}
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
   padding: var(--zd_size8) var(--zd_size4) var(--zd_size7) var(--zd_size8);
 }
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools .KB_Editor_Richtext {
-  padding: var(--zd_size8) var(--zd_size8) var(--zd_size7) var(--zd_size4);
-}
 
 /* medium type editor - snippet, bug tracker cases */
 .medium :global .KB_Editor,
@@ -407,12 +384,12 @@
   min-height: inherit;
 }
 .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+  padding: var(--zd_size3) var(--zd_size1);
+  float: unset;
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: var(--zd_size3) var(--zd_size1);
-  float: unset;
 }
 .medium :global .KB_Editor_menus .KB_Editor_MultiTools li span {
   line-height: 0;
@@ -424,38 +401,24 @@
 .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   width: var(--zd_size8);
   height: var(--zd_size8);
-}
-[dir=ltr] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   padding: 0 0 0 var(--zd_size2);
 }
-[dir=rtl] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
-  padding: 0 var(--zd_size2) 0 0;
-}
 .medium :global .KB_Editor_MultiTools .KBEditortools-Block-down-arrow svg {
   height: var(--zd_size10);
-  width: var(--zd_size17);
   padding: var(--zd_size7) var(--zd_size2);
+  width: var(--zd_size17);
 }
 .medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div,
 .medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type {
   line-height: 0;
-}
-.medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div, .medium :global .KB_Editor_MultiTools .KB_Editor_Bdr_div.Insert_Type {
   padding: var(--zd_size7);
 }
 
 .medium :global .KB_Editor_menus .ze_spell {
   top: initial;
   bottom: calc(var(--zd_size32) * -1);
-}
-
-[dir=ltr] .medium :global .KB_Editor_menus .ze_spell {
   right: 0;
 }
-
-[dir=rtl] .medium :global .KB_Editor_menus .ze_spell {
-  left: 0;
-}
 .medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon {
   top: initial;
   padding: 0 var(--zd_size3);
@@ -469,8 +432,6 @@
 .small :global .KB_Editor,
 .mini :global .KB_Editor {
   height: 100%;
-}
-.small :global .KB_Editor, .mini :global .KB_Editor {
   border: 0;
 }
 .small :global .KB_Editor_iframe,
@@ -479,29 +440,27 @@
   min-height: var(--zd_size80);
   height: var(--zd_size80);
 }
-.small.borderNone :global .KB_Editor, .mini.borderNone :global .KB_Editor, .medium.borderNone :global .KB_Editor, .large.borderNone :global .KB_Editor, .xlarge.borderNone :global .KB_Editor, .default.borderNone :global .KB_Editor {
+.small.borderNone :global .KB_Editor,
+.mini.borderNone :global .KB_Editor,
+.medium.borderNone :global .KB_Editor,
+.large.borderNone :global .KB_Editor,
+.xlarge.borderNone :global .KB_Editor,
+.default.borderNone :global .KB_Editor {
   border: 0;
 }
 .small :global .KB_Editor_menus,
 .mini :global .KB_Editor_menus {
   bottom: 0;
+  border: 0;
   z-index: 1;
+  padding: 0;
   min-height: auto;
   height: var(--zd_size40);
+  left: 0;
   width: var(--zd_size406);
   transition: opacity var(--zd_transition3);
   position: absolute;
 }
-.small :global .KB_Editor_menus, .mini :global .KB_Editor_menus {
-  border: 0;
-  padding: 0;
-}
-[dir=ltr] .small :global .KB_Editor_menus, [dir=ltr] .mini :global .KB_Editor_menus {
-  left: 0;
-}
-[dir=rtl] .small :global .KB_Editor_menus, [dir=rtl] .mini :global .KB_Editor_menus {
-  right: 0;
-}
 .small :global .KB_Editor_MultiTools,
 .mini :global .KB_Editor_MultiTools {
   display: -webkit-box;
@@ -512,8 +471,6 @@
 .small :global .KB_Editor_MultiTools li,
 .mini :global .KB_Editor_MultiTools li {
   height: 100%;
-}
-.small :global .KB_Editor_MultiTools li, .mini :global .KB_Editor_MultiTools li {
   padding: 0;
   float: unset;
 }
@@ -533,8 +490,6 @@
 .mini :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size25);
   height: var(--zd_size25);
-}
-.small :global .KB_Editor_menus > ul > li > span > svg, .mini :global .KB_Editor_menus > ul > li > span > svg {
   padding: 0 var(--zd_size6);
 }
 .mini :global .KB_Editor_menus:after {
@@ -543,45 +498,31 @@
   bottom: calc(var(--zd_size5) * -1);
   height: var(--zd_size10);
   width: var(--zd_size10);
-  z-index: -1;
-  background-color: var(--zdt_texteditor_menu_after_bg);
-}
-[dir=ltr] .mini :global .KB_Editor_menus:after {
   left: var(--zd_size95);
   box-shadow: -1px 1px 2px 0 var(--zdt_texteditor_menu_after_box_shadow);
+  background-color: var(--zdt_texteditor_menu_after_bg);
   -webkit-transform: rotateZ(-45deg);
   -moz-transform: rotateZ(-45deg);
   -ms-transform: rotateZ(-45deg);
   -o-transform: rotateZ(-45deg);
   transform: rotateZ(-45deg);
-}
-[dir=rtl] .mini :global .KB_Editor_menus:after {
-  right: var(--zd_size95);
-  box-shadow: 1px 1px 2px 0 var(--zdt_texteditor_menu_after_box_shadow);
-  -webkit-transform: rotateZ(45deg);
-  -moz-transform: rotateZ(45deg);
-  -ms-transform: rotateZ(45deg);
-  -o-transform: rotateZ(45deg);
-  transform: rotateZ(45deg);
+  z-index: -1;
 }
 :global .hideTools .KB_Editor_menus {
   height: 0;
   overflow: hidden;
-  opacity: 0;
   box-shadow: 0 0 0 transparent;
   border: 0;
+  opacity: 0;
 }
 
 /* mini type - tdv left area comment */
 .mini :global .KB_Editor_menus {
   width: var(--zd_size205);
 }
-[dir=ltr] .mini :global .KB_Editor_menus:after {
+.mini :global .KB_Editor_menus:after {
   left: var(--zd_size55);
 }
-[dir=rtl] .mini :global .KB_Editor_menus:after {
-  right: var(--zd_size55);
-}
 
 :global .KB_Editor_UploadImage.hide,
 :global .KB_Editor_UploadImage .hide,
@@ -596,23 +537,16 @@
   width: 15px;
   height: 15px;
   top: -5px;
-}
-
-[dir=ltr] .textEditor :global .KB_Editor_menus ul .KBEditortools-quote svg {
   left: 5px;
 }
 
-[dir=rtl] .textEditor :global .KB_Editor_menus ul .KBEditortools-quote svg {
-  right: 5px;
-}
-
 .textEditor :global .KB_Editor_common_DropDown {
   padding: 0 !important;
 }
 .textEditor :global .KB_Editor_common_DropDown ul {
+  box-shadow: 0 1px 32px 0 var(--zdt_texteditor_dropdown_box_shadow);
   max-height: 210px;
   overflow: auto;
-  box-shadow: 0 1px 32px 0 var(--zdt_texteditor_dropdown_box_shadow);
   padding: 0;
 }
 
@@ -633,22 +567,23 @@
   order: 100;
 }
 .readOnly {
-  position: relative;
   cursor: not-allowed;
+  position: relative;
 }
 .readOnlyMask {
   position: absolute;
   top: 0;
-  bottom: 0;
-}
-[dir=ltr] .readOnlyMask {
   left: 0;
   right: 0;
-}
-[dir=rtl] .readOnlyMask {
-  right: 0;
-  left: 0;
+  bottom: 0;
 }
 .readOnly :global .KB_Editor_menus {
   display: none !important;
 }
+.editorHide :global .KB_Editor {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  visibility: hidden;
+}