@zohodesk/dot 1.0.0-temp-175.6 → 1.0.0-temp-181

package/es/NewStar/NewStar.module.css

@@ -2,6 +2,7 @@
   position: absolute;
   height: var(--zd_size20) ;
   width: var(--zd_size21) ;
+  pointer-events: none;
 }
 .topLeft {
   top: 0 ;
@@ -90,73 +91,133 @@
   animation-delay: 1s;
 }
 
-.topLeft .starOne{top:0 }
-
-[dir=ltr] .topLeft .starOne{
-  left:0 }
-
-[dir=rtl] .topLeft .starOne{right:0 }
-.topLeft .starTwo{top:0 
-  /*  Variable:Ignore  */}
-[dir=ltr] .topLeft .starTwo{
-  left:var(--zd_size10) }
-[dir=rtl] .topLeft .starTwo{right:var(--zd_size10) }
-.topLeft .starThree{
-  /*  Variable:Ignore  */top:10px}
-[dir=ltr] .topLeft .starThree{
-  left:0 }
-[dir=rtl] .topLeft .starThree{right:0 }
-
-.topRight .starOne{top:0 }
-
-[dir=ltr] .topRight .starOne{
-  right:0 }
-
-[dir=rtl] .topRight .starOne{left:0 }
-.topRight .starTwo{top:0 
-  /*  Variable:Ignore  */}
-[dir=ltr] .topRight .starTwo{
-  right:var(--zd_size10) }
-[dir=rtl] .topRight .starTwo{left:var(--zd_size10) }
-.topRight .starThree{
-  /*  Variable:Ignore  */top:10px}
-[dir=ltr] .topRight .starThree{
-  right:0 }
-[dir=rtl] .topRight .starThree{left:0 }
-
-.bottomLeft .starOne{bottom:0 }
-
-[dir=ltr] .bottomLeft .starOne{
-  left:0 }
-
-[dir=rtl] .bottomLeft .starOne{right:0 }
-.bottomLeft .starTwo{bottom:0 
-  /*  Variable:Ignore  */}
-[dir=ltr] .bottomLeft .starTwo{
-  left:var(--zd_size10) }
-[dir=rtl] .bottomLeft .starTwo{right:var(--zd_size10) }
-.bottomLeft .starThree{
-  /*  Variable:Ignore  */bottom:10px}
-[dir=ltr] .bottomLeft .starThree{
-  left:0 }
-[dir=rtl] .bottomLeft .starThree{right:0 }
-
-.bottomRight .starOne{bottom:0 }
-
-[dir=ltr] .bottomRight .starOne{
-  right:0 }
-
-[dir=rtl] .bottomRight .starOne{left:0 }
-.bottomRight .starTwo{bottom:0 
-  /*  Variable:Ignore  */}
-[dir=ltr] .bottomRight .starTwo{
-  right:var(--zd_size10) }
-[dir=rtl] .bottomRight .starTwo{left:var(--zd_size10) }
-.bottomRight .starThree{
-  /*  Variable:Ignore  */bottom:10px}
-[dir=ltr] .bottomRight .starThree{
-  right:0 }
-[dir=rtl] .bottomRight .starThree{left:0 }
+.topLeft .starOne {
+  top: 0 ;
+}
+
+[dir=ltr] .topLeft .starOne {
+  left: 0 ;
+}
+
+[dir=rtl] .topLeft .starOne {
+  right: 0 ;
+}
+.topLeft .starTwo {
+  top: 0 ;
+  /*  Variable:Ignore  */
+}
+[dir=ltr] .topLeft .starTwo {
+  left: var(--zd_size10) ;
+}
+[dir=rtl] .topLeft .starTwo {
+  right: var(--zd_size10) ;
+}
+.topLeft .starThree {
+  /*  Variable:Ignore  */
+  top: 10px;
+}
+[dir=ltr] .topLeft .starThree {
+  left: 0 ;
+}
+[dir=rtl] .topLeft .starThree {
+  right: 0 ;
+}
+
+.topRight .starOne {
+  top: 0 ;
+}
+
+[dir=ltr] .topRight .starOne {
+  right: 0 ;
+}
+
+[dir=rtl] .topRight .starOne {
+  left: 0 ;
+}
+.topRight .starTwo {
+  top: 0 ;
+  /*  Variable:Ignore  */
+}
+[dir=ltr] .topRight .starTwo {
+  right: var(--zd_size10) ;
+}
+[dir=rtl] .topRight .starTwo {
+  left: var(--zd_size10) ;
+}
+.topRight .starThree {
+  /*  Variable:Ignore  */
+  top: 10px;
+}
+[dir=ltr] .topRight .starThree {
+  right: 0 ;
+}
+[dir=rtl] .topRight .starThree {
+  left: 0 ;
+}
+
+.bottomLeft .starOne {
+  bottom: 0 ;
+}
+
+[dir=ltr] .bottomLeft .starOne {
+  left: 0 ;
+}
+
+[dir=rtl] .bottomLeft .starOne {
+  right: 0 ;
+}
+.bottomLeft .starTwo {
+  bottom: 0 ;
+  /*  Variable:Ignore  */
+}
+[dir=ltr] .bottomLeft .starTwo {
+  left: var(--zd_size10) ;
+}
+[dir=rtl] .bottomLeft .starTwo {
+  right: var(--zd_size10) ;
+}
+.bottomLeft .starThree {
+  /*  Variable:Ignore  */
+  bottom: 10px;
+}
+[dir=ltr] .bottomLeft .starThree {
+  left: 0 ;
+}
+[dir=rtl] .bottomLeft .starThree {
+  right: 0 ;
+}
+
+.bottomRight .starOne {
+  bottom: 0 ;
+}
+
+[dir=ltr] .bottomRight .starOne {
+  right: 0 ;
+}
+
+[dir=rtl] .bottomRight .starOne {
+  left: 0 ;
+}
+.bottomRight .starTwo {
+  bottom: 0 ;
+  /*  Variable:Ignore  */
+}
+[dir=ltr] .bottomRight .starTwo {
+  right: var(--zd_size10) ;
+}
+[dir=rtl] .bottomRight .starTwo {
+  left: var(--zd_size10) ;
+}
+.bottomRight .starThree {
+  /*  Variable:Ignore  */
+  bottom: 10px;
+}
+[dir=ltr] .bottomRight .starThree {
+  right: 0 ;
+}
+[dir=rtl] .bottomRight .starThree {
+  left: 0 ;
+}
 
 @keyframes twinkle {
   0% {

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

@@ -23,6 +23,7 @@
   font-family: var(--zd_semibold);
   /* css:theme-validation:ignore */
   color: var(--titleColor);
+  word-wrap: break-word;
 }
 .small .title {
   font-size: var(--zd_font_size16) ;
@@ -52,6 +53,9 @@
 .linkDescWrapper {
   margin-top: var(--zd_size20) ;
 }
+.desc{
+  word-wrap: break-word;
+}
 [dir=ltr] .linkDesc, [dir=ltr] .desc {
   margin-right: var(--zd_size4) ;
 }

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

@@ -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,16 +393,31 @@
   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) ;
@@ -427,7 +442,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;
@@ -468,7 +483,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;
@@ -481,21 +496,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 ;
 }
 
@@ -532,7 +547,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) ;
 }
@@ -612,13 +627,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) ;
 }
 
@@ -759,7 +774,8 @@
   position: absolute !important;
   top: 0 ;
   opacity: 0;
-  visibility: hidden;
+  /* visibility: hidden; */
+  z-index: -1;
 }
 
 [dir=ltr] .editorHide :global .KB_Editor {
@@ -768,4 +784,4 @@
 
 [dir=rtl] .editorHide :global .KB_Editor {
   right: 0 ;
-}
+}

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -440,7 +440,8 @@ export class StatusDropdown extends React.Component {
         needMultiLineText: needMultiLineText,
         a11y: {
           role: isSearch ? 'option' : 'menuitem',
-          ariaSelected: value === item[keyName]
+          ariaSelected: value === item[keyName],
+          'data-a11y-list-active': selectedIndex === i
         }
       })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
         className: style.svgWrapper,

package/es/list/status/StatusListItem/StatusListItem.js

@@ -68,7 +68,9 @@ export default class StatusListItem extends React.Component {
       isDisabled,
       bulletColor,
       a11y,
-      needMultiLineText
+      needMultiLineText,
+      customClass,
+      children
     } = this.props;
     let options = {};
     let {
@@ -88,7 +90,7 @@ export default class StatusListItem extends React.Component {
       isCover: false,
       align: "baseline",
       alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
       dataId: String(value).replace("'", '_'),
       onClick: !isDisabled && this.handleClick,
       onMouseEnter: this.handleMouseEnter,
@@ -96,14 +98,19 @@ export default class StatusListItem extends React.Component {
       tagName: isLink ? 'a' : 'li',
       "data-title": isDisabled ? disableTitle : null,
       tabindex: isDisabled ? '-1' : '0'
-    }, options), /*#__PURE__*/React.createElement(Box, {
+    }, options, a11y), /*#__PURE__*/React.createElement(Box, {
       className: `${style.statusType} ${style[bulletColor]}`
     }), /*#__PURE__*/React.createElement(Box, {
-      "data-title": isDisabled ? null : title,
       flexible: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: needMultiLineText ? 'top' : 'vertical'
+    }, /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : title,
       shrink: true,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+    }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
       className: style.tickIcon,
       "aria-hidden": ariaHidden
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/list/status/StatusListItem/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: ''
 };

package/es/list/status/StatusListItem/props/propTypes.js

@@ -25,5 +25,7 @@ export const propTypes = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
-  })
+  }),
+  customClass: PropTypes.string,
+  children: PropTypes.node
 };

package/es/lookup/Lookup/Lookup.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /*** Libraries ***/
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -62,7 +64,8 @@ export default class Lookup extends Component {
       ariaLabelledby,
       ariaDescribedby,
       ariaLabel,
-      ariaModal = isActive ? true : undefined
+      ariaModal = isActive ? true : undefined,
+      ...a11yAttributes
     } = a11y;
     const {
       focusScopeProps = {}
@@ -74,7 +77,7 @@ export default class Lookup extends Component {
       needFocusLoop = true,
       needEnterAction = true
     } = focusScopeProps;
-    const content = /*#__PURE__*/React.createElement("div", {
+    const content = /*#__PURE__*/React.createElement("div", _extends({
       ref: this.createRef,
       tabIndex: "-1",
       "data-a11y-need-focus-style": "false",
@@ -87,7 +90,7 @@ export default class Lookup extends Component {
       className: `${style.box} ${style[`${size}Size`]}`,
       "data-id": dataId,
       "data-test-id": dataId
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
       "data-drag-container": "true",
       isCover: false,
       className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`

package/es/v1/DotWrapper/DotWrapper.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+import { getAppearance, getTheme } from './libraryChunks/dynamicImports';
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './props/defaultProps';
+export default function DotWrapper(props) {
+  let {
+    appearance,
+    theme,
+    library,
+    isZoom,
+    baseZoomSize
+  } = props;
+  getAppearance(appearance, library);
+  getTheme(appearance, theme, library);
+  const wrapperStyle = {
+    background: 'aqua',
+    color: '#000',
+    padding: 'var(--zd_size20)',
+    '--zd_baseSize': baseZoomSize
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "rootWrapper",
+    style: wrapperStyle
+  }, "Dot Wrapper");
+}
+DotWrapper.propTypes = propTypes;
+DotWrapper.defaultProps = defaultProps;

package/es/v1/DotWrapper/libraryChunks/appearance/component/DarkMode_Component.js

@@ -0,0 +1 @@
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css';

package/es/v1/DotWrapper/libraryChunks/appearance/component/LightMode_Component.js

@@ -0,0 +1 @@
+import '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css';

package/es/v1/DotWrapper/libraryChunks/appearance/component/PureDarkMode_Component.js

@@ -0,0 +1 @@
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css';

package/es/v1/DotWrapper/libraryChunks/appearance/dot/DarkMode_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css';

package/es/v1/DotWrapper/libraryChunks/appearance/dot/LightMode_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../assets/Appearance/light/mode/Dot_LightMode.module.css';

package/es/v1/DotWrapper/libraryChunks/appearance/dot/PureDarkMode_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css';