@uipath/apollo-react 4.9.0 → 4.11.0

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

@@ -1,12 +1,38 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence } from "motion/react";
+import { cn } from "@uipath/apollo-wind";
+import { AnimatePresence, motion } 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 { ToolbarButton, ToolbarIconButton } from "../shared/index.js";
 import { isSeparator } from "./NodeToolbar.utils.js";
 import { useToolbarState } from "./useToolbarState.js";
+const POSITIONER_BASE_CLASS = 'absolute flex pointer-events-none z-10';
+const POSITIONER_POSITION_CLASS = {
+    top: 'top-[-52px] left-0 right-0 flex-row',
+    bottom: 'bottom-[-52px] left-0 right-0 flex-row',
+    left: 'left-[-52px] top-0 bottom-0 flex-col',
+    right: 'right-[-52px] top-0 bottom-0 flex-col'
+};
+const POSITIONER_ALIGN_CLASS = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end'
+};
+const CONTAINER_BASE_CLASS = "flex items-center gap-1 p-1 min-h-10 min-w-10 shrink-0 bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-xl shadow-[0_2px_6px_rgba(0,0,0,0.08)] pointer-events-auto";
+const CONTAINER_DIRECTION_CLASS = {
+    top: 'flex-row',
+    bottom: 'flex-row',
+    left: 'flex-col',
+    right: 'flex-col'
+};
+const SEPARATOR_BASE_CLASS = 'flex-[0_0_auto] bg-(--canvas-background-overlay) self-center';
+const SEPARATOR_VERTICAL_CLASS = 'w-px h-5';
+const SEPARATOR_HORIZONTAL_CLASS = 'w-full h-px';
+const DROPDOWN_MENU_CLASS = "absolute top-[-2px] left-[calc(100%+4px)] min-w-[180px] bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.04)] p-1 z-[1000] pointer-events-auto";
+const DROPDOWN_ITEM_BASE_CLASS = "flex items-center gap-3 w-full py-2 px-3 bg-transparent border-none rounded-[4px] text-sm text-(--canvas-foreground) text-left [transition:background_0.15s_ease] enabled:hover:bg-(--canvas-background-hover) future:enabled:hover:bg-(--canvas-background-overlay) [&>svg]:shrink-0 [&>svg]:text-(--canvas-foreground)";
+const DROPDOWN_ITEM_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
+const DROPDOWN_ITEM_ENABLED_CLASS = 'cursor-pointer opacity-100';
 const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
     const { isDropdownOpen, setIsDropdownOpen, dropdownRef, buttonRef, actionsToDisplay, displayState, shouldShowOverflow, overflowActionsToDisplay, separatorOrientation, toggleDropdown } = useToolbarState({
         config,
@@ -14,9 +40,21 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
         nodeId,
         hidden
     });
+    const position = config.position || 'top';
+    const align = config.align || 'center';
+    const positionerClassName = useMemo(()=>cn(POSITIONER_BASE_CLASS, POSITIONER_POSITION_CLASS[position], POSITIONER_ALIGN_CLASS[align]), [
+        position,
+        align
+    ]);
+    const containerClassName = useMemo(()=>cn(CONTAINER_BASE_CLASS, CONTAINER_DIRECTION_CLASS[position]), [
+        position
+    ]);
+    const separatorClassName = useMemo(()=>cn(SEPARATOR_BASE_CLASS, 'horizontal' === separatorOrientation ? SEPARATOR_HORIZONTAL_CLASS : SEPARATOR_VERTICAL_CLASS), [
+        separatorOrientation
+    ]);
     const toolbarAnimationVariants = useMemo(()=>{
-        const offsetAxis = 'top' === config.position || 'bottom' === config.position ? 'y' : 'x';
-        const offsetAmount = 'top' === config.position || 'left' === config.position ? -10 : 10;
+        const offsetAxis = 'top' === position || 'bottom' === position ? 'y' : 'x';
+        const offsetAmount = 'top' === position || 'left' === position ? -10 : 10;
         const offset = 'pinned' !== displayState ? {
             [offsetAxis]: offsetAmount
         } : {};
@@ -38,118 +76,123 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
             }
         };
     }, [
-        config.position,
+        position,
         displayState
     ]);
     if (0 === config.actions.length && (!config.overflowActions || 0 === config.overflowActions.length)) return null;
     return /*#__PURE__*/ jsx(AnimatePresence, {
-        children: 'hidden' !== displayState && /*#__PURE__*/ jsxs(StyledToolbarContainer, {
-            layout: true,
-            $position: config.position || 'top',
-            $align: config.align || 'end',
-            initial: toolbarAnimationVariants.initial,
-            animate: toolbarAnimationVariants.animate,
-            exit: toolbarAnimationVariants.exit,
-            transition: {
-                duration: 0.15,
-                ease: 'easeOut'
-            },
-            role: "toolbar",
-            children: [
-                actionsToDisplay.map((item, i)=>isSeparator(item) ? /*#__PURE__*/ jsx(StyledToolbarSeparator, {
-                        $orientation: separatorOrientation
-                    }, `separator-${i}`) : /*#__PURE__*/ jsx(ToolbarButton, {
-                        action: item,
-                        layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
-                    }, item.id)),
-                shouldShowOverflow && /*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        actionsToDisplay.length > 0 && /*#__PURE__*/ jsx(StyledToolbarSeparator, {
-                            $orientation: separatorOrientation
-                        }),
-                        /*#__PURE__*/ jsxs(StyledOverflowContainer, {
-                            children: [
-                                /*#__PURE__*/ jsx(StyledToolbarButton, {
-                                    ref: buttonRef,
-                                    type: "button",
-                                    className: "nodrag nopan",
-                                    onClick: toggleDropdown,
-                                    "aria-label": "More options",
-                                    "aria-expanded": isDropdownOpen,
-                                    "aria-haspopup": "menu",
-                                    children: /*#__PURE__*/ jsx(CanvasTooltip, {
-                                        content: config.overflowLabel,
+        children: 'hidden' !== displayState && /*#__PURE__*/ jsx("div", {
+            className: positionerClassName,
+            children: /*#__PURE__*/ jsxs(motion.div, {
+                layout: "position",
+                className: containerClassName,
+                initial: toolbarAnimationVariants.initial,
+                animate: toolbarAnimationVariants.animate,
+                exit: toolbarAnimationVariants.exit,
+                transition: {
+                    duration: 0.15,
+                    ease: 'easeOut'
+                },
+                role: "toolbar",
+                children: [
+                    actionsToDisplay.map((item, i)=>isSeparator(item) ? /*#__PURE__*/ jsx("div", {
+                            className: separatorClassName
+                        }, `separator-${i}`) : /*#__PURE__*/ jsx(ToolbarButton, {
+                            action: item,
+                            layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
+                        }, item.id)),
+                    shouldShowOverflow && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            actionsToDisplay.length > 0 && /*#__PURE__*/ jsx("div", {
+                                className: separatorClassName
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "relative",
+                                children: [
+                                    /*#__PURE__*/ jsx(CanvasTooltip, {
+                                        content: config.overflowLabel ?? 'More options',
                                         placement: "top",
-                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                            icon: "ellipsis-vertical",
-                                            size: 16
+                                        children: /*#__PURE__*/ jsx(ToolbarIconButton, {
+                                            ref: buttonRef,
+                                            type: "button",
+                                            className: "nodrag nopan",
+                                            onClick: toggleDropdown,
+                                            "aria-label": config.overflowLabel ?? 'More options',
+                                            "aria-expanded": isDropdownOpen,
+                                            "aria-haspopup": "menu",
+                                            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                                icon: "ellipsis-vertical",
+                                                size: 16
+                                            })
                                         })
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(AnimatePresence, {
-                                    children: isDropdownOpen && /*#__PURE__*/ jsx(StyledDropdownMenu, {
-                                        ref: dropdownRef,
-                                        initial: {
-                                            opacity: 0,
-                                            x: -8
-                                        },
-                                        animate: {
-                                            opacity: 1,
-                                            x: 0
-                                        },
-                                        exit: {
-                                            opacity: 0,
-                                            x: -8
-                                        },
-                                        transition: {
-                                            duration: 0.15
-                                        },
-                                        role: "menu",
-                                        "aria-labelledby": buttonRef.current?.id,
-                                        children: overflowActionsToDisplay.map((item, i)=>{
-                                            if (isSeparator(item)) return /*#__PURE__*/ jsx(StyledToolbarSeparator, {
-                                                $orientation: "horizontal"
-                                            }, `separator-${i}`);
-                                            return /*#__PURE__*/ jsxs(StyledDropdownItem, {
-                                                type: "button",
-                                                className: "nodrag nopan",
-                                                onClick: (e)=>{
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-                                                    if (!item.disabled) {
-                                                        item.onClick();
-                                                        setIsDropdownOpen(false);
-                                                    }
-                                                },
-                                                "aria-label": item.label,
-                                                "aria-disabled": item.disabled,
-                                                role: "menuitem",
-                                                $disabled: item.disabled,
-                                                children: [
-                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
-                                                        style: {
-                                                            flex: 'unset',
-                                                            display: 'inline-flex'
-                                                        },
-                                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                                            icon: item.icon,
-                                                            size: 16
+                                    }),
+                                    /*#__PURE__*/ jsx(AnimatePresence, {
+                                        children: isDropdownOpen && /*#__PURE__*/ jsx(motion.div, {
+                                            ref: dropdownRef,
+                                            className: DROPDOWN_MENU_CLASS,
+                                            initial: {
+                                                opacity: 0,
+                                                x: -8
+                                            },
+                                            animate: {
+                                                opacity: 1,
+                                                x: 0
+                                            },
+                                            exit: {
+                                                opacity: 0,
+                                                x: -8
+                                            },
+                                            transition: {
+                                                duration: 0.15
+                                            },
+                                            role: "menu",
+                                            "aria-label": config.overflowLabel ?? 'More options',
+                                            children: overflowActionsToDisplay.map((item, i)=>{
+                                                if (isSeparator(item)) return /*#__PURE__*/ jsx("div", {
+                                                    className: cn(SEPARATOR_BASE_CLASS, SEPARATOR_HORIZONTAL_CLASS)
+                                                }, `separator-${i}`);
+                                                return /*#__PURE__*/ jsxs("button", {
+                                                    type: "button",
+                                                    className: cn(DROPDOWN_ITEM_BASE_CLASS, item.disabled ? DROPDOWN_ITEM_DISABLED_CLASS : DROPDOWN_ITEM_ENABLED_CLASS, 'nodrag nopan'),
+                                                    onClick: (e)=>{
+                                                        e.stopPropagation();
+                                                        e.preventDefault();
+                                                        if (!item.disabled) {
+                                                            item.onClick();
+                                                            setIsDropdownOpen(false);
+                                                        }
+                                                    },
+                                                    "aria-label": item.label,
+                                                    "aria-disabled": item.disabled,
+                                                    disabled: item.disabled,
+                                                    role: "menuitem",
+                                                    children: [
+                                                        item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
+                                                            style: {
+                                                                flex: 'unset',
+                                                                display: 'inline-flex'
+                                                            },
+                                                            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                                                icon: item.icon,
+                                                                size: 16
+                                                            })
+                                                        }),
+                                                        item.icon && 'string' != typeof item.icon && item.icon,
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "flex-1 text-(--canvas-foreground)",
+                                                            children: item.label
                                                         })
-                                                    }),
-                                                    item.icon && 'string' != typeof item.icon && item.icon,
-                                                    /*#__PURE__*/ jsx("span", {
-                                                        children: item.label
-                                                    })
-                                                ]
-                                            }, item.id);
+                                                    ]
+                                                }, item.id);
+                                            })
                                         })
                                     })
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
         })
     });
 };

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

@@ -119,7 +119,7 @@ const useToolbarState = ({ config, expanded, nodeId, hidden })=>{
         displayState,
         actionsToDisplay,
         overflowActionsToDisplay: overflowActionsWithState,
-        separatorOrientation: 'top' === config.position || 'bottom' === config.position ? 'vertical' : 'horizontal',
+        separatorOrientation: config.position && 'top' !== config.position && 'bottom' !== config.position ? 'horizontal' : 'vertical',
         toggleDropdown
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/useToolbarState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnE,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,EAAE,mBAAmB,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,oBAAoB,EAAE,CAAC;IACzC,wBAAwB,EAAE,oBAAoB,EAAE,CAAC;IACjD,oBAAoB,EAAE,YAAY,GAAG,UAAU,CAAC;IAChD,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,eAAe,GAAI,uCAK7B,oBAAoB,KAAG,qBAsHzB,CAAC"}
+{"version":3,"file":"useToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/useToolbarState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnE,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,EAAE,mBAAmB,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,oBAAoB,EAAE,CAAC;IACzC,wBAAwB,EAAE,oBAAoB,EAAE,CAAC;IACjD,oBAAoB,EAAE,YAAY,GAAG,UAAU,CAAC;IAChD,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,eAAe,GAAI,uCAK7B,oBAAoB,KAAG,qBAwHzB,CAAC"}

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

@@ -91,7 +91,7 @@ const useToolbarState = ({ config, expanded, nodeId, hidden })=>{
         displayState,
         actionsToDisplay,
         overflowActionsToDisplay: overflowActionsWithState,
-        separatorOrientation: 'top' === config.position || 'bottom' === config.position ? 'vertical' : 'horizontal',
+        separatorOrientation: config.position && 'top' !== config.position && 'bottom' !== config.position ? 'horizontal' : 'vertical',
         toggleDropdown
     };
 };

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

@@ -31,10 +31,10 @@ const index_cjs_namespaceObject = require("../../../utils/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 external_ToolbarIconButton_cjs_namespaceObject = require("./ToolbarIconButton.cjs");
 const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ action, layoutId })=>{
     const isEnabled = !action.disabled;
-    const hoverColor = action.color ? (0, index_cjs_namespaceObject.getLighterColor)(action.color) : void 0;
+    const hoverBg = action.color ? (0, index_cjs_namespaceObject.getLighterColor)(action.color) : void 0;
     const handleClick = (e)=>{
         e.stopPropagation();
         e.preventDefault();
@@ -43,7 +43,7 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
     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, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarIconButton_cjs_namespaceObject.ToolbarIconButton, {
             layout: layoutId ? true : void 0,
             layoutId: layoutId,
             transition: {
@@ -57,10 +57,10 @@ const ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
             "aria-label": action.label,
             "aria-disabled": !isEnabled,
             "aria-pressed": action.isToggled,
-            $disabled: !isEnabled,
-            $isToggled: action.isToggled,
-            $color: action.color,
-            $hoverColor: hoverColor,
+            disabled: !isEnabled,
+            isToggled: action.isToggled,
+            color: action.color,
+            hoverBg: hoverBg,
             children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                 icon: action.icon,
                 size: 16,

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

@@ -3,10 +3,10 @@ import { getLighterColor } from "../../../utils/index.js";
 import { memo } from "react";
 import { CanvasIcon } from "../../../utils/icon-registry.js";
 import { CanvasTooltip } from "../../CanvasTooltip.js";
-import { StyledToolbarButton } from "./ToolbarButton.styles.js";
+import { ToolbarIconButton } from "./ToolbarIconButton.js";
 const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
     const isEnabled = !action.disabled;
-    const hoverColor = action.color ? getLighterColor(action.color) : void 0;
+    const hoverBg = action.color ? getLighterColor(action.color) : void 0;
     const handleClick = (e)=>{
         e.stopPropagation();
         e.preventDefault();
@@ -15,7 +15,7 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
     return /*#__PURE__*/ jsx(CanvasTooltip, {
         content: action.label,
         placement: "top",
-        children: /*#__PURE__*/ jsx(StyledToolbarButton, {
+        children: /*#__PURE__*/ jsx(ToolbarIconButton, {
             layout: layoutId ? true : void 0,
             layoutId: layoutId,
             transition: {
@@ -29,10 +29,10 @@ const ToolbarButton = /*#__PURE__*/ memo(({ action, layoutId })=>{
             "aria-label": action.label,
             "aria-disabled": !isEnabled,
             "aria-pressed": action.isToggled,
-            $disabled: !isEnabled,
-            $isToggled: action.isToggled,
-            $color: action.color,
-            $hoverColor: hoverColor,
+            disabled: !isEnabled,
+            isToggled: action.isToggled,
+            color: action.color,
+            hoverBg: hoverBg,
             children: action.icon && 'string' == typeof action.icon ? /*#__PURE__*/ jsx(CanvasIcon, {
                 icon: action.icon,
                 size: 16,

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

@@ -0,0 +1,64 @@
+"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__, {
+    ToolbarIconButton: ()=>ToolbarIconButton
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const react_namespaceObject = require("motion/react");
+const external_react_namespaceObject = require("react");
+const TOOLBAR_ICON_BUTTON_CLASS = "grid place-items-center w-6 h-6 p-0 border-0 rounded-[4px] [transition:background-color_140ms_ease,color_140ms_ease,opacity_140ms_ease] [&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-[inherit] [&>svg]:origin-center [&>svg]:transition-transform [&>svg]:duration-[140ms] [&>svg]:ease-[ease] text-(--tb-color) bg-(--tb-bg) enabled:hover:bg-(--tb-hover-bg) enabled:hover:text-(--tb-hover-color) enabled:hover:[&>svg]:scale-[1.125]";
+const TOOLBAR_ICON_BUTTON_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
+const TOOLBAR_ICON_BUTTON_ENABLED_CLASS = 'cursor-pointer opacity-100';
+const ToolbarIconButtonInner = ({ disabled, isToggled, color, hoverBg, className, style, ...rest }, ref)=>{
+    const restColor = color ?? (isToggled ? 'var(--canvas-foreground)' : 'var(--canvas-foreground-de-emp)');
+    const effectiveHoverColor = color ?? 'var(--canvas-foreground)';
+    const restBg = isToggled ? hoverBg ?? 'var(--canvas-background-hover)' : 'transparent';
+    const effectiveHoverBg = hoverBg ?? 'var(--canvas-background-hover)';
+    const mergedStyle = {
+        ['--tb-color']: restColor,
+        ['--tb-hover-color']: effectiveHoverColor,
+        ['--tb-bg']: restBg,
+        ['--tb-hover-bg']: effectiveHoverBg,
+        ...style
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.motion.button, {
+        ref: ref,
+        disabled: disabled,
+        className: (0, apollo_wind_namespaceObject.cn)(TOOLBAR_ICON_BUTTON_CLASS, disabled ? TOOLBAR_ICON_BUTTON_DISABLED_CLASS : TOOLBAR_ICON_BUTTON_ENABLED_CLASS, className),
+        style: mergedStyle,
+        ...rest
+    });
+};
+const ToolbarIconButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(ToolbarIconButtonInner);
+ToolbarIconButton.displayName = 'ToolbarIconButton';
+exports.ToolbarIconButton = __webpack_exports__.ToolbarIconButton;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ToolbarIconButton"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/Toolbar/shared/ToolbarIconButton.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLMotionProps } from 'motion/react';
+export interface ToolbarIconButtonProps extends HTMLMotionProps<'button'> {
+    color?: string;
+    hoverBg?: string;
+    isToggled?: boolean;
+}
+export declare const ToolbarIconButton: import("react").ForwardRefExoticComponent<Omit<ToolbarIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToolbarIconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/ToolbarIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAU,MAAM,cAAc,CAAC;AAsB5D,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,QAAQ,CAAC;IAEvE,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAqCD,eAAO,MAAM,iBAAiB,mIAAqC,CAAC"}

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

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { motion } from "motion/react";
+import { forwardRef } from "react";
+const TOOLBAR_ICON_BUTTON_CLASS = "grid place-items-center w-6 h-6 p-0 border-0 rounded-[4px] [transition:background-color_140ms_ease,color_140ms_ease,opacity_140ms_ease] [&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-[inherit] [&>svg]:origin-center [&>svg]:transition-transform [&>svg]:duration-[140ms] [&>svg]:ease-[ease] text-(--tb-color) bg-(--tb-bg) enabled:hover:bg-(--tb-hover-bg) enabled:hover:text-(--tb-hover-color) enabled:hover:[&>svg]:scale-[1.125]";
+const TOOLBAR_ICON_BUTTON_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
+const TOOLBAR_ICON_BUTTON_ENABLED_CLASS = 'cursor-pointer opacity-100';
+const ToolbarIconButtonInner = ({ disabled, isToggled, color, hoverBg, className, style, ...rest }, ref)=>{
+    const restColor = color ?? (isToggled ? 'var(--canvas-foreground)' : 'var(--canvas-foreground-de-emp)');
+    const effectiveHoverColor = color ?? 'var(--canvas-foreground)';
+    const restBg = isToggled ? hoverBg ?? 'var(--canvas-background-hover)' : 'transparent';
+    const effectiveHoverBg = hoverBg ?? 'var(--canvas-background-hover)';
+    const mergedStyle = {
+        ['--tb-color']: restColor,
+        ['--tb-hover-color']: effectiveHoverColor,
+        ['--tb-bg']: restBg,
+        ['--tb-hover-bg']: effectiveHoverBg,
+        ...style
+    };
+    return /*#__PURE__*/ jsx(motion.button, {
+        ref: ref,
+        disabled: disabled,
+        className: cn(TOOLBAR_ICON_BUTTON_CLASS, disabled ? TOOLBAR_ICON_BUTTON_DISABLED_CLASS : TOOLBAR_ICON_BUTTON_ENABLED_CLASS, className),
+        style: mergedStyle,
+        ...rest
+    });
+};
+const ToolbarIconButton = /*#__PURE__*/ forwardRef(ToolbarIconButtonInner);
+ToolbarIconButton.displayName = 'ToolbarIconButton';
+export { ToolbarIconButton };

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

@@ -3,8 +3,8 @@ var __webpack_modules__ = {
     "./ToolbarButton" (module) {
         module.exports = require("./ToolbarButton.cjs");
     },
-    "./ToolbarButton.styles" (module) {
-        module.exports = require("./ToolbarButton.styles.cjs");
+    "./ToolbarIconButton" (module) {
+        module.exports = require("./ToolbarIconButton.cjs");
     },
     "./toolbar.types" (module) {
         module.exports = require("./toolbar.types.cjs");
@@ -57,9 +57,9 @@ var __webpack_exports__ = {};
     var __rspack_reexport = {};
     for(const __rspack_import_key in _ToolbarButton__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ToolbarButton__rspack_import_0[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _ToolbarButton_styles__rspack_import_1 = __webpack_require__("./ToolbarButton.styles");
+    var _ToolbarIconButton__rspack_import_1 = __webpack_require__("./ToolbarIconButton");
     var __rspack_reexport = {};
-    for(const __rspack_import_key in _ToolbarButton_styles__rspack_import_1)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ToolbarButton_styles__rspack_import_1[__rspack_import_key];
+    for(const __rspack_import_key in _ToolbarIconButton__rspack_import_1)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_ToolbarIconButton__rspack_import_1[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _toolbar_types__rspack_import_2 = __webpack_require__("./toolbar.types");
     var __rspack_reexport = {};

package/dist/canvas/components/Toolbar/shared/index.d.ts

@@ -1,4 +1,4 @@
 export * from './ToolbarButton';
-export * from './ToolbarButton.styles';
+export * from './ToolbarIconButton';
 export * from './toolbar.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}

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

@@ -1,3 +1,3 @@
 export * from "./ToolbarButton.js";
-export * from "./ToolbarButton.styles.js";
+export * from "./ToolbarIconButton.js";
 export * from "./toolbar.types.js";

package/dist/canvas/constants.cjs

@@ -72,7 +72,7 @@ const NODE_CONTAINER_RADIUS_RATIO = 32 / DEFAULT_NODE_SIZE;
 const NODE_INNER_SHAPE_RATIO = 80 / DEFAULT_NODE_SIZE;
 const NODE_INNER_ICON_RATIO = 40 / DEFAULT_NODE_SIZE;
 const NODE_INNER_RADIUS_RATIO = 24 / DEFAULT_NODE_SIZE;
-const NODE_BORDER_SIZE = 2;
+const NODE_BORDER_SIZE = 1;
 const NODE_ERROR_ICON_SIZE = 40;
 const NODE_TEXT_BOTTOM_OFFSET = -8;
 const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;

package/dist/canvas/constants.d.ts

@@ -18,7 +18,7 @@ export declare const NODE_CONTAINER_RADIUS_RATIO: number;
 export declare const NODE_INNER_SHAPE_RATIO: number;
 export declare const NODE_INNER_ICON_RATIO: number;
 export declare const NODE_INNER_RADIUS_RATIO: number;
-export declare const NODE_BORDER_SIZE = 2;
+export declare const NODE_BORDER_SIZE = 1;
 export declare const NODE_ERROR_ICON_SIZE = 40;
 export declare const NODE_TEXT_BOTTOM_OFFSET = -8;
 export declare const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;

package/dist/canvas/constants.js

@@ -18,7 +18,7 @@ const NODE_CONTAINER_RADIUS_RATIO = 32 / DEFAULT_NODE_SIZE;
 const NODE_INNER_SHAPE_RATIO = 80 / DEFAULT_NODE_SIZE;
 const NODE_INNER_ICON_RATIO = 40 / DEFAULT_NODE_SIZE;
 const NODE_INNER_RADIUS_RATIO = 24 / DEFAULT_NODE_SIZE;
-const NODE_BORDER_SIZE = 2;
+const NODE_BORDER_SIZE = 1;
 const NODE_ERROR_ICON_SIZE = 40;
 const NODE_TEXT_BOTTOM_OFFSET = -8;
 const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;