@digitalc/dxp-ui 0.0.5-alpha.15 → 0.0.5-alpha.17

package/lib/components/IconButton/index.js

@@ -67,7 +67,7 @@ var import_classnames = __toESM(require("classnames"));
 var import_cssinjs = require("@ant-design/cssinjs");
 var import_Icon = __toESM(require("../Icon"));
 var import_constants = require("../../constants");
-var import_noop = require("../../utils/noop");
+var import_utils = require("../../utils");
 var import_designTokens = require("./designTokens");
 var import_style = require("./style/index.less");
 var import_IconButtonGroup = __toESM(require("../IconButtonGroup"));
@@ -82,19 +82,19 @@ var IconButton = (props) => {
   const _a = props, {
     prefixCls = import_constants.cssClasses.PREFIX + "-icon-button",
     size = "medium",
-    customeIconSize,
+    customIconSize,
     disabled = false,
     loading = false,
     style,
     className,
-    onMouseDown = import_noop.noop,
-    onClick = import_noop.noop,
-    onMouseEnter = import_noop.noop,
-    onMouseLeave = import_noop.noop
+    onMouseDown = import_utils.noop,
+    onClick = import_utils.noop,
+    onMouseEnter = import_utils.noop,
+    onMouseLeave = import_utils.noop
   } = _a, restProps = __objRest(_a, [
     "prefixCls",
     "size",
-    "customeIconSize",
+    "customIconSize",
     "disabled",
     "loading",
     "style",
@@ -104,13 +104,15 @@ var IconButton = (props) => {
     "onMouseEnter",
     "onMouseLeave"
   ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const otherDesignTokens = (0, import_designTokens.useOtherDesignTokens)();
   const getIconSize = () => {
     if (size === "medium") {
-      return import_designTokens.designTokens.sizingIconButtonMedium;
+      return designTokens.sizingIconButtonMedium;
     } else if (size === "small") {
-      return import_designTokens.designTokens.sizingIconButtonSmall;
+      return designTokens.sizingIconButtonSmall;
     }
-    return import_designTokens.designTokens.sizingIconButtonMedium;
+    return designTokens.sizingIconButtonMedium;
   };
   const handleClick = (e) => {
     if (disabled || loading) {
@@ -120,7 +122,7 @@ var IconButton = (props) => {
   };
   const useCustomIconButtonStyle = () => {
     const iconSize2 = getIconSize();
-    const gap = size === "medium" ? import_designTokens.designTokens.spacingIconButtonHorizontalGap : import_designTokens.designTokens.spacingIconButtonHorizontalGapSm;
+    const gap = size === "medium" ? designTokens.spacingIconButtonHorizontalGap : designTokens.spacingIconButtonHorizontalGapSm;
     const hashId2 = (0, import_cssinjs.useStyleRegister)(
       {
         theme,
@@ -136,29 +138,29 @@ var IconButton = (props) => {
         // height: ${iconSize2}px;
         cursor: ${disabled ? "not-allowed" : "pointer"};
         opacity: ${disabled ? 0.5 : 1};
-        transition: ${import_designTokens.designTokens.transitionIconButton};
+        transition: ${designTokens.transitionIconButton};
       }
 
       .${prefixCls}-medium {
-        width: ${import_designTokens.designTokens.sizingIconButtonMedium}px;
-        height: ${import_designTokens.designTokens.sizingIconButtonMedium}px;
-        padding:  ${import_designTokens.designTokens.spacingIconButtonPaddingHorizontal}px ${import_designTokens.designTokens.spacingIconButtonPaddingVertical}px;
+        width: ${designTokens.sizingIconButtonMedium}px;
+        height: ${designTokens.sizingIconButtonMedium}px;
+        padding:  ${designTokens.spacingIconButtonPaddingHorizontal}px ${designTokens.spacingIconButtonPaddingVertical}px;
       }
 
       .${prefixCls}-small {
-        width: ${import_designTokens.designTokens.sizingIconButtonSmall}px;
-        height: ${import_designTokens.designTokens.sizingIconButtonSmall}px;
-        padding: ${import_designTokens.designTokens.spacingIconButtonPaddingHorizontalSm}px ${import_designTokens.designTokens.spacingIconButtonPaddingVerticalSm}px;
+        width: ${designTokens.sizingIconButtonSmall}px;
+        height: ${designTokens.sizingIconButtonSmall}px;
+        padding: ${designTokens.spacingIconButtonPaddingHorizontalSm}px ${designTokens.spacingIconButtonPaddingVerticalSm}px;
       }
 
       .${prefixCls}-container:hover {
         opacity: 0.8;
-        color: ${import_designTokens.designTokens.colorIconButtonHover};
+        color: ${designTokens.colorIconButtonHover};
       }
 
       .${prefixCls}-container:active {
         opacity: 0.7;
-        color: ${import_designTokens.designTokens.colorIconButtonActive};
+        color: ${designTokens.colorIconButtonActive};
       }
 
       .${prefixCls}-loading i {
@@ -170,11 +172,11 @@ var IconButton = (props) => {
       }
 
       .${prefixCls}-group .${prefixCls}-medium + .${prefixCls}-medium {
-        padding-left: ${import_designTokens.designTokens.spacingIconButtonHorizontalGap}px;
+        padding-left: ${designTokens.spacingIconButtonHorizontalGap}px;
       }
 
       .${prefixCls}-group .${prefixCls}-small + .${prefixCls}-small {
-        padding-left: ${import_designTokens.designTokens.spacingIconButtonHorizontalGapSm}px;
+        padding-left: ${designTokens.spacingIconButtonHorizontalGapSm}px;
       }
     `
     );
@@ -196,7 +198,7 @@ var IconButton = (props) => {
       onMouseEnter,
       onMouseLeave
     },
-    /* @__PURE__ */ import_react.default.createElement(import_Icon.default, __spreadProps(__spreadValues({}, restProps), { size: customeIconSize || iconSize, style: __spreadValues({}, import_designTokens.otherDesignTokens) }))
+    /* @__PURE__ */ import_react.default.createElement(import_Icon.default, __spreadProps(__spreadValues({}, restProps), { size: customIconSize || iconSize, style: __spreadValues({}, otherDesignTokens) }))
   );
 };
 var IconButton_default = IconButton;

package/lib/components/Image/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type backImageRadio = 1 | 2 | 0.68;
-export declare const BackImageEunm: Record<string, backImageRadio>;
+export declare const BackImageEnum: Record<string, backImageRadio>;
 export interface IImageProps {
     src?: string;
     radio?: backImageRadio;

package/lib/components/Image/index.js

@@ -55,14 +55,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Image/index.tsx
 var Image_exports = {};
 __export(Image_exports, {
-  BackImageEunm: () => BackImageEunm,
+  BackImageEnum: () => BackImageEnum,
   default: () => Image_default
 });
 module.exports = __toCommonJS(Image_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_constants = require("../../constants");
-var BackImageEunm = {
+var BackImageEnum = {
   whRadio1: 1,
   whRadio2: 2,
   whRadio3: 0.68
@@ -72,8 +72,8 @@ var Image = (props) => {
     src,
     style,
     imageSize,
-    radio = BackImageEunm.whRadio2,
-    className
+    radio = BackImageEnum.whRadio2,
+    className = ""
   } = _a, otherProps = __objRest(_a, [
     "src",
     "style",

package/lib/components/ListItem/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     sizingListItemIconImage: any;
     sizingListItemIconIcon: any;
     sizingListItemIconIconStatus: any;
@@ -26,5 +26,7 @@ declare const designTokens: {
     colorListItemTextTitle: any;
     colorListItemTextSubtitle: any;
     colorListItemTextPoints: any;
+    spacingListItemTextVerticalGapMd: any;
+    spacingListItemTextVerticalGapSm: any;
 };
-export default designTokens;
+export { useDesignTokens };

package/lib/components/ListItem/designTokens.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,50 +14,47 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/ListItem/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  default: () => designTokens_default
+  useDesignTokens: () => useDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenManager = __toESM(require("../../utils/tokenManager"));
-var designTokens = {
-  sizingListItemIconImage: import_tokenManager.default.tokenKey("sizingListItemIconImage"),
-  sizingListItemIconIcon: import_tokenManager.default.tokenKey("sizingListItemIconIcon"),
-  sizingListItemIconIconStatus: import_tokenManager.default.tokenKey("sizingListItemIconIconStatus"),
-  sizingListItemImageImage: import_tokenManager.default.tokenKey("sizingListItemImageImage"),
-  sizingListItemImageIcon: import_tokenManager.default.tokenKey("sizingListItemImageIcon"),
-  sizingListItemImageIconLg: import_tokenManager.default.tokenKey("sizingListItemImageIconLg"),
-  sizingListItemImageThumbnail: import_tokenManager.default.tokenKey("sizingListItemImageThumbnail"),
-  sizingListItemIcon: import_tokenManager.default.tokenKey("sizingListItemIcon"),
-  sizingListItemIconLg: import_tokenManager.default.tokenKey("sizingListItemIconLg"),
-  spacingListItemIconStatusPaddingRight: import_tokenManager.default.tokenKey("spacingListItemIconStatusPaddingRight"),
-  spacingListItemIconPaddingLeft: import_tokenManager.default.tokenKey("spacingListItemIconPaddingLeft"),
-  spacingListItemImagePaddingRight: import_tokenManager.default.tokenKey("spacingListItemImagePaddingRight"),
-  spacingListItemIconImagePaddingVertical: import_tokenManager.default.tokenKey("spacingListItemIconImagePaddingVertical"),
-  spacingListItemIconImagePaddingHorizontal: import_tokenManager.default.tokenKey("spacingListItemIconImagePaddingHorizontal"),
-  spacingListItemIconIconPaddingVertical: import_tokenManager.default.tokenKey("spacingListItemIconIconPaddingVertical"),
-  spacingListItemIconIconPaddingHorizontal: import_tokenManager.default.tokenKey("spacingListItemIconIconPaddingHorizontal"),
-  spacingListItemImageIconPaddingRight: import_tokenManager.default.tokenKey("spacingListItemImageIconPaddingRight"),
-  spacingListItemImagePointsPaddingTop: import_tokenManager.default.tokenKey("spacingListItemImagePointsPaddingTop"),
-  colorListItemIconBackground: import_tokenManager.default.tokenKey("colorListItemIconBackground"),
-  colorListItemIconSubtle: import_tokenManager.default.tokenKey("colorListItemIconSubtle"),
-  colorListItemIcon: import_tokenManager.default.tokenKey("colorListItemIcon"),
-  borderRadiusListItem: import_tokenManager.default.tokenKey("borderRadiusListItem"),
-  colorListItemBackground: import_tokenManager.default.tokenKey("colorListItemBackground"),
-  spacingListItemTextPaddingHorizontal: import_tokenManager.default.tokenKey("spacingListItemTextPaddingHorizontal"),
-  colorListItemTextTitle: import_tokenManager.default.tokenKey("colorListItemTextTitle"),
-  colorListItemTextSubtitle: import_tokenManager.default.tokenKey("colorListItemTextSubtitle"),
-  colorListItemTextPoints: import_tokenManager.default.tokenKey("colorListItemTextPoints")
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    sizingListItemIconImage: getToken("sizingListItemIconImage"),
+    sizingListItemIconIcon: getToken("sizingListItemIconIcon"),
+    sizingListItemIconIconStatus: getToken("sizingListItemIconIconStatus"),
+    sizingListItemImageImage: getToken("sizingListItemImageImage"),
+    sizingListItemImageIcon: getToken("sizingListItemImageIcon"),
+    sizingListItemImageIconLg: getToken("sizingListItemImageIconLg"),
+    sizingListItemImageThumbnail: getToken("sizingListItemImageThumbnail"),
+    sizingListItemIcon: getToken("sizingListItemIcon"),
+    sizingListItemIconLg: getToken("sizingListItemIconLg"),
+    spacingListItemIconStatusPaddingRight: getToken("spacingListItemIconStatusPaddingRight"),
+    spacingListItemIconPaddingLeft: getToken("spacingListItemIconPaddingLeft"),
+    spacingListItemImagePaddingRight: getToken("spacingListItemImagePaddingRight"),
+    spacingListItemIconImagePaddingVertical: getToken("spacingListItemIconImagePaddingVertical"),
+    spacingListItemIconImagePaddingHorizontal: getToken("spacingListItemIconImagePaddingHorizontal"),
+    spacingListItemIconIconPaddingVertical: getToken("spacingListItemIconIconPaddingVertical"),
+    spacingListItemIconIconPaddingHorizontal: getToken("spacingListItemIconIconPaddingHorizontal"),
+    spacingListItemImageIconPaddingRight: getToken("spacingListItemImageIconPaddingRight"),
+    spacingListItemImagePointsPaddingTop: getToken("spacingListItemImagePointsPaddingTop"),
+    colorListItemIconBackground: getToken("colorListItemIconBackground"),
+    colorListItemIconSubtle: getToken("colorListItemIconSubtle"),
+    colorListItemIcon: getToken("colorListItemIcon"),
+    borderRadiusListItem: getToken("borderRadiusListItem"),
+    colorListItemBackground: getToken("colorListItemBackground"),
+    spacingListItemTextPaddingHorizontal: getToken("spacingListItemTextPaddingHorizontal"),
+    colorListItemTextTitle: getToken("colorListItemTextTitle"),
+    colorListItemTextSubtitle: getToken("colorListItemTextSubtitle"),
+    colorListItemTextPoints: getToken("colorListItemTextPoints"),
+    spacingListItemTextVerticalGapMd: getToken("spacingListItemTextVerticalGapMd"),
+    spacingListItemTextVerticalGapSm: getToken("spacingListItemTextVerticalGapSm")
+  };
+  return designTokens;
 };
-var designTokens_default = designTokens;

package/lib/components/ListItem/index.d.ts

@@ -4,6 +4,8 @@ export declare const ListItemTypes: {
     readonly ListItemIcon: "ListItemIcon";
     readonly ListItemImage: "ListItemImage";
     readonly ListItemOther: "ListItemOther";
+    readonly ListItemDefault: "ListItemDefault";
+    readonly ListItemCustom: "ListItemCustom";
 };
 export declare const TAPPABLE_AREAS: {
     readonly ALL: "ALL";
@@ -27,10 +29,11 @@ export interface ISubIconValueConfig {
     iconName: string;
 }
 export interface IListItemProps {
-    listType: ListItemType;
+    size?: 'M' | 'S';
+    listType?: ListItemType;
     leftIcon?: IIconConfig;
     leftImageSrc?: string;
-    title: string;
+    title?: string;
     subTitle?: string;
     listItemRightType?: ListItemRightType;
     showToggle?: boolean;
@@ -55,6 +58,13 @@ export interface IListItemProps {
     onRightIconClick?: () => void;
     tappableArea?: TappableAreaType;
     tappableAreaClick?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    showRightText?: boolean;
+    rightText?: string;
+    rightChildren?: React.ReactNode;
+    leftChildren?: React.ReactNode;
+    prefix?: string;
 }
 declare const ListItem: React.FC<IListItemProps>;
 export default ListItem;

package/lib/components/ListItem/index.js

@@ -1,8 +1,6 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -20,7 +18,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -65,7 +62,7 @@ __export(ListItem_exports, {
 });
 module.exports = __toCommonJS(ListItem_exports);
 var import_react = __toESM(require("react"));
-var import_designTokens = __toESM(require("./designTokens"));
+var import_designTokens = require("./designTokens");
 var import_cssinjs = require("@ant-design/cssinjs");
 var import_lodash = require("lodash");
 var import_theme = require("../../utils/theme");
@@ -74,8 +71,15 @@ var import_constants = require("../../constants");
 var import_style = require("./style/index.less");
 var ListItemTypes = {
   ListItemIcon: "ListItemIcon",
+  // 见设计稿 左侧ICON
   ListItemImage: "ListItemImage",
-  ListItemOther: "ListItemOther"
+  // 见设计稿 左侧 Image(铺满)
+  ListItemOther: "ListItemOther",
+  // 见设计稿 左侧thumbImage 
+  ListItemDefault: "ListItemDefault",
+  // 左右 文字
+  ListItemCustom: "ListItemCustom"
+  // 只有一个壳子 内容纯自定义
 };
 var TAPPABLE_AREAS = {
   ALL: "ALL",
@@ -91,7 +95,8 @@ var ListItemRightTypes = {
 };
 var ListItem = (_a) => {
   var _b = _a, {
-    listType,
+    size = "",
+    listType = ListItemTypes.ListItemDefault,
     leftIcon,
     leftImageSrc,
     title,
@@ -117,8 +122,16 @@ var ListItem = (_a) => {
     rightIconName,
     onRightIconClick,
     tappableArea,
-    tappableAreaClick
+    tappableAreaClick,
+    children,
+    className = "",
+    showRightText,
+    rightText,
+    rightChildren,
+    leftChildren,
+    prefix = `${import_constants.cssClasses.PREFIX}-list-item`
   } = _b, restProps = __objRest(_b, [
+    "size",
     "listType",
     "leftIcon",
     "leftImageSrc",
@@ -145,8 +158,16 @@ var ListItem = (_a) => {
     "rightIconName",
     "onRightIconClick",
     "tappableArea",
-    "tappableAreaClick"
+    "tappableAreaClick",
+    "children",
+    "className",
+    "showRightText",
+    "rightText",
+    "rightChildren",
+    "leftChildren",
+    "prefix"
   ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
   const {
     sizingListItemImageImage,
     borderRadiusListItem,
@@ -165,47 +186,61 @@ var ListItem = (_a) => {
     spacingListItemImageIconPaddingRight,
     colorListItemTextPoints,
     sizingListItemImageThumbnail,
-    sizingListItemIconLg
-  } = import_designTokens.default;
+    sizingListItemIconLg,
+    spacingListItemTextVerticalGapMd,
+    spacingListItemTextVerticalGapSm
+  } = designTokens;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
       token: {},
-      path: [`${import_constants.cssClasses.PREFIX}-list-item `]
+      path: [`${prefix}`]
     }, () => `
-      .${import_constants.cssClasses.PREFIX}-list-item  {
+      .${prefix}  {
         box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
         border-radius: ${borderRadiusListItem || 8}px;
-        background-color:${colorListItemBackground || "#fff"};
+        background-color:${colorListItemBackground || "transparent"};
         &.noShadow{
           box-shadow:none !important;
         }
-        .${import_constants.cssClasses.PREFIX}-icon-container {
+        &.${prefix}-M {
+          padding: ${spacingListItemTextVerticalGapMd / 2}px 0;
+        }
+        &.${prefix}-S {
+          padding: ${spacingListItemTextVerticalGapSm / 2}px 0;
+        }
+        .${prefix}-icon-container {
           background:${colorListItemIconBackground || "#F5F5F8"};
           margin-right:${spacingListItemTextPaddingHorizontal}px;
         }
-        .${import_constants.cssClasses.PREFIX}-image-container {
+        .${prefix}-image-container {
           margin-right:${spacingListItemTextPaddingHorizontal}px;
         }
       }
-      .${import_constants.cssClasses.PREFIX}-item-right {
+      .${prefix}-right {
         padding-right:${spacingListItemTextPaddingHorizontal}px;
+        &.noPaddingRight{
+          padding-right: 0px;
+        }
       }
-      .${import_constants.cssClasses.PREFIX}-status-warp {
+      .${prefix}-status-warp {
         padding-left: ${spacingListItemTextPaddingHorizontal}px;
       }
-      .${import_constants.cssClasses.PREFIX}-item-title {
+      .${prefix}-title {
+        color:${colorListItemTextTitle};
+      }
+      .${prefix}-right-title{
         color:${colorListItemTextTitle};
       }
-      .${import_constants.cssClasses.PREFIX}-item-subTitle {
+      .${prefix}-subTitle {
         color:${colorListItemTextSubtitle};
       }
      
-      .${import_constants.cssClasses.PREFIX}-sub-icon-title {
+      .${prefix}-sub-icon-title {
         color:${colorListItemTextPoints};
         margin-left:${spacingListItemImageIconPaddingRight}px;
       }
-      .${import_constants.cssClasses.PREFIX}-right-btn {
+      .${prefix}-right-btn {
          min-width:60px !important;
       }
     `);
@@ -237,34 +272,65 @@ var ListItem = (_a) => {
       onToggleChange(checked, event);
     }
   };
+  if (listType === ListItemTypes.ListItemCustom) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadValues({
+        className: `${prefix} ${className}`,
+        onClick: tappableAreaClick
+      }, restProps),
+      children
+    );
+  }
+  ;
+  if (listType === ListItemTypes.ListItemDefault) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadValues({
+        className: `${prefix} ${prefix}-${size} noShadow default ${className || ""}`,
+        onClick: onAllClick
+      }, restProps),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-default-left` }, subTitleUp && subTitle && /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${prefix}-subTitle` }, subTitle), title && /* @__PURE__ */ import_react.default.createElement(
+        import__.Text,
+        {
+          size: "ContentC14Regular",
+          className: `${prefix}-title ${subTitle ? "line1" : "line2"}`
+        },
+        title
+      ), !subTitleUp && subTitle && /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${prefix}-subTitle` }, subTitle), leftChildren),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-default-right` }, !(0, import_lodash.isEmpty)(rightText) && /* @__PURE__ */ import_react.default.createElement(
+        import__.Text,
+        {
+          className: `${prefix}-right-title`,
+          size: "TitleT14Bold"
+        },
+        rightText
+      ), rightChildren)
+    );
+  }
+  ;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
-    __spreadProps(__spreadValues({
-      className: `
-        ${import_constants.cssClasses.PREFIX}-list-item 
-        ${listType === ListItemTypes.ListItemOther ? "noShadow" : ""}
-      `
-    }, restProps), {
+    __spreadValues({
+      className: `${prefix} ${prefix}-${size} ${listType === ListItemTypes.ListItemOther ? "noShadow" : ""} ${className || ""}`,
       onClick: onAllClick
-    }),
+    }, restProps),
     /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: `
-        ${import_constants.cssClasses.PREFIX}-item-left 
-      `
+        className: `${prefix}-left`
       },
       listType === ListItemTypes.ListItemIcon && !(0, import_lodash.isEmpty)(leftIcon) && /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: `${import_constants.cssClasses.PREFIX}-icon-container`
+          className: `${prefix}-icon-container`
         },
         /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: leftIcon ? leftIcon.iconName : "", size: sizingListItemIconIcon, style: leftIcon ? leftIcon.iconStyle : {} })
       ),
       listType === ListItemTypes.ListItemImage && leftImageSrc && /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: `${import_constants.cssClasses.PREFIX}-image-container`
+          className: `${prefix}-image-container`
         },
         /* @__PURE__ */ import_react.default.createElement(import__.Image, { radio: 1, src: leftImageSrc, imageSize: sizingListItemImageImage || 104 }),
         showTag && /* @__PURE__ */ import_react.default.createElement(
@@ -286,12 +352,12 @@ var ListItem = (_a) => {
       listType === ListItemTypes.ListItemOther && leftThumbnail && /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: `${import_constants.cssClasses.PREFIX}-image-container`
+          className: `${prefix}-image-container`
         },
         /* @__PURE__ */ import_react.default.createElement(
           import__.Image,
           {
-            radio: import__.BackImageEunm.whRadio1,
+            radio: import__.BackImageEnum.whRadio1,
             src: leftThumbnail,
             imageSize: sizingListItemImageThumbnail || 56,
             style: { borderRadius: `${borderRadiusListItem}px`, margin: "10px 0" }
@@ -302,25 +368,21 @@ var ListItem = (_a) => {
     /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: `
-        ${import_constants.cssClasses.PREFIX}-item-right 
-      `,
+        className: `${prefix}-right ${showRightText || rightChildren || listType === ListItemTypes.ListItemOther ? "noPaddingRight" : ""}`,
         onClick: onExceptImgClick
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-sub-warp` }, subTitleUp && /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${import_constants.cssClasses.PREFIX}-item-subTitle` }, subTitle), /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-title-sub-warp` }, subTitleUp && subTitle && /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${prefix}-subTitle` }, subTitle), title && /* @__PURE__ */ import_react.default.createElement(
         import__.Text,
         {
           size: "ContentC14Bold",
-          className: `${import_constants.cssClasses.PREFIX}-item-title     
-               ${subTitle ? "line1" : "line2"} 
-              }`
+          className: `${prefix}-title ${subTitle ? "line1" : "line2"}`
         },
         title
-      ), !subTitleUp && /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${import_constants.cssClasses.PREFIX}-item-subTitle` }, subTitle), !(0, import_lodash.isEmpty)(subIconObj) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-sub-icon` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: subIconObj.iconName, color: colorListItemIconSubtle, size: sizingListItemImageIcon || 20 }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${import_constants.cssClasses.PREFIX}-sub-icon-title` }, subIconObj.value))),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-status-warp` }, showToggle && /* @__PURE__ */ import_react.default.createElement(import__.Toggle, { size: "small", checked: toggleChecked, onChange: onSwicthChange }), showLink && /* @__PURE__ */ import_react.default.createElement(import__.TextLink, { className: `${import_constants.cssClasses.PREFIX}-right-link`, type: import__.TextLinkEnum.default, text: LinkName, onClick: onTextLinkClick }), showStatus && /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: statusIconName || "", size: sizingListItemIconIcon, color: statusIconColor }), showRightBtn && /* @__PURE__ */ import_react.default.createElement(
+      ), !subTitleUp && subTitle && /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${prefix}-subTitle` }, subTitle), !(0, import_lodash.isEmpty)(subIconObj) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sub-icon` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: subIconObj.iconName, color: colorListItemIconSubtle, size: sizingListItemImageIcon || 20 }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${prefix}-sub-icon-title` }, subIconObj.value)), leftChildren),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-status-warp` }, showToggle && /* @__PURE__ */ import_react.default.createElement(import__.Toggle, { size: "small", checked: toggleChecked, onChange: onSwicthChange }), showLink && /* @__PURE__ */ import_react.default.createElement(import__.TextLink, { className: `${prefix}-right-link`, type: import__.TextLinkEnum.default, text: LinkName, onClick: onTextLinkClick }), showStatus && /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: statusIconName || "", size: sizingListItemIconIcon, color: statusIconColor }), showRightBtn && /* @__PURE__ */ import_react.default.createElement(
         import__.Button,
         {
-          className: `${import_constants.cssClasses.PREFIX}-right-btn`,
+          className: `${prefix}-right-btn`,
           onClick: (e) => {
             e.stopPropagation();
             if (onRightBtnClick) {
@@ -341,7 +403,14 @@ var ListItem = (_a) => {
             }
           }
         }
-      ))
+      ), showRightText && /* @__PURE__ */ import_react.default.createElement(
+        import__.Text,
+        {
+          className: `${prefix}-right-title`,
+          size: "TitleT14Bold"
+        },
+        rightText
+      ), rightChildren)
     )
   );
 };