@zohodesk/dot 1.0.0-temp-187.22 → 1.0.0-temp-187.23

package/es/list/SecondaryText/TicketId.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); }
+
 import React, { Component } from 'react';
 import { TicketId_defaultProps } from "./props/defaultProps";
 import { TicketId_propTypes } from "./props/propTypes";
@@ -30,21 +32,19 @@ export default class TicketId extends Component {
       LinkProps = {},
       TicketIdProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title": dataTitle,
-      onClick: !isLink && onClick,
-      ...TicketIdProps
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+      onClick: !isLink && onClick
+    }, TicketIdProps), isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       urlData: urlData,
       href: url,
       target: target,
-      onClick: onClick,
-      ...LinkProps
-    }, /*#__PURE__*/React.createElement(Typography, {
+      onClick: onClick
+    }, LinkProps), /*#__PURE__*/React.createElement(Typography, {
       $ui_highlightConfig: isHighlighted ? highlightData : DUMMY_OBJECT
     }, text)) : text);
   }

package/es/list/Subject/Subject.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); }
+
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -40,14 +42,13 @@ export default class Subject extends Component {
     let linkTagAttributes = {
       'data-title-wrap': whiteSpace
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
-      target: target,
-      ...LinkProps
-    }, children ? children : /*#__PURE__*/React.createElement(Typography, {
+      target: target
+    }, LinkProps), children ? children : /*#__PURE__*/React.createElement(Typography, {
       $tagAttributes_text: linkTagAttributes,
       $i18n_dataTitle: text,
       $ui_className: `${style.subject} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style.cursorPointer}`,

package/es/list/status/StatusListItem/StatusListItem.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 from 'react';
 import { defaultProps } from "./props/defaultProps";
@@ -68,7 +70,8 @@ export default class StatusListItem extends React.Component {
       a11y,
       needMultiLineText,
       customClass,
-      children
+      children,
+      lhsAlignContent
     } = this.props;
     let options = {};
     let {
@@ -84,7 +87,7 @@ export default class StatusListItem extends React.Component {
       options.target = `_${target}`;
     }
 
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       role: role,
       "aria-selected": ariaSelected,
       "aria-label": ariaLabel,
@@ -99,12 +102,11 @@ export default class StatusListItem extends React.Component {
       eleRef: this.getRef,
       tagName: isLink ? 'a' : 'li',
       "data-title": isDisabled ? disableTitle : null,
-      tabindex: isDisabled ? '-1' : '0',
-      ...options,
-      ...a11y
-    }, /*#__PURE__*/React.createElement(Box, {
+      tabindex: isDisabled ? '-1' : '0'
+    }, options, a11y), /*#__PURE__*/React.createElement(Box, {
       className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
       className: `${style.statusType} ${style[bulletColor]}`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -1,7 +1,7 @@
 .varClass {
   --statuslistitem_multiline_lineheight: 1.5385;
   --statuslistitem_font_size: var(--zd_font_size13);
-  --statuslistitem_min_height: var(--zd_size35);
+  --statuslistitem_min_height: 35px;
 }
 
 .list {
@@ -29,7 +29,7 @@
   padding: var(--zd_size7) var(--zd_size20) ;
 }
 .large {
-  --statuslistitem_min_height: var(--zd_size48);
+  --statuslistitem_min_height: 48px;
 }
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -102,19 +102,16 @@
 .statusType{
   position: relative;
   composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
-  align-self: flex-start;
   min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
   min-width: var(--zd_size20) ;
 }
 .statusType::after{
   /* css:validation:ignore */
-  --status_listitem_bullet_min_height: var(--zd_font_size8);
-  /* css:validation:ignore */
-  --status_listitem_bullet_min_width: var(--zd_font_size8);
+  --status_listitem_bullet_size: var(--zd_font_size8);
 
   content: '';
-  height: var(--status_listitem_bullet_min_height);
-  width: var(--status_listitem_bullet_min_width);
+  height: var(--status_listitem_bullet_size);
+  width: var(--status_listitem_bullet_size);
   /* css:theme-validation:ignore */
   border-radius: 50%;
   background-color: var(--zdt_statuslistitem_black_bg);

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

@@ -12,5 +12,6 @@ export const defaultProps = {
   bulletColor: 'black',
   a11y: {},
   needMultiLineText: false,
-  customClass: ''
+  customClass: '',
+  lhsAlignContent: 'start'
 };

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

@@ -27,5 +27,6 @@ export const propTypes = {
     ariaHidden: PropTypes.bool
   }),
   customClass: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end'])
 };

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";
@@ -77,7 +79,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",
@@ -89,9 +91,8 @@ export default class Lookup extends Component {
       id: htmlId,
       className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
       "data-id": dataId,
-      "data-test-id": dataId,
-      ...a11yAttributes
-    }, /*#__PURE__*/React.createElement(Container, {
+      "data-test-id": dataId
+    }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
       "data-drag-container": "true",
       isCover: false,
       className: `${isMinHeight ? style.wrapper : style.coverwrap} ${style.containerWidth} ${containerClass}`

package/es/lookup/header/Search/Search.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); }
+
 /* eslint-disable react/forbid-component-props */
 
 /*** Libraries ***/
@@ -103,11 +105,7 @@ export default class Search extends Component {
       isArrow: false,
       isToggleStateNeeded: true,
       selectedId: selectedId
-    }, /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
-      ...searchUIExtraProps
-    })) : /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
-      ...searchUIExtraProps
-    });
+    }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
   }
 
 }

package/es/version2/GlobalNotification/GlobalNotification.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); }
+
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes, UI_propTypes, new_propTypes } from "./props/propTypes";
@@ -113,7 +115,7 @@ export default class GlobalNotification extends React.Component {
       closeTitle = 'Close'
     } = i18nKeys;
     const notificationData = this.getNotificationData();
-    return /*#__PURE__*/React.createElement(GlobalNotificationUI, { ...notificationData,
+    return /*#__PURE__*/React.createElement(GlobalNotificationUI, _extends({}, notificationData, {
       hideMessage: hideMessage,
       onClick: onClick,
       closeTitle: closeTitle,
@@ -123,7 +125,7 @@ export default class GlobalNotification extends React.Component {
       onClose: this.onClose,
       needShadow: shadowClose && needShadow,
       eleRef: eleRef
-    });
+    }));
   }
 
 }
@@ -158,7 +160,7 @@ export function GlobalNotificationUI(props) {
   let {
     ExtraProps = {}
   } = customProps;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({
     ref: eleRef,
     className: ` ${style.message} 
         ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
@@ -167,9 +169,8 @@ export function GlobalNotificationUI(props) {
     "data-id": `show_${type}_message`,
     "data-test-id": `show_${type}_message`,
     tabIndex: 0,
-    "data-selector-id": dataSelectorId,
-    ...ExtraProps
-  }, /*#__PURE__*/React.createElement(Container, {
+    "data-selector-id": dataSelectorId
+  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",
     isCover: false,
@@ -201,8 +202,8 @@ export function GlobalNotificationUI(props) {
 }
 GlobalNotificationUI.propTypes = UI_propTypes;
 export function GlobalNotificationNew(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: GlobalNotificationUI
-  });
+  }));
 }
 GlobalNotificationNew.propTypes = new_propTypes;

package/es/version2/lookup/AlertLookup/AlertLookup.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";
@@ -121,7 +123,7 @@ export default class AlertLookup extends Component {
       ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
       ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
     };
-    return /*#__PURE__*/React.createElement(Lookup, {
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
       onClose: onEsc == 'close' ? onClose : onCancelClick,
       needFocusScope: true,
       isActive: isActive,
@@ -131,9 +133,8 @@ export default class AlertLookup extends Component {
       onClick: onLookupClick,
       customClass: containerClass,
       a11y: a11y,
-      childAnimationName: childAnimationName,
-      ...LookupProps
-    }, /*#__PURE__*/React.createElement(Container, {
+      childAnimationName: childAnimationName
+    }, LookupProps), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: align,
       wrap: "wrap"
@@ -142,15 +143,14 @@ export default class AlertLookup extends Component {
       className: style.section
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "column"
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, {
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
       htmlId: ariaTitleId,
       title: title,
       type: type,
       needIcon: needIcon,
       onClose: onClose,
-      breakChildren: wrapHeader,
-      ...AlertHeaderProps
-    }, headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
+      breakChildren: wrapHeader
+    }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
@@ -169,30 +169,30 @@ export default class AlertLookup extends Component {
     }, /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xmedium"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, _extends({
       text: submitText,
       dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
       onClick: onSubmitClick,
       palette: buttonPalette,
       customProps: {
         'data-a11y-autofocus': isDefaultFocus
-      },
-      ...PrimaryButtonProps,
+      }
+    }, PrimaryButtonProps, {
       a11y: {
         'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
       },
       id: ariaLeaveButtonId
-    }), cancelText && /*#__PURE__*/React.createElement(Button, {
+    })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,
       onClick: onCancelClick,
-      palette: "secondary",
-      ...SecondaryButtonProps,
+      palette: "secondary"
+    }, SecondaryButtonProps, {
       a11y: {
         'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
       },
       id: ariaStayButtonId
-    })))) : null))));
+    }))))) : null))));
   }
 
 }

package/es/version2/notification/DesktopNotification/DesktopNotification.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); }
+
 import React, { useState } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes, DesktopNotificationUI_propTypes } from "./props/propTypes";
@@ -117,14 +119,13 @@ export function DesktopNotificationUI(props) {
     let {
       uptoTablet
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
             ${isShrinkView ? style.globalNotify : ''} ${containerClass}  ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
       isCover: false,
       dataId: dataId,
-      isInline: uiVariantTwo,
-      ...ExtraProps
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
       type: type,
       title: title,
       variant: titleVariant,
@@ -177,9 +178,9 @@ export function DesktopNotificationUI(props) {
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 export default function DesktopNotification(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: DesktopNotificationUI
-  });
+  }));
 }
 DesktopNotification.propTypes = propTypes;
 DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {

package/lib/Separator/Separator.module.css

@@ -1,23 +1,23 @@
 .varClass {
-  --separator_fontSize: var(--zd_font_size15);
+  --separator_fontSize: 15px;
 }
 .separator {
   font-size: var(--separator_fontSize);
   margin: 0 var(--zd_size5) ;
 }
 .dot {
-  --separator_fontSize: var(--zd_font_size8);
+  --separator_fontSize: 8px;
 }
 .slash {
-  --separator_fontSize: var(--zd_font_size10);
+  --separator_fontSize: 10px;
   /* line-height: var(--zd_size10); */
 }
 .arrow {
-  --separator_fontSize: var(--zd_font_size8);
+  --separator_fontSize: 8px;
   /* line-height: var(--zd_size7); */
 }
 .comma {
-  --separator_fontSize: var(--zd_font_size15);
+  --separator_fontSize: 15px;
   /* line-height: var(--zd_size13); */
 }
 .none {

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -2,8 +2,8 @@
   --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
   --tag_text_color: var(--zdt_tagWithIconGrey_text);
   --tag_border_color: var(--zdt_tagWithIconGrey_border);
-  --tag_small_fontSize: var(--zd_font_size10);
-  --tag_large_fontSize: var(--zd_font_size12);
+  --tag_small_fontSize: 10px;
+  --tag_large_fontSize: 12px;
 }
 
 .wrapper {

package/lib/dot_layer.module.css

@@ -1 +1 @@
-@layer dot-core, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader, dot-core.mode, dot-core.blue, dot-core.green, dot-core.orange, dot-core.red, dot-core.yellow;
+@layer dot-core, dot-core.theme, dot-core.core, dot-core.atom, dot-core.molecule, dot-core.organism, dot-core.page, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader;

package/lib/errorstate/Inconvenience/Inconvenience.js

@@ -130,7 +130,7 @@ exports["default"] = Inconvenience;
 Inconvenience.propTypes = _propTypes.propTypes;
 Inconvenience.defaultProps = _defaultProps.defaultProps;
 
-if (false) {
+if (__DOCS__) {
   Inconvenience.docs = {
     componentGroup: 'errorStates'
   };

package/lib/errorstate/UnableToProcess/UnableToProcess.js

@@ -130,7 +130,7 @@ exports["default"] = UnableToProcess;
 UnableToProcess.propTypes = _propTypes.propTypes;
 UnableToProcess.defaultProps = _defaultProps.defaultProps;
 
-if (false) {
+if (__DOCS__) {
   UnableToProcess.docs = {
     componentGroup: 'errorStates'
   };

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

@@ -55,14 +55,14 @@
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-ltr ;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-rtl ;
   -webkit-animation-timing-function: linear;
 }
 .stenListBAr {
@@ -74,17 +74,17 @@
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-ltr ;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-rtl ;
   -webkit-animation-timing-function: linear;
 }
-@keyframes placeHolderShimmer {
+@keyframes placeHolderShimmer-ltr {
   0% {
     background-position: -468px 0;
   }
@@ -93,6 +93,15 @@
     background-position: 468px 0;
   }
 }
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: right -468px top 0;
+  }
+
+  100% {
+    background-position: right 468px top 0;
+  }
+}
 .threeLayout .stenLoadbody::before {
   transform: scale(0.8);
 }

package/lib/list/status/StatusListItem/StatusListItem.js

@@ -114,7 +114,8 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           needMultiLineText = _this$props4.needMultiLineText,
           customClass = _this$props4.customClass,
-          children = _this$props4.children;
+          children = _this$props4.children,
+          lhsAlignContent = _this$props4.lhsAlignContent;
       var options = {};
       var role = a11y.role,
           ariaSelected = a11y.ariaSelected,
@@ -148,6 +149,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
       }, options, a11y), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _StatusListItemModule["default"].contentWrapper
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        align: lhsAlignContent,
         className: "".concat(_StatusListItemModule["default"].statusType, " ").concat(_StatusListItemModule["default"][bulletColor])
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,

package/lib/list/status/StatusListItem/StatusListItem.module.css

@@ -1,7 +1,7 @@
 .varClass {
   --statuslistitem_multiline_lineheight: 1.5385;
   --statuslistitem_font_size: var(--zd_font_size13);
-  --statuslistitem_min_height: var(--zd_size35);
+  --statuslistitem_min_height: 35px;
 }
 
 .list {
@@ -29,7 +29,7 @@
   padding: var(--zd_size7) var(--zd_size20) ;
 }
 .large {
-  --statuslistitem_min_height: var(--zd_size48);
+  --statuslistitem_min_height: 48px;
 }
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -102,19 +102,16 @@
 .statusType{
   position: relative;
   composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
-  align-self: flex-start;
   min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
   min-width: var(--zd_size20) ;
 }
 .statusType::after{
   /* css:validation:ignore */
-  --status_listitem_bullet_min_height: var(--zd_font_size8);
-  /* css:validation:ignore */
-  --status_listitem_bullet_min_width: var(--zd_font_size8);
+  --status_listitem_bullet_size: var(--zd_font_size8);
 
   content: '';
-  height: var(--status_listitem_bullet_min_height);
-  width: var(--status_listitem_bullet_min_width);
+  height: var(--status_listitem_bullet_size);
+  width: var(--status_listitem_bullet_size);
   /* css:theme-validation:ignore */
   border-radius: 50%;
   background-color: var(--zdt_statuslistitem_black_bg);