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

package/README.md

@@ -165,6 +165,8 @@ import { Breadcrumb } from '@uipath/apollo-react/canvas/controls';
 import { ReactFlow, Panel } from '@uipath/apollo-react/canvas/xyflow/react';
 ```
 
+> Canvas components are styled with [apollo-wind](../apollo-wind) (Tailwind CSS v4). See the [Canvas Tailwind Integration Guide](./src/canvas/README.md) for how to wire up the required CSS in standard and Shadow DOM apps.
+
 ### ApChat Component
 
 ```typescript

package/dist/canvas/components/AddNodePanel/AddNodePreview.cjs

@@ -39,8 +39,8 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const PreviewContainer = styled_default().div`
   width: ${(props)=>props.width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE}px;
   height: ${(props)=>props.height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE}px;
@@ -56,15 +56,15 @@ const PreviewContainer = styled_default().div`
   opacity: ${(props)=>props.selected ? 0.8 : 0.6};
 `;
 const getIcon = (iconName)=>{
-    if (iconName) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-        color: "var(--uix-canvas-foreground-de-emp)",
-        name: iconName,
-        size: "40px"
+    if (iconName) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+        icon: iconName,
+        size: 40,
+        color: "var(--uix-canvas-foreground-de-emp)"
     });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-        color: "var(--uix-canvas-foreground-de-emp)",
-        name: "more_horiz",
-        size: "40px"
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+        icon: "ellipsis",
+        size: 40,
+        color: "var(--uix-canvas-foreground-de-emp)"
     });
 };
 const AddNodePreview = ({ selected, data, width, height })=>{

package/dist/canvas/components/AddNodePanel/AddNodePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAU,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAE5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,QAAQ,CAAC;IAC/B,oBAAoB,CAAC,EAAE,QAAQ,CAAC;CACjC;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsC9C,CAAC"}
+{"version":3,"file":"AddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAU,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,QAAQ,CAAC;IAC/B,oBAAoB,CAAC,EAAE,QAAQ,CAAC;CACjC;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsC9C,CAAC"}

package/dist/canvas/components/AddNodePanel/AddNodePreview.js

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { Handle, Position } from "../../xyflow/react.js";
-import { ApIcon } from "../../../material/components/index.js";
 import { DEFAULT_NODE_SIZE } from "../../constants.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 const PreviewContainer = styled.div`
   width: ${(props)=>props.width ?? DEFAULT_NODE_SIZE}px;
   height: ${(props)=>props.height ?? DEFAULT_NODE_SIZE}px;
@@ -18,15 +18,15 @@ const PreviewContainer = styled.div`
   opacity: ${(props)=>props.selected ? 0.8 : 0.6};
 `;
 const getIcon = (iconName)=>{
-    if (iconName) return /*#__PURE__*/ jsx(ApIcon, {
-        color: "var(--uix-canvas-foreground-de-emp)",
-        name: iconName,
-        size: "40px"
+    if (iconName) return /*#__PURE__*/ jsx(CanvasIcon, {
+        icon: iconName,
+        size: 40,
+        color: "var(--uix-canvas-foreground-de-emp)"
     });
-    return /*#__PURE__*/ jsx(ApIcon, {
-        color: "var(--uix-canvas-foreground-de-emp)",
-        name: "more_horiz",
-        size: "40px"
+    return /*#__PURE__*/ jsx(CanvasIcon, {
+        icon: "ellipsis",
+        size: 40,
+        color: "var(--uix-canvas-foreground-de-emp)"
     });
 };
 const AddNodePreview = ({ selected, data, width, height })=>{

package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.cjs

@@ -27,39 +27,37 @@ __webpack_require__.d(__webpack_exports__, {
     SuggestionGroupPanel: ()=>SuggestionGroupPanel
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const material_namespaceObject = require("@mui/material");
 const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../../layouts/index.cjs");
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
-const external_material_index_cjs_namespaceObject = require("../../../../material/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const RejectAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
-        variant: "tertiary",
-        size: "small",
-        label: "Reject all",
-        startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-            variant: "outlined",
-            name: "close"
-        }),
+const external_constants_cjs_namespaceObject = require("../../../constants.cjs");
+const icon_registry_cjs_namespaceObject = require("../../../utils/icon-registry.cjs");
+const RejectAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
+        variant: "ghost",
+        size: "sm",
         onClick: ()=>onClick(suggestionGroup.id),
-        sx: compact ? {
-            fontSize: '0.75rem',
-            minWidth: 'auto'
-        } : void 0
+        className: compact ? 'text-xs min-w-0' : void 0,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                icon: "x",
+                size: 16
+            }),
+            "Reject all"
+        ]
     });
-const AcceptAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
-        variant: "primary",
-        size: "small",
-        label: "Accept all",
-        startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-            variant: "outlined",
-            name: "check"
-        }),
+const AcceptAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
+        size: "sm",
         onClick: ()=>onClick(suggestionGroup.id),
-        sx: compact ? {
-            fontSize: '0.75rem',
-            minWidth: 'auto'
-        } : void 0
+        className: compact ? 'text-xs min-w-0' : void 0,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                icon: "check",
+                size: 16
+            }),
+            "Accept all"
+        ]
     });
 const Divider = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         style: {
@@ -71,7 +69,7 @@ const Divider = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
 const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious, compact })=>{
     const [isHoveringUp, setIsHoveringUp] = (0, external_react_namespaceObject.useState)(false);
     const [isHoveringDown, setIsHoveringDown] = (0, external_react_namespaceObject.useState)(false);
-    const iconSize = compact ? '16px' : '20px';
+    const iconSize = compact ? 16 : 20;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         style: {
             display: 'flex',
@@ -80,31 +78,36 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
             minWidth: compact ? '80px' : '100px'
         },
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
                 onMouseEnter: ()=>setIsHoveringUp(true),
                 onMouseLeave: ()=>setIsHoveringUp(false),
                 onClick: onNavigatePrevious,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                    name: "keyboard_arrow_up",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "chevron-up",
                     color: isHoveringUp ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
                     size: iconSize
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_material_index_cjs_namespaceObject.ApTypography, {
-                variant: compact ? apollo_core_namespaceObject.FontVariantToken.fontSizeSBold : apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
-                color: "var(--uix-canvas-foreground-de-emp)",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                className: (0, apollo_wind_namespaceObject.cn)('font-bold text-foreground-muted', compact ? 'text-xs' : 'text-sm'),
                 children: [
                     currentIndex + 1,
                     " of ",
                     total
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
                 onMouseEnter: ()=>setIsHoveringDown(true),
                 onMouseLeave: ()=>setIsHoveringDown(false),
                 onClick: onNavigateNext,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                    name: "keyboard_arrow_down",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "chevron-down",
                     color: isHoveringDown ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
                     size: iconSize
                 })
@@ -113,10 +116,8 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
     });
 };
 const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, currentIndex = 0, onNavigateNext, onNavigatePrevious })=>{
-    const theme = (0, material_namespaceObject.useTheme)();
     const canvasWidth = (0, react_cjs_namespaceObject.useStore)((state)=>state.width);
-    const smBreakpoint = theme.breakpoints.values.sm;
-    const isCompact = canvasWidth < smBreakpoint;
+    const isCompact = canvasWidth < external_constants_cjs_namespaceObject.CANVAS_COMPACT_BREAKPOINT;
     const nonStandaloneSuggestions = suggestionGroup?.suggestions.filter((s)=>!s.isStandalone) ?? [];
     const placeholderCount = nonStandaloneSuggestions.length;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {

package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestionGroupPanel.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAuGD,eAAO,MAAM,oBAAoB,GAAI,kGAOlC,yBAAyB,4CA2D3B,CAAC"}
+{"version":3,"file":"SuggestionGroupPanel.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AA2GD,eAAO,MAAM,oBAAoB,GAAI,kGAOlC,yBAAyB,4CAyD3B,CAAC"}

package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.js

@@ -1,37 +1,35 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-import { FontVariantToken, Spacing } from "@uipath/apollo-core";
+import { Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../../layouts/index.js";
 import { useStore } from "../../../xyflow/react.js";
-import { ApButton, ApIcon, ApIconButton, ApTypography } from "../../../../material/index.js";
+import { Button, cn } from "@uipath/apollo-wind";
 import { useState } from "react";
-const RejectAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ jsx(ApButton, {
-        variant: "tertiary",
-        size: "small",
-        label: "Reject all",
-        startIcon: /*#__PURE__*/ jsx(ApIcon, {
-            variant: "outlined",
-            name: "close"
-        }),
+import { CANVAS_COMPACT_BREAKPOINT } from "../../../constants.js";
+import { CanvasIcon } from "../../../utils/icon-registry.js";
+const RejectAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ jsxs(Button, {
+        variant: "ghost",
+        size: "sm",
         onClick: ()=>onClick(suggestionGroup.id),
-        sx: compact ? {
-            fontSize: '0.75rem',
-            minWidth: 'auto'
-        } : void 0
+        className: compact ? 'text-xs min-w-0' : void 0,
+        children: [
+            /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "x",
+                size: 16
+            }),
+            "Reject all"
+        ]
     });
-const AcceptAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ jsx(ApButton, {
-        variant: "primary",
-        size: "small",
-        label: "Accept all",
-        startIcon: /*#__PURE__*/ jsx(ApIcon, {
-            variant: "outlined",
-            name: "check"
-        }),
+const AcceptAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ jsxs(Button, {
+        size: "sm",
         onClick: ()=>onClick(suggestionGroup.id),
-        sx: compact ? {
-            fontSize: '0.75rem',
-            minWidth: 'auto'
-        } : void 0
+        className: compact ? 'text-xs min-w-0' : void 0,
+        children: [
+            /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "check",
+                size: 16
+            }),
+            "Accept all"
+        ]
     });
 const Divider = ()=>/*#__PURE__*/ jsx("div", {
         style: {
@@ -43,7 +41,7 @@ const Divider = ()=>/*#__PURE__*/ jsx("div", {
 const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious, compact })=>{
     const [isHoveringUp, setIsHoveringUp] = useState(false);
     const [isHoveringDown, setIsHoveringDown] = useState(false);
-    const iconSize = compact ? '16px' : '20px';
+    const iconSize = compact ? 16 : 20;
     return /*#__PURE__*/ jsxs("div", {
         style: {
             display: 'flex',
@@ -52,31 +50,36 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
             minWidth: compact ? '80px' : '100px'
         },
         children: [
-            /*#__PURE__*/ jsx(ApIconButton, {
+            /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
                 onMouseEnter: ()=>setIsHoveringUp(true),
                 onMouseLeave: ()=>setIsHoveringUp(false),
                 onClick: onNavigatePrevious,
-                children: /*#__PURE__*/ jsx(ApIcon, {
-                    name: "keyboard_arrow_up",
+                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "chevron-up",
                     color: isHoveringUp ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
                     size: iconSize
                 })
             }),
-            /*#__PURE__*/ jsxs(ApTypography, {
-                variant: compact ? FontVariantToken.fontSizeSBold : FontVariantToken.fontSizeMBold,
-                color: "var(--uix-canvas-foreground-de-emp)",
+            /*#__PURE__*/ jsxs("span", {
+                className: cn('font-bold text-foreground-muted', compact ? 'text-xs' : 'text-sm'),
                 children: [
                     currentIndex + 1,
                     " of ",
                     total
                 ]
             }),
-            /*#__PURE__*/ jsx(ApIconButton, {
+            /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
                 onMouseEnter: ()=>setIsHoveringDown(true),
                 onMouseLeave: ()=>setIsHoveringDown(false),
                 onClick: onNavigateNext,
-                children: /*#__PURE__*/ jsx(ApIcon, {
-                    name: "keyboard_arrow_down",
+                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "chevron-down",
                     color: isHoveringDown ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
                     size: iconSize
                 })
@@ -85,10 +88,8 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
     });
 };
 const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, currentIndex = 0, onNavigateNext, onNavigatePrevious })=>{
-    const theme = useTheme();
     const canvasWidth = useStore((state)=>state.width);
-    const smBreakpoint = theme.breakpoints.values.sm;
-    const isCompact = canvasWidth < smBreakpoint;
+    const isCompact = canvasWidth < CANVAS_COMPACT_BREAKPOINT;
     const nonStandaloneSuggestions = suggestionGroup?.suggestions.filter((s)=>!s.isStandalone) ?? [];
     const placeholderCount = nonStandaloneSuggestions.length;
     return /*#__PURE__*/ jsx(Fragment, {

package/dist/canvas/components/AgentCanvas/components/TimelinePlayer.cjs

@@ -39,7 +39,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 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 external_material_index_cjs_namespaceObject = require("../../../../material/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_luxon_namespaceObject = require("luxon");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
@@ -422,8 +422,10 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
                 align: "center",
                 gap: apollo_core_namespaceObject.Spacing.SpacingXs,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                        size: "large",
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-10 w-10",
                         onClick: handlePlayPause,
                         children: playing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.TimelinePauseIcon, {
                             w: 24,
@@ -435,14 +437,14 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
                             color: "var(--uix-canvas-icon-default)"
                         })
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_material_index_cjs_namespaceObject.ApTypography, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
                         children: [
                             currentTimeFormatted,
                             " / ",
                             totalTimeFormatted
                         ]
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                         children: mostActiveSpan?.Name
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -450,11 +452,13 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
                             flex: 1
                         }
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                        size: "large",
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-10 w-10",
                         onClick: handleSpeedChange,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_material_index_cjs_namespaceObject.ApTypography, {
-                            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeSBold,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                            className: "text-xs font-bold",
                             children: [
                                 speedLevel,
                                 "x"

package/dist/canvas/components/AgentCanvas/components/TimelinePlayer.js

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { FontVariantToken, Spacing } from "@uipath/apollo-core";
+import { Spacing } from "@uipath/apollo-core";
 import { TimelinePauseIcon, TimelinePlayIcon, TimelineProgressIcon } from "../../../icons/index.js";
 import { Column, Row } from "../../../layouts/index.js";
-import { ApIconButton, ApTypography } from "../../../../material/index.js";
+import { Button } from "@uipath/apollo-wind";
 import { DateTime } from "luxon";
 import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { calculateDurationMs, filterChildSpans, findAgentRunSpan, findAllAgentRunSpans, normalizeSpans, shouldRenderTimelinePlayer } from "./TimelinePlayer.utils.js";
@@ -384,8 +384,10 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
                 align: "center",
                 gap: Spacing.SpacingXs,
                 children: [
-                    /*#__PURE__*/ jsx(ApIconButton, {
-                        size: "large",
+                    /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-10 w-10",
                         onClick: handlePlayPause,
                         children: playing ? /*#__PURE__*/ jsx(TimelinePauseIcon, {
                             w: 24,
@@ -397,14 +399,14 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
                             color: "var(--uix-canvas-icon-default)"
                         })
                     }),
-                    /*#__PURE__*/ jsxs(ApTypography, {
+                    /*#__PURE__*/ jsxs("span", {
                         children: [
                             currentTimeFormatted,
                             " / ",
                             totalTimeFormatted
                         ]
                     }),
-                    /*#__PURE__*/ jsx(ApTypography, {
+                    /*#__PURE__*/ jsx("span", {
                         children: mostActiveSpan?.Name
                     }),
                     /*#__PURE__*/ jsx("div", {
@@ -412,11 +414,13 @@ const TimelinePlayer = ({ spans, enableTimelinePlayer = true })=>{
                             flex: 1
                         }
                     }),
-                    /*#__PURE__*/ jsx(ApIconButton, {
-                        size: "large",
+                    /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-10 w-10",
                         onClick: handleSpeedChange,
-                        children: /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeSBold,
+                        children: /*#__PURE__*/ jsxs("span", {
+                            className: "text-xs font-bold",
                             children: [
                                 speedLevel,
                                 "x"

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

@@ -29,12 +29,12 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../../icons/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_FloatingCanvasPanel_index_cjs_namespaceObject = require("../../FloatingCanvasPanel/index.cjs");
 const external_types_cjs_namespaceObject = require("../../../types.cjs");
+const icon_registry_cjs_namespaceObject = require("../../../utils/icon-registry.cjs");
 const BaseNode_cjs_namespaceObject = require("../../BaseNode/BaseNode.cjs");
 const BaseNodeConfigContext_cjs_namespaceObject = require("../../BaseNode/BaseNodeConfigContext.cjs");
+const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../../FloatingCanvasPanel/index.cjs");
 const external_AgentFlow_constants_cjs_namespaceObject = require("../AgentFlow.constants.cjs");
 const agent_flow_store_cjs_namespaceObject = require("../store/agent-flow-store.cjs");
 const external_AgentNode_styles_cjs_namespaceObject = require("./AgentNode.styles.cjs");
@@ -307,9 +307,9 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
                     onAddInstructions();
                 },
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                        name: "add",
-                        size: "14px"
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "plus",
+                        size: 14
                     }),
                     translations.addInstructions
                 ]

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

@@ -1 +1 @@
-{"version":3,"file":"AgentNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/AgentNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAKhF,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AA8BlE,UAAU,aAAc,SAAQ,YAAY;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC;IAClG,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,YAAY,EAAE,qBAAqB,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AA2jBD,eAAO,MAAM,gBAAgB,8CAxDI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,cAAc,6CAwD1B,CAAC;AAEvD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"AgentNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/AgentNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAIhF,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AA8BlE,UAAU,aAAc,SAAQ,YAAY;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC;IAClG,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,YAAY,EAAE,qBAAqB,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AA2jBD,eAAO,MAAM,gBAAgB,8CAxDI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,cAAc,6CAwD1B,CAAC;AAEvD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AutonomousAgentIcon, ConversationalAgentIcon, HealthScoreIcon } from "../../../icons/index.js";
 import { Position } from "../../../xyflow/react.js";
-import { ApIcon } from "../../../../material/components/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { FloatingCanvasPanel } from "../../FloatingCanvasPanel/index.js";
 import { DefaultSuggestionTranslations } from "../../../types.js";
+import { CanvasIcon } from "../../../utils/icon-registry.js";
 import { BaseNode } from "../../BaseNode/BaseNode.js";
 import { BaseNodeOverrideConfigProvider } from "../../BaseNode/BaseNodeConfigContext.js";
+import { FloatingCanvasPanel } from "../../FloatingCanvasPanel/index.js";
 import { ResourceNodeType } from "../AgentFlow.constants.js";
 import { useAgentFlowStore } from "../store/agent-flow-store.js";
 import { AddInstructionsButton, HealthScoreBadge, InstructionsLabel, InstructionsLine, InstructionsPreview, SettingsPreviewContainer, SettingsPreviewHeader, SettingsPreviewSubtitle, SettingsPreviewTitle, SettingsPromptBox, SettingsRow, SettingsRowLabel, SettingsRowValue, SettingsSection, SettingsSectionLabel, SettingsSectionValue, SubLabelContainer } from "./AgentNode.styles.js";
@@ -279,9 +279,9 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
                     onAddInstructions();
                 },
                 children: [
-                    /*#__PURE__*/ jsx(ApIcon, {
-                        name: "add",
-                        size: "14px"
+                    /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "plus",
+                        size: 14
                     }),
                     translations.addInstructions
                 ]