@pisell/materials 6.1.1 → 6.1.3

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { AvatarProps } from 'antd';
+import './index.less';
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export interface PisellAvatarProps extends Omit<AvatarProps, 'size' | 'shape'> {
+    shape?: 'circle' | 'square';
+    size?: AvatarSize;
+    src?: string;
+    alt?: string;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    useTextAvatar?: boolean;
+    borderRadius?: number;
+    onError?: () => boolean;
+}
+declare const PisellAvatar: React.FC<PisellAvatarProps>;
+export default PisellAvatar;

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

@@ -0,0 +1,19 @@
+import { CardProps } from 'antd';
+import './index.less';
+export interface PisellCardProps extends CardProps {
+    bordered?: boolean;
+    selected?: boolean;
+    loading?: boolean;
+    padding?: number;
+    borderRadius?: number;
+    disabled?: boolean;
+    onClick?: () => void;
+    isClickable?: boolean;
+}
+/**
+ * Pisell 卡片容器组件
+ * @param props
+ * @constructor
+ */
+declare const PisellCard: (props: PisellCardProps) => JSX.Element;
+export default PisellCard;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.less';
+export interface PisellCustomCheckboxGroupProps {
+    dataSource?: any[];
+    disabled?: boolean;
+    allowAdd?: boolean;
+    isMultiple?: boolean;
+    id?: string | string[];
+    onClick?: (value: any) => void;
+    onAdd?: () => void;
+    renderAddItem?: (item: any) => React.ReactNode;
+    [key: string]: any;
+    className?: string;
+}
+declare const PisellCustomCheckboxGroup: React.FC<PisellCustomCheckboxGroupProps>;
+export default PisellCustomCheckboxGroup;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.less';
+export interface MenuItemType {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    divider?: boolean;
+}
+export interface PisellDropdownProps {
+    trigger?: React.ReactNode;
+    items?: MenuItemType[];
+    showShortcut?: boolean;
+    triggerType?: ('click' | 'hover')[];
+    className?: string;
+    style?: React.CSSProperties;
+    onSelect?: (key: string) => void;
+}
+declare const PisellDropdown: React.FC<PisellDropdownProps>;
+export default PisellDropdown;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { EmptyProps } from 'antd';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export interface PisellEmptyProps extends EmptyProps {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    /** 额外内容描述 */
+    extraDescription?: React.ReactNode;
+    /** 额外内容描述 */
+    icon?: React.ReactNode;
+    /** 自定义底部额外操作区域 */
+    footer?: React.ReactNode;
+    [key: string]: any;
+    /** 最大宽度 */
+    maxWidth?: number;
+}
+declare const PisellEmpty: (props: PisellEmptyProps) => JSX.Element;
+export default PisellEmpty;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import './index.less';
+export interface PisellHeaderProgressBarProps {
+    title?: React.ReactNode;
+    stepText?: React.ReactNode;
+    showClose?: boolean;
+    /** 是否启用投影 */
+    enableShadow?: boolean;
+    /** 是否启用描边 */
+    enableBorder?: boolean;
+    /** 描边粗细 */
+    borderWidth?: number;
+    /** 描边颜色 */
+    borderColor?: string;
+    /** 头部背景颜色 */
+    backgroundColor?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否显示返回键 */
+    showBack?: boolean;
+    /** 返回按钮点击事件 */
+    onBack?: () => void;
+    /** 关闭按钮点击事件 */
+    onClose?: () => void;
+}
+declare const PisellHeaderProgressBar: React.FC<PisellHeaderProgressBarProps>;
+export default PisellHeaderProgressBar;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import 'swiper/swiper-bundle.css';
+import './index.less';
+export interface PisellImageCarouselsProps {
+    dataSource?: string[];
+    width?: number | string;
+    height?: number;
+    showArrows?: boolean;
+    showDots?: boolean;
+    autoplay?: boolean;
+    interval?: number;
+    borderRadius?: number;
+    loop?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const PisellImageCarousels: React.FC<PisellImageCarouselsProps>;
+export default PisellImageCarousels;

package/lib/components/pisellInformationEntry/hooks/useNativeScanner.d.ts

@@ -0,0 +1,4 @@
+export declare const useNativeScanner: (onChange?: ((val: string) => void) | undefined) => {
+    activeNativeScanner: () => void;
+    isTerminal: any;
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export declare type EntryModeType = {
+    /**
+     * 录入模式名称
+     * scanCode: 扫码录入
+     * input: 手动录入
+     * scanner: 扫码枪录入
+     * nfc: NFC录入
+     */
+    type: 'scanCode' | 'input' | 'scanner' | 'nfc';
+    /**
+     * 录入模式文案 没有使用默认文案
+     */
+    name?: string;
+};
+export interface PisellInformationEntryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    /** 录入模式 */
+    entryModes: EntryModeType[];
+    /** 标题文案 */
+    title?: React.ReactNode;
+    /** 搜索框描述文案 */
+    searchDescribe?: React.ReactNode;
+    /** 录入信息值改变 */
+    onChange?: (val: string) => void;
+    /** 录入类型切换时候触发的 */
+    onChangeType?: (val: null | EntryModeType['type']) => void;
+}
+declare const PisellInformationEntry: (props: PisellInformationEntryProps) => JSX.Element;
+export default PisellInformationEntry;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.less';
+export interface PisellList01Props {
+    dataSource?: any[];
+    showSearch: boolean;
+    showCategory: boolean;
+    placeholder?: string;
+    renderItem?: (item: any, index: number) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (anchor: string) => void;
+    onSearch?: (value: any) => void;
+    isShowEmpty?: boolean;
+    description?: any;
+}
+declare const PisellList01: React.FC<PisellList01Props>;
+export default PisellList01;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+interface PisellQrcodeProps {
+    size?: number;
+    platform: 'pc' | 'h5' | 'ipad';
+    value: string;
+    className: string;
+}
+declare const PisellQrcode: React.FC<PisellQrcodeProps>;
+export default PisellQrcode;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+export interface PisellSectionHeadersProps {
+    /** 是否占据空间（true: 占据空间, false: 不占据空间） */
+    /** 左侧返回区域 */
+    backNode?: React.ReactNode;
+    /** 中间内容区域 */
+    centerNode?: React.ReactNode;
+    /** 右侧操作区域 */
+    actionNode?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 返回按钮点击事件 */
+    onBack?: () => void;
+    /** 操作区域点击事件 */
+    onAction?: () => void;
+}
+declare const PisellSectionHeaders: React.FC<PisellSectionHeadersProps>;
+export default PisellSectionHeaders;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+export interface PisellStatisticListProps extends React.HTMLAttributes<HTMLDivElement> {
+    isHasBorder?: boolean;
+    backgroundColors?: string[];
+    labelColor?: string;
+    valueColor?: string;
+    data: {
+        label: string;
+        value: string;
+        isLink?: boolean;
+        link?: string;
+        tip?: string;
+        children?: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+}
+declare const PisellStatisticList: (props: PisellStatisticListProps) => JSX.Element;
+export default PisellStatisticList;

package/lib/components/pisellToast/index.js

@@ -40,6 +40,9 @@ var import_index = require("./index.less");
 var PisellToast = (props) => {
   const { content, duration, showAction, actionText, onClose } = props;
   const key = (0, import_utils.getUniqueId)();
+  if (!import_pisellMessage.message) {
+    return alert(content);
+  }
   import_pisellMessage.message.open({
     key,
     content: /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-toast-content" }, /* @__PURE__ */ import_react.default.createElement("span", null, content), showAction && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-toast-action" }, actionText), /* @__PURE__ */ import_react.default.createElement(

package/lib/components/productCard/cartSkuCard/components/basicInfo/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+interface IProps {
+    isShowImage?: boolean;
+    dataSource: {
+        image?: string;
+        bundle?: any[];
+        options?: any[];
+        product_option_string?: string;
+        name?: string;
+        symbol?: string;
+        price?: string | number;
+        total?: number;
+        origin_total?: number;
+        num?: number;
+    };
+    style?: React.CSSProperties;
+    isMainProduct?: boolean;
+}
+declare const BasicInfo: (props: IProps) => JSX.Element;
+export default BasicInfo;

package/lib/components/productCard/cartSkuCard/components/basicInfo/index.js

@@ -0,0 +1,71 @@
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/productCard/cartSkuCard/components/basicInfo/index.tsx
+var basicInfo_exports = {};
+__export(basicInfo_exports, {
+  default: () => basicInfo_default
+});
+module.exports = __toCommonJS(basicInfo_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_utils = require("@pisell/utils");
+var import_specs = __toESM(require("../specs"));
+var import__ = require("../../index");
+var import_index = require("./index.less");
+var BasicInfo = (props) => {
+  const { isShowImage, dataSource = {}, style, isMainProduct } = props;
+  const {
+    image,
+    bundle,
+    options,
+    product_option_string,
+    name,
+    price,
+    symbol,
+    total = 0,
+    origin_total = 0,
+    num = 1
+  } = dataSource;
+  const renderNumTag = () => {
+    if (num > 1)
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(`num-tag`, {
+            "is-main": isMainProduct
+          })
+        },
+        num < 99 ? num : "99+"
+      );
+    return null;
+  };
+  const hasSpecs = (bundle == null ? void 0 : bundle.length) || (options == null ? void 0 : options.length) || product_option_string;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__basic-info`, style: style || {} }, renderNumTag(), isShowImage && image && /* @__PURE__ */ import_react.default.createElement("img", { src: import_utils.image.ali(image, 64), className: `product-cover` }), (!isShowImage || !image) && num > 1 ? /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 26 } }) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `product-name` }, name), hasSpecs ? /* @__PURE__ */ import_react.default.createElement(import_specs.default, { dataSource }) : /* @__PURE__ */ import_react.default.createElement("div", { className: `product-price` }, (0, import_utils.formatAmount)(price, 2, symbol))), /* @__PURE__ */ import_react.default.createElement("div", { className: `product-amount` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `total-amont` }, (0, import_utils.formatAmount)(total * num, 2, symbol)), origin_total && Number(total) !== Number(origin_total) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `origin-amount` }, (0, import_utils.formatAmount)(origin_total * num, 2, symbol)) : null));
+};
+var basicInfo_default = BasicInfo;

package/lib/components/productCard/cartSkuCard/components/basicInfo/index.less

@@ -0,0 +1,98 @@
+.pisell-cart-sku-card {
+  &__basic-info {
+    display: flex;
+    gap: 4px;
+    position: relative;
+
+    .num-tag {
+      background-color: #7f56da;
+      position: absolute;
+      left: 0;
+      top: 0;
+      border-radius: 12px;
+      min-width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+
+      color: var(--Base-White, #fff);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 16px;
+
+      &.is-main {
+        left: -4px;
+        top: -4px;
+      }
+    }
+
+    img {
+      width: 48px;
+      height: 48px;
+      flex-shrink: 0;
+      border-radius: 6px;
+    }
+
+    .product-info {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex: 1 0 0;
+      flex-wrap: wrap;
+      overflow: hidden;
+
+      .product-name {
+        color: var(--Gray-900, #101828);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .product-price {
+        color: var(--Gray-900, #101828);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+        width: 100%;
+      }
+    }
+
+    .product-amount {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-wrap: wrap;
+      flex-shrink: 0;
+      .total-amont {
+        color: var(--Base-Black, #000);
+        text-align: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+        width: 100%;
+      }
+
+      .origin-amount {
+        color: var(--Gray-500, #667085);
+        text-align: center;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 18px;
+        text-decoration-line: line-through;
+        width: 100%;
+      }
+    }
+  }
+}

package/lib/components/productCard/cartSkuCard/components/discountReason/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const DiscountReason: (props: any) => JSX.Element;
+export default DiscountReason;

package/lib/components/productCard/cartSkuCard/components/discountReason/index.js

@@ -0,0 +1,70 @@
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/productCard/cartSkuCard/components/discountReason/index.tsx
+var discountReason_exports = {};
+__export(discountReason_exports, {
+  default: () => discountReason_default
+});
+module.exports = __toCommonJS(discountReason_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import__ = require("../../index");
+var DiscountReason = (props) => {
+  const { dataSource = {}, hideDivider } = props;
+  const { total, origin_total, symbol, tip, num, discount_reason } = dataSource;
+  const isDiscount = (0, import_react.useMemo)(() => {
+    if (!origin_total) return false;
+    return Number(total) != Number(origin_total);
+  }, [total, origin_total]);
+  const renderDivider = () => {
+    return isDiscount && discount_reason && !hideDivider ? /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "4px 0" } }) : null;
+  };
+  const renderDiscountReason = () => {
+    if (isDiscount && discount_reason) {
+      if (Array.isArray(discount_reason)) {
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${import__.PREFIX}_discount-reason`,
+            style: { display: "flex", flexWrap: "wrap", gap: "4px" }
+          },
+          discount_reason.map((reason, index) => {
+            return /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { key: index, color: "red" }, reason);
+          })
+        );
+      }
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}_discount-reason` }, /* @__PURE__ */ import_react.default.createElement("span", null, `${import_utils.locales.getText(
+        "pisell2.product.card.discount.reason"
+      )}: ${discount_reason}`));
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderDivider(), renderDiscountReason());
+};
+var discountReason_default = DiscountReason;

package/lib/components/productCard/cartSkuCard/components/holders/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare const Holders: (props: any) => JSX.Element | null;
+export default Holders;

package/lib/components/productCard/cartSkuCard/components/holders/index.js

@@ -0,0 +1,52 @@
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/productCard/cartSkuCard/components/holders/index.tsx
+var holders_exports = {};
+__export(holders_exports, {
+  default: () => holders_default
+});
+module.exports = __toCommonJS(holders_exports);
+var import_react = __toESM(require("react"));
+var import_iconfont = __toESM(require("../../../../iconfont"));
+var import__ = require("../../index");
+var import_index = require("./index.less");
+var Holders = (props) => {
+  const { dataSource = {} } = props;
+  const { holders, holder_id } = dataSource;
+  if (!holder_id) return null;
+  const renderHolder = (id) => {
+    if (!id) return null;
+    const holder = holders.find((item) => item.id === id);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "holder-item", key: id }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { className: "holder-icon", type: "pisell2-user-check-01" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "holder-label" }, (holder == null ? void 0 : holder.label) || id));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__holders` }, Array.isArray(holder_id) ? holder_id == null ? void 0 : holder_id.map((id) => {
+    return renderHolder(id);
+  }) : renderHolder(holder_id));
+};
+var holders_default = Holders;

package/lib/components/productCard/cartSkuCard/components/holders/index.less

@@ -0,0 +1,32 @@
+.pisell-cart-sku-card__holders {
+  user-select: none;
+
+  display: flex;
+  gap: 16px;
+  overflow: hidden;
+
+  .holder-item {
+    overflow: hidden;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    min-width: 30px;
+
+    .holder-icon {
+      font-size: 16px;
+      color: #7f56da;
+      margin-right: 2;
+    }
+
+    .holder-label {
+      color: #667085;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

package/lib/components/productCard/cartSkuCard/components/packages/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './index.less';
+interface IProps {
+    isShowImage?: boolean;
+    dataSource: {
+        bundle?: any[];
+        symbol?: string;
+    };
+}
+declare const Packages: ({ isShowImage, dataSource }: IProps) => JSX.Element | null;
+export default Packages;