@zohodesk/dot 1.0.0-temp-187.21 → 1.0.0-temp-223.6

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -797,6 +797,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 iconSize = item.iconSize,
                 iconClass = item.iconClass,
                 title = item.title,
+                _palette = item.palette,
                 _item$disableTitle = item.disableTitle,
                 disableTitle = _item$disableTitle === void 0 ? '' : _item$disableTitle,
                 _item$isDisabled = item.isDisabled,
@@ -822,7 +823,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               ,
               getRef: _this5.itemRef,
               title: title ? title : item[keyName],
-              palette: palette,
+              palette: _palette || palette,
               needMultiLineText: needMultiLineText,
               autoHover: true,
               a11y: {
@@ -847,7 +848,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               ,
               getRef: _this5.itemRef,
               title: title ? title : item[keyName],
-              palette: palette,
+              palette: _palette || palette,
               needMultiLineText: needMultiLineText,
               autoHover: true,
               a11y: {
@@ -866,6 +867,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               iconSize = item.iconSize,
               iconClass = item.iconClass,
               title = item.title,
+              _palette = item.palette,
               needDivider = item.needDivider,
               _item$isDisabled2 = item.isDisabled,
               isDisabled = _item$isDisabled2 === void 0 ? false : _item$isDisabled2,
@@ -900,7 +902,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             getRef: _this5.itemRef,
             title: title ? title : item[keyName],
             key: listIndex,
-            palette: palette,
+            palette: _palette || palette,
             needMultiLineText: needMultiLineText,
             autoHover: true,
             a11y: {
@@ -925,7 +927,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             ,
             getRef: _this5.itemRef,
             title: title ? title : item[keyName],
-            palette: palette,
+            palette: _palette || palette,
             needMultiLineText: needMultiLineText,
             autoHover: true,
             a11y: {

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

@@ -226,10 +226,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
-}
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
 }

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -222,17 +222,13 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customClass$listItem = customClass.listItemClass,
           listItemClass = _customClass$listItem === void 0 ? '' : _customClass$listItem,
           _customClass$textBoxI = customClass.textBoxIconWrapperClass,
-          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI,
-          _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI;
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
-          _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
@@ -310,8 +306,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           boxPosition: boxPosition,
           isPadding: false,
           customClass: {
-            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown,
-            customDropBox: dropBoxClass
+            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
           },
           dataId: "".concat(dataId, "_dropbox"),
           isResponsivePadding: true,
@@ -342,8 +337,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         }, searchList.map(function (item, index) {
           var name = item.name,
               isNew = item.isNew,
-              listProps = item.listProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
+              listItemProps = item.listItemProps;
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
             key: index,
             index: index,
             autoHover: true,
@@ -354,9 +349,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             highlight: selectSearchIndex === index,
             getRef: _this3.getSelectedItemRef,
             isDisabled: listDisabled,
-            customProps: listProps,
+            customProps: listItemProps,
             customClass: listItemClass
-          }, ListItemProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

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

@@ -62,8 +62,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object,
     TagWrapperProps: _propTypes["default"].object,
-    TagProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object
+    TagProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool
 };

package/lib/form/fields/TextEditor/TextEditor.js

@@ -427,13 +427,16 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           isNightMode = _this$props9.isNightMode,
           isReadOnly = _this$props9.isReadOnly,
           dataSelectorId = _this$props9.dataSelectorId,
-          isDisabled = _this$props9.isDisabled;
+          isDisabled = _this$props9.isDisabled,
+          customClass = _this$props9.customClass;
+      var _customClass$wrapper = customClass.wrapper,
+          wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
       var _this$state = this.state,
           isEditorLoad = _this$state.isEditorLoad,
           isEditorShow = _this$state.isEditorShow;
       var editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : ''),
+        className: "".concat(_TextEditorModule["default"].textEditor, " ").concat(_TextEditorModule["default"][type], " ").concat(_TextEditorModule["default"][border], "\n        ").concat(isNightMode ? _TextEditorModule["default"].night : _TextEditorModule["default"].light, " ").concat(isReadOnly ? _TextEditorModule["default"].readOnly : '', " ").concat(isDisabled ? _TextEditorModule["default"].disable : '', " ").concat(!isEditorShow ? _TextEditorModule["default"].editorHide : '', " ").concat(wrapperClass),
         dataId: dataId,
         "data-isEditor": true,
         dataSelectorId: dataSelectorId

package/lib/form/fields/TextEditor/props/defaultProps.js

@@ -18,6 +18,7 @@ var defaultProps = {
   dataSelectorId: 'textEditor',
   customCSS: '',
   isDisabled: false,
-  inlineImageProps: {}
+  inlineImageProps: {},
+  customClass: {}
 };
 exports.defaultProps = defaultProps;

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

@@ -59,6 +59,7 @@ var propTypes = {
     allowedFileExtensions: _propTypes["default"].array,
     fileNameMaxCharacters: _propTypes["default"].number,
     fileSizeMaxBytes: _propTypes["default"].number
-  })
+  }),
+  customClass: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,8 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -102,10 +100,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys,
-          customProps = _this$props3.customProps;
-      var _customProps$ToggleDr = customProps.ToggleDropDownProps,
-          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
+          i18nKeys = _this$props3.i18nKeys;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -114,7 +109,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({}, ToggleDropDownProps, {
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -143,7 +138,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      }));
+      });
     }
   }]);
 

package/lib/list/DepartmentDropDown/props/defaultProps.js

@@ -9,7 +9,6 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };
 exports.defaultProps = defaultProps;

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -31,7 +31,5 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
-})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
-  ToggleDropDownProps: _propTypes2["default"].object
 })), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -247,10 +247,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           renderTargetElement = _this$props4.renderTargetElement,
           renderFooterElement = _this$props4.renderFooterElement,
           _this$props4$a11y = _this$props4.a11y,
-          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y,
-          customClass = _this$props4.customClass;
-      var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y;
       var _a11y$tabIndex = a11y.tabIndex,
           tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
           ariaLabelledby = a11y.ariaLabelledby,
@@ -313,8 +310,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer,
-            customDropBox: dropBoxClass
+            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
           },
           needResponsive: needResponsive,
           isResponsivePadding: true,

package/lib/list/status/StatusDropdown/props/defaultProps.js

@@ -24,7 +24,6 @@ var defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  customClass: {}
+  isRestrictScroll: false
 };
 exports.defaultProps = defaultProps;

package/lib/list/status/StatusDropdown/props/propTypes.js

@@ -30,7 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "customClass", _propTypes2["default"].shape({
-  dropBoxClass: _propTypes2["default"].string
-})), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

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

@@ -135,7 +135,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         "data-a11y-inset-focus": insetFocus,
         isCover: false,
-        align: "vertical",
+        align: "baseline",
         alignBox: "row",
         className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : '', " ").concat(customClass),
         dataId: String(value).replace("'", '_'),
@@ -146,8 +146,6 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         "data-title": isDisabled ? disableTitle : null,
         tabindex: isDisabled ? '-1' : '0'
       }, options, a11y), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _StatusListItemModule["default"].contentWrapper
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_StatusListItemModule["default"].statusType, " ").concat(_StatusListItemModule["default"][bulletColor])
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
@@ -165,7 +163,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null));
+      })) : null);
     }
   }]);
 

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

@@ -1,16 +1,9 @@
-.varClass {
-  --statuslistitem_multiline_lineheight: 1.5385;
-  --statuslistitem_font_size: var(--zd_font_size13);
-  --statuslistitem_min_height: var(--zd_size35);
-}
-
 .list {
-  composes: varClass;
   color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--statuslistitem_font_size);
+  font-size: var(--zd_font_size13) ;
   position: relative;
   list-style: none;
-  min-height: var(--statuslistitem_min_height);
+  min-height: var(--zd_size35) ;
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -29,7 +22,7 @@
   padding: var(--zd_size7) var(--zd_size20) ;
 }
 .large {
-  --statuslistitem_min_height: var(--zd_size48);
+  height: var(--zd_size48) ;
 }
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -43,8 +36,9 @@
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
-.multiLineValue {
-  composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -94,41 +88,24 @@
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
-.contentWrapper {
-  composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
-  width: 100% ;
-}
 /* Status Type */
-.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{
-  content: '';
-  --status_listitem_bullet_min_height: var(--zd_size8);
-  --status_listitem_bullet_min_width: var(--zd_size8);
-  height: var(--status_listitem_bullet_min_height);
-  width: var(--status_listitem_bullet_min_width);
-  /* css:theme-validation:ignore */
+.statusType {
+  width: var(--zd_size8) ;
+  height: var(--zd_size8) ;
   border-radius: 50%;
-  background-color: var(--zdt_statuslistitem_black_bg);
 }
-[dir=ltr] .statusType::after{
-  margin-right: var(--zd_size12) ;
+[dir=ltr] .statusType {
+  margin-right: var(--zd_size13) ;
 }
-[dir=rtl] .statusType::after{
-  margin-left: var(--zd_size12) ;
+[dir=rtl] .statusType {
+  margin-left: var(--zd_size13) ;
 }
-
-.black.statusType::after {
+.black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-.orange.statusType::after {
+.orange {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-.green.statusType::after {
+.green {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-187.21",
+  "version": "1.0.0-temp-223.6",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
     "docs": "npm run css:review && review:props && react-cli docs",
-    "prepublishOnly": "node prePublish.js && npm run css:review  && npm run review:props",
+    "prepublishOnly": "node prePublish.js && npm run downloadOnly",
     "postpublish": "node postPublish.js",
     "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json",
     "download": "npm run downloadOnly  && cd ../ && npm run download",
@@ -68,16 +68,16 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@zohodesk-private/color-variable-preprocessor": "1.2.0",
+    "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-13.4",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
-    "@zohodesk/components": "../components",
+    "@zohodesk/components": "1.0.0-temp-247.3",
     "@zohodesk/hooks": "2.0.6",
     "@zohodesk/icons": "1.1.6",
     "@zohodesk/layout": "^3.1.0",
-    "@zohodesk/svg": "1.2.6",
+    "@zohodesk/svg": "1.0.0-temp.60.3",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
@@ -89,9 +89,9 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/components": "1.5.8",
+    "@zohodesk/components": "1.0.0-temp-247.3",
     "@zohodesk/icons": "1.1.6",
-    "@zohodesk/svg": "1.2.6",
+    "@zohodesk/svg": "1.0.0-temp.60.3",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.6",