@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/StageNode/StageNode.stories.cjs

@@ -1,2690 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    DraggableTaskReordering: ()=>DraggableTaskReordering,
-    WithRulesTags: ()=>WithRulesTags,
-    LoanProcessingWorkflow: ()=>LoanProcessingWorkflow,
-    default: ()=>StageNode_stories,
-    AddTaskLoading: ()=>AddTaskLoading,
-    AdhocTasks: ()=>AdhocTasks,
-    InteractiveTaskManagement: ()=>InteractiveTaskManagement,
-    EditableStageTitle: ()=>EditableStageTitle,
-    WithTaskIcons: ()=>WithTaskIcons,
-    Default: ()=>Default,
-    ExecutionStatus: ()=>ExecutionStatus,
-    AddAndReplaceTasks: ()=>AddAndReplaceTasks
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
-const external_react_namespaceObject = require("react");
-const external_types_cjs_namespaceObject = require("../../types.cjs");
-const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
-const external_BaseCanvas_index_cjs_namespaceObject = require("../BaseCanvas/index.cjs");
-const external_CanvasPositionControls_cjs_namespaceObject = require("../CanvasPositionControls.cjs");
-const external_TaskIcon_index_cjs_namespaceObject = require("../TaskIcon/index.cjs");
-const external_StageConnectionEdge_cjs_namespaceObject = require("./StageConnectionEdge.cjs");
-const external_StageEdge_cjs_namespaceObject = require("./StageEdge.cjs");
-const external_StageNode_cjs_namespaceObject = require("./StageNode.cjs");
-const external_StageNode_stories_utils_cjs_namespaceObject = require("./StageNode.stories.utils.cjs");
-const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
-const DefaultCanvasDecorator = ({ initialNodes, initialEdges = [] })=>{
-    const [nodes, _setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
-    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)(initialEdges);
-    const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>{
-        setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds));
-    }, [
-        setEdges
-    ]);
-    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
-        }), []);
-    const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageEdge_cjs_namespaceObject.StageEdge
-        }), []);
-    const defaultEdgeOptions = (0, external_react_namespaceObject.useMemo)(()=>({
-            type: 'stage'
-        }), []);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        style: {
-            width: '100vw',
-            height: '100vh'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-                nodes: nodes,
-                edges: edges,
-                onNodesChange: onNodesChange,
-                onEdgesChange: onEdgesChange,
-                onConnect: onConnect,
-                nodeTypes: nodeTypes,
-                edgeTypes: edgeTypes,
-                mode: "design",
-                connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
-                defaultEdgeOptions: defaultEdgeOptions,
-                connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
-                elevateEdgesOnSelect: true,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-                    position: "bottom-right",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                        translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-                    })
-                })
-            })
-        })
-    });
-};
-const meta = {
-    title: 'Canvas/StageNode',
-    component: external_StageNode_cjs_namespaceObject.StageNode,
-    parameters: {
-        layout: 'fullscreen'
-    },
-    decorators: [
-        (Story, context)=>{
-            if (context.parameters?.useCustomRender) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Story, {});
-            const initialNodes = context.parameters?.nodes || [
-                {
-                    id: '1',
-                    type: 'stage',
-                    position: {
-                        x: 250,
-                        y: 100
-                    },
-                    data: {
-                        stageDetails: context.args.stageDetails,
-                        execution: context.args.execution,
-                        addTaskLabel: context.args.addTaskLabel,
-                        menuItems: context.args.menuItems,
-                        onTaskAdd: context.args.onTaskAdd,
-                        onTaskClick: context.args.onTaskClick
-                    }
-                }
-            ];
-            const initialEdges = context.parameters?.edges || [];
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultCanvasDecorator, {
-                initialNodes: initialNodes,
-                initialEdges: initialEdges
-            });
-        }
-    ],
-    args: {
-        stageDetails: {
-            label: 'Default Stage',
-            tasks: []
-        }
-    },
-    argTypes: {
-        addTaskLabel: {
-            control: 'text',
-            description: 'Label for the add process button',
-            defaultValue: 'Add process'
-        }
-    }
-};
-const StageNode_stories = meta;
-const ProcessIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
-                x: "3",
-                y: "3",
-                width: "7",
-                height: "7",
-                rx: "1"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
-                x: "14",
-                y: "3",
-                width: "7",
-                height: "7",
-                rx: "1"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
-                x: "3",
-                y: "14",
-                width: "7",
-                height: "7",
-                rx: "1"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
-                x: "14",
-                y: "14",
-                width: "7",
-                height: "7",
-                rx: "1"
-            })
-        ]
-    });
-const VerificationIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                d: "M9 11L12 14L20 6"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                d: "M20 12V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H13"
-            })
-        ]
-    });
-const DocumentIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                d: "M14 2V8H20"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                d: "M8 12H16"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                d: "M8 16H16"
-            })
-        ]
-    });
-const sampleTasks = [
-    [
-        {
-            id: 'liability_check',
-            label: 'Liability Check',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'credit_review',
-            label: 'Credit Review',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'address_verification',
-            label: 'Address Verification and a really long label that might wrap',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        },
-        {
-            id: 'property_verification',
-            label: 'Property Verification',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'processing_review',
-            label: 'Processing Review',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-        }
-    ]
-];
-const Default = {
-    name: 'Default',
-    parameters: {
-        nodes: [
-            {
-                id: '0',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Application',
-                        tasks: []
-                    },
-                    execution: {
-                        stageStatus: {
-                            duration: 'SLA: None'
-                        }
-                    },
-                    onTaskAdd: ()=>{
-                        window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
-                }
-            },
-            {
-                id: '1',
-                type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Processing with a really really really long label that might wrap',
-                        tasks: sampleTasks,
-                        sla: '1h',
-                        slaBreached: false,
-                        escalation: '1h',
-                        escalationsTriggered: false
-                    },
-                    execution: {
-                        stageStatus: {
-                            duration: 'SLA: None'
-                        }
-                    },
-                    onAddTaskFromToolbox: (taskItem)=>{
-                        window.alert(`Add task (${taskItem.data.type}) - this would open a panel to configure the new task`);
-                    },
-                    taskOptions: sampleTasks.flat().map((task)=>({
-                            id: task.id,
-                            name: task.label,
-                            icon: {
-                                Component: ()=>task.icon
-                            },
-                            data: {
-                                type: task.id
-                            }
-                        }))
-                }
-            },
-            {
-                id: '2',
-                type: 'stage',
-                position: {
-                    x: 752,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    onReplaceTaskFromToolbox: ()=>{},
-                    stageDetails: {
-                        label: 'Validation - Failed',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Data Validation',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Compliance Check',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            label: 'error message',
-                            status: 'Failed'
-                        },
-                        taskStatus: {
-                            2: {
-                                status: 'Failed',
-                                message: 'Compliance requirements not met'
-                            }
-                        }
-                    }
-                }
-            },
-            {
-                id: '3',
-                type: 'stage',
-                position: {
-                    x: 1104,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Review - Warning',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Risk Assessment',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Policy Review',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            label: 'Needs attention',
-                            status: 'Warning'
-                        },
-                        taskStatus: {
-                            2: {
-                                status: 'Warning',
-                                message: 'Policy review requires manual intervention'
-                            }
-                        }
-                    }
-                }
-            }
-        ]
-    }
-};
-const WithTaskIcons = {
-    name: 'With Task Icons',
-    parameters: {
-        nodes: [
-            {
-                id: '1',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Task Icons Demo',
-                        tasks: [
-                            [
-                                {
-                                    id: 'human-task',
-                                    label: 'Human in the Loop',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskIcon_index_cjs_namespaceObject.TaskIcon, {
-                                        type: external_TaskIcon_index_cjs_namespaceObject.TaskItemTypeValues.User,
-                                        size: "sm"
-                                    })
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'agent-task',
-                                    label: 'Agent Task',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskIcon_index_cjs_namespaceObject.TaskIcon, {
-                                        type: external_TaskIcon_index_cjs_namespaceObject.TaskItemTypeValues.Agent,
-                                        size: "sm"
-                                    })
-                                },
-                                {
-                                    id: 'external-agent-task',
-                                    label: 'External Agent',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskIcon_index_cjs_namespaceObject.TaskIcon, {
-                                        type: external_TaskIcon_index_cjs_namespaceObject.TaskItemTypeValues.ExternalAgent,
-                                        size: "sm"
-                                    })
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'rpa-task',
-                                    label: 'RPA Automation',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskIcon_index_cjs_namespaceObject.TaskIcon, {
-                                        type: external_TaskIcon_index_cjs_namespaceObject.TaskItemTypeValues.Automation,
-                                        size: "sm"
-                                    })
-                                },
-                                {
-                                    id: 'api-task',
-                                    label: 'API Automation',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskIcon_index_cjs_namespaceObject.TaskIcon, {
-                                        type: external_TaskIcon_index_cjs_namespaceObject.TaskItemTypeValues.ApiAutomation,
-                                        size: "sm"
-                                    })
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'process-task',
-                                    label: 'Agentic Process',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskIcon_index_cjs_namespaceObject.TaskIcon, {
-                                        type: external_TaskIcon_index_cjs_namespaceObject.TaskItemTypeValues.AgenticProcess,
-                                        size: "sm"
-                                    })
-                                },
-                                {
-                                    id: 'connector-task',
-                                    label: 'Connector',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskIcon_index_cjs_namespaceObject.TaskIcon, {
-                                        type: external_TaskIcon_index_cjs_namespaceObject.TaskItemTypeValues.Connector,
-                                        size: "sm"
-                                    })
-                                }
-                            ],
-                            [
-                                {
-                                    id: 'timer-task',
-                                    label: 'Timer',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskIcon_index_cjs_namespaceObject.TaskIcon, {
-                                        type: external_TaskIcon_index_cjs_namespaceObject.TaskItemTypeValues.Timer,
-                                        size: "sm"
-                                    })
-                                }
-                            ]
-                        ]
-                    }
-                }
-            }
-        ]
-    }
-};
-const ExecutionStatus = {
-    name: 'Execution Status',
-    parameters: {
-        nodes: [
-            {
-                id: '0',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        sla: '1h',
-                        slaBreached: false,
-                        escalation: '1h',
-                        escalationsTriggered: false,
-                        label: 'Application',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'KYC and AML Checks',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Document Verification is going to be very very really long',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'Completed',
-                            duration: 'SLA: 4h'
-                        },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                label: 'KYC and AML Checks',
-                                duration: '2h 15m'
-                            },
-                            2: {
-                                status: 'Completed',
-                                label: 'Document Verification',
-                                duration: '1h 45m'
-                            }
-                        }
-                    }
-                }
-            },
-            {
-                id: '1',
-                type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        sla: '1h',
-                        slaBreached: true,
-                        escalation: '1h',
-                        escalationsTriggered: true,
-                        label: 'Processing',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Liability Check',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Credit Review',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Address Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                },
-                                {
-                                    id: '4',
-                                    label: 'Property Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '5',
-                                    label: 'Processing Review',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ],
-                        selectedTasks: [
-                            '2'
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'Completed',
-                            duration: 'SLA: 6h 15m'
-                        },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                label: 'Liability Check',
-                                duration: '1h 30m',
-                                retryDuration: '25m',
-                                badge: 'Reworked',
-                                badgeStatus: 'error',
-                                retryCount: 2
-                            },
-                            2: {
-                                status: 'Completed',
-                                label: 'Credit Review',
-                                duration: '1h 30m',
-                                retryDuration: '32m',
-                                badge: 'Reworked',
-                                retryCount: 1
-                            },
-                            3: {
-                                status: 'Completed',
-                                label: 'Address Verification',
-                                duration: '30m'
-                            },
-                            4: {
-                                status: 'Completed',
-                                label: 'Property Verification',
-                                duration: '1h 30m',
-                                retryDuration: '1h 5m',
-                                badge: 'Reworked',
-                                retryCount: 3
-                            },
-                            5: {
-                                status: 'Completed',
-                                label: 'Processing Review',
-                                duration: '1h 15m'
-                            }
-                        }
-                    }
-                }
-            },
-            {
-                id: '2',
-                type: 'stage',
-                position: {
-                    x: 752,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Underwriting',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Report Ordering',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Underwriting Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    onTaskClick: (id)=>window.alert(`Task clicked: ${id}`),
-                    execution: {
-                        stageStatus: {
-                            status: 'InProgress',
-                            label: 'In progress',
-                            duration: 'SLA: 2h 15m'
-                        },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                label: 'Report Ordering',
-                                duration: '2h 15m'
-                            },
-                            2: {
-                                status: 'InProgress',
-                                label: 'Underwriting Verification'
-                            }
-                        }
-                    }
-                }
-            },
-            {
-                id: '3',
-                type: 'stage',
-                position: {
-                    x: 1104,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Closing',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Loan Packet Creation',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Customer Signing',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'NotExecuted',
-                            label: 'Not started'
-                        },
-                        taskStatus: {}
-                    }
-                }
-            },
-            {
-                id: '4',
-                type: 'stage',
-                position: {
-                    x: 1104,
-                    y: 400
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Rejected',
-                        isException: true,
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Customer Notification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'NotExecuted',
-                            label: 'Not started'
-                        },
-                        taskStatus: {}
-                    }
-                }
-            }
-        ],
-        edges: [
-            {
-                id: 'e1',
-                type: 'stage',
-                source: '0',
-                sourceHandle: '0____source____right',
-                target: '1',
-                targetHandle: '1____target____left'
-            },
-            {
-                id: 'e2',
-                type: 'stage',
-                source: '1',
-                sourceHandle: '1____source____right',
-                target: '2',
-                targetHandle: '2____target____left'
-            },
-            {
-                id: 'e3',
-                type: 'stage',
-                source: '2',
-                sourceHandle: '2____source____right',
-                target: '3',
-                targetHandle: '3____target____left'
-            }
-        ]
-    }
-};
-const InteractiveTaskManagement = {
-    name: 'Interactive Task Management',
-    parameters: {
-        nodes: [
-            {
-                id: 'design-stage',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 352,
-                data: {
-                    stageDetails: {
-                        label: 'Design Mode - Editable',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Initial Task',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Credit Review with a very long label that will be truncated and show tooltip',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Address Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                },
-                                {
-                                    id: '4',
-                                    label: 'Property Verification with Long Name',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                },
-                                {
-                                    id: '5',
-                                    label: 'Background Check',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '6',
-                                    label: "Final Review Task with Extended Description",
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    onTaskClick: (taskId)=>{
-                        window.alert(`Task clicked: ${taskId}`);
-                    },
-                    onTaskRemove: (groupIndex, taskIndex)=>{
-                        window.alert(`Task removal requested!\nGroup: ${groupIndex}\nTask: ${taskIndex}\n\nIn a real app, this would remove the task from the data.`);
-                    },
-                    onTaskAdd: ()=>{
-                        window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
-                }
-            },
-            {
-                id: 'execution-stage',
-                type: 'stage',
-                position: {
-                    x: 448,
-                    y: 96
-                },
-                width: 352,
-                data: {
-                    stageDetails: {
-                        label: 'Execution Mode - Read Only',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Task with execution status and very long name that will be truncated',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Credit Review Processing',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Parallel Address Verification Task',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                },
-                                {
-                                    id: '4',
-                                    label: 'Parallel Property Verification with Extended Name',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '5',
-                                    label: 'Final Review and Approval Process',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'InProgress',
-                            label: 'In progress',
-                            duration: '2h 15m'
-                        },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                duration: '30m',
-                                badge: 'Completed',
-                                badgeStatus: 'info'
-                            },
-                            2: {
-                                status: 'InProgress',
-                                duration: '1h 15m',
-                                retryDuration: '15m',
-                                badge: 'Retry',
-                                badgeStatus: 'warning',
-                                retryCount: 2
-                            },
-                            3: {
-                                status: 'Completed',
-                                duration: '45m'
-                            },
-                            4: {
-                                status: 'Failed',
-                                duration: '20m',
-                                retryDuration: '10m',
-                                badge: 'Error',
-                                badgeStatus: 'error',
-                                retryCount: 1
-                            },
-                            5: {
-                                status: 'NotExecuted'
-                            }
-                        }
-                    },
-                    onTaskClick: (taskId)=>{
-                        window.alert(`Task clicked: ${taskId} (execution mode - read only)`);
-                    }
-                }
-            }
-        ]
-    }
-};
-const LoanProcessingWorkflow = {
-    name: 'Loan Processing Workflow',
-    parameters: {
-        nodes: [
-            {
-                id: 'application',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Application',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'KYC and AML Checks',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Document Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ],
-                        selectedTasks: [
-                            '1'
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'processing',
-                type: 'stage',
-                position: {
-                    x: 448,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Processing',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Liability Check',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Credit Review',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Address Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                },
-                                {
-                                    id: '4',
-                                    label: 'Property Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '5',
-                                    label: 'Processing Review',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ],
-                        selectedTasks: [
-                            '4'
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'underwriting',
-                type: 'stage',
-                position: {
-                    x: 848,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Underwriting',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Report Ordering',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Underwriting Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ]
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'closing',
-                type: 'stage',
-                position: {
-                    x: 1248,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Closing',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Loan Packet Creation',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Customer Signing',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'funding',
-                type: 'stage',
-                position: {
-                    x: 1648,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Funding',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Disperse Loan',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'rejected',
-                type: 'stage',
-                position: {
-                    x: 1248,
-                    y: 400
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Rejected',
-                        isException: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Customer Notification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    }
-                }
-            },
-            {
-                id: 'withdrawn',
-                type: 'stage',
-                position: {
-                    x: 448,
-                    y: 608
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Withdrawn',
-                        isException: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Customer Notification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Generate Audit Report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    }
-                }
-            }
-        ],
-        edges: [
-            {
-                id: 'e1',
-                type: 'stage',
-                source: 'application',
-                sourceHandle: 'application____source____right',
-                target: 'processing',
-                targetHandle: 'processing____target____left'
-            },
-            {
-                id: 'e2',
-                type: 'stage',
-                source: 'processing',
-                sourceHandle: 'processing____source____right',
-                target: 'underwriting',
-                targetHandle: 'underwriting____target____left'
-            },
-            {
-                id: 'e3',
-                type: 'stage',
-                source: 'underwriting',
-                sourceHandle: 'underwriting____source____right',
-                target: 'closing',
-                targetHandle: 'closing____target____left'
-            },
-            {
-                id: 'e4',
-                type: 'stage',
-                source: 'closing',
-                sourceHandle: 'closing____source____right',
-                target: 'funding',
-                targetHandle: 'funding____target____left'
-            }
-        ]
-    }
-};
-const initialTasks = [
-    [
-        {
-            id: 'task-1',
-            label: 'KYC Verification',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-2',
-            label: 'Document Review',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-        },
-        {
-            id: 'task-6',
-            label: 'Credit Check',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-7',
-            label: 'Ad hoc - Manual Review',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {}),
-            isAdhoc: true
-        }
-    ],
-    [
-        {
-            id: 'task-3',
-            label: 'Address Check',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        },
-        {
-            id: 'task-4',
-            label: 'Property Check',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-8',
-            label: 'Ad hoc - Exception Handling',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {}),
-            isAdhoc: true
-        }
-    ],
-    [
-        {
-            id: 'task-5',
-            label: 'Final Approval',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-        }
-    ]
-];
-const DraggableTaskReorderingStory = ()=>{
-    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
-        }), []);
-    const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageEdge_cjs_namespaceObject.StageEdge
-        }), []);
-    const [nodes, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)([
-        {
-            id: 'reorder-stage',
-            type: 'stage',
-            position: {
-                x: 320,
-                y: 96
-            },
-            data: {
-                stageDetails: {
-                    label: 'Drag to Reorder Tasks',
-                    tasks: initialTasks
-                },
-                onTaskClick: (taskId)=>console.log('Task clicked:', taskId)
-            }
-        }
-    ]);
-    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
-    const handleTaskReorder = (0, external_react_namespaceObject.useCallback)((reorderedTasks)=>{
-        setNodes((nds)=>nds.map((node)=>'reorder-stage' === node.id ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: reorderedTasks
-                        }
-                    }
-                } : node));
-    }, [
-        setNodes
-    ]);
-    const groupModificationHandlers = (0, external_react_namespaceObject.useMemo)(()=>(0, GroupModificationUtils_cjs_namespaceObject.createGroupModificationHandlers)(), []);
-    const handleTaskGroupModification = (0, external_react_namespaceObject.useCallback)((groupModificationType, groupIndex, taskIndex)=>{
-        const handler = (0, GroupModificationUtils_cjs_namespaceObject.getHandlerForModificationType)(groupModificationHandlers, groupModificationType);
-        setNodes((nds)=>nds.map((node)=>'reorder-stage' === node.id ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: handler(node.data.stageDetails.tasks, groupIndex, taskIndex)
-                        }
-                    }
-                } : node));
-    }, [
-        groupModificationHandlers,
-        setNodes
-    ]);
-    const nodesWithHandler = (0, external_react_namespaceObject.useMemo)(()=>nodes.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onTaskReorder: handleTaskReorder,
-                    onTaskGroupModification: handleTaskGroupModification
-                }
-            })), [
-        nodes,
-        handleTaskReorder,
-        handleTaskGroupModification
-    ]);
-    const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
-        setEdges
-    ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        style: {
-            width: '100vw',
-            height: '100vh'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-                nodes: nodesWithHandler,
-                edges: edges,
-                onNodesChange: onNodesChange,
-                onEdgesChange: onEdgesChange,
-                onConnect: onConnect,
-                nodeTypes: nodeTypes,
-                edgeTypes: edgeTypes,
-                mode: "design",
-                connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
-                defaultEdgeOptions: {
-                    type: 'stage'
-                },
-                connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
-                elevateEdgesOnSelect: true,
-                defaultViewport: {
-                    x: 0,
-                    y: 0,
-                    zoom: 1.5
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-                    position: "bottom-right",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                        translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-                    })
-                })
-            })
-        })
-    });
-};
-const DraggableTaskReordering = {
-    name: 'Draggable Task Reordering',
-    parameters: {
-        useCustomRender: true
-    },
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DraggableTaskReorderingStory, {})
-};
-const initialTasksForAddReplace = [
-    [
-        {
-            id: 'task-1',
-            label: 'Initial Verification',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-adhoc-1',
-            label: 'Ad hoc - Manual Check',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
-            isAdhoc: true
-        }
-    ],
-    [
-        {
-            id: 'task-2',
-            label: 'Document Review',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-        }
-    ],
-    [
-        {
-            id: 'task-3',
-            label: 'Process Validation',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-        }
-    ]
-];
-const availableTaskOptions = [
-    {
-        id: 'verification-task',
-        name: 'Verification task',
-        icon: {
-            Component: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        },
-        data: {
-            type: 'verification'
-        }
-    },
-    {
-        id: 'document-task',
-        name: 'Document task',
-        icon: {
-            Component: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-        },
-        data: {
-            type: 'document'
-        }
-    },
-    {
-        id: 'process-task',
-        name: 'Process task',
-        icon: {
-            Component: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-        },
-        data: {
-            type: 'process'
-        }
-    },
-    {
-        id: 'credit-check',
-        name: 'Credit check',
-        icon: {
-            Component: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        },
-        data: {
-            type: 'credit'
-        }
-    },
-    {
-        id: 'address-verification',
-        name: 'Address verification',
-        icon: {
-            Component: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-        },
-        data: {
-            type: 'address'
-        }
-    }
-];
-const AddAndReplaceTasksStory = ()=>{
-    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
-        }), []);
-    const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageEdge_cjs_namespaceObject.StageEdge
-        }), []);
-    const [pendingReplaceTask, setPendingReplaceTask] = (0, external_react_namespaceObject.useState)(false);
-    const [selectedTaskId, setSelectedTaskId] = (0, external_react_namespaceObject.useState)();
-    const [menuAnchorEl, setMenuAnchorEl] = (0, external_react_namespaceObject.useState)(null);
-    const [nodesState, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)([
-        {
-            id: 'add-replace-stage',
-            type: 'stage',
-            position: {
-                x: 320,
-                y: 96
-            },
-            data: {
-                stageDetails: {
-                    label: 'Add, Replace, and Group Tasks',
-                    isReadOnly: false,
-                    tasks: initialTasksForAddReplace
-                },
-                taskOptions: availableTaskOptions
-            }
-        },
-        {
-            id: 'readonly-stage',
-            type: 'stage',
-            position: {
-                x: 720,
-                y: 96
-            },
-            data: {
-                stageDetails: {
-                    label: 'ReadOnly Stage',
-                    isReadOnly: true,
-                    tasks: initialTasksForAddReplace
-                },
-                taskOptions: availableTaskOptions
-            }
-        }
-    ]);
-    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
-    const handleAddTask = (0, external_react_namespaceObject.useCallback)((taskItem)=>{
-        const newTask = {
-            id: `${taskItem.id}-${Date.now()}`,
-            label: taskItem.name,
-            icon: taskItem.icon?.Component ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(taskItem.icon.Component, {}) : void 0
-        };
-        setNodes((prevNodes)=>prevNodes.map((node)=>'add-replace-stage' === node.id ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: [
-                                ...node.data.stageDetails.tasks,
-                                [
-                                    newTask
-                                ]
-                            ]
-                        }
-                    }
-                } : node));
-    }, [
-        setNodes
-    ]);
-    const handleReplaceTask = (0, external_react_namespaceObject.useCallback)((taskItem, groupIndex, taskIndex)=>{
-        if (groupIndex < 0 || taskIndex < 0) return;
-        const listItem = taskItem;
-        const replacedTask = {
-            id: `${listItem.id}-replaced-${Date.now()}`,
-            label: listItem.name,
-            icon: listItem.icon?.Component ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(listItem.icon.Component, {}) : void 0
-        };
-        setNodes((prevNodes)=>prevNodes.map((node)=>{
-                if ('add-replace-stage' !== node.id) return node;
-                const prevTasks = node.data.stageDetails.tasks;
-                if (groupIndex >= prevTasks.length) return node;
-                const currentGroup = prevTasks[groupIndex];
-                if (!currentGroup || taskIndex >= currentGroup.length) return node;
-                const updatedTasks = prevTasks.map((group, gIdx)=>{
-                    if (gIdx === groupIndex) return group.map((task, tIdx)=>tIdx === taskIndex ? replacedTask : task);
-                    return group;
-                });
-                return {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: updatedTasks
-                        }
-                    }
-                };
-            }));
-        setPendingReplaceTask(false);
-        setSelectedTaskId(void 0);
-    }, [
-        setNodes
-    ]);
-    const groupModificationHandlers = (0, external_react_namespaceObject.useMemo)(()=>(0, GroupModificationUtils_cjs_namespaceObject.createGroupModificationHandlers)(), []);
-    const handleTaskGroupModification = (0, external_react_namespaceObject.useCallback)((groupModificationType, groupIndex, taskIndex)=>{
-        const handler = (0, GroupModificationUtils_cjs_namespaceObject.getHandlerForModificationType)(groupModificationHandlers, groupModificationType);
-        setNodes((prevNodes)=>prevNodes.map((node)=>{
-                if ('add-replace-stage' !== node.id) return node;
-                const prevTasks = node.data.stageDetails.tasks;
-                const updatedTasks = handler(prevTasks, groupIndex, taskIndex);
-                return {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: updatedTasks
-                        }
-                    }
-                };
-            }));
-    }, [
-        groupModificationHandlers,
-        setNodes
-    ]);
-    const handleTaskReorder = (0, external_react_namespaceObject.useCallback)((reorderedTasks)=>{
-        setNodes((prevNodes)=>prevNodes.map((node)=>'add-replace-stage' === node.id ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        stageDetails: {
-                            ...node.data.stageDetails,
-                            tasks: reorderedTasks
-                        }
-                    }
-                } : node));
-    }, [
-        setNodes
-    ]);
-    const handleTaskClick = (0, external_react_namespaceObject.useCallback)((taskId)=>{
-        setSelectedTaskId(taskId);
-    }, []);
-    const handlePaneClick = (0, external_react_namespaceObject.useCallback)(()=>{
-        setSelectedTaskId(void 0);
-        setPendingReplaceTask(false);
-    }, []);
-    const handleNodesChange = (0, external_react_namespaceObject.useCallback)((...args)=>{
-        onNodesChange(...args);
-        const deselected = args[0].some((c)=>'select' === c.type && 'add-replace-stage' === c.id && !c.selected);
-        if (deselected) {
-            setPendingReplaceTask(false);
-            setSelectedTaskId(void 0);
-        }
-    }, [
-        onNodesChange
-    ]);
-    const currentTasks = nodesState.find((n)=>'add-replace-stage' === n.id)?.data.stageDetails.tasks || [];
-    const taskMenuItems = (0, external_react_namespaceObject.useMemo)(()=>currentTasks.flatMap((group)=>group.map((task)=>({
-                    title: task.label,
-                    variant: 'item',
-                    startIcon: task.icon,
-                    onClick: ()=>{
-                        setSelectedTaskId(task.id);
-                        setPendingReplaceTask(true);
-                        setMenuAnchorEl(null);
-                    }
-                }))), [
-        currentTasks
-    ]);
-    const nodesWithMetadata = (0, external_react_namespaceObject.useMemo)(()=>nodesState.map((node)=>'add-replace-stage' === node.id ? {
-                ...node,
-                data: {
-                    ...node.data,
-                    ...selectedTaskId && {
-                        pendingReplaceTask
-                    },
-                    stageDetails: {
-                        ...node.data.stageDetails,
-                        selectedTaskId
-                    },
-                    onAddTaskFromToolbox: handleAddTask,
-                    onReplaceTaskFromToolbox: handleReplaceTask,
-                    onTaskGroupModification: handleTaskGroupModification,
-                    onTaskReorder: handleTaskReorder,
-                    onTaskClick: handleTaskClick
-                }
-            } : node), [
-        nodesState,
-        pendingReplaceTask,
-        selectedTaskId,
-        handleAddTask,
-        handleReplaceTask,
-        handleTaskGroupModification,
-        handleTaskReorder,
-        handleTaskClick
-    ]);
-    const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
-        setEdges
-    ]);
-    const replaceButtonLabel = (0, external_react_namespaceObject.useMemo)(()=>{
-        if (pendingReplaceTask && selectedTaskId) {
-            const taskBeingReplaced = currentTasks.flat().find((t)=>t.id === selectedTaskId);
-            if (taskBeingReplaced) return `Replacing Task: ${taskBeingReplaced.label}`;
-        }
-        return 'Replace Task';
-    }, [
-        pendingReplaceTask,
-        selectedTaskId,
-        currentTasks
-    ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        style: {
-            width: '100vw',
-            height: '100vh'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-                nodes: nodesWithMetadata,
-                edges: edges,
-                onNodesChange: handleNodesChange,
-                onEdgesChange: onEdgesChange,
-                onConnect: onConnect,
-                onPaneClick: handlePaneClick,
-                nodeTypes: nodeTypes,
-                edgeTypes: edgeTypes,
-                mode: "design",
-                connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
-                defaultEdgeOptions: {
-                    type: 'stage'
-                },
-                connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
-                elevateEdgesOnSelect: true,
-                defaultViewport: {
-                    x: 0,
-                    y: 0,
-                    zoom: 1.5
-                },
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_cjs_namespaceObject.Panel, {
-                        position: "top-right",
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApButton, {
-                                variant: "primary",
-                                label: replaceButtonLabel,
-                                onClick: (e)=>{
-                                    setMenuAnchorEl(e.currentTarget);
-                                }
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApMenu, {
-                                isOpen: Boolean(menuAnchorEl),
-                                anchorEl: menuAnchorEl,
-                                menuItems: taskMenuItems,
-                                onClose: ()=>setMenuAnchorEl(null),
-                                width: 300
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-                        position: "bottom-right",
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                            translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-                        })
-                    })
-                ]
-            })
-        })
-    });
-};
-const AddAndReplaceTasks = {
-    name: 'Add, Replace, and Group Tasks',
-    parameters: {
-        useCustomRender: true
-    },
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddAndReplaceTasksStory, {})
-};
-const InlineTitleEditStory = ()=>{
-    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
-        }), []);
-    const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageEdge_cjs_namespaceObject.StageEdge
-        }), []);
-    const setNodesRef = (0, external_react_namespaceObject.useRef)(null);
-    const createTitleChangeHandler = (0, external_react_namespaceObject.useCallback)((nodeId)=>(newTitle)=>{
-            setNodesRef.current((nds)=>nds.map((node)=>node.id === nodeId ? {
-                        ...node,
-                        data: {
-                            ...node.data,
-                            stageDetails: {
-                                ...node.data.stageDetails,
-                                label: newTitle
-                            }
-                        }
-                    } : node));
-        }, []);
-    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: 'editable-stage',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Click to Edit Title',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'KYC Verification',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Document Review',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    onTaskAdd: ()=>{
-                        window.alert('Add task functionality - this would open a dialog to add a new task');
-                    },
-                    onStageTitleChange: createTitleChangeHandler('editable-stage')
-                }
-            },
-            {
-                id: 'long-title-stage',
-                type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'A Very Long Stage Title That Should Truncate With Ellipsis',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Processing Task',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    onTaskAdd: ()=>{
-                        window.alert('Add task functionality - this would open a dialog to add a new task');
-                    },
-                    onStageTitleChange: createTitleChangeHandler('long-title-stage')
-                }
-            }
-        ], [
-        createTitleChangeHandler
-    ]);
-    const [nodes, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
-    setNodesRef.current = setNodes;
-    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
-    const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
-        setEdges
-    ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        style: {
-            width: '100vw',
-            height: '100vh'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-                nodes: nodes,
-                edges: edges,
-                onNodesChange: onNodesChange,
-                onEdgesChange: onEdgesChange,
-                onConnect: onConnect,
-                nodeTypes: nodeTypes,
-                edgeTypes: edgeTypes,
-                mode: "design",
-                connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
-                defaultEdgeOptions: {
-                    type: 'stage'
-                },
-                connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
-                elevateEdgesOnSelect: true,
-                defaultViewport: {
-                    x: 0,
-                    y: 0,
-                    zoom: 1.5
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-                    position: "bottom-right",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                        translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-                    })
-                })
-            })
-        })
-    });
-};
-const EditableStageTitle = {
-    name: 'Editable Stage Title',
-    parameters: {
-        useCustomRender: true
-    },
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InlineTitleEditStory, {})
-};
-const fetchChildren = (id)=>new Promise((resolve)=>{
-        setTimeout(()=>{
-            resolve([
-                {
-                    id: `${id}-sub-1`,
-                    name: `${id} - Subtask A`,
-                    data: {
-                        type: `${id}-a`
-                    }
-                },
-                {
-                    id: `${id}-sub-2`,
-                    name: `${id} - Subtask B`,
-                    data: {
-                        type: `${id}-b`
-                    }
-                },
-                {
-                    id: `${id}-sub-3`,
-                    name: `${id} - Subtask C`,
-                    data: {
-                        type: `${id}-c`
-                    }
-                }
-            ]);
-        }, 2000);
-    });
-const loadedTaskOptionsWithChildren = [
-    {
-        id: 'email',
-        name: 'Email',
-        data: {
-            type: 'email'
-        },
-        children: (id)=>fetchChildren(id)
-    },
-    {
-        id: 'approval',
-        name: 'Approval',
-        data: {
-            type: 'approval'
-        },
-        children: (id)=>fetchChildren(id)
-    },
-    {
-        id: "script",
-        name: 'Script',
-        data: {
-            type: "script"
-        },
-        children: (id)=>fetchChildren(id)
-    }
-];
-const AddTaskLoadingStory = ()=>{
-    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
-        }), []);
-    const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: external_StageEdge_cjs_namespaceObject.StageEdge
-        }), []);
-    const setNodesRef = (0, external_react_namespaceObject.useRef)(null);
-    const timeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
-    const handleAddTaskFromToolbox = (0, external_react_namespaceObject.useCallback)((nodeId, _taskItem)=>{
-        clearTimeout(timeoutRef.current);
-        setNodesRef.current((nds)=>nds.map((n)=>n.id === nodeId ? {
-                    ...n,
-                    data: {
-                        ...n.data,
-                        addTaskLoading: true
-                    }
-                } : n));
-        timeoutRef.current = setTimeout(()=>{
-            setNodesRef.current((nds)=>nds.map((n)=>n.id === nodeId ? {
-                        ...n,
-                        data: {
-                            ...n.data,
-                            addTaskLoading: false
-                        }
-                    } : n));
-        }, 2000);
-    }, []);
-    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: 'loading-stage-empty',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Loading (+ disabled for 3s)',
-                        tasks: []
-                    },
-                    addTaskLoading: true,
-                    taskOptions: [],
-                    onAddTaskFromToolbox: (taskItem)=>{
-                        handleAddTaskFromToolbox('loading-stage-empty', taskItem);
-                    }
-                }
-            },
-            {
-                id: 'loading-stage-children',
-                type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Async children (click +)',
-                        tasks: [
-                            [
-                                {
-                                    id: 'task-1',
-                                    label: 'Existing Task',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    addTaskLoading: false,
-                    taskOptions: loadedTaskOptionsWithChildren,
-                    onAddTaskFromToolbox: (taskItem)=>{
-                        handleAddTaskFromToolbox('loading-stage-children', taskItem);
-                    }
-                }
-            }
-        ], [
-        handleAddTaskFromToolbox
-    ]);
-    const [nodes, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
-    setNodesRef.current = setNodes;
-    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        const timeout = setTimeout(()=>{
-            setNodes((nds)=>nds.map((node)=>'loading-stage-empty' === node.id ? {
-                        ...node,
-                        data: {
-                            ...node.data,
-                            addTaskLoading: false,
-                            taskOptions: loadedTaskOptionsWithChildren
-                        }
-                    } : node));
-        }, 3000);
-        return ()=>clearTimeout(timeout);
-    }, [
-        setNodes
-    ]);
-    (0, external_react_namespaceObject.useEffect)(()=>()=>clearTimeout(timeoutRef.current), []);
-    const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
-        setEdges
-    ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        style: {
-            width: '100vw',
-            height: '100vh'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-                nodes: nodes,
-                edges: edges,
-                onNodesChange: onNodesChange,
-                onEdgesChange: onEdgesChange,
-                onConnect: onConnect,
-                nodeTypes: nodeTypes,
-                edgeTypes: edgeTypes,
-                mode: "design",
-                connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
-                defaultEdgeOptions: {
-                    type: 'stage'
-                },
-                connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
-                elevateEdgesOnSelect: true,
-                defaultViewport: {
-                    x: 0,
-                    y: 0,
-                    zoom: 1.5
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-                    position: "bottom-right",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                        translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-                    })
-                })
-            })
-        })
-    });
-};
-const AddTaskLoading = {
-    name: 'Add Task Loading State',
-    parameters: {
-        useCustomRender: true
-    },
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddTaskLoadingStory, {})
-};
-const AdhocTasks = {
-    name: 'Ad hoc Tasks',
-    parameters: {
-        nodes: [
-            {
-                id: '0',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'With onTaskPlay',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Ad hoc - KYC Check',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
-                                    isAdhoc: true
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Ad hoc - Document Review',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {}),
-                                    isAdhoc: true
-                                }
-                            ]
-                        ]
-                    },
-                    onTaskPlay: (taskId)=>new Promise((resolve)=>setTimeout(()=>{
-                                resolve();
-                                console.log(`Play task: ${taskId}`);
-                            }, 5000)),
-                    onTaskClick: (taskId)=>{
-                        window.alert(`Task clicked: ${taskId}`);
-                    }
-                }
-            },
-            {
-                id: '1',
-                type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Without onTaskPlay and Menu',
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Ad hoc - Risk Assessment',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
-                                    isAdhoc: true
-                                }
-                            ],
-                            [
-                                {
-                                    id: '2',
-                                    label: 'Ad hoc - Compliance Review',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {}),
-                                    isAdhoc: true
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Regular Task',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {}),
-                                    hasEntryCondition: true
-                                }
-                            ]
-                        ]
-                    },
-                    onTaskClick: (taskId)=>{
-                        window.alert(`Task clicked: ${taskId}`);
-                    },
-                    onTaskGroupModification: (type, groupIndex, taskIndex)=>{
-                        console.log(`Task group modification: ${type}, group: ${groupIndex}, task: ${taskIndex}`);
-                    },
-                    onReplaceTaskFromToolbox: (task, groupIndex, taskIndex)=>{
-                        console.log(`Replace task at group: ${groupIndex}, task: ${taskIndex}`, task);
-                    }
-                }
-            },
-            {
-                id: '2',
-                type: 'stage',
-                position: {
-                    x: 752,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Mixed with Parallel',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: '1',
-                                    label: 'Ad hoc - Verify Address',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
-                                    isAdhoc: true
-                                },
-                                {
-                                    id: '2',
-                                    label: 'Ad hoc - Verify Identity',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
-                                    isAdhoc: true
-                                }
-                            ],
-                            [
-                                {
-                                    id: '3',
-                                    label: 'Ad hoc - Bkgd Check',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {}),
-                                    isAdhoc: true
-                                }
-                            ],
-                            [
-                                {
-                                    id: '4',
-                                    label: 'Ad hoc - Review Docs',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {}),
-                                    isAdhoc: true
-                                }
-                            ],
-                            [
-                                {
-                                    id: '5',
-                                    label: 'Regular Processing',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'InProgress',
-                            label: 'In progress',
-                            duration: 'SLA: 3h 45m'
-                        },
-                        taskStatus: {
-                            1: {
-                                status: 'Completed',
-                                label: 'Verify Address',
-                                duration: '1h 20m',
-                                retryDuration: '35m',
-                                badge: 'Reworked',
-                                badgeStatus: 'warning',
-                                retryCount: 2
-                            },
-                            2: {
-                                status: 'Failed',
-                                label: 'Verify Identity',
-                                duration: '45m',
-                                message: 'Identity verification failed - document expired',
-                                badge: 'Action needed',
-                                badgeStatus: 'error'
-                            },
-                            3: {
-                                status: 'InProgress',
-                                label: 'Background Check'
-                            },
-                            4: {
-                                status: 'InProgress',
-                                label: 'Review Docs',
-                                duration: '30m',
-                                retryDuration: '10m',
-                                badge: 'Reworked',
-                                badgeStatus: 'info',
-                                retryCount: 1
-                            },
-                            5: {
-                                status: 'InProgress',
-                                label: 'Regular Processing'
-                            }
-                        }
-                    },
-                    onTaskPlay: (taskId)=>new Promise((resolve)=>setTimeout(()=>{
-                                resolve();
-                                console.log(`Play task: ${taskId}`);
-                            }, 5000))
-                }
-            }
-        ]
-    }
-};
-const WithRulesTags = {
-    name: 'With Rules & Tags',
-    parameters: {
-        nodes: [
-            {
-                id: '1',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Application',
-                        tasks: [
-                            [
-                                {
-                                    id: 't1',
-                                    label: 'Verify applicant identity',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: 't2',
-                                    label: 'Pull credit report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ],
-                        headerChips: [
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
-                                count: 1,
-                                tooltip: 'Entry rules',
-                                onClick: ()=>window.alert('Open entry rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
-                                count: 3,
-                                tooltip: 'Exit rules',
-                                onClick: ()=>window.alert('Open exit rules panel')
-                            }
-                        ]
-                    },
-                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
-                    onTaskAdd: ()=>window.alert('Add task')
-                }
-            },
-            {
-                id: '2',
-                type: 'stage',
-                position: {
-                    x: 400,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Pending with customer',
-                        tasks: [
-                            [
-                                {
-                                    id: 't3',
-                                    label: 'Request documents',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: 't4',
-                                    label: 'Send reminder or request',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ],
-                        headerChips: [
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
-                                count: 2,
-                                tooltip: 'Entry rules',
-                                onClick: ()=>window.alert('Open entry rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
-                                count: 1,
-                                tooltip: 'Exit rules',
-                                onClick: ()=>window.alert('Open exit rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.ReturnToOrigin,
-                                tooltip: 'Return to origin conditions',
-                                onClick: ()=>window.alert('Open return to origin panel')
-                            }
-                        ]
-                    },
-                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
-                    onTaskAdd: ()=>window.alert('Add task')
-                }
-            },
-            {
-                id: '3',
-                type: 'stage',
-                position: {
-                    x: 752,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Withdrawn',
-                        tasks: [
-                            [
-                                {
-                                    id: 't5',
-                                    label: 'Process withdrawal',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ],
-                        headerChips: [
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
-                                count: 2,
-                                tooltip: 'Entry rules',
-                                onClick: ()=>window.alert('Open entry rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
-                                count: 1,
-                                tooltip: 'Exit rules',
-                                onClick: ()=>window.alert('Open exit rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseExit,
-                                tooltip: 'Case exit',
-                                onClick: ()=>window.alert('Open case exit panel')
-                            }
-                        ]
-                    },
-                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
-                    onTaskAdd: ()=>window.alert('Add task')
-                }
-            },
-            {
-                id: '4',
-                type: 'stage',
-                position: {
-                    x: 1104,
-                    y: 96
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'Closing',
-                        tasks: [
-                            [
-                                {
-                                    id: 't6',
-                                    label: 'Prepare closing docs',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: 't7',
-                                    label: 'eSign envelope',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
-                                }
-                            ]
-                        ],
-                        headerChips: [
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
-                                count: 1,
-                                tooltip: 'Entry rules',
-                                onClick: ()=>window.alert('Open entry rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
-                                count: 3,
-                                tooltip: 'Exit rules',
-                                onClick: ()=>window.alert('Open exit rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseCompletion,
-                                tooltip: 'Case completion',
-                                onClick: ()=>window.alert('Open case completion panel')
-                            }
-                        ]
-                    },
-                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
-                    onTaskAdd: ()=>window.alert('Add task')
-                }
-            },
-            {
-                id: '5',
-                type: 'stage',
-                position: {
-                    x: 48,
-                    y: 400
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'No chips (comparison)',
-                        tasks: [
-                            [
-                                {
-                                    id: 't8',
-                                    label: 'Verify applicant identity',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: 't9',
-                                    label: 'Pull credit report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ]
-                    },
-                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
-                    onTaskAdd: ()=>window.alert('Add task')
-                }
-            },
-            {
-                id: '6',
-                type: 'stage',
-                position: {
-                    x: 400,
-                    y: 400
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'ReadOnly + completed + chips',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: 't10',
-                                    label: 'Verify applicant identity',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: 't11',
-                                    label: 'Pull credit report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ],
-                        headerChips: [
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
-                                count: 1,
-                                tooltip: 'Entry rules',
-                                onClick: ()=>window.alert('Open entry rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
-                                count: 3,
-                                tooltip: 'Exit rules',
-                                onClick: ()=>window.alert('Open exit rules panel')
-                            }
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'Completed',
-                            label: 'Completed',
-                            duration: 'SLA: 4h'
-                        }
-                    }
-                }
-            },
-            {
-                id: '7',
-                type: 'stage',
-                position: {
-                    x: 752,
-                    y: 400
-                },
-                width: 304,
-                data: {
-                    stageDetails: {
-                        label: 'ReadOnly + in progress + chips',
-                        isReadOnly: true,
-                        tasks: [
-                            [
-                                {
-                                    id: 't12',
-                                    label: 'Verify applicant identity',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
-                                }
-                            ],
-                            [
-                                {
-                                    id: 't13',
-                                    label: 'Pull credit report',
-                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
-                                }
-                            ]
-                        ],
-                        headerChips: [
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
-                                count: 2,
-                                tooltip: 'Entry rules',
-                                onClick: ()=>window.alert('Open entry rules panel')
-                            },
-                            {
-                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
-                                count: 1,
-                                tooltip: 'Exit rules',
-                                onClick: ()=>window.alert('Open exit rules panel')
-                            }
-                        ]
-                    },
-                    execution: {
-                        stageStatus: {
-                            status: 'InProgress',
-                            label: 'In progress',
-                            duration: 'SLA: 2h'
-                        }
-                    }
-                }
-            }
-        ]
-    }
-};
-exports.AddAndReplaceTasks = __webpack_exports__.AddAndReplaceTasks;
-exports.AddTaskLoading = __webpack_exports__.AddTaskLoading;
-exports.AdhocTasks = __webpack_exports__.AdhocTasks;
-exports.Default = __webpack_exports__.Default;
-exports.DraggableTaskReordering = __webpack_exports__.DraggableTaskReordering;
-exports.EditableStageTitle = __webpack_exports__.EditableStageTitle;
-exports.ExecutionStatus = __webpack_exports__.ExecutionStatus;
-exports.InteractiveTaskManagement = __webpack_exports__.InteractiveTaskManagement;
-exports.LoanProcessingWorkflow = __webpack_exports__.LoanProcessingWorkflow;
-exports.WithRulesTags = __webpack_exports__.WithRulesTags;
-exports.WithTaskIcons = __webpack_exports__.WithTaskIcons;
-exports["default"] = __webpack_exports__["default"];
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "AddAndReplaceTasks",
-    "AddTaskLoading",
-    "AdhocTasks",
-    "Default",
-    "DraggableTaskReordering",
-    "EditableStageTitle",
-    "ExecutionStatus",
-    "InteractiveTaskManagement",
-    "LoanProcessingWorkflow",
-    "WithRulesTags",
-    "WithTaskIcons",
-    "default"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});