@uipath/apollo-react 3.70.2 → 3.70.3-pr482.0415bcf

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.cjs

@@ -28,10 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../../icons/index.cjs");
-const external_utils_index_cjs_namespaceObject = require("../../../utils/index.cjs");
 const external_layouts_index_cjs_namespaceObject = require("../../../layouts/index.cjs");
+const external_utils_index_cjs_namespaceObject = require("../../../utils/index.cjs");
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
-const components_index_cjs_namespaceObject = require("../../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
 const external_types_cjs_namespaceObject = require("../../../types.cjs");
 const BaseNode_cjs_namespaceObject = require("../../BaseNode/BaseNode.cjs");
@@ -135,15 +134,15 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
         let icon;
         switch(data.type){
             case 'context':
-                icon = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                    name: "description",
-                    size: "40px"
+                icon = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
+                    icon: "file-text",
+                    size: 40
                 });
                 break;
             case 'escalation':
-                icon = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                    name: "person",
-                    size: "40px"
+                icon = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
+                    icon: "user",
+                    size: 40
                 });
                 break;
             case 'memorySpace':
@@ -189,7 +188,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
             if ('0.0.1' === suggestionGroupVersion) return null;
             const rejectAction = {
                 id: 'reject-suggestion',
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.NodeIcon, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                     icon: "X",
                     size: 14
                 }),
@@ -199,7 +198,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
             };
             const acceptAction = {
                 id: 'accept-suggestion',
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.NodeIcon, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                     icon: "check",
                     size: 14
                 }),
@@ -241,7 +240,7 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
         };
         const removeAction = {
             id: 'remove',
-            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.NodeIcon, {
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
                 icon: "trash",
                 size: 14
             }),
@@ -366,10 +365,9 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
         ], []);
     const breakpointAdornment = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!hasBreakpoint) return;
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-            variant: "normal",
-            name: "circle",
-            size: "14px",
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
+            icon: "circle",
+            size: 14,
             color: "#cc3d45"
         });
     }, [
@@ -383,10 +381,9 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
     ]);
     const guardrailsAdornment = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!hasGuardrails) return;
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-            variant: "outlined",
-            name: "gpp_good",
-            size: "18px",
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
+            icon: "shield-check",
+            size: 18,
             color: "var(--uix-canvas-icon-default)"
         });
     }, [
@@ -394,19 +391,18 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
     ]);
     const suggestionAdornment = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!isSuggestion) return;
-        let iconName = 'swap_horizontal_circle';
+        let iconName = 'arrow-left-right';
         let color = 'var(--uix-canvas-warning-icon)';
         if ('add' === suggestionType) {
-            iconName = 'add_circle';
+            iconName = 'circle-plus';
             color = 'var(--uix-canvas-success-icon)';
         } else if ('delete' === suggestionType) {
-            iconName = 'remove_circle';
+            iconName = 'circle-minus';
             color = 'var(--uix-canvas-error-icon)';
         }
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-            variant: "normal",
-            name: iconName,
-            size: "18px",
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
+            icon: iconName,
+            size: 18,
             color: color
         });
     }, [

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/ResourceNode.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAE9B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,gBAAgB,CAAC;AAexB,UAAU,iBAAkB,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IAClE,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC9E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACnF,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAClF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,0RAoBpB,iBAAiB,6CAycrB,CAAC"}
+{"version":3,"file":"ResourceNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/ResourceNode.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAE9B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,gBAAgB,CAAC;AAcxB,UAAU,iBAAkB,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IAClE,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC9E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACnF,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAClF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,0RAoBpB,iBAAiB,6CAkcrB,CAAC"}

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.js

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { A2aIcon, McpIcon, MemoryIcon } from "../../../icons/index.js";
-import { NodeIcon } from "../../../utils/index.js";
 import { Row } from "../../../layouts/index.js";
+import { CanvasIcon } from "../../../utils/index.js";
 import { Position } from "../../../xyflow/react.js";
-import { ApIcon } from "../../../../material/components/index.js";
 import { memo, useCallback, useMemo } from "react";
 import { DefaultSuggestionTranslations } from "../../../types.js";
 import { BaseNode } from "../../BaseNode/BaseNode.js";
@@ -107,15 +106,15 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
         let icon;
         switch(data.type){
             case 'context':
-                icon = /*#__PURE__*/ jsx(ApIcon, {
-                    name: "description",
-                    size: "40px"
+                icon = /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "file-text",
+                    size: 40
                 });
                 break;
             case 'escalation':
-                icon = /*#__PURE__*/ jsx(ApIcon, {
-                    name: "person",
-                    size: "40px"
+                icon = /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "user",
+                    size: 40
                 });
                 break;
             case 'memorySpace':
@@ -161,7 +160,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
             if ('0.0.1' === suggestionGroupVersion) return null;
             const rejectAction = {
                 id: 'reject-suggestion',
-                icon: /*#__PURE__*/ jsx(NodeIcon, {
+                icon: /*#__PURE__*/ jsx(CanvasIcon, {
                     icon: "X",
                     size: 14
                 }),
@@ -171,7 +170,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
             };
             const acceptAction = {
                 id: 'accept-suggestion',
-                icon: /*#__PURE__*/ jsx(NodeIcon, {
+                icon: /*#__PURE__*/ jsx(CanvasIcon, {
                     icon: "check",
                     size: 14
                 }),
@@ -213,7 +212,7 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
         };
         const removeAction = {
             id: 'remove',
-            icon: /*#__PURE__*/ jsx(NodeIcon, {
+            icon: /*#__PURE__*/ jsx(CanvasIcon, {
                 icon: "trash",
                 size: 14
             }),
@@ -338,10 +337,9 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
         ], []);
     const breakpointAdornment = useMemo(()=>{
         if (!hasBreakpoint) return;
-        return /*#__PURE__*/ jsx(ApIcon, {
-            variant: "normal",
-            name: "circle",
-            size: "14px",
+        return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "circle",
+            size: 14,
             color: "#cc3d45"
         });
     }, [
@@ -355,10 +353,9 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
     ]);
     const guardrailsAdornment = useMemo(()=>{
         if (!hasGuardrails) return;
-        return /*#__PURE__*/ jsx(ApIcon, {
-            variant: "outlined",
-            name: "gpp_good",
-            size: "18px",
+        return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "shield-check",
+            size: 18,
             color: "var(--uix-canvas-icon-default)"
         });
     }, [
@@ -366,19 +363,18 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
     ]);
     const suggestionAdornment = useMemo(()=>{
         if (!isSuggestion) return;
-        let iconName = 'swap_horizontal_circle';
+        let iconName = 'arrow-left-right';
         let color = 'var(--uix-canvas-warning-icon)';
         if ('add' === suggestionType) {
-            iconName = 'add_circle';
+            iconName = 'circle-plus';
             color = 'var(--uix-canvas-success-icon)';
         } else if ('delete' === suggestionType) {
-            iconName = 'remove_circle';
+            iconName = 'circle-minus';
             color = 'var(--uix-canvas-error-icon)';
         }
-        return /*#__PURE__*/ jsx(ApIcon, {
-            variant: "normal",
-            name: iconName,
-            size: "18px",
+        return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: iconName,
+            size: 18,
             color: color
         });
     }, [

package/dist/canvas/components/BaseCanvas/CanvasProviders.cjs

@@ -27,6 +27,8 @@ __webpack_require__.d(__webpack_exports__, {
     CanvasProviders: ()=>CanvasProviders
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const tooltip_namespaceObject = require("@uipath/apollo-wind/components/ui/tooltip");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_BaseCanvasModeProvider_cjs_namespaceObject = require("./BaseCanvasModeProvider.cjs");
 const external_CanvasThemeContext_cjs_namespaceObject = require("./CanvasThemeContext.cjs");
 const external_ConnectedHandlesContext_cjs_namespaceObject = require("./ConnectedHandlesContext.cjs");
@@ -34,13 +36,19 @@ const external_SelectionStateContext_cjs_namespaceObject = require("./SelectionS
 function CanvasProviders({ nodes, edges, mode, isDarkMode, children }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasThemeContext_cjs_namespaceObject.CanvasThemeProvider, {
         isDarkMode: isDarkMode,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ConnectedHandlesContext_cjs_namespaceObject.ConnectedHandlesProvider, {
-            edges: edges,
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvasModeProvider_cjs_namespaceObject.BaseCanvasModeProvider, {
-                mode: mode,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SelectionStateContext_cjs_namespaceObject.SelectionStateProvider, {
-                    nodes: nodes,
-                    children: children
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_namespaceObject.TooltipProvider, {
+            delayDuration: 200,
+            skipDelayDuration: 100,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltipProviderMarker, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ConnectedHandlesContext_cjs_namespaceObject.ConnectedHandlesProvider, {
+                    edges: edges,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvasModeProvider_cjs_namespaceObject.BaseCanvasModeProvider, {
+                        mode: mode,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SelectionStateContext_cjs_namespaceObject.SelectionStateProvider, {
+                            nodes: nodes,
+                            children: children
+                        })
+                    })
                 })
             })
         })

package/dist/canvas/components/BaseCanvas/CanvasProviders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasProviders.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/CanvasProviders.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAM1D,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAQD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,GACT,EAAE,oBAAoB,2CAUtB"}
+{"version":3,"file":"CanvasProviders.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/CanvasProviders.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAM1D,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAQD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,GACT,EAAE,oBAAoB,2CActB"}

package/dist/canvas/components/BaseCanvas/CanvasProviders.js

@@ -1,4 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import { TooltipProvider } from "@uipath/apollo-wind/components/ui/tooltip";
+import { CanvasTooltipProviderMarker } from "../CanvasTooltip.js";
 import { BaseCanvasModeProvider } from "./BaseCanvasModeProvider.js";
 import { CanvasThemeProvider } from "./CanvasThemeContext.js";
 import { ConnectedHandlesProvider } from "./ConnectedHandlesContext.js";
@@ -6,13 +8,19 @@ import { SelectionStateProvider } from "./SelectionStateContext.js";
 function CanvasProviders({ nodes, edges, mode, isDarkMode, children }) {
     return /*#__PURE__*/ jsx(CanvasThemeProvider, {
         isDarkMode: isDarkMode,
-        children: /*#__PURE__*/ jsx(ConnectedHandlesProvider, {
-            edges: edges,
-            children: /*#__PURE__*/ jsx(BaseCanvasModeProvider, {
-                mode: mode,
-                children: /*#__PURE__*/ jsx(SelectionStateProvider, {
-                    nodes: nodes,
-                    children: children
+        children: /*#__PURE__*/ jsx(TooltipProvider, {
+            delayDuration: 200,
+            skipDelayDuration: 100,
+            children: /*#__PURE__*/ jsx(CanvasTooltipProviderMarker, {
+                children: /*#__PURE__*/ jsx(ConnectedHandlesProvider, {
+                    edges: edges,
+                    children: /*#__PURE__*/ jsx(BaseCanvasModeProvider, {
+                        mode: mode,
+                        children: /*#__PURE__*/ jsx(SelectionStateProvider, {
+                            nodes: nodes,
+                            children: children
+                        })
+                    })
                 })
             })
         })

package/dist/canvas/components/BaseNode/BaseNode.cjs

@@ -29,7 +29,6 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../utils/index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const external_core_index_cjs_namespaceObject = require("../../core/index.cjs");
@@ -343,10 +342,10 @@ const BaseNodeComponent = (props)=>{
                     shape: "square",
                     height: height,
                     width: width ?? height,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                        color: "var(--uix-canvas-error-icon)",
-                        name: "error",
-                        size: "32px"
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "circle-alert",
+                        size: 32,
+                        color: "var(--uix-canvas-error-icon)"
                     })
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseTextContainer, {
@@ -394,7 +393,7 @@ const BaseNodeComponent = (props)=>{
                 "aria-busy": data.loading || void 0,
                 children: [
                     data.loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseSkeletonIcon, {
-                        variant: "rectangle",
+                        "data-testid": "skeleton-icon",
                         shape: displayShape,
                         nodeHeight: displayFooter ? void 0 : height,
                         nodeWidth: displayFooter ? void 0 : width ?? height

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAmChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAgiB1B,eAAO,MAAM,QAAQ,8CA1hBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CA0hBhB,CAAC"}
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAkChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AA+hB1B,eAAO,MAAM,QAAQ,8CAzhBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAyhBhB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.js

@@ -1,13 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../../utils/index.js";
 import { Position, useReactFlow, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
-import { ApIcon } from "../../../material/components/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DEFAULT_NODE_SIZE } from "../../constants.js";
 import { useNodeTypeRegistry } from "../../core/index.js";
 import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
 import { resolveAdornments } from "../../utils/adornment-resolver.js";
-import { getIcon } from "../../utils/icon-registry.js";
+import { CanvasIcon, getIcon } from "../../utils/icon-registry.js";
 import { resolveDisplay, resolveHandles } from "../../utils/manifest-resolver.js";
 import { resolveToolbar } from "../../utils/toolbar-resolver.js";
 import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
@@ -315,10 +314,10 @@ const BaseNodeComponent = (props)=>{
                     shape: "square",
                     height: height,
                     width: width ?? height,
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        color: "var(--uix-canvas-error-icon)",
-                        name: "error",
-                        size: "32px"
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "circle-alert",
+                        size: 32,
+                        color: "var(--uix-canvas-error-icon)"
                     })
                 }),
                 /*#__PURE__*/ jsxs(BaseTextContainer, {
@@ -366,7 +365,7 @@ const BaseNodeComponent = (props)=>{
                 "aria-busy": data.loading || void 0,
                 children: [
                     data.loading ? /*#__PURE__*/ jsx(BaseSkeletonIcon, {
-                        variant: "rectangle",
+                        "data-testid": "skeleton-icon",
                         shape: displayShape,
                         nodeHeight: displayFooter ? void 0 : height,
                         nodeWidth: displayFooter ? void 0 : width ?? height

package/dist/canvas/components/BaseNode/BaseNode.styles.cjs

@@ -46,7 +46,7 @@ __webpack_require__.d(__webpack_exports__, {
 const react_namespaceObject = require("@emotion/react");
 const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
-const index_cjs_namespaceObject = require("../../../material/components/ap-skeleton/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const execution_status_cjs_namespaceObject = require("../../styles/execution-status.cjs");
 const GRID_UNIT = 16;
 const NODE_HEIGHT_DEFAULT = 6 * GRID_UNIT;
@@ -277,13 +277,16 @@ const BaseHeader = styled_default().div`
     `}
   line-height: 1.4;
   margin-bottom: 2px;
+  overflow: hidden;
   ${({ shape })=>'rectangle' === shape ? (0, react_namespaceObject.css)`
           width: 100%;
           white-space: nowrap;
-          overflow: hidden;
           text-overflow: ellipsis;
         ` : (0, react_namespaceObject.css)`
           word-break: break-word;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
         `}
 `;
 const BaseSubHeader = styled_default().div`
@@ -291,13 +294,15 @@ const BaseSubHeader = styled_default().div`
   color: var(--uix-canvas-foreground-de-emp);
   line-height: 1.3;
   word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
   ${({ shape })=>'rectangle' === shape ? (0, react_namespaceObject.css)`
           width: 100%;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
-          overflow: hidden;
-        ` : ''}
+        ` : (0, react_namespaceObject.css)`
+          -webkit-line-clamp: 5;
+`}
 `;
 const EditableLabel = styled_default().textarea`
   resize: none;
@@ -365,7 +370,7 @@ const BaseBadgeSlot = styled_default().div`
     }
 }}
 `;
-const BaseSkeletonIcon = styled_default()(index_cjs_namespaceObject.ApSkeleton, {
+const BaseSkeletonIcon = styled_default()(apollo_wind_namespaceObject.Skeleton, {
     shouldForwardProp: (prop)=>'shape' !== prop && 'nodeHeight' !== prop && 'nodeWidth' !== prop
 })`
   flex-grow: 0;

package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts

@@ -65,7 +65,7 @@ export declare const BaseBadgeSlot: import("@emotion/styled").StyledComponent<{
     position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     shape?: NodeShape;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BaseSkeletonIcon: import("@emotion/styled").StyledComponent<import("../../..").ApSkeletonProps & import("react").RefAttributes<HTMLDivElement> & {
+export declare const BaseSkeletonIcon: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 } & {
     shape?: NodeShape;

package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA4GtD,eAAO,MAAM,aAAa;;;;eACb,OAAO;sBACA,MAAM;YAChB,SAAS;sBACC,MAAM;uBACL,MAAM;uBACN,MAAM;qBACR,MAAM;YACf,MAAM;aACL,MAAM;gBACH,OAAO;oBACH,aAAa;yGAuE9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;YAClB,MAAM;sBACI,MAAM;YAChB,SAAS;aACR,MAAM;YACP,MAAM;yGA0Cf,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;uBAAmC,OAAO;YAAU,SAAS;yGAiC1F,CAAC;AAEF,eAAO,MAAM,UAAU;;;;YAAwB,SAAS;sBAAoB,MAAM;yGAwBjF,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAAwB,SAAS;yGAe1D,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAChB,SAAS;sBACC,MAAM;aACf,QAAQ,GAAG,SAAS;2HA+B9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAkBjC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cACd,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc;YAC3D,SAAS;yGAsBlB,CAAC;AAKF,eAAO,MAAM,gBAAgB;;;YAGnB,SAAS;iBACJ,MAAM;gBACP,MAAM;UAcnB,CAAC"}
+{"version":3,"file":"BaseNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA4GtD,eAAO,MAAM,aAAa;;;;eACb,OAAO;sBACA,MAAM;YAChB,SAAS;sBACC,MAAM;uBACL,MAAM;uBACN,MAAM;qBACR,MAAM;YACf,MAAM;aACL,MAAM;gBACH,OAAO;oBACH,aAAa;yGAuE9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;YAClB,MAAM;sBACI,MAAM;YAChB,SAAS;aACR,MAAM;YACP,MAAM;yGA0Cf,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;uBAAmC,OAAO;YAAU,SAAS;yGAiC1F,CAAC;AAEF,eAAO,MAAM,UAAU;;;;YAAwB,SAAS;sBAAoB,MAAM;yGA2BjF,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAAwB,SAAS;yGAiB1D,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAChB,SAAS;sBACC,MAAM;aACf,QAAQ,GAAG,SAAS;2HA+B9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAkBjC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cACd,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc;YAC3D,SAAS;yGAsBlB,CAAC;AAKF,eAAO,MAAM,gBAAgB;;;YAGnB,SAAS;iBACJ,MAAM;gBACP,MAAM;UAcnB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.styles.js

@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { ApSkeleton } from "../../../material/components/ap-skeleton/index.js";
+import { Skeleton } from "@uipath/apollo-wind";
 import { getExecutionStatusBorder, pulseAnimation } from "../../styles/execution-status.js";
 const GRID_UNIT = 16;
 const NODE_HEIGHT_DEFAULT = 6 * GRID_UNIT;
@@ -231,13 +231,16 @@ const BaseHeader = styled.div`
     `}
   line-height: 1.4;
   margin-bottom: 2px;
+  overflow: hidden;
   ${({ shape })=>'rectangle' === shape ? css`
           width: 100%;
           white-space: nowrap;
-          overflow: hidden;
           text-overflow: ellipsis;
         ` : css`
           word-break: break-word;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
         `}
 `;
 const BaseSubHeader = styled.div`
@@ -245,13 +248,15 @@ const BaseSubHeader = styled.div`
   color: var(--uix-canvas-foreground-de-emp);
   line-height: 1.3;
   word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
   ${({ shape })=>'rectangle' === shape ? css`
           width: 100%;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
-          overflow: hidden;
-        ` : ''}
+        ` : css`
+          -webkit-line-clamp: 5;
+`}
 `;
 const EditableLabel = styled.textarea`
   resize: none;
@@ -319,7 +324,7 @@ const BaseBadgeSlot = styled.div`
     }
 }}
 `;
-const BaseSkeletonIcon = styled(ApSkeleton, {
+const BaseSkeletonIcon = styled(Skeleton, {
     shouldForwardProp: (prop)=>'shape' !== prop && 'nodeHeight' !== prop && 'nodeWidth' !== prop
 })`
   flex-grow: 0;

package/dist/canvas/components/BaseNode/NodeLabel.cjs

@@ -27,12 +27,12 @@ __webpack_require__.d(__webpack_exports__, {
     NodeLabel: ()=>NodeLabel
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_BaseNode_styles_cjs_namespaceObject = require("./BaseNode.styles.cjs");
 const ConditionalTooltip = ({ content, children })=>{
     if (!content) return children;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
         delay: true,
         placement: "top",
         content: content,

package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAS9C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAwMD,eAAO,MAAM,SAAS,mLAzKnB,cAAc,6CAyK+B,CAAC"}
+{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAwMD,eAAO,MAAM,SAAS,mLAzKnB,cAAc,6CAyK+B,CAAC"}

package/dist/canvas/components/BaseNode/NodeLabel.js

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ApTooltip } from "../../../material/components/index.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { CanvasTooltip } from "../CanvasTooltip.js";
 import { BaseHeader, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder } from "./BaseNode.styles.js";
 const ConditionalTooltip = ({ content, children })=>{
     if (!content) return children;
-    return /*#__PURE__*/ jsx(ApTooltip, {
+    return /*#__PURE__*/ jsx(CanvasTooltip, {
         delay: true,
         placement: "top",
         content: content,

package/dist/canvas/components/BlankCanvasNode/BlankCanvasNode.cjs

@@ -28,10 +28,10 @@ __webpack_require__.d(__webpack_exports__, {
 });
 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 canvasStore_cjs_namespaceObject = require("../../stores/canvasStore.cjs");
-const external_AddNodePanel_index_cjs_namespaceObject = require("../AddNodePanel/index.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
+const index_cjs_namespaceObject = require("../AddNodePanel/index.cjs");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
 const external_BlankCanvasNode_styles_cjs_namespaceObject = require("./BlankCanvasNode.styles.cjs");
 const BlankCanvasNode = (props)=>{
@@ -66,9 +66,9 @@ const BlankCanvasNode = (props)=>{
                 selected: selected,
                 ref: nodeRef,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BlankCanvasNode_styles_cjs_namespaceObject.IconWrapper, {
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                        name: "add",
-                        size: "48px",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "plus",
+                        size: 48,
                         color: "var(--uix-canvas-foreground-de-emp)"
                     })
                 })
@@ -83,7 +83,7 @@ const BlankCanvasNode = (props)=>{
                 nodeId: id,
                 placement: "right-start",
                 offset: 20,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AddNodePanel_index_cjs_namespaceObject.AddNodePanel, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.AddNodePanel, {
                     onNodeSelect: (item)=>handleNodeSelect(item.data),
                     onClose: handleClosePanel
                 })

package/dist/canvas/components/BlankCanvasNode/BlankCanvasNode.js

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useStoreApi } from "../../xyflow/react.js";
-import { ApIcon } from "../../../material/components/index.js";
 import { useCallback, useRef } from "react";
 import { selectAddNode, selectRemoveNode, useCanvasStore } from "../../stores/canvasStore.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { AddNodePanel } from "../AddNodePanel/index.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { Header, IconWrapper, NodeContainer, TextContainer } from "./BlankCanvasNode.styles.js";
@@ -38,9 +38,9 @@ const BlankCanvasNode = (props)=>{
                 selected: selected,
                 ref: nodeRef,
                 children: /*#__PURE__*/ jsx(IconWrapper, {
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        name: "add",
-                        size: "48px",
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "plus",
+                        size: 48,
                         color: "var(--uix-canvas-foreground-de-emp)"
                     })
                 })