@uipath/apollo-react 3.70.3 → 3.71.0-pr482.83f8e96

package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Column } from "../../layouts/index.js";
 import { useReactFlow } from "../../xyflow/react.js";
-import { ApIcon, ApIconButton } from "../../../material/components/index.js";
+import { Button } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useState } from "react";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { CheckboxField, NumberField, SelectField, TextField } from "./fields/index.js";
 import { useNodeConfiguration, useNodeSelection } from "./hooks/index.js";
@@ -103,12 +104,15 @@ const NodePropertiesPanel_NodePropertiesPanel = /*#__PURE__*/ memo(function({ no
         }, section.id);
     };
     if (!selectedNode || !schema || !internalNode) return null;
-    const headerActions = /*#__PURE__*/ jsx(ApIconButton, {
-        color: "secondary",
+    const headerActions = /*#__PURE__*/ jsx(Button, {
+        variant: "ghost",
+        size: "icon",
+        className: "h-6 w-6",
         onClick: handleTogglePin,
         title: isPinned ? 'Unpin panel' : 'Pin panel',
-        children: /*#__PURE__*/ jsx(ApIcon, {
-            name: isPinned ? 'unfold_less' : 'unfold_more'
+        children: /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: isPinned ? 'shrink' : 'expand',
+            size: 16
         })
     });
     return /*#__PURE__*/ jsx(FloatingCanvasPanel, {

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

@@ -32,20 +32,14 @@ const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.style
 const external_TaskContent_cjs_namespaceObject = require("./TaskContent.cjs");
 const external_TaskMenu_cjs_namespaceObject = require("./TaskMenu.cjs");
 const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMenuItems, onTaskClick, onTaskPlay })=>{
-    const [isMenuOpen, setIsMenuOpen] = (0, external_react_namespaceObject.useState)(false);
     const taskRef = (0, external_react_namespaceObject.useRef)(null);
     const menuRef = (0, external_react_namespaceObject.useRef)(null);
     const handleClick = (0, external_react_namespaceObject.useCallback)((e)=>{
-        if (isMenuOpen) return;
         onTaskClick(e, task.id);
     }, [
-        isMenuOpen,
         onTaskClick,
         task.id
     ]);
-    const handleMenuOpenChange = (0, external_react_namespaceObject.useCallback)((isOpen)=>{
-        setIsMenuOpen(isOpen);
-    }, []);
     const handleContextMenu = (0, external_react_namespaceObject.useCallback)((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
@@ -67,9 +61,7 @@ const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMen
             getContextMenuItems && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                getContextMenuItems: getContextMenuItems,
-                onMenuOpenChange: handleMenuOpenChange,
-                taskRef: taskRef
+                getContextMenuItems: getContextMenuItems
             })
         ]
     });

package/dist/canvas/components/StageNode/AdhocTask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdhocTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/AdhocTask.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI3E,UAAU,kBAAkB;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAqDD,eAAO,MAAM,aAAa,2HA5CvB,kBAAkB,6CA4CoC,CAAC"}
+{"version":3,"file":"AdhocTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/AdhocTask.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI3E,UAAU,kBAAkB;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAyCD,eAAO,MAAM,aAAa,2HAhCvB,kBAAkB,6CAgCoC,CAAC"}

package/dist/canvas/components/StageNode/AdhocTask.js

@@ -1,23 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useRef, useState } from "react";
+import { memo, useCallback, useRef } from "react";
 import { StageTask } from "./StageNode.styles.js";
 import { TaskContent } from "./TaskContent.js";
 import { TaskMenu } from "./TaskMenu.js";
 const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMenuItems, onTaskClick, onTaskPlay })=>{
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
     const taskRef = useRef(null);
     const menuRef = useRef(null);
     const handleClick = useCallback((e)=>{
-        if (isMenuOpen) return;
         onTaskClick(e, task.id);
     }, [
-        isMenuOpen,
         onTaskClick,
         task.id
     ]);
-    const handleMenuOpenChange = useCallback((isOpen)=>{
-        setIsMenuOpen(isOpen);
-    }, []);
     const handleContextMenu = useCallback((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
@@ -39,9 +33,7 @@ const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMen
             getContextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                getContextMenuItems: getContextMenuItems,
-                onMenuOpenChange: handleMenuOpenChange,
-                taskRef: taskRef
+                getContextMenuItems: getContextMenuItems
             })
         ]
     });

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

@@ -30,28 +30,22 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const sortable_namespaceObject = require("@dnd-kit/sortable");
 const utilities_namespaceObject = require("@dnd-kit/utilities");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const index_cjs_namespaceObject = require("../../../material/index.cjs");
 const external_react_namespaceObject = require("react");
-const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
+const index_cjs_namespaceObject = require("../../icons/index.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_TaskContent_cjs_namespaceObject = require("./TaskContent.cjs");
 const external_TaskMenu_cjs_namespaceObject = require("./TaskMenu.cjs");
 const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, isDragDisabled, projectedDepth })=>{
-    const [isMenuOpen, setIsMenuOpen] = (0, external_react_namespaceObject.useState)(false);
     const zoom = (0, react_cjs_namespaceObject.useStore)((s)=>s.transform[2]);
     const taskRef = (0, external_react_namespaceObject.useRef)(null);
     const menuRef = (0, external_react_namespaceObject.useRef)(null);
     const handleClick = (0, external_react_namespaceObject.useCallback)((e)=>{
-        if (isMenuOpen) return;
         onTaskClick(e, task.id);
     }, [
-        isMenuOpen,
         onTaskClick,
         task.id
     ]);
-    const handleMenuOpenChange = (0, external_react_namespaceObject.useCallback)((isOpen)=>{
-        setIsMenuOpen(isOpen);
-    }, []);
     const handleContextMenu = (0, external_react_namespaceObject.useCallback)((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
@@ -116,7 +110,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
                 task: task,
                 taskExecution: taskExecution
             }),
-            task.hasEntryCondition && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+            task.hasEntryCondition && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: "Entry condition",
                 placement: "top",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -126,7 +120,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
                         color: 'var(--color-icon-default)',
                         flexShrink: 0
                     },
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.EntryConditionIcon, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.EntryConditionIcon, {
                         w: 20,
                         h: 20
                     })
@@ -135,9 +129,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
             getContextMenuItems && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                getContextMenuItems: handleGetContextMenuItems,
-                onMenuOpenChange: handleMenuOpenChange,
-                taskRef: taskRef
+                getContextMenuItems: handleGetContextMenuItems
             })
         ]
     });

package/dist/canvas/components/StageNode/DraggableTask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAkJhE,eAAO,MAAM,aAAa,kLA5HvB,kBAAkB,6CA4HoC,CAAC"}
+{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAmIhE,eAAO,MAAM,aAAa,kLA7GvB,kBAAkB,6CA6GoC,CAAC"}

package/dist/canvas/components/StageNode/DraggableTask.js

@@ -2,28 +2,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useStore } from "../../xyflow/react.js";
-import { ApTooltip } from "../../../material/index.js";
-import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
 import { EntryConditionIcon } from "../../icons/index.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
 import { INDENTATION_WIDTH, StageTask, StageTaskDragPlaceholder, StageTaskDragPlaceholderWrapper, StageTaskWrapper } from "./StageNode.styles.js";
 import { TaskContent } from "./TaskContent.js";
 import { TaskMenu } from "./TaskMenu.js";
 const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, isDragDisabled, projectedDepth })=>{
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
     const zoom = useStore((s)=>s.transform[2]);
     const taskRef = useRef(null);
     const menuRef = useRef(null);
     const handleClick = useCallback((e)=>{
-        if (isMenuOpen) return;
         onTaskClick(e, task.id);
     }, [
-        isMenuOpen,
         onTaskClick,
         task.id
     ]);
-    const handleMenuOpenChange = useCallback((isOpen)=>{
-        setIsMenuOpen(isOpen);
-    }, []);
     const handleContextMenu = useCallback((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
@@ -88,7 +82,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
                 task: task,
                 taskExecution: taskExecution
             }),
-            task.hasEntryCondition && /*#__PURE__*/ jsx(ApTooltip, {
+            task.hasEntryCondition && /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: "Entry condition",
                 placement: "top",
                 children: /*#__PURE__*/ jsx("span", {
@@ -107,9 +101,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, g
             getContextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                getContextMenuItems: handleGetContextMenuItems,
-                onMenuOpenChange: handleMenuOpenChange,
-                taskRef: taskRef
+                getContextMenuItems: handleGetContextMenuItems
             })
         ]
     });

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

@@ -32,12 +32,14 @@ const sortable_namespaceObject = require("@dnd-kit/sortable");
 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 apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
 const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
 const external_NodeContextMenu_index_cjs_namespaceObject = require("../NodeContextMenu/index.cjs");
@@ -63,13 +65,13 @@ const CHIP_ICONS = {
         w: apollo_core_namespaceObject.Icon.IconXs,
         h: apollo_core_namespaceObject.Icon.IconXs
     }),
-    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseExit]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-        name: "close",
-        size: apollo_core_namespaceObject.Icon.IconXs
+    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseExit]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+        icon: "x",
+        size: 16
     }),
-    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseCompletion]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-        name: "check-mark",
-        size: apollo_core_namespaceObject.Icon.IconXs
+    [external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseCompletion]: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+        icon: "check",
+        size: 16
     })
 };
 const StageNodeInner = (props)=>{
@@ -511,10 +513,9 @@ const StageNodeInner = (props)=>{
                                         flex: 1,
                                         minW: 0,
                                         children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                                variant: isStageTitleEditing ? apollo_core_namespaceObject.FontVariantToken.fontSizeM : apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
-                                                color: "var(--uix-canvas-foreground)",
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                className: (0, apollo_wind_namespaceObject.cn)('text-sm', !isStageTitleEditing && 'font-bold'),
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                                                     content: label,
                                                     placement: "top",
                                                     delay: true,
@@ -537,9 +538,8 @@ const StageNodeInner = (props)=>{
                                                     })
                                                 })
                                             }),
-                                            stageDuration && /*#__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)",
+                                            stageDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                className: "text-xs text-foreground-muted",
                                                 children: stageDuration
                                             }),
                                             stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageHeaderChipsRow, {
@@ -553,13 +553,13 @@ const StageNodeInner = (props)=>{
                                                         },
                                                         children: [
                                                             CHIP_ICONS[chip.type],
-                                                            void 0 !== chip.count && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                                            void 0 !== chip.count && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                className: "text-xs",
                                                                 children: chip.count
                                                             })
                                                         ]
                                                     }, chip.type);
-                                                    if (chip.tooltip) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                                    if (chip.tooltip) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                                                         placement: "bottom",
                                                         content: chip.tooltip,
                                                         children: button
@@ -576,31 +576,34 @@ const StageNodeInner = (props)=>{
                                 align: "start",
                                 py: apollo_core_namespaceObject.Padding.PadS,
                                 children: [
-                                    status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                    status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                                         content: statusLabel,
                                         placement: "top",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                                            size: "small",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                            variant: "ghost",
+                                            size: "icon",
+                                            className: "h-6 w-6",
+                                            "aria-label": statusLabel,
                                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
                                                 status: status,
                                                 size: 20
                                             })
                                         })
                                     }),
-                                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                                         content: addTaskLabel,
                                         placement: "top",
                                         hide: addTaskLoading,
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                                                onClick: handleTaskAddClick,
-                                                size: "small",
-                                                label: addTaskLabel,
-                                                disabled: addTaskLoading,
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                                                    name: "add",
-                                                    size: "20px"
-                                                })
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                            variant: "ghost",
+                                            size: "icon",
+                                            className: "h-6 w-6",
+                                            onClick: handleTaskAddClick,
+                                            "aria-label": addTaskLabel,
+                                            disabled: addTaskLoading,
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                                icon: "plus",
+                                                size: 20
                                             })
                                         })
                                     })
@@ -611,17 +614,16 @@ const StageNodeInner = (props)=>{
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageContent, {
                         children: 0 === tasks.length && 0 === adhocTasks.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
                             py: 2,
-                            children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApLink, {
+                            children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                variant: "link",
                                 onClick: addTaskLoading ? void 0 : handleTaskAddClick,
-                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
                                 style: {
                                     maxWidth: 'fit-content',
                                     pointerEvents: addTaskLoading ? 'none' : void 0
                                 },
                                 children: defaultContent
-                            }) : /*#__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)",
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-xs text-foreground-muted",
                                 children: defaultContent
                             })
                         }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
@@ -650,8 +652,8 @@ const StageNodeInner = (props)=>{
                                                                 isParallel: isParallel,
                                                                 children: [
                                                                     isParallel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageParallelLabel, {
-                                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                                                            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
+                                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                            className: "text-xs",
                                                                             children: "Parallel"
                                                                         })
                                                                     }),
@@ -692,9 +694,8 @@ const StageNodeInner = (props)=>{
                                     },
                                     children: [
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageAdhocHeaderSection, {
-                                            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: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                className: "text-xs font-bold text-foreground-muted",
                                                 children: "Ad hoc tasks"
                                             })
                                         }),

package/dist/canvas/components/StageNode/StageNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAwxBxD,eAAO,MAAM,SAAS,8CApwBS,cAAc,6CAowBA,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA8vBxD,eAAO,MAAM,SAAS,8CA1uBS,cAAc,6CA0uBA,CAAC"}

package/dist/canvas/components/StageNode/StageNode.js

@@ -1,15 +1,17 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { FontVariantToken, Icon, Padding, Spacing } from "@uipath/apollo-core";
+import { Icon, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
 import { Position, useStore, useStoreApi } from "../../xyflow/react.js";
-import { ApIcon, ApIconButton, ApLink, ApTooltip, ApTypography } from "../../../material/index.js";
+import { Button, cn } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
 import { GroupModificationType, moveGroupDown, moveGroupUp } from "../../utils/GroupModificationUtils.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { NodeContextMenu } from "../NodeContextMenu/index.js";
@@ -35,13 +37,13 @@ const CHIP_ICONS = {
         w: Icon.IconXs,
         h: Icon.IconXs
     }),
-    [StageHeaderChipType.CaseExit]: /*#__PURE__*/ jsx(ApIcon, {
-        name: "close",
-        size: Icon.IconXs
+    [StageHeaderChipType.CaseExit]: /*#__PURE__*/ jsx(CanvasIcon, {
+        icon: "x",
+        size: 16
     }),
-    [StageHeaderChipType.CaseCompletion]: /*#__PURE__*/ jsx(ApIcon, {
-        name: "check-mark",
-        size: Icon.IconXs
+    [StageHeaderChipType.CaseCompletion]: /*#__PURE__*/ jsx(CanvasIcon, {
+        icon: "check",
+        size: 16
     })
 };
 const StageNodeInner = (props)=>{
@@ -483,10 +485,9 @@ const StageNodeInner = (props)=>{
                                         flex: 1,
                                         minW: 0,
                                         children: [
-                                            /*#__PURE__*/ jsx(ApTypography, {
-                                                variant: isStageTitleEditing ? FontVariantToken.fontSizeM : FontVariantToken.fontSizeMBold,
-                                                color: "var(--uix-canvas-foreground)",
-                                                children: /*#__PURE__*/ jsx(ApTooltip, {
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: cn('text-sm', !isStageTitleEditing && 'font-bold'),
+                                                children: /*#__PURE__*/ jsx(CanvasTooltip, {
                                                     content: label,
                                                     placement: "top",
                                                     delay: true,
@@ -509,9 +510,8 @@ const StageNodeInner = (props)=>{
                                                     })
                                                 })
                                             }),
-                                            stageDuration && /*#__PURE__*/ jsx(ApTypography, {
-                                                variant: FontVariantToken.fontSizeS,
-                                                color: "var(--uix-canvas-foreground-de-emp)",
+                                            stageDuration && /*#__PURE__*/ jsx("span", {
+                                                className: "text-xs text-foreground-muted",
                                                 children: stageDuration
                                             }),
                                             stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ jsx(StageHeaderChipsRow, {
@@ -525,13 +525,13 @@ const StageNodeInner = (props)=>{
                                                         },
                                                         children: [
                                                             CHIP_ICONS[chip.type],
-                                                            void 0 !== chip.count && /*#__PURE__*/ jsx(ApTypography, {
-                                                                variant: FontVariantToken.fontSizeS,
+                                                            void 0 !== chip.count && /*#__PURE__*/ jsx("span", {
+                                                                className: "text-xs",
                                                                 children: chip.count
                                                             })
                                                         ]
                                                     }, chip.type);
-                                                    if (chip.tooltip) return /*#__PURE__*/ jsx(ApTooltip, {
+                                                    if (chip.tooltip) return /*#__PURE__*/ jsx(CanvasTooltip, {
                                                         placement: "bottom",
                                                         content: chip.tooltip,
                                                         children: button
@@ -548,31 +548,34 @@ const StageNodeInner = (props)=>{
                                 align: "start",
                                 py: Padding.PadS,
                                 children: [
-                                    status && /*#__PURE__*/ jsx(ApTooltip, {
+                                    status && /*#__PURE__*/ jsx(CanvasTooltip, {
                                         content: statusLabel,
                                         placement: "top",
-                                        children: /*#__PURE__*/ jsx(ApIconButton, {
-                                            size: "small",
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            variant: "ghost",
+                                            size: "icon",
+                                            className: "h-6 w-6",
+                                            "aria-label": statusLabel,
                                             children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
                                                 status: status,
                                                 size: 20
                                             })
                                         })
                                     }),
-                                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(ApTooltip, {
+                                    (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(CanvasTooltip, {
                                         content: addTaskLabel,
                                         placement: "top",
                                         hide: addTaskLoading,
-                                        children: /*#__PURE__*/ jsx("span", {
-                                            children: /*#__PURE__*/ jsx(ApIconButton, {
-                                                onClick: handleTaskAddClick,
-                                                size: "small",
-                                                label: addTaskLabel,
-                                                disabled: addTaskLoading,
-                                                children: /*#__PURE__*/ jsx(ApIcon, {
-                                                    name: "add",
-                                                    size: "20px"
-                                                })
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            variant: "ghost",
+                                            size: "icon",
+                                            className: "h-6 w-6",
+                                            onClick: handleTaskAddClick,
+                                            "aria-label": addTaskLabel,
+                                            disabled: addTaskLoading,
+                                            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                                icon: "plus",
+                                                size: 20
                                             })
                                         })
                                     })
@@ -583,17 +586,16 @@ const StageNodeInner = (props)=>{
                     /*#__PURE__*/ jsx(StageContent, {
                         children: 0 === tasks.length && 0 === adhocTasks.length ? /*#__PURE__*/ jsx(Column, {
                             py: 2,
-                            children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ jsx(ApLink, {
+                            children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ jsx(Button, {
+                                variant: "link",
                                 onClick: addTaskLoading ? void 0 : handleTaskAddClick,
-                                variant: FontVariantToken.fontSizeS,
                                 style: {
                                     maxWidth: 'fit-content',
                                     pointerEvents: addTaskLoading ? 'none' : void 0
                                 },
                                 children: defaultContent
-                            }) : /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeS,
-                                color: "var(--uix-canvas-foreground-de-emp)",
+                            }) : /*#__PURE__*/ jsx("span", {
+                                className: "text-xs text-foreground-muted",
                                 children: defaultContent
                             })
                         }) : /*#__PURE__*/ jsxs(Fragment, {
@@ -622,8 +624,8 @@ const StageNodeInner = (props)=>{
                                                                 isParallel: isParallel,
                                                                 children: [
                                                                     isParallel && /*#__PURE__*/ jsx(StageParallelLabel, {
-                                                                        children: /*#__PURE__*/ jsx(ApTypography, {
-                                                                            variant: FontVariantToken.fontSizeS,
+                                                                        children: /*#__PURE__*/ jsx("span", {
+                                                                            className: "text-xs",
                                                                             children: "Parallel"
                                                                         })
                                                                     }),
@@ -664,9 +666,8 @@ const StageNodeInner = (props)=>{
                                     },
                                     children: [
                                         /*#__PURE__*/ jsx(StageAdhocHeaderSection, {
-                                            children: /*#__PURE__*/ jsx(ApTypography, {
-                                                variant: FontVariantToken.fontSizeSBold,
-                                                color: "var(--uix-canvas-foreground-de-emp)",
+                                            children: /*#__PURE__*/ jsx("span", {
+                                                className: "text-xs font-bold text-foreground-muted",
                                                 children: "Ad hoc tasks"
                                             })
                                         }),

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

@@ -34,7 +34,19 @@ const StageNodeWrapper = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(
         selected: selected,
         dragging: dragging,
         width: width,
-        ...data
+        ...data,
+        menuItems: [
+            {
+                id: 'menu-item-1',
+                label: 'Menu Item 1',
+                onClick: ()=>alert('Menu Item 1 clicked')
+            },
+            {
+                id: 'menu-item-2',
+                label: 'Menu Item 2',
+                onClick: ()=>alert('Menu Item 2 clicked')
+            }
+        ]
     }));
 exports.StageNodeWrapper = __webpack_exports__.StageNodeWrapper;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/canvas/components/StageNode/StageNode.stories.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageNode.stories.utils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAG1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,KAAK,qBAAqB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IACrD,IAAI,EAAE,kBAAkB,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,gFACe,qBAAqB,6CAGhE,CAAC"}
+{"version":3,"file":"StageNode.stories.utils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAG1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,KAAK,qBAAqB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IACrD,IAAI,EAAE,kBAAkB,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,gFACe,qBAAqB,6CAwBhE,CAAC"}