@zohodesk/dot 1.0.0-temp-181.7 → 1.0.0-temp-182

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

@@ -50,8 +50,8 @@
 }
 
 .night :global .KB_Editor {
-  color: var(--zdt_texteditor_night_text);
-  background-color: var(--zdt_texteditor_night_bg);
+  color: var(--zdt_base_color);
+  background-color: var(--zdt_base_bg);
 }
 
 .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 {
@@ -77,20 +77,20 @@
   background-color: transparent;
 }
 
-.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 {
+.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 {
   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 {
+.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);
 }
 
@@ -101,10 +101,10 @@
 /* large type editor - ticket add form editor */
 .large :global .KB_Editor,
 .large :global .KB_Editor_menus .KB_Editor_MultiTools,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
 .default :global .KB_Editor,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -160,24 +160,24 @@
   min-height: inherit ;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
-.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 {
   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 {
+.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 {
+[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 {
+[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 ;
 }
 
@@ -190,14 +190,14 @@
   float: unset !important;
 }
 
-.large :global .KB_Editor_menus > ul > li > span > svg,
-.default :global .KB_Editor_menus > ul > li > span > svg {
+.large :global .KB_Editor_menus>ul>li>span>svg,
+.default :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
 }
 
-.large :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg,
-.default :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.large :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg,
+.default :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -241,18 +241,18 @@
   left: 0 ;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .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 {
+[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,
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -293,7 +293,7 @@
   min-height: inherit ;
 }
 
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -302,11 +302,11 @@
   float: unset;
 }
 
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+[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 {
+[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   margin-left: 0 ;
 }
 
@@ -324,12 +324,12 @@
   padding: var(--zd_size6) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -354,13 +354,13 @@
   left: 0 ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.SnippetIcon svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.SnippetIcon svg {
   width: var(--zd_size17) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_menus > ul > li > span.TemplateIcon svg {
+.xlarge :global .KB_Editor_menus>ul>li>span.TemplateIcon svg {
   width: var(--zd_size16) ;
   height: var(--zd_size16) ;
   padding: 0 var(--zd_size9) ;
@@ -393,31 +393,16 @@
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
+.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
 
-.xlarge
-  :global
-  .KB_Editor_menus
-  > ul
-  > li
-  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
-    .TemplateIcon
-  ):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
+.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
   height: var(--zd_size21) ;
 }
 
-.xlarge
-  :global
-  .KB_Editor_menus
-  > ul
-  > li
-  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
-    .TemplateIcon
-  )
-  > svg {
+.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon)>svg {
   width: var(--zd_size21) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size4) ;
@@ -442,7 +427,7 @@
 /* medium type editor - snippet, bug tracker cases */
 .medium :global .KB_Editor,
 .medium :global .KB_Editor_menus .KB_Editor_MultiTools,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -483,7 +468,7 @@
   min-height: inherit ;
 }
 
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -496,21 +481,21 @@
   line-height: 0;
 }
 
-.medium :global .KB_Editor_menus > ul > li > span > svg {
+.medium :global .KB_Editor_menus>ul>li>span>svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
+.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 {
+[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 {
+[dir=rtl] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
   padding: 0 var(--zd_size2) 0 0 ;
 }
 
@@ -547,7 +532,7 @@
   padding: 0 var(--zd_size3) ;
 }
 
-.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
+.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
@@ -627,13 +612,13 @@
   line-height: 0;
 }
 
-.small :global .KB_Editor_menus > ul > li > span > svg,
-.mini :global .KB_Editor_menus > ul > li > span > svg {
+.small :global .KB_Editor_menus>ul>li>span>svg,
+.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 {
+.small :global .KB_Editor_menus>ul>li>span>svg, .mini :global .KB_Editor_menus>ul>li>span>svg {
   padding: 0 var(--zd_size6) ;
 }
 
@@ -784,4 +769,4 @@
 
 [dir=rtl] .editorHide :global .KB_Editor {
   right: 0 ;
-}
+}

package/lib/form/fields/TextareaField/TextareaField.js

@@ -126,6 +126,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           dataSelectorId = _this$props4.dataSelectorId,
           validationRuleMessage = _this$props4.validationRuleMessage,
           validationRulePalette = _this$props4.validationRulePalette,
+          onFocus = _this$props4.onFocus,
           infoText = _this$props4.infoText,
           borderColor = _this$props4.borderColor,
           fieldSize = _this$props4.fieldSize,
@@ -176,6 +177,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         text: value,
         placeHolder: placeHolder,
         dataId: "property(".concat(dataId, ")"),
+        onFocus: onFocus,
         onBlur: this.handleBlur,
         borderColor: borderColor,
         needEffect: isReadOnly || isDisabled ? false : true,

package/lib/form/fields/TextareaField/props/propTypes.js

@@ -29,6 +29,7 @@ var propTypes = _objectSpread({
   labelName: _propTypes["default"].string,
   labelPalette: _propTypes["default"].string,
   maxLength: _propTypes["default"].number,
+  onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
   onChange: _propTypes["default"].func,
   placeHolder: _propTypes["default"].string,

package/lib/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -5,7 +5,6 @@
   display: inline;
 }
 .icon{
-  /* css:theme-validation:ignore */
   color:var(--label_text_color);
   display: inline-block;
   margin: 0 var(--zd_size5) ;

package/lib/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -3,9 +3,11 @@
   z-index: 2;
   border-bottom: 1px solid var(--zdt_setupdetail_header_border);
 }
+
 .back {
   width: var(--zd_size60) ;
 }
+
 .backIcon {
   height: var(--zd_size30) ;
   width: var(--zd_size30) ;
@@ -17,9 +19,11 @@
   border-radius: 50%;
   cursor: pointer;
 }
+
 [dir=ltr] .backIcon {
   margin-left: var(--zd_size19) ;
 }
+
 [dir=rtl] .backIcon {
   margin-right: var(--zd_size19) ;
 }
@@ -27,6 +31,7 @@
 .backIcon:hover {
   background-color: var(--zdt_setupdetail_hover_backicon_bg);
 }
+
 .title {
   font-size: var(--zd_font_size16) ;
   line-height: 1;
@@ -34,9 +39,11 @@
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .title {
   padding-right: var(--zd_size12) ;
 }
+
 [dir=rtl] .title {
   padding-left: var(--zd_size12) ;
 }
@@ -44,18 +51,22 @@
 .rightPanel {
   composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .helpInfoCont {
   position: absolute;
   z-index: 10;
 }
+
 [dir=ltr] .helpInfoCont {
   right: 0 ;
   padding: var(--zd_size12) var(--zd_size15) 0 0 ;
 }
+
 [dir=rtl] .helpInfoCont {
   left: 0 ;
   padding: var(--zd_size12) 0 0 var(--zd_size15) ;
 }
+
 .helpInfo {
   line-height: 2.3636;
   height: var(--zd_size28) ;
@@ -68,9 +79,11 @@
   text-align: center;
   cursor: pointer;
 }
+
 [dir=ltr] .mr15 {
   margin-right: var(--zd_size15) ;
 }
+
 [dir=rtl] .mr15 {
   margin-left: var(--zd_size15) ;
 }
@@ -78,12 +91,15 @@
 .content {
   z-index: 1;
 }
+
 [dir=ltr] .padding {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size60) ;
 }
+
 [dir=rtl] .padding {
   padding: var(--zd_size10) var(--zd_size60) var(--zd_size10) var(--zd_size25) ;
 }
+
 .popup {
   z-index: 3;
   position: absolute;
@@ -92,19 +108,23 @@
   width: var(--zd_size330) ;
   transition: transform var(--zd_transition3);
   border: 1px solid var(--zdt_setupdetail_popup_border);
-  background-color: var(--zdt_setupdetail_popup_bg);
+  background-color: var(--zdt_base_bg);
 }
+
 [dir=ltr] .popup {
   right: 0 ;
   transform: translateX(100%);
 }
+
 [dir=rtl] .popup {
   left: 0 ;
   transform: translateX(-100%);
 }
+
 .popup.open {
   transform: translateX(0);
 }
+
 .close {
   composes: disableFocus from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -149,4 +169,4 @@
 
 .infoFooter {
   padding: var(--zd_size10) var(--zd_size20) ;
-}
+}

package/lib/layout/SubtabLayout/SubtabLayout.module.css

@@ -9,7 +9,7 @@
 }
 
 .tabHead, .shadowStyle {
-  background: var(--zdt_subtablayout_tabhead_bg);
+  background: var(--zdt_base_bg);
 }
 
 [dir=ltr] .left {
@@ -48,7 +48,6 @@
 }
 
 .tertiary_borderStyle {
-  /* css:theme-validation:ignore */
   border-bottom: 1px solid var(--borderColor);
 }
 
@@ -150,7 +149,6 @@
 
 .footer {
   composes: varClass;
-  /* css:theme-validation:ignore */
   border-top: 1px solid var(--borderColor);
 }
 

package/lib/list/AvatarFlip/AvatarFlip.module.css

@@ -1,3 +1,3 @@
 .iconStyle {
-  color: var(--zdt_avatarflip_default_text);
-}
+  color: var(--zdt_base_color);
+}

package/lib/list/Comment/Comment.module.css

@@ -5,7 +5,6 @@
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--icon_color);
   padding: 0 var(--zd_size2) ;
   cursor: pointer;

package/lib/list/DepartmentDropDown/DepartmentDropDown.module.css

@@ -1,9 +1,11 @@
 .departmentBox {
   max-width: 100% ;
 }
+
 .departmentBox :global .toggleDropIcon {
   color: var(--zdt_departmentdropdown_default_text);
 }
+
 .departmentBox:hover :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_hover_text);
-}
+  color: var(--zdt_base_color);
+}

package/lib/list/Dot/Dot.module.css

@@ -4,7 +4,6 @@
 .dot {
   composes: varClass;
   font-size: var(--zd_font_size16) ;
-  /* css:theme-validation:ignore */
   color: var(--dotColor);
   transform: perspective(1px);
 }

package/lib/list/GridStencils/GridStencils.module.css

@@ -1,17 +1,20 @@
 .stenLoading {
   position: relative;
-  background-color: var(--zdt_gridstencils_default_bg);
+  background-color: var(--zdt_base_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
   padding: var(--zd_size13) var(--zd_size15) var(--zd_size11) var(--zd_size15) ;
   margin-bottom: var(--zd_size10) ;
   border-radius: var(--zd_size5);
 }
+
 [dir=ltr] .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
 }
+
 [dir=rtl] .stenLoadbody {
   margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20) ;
 }
+
 .stenLoadbody::after {
   content: '';
   height: var(--zd_size22) ;
@@ -21,36 +24,45 @@
   border-radius: 50%;
   background-color: var(--zdt_gridstencils_after_bg);
 }
+
 [dir=ltr] .stenLoadbody::after {
   right: var(--zd_size20) ;
 }
+
 [dir=rtl] .stenLoadbody::after {
   left: var(--zd_size20) ;
 }
+
 .lineBar {
   width: 90% ;
 }
+
 .lineBar2 {
   width: 70% ;
   margin: var(--zd_size22) 0 ;
 }
+
 .lineBar3 {
   width: 50% ;
 }
+
 .lineBar,
 .lineBar2,
 .lineBar3 {
   height: var(--zd_size5) ;
 }
+
 .lineBar, .lineBar2, .lineBar3 {
   border-radius: var(--zd_size5);
 }
+
 .stenListBAr {
   position: relative;
   background: var(--zdt_gridstencils_listbar_bg);
   background-image: var(--zdt_gridstencils_listbar_gradient_bg);
   background-repeat: no-repeat;
 }
+
 [dir=ltr] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
@@ -58,6 +70,7 @@
   -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
 }
+
 [dir=rtl] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
@@ -65,11 +78,13 @@
   -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
 }
+
 .stenListBAr {
   background: var(--zdt_gridstencils_listbar_bg);
   background-image: var(--zdt_gridstencils_listbar_gradient_bg);
   background-repeat: no-repeat;
 }
+
 [dir=ltr] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
@@ -77,6 +92,7 @@
   -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
 }
+
 [dir=rtl] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
@@ -84,6 +100,7 @@
   -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
 }
+
 @keyframes placeHolderShimmer {
   0% {
     background-position: -468px 0;
@@ -93,55 +110,72 @@
     background-position: 468px 0;
   }
 }
+
 .threeLayout .stenLoadbody::before {
   transform: scale(0.8);
 }
+
 [dir=ltr] .threeLayout .stenLoadbody::before {
   left: var(--zd_size16) ;
 }
+
 [dir=rtl] .threeLayout .stenLoadbody::before {
   right: var(--zd_size16) ;
 }
+
 [dir=ltr] .threeLayout .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
 }
+
 [dir=rtl] .threeLayout .stenLoadbody {
   margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20) ;
 }
+
 .threeLayout .stenLoadbody::after {
   top: var(--zd_size15) ;
   transform: scale(0.8);
 }
+
 [dir=ltr] .threeLayout .stenLoadbody::after {
   right: var(--zd_size20) ;
 }
+
 [dir=rtl] .threeLayout .stenLoadbody::after {
   left: var(--zd_size20) ;
 }
+
 [dir=ltr] .leftCont .stenLoadbody::before {
   left: var(--zd_size33) ;
 }
+
 [dir=rtl] .leftCont .stenLoadbody::before {
   right: var(--zd_size33) ;
 }
+
 [dir=ltr] .leftCont .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46) ;
 }
+
 [dir=rtl] .leftCont .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size46) var(--zd_size8) var(--zd_size20) ;
 }
+
 [dir=ltr] .leftCont .stenLoadbody::after {
   right: var(--zd_size40) ;
 }
+
 [dir=rtl] .leftCont .stenLoadbody::after {
   left: var(--zd_size40) ;
 }
+
 .leftCont .lineBar {
   width: 80% ;
 }
+
 .leftCont .lineBar2 {
   width: 60% ;
 }
+
 .leftCont .lineBar3 {
   width: 40% ;
 }