@pisell/materials 6.8.2 → 6.8.4

package/es/components/walletCard/index.less

@@ -9,6 +9,36 @@
     width: 100%;
     display: flex;
     cursor: pointer;
+    position: relative;
+  }
+
+  .pisell-wallet-add-holder-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    z-index: 9;
+
+    &-text {
+      color: #fff;
+      text-align: center;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+      white-space: pre-line;
+    }
+
+    &-button {
+      font-weight: bold;
+    }
   }
 
   // 卡片内容区域
@@ -35,6 +65,12 @@
           color: #fff;
         }
       }
+
+      .pisell-wallet-card-header-holder-name {
+        color: var(--Gray-900, #101828);
+        border: 1px solid var(--Gray-100, #f2f4f7);
+        background: var(--Gray-100, #f2f4f7);
+      }
     }
 
     // 亮色主题
@@ -54,6 +90,12 @@
           color: #101828;
         }
       }
+
+      .pisell-wallet-card-header-holder-name {
+        color: #fff;
+        border: 1px solid var(--Gray-600, #475467);
+        background: var(--Gray-600, #475467);
+      }
     }
   }
 
@@ -66,6 +108,25 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    min-height: 100px;
+
+    .pisell-wallet-card-header-holder-name {
+      cursor: pointer;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 2px 8px;
+      border-radius: 16px;
+      height: 22px;
+      min-width: 50px;
+      text-align: center;
+      font-size: 12px;
+      line-height: 16px;
+      max-width: 100%;
+      font-style: normal;
+      font-weight: 500;
+    }
 
     // 头部左侧
     .pisell-wallet-card-header-left {
@@ -78,7 +139,7 @@
         display: flex;
         align-items: center;
         gap: 10px;
-        margin-bottom: 8px;
+        margin-bottom: 4px;
 
         // 卡片名称文本
         .pisell-wallet-card-header-level-text {
@@ -157,7 +218,7 @@
 
   // 卡片内容列表
   .pisell-wallet-card-list {
-    margin-top: 30px;
+    margin-top: unset;
     height: 50px;
     box-sizing: border-box;
     display: flex;

package/es/index.d.ts

@@ -96,7 +96,7 @@ export { default as PisellStatisticList } from './components/pisellStatisticList
 export { default as PisellSteps } from './components/PisellSteps';
 export type { PisellStepsProps, PisellStepItem, } from './components/PisellSteps/types';
 export { default as PisellProcedure } from './components/PisellProcedure';
-export type { PisellProcedureProps, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, } from './components/PisellProcedure/types';
+export type { PisellProcedureProps, PisellProcedureRef, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, } from './components/PisellProcedure/types';
 export { default as PisellTags } from './components/pisellTags';
 export { default as PisellText } from './components/pisellText';
 export { default as PisellToast, useToast } from './components/pisellToast';

package/es/locales/en-US.d.ts

@@ -287,6 +287,8 @@ declare const _default: {
     'pisell-wallet-pass-card-status-lastPayment': string;
     'pisell-wallet-pass-card-reset': string;
     'pisell-wallet-pass-card-done': string;
+    'pisell2.wallet-card.add-holder-tip': string;
+    'pisell2.wallet-card.add-holder-button-text': string;
     'pisell-camera-no-camera-accessible': string;
     'pisell-camera-permission-denied': string;
     'pisell-camera-switch-camera': string;
@@ -315,5 +317,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/en-US.js

@@ -353,6 +353,8 @@ export default {
   'pisell-wallet-pass-card-status-lastPayment': 'Last Payment',
   'pisell-wallet-pass-card-reset': 'Reset',
   'pisell-wallet-pass-card-done': 'Done',
+  'pisell2.wallet-card.add-holder-tip': 'To ensure your benefits, please\r\nassign a holder to activate this card.',
+  'pisell2.wallet-card.add-holder-button-text': 'Set Holder',
   // 相机组件
   'pisell-camera-no-camera-accessible': 'No camera accessible',
   'pisell-camera-permission-denied': 'Permission denied',
@@ -388,5 +390,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': 'Confirm exit?',
   'pisell-procedure-header-close-confirm-desc': 'All entered information will be lost. Are you sure you want to exit?',
   'pisell-procedure-header-close-confirm-no': 'Continue',
-  'pisell-procedure-header-close-confirm-yes': 'Exit'
+  'pisell-procedure-header-close-confirm-yes': 'Exit',
+  'pisell-procedure-footer-more': 'More'
 };

package/es/locales/zh-CN.d.ts

@@ -282,6 +282,8 @@ declare const _default: {
     'pisell-wallet-pass-card-status-lastPayment': string;
     'pisell-wallet-pass-card-reset': string;
     'pisell-wallet-pass-card-done': string;
+    'pisell2.wallet-card.add-holder-tip': string;
+    'pisell2.wallet-card.add-holder-button-text': string;
     'pisell-camera-no-camera-accessible': string;
     'pisell-camera-permission-denied': string;
     'pisell-camera-switch-camera': string;
@@ -310,5 +312,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/zh-CN.js

@@ -344,6 +344,8 @@ export default {
   'pisell-wallet-pass-card-status-lastPayment': '上次结算',
   'pisell-wallet-pass-card-reset': '清空',
   'pisell-wallet-pass-card-done': '保存',
+  'pisell2.wallet-card.add-holder-tip': '为确保您的权益，此卡\r\n需指定使用人后方可激活使用。',
+  'pisell2.wallet-card.add-holder-button-text': '添加持有人',
   // 相机组件
   'pisell-camera-no-camera-accessible': '没有找到摄像头',
   'pisell-camera-permission-denied': '没有权限使用摄像头',
@@ -379,5 +381,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': '确认退出？',
   'pisell-procedure-header-close-confirm-desc': '退出后将丢失所有已填写的信息，确定要退出吗？',
   'pisell-procedure-header-close-confirm-no': '继续',
-  'pisell-procedure-header-close-confirm-yes': '退出'
+  'pisell-procedure-header-close-confirm-yes': '退出',
+  'pisell-procedure-footer-more': '更多'
 };

package/es/locales/zh-TW.d.ts

@@ -282,6 +282,8 @@ declare const _default: {
     'pisell-wallet-pass-card-status-lastPayment': string;
     'pisell-wallet-pass-card-reset': string;
     'pisell-wallet-pass-card-done': string;
+    'pisell2.wallet-card.add-holder-tip': string;
+    'pisell2.wallet-card.add-holder-button-text': string;
     'pisell-camera-no-camera-accessible': string;
     'pisell-camera-permission-denied': string;
     'pisell-camera-switch-camera': string;
@@ -310,5 +312,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/zh-TW.js

@@ -345,6 +345,8 @@ export default {
   'pisell-wallet-pass-card-status-lastPayment': '上次結算',
   'pisell-wallet-pass-card-reset': '清空',
   'pisell-wallet-pass-card-done': '保存',
+  'pisell2.wallet-card.add-holder-tip': '為確保您的權益，此卡\r\n需指定使用人後方可激活使用。',
+  'pisell2.wallet-card.add-holder-button-text': '添加使用人',
   // 相机组件
   'pisell-camera-no-camera-accessible': '沒有找到攝像頭',
   'pisell-camera-permission-denied': '沒有權限使用攝像頭',
@@ -380,5 +382,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': '確認退出？',
   'pisell-procedure-header-close-confirm-desc': '退出後將丟失所有已填寫的信息，確定要退出嗎？',
   'pisell-procedure-header-close-confirm-no': '繼續',
-  'pisell-procedure-header-close-confirm-yes': '退出'
+  'pisell-procedure-header-close-confirm-yes': '退出',
+  'pisell-procedure-footer-more': '更多'
 };

package/es/utils/hoc.d.ts

@@ -1,17 +1,17 @@
-import React, { ComponentType } from 'react';
+import { ComponentType } from 'react';
 /**
  * 简单包装，不做任何处理
  * 部分组件ref比较特殊，包一层会解决这个问题
  */
-export declare function withWrap<T extends ComponentType<any>>(Comp: T): (props: any) => React.JSX.Element;
+export declare function withWrap<T extends ComponentType<any>>(Comp: T): (props: any) => JSX.Element;
 /**
  * 某些组件会用React.Children.only检查子节点
  * 需要做处理避免报错
  */
-export declare function withSingleChild(Comp: ComponentType<any>, needsConvert?: string[]): (props: any) => React.JSX.Element;
-export declare function withSingleFunctionChild(Comp: ComponentType<any>): (props: any) => React.JSX.Element;
+export declare function withSingleChild(Comp: ComponentType<any>, needsConvert?: string[]): (props: any) => JSX.Element;
+export declare function withSingleFunctionChild(Comp: ComponentType<any>): (props: any) => JSX.Element;
 /**
  * moment对象在序列化后会被转为字符串
  * 需要让日期类组件支持接受字符串值
  */
-export declare function withMomentProps(Comp: ComponentType<any>, needsConvert?: string[]): (props: any) => React.JSX.Element;
+export declare function withMomentProps(Comp: ComponentType<any>, needsConvert?: string[]): (props: any) => JSX.Element;

package/es/utils/index.d.ts

@@ -1,4 +1,4 @@
 export declare const isBrowser: boolean;
-export declare const getCssNumber: (val: string | number) => string;
+export declare const getCssNumber: (val: string | number) => string | number;
 export declare function uuid(): string;
 export * from './mergeWith';

package/es/utils/miniRedux.d.ts

@@ -12,6 +12,6 @@ declare const _default: <State extends Record<string, any>, Namespace extends st
             payload: any;
         }) => void;
     }>;
-    Provider: (ComponentUi: any) => (props: any, ref: any) => React.JSX.Element;
+    Provider: (ComponentUi: any) => (props: any, ref: any) => JSX.Element;
 };
 export default _default;

package/es/utils/platform.d.ts

@@ -1 +1 @@
-export declare const isMobile: () => boolean;
+export declare const isMobile: () => any;

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

@@ -18,7 +18,7 @@ export interface Props<T> {
         attributes: DraggableAttributes;
     }) => React.ReactElement<HTMLElement>;
 }
-export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): React.JSX.Element;
+export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): JSX.Element;
 export interface SortableItemProps<T> {
     id: number;
     index: number;

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

@@ -22,5 +22,5 @@ interface DefaultRenderContainerProps {
     }) => React.ReactElement;
     children: any;
 }
-declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => React.JSX.Element;
+declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => JSX.Element;
 export default MultipleContainersSortList;

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

@@ -9,6 +9,6 @@ export declare const paginationConfig: {
     responsive: boolean;
     size: string;
 };
-declare const Pagination: (props: PaginationProps) => React.JSX.Element | null;
+declare const Pagination: (props: PaginationProps) => JSX.Element | null;
 export default Pagination;
-export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => React.JSX.Element;
+export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => JSX.Element;

package/lib/components/PisellBasicGrid/PisellBasicGrid.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import type { PisellBasicGridProps } from './types';
 import './PisellBasicGrid.less';
 /**
  * 使用 memo 优化组件性能
  * @description 当 props 没有变化时，避免不必要的重新渲染
  */
-declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => React.JSX.Element;
+declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => JSX.Element;
 export { MemoizedPisellBasicGrid as PisellBasicGrid };
 export default MemoizedPisellBasicGrid;

package/lib/components/PisellCards/components/GraphicTextCard/GraphicTextCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { GraphicTextCardProps } from './types';
 import './GraphicTextCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: GraphicTextCardProps) => React.JSX.Element;
+declare const Provider: (props: GraphicTextCardProps) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/components/MultilevelCard/MultilevelCard.d.ts

@@ -15,5 +15,5 @@ import './MultilevelCard.less';
  * ```
  */
 export declare const MultilevelCard: React.FC<MultilevelCardProps<any>>;
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/components/PisellImageCard/PisellImageCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { PisellImageCardProps } from './types';
 import './PisellImageCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: PisellImageCardProps) => React.JSX.Element;
+declare const Provider: (props: PisellImageCardProps) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/components/TabCard/TabCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import './TabCard.less';
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/components/TextCard/TextCard.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import './TextCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 declare const PisellCards: {
-    TabCard: (props: any) => import("react").JSX.Element;
-    TextCard: (props: any) => import("react").JSX.Element;
-    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => import("react").JSX.Element;
-    MultilevelCard: (props: any) => import("react").JSX.Element;
-    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => import("react").JSX.Element;
+    TabCard: (props: any) => JSX.Element;
+    TextCard: (props: any) => JSX.Element;
+    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
+    MultilevelCard: (props: any) => JSX.Element;
+    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
 };
 export default PisellCards;
 export type { PisellBasicCardProps } from './types';

package/lib/components/PisellProcedure/PisellProcedure.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PisellProcedureProps } from './types';
+import type { PisellProcedureProps, PisellProcedureRef } from './types';
 import './PisellProcedure.less';
 /**
  * PisellProcedure 流程容器组件
@@ -7,6 +7,16 @@ import './PisellProcedure.less';
  * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
  * @author Pisell Team
  * @version 1.0.0
+ *
+ * @example
+ * // 使用 ref 调用组件方法
+ * const procedureRef = useRef<PisellProcedureRef>(null);
+ *
+ * // 跳转到下一步
+ * procedureRef.current?.goNext();
+ *
+ * // 获取当前步骤
+ * const currentStep = procedureRef.current?.getCurrentStep();
  */
-declare const PisellProcedure: React.FC<PisellProcedureProps>;
+declare const PisellProcedure: React.ForwardRefExoticComponent<PisellProcedureProps & React.RefAttributes<PisellProcedureRef>>;
 export default PisellProcedure;

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -39,110 +39,151 @@ var import_hooks = require("./hooks");
 var import_utils = require("./utils");
 var import_useMobile = require("../../hooks/useMobile");
 var import_PisellProcedure = require("./PisellProcedure.less");
-var PisellProcedure = (props) => {
-  const {
-    // 通用属性
-    className,
-    style,
-    mode = "page",
-    showHeader = true,
-    showSidebar = true,
-    showFooter = true,
-    // 步骤控制
-    defaultCurrent = 0,
-    onStepsChange,
-    // 区域配置
-    headerProps,
-    bodyProps,
-    footerProps,
-    // 事件回调
-    onClose,
-    onPrev,
-    onNext,
-    onFirstStepBack,
-    onBackConfirm,
-    onCloseConfirm,
-    // 低代码属性
-    __designMode,
-    __id,
-    ...other
-  } = props;
-  const isMobileDetected = (0, import_useMobile.useMobile)(744);
-  const isMobile = mode === "modal" ? false : isMobileDetected;
-  const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
-    stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
-    defaultCurrent,
-    onPrev,
-    onNext,
-    onStepsChange
-  });
-  const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
-  const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
-  const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
-  const footerPosition = (0, import_react.useMemo)(() => {
-    if (isMobile && mode !== "modal") return "float-all";
-    return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
-  }, [mode, isMobile, footerProps == null ? void 0 : footerProps.position]);
-  const containerCls = (0, import_react.useMemo)(() => {
-    return (0, import_utils.mergeClassNames)(
-      "pisell-procedure",
+var PisellProcedure = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      // 通用属性
       className,
-      (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
-    );
-  }, [className, footerPosition]);
-  const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: containerCls,
       style,
-      "data-component": "pisell-procedure",
-      "data-id": __id,
+      mode = "page",
+      showHeader = true,
+      showSidebar = true,
+      showFooter = true,
+      // 步骤控制
+      defaultCurrent = 0,
+      onStepsChange,
+      // 区域配置
+      headerProps,
+      bodyProps,
+      footerProps,
+      // 事件回调
+      onClose,
+      onPrev,
+      onNext,
+      onFirstStepBack,
+      onBackConfirm,
+      onCloseConfirm,
+      // 低代码属性
+      __designMode,
+      __id,
       ...other
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureHeader,
-      {
-        headerProps,
-        currentStep,
-        goPrev,
-        onClose,
-        onFirstStepBack,
-        onBackConfirm,
-        onCloseConfirm,
-        goToStep
-      }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureBody,
-      {
-        bodyProps,
-        footerProps,
-        footerPosition,
-        showFooter: showFooter && !footerIsGlobal,
-        showSidebar,
-        summaryModalOpen,
-        onOpenSummaryModal: openSummaryModal,
-        onCloseSummaryModal: closeSummaryModal,
+    } = props;
+    const isMobileDetected = (0, import_useMobile.useMobile)(744);
+    const isMobile = mode === "modal" ? false : isMobileDetected;
+    const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
+      stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
+      defaultCurrent,
+      onPrev,
+      onNext,
+      onStepsChange
+    });
+    const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
+    const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
+    const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        /**
+         * 跳转到上一步
+         */
+        goPrev: () => goPrev(),
+        /**
+         * 跳转到下一步
+         */
+        goNext: () => goNext(),
+        /**
+         * 跳转到指定步骤
+         */
+        goToStep: (step) => goToStep(step),
+        /**
+         * 获取当前步骤索引
+         */
+        getCurrentStep: () => currentStep,
+        /**
+         * 打开移动端总结弹窗
+         */
+        openSummaryModal,
+        /**
+         * 关闭移动端总结弹窗
+         */
+        closeSummaryModal
+      }),
+      [
         goPrev,
         goNext,
-        mode
-      }
-    ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureFooter,
+        goToStep,
+        currentStep,
+        openSummaryModal,
+        closeSummaryModal
+      ]
+    );
+    const footerPosition = (0, import_react.useMemo)(() => {
+      if (isMobile && mode !== "modal") return "float-all";
+      return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
+    }, [mode, isMobile, footerProps == null ? void 0 : footerProps.position]);
+    const containerCls = (0, import_react.useMemo)(() => {
+      return (0, import_utils.mergeClassNames)(
+        "pisell-procedure",
+        className,
+        // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+        mode === "modal" && "pisell-procedure--modal",
+        (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
+      );
+    }, [className, mode, footerPosition]);
+    const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        footerProps,
-        position: footerPosition,
-        isGlobal: true,
-        sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
-        summaryModalOpen,
-        onOpenSummaryModal: openSummaryModal,
-        onCloseSummaryModal: closeSummaryModal,
-        goPrev,
-        goNext,
-        mode
-      }
-    ))
-  );
-};
+        className: containerCls,
+        style,
+        "data-component": "pisell-procedure",
+        "data-id": __id,
+        ...other
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureHeader,
+        {
+          headerProps,
+          currentStep,
+          goPrev,
+          onClose,
+          onFirstStepBack,
+          onBackConfirm,
+          onCloseConfirm,
+          goToStep
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureBody,
+        {
+          bodyProps,
+          footerProps,
+          footerPosition,
+          showFooter: showFooter && !footerIsGlobal,
+          showSidebar,
+          summaryModalOpen,
+          onOpenSummaryModal: openSummaryModal,
+          onCloseSummaryModal: closeSummaryModal,
+          goPrev,
+          goNext,
+          mode
+        }
+      ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureFooter,
+        {
+          footerProps,
+          position: footerPosition,
+          isGlobal: true,
+          sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
+          summaryModalOpen,
+          onOpenSummaryModal: openSummaryModal,
+          onCloseSummaryModal: closeSummaryModal,
+          goPrev,
+          goNext,
+          mode
+        }
+      ))
+    );
+  }
+);
 PisellProcedure.displayName = "PisellProcedure";
 var PisellProcedure_default = PisellProcedure;