@uipath/apollo-react 3.71.0 → 4.0.0

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"}

package/dist/canvas/components/ExecutionStatusIcon/ExecutionStatusIcon.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { ApCircularProgress, ApIcon } from "../../../material/components/index.js";
+import { Spinner } from "@uipath/apollo-wind";
 import { useMemo } from "react";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 function getExecutionStatusColor(status) {
     switch(status){
         case 'NotExecuted':
@@ -45,53 +46,55 @@ function ExecutionStatusIcon({ status, size = 16 }) {
         const color = getExecutionStatusColor(status);
         switch(status){
             case 'InProgress':
-                return /*#__PURE__*/ jsx(ApCircularProgress, {
-                    size: size,
+                return /*#__PURE__*/ jsx(Spinner, {
+                    size: "sm",
                     style: {
-                        backgroundColor: 'transparent'
+                        backgroundColor: 'transparent',
+                        width: size,
+                        height: size
                     }
                 });
             case 'Completed':
-                return /*#__PURE__*/ jsx(ApIcon, {
-                    color: color,
-                    name: "check_circle",
-                    size: `${size}px`
+                return /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "circle-check",
+                    size: size,
+                    color: color
                 });
             case 'Paused':
-                return /*#__PURE__*/ jsx(ApIcon, {
-                    color: color,
-                    name: "pause",
-                    size: `${size}px`
+                return /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "circle-pause",
+                    size: size,
+                    color: color
                 });
             case 'Warning':
-                return /*#__PURE__*/ jsx(ApIcon, {
-                    color: color,
-                    name: "warning",
-                    size: `${size}px`
+                return /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "triangle-alert",
+                    size: size,
+                    color: color
                 });
             case 'Failed':
-                return /*#__PURE__*/ jsx(ApIcon, {
-                    color: color,
-                    name: "error",
-                    size: `${size}px`
+                return /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "circle-alert",
+                    size: size,
+                    color: color
                 });
             case 'Terminated':
-                return /*#__PURE__*/ jsx(ApIcon, {
-                    color: color,
-                    name: "close",
-                    size: `${size}px`
+                return /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "circle-x",
+                    size: size,
+                    color: color
                 });
             case 'Cancelled':
-                return /*#__PURE__*/ jsx(ApIcon, {
-                    color: color,
-                    name: "block",
-                    size: `${size}px`
+                return /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "circle-stop",
+                    size: size,
+                    color: color
                 });
             case 'NotExecuted':
-                return /*#__PURE__*/ jsx(ApIcon, {
-                    color: color,
-                    name: "hourglass_empty",
-                    size: `${size}px`
+                return /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "circle-dashed",
+                    size: size,
+                    color: color
                 });
             default:
                 return null;

package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.cjs

@@ -38,10 +38,10 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
-const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../layouts/index.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 icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const PanelHeader = styled_default().div`
   border-bottom: 1px solid var(--uix-canvas-border-de-emp);
   padding: 8px 16px;
@@ -87,9 +87,8 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
                     justify: "between",
                     align: "center",
                     children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                            color: "var(--uix-canvas-foreground)",
-                            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeLBold,
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-base font-bold",
                             children: title
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
@@ -97,11 +96,15 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
                             align: "center",
                             children: [
                                 headerActions,
-                                onClose && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                                    color: "secondary",
+                                onClose && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                    variant: "ghost",
+                                    size: "icon",
+                                    className: "h-6 w-6",
+                                    "aria-label": "Close",
                                     onClick: onClose,
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                                        name: "close"
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                        icon: "x",
+                                        size: 16
                                     })
                                 })
                             ]

package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelChrome.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/PanelChrome.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmCvC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,gBAAgB,2CAoClB"}
+{"version":3,"file":"PanelChrome.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/PanelChrome.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCvC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,gBAAgB,2CAqClB"}