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

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

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
-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 { useEffect, useRef } from "react";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 const PanelHeader = styled.div`
   border-bottom: 1px solid var(--uix-canvas-border-de-emp);
   padding: 8px 16px;
@@ -49,9 +49,8 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
                     justify: "between",
                     align: "center",
                     children: [
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            color: "var(--uix-canvas-foreground)",
-                            variant: FontVariantToken.fontSizeLBold,
+                        /*#__PURE__*/ jsx("span", {
+                            className: "text-base font-bold",
                             children: title
                         }),
                         /*#__PURE__*/ jsxs(Row, {
@@ -59,11 +58,15 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
                             align: "center",
                             children: [
                                 headerActions,
-                                onClose && /*#__PURE__*/ jsx(ApIconButton, {
-                                    color: "secondary",
+                                onClose && /*#__PURE__*/ jsx(Button, {
+                                    variant: "ghost",
+                                    size: "icon",
+                                    className: "h-6 w-6",
+                                    "aria-label": "Close",
                                     onClick: onClose,
-                                    children: /*#__PURE__*/ jsx(ApIcon, {
-                                        name: "close"
+                                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                        icon: "x",
+                                        size: 16
                                     })
                                 })
                             ]

package/dist/canvas/components/GroupNode/GroupNode.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const external_GroupNode_styles_cjs_namespaceObject = require("./GroupNode.styles.cjs");
 const external_GroupNodeConfigContext_cjs_namespaceObject = require("./GroupNodeConfigContext.cjs");
 const minWidth = 12 * external_constants_cjs_namespaceObject.GRID_SPACING;
@@ -184,9 +184,9 @@ const GroupNodeComponent = ({ id, data, selected })=>{
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_GroupNode_styles_cjs_namespaceObject.GroupHeader, {
                         children: [
                             iconName && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNode_styles_cjs_namespaceObject.GroupIconWrapper, {
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                                    name: iconName,
-                                    size: "16px"
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: iconName,
+                                    size: 16
                                 })
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNode_styles_cjs_namespaceObject.GroupTitle, {
@@ -209,10 +209,9 @@ const GroupNodeComponent = ({ id, data, selected })=>{
                                                 onClick: handleToggleCollapse,
                                                 "aria-label": collapsed ? 'Expand group' : 'Collapse group',
                                                 title: collapsed ? 'Expand group' : 'Collapse group',
-                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                                                    variant: "outlined",
-                                                    name: collapsed ? 'expand_more' : 'expand_less',
-                                                    size: "16px"
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                                    icon: collapsed ? 'chevron-down' : 'chevron-up',
+                                                    size: 16
                                                 })
                                             })
                                         ]
@@ -223,10 +222,9 @@ const GroupNodeComponent = ({ id, data, selected })=>{
                                         onClick: onMoreOptions,
                                         "aria-label": "More options",
                                         title: "More options",
-                                        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
                                         })
                                     })
                                 ]

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

@@ -1 +1 @@
-{"version":3,"file":"GroupNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/GroupNode/GroupNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAkB1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,IAAI,EAAE,aAAa,CAAC;CACrB;AA+LD,eAAO,MAAM,SAAS,+DAzL8B,cAAc,6CAyLjB,CAAC"}
+{"version":3,"file":"GroupNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/GroupNode/GroupNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAkB1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,IAAI,EAAE,aAAa,CAAC;CACrB;AA2LD,eAAO,MAAM,SAAS,+DArL8B,cAAc,6CAqLjB,CAAC"}

package/dist/canvas/components/GroupNode/GroupNode.js

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { NodeResizeControl, useReactFlow } from "../../xyflow/react.js";
-import { ApIcon } from "../../../material/components/index.js";
 import { memo, useCallback } from "react";
 import { GRID_SPACING } from "../../constants.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { BottomCornerIndicators, GroupContainer, GroupContent, GroupControls, GroupHeader, GroupHeaderButton, GroupHeaderSeparator, GroupIconWrapper, GroupTitle, ResizeHandle, TopCornerIndicators } from "./GroupNode.styles.js";
 import { useGroupNodeConfig } from "./GroupNodeConfigContext.js";
 const minWidth = 12 * GRID_SPACING;
@@ -156,9 +156,9 @@ const GroupNodeComponent = ({ id, data, selected })=>{
                     /*#__PURE__*/ jsxs(GroupHeader, {
                         children: [
                             iconName && /*#__PURE__*/ jsx(GroupIconWrapper, {
-                                children: /*#__PURE__*/ jsx(ApIcon, {
-                                    name: iconName,
-                                    size: "16px"
+                                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: iconName,
+                                    size: 16
                                 })
                             }),
                             /*#__PURE__*/ jsx(GroupTitle, {
@@ -181,10 +181,9 @@ const GroupNodeComponent = ({ id, data, selected })=>{
                                                 onClick: handleToggleCollapse,
                                                 "aria-label": collapsed ? 'Expand group' : 'Collapse group',
                                                 title: collapsed ? 'Expand group' : 'Collapse group',
-                                                children: /*#__PURE__*/ jsx(ApIcon, {
-                                                    variant: "outlined",
-                                                    name: collapsed ? 'expand_more' : 'expand_less',
-                                                    size: "16px"
+                                                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                                    icon: collapsed ? 'chevron-down' : 'chevron-up',
+                                                    size: 16
                                                 })
                                             })
                                         ]
@@ -195,10 +194,9 @@ const GroupNodeComponent = ({ id, data, selected })=>{
                                         onClick: onMoreOptions,
                                         "aria-label": "More options",
                                         title: "More options",
-                                        children: /*#__PURE__*/ jsx(ApIcon, {
-                                            variant: "outlined",
-                                            name: "more_vert",
-                                            size: "16px"
+                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                            icon: "ellipsis-vertical",
+                                            size: 16
                                         })
                                     })
                                 ]

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs

@@ -28,16 +28,17 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
-const external_controls_index_cjs_namespaceObject = require("../../controls/index.cjs");
+const index_cjs_namespaceObject = require("../../controls/index.cjs");
 const external_core_index_cjs_namespaceObject = require("../../core/index.cjs");
 const useAddNodeOnConnectEnd_cjs_namespaceObject = require("../../hooks/useAddNodeOnConnectEnd.cjs");
 const animatedViewportManager_cjs_namespaceObject = require("../../stores/animatedViewportManager.cjs");
 const canvasStore_cjs_namespaceObject = require("../../stores/canvasStore.cjs");
 const viewportManager_cjs_namespaceObject = require("../../stores/viewportManager.cjs");
 const external_types_cjs_namespaceObject = require("../../types.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const transitions_cjs_namespaceObject = require("../../utils/transitions.cjs");
 const AddNodeManager_cjs_namespaceObject = require("../AddNodePanel/AddNodeManager.cjs");
 const AddNodePreview_cjs_namespaceObject = require("../AddNodePanel/AddNodePreview.cjs");
@@ -266,7 +267,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
             alignItems: 'center',
             justifyContent: 'center'
         },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApProgressSpinner, {})
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {})
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: containerRef,
@@ -288,16 +289,18 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                     padding: '8px 12px',
                     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                 },
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_controls_index_cjs_namespaceObject.Breadcrumb, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Breadcrumb, {
                     items: breadcrumbs.map((crumb, index)=>({
                             label: crumb.name,
                             onClick: index < breadcrumbs.length - 1 ? ()=>handleNavigateToDepth(index) : void 0,
-                            startAdornment: 0 === index ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                                name: "home"
+                            startAdornment: 0 === index ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                icon: "house",
+                                size: 16
                             }) : void 0
                         })),
-                    delimiter: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                        name: "chevron_right"
+                    delimiter: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "chevron-right",
+                        size: 16
                     })
                 })
             }),

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

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAU5D,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAKtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAK9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAMvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAInE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AASD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA2YhE,CAAC"}
+{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAW5D,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAKtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAK9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAMvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAInE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AASD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA2YhE,CAAC"}

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Panel, applyEdgeChanges, applyNodeChanges } from "../../xyflow/react.js";
-import { ApIcon, ApProgressSpinner } from "../../../material/components/index.js";
+import { Spinner } from "@uipath/apollo-wind";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PREVIEW_EDGE_ID, PREVIEW_NODE_ID } from "../../constants.js";
 import { Breadcrumb } from "../../controls/index.js";
@@ -10,6 +10,7 @@ import { animatedViewportManager } from "../../stores/animatedViewportManager.js
 import { selectBreadcrumbs, selectCanvasStack, selectCurrentCanvas, selectCurrentPath, selectDrillIntoNode, selectInitializeCanvas, selectInitializeWithData, selectNavigateToDepth, selectNavigateToSiblingCanvas, selectPreviousCanvas, selectTransitionState, selectUpdateEdges, selectUpdateNodes, selectUpdateSelection, selectUpdateViewport, useCanvasStore } from "../../stores/canvasStore.js";
 import { viewportManager } from "../../stores/viewportManager.js";
 import { DefaultCanvasTranslations } from "../../types.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { prefersReducedMotion } from "../../utils/transitions.js";
 import { AddNodeManager } from "../AddNodePanel/AddNodeManager.js";
 import { AddNodePreview } from "../AddNodePanel/AddNodePreview.js";
@@ -238,7 +239,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
             alignItems: 'center',
             justifyContent: 'center'
         },
-        children: /*#__PURE__*/ jsx(ApProgressSpinner, {})
+        children: /*#__PURE__*/ jsx(Spinner, {})
     });
     return /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
@@ -264,12 +265,14 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                     items: breadcrumbs.map((crumb, index)=>({
                             label: crumb.name,
                             onClick: index < breadcrumbs.length - 1 ? ()=>handleNavigateToDepth(index) : void 0,
-                            startAdornment: 0 === index ? /*#__PURE__*/ jsx(ApIcon, {
-                                name: "home"
+                            startAdornment: 0 === index ? /*#__PURE__*/ jsx(CanvasIcon, {
+                                icon: "house",
+                                size: 16
                             }) : void 0
                         })),
-                    delimiter: /*#__PURE__*/ jsx(ApIcon, {
-                        name: "chevron_right"
+                    delimiter: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "chevron-right",
+                        size: 16
                     })
                 })
             }),

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs

@@ -27,14 +27,13 @@ __webpack_require__.d(__webpack_exports__, {
     HierarchicalCanvasWithControls: ()=>HierarchicalCanvasWithControls
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const index_cjs_namespaceObject = require("../../../material/index.cjs");
-const components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const external_core_index_cjs_namespaceObject = require("../../core/index.cjs");
+const index_cjs_namespaceObject = require("../../core/index.cjs");
 const canvasStore_cjs_namespaceObject = require("../../stores/canvasStore.cjs");
 const CanvasEventBus_cjs_namespaceObject = require("../../utils/CanvasEventBus.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const createAddNodePreview_cjs_namespaceObject = require("../AddNodePanel/createAddNodePreview.cjs");
 const external_HierarchicalCanvas_cjs_namespaceObject = require("./HierarchicalCanvas.cjs");
 const createDemoCanvases = ()=>{
@@ -311,7 +310,7 @@ const workflowManifests = [
                 actions: [
                     {
                         id: 'drill-in',
-                        icon: 'open_in_new',
+                        icon: 'external-link',
                         label: 'Open Sub-Process'
                     }
                 ]
@@ -461,74 +460,88 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                         minWidth: '180px'
                     },
                     children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApButton, {
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
                             variant: "secondary",
-                            label: "Start",
-                            size: "small",
-                            startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                                variant: "outlined",
-                                name: "play_circle"
-                            }),
-                            onClick: ()=>handleAddNode('start')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('start'),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "circle-play",
+                                    size: 16
+                                }),
+                                " Start"
+                            ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApButton, {
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "Process",
-                            startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                                variant: "outlined",
-                                name: "settings"
-                            }),
-                            onClick: ()=>handleAddNode('process')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('process'),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "settings",
+                                    size: 16
+                                }),
+                                " Process"
+                            ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApButton, {
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "Decision",
-                            startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                                variant: "outlined",
-                                name: "help"
-                            }),
-                            onClick: ()=>handleAddNode('decision')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('decision'),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "circle-question-mark",
+                                    size: 16
+                                }),
+                                " Decision"
+                            ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApButton, {
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "Sub-Process",
-                            startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                                variant: "outlined",
-                                name: "folder"
-                            }),
-                            onClick: ()=>handleAddNode('subprocess')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('subprocess'),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "folder",
+                                    size: 16
+                                }),
+                                " Sub-Process"
+                            ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApButton, {
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "End",
-                            startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                                variant: "outlined",
-                                name: "stop_circle"
-                            }),
-                            onClick: ()=>handleAddNode('end')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('end'),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "circle-stop",
+                                    size: 16
+                                }),
+                                " End"
+                            ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApButton, {
-                            variant: "primary",
-                            size: "small",
-                            label: "Sample Workflow",
-                            startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                                variant: "outlined",
-                                name: "auto_awesome"
-                            }),
-                            onClick: handleAddSampleWorkflow
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
+                            size: "sm",
+                            onClick: handleAddSampleWorkflow,
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "sparkles",
+                                    size: 16
+                                }),
+                                " Sample Workflow"
+                            ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApButton, {
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "Clear Canvas",
-                            startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                                name: "clear"
-                            }),
-                            onClick: handleClearCanvas
+                            size: "sm",
+                            onClick: handleClearCanvas,
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                    icon: "x",
+                                    size: 16
+                                }),
+                                " Clear Canvas"
+                            ]
                         })
                     ]
                 })
@@ -545,8 +558,8 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                         fontSize: '12px'
                     },
                     children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
-                            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-sm font-bold",
                             children: "Canvas Info"
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -567,8 +580,8 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                                 currentPathLength
                             ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTypography, {
-                            variant: apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-sm font-bold",
                             children: "Instructions"
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -603,7 +616,7 @@ const HierarchicalCanvasWithControls = ()=>{
     const handlePathChange = (0, external_react_namespaceObject.useCallback)((path)=>{
         console.log('Navigation path changed:', path);
     }, []);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_core_index_cjs_namespaceObject.NodeRegistryProvider, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.NodeRegistryProvider, {
         manifest: workflowManifest,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CanvasWithControlsContent, {

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalCanvasWithControls.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwf/B,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EA8BlD,CAAC"}
+{"version":3,"file":"HierarchicalCanvasWithControls.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6d/B,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EA8BlD,CAAC"}