@uipath/apollo-react 3.71.0 → 4.0.0

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_index_cjs_namespaceObject = require("../../index.cjs");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
-const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
+const index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
 const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
 const external_StickyNoteNode_utils_cjs_namespaceObject = require("./StickyNoteNode.utils.cjs");
 const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, onFormat })=>{
@@ -48,19 +48,19 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
         textAreaRef,
         onFormat
     ]);
-    const handleBold = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleBold), [
+    const handleBold = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(index_cjs_namespaceObject.toggleBold), [
         applyFormat
     ]);
-    const handleItalic = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleItalic), [
+    const handleItalic = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(index_cjs_namespaceObject.toggleItalic), [
         applyFormat
     ]);
-    const handleStrikethrough = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleStrikethrough), [
+    const handleStrikethrough = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(index_cjs_namespaceObject.toggleStrikethrough), [
         applyFormat
     ]);
-    const handleBulletList = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleBulletList), [
+    const handleBulletList = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(index_cjs_namespaceObject.toggleBulletList), [
         applyFormat
     ]);
-    const handleNumberedList = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(external_markdown_formatting_index_cjs_namespaceObject.toggleNumberedList), [
+    const handleNumberedList = (0, external_react_namespaceObject.useCallback)(()=>applyFormat(index_cjs_namespaceObject.toggleNumberedList), [
         applyFormat
     ]);
     const mod = (0, external_StickyNoteNode_utils_cjs_namespaceObject.getModifierKey)();
@@ -70,67 +70,67 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
         onMouseDown: (e)=>e.preventDefault(),
         className: "nodrag nowheel",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: `Bold (${mod}+B)`,
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
                     isActive: activeFormats.bold,
                     onClick: handleBold,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "bold",
                         size: 14
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: `Italic (${mod}+I)`,
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
                     isActive: activeFormats.italic,
                     onClick: handleItalic,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "italic",
                         size: 14
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: `Strikethrough (${mod}${shift}X)`,
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
                     isActive: activeFormats.strikethrough,
                     onClick: handleStrikethrough,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "strikethrough",
                         size: 14
                     })
                 })
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ToolbarSeparator, {}),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: "Bullet list",
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
                     isActive: activeFormats.bulletList,
                     onClick: handleBulletList,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "list",
                         size: 14
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: "Numbered list",
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.FormattingButton, {
                     isActive: activeFormats.numberedList,
                     onClick: handleNumberedList,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                         icon: "list-ordered",
                         size: 14
                     })

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattingToolbar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/FormattingToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAa3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,UAAU,sBAAsB;IAC9B,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAwED,eAAO,MAAM,iBAAiB,+FAjE3B,sBAAsB,6CAiEwC,CAAC"}
+{"version":3,"file":"FormattingToolbar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/FormattingToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAa3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,UAAU,sBAAsB;IAC9B,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAwED,eAAO,MAAM,iBAAiB,+FAjE3B,sBAAsB,6CAiEwC,CAAC"}

package/dist/canvas/components/StickyNoteNode/FormattingToolbar.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { NodeIcon } from "../../index.js";
-import { ApTooltip } from "../../../material/components/index.js";
+import { CanvasIcon } from "../../index.js";
 import { memo, useCallback } from "react";
+import { CanvasTooltip } from "../CanvasTooltip.js";
 import { toggleBold, toggleBulletList, toggleItalic, toggleNumberedList, toggleStrikethrough } from "./markdown-formatting/index.js";
 import { FormattingButton, FormattingToolbarContainer, ToolbarSeparator } from "./StickyNoteNode.styles.js";
 import { getModifierKey, isMac } from "./StickyNoteNode.utils.js";
@@ -42,67 +42,67 @@ const FormattingToolbarComponent = ({ textAreaRef, borderColor, activeFormats, o
         onMouseDown: (e)=>e.preventDefault(),
         className: "nodrag nowheel",
         children: [
-            /*#__PURE__*/ jsx(ApTooltip, {
+            /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: `Bold (${mod}+B)`,
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
                     isActive: activeFormats.bold,
                     onClick: handleBold,
-                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "bold",
                         size: 14
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(ApTooltip, {
+            /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: `Italic (${mod}+I)`,
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
                     isActive: activeFormats.italic,
                     onClick: handleItalic,
-                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "italic",
                         size: 14
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(ApTooltip, {
+            /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: `Strikethrough (${mod}${shift}X)`,
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
                     isActive: activeFormats.strikethrough,
                     onClick: handleStrikethrough,
-                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "strikethrough",
                         size: 14
                     })
                 })
             }),
             /*#__PURE__*/ jsx(ToolbarSeparator, {}),
-            /*#__PURE__*/ jsx(ApTooltip, {
+            /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: "Bullet list",
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
                     isActive: activeFormats.bulletList,
                     onClick: handleBulletList,
-                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "list",
                         size: 14
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(ApTooltip, {
+            /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: "Numbered list",
                 placement: "top",
                 delay: true,
                 children: /*#__PURE__*/ jsx(FormattingButton, {
                     isActive: activeFormats.numberedList,
                     onClick: handleNumberedList,
-                    children: /*#__PURE__*/ jsx(NodeIcon, {
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                         icon: "list-ordered",
                         size: 14
                     })

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs

@@ -243,7 +243,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         const actions = [
             {
                 id: 'delete',
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                     icon: "trash",
                     size: 14
                 }),
@@ -252,7 +252,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             },
             {
                 id: 'edit',
-                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.CanvasIcon, {
                     icon: "pencil",
                     size: 14
                 }),

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Global } from "@emotion/react";
-import { NodeIcon } from "../../index.js";
+import { CanvasIcon } from "../../index.js";
 import { NodeResizeControl, useReactFlow } from "../../xyflow/react.js";
 import { AnimatePresence } from "motion/react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -203,7 +203,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         const actions = [
             {
                 id: 'delete',
-                icon: /*#__PURE__*/ jsx(NodeIcon, {
+                icon: /*#__PURE__*/ jsx(CanvasIcon, {
                     icon: "trash",
                     size: 14
                 }),
@@ -212,7 +212,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             },
             {
                 id: 'edit',
-                icon: /*#__PURE__*/ jsx(NodeIcon, {
+                icon: /*#__PURE__*/ jsx(CanvasIcon, {
                     icon: "pencil",
                     size: 14
                 }),

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs

@@ -27,10 +27,11 @@ __webpack_require__.d(__webpack_exports__, {
     NodeToolbar: ()=>NodeToolbar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../../material/components/index.cjs");
 const react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
-const external_shared_index_cjs_namespaceObject = require("../shared/index.cjs");
+const icon_registry_cjs_namespaceObject = require("../../../utils/icon-registry.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../../CanvasTooltip.cjs");
+const index_cjs_namespaceObject = require("../shared/index.cjs");
 const external_NodeToolbar_styles_cjs_namespaceObject = require("./NodeToolbar.styles.cjs");
 const external_NodeToolbar_utils_cjs_namespaceObject = require("./NodeToolbar.utils.cjs");
 const external_useToolbarState_cjs_namespaceObject = require("./useToolbarState.cjs");
@@ -85,7 +86,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
             children: [
                 actionsToDisplay.map((item, i)=>(0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeToolbar_styles_cjs_namespaceObject.StyledToolbarSeparator, {
                         $orientation: separatorOrientation
-                    }, `separator-${i}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shared_index_cjs_namespaceObject.ToolbarButton, {
+                    }, `separator-${i}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarButton, {
                         action: item,
                         layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
                     }, item.id)),
@@ -96,7 +97,7 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodeToolbar_styles_cjs_namespaceObject.StyledOverflowContainer, {
                             children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shared_index_cjs_namespaceObject.StyledToolbarButton, {
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.StyledToolbarButton, {
                                     ref: buttonRef,
                                     type: "button",
                                     className: "nodrag nopan",
@@ -104,13 +105,12 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                                     "aria-label": "More options",
                                     "aria-expanded": isDropdownOpen,
                                     "aria-haspopup": "menu",
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                                         content: config.overflowLabel,
                                         placement: "top",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                                            variant: "outlined",
-                                            name: "more_vert",
-                                            size: "16px"
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                            icon: "ellipsis-vertical",
+                                            size: 16
                                         })
                                     })
                                 }),
@@ -154,13 +154,15 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                                                 role: "menuitem",
                                                 $disabled: item.disabled,
                                                 children: [
-                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
+                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                                         style: {
-                                                            flex: 'unset'
+                                                            flex: 'unset',
+                                                            display: 'inline-flex'
                                                         },
-                                                        variant: "outlined",
-                                                        name: item.icon,
-                                                        size: "16px"
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                                            icon: item.icon,
+                                                            size: 16
+                                                        })
                                                     }),
                                                     item.icon && 'string' != typeof item.icon && item.icon,
                                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAiJ5D,eAAO,MAAM,WAAW,6EA7I4C,gBAAgB,oDA6I/B,CAAC"}
+{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8I5D,eAAO,MAAM,WAAW,6EA1I4C,gBAAgB,oDA0I/B,CAAC"}

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js

@@ -1,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ApIcon, ApTooltip } from "../../../../material/components/index.js";
 import { AnimatePresence } from "motion/react";
 import { memo, useMemo } from "react";
+import { CanvasIcon } from "../../../utils/icon-registry.js";
+import { CanvasTooltip } from "../../CanvasTooltip.js";
 import { StyledToolbarButton, ToolbarButton } from "../shared/index.js";
 import { StyledDropdownItem, StyledDropdownMenu, StyledOverflowContainer, StyledToolbarContainer, StyledToolbarSeparator } from "./NodeToolbar.styles.js";
 import { isSeparator } from "./NodeToolbar.utils.js";
@@ -76,13 +77,12 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                                     "aria-label": "More options",
                                     "aria-expanded": isDropdownOpen,
                                     "aria-haspopup": "menu",
-                                    children: /*#__PURE__*/ jsx(ApTooltip, {
+                                    children: /*#__PURE__*/ jsx(CanvasTooltip, {
                                         content: config.overflowLabel,
                                         placement: "top",
-                                        children: /*#__PURE__*/ jsx(ApIcon, {
-                                            variant: "outlined",
-                                            name: "more_vert",
-                                            size: "16px"
+                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                            icon: "ellipsis-vertical",
+                                            size: 16
                                         })
                                     })
                                 }),
@@ -126,13 +126,15 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
                                                 role: "menuitem",
                                                 $disabled: item.disabled,
                                                 children: [
-                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx(ApIcon, {
+                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
                                                         style: {
-                                                            flex: 'unset'
+                                                            flex: 'unset',
+                                                            display: 'inline-flex'
                                                         },
-                                                        variant: "outlined",
-                                                        name: item.icon,
-                                                        size: "16px"
+                                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                                            icon: item.icon,
+                                                            size: 16
+                                                        })
                                                     }),
                                                     item.icon && 'string' != typeof item.icon && item.icon,
                                                     /*#__PURE__*/ jsx("span", {

package/dist/canvas/components/Toolbar/shared/ToolbarButton.cjs

@@ -28,8 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../../utils/index.cjs");
-const components_index_cjs_namespaceObject = require("../../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
+const icon_registry_cjs_namespaceObject = require("../../../utils/icon-registry.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../../CanvasTooltip.cjs");
 const external_ToolbarButton_styles_cjs_namespaceObject = require("./ToolbarButton.styles.cjs");
 const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ action, layoutId })=>{
     const isEnabled = !action.disabled;
@@ -39,7 +40,7 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
         e.preventDefault();
         if (isEnabled) action.onClick();
     };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApTooltip, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
         content: action.label,
         placement: "top",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_styles_cjs_namespaceObject.StyledToolbarButton, {
@@ -60,10 +61,9 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
             $isToggled: action.isToggled,
             $color: action.color,
             $hoverColor: hoverColor,
-            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                variant: "outlined",
-                name: action.icon,
-                size: "16px",
+            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                icon: action.icon,
+                size: 16,
                 color: action.color
             }) : action.icon
         })

package/dist/canvas/components/Toolbar/shared/ToolbarButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/ToolbarButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAK9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,6DAA+B,kBAAkB,6CAqCzE,CAAC"}
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/ToolbarButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAK9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,6DAA+B,kBAAkB,6CAqCzE,CAAC"}

package/dist/canvas/components/Toolbar/shared/ToolbarButton.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { getLighterColor } from "../../../utils/index.js";
-import { ApIcon, ApTooltip } from "../../../../material/components/index.js";
 import { memo } from "react";
+import { CanvasIcon } from "../../../utils/icon-registry.js";
+import { CanvasTooltip } from "../../CanvasTooltip.js";
 import { StyledToolbarButton } from "./ToolbarButton.styles.js";
 const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
     const isEnabled = !action.disabled;
@@ -11,7 +12,7 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
         e.preventDefault();
         if (isEnabled) action.onClick();
     };
-    return /*#__PURE__*/ jsx(ApTooltip, {
+    return /*#__PURE__*/ jsx(CanvasTooltip, {
         content: action.label,
         placement: "top",
         children: /*#__PURE__*/ jsx(StyledToolbarButton, {
@@ -32,10 +33,9 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
             $isToggled: action.isToggled,
             $color: action.color,
             $hoverColor: hoverColor,
-            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ jsx(ApIcon, {
-                variant: "outlined",
-                name: action.icon,
-                size: "16px",
+            children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: action.icon,
+                size: 16,
                 color: action.color
             }) : action.icon
         })

package/dist/canvas/components/Toolbox/Header.cjs

@@ -27,10 +27,10 @@ __webpack_require__.d(__webpack_exports__, {
     Header: ()=>Header_Header
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-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 Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ title, onBack, showBackButton }) {
     const isBackButtonVisible = showBackButton && onBack;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
@@ -46,22 +46,23 @@ const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(fun
                     transition: 'width 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                     overflow: 'hidden'
                 },
-                children: isBackButtonVisible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
+                children: isBackButtonVisible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
                     "aria-label": "Back",
-                    color: "secondary",
                     onClick: onBack,
                     style: {
                         transition: 'transform 0.3s ease-in-out'
                     },
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                        name: "chevron_left",
-                        size: "20px"
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "chevron-left",
+                        size: 20
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeLBold,
-                color: "var(--uix-canvas-foreground-emp)",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-base font-bold",
                 style: {
                     transition: 'transform 0.3s ease-in-out, margin 0.3s ease-in-out',
                     margin: 0

package/dist/canvas/components/Toolbox/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Header.tsx"],"names":[],"mappings":"AAKA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,mDAyCjB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Header.tsx"],"names":[],"mappings":"AAKA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,mDA0CjB,CAAC"}

package/dist/canvas/components/Toolbox/Header.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FontVariantToken } from "@uipath/apollo-core";
 import { Row } from "../../layouts/index.js";
-import { ApIcon, ApIconButton, ApTypography } from "../../../material/index.js";
+import { Button } from "@uipath/apollo-wind";
 import { memo } from "react";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 const Header_Header = /*#__PURE__*/ memo(function({ title, onBack, showBackButton }) {
     const isBackButtonVisible = showBackButton && onBack;
     return /*#__PURE__*/ jsxs(Row, {
@@ -18,22 +18,23 @@ const Header_Header = /*#__PURE__*/ memo(function({ title, onBack, showBackButto
                     transition: 'width 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                     overflow: 'hidden'
                 },
-                children: isBackButtonVisible && /*#__PURE__*/ jsx(ApIconButton, {
+                children: isBackButtonVisible && /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
                     "aria-label": "Back",
-                    color: "secondary",
                     onClick: onBack,
                     style: {
                         transition: 'transform 0.3s ease-in-out'
                     },
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        name: "chevron_left",
-                        size: "20px"
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "chevron-left",
+                        size: 20
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(ApTypography, {
-                variant: FontVariantToken.fontSizeLBold,
-                color: "var(--uix-canvas-foreground-emp)",
+            /*#__PURE__*/ jsx("span", {
+                className: "text-base font-bold",
                 style: {
                     transition: 'transform 0.3s ease-in-out, margin 0.3s ease-in-out',
                     margin: 0