@uipath/apollo-react 4.0.0 → 4.1.1

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

@@ -1,969 +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__, {
-    default: ()=>ButtonHandle_stories,
-    HandleConfiguration: ()=>HandleConfiguration,
-    LogicFlow: ()=>LogicFlow,
-    Default: ()=>Default
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const material_namespaceObject = require("@mui/material");
-const apollo_core_namespaceObject = require("@uipath/apollo-core");
-const index_cjs_namespaceObject = require("../../layouts/index.cjs");
-const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
-const external_react_namespaceObject = require("react");
-const external_storybook_utils_index_cjs_namespaceObject = require("../../storybook-utils/index.cjs");
-const external_types_cjs_namespaceObject = require("../../types.cjs");
-const BaseCanvas_cjs_namespaceObject = require("../BaseCanvas/BaseCanvas.cjs");
-const external_CanvasPositionControls_cjs_namespaceObject = require("../CanvasPositionControls.cjs");
-const external_ButtonHandle_cjs_namespaceObject = require("./ButtonHandle.cjs");
-const meta = {
-    title: 'Canvas/ButtonHandles',
-    component: external_ButtonHandle_cjs_namespaceObject.ButtonHandles,
-    parameters: {
-        layout: 'fullscreen'
-    },
-    decorators: [
-        (0, external_storybook_utils_index_cjs_namespaceObject.withCanvasProviders)()
-    ]
-};
-const ButtonHandle_stories = meta;
-function SimpleNode({ id, data, selected }) {
-    const topHandles = [
-        {
-            id: 'top',
-            type: 'source',
-            handleType: 'artifact',
-            label: 'Escalations',
-            showButton: true,
-            onAction: (event)=>{
-                console.log('Escalations clicked', event);
-                alert('Escalations clicked!');
-            }
-        }
-    ];
-    const bottomHandles = [
-        {
-            id: 'bottom-memory',
-            type: 'source',
-            handleType: 'artifact',
-            label: 'Memory',
-            showButton: true,
-            onAction: (event)=>{
-                console.log('Memory clicked', event);
-                alert('Memory clicked!');
-            }
-        },
-        {
-            id: 'bottom-context',
-            type: 'source',
-            handleType: 'artifact',
-            label: 'Context',
-            showButton: true,
-            onAction: (event)=>{
-                console.log('Context clicked', event);
-                alert('Context clicked!');
-            }
-        }
-    ];
-    const leftHandles = [
-        {
-            id: 'left',
-            type: 'target',
-            handleType: 'input'
-        }
-    ];
-    const rightHandles = [
-        {
-            id: 'right',
-            type: 'source',
-            handleType: 'output',
-            showButton: true,
-            onAction: (event)=>{
-                console.log('Output clicked', event);
-                alert('Output clicked!');
-            }
-        }
-    ];
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        style: {
-            width: 240,
-            height: 70,
-            borderRadius: 8,
-            backgroundColor: 'var(--uix-canvas-background)',
-            border: selected ? '1px solid var(--uix-canvas-selection-indicator)' : '1px solid var(--uix-canvas-border)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-            padding: 16
-        },
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                w: "100%",
-                gap: 12,
-                align: "center",
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                        name: "smart_toy",
-                        size: "32px",
-                        color: "var(--uix-canvas-foreground-de-emp)"
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeSBold,
-                                color: "var(--uix-canvas-foreground-de-emp)",
-                                children: data.label
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                                color: "var(--uix-canvas-foreground-de-emp)",
-                                children: data.subLabel
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_cjs_namespaceObject.ButtonHandles, {
-                nodeId: id,
-                handles: topHandles,
-                position: react_cjs_namespaceObject.Position.Top,
-                selected: selected
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_cjs_namespaceObject.ButtonHandles, {
-                nodeId: id,
-                handles: bottomHandles,
-                position: react_cjs_namespaceObject.Position.Bottom,
-                selected: selected
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_cjs_namespaceObject.ButtonHandles, {
-                nodeId: id,
-                handles: leftHandles,
-                position: react_cjs_namespaceObject.Position.Left,
-                selected: selected
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_cjs_namespaceObject.ButtonHandles, {
-                nodeId: id,
-                handles: rightHandles,
-                position: react_cjs_namespaceObject.Position.Right,
-                selected: selected
-            })
-        ]
-    });
-}
-function ConfigurableNode({ id, data, selected }) {
-    const { handleConfig } = data;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        style: {
-            width: 300,
-            height: 150,
-            borderRadius: 8,
-            backgroundColor: 'var(--uix-canvas-background)',
-            border: selected ? '1px solid var(--uix-canvas-selection-indicator)' : '1px solid var(--uix-canvas-foreground-de-emp)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative'
-        },
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                style: {
-                    fontSize: 16,
-                    fontWeight: 500,
-                    color: 'var(--uix-canvas-foreground)'
-                },
-                children: data.label
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_cjs_namespaceObject.ButtonHandles, {
-                nodeId: id,
-                handles: handleConfig.top,
-                position: react_cjs_namespaceObject.Position.Top,
-                selected: selected
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_cjs_namespaceObject.ButtonHandles, {
-                nodeId: id,
-                handles: handleConfig.bottom,
-                position: react_cjs_namespaceObject.Position.Bottom,
-                selected: selected
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_cjs_namespaceObject.ButtonHandles, {
-                nodeId: id,
-                handles: handleConfig.left,
-                position: react_cjs_namespaceObject.Position.Left,
-                selected: selected
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_cjs_namespaceObject.ButtonHandles, {
-                nodeId: id,
-                handles: handleConfig.right,
-                position: react_cjs_namespaceObject.Position.Right,
-                selected: selected
-            })
-        ]
-    });
-}
-function DefaultStory() {
-    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            simpleNode: SimpleNode
-        }), []);
-    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
-        initialNodes: [
-            {
-                id: '1',
-                type: 'simpleNode',
-                position: {
-                    x: 250,
-                    y: 150
-                },
-                data: {
-                    label: 'Screener agent',
-                    subLabel: 'Agent'
-                }
-            }
-        ]
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BaseCanvas_cjs_namespaceObject.BaseCanvas, {
-        ...canvasProps,
-        nodeTypes: nodeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
-            title: "ButtonHandles",
-            description: "Click + buttons on handles to trigger actions"
-        })
-    });
-}
-const handleAction = (event)=>console.log('Handle action:', event);
-const DEFAULT_HANDLE_CONFIG = {
-    top: [
-        {
-            id: 'out1',
-            type: 'source',
-            handleType: 'output',
-            label: 'Output 1',
-            showButton: true,
-            onAction: handleAction
-        },
-        {
-            id: 'out2',
-            type: 'source',
-            handleType: 'output',
-            label: 'Output 2',
-            showButton: true,
-            onAction: handleAction
-        }
-    ],
-    bottom: [
-        {
-            id: 'in1',
-            type: 'target',
-            handleType: 'input',
-            label: 'Input 1'
-        },
-        {
-            id: 'in2',
-            type: 'target',
-            handleType: 'input',
-            label: 'Input 2'
-        }
-    ],
-    left: [
-        {
-            id: 'config',
-            type: 'target',
-            handleType: 'artifact',
-            label: 'Config'
-        }
-    ],
-    right: [
-        {
-            id: 'success',
-            type: 'source',
-            handleType: 'output',
-            label: 'Success',
-            color: 'var(--uix-canvas-success-icon)',
-            showButton: true,
-            onAction: handleAction
-        },
-        {
-            id: 'error',
-            type: 'source',
-            handleType: 'output',
-            label: 'Error',
-            color: 'var(--uix-canvas-error-icon)',
-            showButton: true,
-            onAction: handleAction
-        }
-    ]
-};
-const HANDLE_TYPE_CONFIG = {
-    input: {
-        type: 'target',
-        label: 'In'
-    },
-    output: {
-        type: 'source',
-        label: 'Out'
-    },
-    artifact: {
-        type: 'source',
-        label: 'Art'
-    }
-};
-function HandleConfigurationStory() {
-    const [handleConfig, setHandleConfig] = (0, external_react_namespaceObject.useState)(DEFAULT_HANDLE_CONFIG);
-    const [showButtons, setShowButtons] = (0, external_react_namespaceObject.useState)(true);
-    const [handleTypes, setHandleTypes] = (0, external_react_namespaceObject.useState)({
-        top: 'output',
-        right: 'output',
-        bottom: 'input',
-        left: 'input'
-    });
-    const updateHandleCount = (0, external_react_namespaceObject.useCallback)((position, delta)=>{
-        setHandleConfig((prev)=>{
-            const handles = [
-                ...prev[position]
-            ];
-            if (delta > 0) {
-                const handleType = handleTypes[position];
-                const config = HANDLE_TYPE_CONFIG[handleType];
-                const isSource = 'source' === config.type;
-                const newHandle = {
-                    id: `${position}-${Date.now()}`,
-                    type: config.type,
-                    handleType,
-                    label: `${config.label} ${handles.length + 1}`,
-                    showButton: isSource ? showButtons : void 0,
-                    onAction: isSource ? handleAction : void 0
-                };
-                return {
-                    ...prev,
-                    [position]: [
-                        ...handles,
-                        newHandle
-                    ]
-                };
-            }
-            if (handles.length > 0) return {
-                ...prev,
-                [position]: handles.slice(0, -1)
-            };
-            return prev;
-        });
-    }, [
-        showButtons,
-        handleTypes
-    ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        setHandleConfig((prev)=>({
-                top: prev.top.map((h)=>'source' === h.type ? {
-                        ...h,
-                        showButton: showButtons
-                    } : h),
-                bottom: prev.bottom.map((h)=>'source' === h.type ? {
-                        ...h,
-                        showButton: showButtons
-                    } : h),
-                left: prev.left.map((h)=>'source' === h.type ? {
-                        ...h,
-                        showButton: showButtons
-                    } : h),
-                right: prev.right.map((h)=>'source' === h.type ? {
-                        ...h,
-                        showButton: showButtons
-                    } : h)
-            }));
-    }, [
-        showButtons
-    ]);
-    const resetConfig = (0, external_react_namespaceObject.useCallback)(()=>{
-        setHandleConfig(DEFAULT_HANDLE_CONFIG);
-        setShowButtons(true);
-        setHandleTypes({
-            top: 'output',
-            right: 'output',
-            bottom: 'input',
-            left: 'input'
-        });
-    }, []);
-    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            configurableNode: ConfigurableNode
-        }), []);
-    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: '1',
-                type: 'configurableNode',
-                position: {
-                    x: 350,
-                    y: 400
-                },
-                data: {
-                    label: 'Configurable Node',
-                    handleConfig: DEFAULT_HANDLE_CONFIG
-                }
-            }
-        ], []);
-    const { canvasProps, setNodes } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
-        initialNodes
-    });
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        setNodes((nodes)=>nodes.map((node)=>'1' === node.id ? {
-                    ...node,
-                    data: {
-                        ...node.data,
-                        handleConfig
-                    }
-                } : node));
-    }, [
-        handleConfig,
-        setNodes
-    ]);
-    const positions = [
-        {
-            key: 'top',
-            label: 'Top',
-            icon: 'arrow_upward'
-        },
-        {
-            key: 'right',
-            label: 'Right',
-            icon: 'arrow_forward'
-        },
-        {
-            key: 'bottom',
-            label: 'Bottom',
-            icon: 'arrow_downward'
-        },
-        {
-            key: 'left',
-            label: 'Left',
-            icon: 'arrow_back'
-        }
-    ];
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BaseCanvas_cjs_namespaceObject.BaseCanvas, {
-        ...canvasProps,
-        nodeTypes: nodeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
-            title: "Handle configuration",
-            collapsible: true,
-            defaultCollapsed: true,
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-                align: "start",
-                gap: 16,
-                style: {
-                    marginTop: 12
-                },
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-                        gap: 8,
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeSBold,
-                                children: "Handles"
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Row, {
-                                gap: 16,
-                                style: {
-                                    flexWrap: 'wrap'
-                                },
-                                children: positions.map(({ key, label, icon })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-                                        gap: 6,
-                                        align: "center",
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                                                gap: 4,
-                                                align: "center",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                                                        name: icon,
-                                                        size: "14px"
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeXs,
-                                                        children: label
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.FormControl, {
-                                                size: "small",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(material_namespaceObject.Select, {
-                                                    value: handleTypes[key],
-                                                    onChange: (e)=>setHandleTypes((prev)=>({
-                                                                ...prev,
-                                                                [key]: e.target.value
-                                                            })),
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.MenuItem, {
-                                                            value: "input",
-                                                            children: "Input"
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.MenuItem, {
-                                                            value: "output",
-                                                            children: "Output"
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.MenuItem, {
-                                                            value: "artifact",
-                                                            children: "Artifact"
-                                                        })
-                                                    ]
-                                                })
-                                            }),
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                                                gap: 2,
-                                                align: "center",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                                                        onClick: ()=>updateHandleCount(key, -1),
-                                                        disabled: 0 === handleConfig[key].length,
-                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                                                            name: "remove"
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
-                                                        style: {
-                                                            minWidth: 24,
-                                                            textAlign: 'center'
-                                                        },
-                                                        children: handleConfig[key].length
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                                                        onClick: ()=>updateHandleCount(key, 1),
-                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                                                            name: "add"
-                                                        })
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    }, key))
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.FormControlLabel, {
-                        control: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.Checkbox, {
-                            checked: showButtons,
-                            onChange: (e)=>setShowButtons(e.target.checked)
-                        }),
-                        label: "Show + buttons on outputs"
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
-                        size: "small",
-                        variant: "secondary",
-                        label: "Reset",
-                        onClick: resetConfig
-                    })
-                ]
-            })
-        })
-    });
-}
-function LogicFlowStory() {
-    const logicNodes = (0, external_react_namespaceObject.useMemo)(()=>[
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'if-node',
-                type: 'uipath.control-flow.decision',
-                position: {
-                    x: 300,
-                    y: 200
-                },
-                display: {
-                    label: 'If',
-                    subLabel: 'Decision'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Left,
-                        handles: [
-                            {
-                                id: 'input',
-                                type: 'target',
-                                handleType: 'input'
-                            }
-                        ]
-                    },
-                    {
-                        position: react_cjs_namespaceObject.Position.Right,
-                        handles: [
-                            {
-                                id: 'then',
-                                type: 'source',
-                                handleType: 'output',
-                                label: 'Then',
-                                showButton: true
-                            },
-                            {
-                                id: 'else',
-                                type: 'source',
-                                handleType: 'output',
-                                label: 'Else',
-                                showButton: true
-                            }
-                        ]
-                    }
-                ]
-            }),
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'switch-node',
-                type: 'uipath.control-flow.switch',
-                position: {
-                    x: 300,
-                    y: 650
-                },
-                display: {
-                    label: 'Switch',
-                    subLabel: 'Multi-way'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Left,
-                        handles: [
-                            {
-                                id: 'input',
-                                type: 'target',
-                                handleType: 'input'
-                            }
-                        ]
-                    },
-                    {
-                        position: react_cjs_namespaceObject.Position.Right,
-                        handles: [
-                            {
-                                id: 'default',
-                                type: 'source',
-                                handleType: 'output',
-                                label: 'Default',
-                                showButton: true
-                            },
-                            {
-                                id: 'case-0',
-                                type: 'source',
-                                handleType: 'output',
-                                label: '0',
-                                showButton: true
-                            },
-                            {
-                                id: 'case-1',
-                                type: 'source',
-                                handleType: 'output',
-                                label: '1',
-                                showButton: true
-                            }
-                        ]
-                    }
-                ]
-            }),
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'condition-input',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 50,
-                    y: 200
-                },
-                display: {
-                    label: 'Condition',
-                    subLabel: 'Boolean'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Right,
-                        handles: [
-                            {
-                                id: 'output',
-                                type: 'source',
-                                handleType: 'output'
-                            }
-                        ]
-                    }
-                ]
-            }),
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'value-input',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 50,
-                    y: 650
-                },
-                display: {
-                    label: 'Value',
-                    subLabel: 'Integer'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Right,
-                        handles: [
-                            {
-                                id: 'output',
-                                type: 'source',
-                                handleType: 'output'
-                            }
-                        ]
-                    }
-                ]
-            }),
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'then-action',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 600,
-                    y: 100
-                },
-                display: {
-                    label: 'Then Action',
-                    subLabel: 'Execute if true',
-                    color: 'green'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Left,
-                        handles: [
-                            {
-                                id: 'input',
-                                type: 'target',
-                                handleType: 'input'
-                            }
-                        ]
-                    }
-                ]
-            }),
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'else-action',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 600,
-                    y: 300
-                },
-                display: {
-                    label: 'Else Action',
-                    subLabel: 'Execute if false',
-                    color: 'red'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Left,
-                        handles: [
-                            {
-                                id: 'input',
-                                type: 'target',
-                                handleType: 'input'
-                            }
-                        ]
-                    }
-                ]
-            }),
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'default-action',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 600,
-                    y: 500
-                },
-                display: {
-                    label: 'Default Case',
-                    subLabel: 'No match'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Left,
-                        handles: [
-                            {
-                                id: 'input',
-                                type: 'target',
-                                handleType: 'input'
-                            }
-                        ]
-                    }
-                ]
-            }),
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'case-0-action',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 600,
-                    y: 700
-                },
-                display: {
-                    label: 'Case 0',
-                    subLabel: 'Value = 0'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Left,
-                        handles: [
-                            {
-                                id: 'input',
-                                type: 'target',
-                                handleType: 'input'
-                            }
-                        ]
-                    }
-                ]
-            }),
-            (0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
-                id: 'case-1-action',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 600,
-                    y: 900
-                },
-                display: {
-                    label: 'Case 1',
-                    subLabel: 'Value = 1'
-                },
-                handleConfigurations: [
-                    {
-                        position: react_cjs_namespaceObject.Position.Left,
-                        handles: [
-                            {
-                                id: 'input',
-                                type: 'target',
-                                handleType: 'input'
-                            }
-                        ]
-                    }
-                ]
-            })
-        ], []);
-    const logicEdges = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: 'condition-to-if',
-                source: 'condition-input',
-                sourceHandle: 'output',
-                target: 'if-node',
-                targetHandle: 'input',
-                animated: true
-            },
-            {
-                id: 'if-to-then',
-                source: 'if-node',
-                sourceHandle: 'then',
-                target: 'then-action',
-                targetHandle: 'input',
-                style: {
-                    stroke: 'green'
-                }
-            },
-            {
-                id: 'if-to-else',
-                source: 'if-node',
-                sourceHandle: 'else',
-                target: 'else-action',
-                targetHandle: 'input',
-                style: {
-                    stroke: 'orange'
-                }
-            },
-            {
-                id: 'value-to-switch',
-                source: 'value-input',
-                sourceHandle: 'output',
-                target: 'switch-node',
-                targetHandle: 'input',
-                animated: true
-            },
-            {
-                id: 'switch-to-default',
-                source: 'switch-node',
-                sourceHandle: 'default',
-                target: 'default-action',
-                targetHandle: 'input'
-            },
-            {
-                id: 'switch-to-0',
-                source: 'switch-node',
-                sourceHandle: 'case-0',
-                target: 'case-0-action',
-                targetHandle: 'input',
-                style: {
-                    stroke: 'blue'
-                }
-            },
-            {
-                id: 'switch-to-1',
-                source: 'switch-node',
-                sourceHandle: 'case-1',
-                target: 'case-1-action',
-                targetHandle: 'input',
-                style: {
-                    stroke: 'purple'
-                }
-            }
-        ], []);
-    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
-        initialNodes: logicNodes,
-        initialEdges: logicEdges
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseCanvas_cjs_namespaceObject.BaseCanvas, {
-        ...canvasProps,
-        mode: "design",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
-                title: "Logic Flow Examples",
-                description: "IF and SWITCH nodes with ButtonHandles"
-            }),
-            /*#__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 Default = {
-    name: 'Default',
-    args: {
-        handles: [],
-        position: react_cjs_namespaceObject.Position.Top
-    },
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultStory, {})
-};
-const HandleConfiguration = {
-    name: 'Handle configuration',
-    args: {
-        handles: [],
-        position: react_cjs_namespaceObject.Position.Top
-    },
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(HandleConfigurationStory, {})
-};
-const LogicFlow = {
-    name: 'Logic flow',
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LogicFlowStory, {})
-};
-exports.Default = __webpack_exports__.Default;
-exports.HandleConfiguration = __webpack_exports__.HandleConfiguration;
-exports.LogicFlow = __webpack_exports__.LogicFlow;
-exports["default"] = __webpack_exports__["default"];
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "Default",
-    "HandleConfiguration",
-    "LogicFlow",
-    "default"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});