@uipath/apollo-react 4.10.0 → 4.11.0

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

@@ -28,12 +28,16 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 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 BaseNodeInnerShape_cjs_namespaceObject = require("../BaseNode/BaseNodeInnerShape.cjs");
-const AddNodePreview = ({ selected, data, width, height })=>{
+const AddNodePreview = ({ selected, data, width, height, dragging })=>{
     const nodeData = data;
+    const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
+    const handlePointerEnter = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(true), []);
+    const handlePointerLeave = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(false), []);
     const icon = (0, external_react_namespaceObject.useMemo)(()=>{
         const IconComponent = (0, icon_registry_cjs_namespaceObject.getIcon)(nodeData?.iconName ?? 'square-dashed');
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconComponent, {});
@@ -44,6 +48,10 @@ const AddNodePreview = ({ selected, data, width, height })=>{
     const outputPosition = nodeData?.outputHandlePosition ?? react_cjs_namespaceObject.Position.Right;
     const containerWidth = width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
     const containerHeight = height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
+    const containerClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)('relative flex flex-col items-center justify-center bg-surface-overlay', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'border border-dashed', 'shadow-(--canvas-node-shadow-rest) transition-[box-shadow,border-color] duration-150', isHovered && 'shadow-(--canvas-node-shadow-hover)', dragging && 'shadow-(--canvas-node-shadow-lifted) cursor-grabbing'), [
+        isHovered,
+        dragging
+    ]);
     const containerStyle = (0, external_react_namespaceObject.useMemo)(()=>{
         const basis = Math.min(containerWidth, containerHeight);
         const gap = basis * (1 - external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO);
@@ -69,8 +77,10 @@ const AddNodePreview = ({ selected, data, width, height })=>{
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: " relative flex flex-col items-center justify-center bg-surface-overlay w-(--node-w) h-(--node-h) rounded-(--node-radius) border border-dashed ",
+                className: containerClassName,
                 style: containerStyle,
+                onPointerEnter: handlePointerEnter,
+                onPointerLeave: handlePointerLeave,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
                     children: icon
                 })

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":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAU,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,QAAQ,CAAC;IAC/B,oBAAoB,CAAC,EAAE,QAAQ,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAwE9C,CAAC"}
+{"version":3,"file":"AddNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAU,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAE5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,QAAQ,CAAC;IAC/B,oBAAoB,CAAC,EAAE,QAAQ,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4F9C,CAAC"}

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

@@ -1,11 +1,15 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Handle, Position } from "../../xyflow/react.js";
-import { useMemo } from "react";
+import { cn } from "@uipath/apollo-wind";
+import { useCallback, useMemo, useState } from "react";
 import { DEFAULT_NODE_SIZE, NODE_CONTAINER_RADIUS_RATIO, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
 import { getIcon } from "../../utils/icon-registry.js";
 import { BaseInnerShape } from "../BaseNode/BaseNodeInnerShape.js";
-const AddNodePreview = ({ selected, data, width, height })=>{
+const AddNodePreview = ({ selected, data, width, height, dragging })=>{
     const nodeData = data;
+    const [isHovered, setIsHovered] = useState(false);
+    const handlePointerEnter = useCallback(()=>setIsHovered(true), []);
+    const handlePointerLeave = useCallback(()=>setIsHovered(false), []);
     const icon = useMemo(()=>{
         const IconComponent = getIcon(nodeData?.iconName ?? 'square-dashed');
         return /*#__PURE__*/ jsx(IconComponent, {});
@@ -16,6 +20,10 @@ const AddNodePreview = ({ selected, data, width, height })=>{
     const outputPosition = nodeData?.outputHandlePosition ?? Position.Right;
     const containerWidth = width ?? DEFAULT_NODE_SIZE;
     const containerHeight = height ?? DEFAULT_NODE_SIZE;
+    const containerClassName = useMemo(()=>cn('relative flex flex-col items-center justify-center bg-surface-overlay', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'border border-dashed', 'shadow-(--canvas-node-shadow-rest) transition-[box-shadow,border-color] duration-150', isHovered && 'shadow-(--canvas-node-shadow-hover)', dragging && 'shadow-(--canvas-node-shadow-lifted) cursor-grabbing'), [
+        isHovered,
+        dragging
+    ]);
     const containerStyle = useMemo(()=>{
         const basis = Math.min(containerWidth, containerHeight);
         const gap = basis * (1 - NODE_INNER_SHAPE_RATIO);
@@ -41,8 +49,10 @@ const AddNodePreview = ({ selected, data, width, height })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: " relative flex flex-col items-center justify-center bg-surface-overlay w-(--node-w) h-(--node-h) rounded-(--node-radius) border border-dashed ",
+                className: containerClassName,
                 style: containerStyle,
+                onPointerEnter: handlePointerEnter,
+                onPointerLeave: handlePointerLeave,
                 children: /*#__PURE__*/ jsx(BaseInnerShape, {
                     children: icon
                 })

package/dist/canvas/components/BaseCanvas/CanvasThemeContext.cjs

@@ -34,10 +34,12 @@ const defaultValue = {
     isDarkMode: false
 };
 const CanvasThemeProvider = ({ children, isDarkMode })=>{
+    const parent = (0, external_react_namespaceObject.useContext)(CanvasThemeContext);
+    const resolved = isDarkMode ?? parent?.isDarkMode;
     const value = (0, external_react_namespaceObject.useMemo)(()=>({
-            isDarkMode
+            isDarkMode: resolved
         }), [
-        isDarkMode
+        resolved
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CanvasThemeContext.Provider, {
         value: value,

package/dist/canvas/components/BaseCanvas/CanvasThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/CanvasThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAMD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAM3F,CAAC;AAMF,wBAAgB,cAAc,IAAI,uBAAuB,CAExD"}
+{"version":3,"file":"CanvasThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/CanvasThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAMD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAQ3F,CAAC;AAMF,wBAAgB,cAAc,IAAI,uBAAuB,CAExD"}

package/dist/canvas/components/BaseCanvas/CanvasThemeContext.js

@@ -5,10 +5,12 @@ const defaultValue = {
     isDarkMode: false
 };
 const CanvasThemeProvider = ({ children, isDarkMode })=>{
+    const parent = useContext(CanvasThemeContext);
+    const resolved = isDarkMode ?? parent?.isDarkMode;
     const value = useMemo(()=>({
-            isDarkMode
+            isDarkMode: resolved
         }), [
-        isDarkMode
+        resolved
     ]);
     return /*#__PURE__*/ jsx(CanvasThemeContext.Provider, {
         value: value,

package/dist/canvas/components/BaseNode/BaseNode.cjs

@@ -452,16 +452,16 @@ const BaseNodeComponent = (props)=>{
                     displayFooter && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                         className: "basis-full pt-0.5 min-w-0 overflow-hidden",
                         children: displayFooter
+                    }),
+                    toolbarConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
+                        nodeId: id,
+                        config: toolbarConfig,
+                        expanded: selected,
+                        hidden: dragging || multipleNodesSelected
                     })
                 ]
             }),
-            handleElements,
-            toolbarConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
-                nodeId: id,
-                config: toolbarConfig,
-                expanded: selected,
-                hidden: dragging || multipleNodesSelected
-            })
+            handleElements
         ]
     });
     if (useSmartHandles) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SmartHandle_cjs_namespaceObject.SmartHandleProvider, {

package/dist/canvas/components/BaseNode/BaseNode.js

@@ -424,16 +424,16 @@ const BaseNodeComponent = (props)=>{
                     displayFooter && /*#__PURE__*/ jsx("div", {
                         className: "basis-full pt-0.5 min-w-0 overflow-hidden",
                         children: displayFooter
+                    }),
+                    toolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
+                        nodeId: id,
+                        config: toolbarConfig,
+                        expanded: selected,
+                        hidden: dragging || multipleNodesSelected
                     })
                 ]
             }),
-            handleElements,
-            toolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
-                nodeId: id,
-                config: toolbarConfig,
-                expanded: selected,
-                hidden: dragging || multipleNodesSelected
-            })
+            handleElements
         ]
     });
     if (useSmartHandles) return /*#__PURE__*/ jsx(SmartHandleProvider, {

package/dist/canvas/components/BaseNode/BaseNodeContainer.cjs

@@ -55,7 +55,7 @@ const getStatusBorder = (status)=>{
 };
 const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children })=>{
     const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
-    const className = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
+    const className = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border border-border', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'shadow-(--canvas-node-shadow-rest) outline-offset-0 transition-[box-shadow,border-color] duration-150', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', getStatusBorder(activeStatus), isHovered && 'shadow-(--canvas-node-shadow-hover) border-border-hover', isSelected && 'outline outline-2 outline-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'), [
         shape,
         hasFooter,
         activeStatus,

package/dist/canvas/components/BaseNode/BaseNodeContainer.js

@@ -26,7 +26,7 @@ const getStatusBorder = (status)=>{
 };
 const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children })=>{
     const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
-    const className = useMemo(()=>cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
+    const className = useMemo(()=>cn('relative flex items-center cursor-pointer bg-surface-overlay border border-border', 'w-(--node-w) h-(--node-h) rounded-(--node-radius)', 'shadow-(--canvas-node-shadow-rest) outline-offset-0 transition-[box-shadow,border-color] duration-150', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-(--node-gap)' : 'flex-col justify-center', hasFooter && 'flex-wrap', getStatusBorder(activeStatus), isHovered && 'shadow-(--canvas-node-shadow-hover) border-border-hover', isSelected && 'outline outline-2 outline-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'), [
         shape,
         hasFooter,
         activeStatus,

package/dist/canvas/components/ButtonHandle/CanvasInlineButton.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    CanvasInlineButton: ()=>CanvasInlineButton
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+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 CANVAS_INLINE_BUTTON_CLASS = "grid place-items-center w-7 h-7 rounded-[10px] border border-(--canvas-border) bg-(--canvas-background-raised) text-(--canvas-foreground) enabled:hover:bg-(--canvas-background-overlay) enabled:hover:border-(--canvas-primary-hover) enabled:hover:text-(--canvas-foreground) [transition:opacity_120ms_ease,color_120ms_ease,background-color_120ms_ease,border-color_120ms_ease]";
+const CanvasInlineButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ icon = 'plus', iconSize = 14, className, ...rest }, ref)=>{
+    const iconNode = 'string' == typeof icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+        icon: icon,
+        size: iconSize
+    }) : /*#__PURE__*/ (0, external_react_namespaceObject.isValidElement)(icon) ? icon : null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+        ref: ref,
+        variant: "outline",
+        size: "3xs",
+        icon: true,
+        className: (0, apollo_wind_namespaceObject.cn)(CANVAS_INLINE_BUTTON_CLASS, className),
+        ...rest,
+        children: iconNode
+    });
+});
+CanvasInlineButton.displayName = 'CanvasInlineButton';
+exports.CanvasInlineButton = __webpack_exports__.CanvasInlineButton;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasInlineButton"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/ButtonHandle/CanvasInlineButton.d.ts

@@ -0,0 +1,8 @@
+import { Button } from '@uipath/apollo-wind';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface CanvasInlineButtonProps extends Omit<ComponentPropsWithoutRef<typeof Button>, 'variant' | 'size' | 'icon' | 'children'> {
+    icon?: ReactNode;
+    iconSize?: number;
+}
+export declare const CanvasInlineButton: import("react").ForwardRefExoticComponent<CanvasInlineButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=CanvasInlineButton.d.ts.map

package/dist/canvas/components/ButtonHandle/CanvasInlineButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasInlineButton.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/CanvasInlineButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAM,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,KAAK,wBAAwB,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlG,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IAK/F,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAQD,eAAO,MAAM,kBAAkB,uHAsB9B,CAAC"}

package/dist/canvas/components/ButtonHandle/CanvasInlineButton.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Button, cn } from "@uipath/apollo-wind";
+import { forwardRef, isValidElement } from "react";
+import { CanvasIcon } from "../../utils/icon-registry.js";
+const CANVAS_INLINE_BUTTON_CLASS = "grid place-items-center w-7 h-7 rounded-[10px] border border-(--canvas-border) bg-(--canvas-background-raised) text-(--canvas-foreground) enabled:hover:bg-(--canvas-background-overlay) enabled:hover:border-(--canvas-primary-hover) enabled:hover:text-(--canvas-foreground) [transition:opacity_120ms_ease,color_120ms_ease,background-color_120ms_ease,border-color_120ms_ease]";
+const CanvasInlineButton = /*#__PURE__*/ forwardRef(({ icon = 'plus', iconSize = 14, className, ...rest }, ref)=>{
+    const iconNode = 'string' == typeof icon ? /*#__PURE__*/ jsx(CanvasIcon, {
+        icon: icon,
+        size: iconSize
+    }) : /*#__PURE__*/ isValidElement(icon) ? icon : null;
+    return /*#__PURE__*/ jsx(Button, {
+        ref: ref,
+        variant: "outline",
+        size: "3xs",
+        icon: true,
+        className: cn(CANVAS_INLINE_BUTTON_CLASS, className),
+        ...rest,
+        children: iconNode
+    });
+});
+CanvasInlineButton.displayName = 'CanvasInlineButton';
+export { CanvasInlineButton };

package/dist/canvas/components/ButtonHandle/HandleButton.cjs

@@ -30,10 +30,9 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
-const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
+const external_CanvasInlineButton_cjs_namespaceObject = require("./CanvasInlineButton.cjs");
 const BUTTON_POSITION = {
     [react_cjs_namespaceObject.Position.Top]: 'flex-col-reverse bottom-full left-1/2 -translate-x-1/2',
     [react_cjs_namespaceObject.Position.Bottom]: 'flex-col top-full left-1/2 -translate-x-1/2',
@@ -88,18 +87,11 @@ const HandleButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ v
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: (0, CssUtil_cjs_namespaceObject.cx)('absolute flex items-center gap-1 pointer-events-none', BUTTON_POSITION[position]),
         children: [
-            visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+            visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasInlineButton_cjs_namespaceObject.CanvasInlineButton, {
                 "aria-label": "Add node",
-                variant: "outline",
-                size: "3xs",
-                icon: true,
                 onClick: handleClick,
                 onPointerDown: handlePointerDown,
-                className: "nodrag nopan pointer-events-auto rounded-[10px] animate-fade-in w-7 h-7",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                    icon: "plus",
-                    size: 14
-                })
+                className: "nodrag nopan pointer-events-auto animate-fade-in"
             }),
             label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InlineLabel, {
                 label: label,

package/dist/canvas/components/ButtonHandle/HandleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HandleButton.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAqBpE,eAAO,MAAM,YAAY,0IAUpB;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,6CA+FF,CAAC;AAqCF,eAAO,MAAM,iBAAiB,8DACJ;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,oDAOlE,CAAC"}
+{"version":3,"file":"HandleButton.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAoBpE,eAAO,MAAM,YAAY,0IAUpB;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,6CA0FF,CAAC;AAqCF,eAAO,MAAM,iBAAiB,8DACJ;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,oDAOlE,CAAC"}

package/dist/canvas/components/ButtonHandle/HandleButton.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Row } from "../../layouts/index.js";
 import { Position } from "../../xyflow/react.js";
-import { Button } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useRef } from "react";
 import { cx } from "../../utils/CssUtil.js";
-import { CanvasIcon } from "../../utils/icon-registry.js";
+import { CanvasInlineButton } from "./CanvasInlineButton.js";
 const BUTTON_POSITION = {
     [Position.Top]: 'flex-col-reverse bottom-full left-1/2 -translate-x-1/2',
     [Position.Bottom]: 'flex-col top-full left-1/2 -translate-x-1/2',
@@ -59,18 +58,11 @@ const HandleButton = /*#__PURE__*/ memo(({ visible, labelVisible, position, onAc
     return /*#__PURE__*/ jsxs("div", {
         className: cx('absolute flex items-center gap-1 pointer-events-none', BUTTON_POSITION[position]),
         children: [
-            visible && /*#__PURE__*/ jsx(Button, {
+            visible && /*#__PURE__*/ jsx(CanvasInlineButton, {
                 "aria-label": "Add node",
-                variant: "outline",
-                size: "3xs",
-                icon: true,
                 onClick: handleClick,
                 onPointerDown: handlePointerDown,
-                className: "nodrag nopan pointer-events-auto rounded-[10px] animate-fade-in w-7 h-7",
-                children: /*#__PURE__*/ jsx(CanvasIcon, {
-                    icon: "plus",
-                    size: 14
-                })
+                className: "nodrag nopan pointer-events-auto animate-fade-in"
             }),
             label && /*#__PURE__*/ jsx(InlineLabel, {
                 label: label,

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

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -36,30 +27,16 @@ __webpack_require__.d(__webpack_exports__, {
     FloatingCanvasPanel: ()=>FloatingCanvasPanel
 });
 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 apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
 const external_react_dom_namespaceObject = require("react-dom");
 const external_CanvasPortal_cjs_namespaceObject = require("./CanvasPortal.cjs");
 const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
 const external_useFloatingPosition_cjs_namespaceObject = require("./useFloatingPosition.cjs");
-const PanelContainer = styled_default().div`
-  color: var(--canvas-foreground);
-  background-color: var(--canvas-background);
-  border: 1px solid var(--canvas-border-de-emp);
-  border-radius: ${(props)=>props.isPinned ? '0' : '8px'};
-  box-shadow: ${(props)=>props.isPinned ? 'none' : '0 4px 16px rgba(0, 0, 0, 0.12)'};
-  font-size: 14px;
-  min-width: ${(props)=>props.isPinned ? '320px' : '280px'};
-  max-width: ${(props)=>props.isPinned ? '320px' : 'none'};
-  width: ${(props)=>props.isPinned ? '320px' : 'auto'};
-  height: ${(props)=>props.isPinned ? '100vh' : 'auto'};
-  max-height: ${(props)=>props.isPinned ? '100vh' : '600px'};
-  display: flex;
-  flex-direction: column;
-  transition: opacity 0.2s ease-in-out;
-  border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
-`;
+const PANEL_BASE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm flex flex-col transition-opacity duration-200 ease-in-out';
+const PANEL_FLOATING_CLASS = 'rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
+const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
 function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({
         open,
@@ -69,6 +46,9 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         offset,
         fallbackPlacement
     });
+    const panelClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(PANEL_BASE_CLASS, isPinned ? PANEL_PINNED_CLASS : PANEL_FLOATING_CLASS), [
+        isPinned
+    ]);
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {
         const getScreenSpacePosition = ()=>{
@@ -113,11 +93,10 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             }
         };
         const screenPosition = getScreenSpacePosition();
-        const fixedContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PanelContainer, {
-            className: "nodrag nopan nowheel",
-            isPinned: isPinned,
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave,
+        const fixedContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan nowheel', panelClassName),
+            onPointerEnter: onMouseEnter,
+            onPointerLeave: onMouseLeave,
             style: {
                 position: 'fixed',
                 ...screenPosition,
@@ -137,12 +116,11 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             children: fixedContent
         });
     }
-    const panelContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PanelContainer, {
+    const panelContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: refs.setFloating,
-        className: "nodrag nopan nowheel",
-        isPinned: isPinned,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
+        className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan nowheel', panelClassName),
+        onPointerEnter: onMouseEnter,
+        onPointerLeave: onMouseLeave,
         style: {
             ...isPinned ? {} : floatingStyles,
             position: isPinned ? 'fixed' : 'absolute',

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAShB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,iBAAiB,EACjB,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDA6I1B"}
+{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAW7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAShB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,iBAAiB,EACjB,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDAgJ1B"}

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

@@ -1,27 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
 import { ViewportPortal } from "../../xyflow/react.js";
+import { cn } from "@uipath/apollo-wind";
+import { useMemo } from "react";
 import { createPortal } from "react-dom";
 import { CanvasPortal } from "./CanvasPortal.js";
 import { PanelChrome } from "./PanelChrome.js";
 import { useFloatingPosition } from "./useFloatingPosition.js";
-const PanelContainer = styled.div`
-  color: var(--canvas-foreground);
-  background-color: var(--canvas-background);
-  border: 1px solid var(--canvas-border-de-emp);
-  border-radius: ${(props)=>props.isPinned ? '0' : '8px'};
-  box-shadow: ${(props)=>props.isPinned ? 'none' : '0 4px 16px rgba(0, 0, 0, 0.12)'};
-  font-size: 14px;
-  min-width: ${(props)=>props.isPinned ? '320px' : '280px'};
-  max-width: ${(props)=>props.isPinned ? '320px' : 'none'};
-  width: ${(props)=>props.isPinned ? '320px' : 'auto'};
-  height: ${(props)=>props.isPinned ? '100vh' : 'auto'};
-  max-height: ${(props)=>props.isPinned ? '100vh' : '600px'};
-  display: flex;
-  flex-direction: column;
-  transition: opacity 0.2s ease-in-out;
-  border-left: ${(props)=>props.isPinned ? '1px solid var(--canvas-border-de-emp)' : 'none'};
-`;
+const PANEL_BASE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm flex flex-col transition-opacity duration-200 ease-in-out';
+const PANEL_FLOATING_CLASS = 'rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
+const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
 function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = useFloatingPosition({
         open,
@@ -31,6 +18,9 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         offset,
         fallbackPlacement
     });
+    const panelClassName = useMemo(()=>cn(PANEL_BASE_CLASS, isPinned ? PANEL_PINNED_CLASS : PANEL_FLOATING_CLASS), [
+        isPinned
+    ]);
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {
         const getScreenSpacePosition = ()=>{
@@ -75,11 +65,10 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             }
         };
         const screenPosition = getScreenSpacePosition();
-        const fixedContent = /*#__PURE__*/ jsx(PanelContainer, {
-            className: "nodrag nopan nowheel",
-            isPinned: isPinned,
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave,
+        const fixedContent = /*#__PURE__*/ jsx("div", {
+            className: cn('nodrag nopan nowheel', panelClassName),
+            onPointerEnter: onMouseEnter,
+            onPointerLeave: onMouseLeave,
             style: {
                 position: 'fixed',
                 ...screenPosition,
@@ -99,12 +88,11 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             children: fixedContent
         });
     }
-    const panelContent = /*#__PURE__*/ jsx(PanelContainer, {
+    const panelContent = /*#__PURE__*/ jsx("div", {
         ref: refs.setFloating,
-        className: "nodrag nopan nowheel",
-        isPinned: isPinned,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
+        className: cn('nodrag nopan nowheel', panelClassName),
+        onPointerEnter: onMouseEnter,
+        onPointerLeave: onMouseLeave,
         style: {
             ...isPinned ? {} : floatingStyles,
             position: isPinned ? 'fixed' : 'absolute',

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

@@ -45,7 +45,7 @@ const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs
 const PanelHeader = styled_default().div`
   border-bottom: 1px solid var(--canvas-border-de-emp);
   padding: 8px 16px;
-  background-color: var(--canvas-background);
+  background-color: var(--canvas-background-raised);
   border-radius: 8px 8px 0 0;
   flex-shrink: 0;
 `;

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

@@ -7,7 +7,7 @@ import { CanvasIcon } from "../../utils/icon-registry.js";
 const PanelHeader = styled.div`
   border-bottom: 1px solid var(--canvas-border-de-emp);
   padding: 8px 16px;
-  background-color: var(--canvas-background);
+  background-color: var(--canvas-background-raised);
   border-radius: 8px 8px 0 0;
   flex-shrink: 0;
 `;

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

@@ -30,23 +30,15 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../shared/index.cjs");
-const external_EdgeToolbar_styles_cjs_namespaceObject = require("./EdgeToolbar.styles.cjs");
+const CanvasInlineButton_cjs_namespaceObject = require("../../ButtonHandle/CanvasInlineButton.cjs");
 const EdgeToolbarComponent = ({ edgeId, visible, positioning, config, onMouseEnter, onMouseLeave })=>{
-    const actionsWithHandlers = (0, external_react_namespaceObject.useMemo)(()=>config.actions.map((action)=>({
-                ...action,
-                onClick: ()=>action.onAction(edgeId, positioning.pathPosition)
-            })), [
-        config.actions,
-        edgeId,
-        positioning.pathPosition
-    ]);
     const transform = (0, external_react_namespaceObject.useMemo)(()=>`translate(-50%, -50%) translate(${positioning.offsetPosition.x}px, ${positioning.offsetPosition.y}px)`, [
         positioning.offsetPosition
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.EdgeLabelRenderer, {
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
-            children: visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EdgeToolbar_styles_cjs_namespaceObject.StyledEdgeToolbarContainer, {
+            children: visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.motion.div, {
+                className: "nodrag nopan absolute top-0 left-0 pointer-events-auto z-[1000] flex flex-row items-center gap-1",
                 initial: {
                     opacity: 0
                 },
@@ -63,14 +55,18 @@ const EdgeToolbarComponent = ({ edgeId, visible, positioning, config, onMouseEnt
                 style: {
                     transform
                 },
-                className: "nodrag nopan",
                 onMouseEnter: onMouseEnter,
                 onMouseLeave: onMouseLeave,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EdgeToolbar_styles_cjs_namespaceObject.StyledEdgeToolbarContent, {
-                    children: actionsWithHandlers.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarButton, {
-                            action: action
-                        }, action.id))
-                })
+                children: config.actions.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CanvasInlineButton_cjs_namespaceObject.CanvasInlineButton, {
+                        "aria-label": action.label ?? action.id,
+                        disabled: action.disabled,
+                        icon: action.icon ?? 'plus',
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            e.preventDefault();
+                            if (!action.disabled) action.onAction(edgeId, positioning.pathPosition);
+                        }
+                    }, action.id))
             }, `edge-toolbar-${edgeId}`)
         })
     });