@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-257.1

package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -1,83 +1,83 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .hover\:bg-brand-80:hover {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .focus\:bg-brand-80:focus {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .active\:bg-brand-80:active {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .selected\:bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+    background-color: var(--zd-bg-brand);
 }
 
 .bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .hover\:bg-brand-100:hover {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .focus\:bg-brand-100:focus {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .active\:bg-brand-100:active {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .selected\:bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
+    background-color: var(--zd-bg-brand-hover);
 }
 
 .bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .hover\:bg-brand-10:hover {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .focus\:bg-brand-10:focus {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .active\:bg-brand-10:active {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 .selected\:bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+    background-color: var(--zd-bg-brandLight);
 }
 
 /* color not available */
 .bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .hover\:bg-brand-20:hover {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .focus\:bg-brand-20:focus {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .active\:bg-brand-20:active {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 .selected\:bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 /* Static Grey Palette */
@@ -122,23 +122,23 @@
 }
 
 .bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .hover\:bg-grey-10:hover {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .focus\:bg-grey-10:focus {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .active\:bg-grey-10:active {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .selected\:bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+    background-color: var(--zd-bg-secondary);
 }
 
 .bg-grey-15 {
@@ -163,23 +163,23 @@
 
 /* Static Blue Palette */
 .bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .hover\:bg-blue-80:hover {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .focus\:bg-blue-80:focus {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .active\:bg-blue-80:active {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .selected\:bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
+    background-color: var(--zd-bg-info);
 }
 
 .bg-blue-100 {
@@ -569,23 +569,23 @@
 
 /* Utility Colors */
 .bg-transparent {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .hover\:bg-transparent:hover {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .focus\:bg-transparent:focus {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .active\:bg-transparent:active {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .selected\:bg-transparent {
-    background-color: var(--dot_mirror);
+    background-color: var(--zd-bg-transparent);
 }
 
 .bg-white {

package/es/v1/helpers/colorHelpers/border/borderColor.module.css

@@ -62,84 +62,84 @@
 
 /* Static Grey Palette */
 .border-grey-65 {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .hover\:border-grey-65:hover {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .focus\:border-grey-65:focus {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .active\:border-grey-65:active {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .selected\:border-grey-65 {
-    border-color: var(--zdt_v1_palette_grey_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .border-grey-55 {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .hover\:border-grey-55:hover {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .focus\:border-grey-55:focus {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .active\:border-grey-55:active {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .selected\:border-grey-55 {
-    border-color: var(--zdt_v1_palette_grey_hover_border);
+    border-color: var(--zd-border-tertiary);
 }
 
 .border-grey-15 {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .hover\:border-grey-15:hover {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .focus\:border-grey-15:focus {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .active\:border-grey-15:active {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 .selected\:border-grey-15 {
-    border-color: var(--zdt_v1_palette_grey_light_border);
+    border-color: var(--zd-border-secondary);
 }
 
 /* Static Blue Palette */
 .border-blue-80 {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .hover\:border-blue-80:hover {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .focus\:border-blue-80:focus {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .active\:border-blue-80:active {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .selected\:border-blue-80 {
-    border-color: var(--zdt_v1_palette_blue_border);
+    border-color: var(--zd-border-info);
 }
 
 .border-blue-100 {

package/es/v1/helpers/colorHelpers/text/textColor.module.css

@@ -1,22 +1,22 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .hover\:text-brand-80:hover {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .focus\:text-brand-80:focus {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .active\:text-brand-80:active {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .selected\:text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .text-brand-100 {
@@ -41,23 +41,23 @@
 
 /* Static Grey Palette */
 .text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .hover\:text-grey-65:hover {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .focus\:text-grey-65:focus {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .active\:text-grey-65:active {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .selected\:text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .text-grey-100 {
@@ -82,43 +82,43 @@
 
 /* Static Blue Palette */
 .text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .hover\:text-blue-80:hover {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .focus\:text-blue-80:focus {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .active\:text-blue-80:active {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .selected\:text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .hover\:text-blue-100:hover {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .focus\:text-blue-100:focus {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .active\:text-blue-100:active {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .selected\:text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 /* Static Green Palette */
@@ -307,62 +307,62 @@
 }
 
 .text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .hover\:text-white:hover {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .focus\:text-white:focus {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .active\:text-white:active {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .selected\:text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .hover\:text-black:hover {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .focus\:text-black:focus {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .active\:text-black:active {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .selected\:text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 /* CTA-aware filled text — adapts to CTA theme */
 .text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .hover\:text-brand-filled:hover {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .focus\:text-brand-filled:focus {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .active\:text-brand-filled:active {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .selected\:text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }

package/lib/ListItem/ListItem.js

@@ -137,8 +137,6 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customTi = customClass.customTickIcon,
           customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi,
-          _customClass$customLe = customClass.customLeftValuePlaceholder,
-          customLeftValuePlaceholder = _customClass$customLe === void 0 ? '' : _customClass$customLe,
           _customClass$customVa = customClass.customValueRightPlaceholder,
           customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
           _customClass$customTi2 = customClass.customTitleBox,
@@ -181,7 +179,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_ListItemModule["default"].titleBox, " ").concat(lhsAlignContent !== 'start' ? "".concat(_ListItemModule["default"]["alignLhsBox_".concat(lhsAlignContent)]) : '', " ").concat(customTitleBox)
       }, (0, _utils.isRenderable)(renderBeforeChildren) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         adjust: true,
-        className: "".concat(_ListItemModule["default"].beforeChild, " ").concat(customLeftValuePlaceholder)
+        className: _ListItemModule["default"].beforeChild
       }, (0, _utils.renderNode)(renderBeforeChildren)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,

package/lib/ListItem/ListItemWithAvatar.js

@@ -135,7 +135,6 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
-          renderLeftValuePlaceholderNode = _this$props4.renderLeftValuePlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
@@ -152,11 +151,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           _customClass$customAv2 = customClass.customAvatarTeam,
           customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2,
           _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
-          _customClass$customLe = customClass.customLeftValuePlaceholder,
-          customLeftValuePlaceholder = _customClass$customLe === void 0 ? '' : _customClass$customLe,
-          _customClass$customTi = customClass.customTitleBox,
-          customTitleBox = _customClass$customTi === void 0 ? '' : _customClass$customTi;
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
 
       var listA11y = _objectSpread({
         ariaHidden: true,
@@ -216,11 +211,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(customTitleBox)
-      }, (0, _utils.isRenderable)(renderLeftValuePlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        adjust: true,
-        className: "".concat(customLeftValuePlaceholder)
-      }, (0, _utils.renderNode)(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         "data-title": isDisabled ? null : title,

package/lib/ListItem/ListItemWithCheckBox.js

@@ -124,7 +124,6 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
-          renderLeftValuePlaceholderNode = _this$props4.renderLeftValuePlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
 
@@ -143,11 +142,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa,
           _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
-          _customClass$customLe = customClass.customLeftValuePlaceholder,
-          customLeftValuePlaceholder = _customClass$customLe === void 0 ? '' : _customClass$customLe,
-          _customClass$customTi = customClass.customTitleBox,
-          customTitleBox = _customClass$customTi === void 0 ? '' : _customClass$customTi;
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
       var iconBoxDataId = "".concat(dataId ? dataId : value, "_checkBox");
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
@@ -189,11 +184,8 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(customTitleBox)
-      }, (0, _utils.isRenderable)(renderLeftValuePlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        adjust: true,
-        className: "".concat(customLeftValuePlaceholder)
-      }, (0, _utils.renderNode)(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         "data-title": isDisabled ? null : title,

package/lib/ListItem/ListItemWithIcon.js

@@ -128,13 +128,10 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customValueRightPlaceholderClass = _this$props4.customValueRightPlaceholderClass,
-          customLeftValuePlaceholderClass = _this$props4.customLeftValuePlaceholderClass,
-          customTitleBoxClass = _this$props4.customTitleBoxClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
-          renderLeftValuePlaceholderNode = _this$props4.renderLeftValuePlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
@@ -192,11 +189,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(customTitleBoxClass)
-      }, (0, _utils.isRenderable)(renderLeftValuePlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        adjust: true,
-        className: "".concat(customLeftValuePlaceholderClass)
-      }, (0, _utils.renderNode)(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,

package/lib/ListItem/ListItemWithRadio.js

@@ -125,7 +125,6 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
-          renderLeftValuePlaceholderNode = _this$props4.renderLeftValuePlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
@@ -144,11 +143,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           _customClass$customRa2 = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
           _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
-          _customClass$customLe = customClass.customLeftValuePlaceholder,
-          customLeftValuePlaceholder = _customClass$customLe === void 0 ? '' : _customClass$customLe,
-          _customClass$customTi = customClass.customTitleBox,
-          customTitleBox = _customClass$customTi === void 0 ? '' : _customClass$customTi;
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
       var iconBoxDataId = "".concat(dataId, "_radio");
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
@@ -191,11 +186,8 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         className: "".concat(_ListItemModule["default"].leftBox, " ").concat(_ListItemModule["default"].selfAlign_center)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(customTitleBox)
-      }, (0, _utils.isRenderable)(renderLeftValuePlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        adjust: true,
-        className: "".concat(customLeftValuePlaceholder)
-      }, (0, _utils.renderNode)(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         "data-title": disableTitle ? null : title,

package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js

@@ -73,27 +73,4 @@ describe('ListItemWithAvatar', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithAvatar with renderLeftValuePlaceholderNode', function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      }
-    })),
-        asFragment = _render8.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithAvatar with renderLeftValuePlaceholderNode & it\'s custom class', function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
-      renderLeftValuePlaceholderNode: function renderLeftValuePlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Left Placeholder");
-      },
-      customClass: {
-        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
-      }
-    })),
-        asFragment = _render9.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });