@uipath/apollo-react 3.70.2 → 3.70.3-pr482.0700da2

package/dist/canvas/components/CanvasTooltip.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@uipath/apollo-wind/components/ui/tooltip";
+import react, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { useTruncationDetection } from "../../material/components/ap-tooltip/useTruncationDetection.js";
+const HasTooltipProviderContext = /*#__PURE__*/ createContext(false);
+function CanvasTooltipProviderMarker({ children }) {
+    return /*#__PURE__*/ jsx(HasTooltipProviderContext.Provider, {
+        value: true,
+        children: children
+    });
+}
+function CanvasTooltip({ content, placement = 'top', smartTooltip = false, delay = false, isOpen, hide, children }) {
+    const childElement = useMemo(()=>/*#__PURE__*/ react.isValidElement(children) ? children : /*#__PURE__*/ jsx("span", {
+            children: children
+        }), [
+        children
+    ]);
+    const childElementRef = useRef(childElement);
+    childElementRef.current = childElement;
+    const childRef = useRef(null);
+    const truncationDetection = useTruncationDetection(childRef);
+    const isTruncated = smartTooltip ? truncationDetection.isTruncated : true;
+    const [hoverOpen, setHoverOpen] = useState(false);
+    const setChildRef = useCallback((node)=>{
+        childRef.current = node;
+        const childRefProp = childElementRef.current.props.ref;
+        if ('function' == typeof childRefProp) childRefProp(node);
+        else if (childRefProp && 'object' == typeof childRefProp) childRefProp.current = node;
+    }, []);
+    const handleMouseEnter = useCallback((e)=>{
+        truncationDetection.check();
+        const childProps = childElementRef.current.props;
+        childProps.onMouseEnter?.(e);
+    }, [
+        truncationDetection.check
+    ]);
+    const triggerWithSmartTooltipHandlers = useMemo(()=>/*#__PURE__*/ react.cloneElement(childElement, {
+            ref: setChildRef,
+            onMouseEnter: handleMouseEnter
+        }), [
+        childElement,
+        setChildRef,
+        handleMouseEnter
+    ]);
+    const triggerWithHandlers = smartTooltip ? triggerWithSmartTooltipHandlers : childElement;
+    const handleOpenChange = useCallback((nextOpen)=>{
+        if (nextOpen && smartTooltip) truncationDetection.check();
+        setHoverOpen(nextOpen);
+    }, [
+        smartTooltip,
+        truncationDetection.check
+    ]);
+    const isTooltipHidden = useMemo(()=>{
+        if (null != isOpen) return !isOpen;
+        if (null != hide) return hide;
+        if (smartTooltip && !isTruncated) return true;
+        return false;
+    }, [
+        isOpen,
+        hide,
+        smartTooltip,
+        isTruncated
+    ]);
+    const effectiveOpen = isTooltipHidden ? false : isOpen ?? hoverOpen;
+    const hasProvider = useContext(HasTooltipProviderContext);
+    const tooltip = /*#__PURE__*/ jsxs(Tooltip, {
+        open: effectiveOpen,
+        onOpenChange: handleOpenChange,
+        delayDuration: delay ? 700 : 200,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: triggerWithHandlers
+            }),
+            /*#__PURE__*/ jsx(TooltipPortal, {
+                children: /*#__PURE__*/ jsx(TooltipContent, {
+                    side: placement,
+                    className: "max-w-xs break-words",
+                    children: content
+                })
+            })
+        ]
+    });
+    if (hasProvider) return tooltip;
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 200,
+        skipDelayDuration: 100,
+        children: tooltip
+    });
+}
+export { CanvasTooltip, CanvasTooltipProviderMarker };

package/dist/canvas/components/CodedAgent/CodedAgentFlow.cjs

@@ -42,16 +42,17 @@ const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../icons/index.cjs");
 const external_layouts_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 NodeRegistryProvider_cjs_namespaceObject = require("../../core/NodeRegistryProvider.cjs");
 const external_types_cjs_namespaceObject = require("../../types.cjs");
 const d3_layout_cjs_namespaceObject = require("../../utils/coded-agents/d3-layout.cjs");
 const mermaid_parser_cjs_namespaceObject = require("../../utils/coded-agents/mermaid-parser.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const external_BaseCanvas_index_cjs_namespaceObject = require("../BaseCanvas/index.cjs");
 const BaseNode_cjs_namespaceObject = require("../BaseNode/BaseNode.cjs");
 const BaseNodeConfigContext_cjs_namespaceObject = require("../BaseNode/BaseNodeConfigContext.cjs");
 const external_CanvasPositionControls_cjs_namespaceObject = require("../CanvasPositionControls.cjs");
-const NodeRegistryProvider_cjs_namespaceObject = require("../../core/NodeRegistryProvider.cjs");
 const external_coded_agent_manifest_cjs_namespaceObject = require("./coded-agent.manifest.cjs");
 const LAYOUT_SPACING = [
     110,
@@ -138,18 +139,18 @@ const createCodedAgentNodeWrapper = (translations = external_types_cjs_namespace
             nodeData.hasRunning
         ]);
         const statusAdornment = (0, external_react_namespaceObject.useMemo)(()=>{
-            if (nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                name: "error",
-                size: "16px",
+            if (nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                icon: "circle-alert",
+                size: 16,
                 color: "var(--uix-canvas-error-icon)"
             });
-            if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                name: "check_circle",
-                size: "16px",
+            if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                icon: "circle-check",
+                size: 16,
                 color: "var(--uix-canvas-success-icon)"
             });
-            if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
-                size: 20
+            if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {
+                size: "sm"
             });
         }, [
             nodeData.hasError,
@@ -215,39 +216,39 @@ const CodedResourceNodeElement = /*#__PURE__*/ (0, external_react_namespaceObjec
     ]);
     const resourceIcon = (0, external_react_namespaceObject.useMemo)(()=>{
         const resourceType = nodeData.type || '';
-        if ('tool' === resourceType || label.includes('tool') || label.includes('function')) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-            name: "build",
-            size: "40px"
+        if ('tool' === resourceType || label.includes('tool') || label.includes('function')) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+            icon: "wrench",
+            size: 40
         });
-        if ('context' === resourceType || label.includes('context') || label.includes('knowledge')) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-            name: "account_tree",
-            size: "40px"
+        if ('context' === resourceType || label.includes('context') || label.includes('knowledge')) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+            icon: "network",
+            size: 40
         });
-        if ('escalation' === resourceType || label.includes('escalation') || label.includes('human')) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-            name: "person",
-            size: "40px"
+        if ('escalation' === resourceType || label.includes('escalation') || label.includes('human')) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+            icon: "user",
+            size: 40
         });
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-            name: "chat",
-            size: "40px"
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+            icon: "message-circle",
+            size: 40
         });
     }, [
         label,
         nodeData.type
     ]);
     const statusAdornment = (0, external_react_namespaceObject.useMemo)(()=>{
-        if (nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-            name: "error",
-            size: "16px",
+        if (nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+            icon: "circle-alert",
+            size: 16,
             color: "var(--uix-canvas-error-icon)"
         });
-        if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-            name: "check_circle",
-            size: "16px",
+        if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+            icon: "circle-check",
+            size: 16,
             color: "var(--uix-canvas-success-icon)"
         });
-        if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
-            size: 13
+        if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {
+            size: "sm"
         });
     }, [
         nodeData.hasError,
@@ -301,8 +302,8 @@ const CodedResourceNodeElement = /*#__PURE__*/ (0, external_react_namespaceObjec
                 })
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TextContainer, {
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                    color: "var(--uix-canvas-foreground-de-emp)",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-foreground-muted",
                     children: nodeData.label
                 })
             })
@@ -353,9 +354,8 @@ const CodedFlowNodeElement = /*#__PURE__*/ (0, external_react_namespaceObject.me
                     })
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TextContainer, {
-                    children: /*#__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: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-xs text-foreground-muted",
                         children: nodeData.label
                     })
                 })
@@ -467,8 +467,8 @@ const CodedAgentFlowInner = (props)=>{
         reactFlowInstance
     ]);
     if (parseError) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CenteredDiv, {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_material_index_cjs_namespaceObject.ApTypography, {
-            color: "var(--uix-canvas-error)",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+            className: "text-error",
             children: [
                 "Error: ",
                 parseError
@@ -476,16 +476,10 @@ const CodedAgentFlowInner = (props)=>{
         })
     });
     if (isLoading) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CenteredDiv, {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-            color: "var(--uix-canvas-foreground)",
-            children: "Loading..."
-        })
+        children: "Loading..."
     });
     if (0 === nodes.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CenteredDiv, {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-            color: "var(--uix-canvas-foreground)",
-            children: agentNodeTranslations.noDataToDisplay
-        })
+        children: agentNodeTranslations.noDataToDisplay
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         style: {
@@ -514,9 +508,8 @@ const CodedAgentFlowInner = (props)=>{
                                 w: 20,
                                 h: 20
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeSBold,
-                                color: "var(--uix-canvas-foreground)",
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-xs font-bold",
                                 children: "Coded Agent"
                             })
                         ]

package/dist/canvas/components/CodedAgent/CodedAgentFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodedAgentFlow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CodedAgent/CodedAgentFlow.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAEZ,KAAK,YAAY,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAE7F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AA2UnD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;IACnD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC5B;AAqKD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,KAAG,YAQ3D,CAAC"}
+{"version":3,"file":"CodedAgentFlow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CodedAgent/CodedAgentFlow.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAEZ,KAAK,YAAY,EAMlB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAG7F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAoUnD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;IACnD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC5B;AAsJD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,KAAG,YAQ3D,CAAC"}

package/dist/canvas/components/CodedAgent/CodedAgentFlow.js

@@ -1,19 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
-import { FontVariantToken, Spacing } from "@uipath/apollo-core";
+import { Spacing } from "@uipath/apollo-core";
 import { AgentIcon, CodedAgentIcon } from "../../icons/index.js";
 import { Row } from "../../layouts/index.js";
 import { BaseEdge, Panel, Position, ReactFlowProvider, getSimpleBezierPath, useEdgesState, useNodesState, useReactFlow } from "../../xyflow/react.js";
-import { ApCircularProgress, ApIcon, ApTypography } from "../../../material/index.js";
+import { Spinner } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { NodeRegistryProvider } from "../../core/NodeRegistryProvider.js";
 import { DefaultCanvasTranslations, DefaultCodedAgentNodeTranslations } from "../../types.js";
 import { d3HierarchyLayout } from "../../utils/coded-agents/d3-layout.js";
 import { mermaidToReactFlow } from "../../utils/coded-agents/mermaid-parser.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { BaseCanvas } from "../BaseCanvas/index.js";
 import { BaseNode } from "../BaseNode/BaseNode.js";
 import { BaseNodeOverrideConfigProvider } from "../BaseNode/BaseNodeConfigContext.js";
 import { CanvasPositionControls } from "../CanvasPositionControls.js";
-import { NodeRegistryProvider } from "../../core/NodeRegistryProvider.js";
 import { codedAgentManifest } from "./coded-agent.manifest.js";
 const LAYOUT_SPACING = [
     110,
@@ -100,18 +101,18 @@ const createCodedAgentNodeWrapper = (translations = DefaultCodedAgentNodeTransla
             nodeData.hasRunning
         ]);
         const statusAdornment = useMemo(()=>{
-            if (nodeData.hasError) return /*#__PURE__*/ jsx(ApIcon, {
-                name: "error",
-                size: "16px",
+            if (nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "circle-alert",
+                size: 16,
                 color: "var(--uix-canvas-error-icon)"
             });
-            if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ jsx(ApIcon, {
-                name: "check_circle",
-                size: "16px",
+            if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "circle-check",
+                size: 16,
                 color: "var(--uix-canvas-success-icon)"
             });
-            if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ jsx(ApCircularProgress, {
-                size: 20
+            if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ jsx(Spinner, {
+                size: "sm"
             });
         }, [
             nodeData.hasError,
@@ -177,39 +178,39 @@ const CodedResourceNodeElement = /*#__PURE__*/ memo(({ data, selected, id, ...no
     ]);
     const resourceIcon = useMemo(()=>{
         const resourceType = nodeData.type || '';
-        if ('tool' === resourceType || label.includes('tool') || label.includes('function')) return /*#__PURE__*/ jsx(ApIcon, {
-            name: "build",
-            size: "40px"
+        if ('tool' === resourceType || label.includes('tool') || label.includes('function')) return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "wrench",
+            size: 40
         });
-        if ('context' === resourceType || label.includes('context') || label.includes('knowledge')) return /*#__PURE__*/ jsx(ApIcon, {
-            name: "account_tree",
-            size: "40px"
+        if ('context' === resourceType || label.includes('context') || label.includes('knowledge')) return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "network",
+            size: 40
         });
-        if ('escalation' === resourceType || label.includes('escalation') || label.includes('human')) return /*#__PURE__*/ jsx(ApIcon, {
-            name: "person",
-            size: "40px"
+        if ('escalation' === resourceType || label.includes('escalation') || label.includes('human')) return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "user",
+            size: 40
         });
-        return /*#__PURE__*/ jsx(ApIcon, {
-            name: "chat",
-            size: "40px"
+        return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "message-circle",
+            size: 40
         });
     }, [
         label,
         nodeData.type
     ]);
     const statusAdornment = useMemo(()=>{
-        if (nodeData.hasError) return /*#__PURE__*/ jsx(ApIcon, {
-            name: "error",
-            size: "16px",
+        if (nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "circle-alert",
+            size: 16,
             color: "var(--uix-canvas-error-icon)"
         });
-        if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ jsx(ApIcon, {
-            name: "check_circle",
-            size: "16px",
+        if (nodeData.hasSuccess && !nodeData.hasError) return /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: "circle-check",
+            size: 16,
             color: "var(--uix-canvas-success-icon)"
         });
-        if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ jsx(ApCircularProgress, {
-            size: 13
+        if (nodeData.hasRunning && !nodeData.hasError && !nodeData.hasSuccess) return /*#__PURE__*/ jsx(Spinner, {
+            size: "sm"
         });
     }, [
         nodeData.hasError,
@@ -263,8 +264,8 @@ const CodedResourceNodeElement = /*#__PURE__*/ memo(({ data, selected, id, ...no
                 })
             }),
             /*#__PURE__*/ jsx(TextContainer, {
-                children: /*#__PURE__*/ jsx(ApTypography, {
-                    color: "var(--uix-canvas-foreground-de-emp)",
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "text-foreground-muted",
                     children: nodeData.label
                 })
             })
@@ -315,9 +316,8 @@ const CodedFlowNodeElement = /*#__PURE__*/ memo(({ data, selected, id, ...nodePr
                     })
                 }),
                 /*#__PURE__*/ jsx(TextContainer, {
-                    children: /*#__PURE__*/ jsx(ApTypography, {
-                        variant: FontVariantToken.fontSizeS,
-                        color: "var(--uix-canvas-foreground-de-emp)",
+                    children: /*#__PURE__*/ jsx("span", {
+                        className: "text-xs text-foreground-muted",
                         children: nodeData.label
                     })
                 })
@@ -429,8 +429,8 @@ const CodedAgentFlowInner = (props)=>{
         reactFlowInstance
     ]);
     if (parseError) return /*#__PURE__*/ jsx(CenteredDiv, {
-        children: /*#__PURE__*/ jsxs(ApTypography, {
-            color: "var(--uix-canvas-error)",
+        children: /*#__PURE__*/ jsxs("span", {
+            className: "text-error",
             children: [
                 "Error: ",
                 parseError
@@ -438,16 +438,10 @@ const CodedAgentFlowInner = (props)=>{
         })
     });
     if (isLoading) return /*#__PURE__*/ jsx(CenteredDiv, {
-        children: /*#__PURE__*/ jsx(ApTypography, {
-            color: "var(--uix-canvas-foreground)",
-            children: "Loading..."
-        })
+        children: "Loading..."
     });
     if (0 === nodes.length) return /*#__PURE__*/ jsx(CenteredDiv, {
-        children: /*#__PURE__*/ jsx(ApTypography, {
-            color: "var(--uix-canvas-foreground)",
-            children: agentNodeTranslations.noDataToDisplay
-        })
+        children: agentNodeTranslations.noDataToDisplay
     });
     return /*#__PURE__*/ jsx("div", {
         style: {
@@ -476,9 +470,8 @@ const CodedAgentFlowInner = (props)=>{
                                 w: 20,
                                 h: 20
                             }),
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                variant: FontVariantToken.fontSizeSBold,
-                                color: "var(--uix-canvas-foreground)",
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-xs font-bold",
                                 children: "Coded Agent"
                             })
                         ]

package/dist/canvas/components/ExecutionStatusIcon/ExecutionStatusIcon.cjs

@@ -28,8 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     getExecutionStatusColor: ()=>getExecutionStatusColor
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 function getExecutionStatusColor(status) {
     switch(status){
         case 'NotExecuted':
@@ -74,53 +75,55 @@ function ExecutionStatusIcon({ status, size = 16 }) {
         const color = getExecutionStatusColor(status);
         switch(status){
             case 'InProgress':
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApCircularProgress, {
-                    size: size,
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {
+                    size: "sm",
                     style: {
-                        backgroundColor: 'transparent'
+                        backgroundColor: 'transparent',
+                        width: size,
+                        height: size
                     }
                 });
             case 'Completed':
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                    color: color,
-                    name: "check_circle",
-                    size: `${size}px`
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "circle-check",
+                    size: size,
+                    color: color
                 });
             case 'Paused':
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                    color: color,
-                    name: "pause",
-                    size: `${size}px`
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "circle-pause",
+                    size: size,
+                    color: color
                 });
             case 'Warning':
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                    color: color,
-                    name: "warning",
-                    size: `${size}px`
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "triangle-alert",
+                    size: size,
+                    color: color
                 });
             case 'Failed':
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                    color: color,
-                    name: "error",
-                    size: `${size}px`
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "circle-alert",
+                    size: size,
+                    color: color
                 });
             case 'Terminated':
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                    color: color,
-                    name: "close",
-                    size: `${size}px`
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "circle-x",
+                    size: size,
+                    color: color
                 });
             case 'Cancelled':
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                    color: color,
-                    name: "block",
-                    size: `${size}px`
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "circle-stop",
+                    size: size,
+                    color: color
                 });
             case 'NotExecuted':
-                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                    color: color,
-                    name: "hourglass_empty",
-                    size: `${size}px`
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "circle-dashed",
+                    size: size,
+                    color: color
                 });
             default:
                 return null;

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

@@ -1 +1 @@
-{"version":3,"file":"ExecutionStatusIcon.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ExecutionStatusIcon/ExecutionStatusIcon.tsx"],"names":[],"mappings":"AAGA,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAsC1E;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,IAAS,GACV,EAAE;IACD,MAAM,CAAC,EACH,YAAY,GACZ,WAAW,GACX,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,aAAa,GACb,YAAY,GACZ,SAAS,GACT,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,kDAyBA"}
+{"version":3,"file":"ExecutionStatusIcon.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ExecutionStatusIcon/ExecutionStatusIcon.tsx"],"names":[],"mappings":"AAIA,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAsC1E;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,IAAS,GACV,EAAE;IACD,MAAM,CAAC,EACH,YAAY,GACZ,WAAW,GACX,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,aAAa,GACb,YAAY,GACZ,SAAS,GACT,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,kDA8BA"}