@pisell/materials 2.2.35 → 2.2.36

package/es/components/cardPro/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/es/components/cardPro/index.js

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import { withWrap } from "../../utils/hoc";
+import { Card, Flex } from 'antd';
+import classNames from 'classnames';
+import "./index.less";
+var CardPro = function CardPro(props) {
+  var headTitle = props.headTitle,
+    headSubTitle = props.headSubTitle,
+    _props$isShowFooter = props.isShowFooter,
+    isShowFooter = _props$isShowFooter === void 0 ? true : _props$isShowFooter,
+    contentHeight = props.contentHeight,
+    children = props.children,
+    _props$actionButtons = props.actionButtons,
+    actionButtons = _props$actionButtons === void 0 ? [] : _props$actionButtons,
+    _props$buttonPosition = props.buttonPosition,
+    buttonPosition = _props$buttonPosition === void 0 ? 'center' : _props$buttonPosition,
+    cover = props.cover,
+    extra = props.extra,
+    isShowHead = props.isShowHead,
+    className = props.className,
+    coverHeight = props.coverHeight,
+    badge = props.badge;
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+  return /*#__PURE__*/React.createElement(Card, {
+    title: null,
+    style: {
+      padding: 0
+    },
+    className: classNames('pisell-cardPro-wrap', className, cover && 'pisell-cardPro-wrap-with-cover')
+  }, !!cover && /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-cardPro-cover'),
+    style: {
+      height: coverHeight
+    }
+  }, cover, /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-cardPro-badge')
+  }, badge)), isShowHead && /*#__PURE__*/React.createElement(Flex, {
+    className: classNames('pisell-cardPro-head'),
+    justify: "space-between"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    style: {
+      flex: 1
+    },
+    vertical: true,
+    gap: "middle"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-cardPro-head-title')
+  }, headTitle), /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-cardPro-head-subTitle')
+  }, headSubTitle)), /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-cardPro-head-extra')
+  }, extra)), /*#__PURE__*/React.createElement(Flex, {
+    style: {
+      height: contentHeight
+    },
+    className: classNames('pisell-cardPro-content')
+  }, children), isShowFooter && /*#__PURE__*/React.createElement(Flex, {
+    gap: 20,
+    justify: buttonPosition,
+    style: {
+      marginTop: 20
+    }
+  }, actionButtons.map(function (item, index) {
+    return item.button;
+  })));
+};
+export default withWrap(CardPro);

package/es/components/cardPro/index.less

@@ -0,0 +1,55 @@
+.pisell-cardPro-wrap {
+  border-radius: 12px;
+
+  &.pisell-cardPro-wrap-with-cover {
+    .pisell-lowcode-card-body {
+      padding-top: 0;
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: 24px;
+    }
+
+    .pisell-cardPro-head,
+    .pisell-cardPro-content {
+      padding: 0 24px;
+    }
+  }
+
+  .pisell-cardPro-cover {
+    position: relative;
+
+    .pisell-cardPro-badge {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+
+  .pisell-cardPro-head {
+    padding: 0;
+    .pisell-cardPro-head-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #1a2029;
+    }
+
+    .pisell-cardPro-head-subtitle {
+      font-size: 12px;
+      color: #6e8098;
+    }
+
+    .pisell-cardPro-head-extra {
+      width: 150px;
+    }
+  }
+
+  .pisell-cardPro-content {
+    overflow-y: auto;
+    margin-top: 20px;
+  }
+
+  .pisell-cardPro-content {
+    overflow-y: auto;
+    margin-top: 20px;
+  }
+}

package/es/components/collapse/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './index.less';
+interface CollapseProps {
+    panelBackground?: string;
+    panelMarginBottom?: string | 0;
+    panelBorderRadius?: string | 0;
+    items: any[];
+    showHeader?: boolean;
+    headerColor?: string | '#101828';
+    headerFontSize?: string | 14;
+    expandIcon?: any;
+    [key: string]: any;
+}
+declare const Collapse: React.FC<CollapseProps>;
+export default Collapse;

package/es/components/collapse/index.js

@@ -0,0 +1,80 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["panelBackground", "panelMarginBottom", "panelBorderRadius", "items", "showHeader", "headerColor", "headerFontSize", "expandIcon"];
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo } from 'react';
+import { Collapse as OriginalCollapse } from 'antd';
+import "./index.less";
+var Collapse = function Collapse(props) {
+  var panelBackground = props.panelBackground,
+    panelMarginBottom = props.panelMarginBottom,
+    panelBorderRadius = props.panelBorderRadius,
+    items = props.items,
+    showHeader = props.showHeader,
+    headerColor = props.headerColor,
+    headerFontSize = props.headerFontSize,
+    expandIcon = props.expandIcon,
+    rest = _objectWithoutProperties(props, _excluded);
+
+  // 自定义样式
+  // const CustomCollapse = styled(OriginalCollapse)`
+  //   .pisell-lowcode-collapse-header {
+  //     display: flex !important;
+  //     align-items: center !important;
+  //   }
+
+  //   .pisell-lowcode-collapse-content {
+  //     background-color: ${panelBackground ? 'transparent' : '#ffffff'};
+  //     border-top: ${panelBackground ? '0' : '1px solid #D0D5DD'};
+  //   }
+  // `;
+
+  /**
+   * @title: 自定义面板样式
+   * @description:
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2024-11-25 20:23
+   */
+  var panelStyle = {
+    marginBottom: panelMarginBottom,
+    background: panelBackground,
+    borderRadius: panelBorderRadius
+  };
+
+  /**
+   * @title: 面板内容
+   * @description:
+   * @param {*} CollapseProps
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2024-11-25 20:28
+   */
+  var itemsMap = useMemo(function () {
+    return items === null || items === void 0 ? void 0 : items.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        label: showHeader ? /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: headerColor,
+            fontSize: headerFontSize
+          }
+        }, item === null || item === void 0 ? void 0 : item.label) : null,
+        style: panelStyle
+      });
+    });
+  }, [items, headerColor, showHeader, headerFontSize, panelStyle]);
+  return /*#__PURE__*/React.createElement(OriginalCollapse, _extends({}, rest, {
+    expandIcon: expandIcon ? function () {
+      return expandIcon;
+    } : undefined,
+    items: itemsMap
+  }));
+};
+Collapse.Panel = OriginalCollapse.Panel;
+export default Collapse;

package/es/components/productCard/components/Action/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const Action: ({ item, onAction }: any) => React.JSX.Element;
+export default Action;

package/es/components/productCard/components/Action/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Button } from 'antd';
+import "./index.less";
+var prefix = 'pisell-lowcode-';
+var Action = function Action(_ref) {
+  var item = _ref.item,
+    onAction = _ref.onAction;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "product-actions"))
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames("".concat(prefix, "product-actions-item")),
+    size: "large",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      onAction();
+    }
+  }, item._actionText));
+};
+export default Action;

package/es/components/productCard/components/Action/index.less

@@ -0,0 +1,14 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-product-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 8px;
+  }
+
+  &-product-actions-item {
+    flex: 1;
+  }
+}

package/es/components/productCard/components/AmountFooter/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const Footer: ({ item, hideDivider, type }: any) => React.JSX.Element;
+export default Footer;

package/es/components/productCard/components/AmountFooter/index.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { _formatAmount } from "../Packages/utils";
+import Divider from "../Divider";
+import "./index.less";
+import { locales } from '@pisell/utils';
+var prefix = 'pisell-lowcode-';
+var Footer = function Footer(_ref) {
+  var _item$_extend, _item$_extend2;
+  var item = _ref.item,
+    hideDivider = _ref.hideDivider,
+    type = _ref.type;
+  /**
+   * @title: 折扣
+   * @description:
+   * @param {*} useMemo
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2024-11-22 13:50
+   */
+  var isDiscount = useMemo(function () {
+    // item中没有该属性则不展示
+    if (!(item !== null && item !== void 0 && item.hasOwnProperty('origin_total'))) return false;
+    return Number(item === null || item === void 0 ? void 0 : item.total) != Number(item === null || item === void 0 ? void 0 : item.origin_total);
+  }, [item]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !hideDivider ? /*#__PURE__*/React.createElement(Divider, {
+    type: type !== 'total' ? 'inside' : ''
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "packages-product-footer"), hideDivider && "".concat(prefix, "packages-product-hide-divider-footer"))
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, _formatAmount(item === null || item === void 0 ? void 0 : item.total, item === null || item === void 0 ? void 0 : item.symbol)), /*#__PURE__*/React.createElement("span", null, "\xD7".concat(item === null || item === void 0 ? void 0 : item.num)), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "packages-product-footer-total")
+  }, _formatAmount((item === null || item === void 0 ? void 0 : item.total) * (item === null || item === void 0 ? void 0 : item.num), item === null || item === void 0 ? void 0 : item.symbol))), isDiscount ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "packages-product-footer-discount")
+  }, /*#__PURE__*/React.createElement("span", null, _formatAmount(item === null || item === void 0 ? void 0 : item.origin_total, item === null || item === void 0 ? void 0 : item.symbol)), /*#__PURE__*/React.createElement("span", null, _formatAmount((item === null || item === void 0 ? void 0 : item.origin_total) * (item === null || item === void 0 ? void 0 : item.num), item === null || item === void 0 ? void 0 : item.symbol, 2))) : null), isDiscount && (_item$_extend = item._extend) !== null && _item$_extend !== void 0 && _item$_extend.discount_reason && type === 'total' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "product-item-discount-reason")
+  }, /*#__PURE__*/React.createElement("span", null, "".concat(locales.getText('pisell2.product.card.discount.reason'), ": ").concat((_item$_extend2 = item._extend) === null || _item$_extend2 === void 0 ? void 0 : _item$_extend2.discount_reason)))) : null);
+};
+export default Footer;

package/es/components/productCard/components/AmountFooter/index.less

@@ -0,0 +1,39 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-packages-product-footer {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    > div {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  &-packages-product-footer-discount {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    text-decoration-line: line-through;
+  }
+
+  &-packages-product-footer-total {
+    color: var(--Gray-900, #101828);
+  }
+
+  &-packages-product-hide-divider-footer {
+    margin-top: 8px;
+  }
+
+  &-product-item-discount-reason {
+    color: var(--gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    white-space: break-spaces;
+  }
+}

package/es/components/productCard/components/Divider/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const Divider: ({ type }: any) => React.JSX.Element;
+export default Divider;

package/es/components/productCard/components/Divider/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import "./index.less";
+var prefix = 'pisell-lowcode-';
+var Divider = function Divider(_ref) {
+  var type = _ref.type;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "product-divider"), type === 'inside' && "".concat(prefix, "product-divider-inside"))
+  });
+};
+export default Divider;

package/es/components/productCard/components/Divider/index.less

@@ -0,0 +1,13 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-product-divider {
+    height: 1px;
+    background-color: #eaecf0;
+    margin: 8px 0;
+  }
+
+  &-product-divider-inside {
+    margin: 4px 0;
+  }
+}

package/es/components/productCard/components/Header/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const Header: (props: any) => React.JSX.Element;
+export default Header;

package/es/components/productCard/components/Header/index.js

@@ -0,0 +1,70 @@
+import { Button } from 'antd';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import Iconfont from "../../../iconfont";
+import { image, formatAmount } from '@pisell/utils';
+import Options from "../Packages/components/options";
+import "./index.less";
+var prefix = 'pisell-lowcode-';
+var Header = function Header(props) {
+  var isShowDelete = props.isShowDelete,
+    item = props.item,
+    showImage = props.showImage,
+    onDelete = props.onDelete,
+    disabledEdit = props.disabledEdit;
+
+  /**
+   * @title: 是否显示价格
+   * @description:
+   * @param {*} useMemo
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2024-11-23 16:13
+   */
+  var showPrice = useMemo(function () {
+    var _item$bundle, _item$options;
+    return (item === null || item === void 0 ? void 0 : (_item$bundle = item.bundle) === null || _item$bundle === void 0 ? void 0 : _item$bundle.length) > 0 || (item === null || item === void 0 ? void 0 : (_item$options = item.options) === null || _item$options === void 0 ? void 0 : _item$options.length) > 0;
+  }, [item === null || item === void 0 ? void 0 : item.bundle, item === null || item === void 0 ? void 0 : item.options]);
+
+  /**
+   * @title: 样式是否居中
+   * @description:
+   * @param {*} useMemo
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2024-11-23 17:37
+   */
+  var headerCenterStyle = useMemo(function () {
+    var _item$options2;
+    return (item === null || item === void 0 ? void 0 : (_item$options2 = item.options) === null || _item$options2 === void 0 ? void 0 : _item$options2.length) > 0 || (item === null || item === void 0 ? void 0 : item.product_option_string);
+  }, [item === null || item === void 0 ? void 0 : item.options, item === null || item === void 0 ? void 0 : item.product_option_string]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "product-header"), headerCenterStyle && "".concat(prefix, "product-options-header"))
+  }, isShowDelete && !disabledEdit ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "product-delete"),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onDelete();
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    icon: /*#__PURE__*/React.createElement(Iconfont, {
+      type: "pisell2-trash-01"
+    })
+  })) : null, showImage ? /*#__PURE__*/React.createElement("img", {
+    src: image.ali(item.cover, 64),
+    className: "".concat(prefix, "product-header-cover")
+  }) : null, item !== null && item !== void 0 && item.id ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "product-right-wrap")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "product-title")
+  }, /*#__PURE__*/React.createElement("span", null, item === null || item === void 0 ? void 0 : item.title), showPrice ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "product-title-price")
+  }, formatAmount(item === null || item === void 0 ? void 0 : item.price, 2, item === null || item === void 0 ? void 0 : item.symbol)) : null), item !== null && item !== void 0 && item.product_option_string ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "product-title-variant")
+  }, item === null || item === void 0 ? void 0 : item.product_option_string) : null, /*#__PURE__*/React.createElement(Options, {
+    options: item === null || item === void 0 ? void 0 : item.options,
+    amountSymbol: item === null || item === void 0 ? void 0 : item.symbol
+  })) : null);
+};
+export default Header;

package/es/components/productCard/components/Header/index.less

@@ -0,0 +1,63 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-product-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-right: 24px;
+  }
+
+  &-product-options-header {
+    align-items: initial;
+  }
+
+  &-product-delete {
+    position: absolute;
+    padding: 0;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    .pisell-lowcode-btn {
+      padding: 0;
+    }
+  }
+
+  &-product-header-cover {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+
+  &-product-right-wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+  }
+
+  &-product-title {
+    color: var(--gray-900, #101828);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-product-title-price {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+
+  &-product-title-variant {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}

package/es/components/productCard/components/Note/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const Note: (props: any) => React.JSX.Element | null;
+export default Note;

package/es/components/productCard/components/Note/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import { locales } from '@pisell/utils';
+import Divider from "../Divider";
+import "./index.less";
+var prefix = 'pisell-lowcode-';
+var Note = function Note(props) {
+  var item = props.item,
+    type = props.type,
+    openNote = props.openNote,
+    disabledEdit = props.disabledEdit;
+  return item !== null && item !== void 0 && item.note || !disabledEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+    type: type
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "product-note-wrap"))
+  }, item !== null && item !== void 0 && item.note ? /*#__PURE__*/React.createElement("div", null, locales.getText('pisell2.product.card.discount.note'), ": ", item.note) : null, !disabledEdit ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "product-note-btn"),
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      openNote();
+    }
+  }, item !== null && item !== void 0 && item.note ? locales.getText('pisell2.product.card.discount.edit.note') : locales.getText('pisell2.product.card.discount.add.note')) : null)) : null;
+};
+export default Note;

package/es/components/productCard/components/Note/index.less

@@ -0,0 +1,20 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-product-note-wrap {
+    display: flex;
+    gap: 8px;
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  &-product-note-btn {
+    color: var(--Blue-600, #1570ef);
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+}

package/es/components/productCard/components/Packages/components/collapsibleList/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+interface CollapsibleListProps<T> {
+    list: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const CollapsibleList: React.FC<CollapsibleListProps<any>>;
+export default CollapsibleList;