@zohodesk/dot 1.0.0-temp-88 → 1.0.0-temp.777

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,21 +567,15 @@
   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;
@@ -655,12 +583,7 @@
 .editorHide :global .KB_Editor {
   position: absolute !important;
   top: 0;
+  left: 0;
   opacity: 0;
   visibility: hidden;
 }
-[dir=ltr] .editorHide :global .KB_Editor {
-  left: 0;
-}
-[dir=rtl] .editorHide :global .KB_Editor {
-  right: 0;
-}

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -6,12 +6,13 @@ import PropTypes from 'prop-types';
 /**** Components ****/
 
 import Label from '@zohodesk/components/lib/Label/Label';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import TextEditorWrapper from '../TextEditorWrapper/TextEditorWrapper';
-/**** Icons ****/
+import FieldContainer from '../FieldContainer/FieldContainer';
+/**** props ****/
 
-import Icon from '@zohodesk/icons/lib/Icon';
+import { FieldCommonDefaultProps } from '../props/FieldCommonDefaultProps';
+import { FieldCommonPropTypes } from '../props/FieldCommonPropTypes';
 /** Css */
 
 import style from '../Fields.module.css';
@@ -21,6 +22,7 @@ export default class TextEditorField extends PureComponent {
     this.handleChange = this.handleChange.bind(this);
     this.handleGetRef = this.handleGetRef.bind(this);
     this.handleLabelClick = this.handleLabelClick.bind(this);
+    this.renderEnd = this.renderEnd.bind(this);
   }
 
   handleChange(value) {
@@ -52,6 +54,13 @@ export default class TextEditorField extends PureComponent {
     }
   }
 
+  renderEnd() {
+    let {
+      children
+    } = this.props;
+    return children ? children : null;
+  }
+
   render() {
     let {
       labelName,
@@ -102,18 +111,18 @@ export default class TextEditorField extends PureComponent {
       TextEditorWrapperProps = {},
       ValidationMessageProps = {}
     } = customProps;
-    let {
-      ePhiTitle = '',
-      ePhiText = '',
-      ePhiStatus = false
-    } = ePhiData;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`
-    }, /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      alignBox: "row",
-      align: "vertical"
-    }, labelName && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, _extends({
+    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+      infoText: infoText,
+      isLocked: isLocked,
+      lockedInfoText: lockedInfoText,
+      ePhiData: ePhiData,
+      dataId: dataId,
+      renderProps: {
+        end: this.renderEnd
+      }
+    }, /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       htmlFor: !isReadOnly && !isDisabled ? id : undefined,
@@ -121,21 +130,7 @@ export default class TextEditorField extends PureComponent {
       onClick: this.handleLabelClick,
       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",
-      iconClass: style.infoIcon,
-      title: infoText,
-      size: "15"
-    }) : null, isLocked ? /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-GN-lock",
-      size: "13",
-      iconClass: style.lockIcon,
-      title: lockedInfoText
-    }) : null, ePhiStatus ? /*#__PURE__*/React.createElement("span", {
-      "data-title": ePhiTitle,
-      "data-id": `${dataId}_ePHI`,
-      className: style.ePhiTag
-    }, ePhiText) : null, children ? children : null), /*#__PURE__*/React.createElement("div", {
+    }, LabelProps))), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(TextEditorWrapper, _extends({
       needEditor: needEditor,
@@ -181,10 +176,7 @@ TextEditorField.propTypes = {
   fieldSize: PropTypes.oneOf(['small', 'medium']),
   getRef: PropTypes.func,
   id: PropTypes.string,
-  isDisabled: PropTypes.bool,
   isFocusOnLabelClick: PropTypes.bool,
-  isMandatory: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
   labelCustomClass: PropTypes.string,
   labelName: PropTypes.string,
   labelPalette: PropTypes.string,
@@ -196,9 +188,6 @@ TextEditorField.propTypes = {
   validationMessage: PropTypes.string,
   validationPalette: PropTypes.string,
   value: PropTypes.string,
-  infoText: PropTypes.string,
-  isLocked: PropTypes.bool,
-  lockedInfoText: PropTypes.string,
   errorType: PropTypes.string,
   EDITORURL: PropTypes.string,
   editorMode: PropTypes.string,
@@ -219,23 +208,17 @@ TextEditorField.propTypes = {
   setInlineAttachmentInProgress: PropTypes.func,
   handleEditorDropUpload: PropTypes.func,
   children: PropTypes.node,
-  ePhiData: PropTypes.shape({
-    ePhiTitle: PropTypes.string,
-    ePhiText: PropTypes.string,
-    ePhiStatus: PropTypes.bool
-  }),
   needInlineAttachment: PropTypes.bool,
   customProps: PropTypes.shape({
     LabelProps: PropTypes.object,
     TextEditorWrapperProps: PropTypes.object,
     ValidationMessageProps: PropTypes.object
-  })
+  }),
+  ...FieldCommonPropTypes()
 };
 TextEditorField.defaultProps = {
   errorType: 'primary',
   needEditor: true,
-  isDisabled: false,
-  isReadOnly: false,
   isFocusOnLabelClick: true,
   fieldSize: 'medium',
   textBoxSize: 'xsmall',
@@ -243,8 +226,8 @@ TextEditorField.defaultProps = {
   labelPalette: 'default',
   labelCustomClass: '',
   className: '',
-  ePhiData: {},
-  customProps: {}
+  customProps: {},
+  ...FieldCommonDefaultProps()
 };
 
 if (false) {

package/es/form/fields/TextEditorField/docs/TextEditorField__default.docs.js

@@ -30,8 +30,15 @@ export default class TextEditorField__default extends Component {
       labelName: "TextEditor",
       EDITORURL: "https://js.zohostatic.com/zde/v2.2.9/js/ZohoDeskEditor.js",
       initCallback: this.handleEditorStyleOptions,
-      loadingComponent: /*#__PURE__*/React.createElement("div", null, "Loading...")
-    }));
+      loadingComponent: /*#__PURE__*/React.createElement("div", null, "Loading..."),
+      infoText: "infoText",
+      isLocked: true,
+      ePhiData: {
+        ePhiTitle: 'ePhiTitle',
+        ePhiText: 'ePhiText',
+        ePhiStatus: true
+      }
+    }, "Children"));
   }
 
 }