@pisell/private-materials 3.4.61 → 3.4.62

package/lib/components/walletList/locales.d.ts

@@ -3,16 +3,25 @@ declare const _default: {
         'page.wallet.guide.title': string;
         'page.wallet.guide.subtitle': string;
         'page.wallet.guide.button': string;
+        'page.wallet.tempHolderSelector.title': string;
+        'page.wallet.tempHolderSelector.create': string;
+        'page.wallet.tempHolderSelector.confirm': string;
     };
     'zh-CN': {
         'page.wallet.guide.title': string;
         'page.wallet.guide.subtitle': string;
         'page.wallet.guide.button': string;
+        'page.wallet.tempHolderSelector.title': string;
+        'page.wallet.tempHolderSelector.create': string;
+        'page.wallet.tempHolderSelector.confirm': string;
     };
     'zh-HK': {
         'page.wallet.guide.title': string;
         'page.wallet.guide.subtitle': string;
         'page.wallet.guide.button': string;
+        'page.wallet.tempHolderSelector.title': string;
+        'page.wallet.tempHolderSelector.create': string;
+        'page.wallet.tempHolderSelector.confirm': string;
     };
 };
 export default _default;

package/lib/components/walletList/locales.js

@@ -26,16 +26,25 @@ var locales_default = {
   "en": {
     "page.wallet.guide.title": "Activate Now!",
     "page.wallet.guide.subtitle": "Unlock membership benefits now",
-    "page.wallet.guide.button": "Get Your Reward"
+    "page.wallet.guide.button": "Get Your Reward",
+    "page.wallet.tempHolderSelector.title": "Set Holder",
+    "page.wallet.tempHolderSelector.create": "Create New",
+    "page.wallet.tempHolderSelector.confirm": "Confirm"
   },
   "zh-CN": {
     "page.wallet.guide.title": "待解锁权益",
     "page.wallet.guide.subtitle": "成为专属会员，即可享受更多权益",
-    "page.wallet.guide.button": "点击获取"
+    "page.wallet.guide.button": "点击获取",
+    "page.wallet.tempHolderSelector.title": "添加持有人",
+    "page.wallet.tempHolderSelector.create": "创建新持有人",
+    "page.wallet.tempHolderSelector.confirm": "确定"
   },
   "zh-HK": {
     "page.wallet.guide.title": "待解鎖權益",
     "page.wallet.guide.subtitle": "成為專屬會員，即可享受更多權益",
-    "page.wallet.guide.button": "點擊獲取"
+    "page.wallet.guide.button": "點擊獲取",
+    "page.wallet.tempHolderSelector.title": "添加持有人",
+    "page.wallet.tempHolderSelector.create": "創建新持有人",
+    "page.wallet.tempHolderSelector.confirm": "確定"
   }
 };

package/lib/components/walletList/serve.d.ts

@@ -22,3 +22,22 @@ export declare const batchGetWalletBalance: (walletIds: string[]) => Promise<Rec
  * @Date: 2025-06-09 11:12
  */
 export declare const getWalletShopList: (params: any) => Promise<any>;
+/**
+ * @title: 获取持有人列表
+ * @description: 获取持有人列表
+ * @param params 查询参数
+ * @returns 持有人列表
+ */
+export declare const getHolderList: (params: any) => Promise<any>;
+/**
+ * 更新持有人
+ * @param params 更新参数
+ * @returns 更新结果
+ */
+export declare const updateWalletHolder: (id: string, params: any) => Promise<any>;
+/**
+ * 获取表单配置
+ * @param formId 表单ID
+ * @returns 表单配置
+ */
+export declare const getFormConfig: (formId: string) => Promise<any>;

package/lib/components/walletList/serve.js

@@ -20,15 +20,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var serve_exports = {};
 __export(serve_exports, {
   batchGetWalletBalance: () => batchGetWalletBalance,
+  getFormConfig: () => getFormConfig,
+  getHolderList: () => getHolderList,
   getWalletBalance: () => getWalletBalance,
   getWalletList: () => getWalletList,
-  getWalletShopList: () => getWalletShopList
+  getWalletShopList: () => getWalletShopList,
+  updateWalletHolder: () => updateWalletHolder
 });
 module.exports = __toCommonJS(serve_exports);
 var import_utils = require("./../../utils");
 var getWalletList = async () => {
   try {
-    const { data } = await import_utils.request.getRequest().get("/h5/wallet", {});
+    const { data } = await import_utils.request.getRequest().get("/h5/wallet", {
+      with: ["holder.detail"]
+    });
     return data || [];
   } catch (error) {
     return [];
@@ -63,10 +68,28 @@ var getWalletShopList = async (params) => {
     return null;
   }
 };
+var getHolderList = async (params) => {
+  try {
+    const { data } = await import_utils.request.getRequest().get("/h5/form/data/v1", params || {});
+    return data || null;
+  } catch (error) {
+  }
+};
+var updateWalletHolder = async (id, params) => {
+  try {
+    const { data } = await import_utils.request.getRequest().post(`/h5/wallet/detail/${id}/bind-holder`, params || {});
+    return data || null;
+  } catch (error) {
+  }
+};
+var getFormConfig = async (formId) => import_utils.request.getRequest().get(`/h5/form/${formId}`, {});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   batchGetWalletBalance,
+  getFormConfig,
+  getHolderList,
   getWalletBalance,
   getWalletList,
-  getWalletShopList
+  getWalletShopList,
+  updateWalletHolder
 });

package/lib/components/walletList/tempHolderSelector/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import './index.less';
+export declare const getAvatarText: (name: string) => string;
+interface ITempHolderSelectorProps {
+    visible: boolean;
+    value: any;
+    formId: string;
+    customerId: string;
+    onConfirm: (value: any) => void;
+    onCancel: () => void;
+    confirmLoading: boolean;
+}
+export default function TempHolderSelector(props: ITempHolderSelectorProps): JSX.Element;
+export {};

package/lib/components/walletList/tempHolderSelector/index.js

@@ -0,0 +1,166 @@
+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/walletList/tempHolderSelector/index.tsx
+var tempHolderSelector_exports = {};
+__export(tempHolderSelector_exports, {
+  default: () => TempHolderSelector,
+  getAvatarText: () => getAvatarText
+});
+module.exports = __toCommonJS(tempHolderSelector_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_ahooks = require("ahooks");
+var import_materials2 = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_serve = require("../serve");
+var import_useEngineContext = __toESM(require("../../../hooks/useEngineContext"));
+var import_index = require("./index.less");
+var ACol = import_antd.Col;
+var ARow = import_antd.Row;
+var getAvatarText = (name) => {
+  if (!name) return "";
+  const words = name.trim().split(/\s+/);
+  const initials = words.slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+  return initials;
+};
+function TempHolderSelector(props) {
+  var _a;
+  const [value, setValue] = (0, import_react.useState)(props.value);
+  const { visible, onCancel, onConfirm, confirmLoading } = props;
+  const context = (0, import_useEngineContext.default)();
+  const _getHolderList = (0, import_ahooks.useRequest)(import_serve.getHolderList, {
+    defaultParams: [
+      {
+        skip: 1,
+        num: 100,
+        form_id: props.formId,
+        customer_id: props.customerId
+      }
+    ],
+    onSuccess: (res) => {
+      if (Array.isArray(res.list) && res.list.length > 0) {
+        setValue(res.list[0].form_record_id);
+      }
+    }
+  });
+  const onAddHolder = async () => {
+    var _a2, _b, _c, _d, _e, _f;
+    let _formForFilling = props.formId;
+    const { data: formConfig } = await (0, import_serve.getFormConfig)(props.formId);
+    if (((_a2 = formConfig == null ? void 0 : formConfig.form) == null ? void 0 : _a2.form_type) === "minors" && Array.isArray(formConfig == null ? void 0 : formConfig.field)) {
+      const detail = (_b = formConfig == null ? void 0 : formConfig.field) == null ? void 0 : _b.find(
+        (item) => item.filed_type === "form_to_form" && item.status === "hide"
+      );
+      if (detail) {
+        _formForFilling = (_c = detail == null ? void 0 : detail.setting) == null ? void 0 : _c.linkedTable;
+      }
+    }
+    (_f = (_e = (_d = context == null ? void 0 : context.appHelper) == null ? void 0 : _d.utils) == null ? void 0 : _e.action) == null ? void 0 : _f.call(_e, {
+      type: "pisell1.form",
+      data: {
+        form_id: _formForFilling,
+        form_title: import_utils.locales.getText("page.wallet.tempHolderSelector.create"),
+        isV2API: true
+      },
+      callback: (res) => {
+        if ((res == null ? void 0 : res.status) === "success") {
+          if (_formForFilling !== props.formId) {
+            _getHolderList.refresh();
+          } else {
+            _getHolderList.mutate((prev) => ({
+              ...prev,
+              list: [res.values, ...prev.list]
+            }));
+            setValue(res.values.form_record_id);
+          }
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_materials2.PisellModal,
+    {
+      title: import_utils.locales.getText("page.wallet.tempHolderSelector.title"),
+      platform: (0, import_utils.isMobile)() ? "h5" : "pc",
+      visible,
+      onClose: onCancel,
+      onOk: () => {
+      },
+      onCancel,
+      footer: /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          type: "primary",
+          block: true,
+          onClick: () => {
+            onConfirm(value);
+          },
+          disabled: !value,
+          loading: confirmLoading
+        },
+        import_utils.locales.getText("page.wallet.tempHolderSelector.confirm")
+      ),
+      width: 640,
+      bodyStyle: { padding: 0 },
+      headerDivider: false,
+      destroyOnClose: true,
+      className: "temp-holder-selector-modal"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_materials.Spin, { spinning: _getHolderList.loading }, /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-content" }, /* @__PURE__ */ import_react.default.createElement(ARow, { gutter: [16, 16] }, /* @__PURE__ */ import_react.default.createElement(ACol, { span: 8, xs: { span: 12 }, sm: { span: 8 } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "temp-holder-selector-block temp-holder-selector-block-create",
+        onClick: onAddHolder
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-avatar" }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { useTextAvatar: true, size: "xxl" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-plus", style: { fontSize: "24px" } }))),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-name" }, import_utils.locales.getText("page.wallet.tempHolderSelector.create"))
+    ))), Array.isArray((_a = _getHolderList.data) == null ? void 0 : _a.list) && _getHolderList.data.list.map((item) => /* @__PURE__ */ import_react.default.createElement(ACol, { span: 8, xs: { span: 12 }, sm: { span: 8 }, key: item.id }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `temp-holder-selector-block-wrapper ${value === item.form_record_id ? "temp-holder-selector-block-wrapper-active" : ""}`
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "temp-holder-selector-block",
+          onClick: () => {
+            setValue(item.form_record_id);
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-avatar" }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { useTextAvatar: true, size: "xxl" }, getAvatarText(item.main_field))),
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "temp-holder-selector-block-name" }, item.main_field)
+      )
+    ))))))
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getAvatarText
+});

package/lib/components/walletList/tempHolderSelector/index.less

@@ -0,0 +1,63 @@
+.temp-holder-selector-content {
+  padding: 16px;
+}
+
+.temp-holder-selector-block-wrapper {
+  border: 2px solid transparent;
+  border-radius: 8px;
+  height: 100%;
+  transition: all 0.2s ease;
+
+  &-active {
+    border-color: var(--theme-color, #7f56d9);
+    
+    .temp-holder-selector-block {
+      border-color: transparent;
+    }
+  }
+}
+
+.temp-holder-selector-block {
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #eaecf0;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: center;
+  height: 100%;
+  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--Gray-50, #f9fafb);
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+  }
+
+  &-avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  &-plus {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    border: 2px dashed #d9d9d9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: #999;
+    background: #fafafa;
+  }
+
+  &-name {
+    font-size: 14px;
+    color: #333;
+    word-break: break-all;
+    line-height: 1.5;
+    font-weight: bold;
+  }
+}

package/lib/index.d.ts

@@ -22,7 +22,6 @@ export { default as TaxSelect } from './components/taxSelect';
 export { default as EftposPay } from './components/eftposPay';
 export { default as ToCPay } from './components/pay/toC';
 export { default as Eftpos } from './components/eftpos';
-export { default as Wallet } from './components/wallet';
 export { default as WalletList } from './components/walletList';
 export { default as BookingDashboard } from './components/booking/dashboard';
 export { default as PisellSelectCustomerModal } from './components/pisellSelectCustomerModal';
@@ -57,6 +56,8 @@ export { default as ContactInfoModal } from './plus/contactInfoModal';
 export { Login2, Register2, AuthModal } from './pro/Login2.0';
 export { default as WalletEditor } from './plus/walletEditor';
 export { default as WalletPassGallery } from './plus/walletPassGallery';
+export { default as SelectHolder } from './plus/selectHolder';
+export { default as HolderList } from './plus/selectHolder/components/HolderList';
 export { default as WalletPassDetail } from './plus/walletPassGallery/components/passDetail';
 export { default as SettingsRegistry } from './components/systemSettings/registry';
 export { default as KioskSkuDetail } from './components/kioskSkuDetail';

package/lib/index.js

@@ -64,6 +64,7 @@ __export(src_exports, {
   EventScheduleCalendar: () => import_scheduleCalendar.default,
   EventSelectHolder: () => import_selectHolder.default,
   EventTimeResourceSelector: () => import_timeResourceSelector.default,
+  HolderList: () => import_HolderList.default,
   KioskSkuDetail: () => import_kioskSkuDetail.default,
   Login: () => import_login.default,
   Login2: () => import_Login2.Login2,
@@ -85,6 +86,7 @@ __export(src_exports, {
   SaasLogin: () => import_saasLogin.default,
   SaasRegister: () => import_saasRegister.default,
   Schedules: () => import_schedules.default,
+  SelectHolder: () => import_selectHolder2.default,
   Selector: () => import_Selector.default,
   SettingsRegistry: () => import_registry.default,
   ShoppingCart: () => import_shoppingCart.default,
@@ -95,7 +97,6 @@ __export(src_exports, {
   ToCPay: () => import_toC.default,
   VerticalAddService: () => import_addServiceVariant.default,
   VerticalClient: () => import_clientVariant.VerticalClient,
-  Wallet: () => import_wallet.default,
   WalletEditor: () => import_walletEditor.default,
   WalletList: () => import_walletList.default,
   WalletPassDetail: () => import_passDetail.default,
@@ -130,7 +131,6 @@ var import_taxSelect = __toESM(require("./components/taxSelect"));
 var import_eftposPay = __toESM(require("./components/eftposPay"));
 var import_toC = __toESM(require("./components/pay/toC"));
 var import_eftpos = __toESM(require("./components/eftpos"));
-var import_wallet = __toESM(require("./components/wallet"));
 var import_walletList = __toESM(require("./components/walletList"));
 var import_dashboard = __toESM(require("./components/booking/dashboard"));
 var import_pisellSelectCustomerModal = __toESM(require("./components/pisellSelectCustomerModal"));
@@ -164,6 +164,8 @@ var import_contactInfoModal = __toESM(require("./plus/contactInfoModal"));
 var import_Login2 = require("./pro/Login2.0");
 var import_walletEditor = __toESM(require("./plus/walletEditor"));
 var import_walletPassGallery = __toESM(require("./plus/walletPassGallery"));
+var import_selectHolder2 = __toESM(require("./plus/selectHolder"));
+var import_HolderList = __toESM(require("./plus/selectHolder/components/HolderList"));
 var import_passDetail = __toESM(require("./plus/walletPassGallery/components/passDetail"));
 var import_registry = __toESM(require("./components/systemSettings/registry"));
 var import_kioskSkuDetail = __toESM(require("./components/kioskSkuDetail"));
@@ -209,6 +211,7 @@ import_dayjs.default.extend(import_localeData.default);
   EventScheduleCalendar,
   EventSelectHolder,
   EventTimeResourceSelector,
+  HolderList,
   KioskSkuDetail,
   Login,
   Login2,
@@ -230,6 +233,7 @@ import_dayjs.default.extend(import_localeData.default);
   SaasLogin,
   SaasRegister,
   Schedules,
+  SelectHolder,
   Selector,
   SettingsRegistry,
   ShoppingCart,
@@ -240,7 +244,6 @@ import_dayjs.default.extend(import_localeData.default);
   ToCPay,
   VerticalAddService,
   VerticalClient,
-  Wallet,
   WalletEditor,
   WalletList,
   WalletPassDetail,

package/lib/plus/productSelect/index.js

@@ -121,11 +121,14 @@ var index = ({
     });
   }, [_groupedList]);
   const isHideCategory = (0, import_react.useMemo)(() => {
+    if ((productListSetting == null ? void 0 : productListSetting.layout) === 0) {
+      return true;
+    }
     if (hideCategoryWhenOne) {
       return (_categories == null ? void 0 : _categories.length) === 1 || !(_categories == null ? void 0 : _categories.length);
     }
     return false;
-  }, [_categories, hideCategoryWhenOne]);
+  }, [_categories, hideCategoryWhenOne, productListSetting == null ? void 0 : productListSetting.layout]);
   (0, import_react.useEffect)(() => {
     if (!(_categories == null ? void 0 : _categories.length)) {
       setActiveKey("");

package/lib/plus/selectHolder/components/ErrorTip/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const ErrorTip: ({ text }: any) => JSX.Element;
+export default ErrorTip;

package/lib/{components/wallet/PointCard/model.js → plus/selectHolder/components/ErrorTip/index.js}

@@ -16,28 +16,15 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/wallet/PointCard/model.tsx
-var model_exports = {};
-__export(model_exports, {
-  Context: () => Context,
-  Provider: () => Provider
+// src/plus/selectHolder/components/ErrorTip/index.tsx
+var ErrorTip_exports = {};
+__export(ErrorTip_exports, {
+  default: () => ErrorTip_default
 });
-module.exports = __toCommonJS(model_exports);
-var import_utils = require("@pisell/utils");
-var defaultState = {
-  total: 0
+module.exports = __toCommonJS(ErrorTip_exports);
+var import_materials = require("@pisell/materials");
+var import_index = require("./index.less");
+var ErrorTip = ({ text }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "event-booking-error-tip" }, /* @__PURE__ */ React.createElement("div", { className: "error-icon-wrapper" }, /* @__PURE__ */ React.createElement(import_materials.Iconfont, { type: "pisell2-alert-circle", className: "icon-warning" })), /* @__PURE__ */ React.createElement("span", null, text));
 };
-var { Provider, Context } = (0, import_utils.miniRedux)({
-  namespace: "state",
-  state: defaultState,
-  reducers: {
-    setState(state, payload) {
-      return { ...state, ...payload };
-    }
-  }
-});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Context,
-  Provider
-});
+var ErrorTip_default = ErrorTip;

package/lib/plus/selectHolder/components/ErrorTip/index.less

@@ -0,0 +1,51 @@
+.event-booking-error-tip {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  padding: 6px 16px 6px 6px;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 12px;
+  border: 1px solid var(--Error-300, #fda29b);
+  background: var(--Error-25, #fffbfa);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  color: var(--Error-700, #b42318);
+  font-size: 14px;
+  font-weight: 600;
+
+  .error-icon-wrapper {
+    position: relative;
+    width: 38px;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      border: 2px solid var(--Error-600, #d92d20);
+      opacity: 0.1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid var(--Error-600, #d92d20);
+      opacity: 0.3;
+    }
+
+    .icon-warning {
+      position: relative;
+      z-index: 1;
+      font-size: 20px;
+      color: #ff4d4f;
+    }
+  }
+}

package/lib/plus/selectHolder/components/HolderItem/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HolderItemProps } from '../../types';
+import './index.less';
+export declare const PREFIX = "pisell-lowcode-holder-item";
+declare const HolderItem: React.FC<HolderItemProps>;
+export default HolderItem;