@uipath/apollo-react 4.32.2 → 4.33.0

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.cjs

@@ -0,0 +1,66 @@
+"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__, {
+    CANVAS_MODE_TOOLBAR_HEIGHT: ()=>CANVAS_MODE_TOOLBAR_HEIGHT,
+    CountBadge: ()=>CanvasModeToolbar_CountBadge,
+    CanvasModeToolbar: ()=>CanvasModeToolbar_CanvasModeToolbar,
+    TOOLBAR_ICON_BUTTON_CLASS: ()=>TOOLBAR_ICON_BUTTON_CLASS
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const CANVAS_MODE_TOOLBAR_HEIGHT = 48;
+const TOOLBAR_ICON_BUTTON_CLASS = 'text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-5 [&_svg]:transition-all hover:[&_svg]:size-6 disabled:hover:[&_svg]:size-5';
+const CanvasModeToolbar_CountBadge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ count, variant = 'default' }) {
+    if (count <= 0) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        className: `absolute -top-1 -right-1 min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full flex items-center justify-center ${'destructive' === variant ? 'bg-destructive text-destructive-foreground' : 'bg-muted text-muted-foreground'}`,
+        children: count
+    });
+});
+const CanvasModeToolbar_CanvasModeToolbar = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ children, className }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Row, {
+        "data-testid": "canvas-toolbar",
+        className: (0, apollo_wind_namespaceObject.cn)('gap-2 items-center rounded-2xl border border-border-subtle bg-surface-raised text-foreground px-2.5 backdrop-blur-sm shadow-lg', className),
+        style: {
+            height: CANVAS_MODE_TOOLBAR_HEIGHT
+        },
+        children: children
+    });
+});
+exports.CANVAS_MODE_TOOLBAR_HEIGHT = __webpack_exports__.CANVAS_MODE_TOOLBAR_HEIGHT;
+exports.CanvasModeToolbar = __webpack_exports__.CanvasModeToolbar;
+exports.CountBadge = __webpack_exports__.CountBadge;
+exports.TOOLBAR_ICON_BUTTON_CLASS = __webpack_exports__.TOOLBAR_ICON_BUTTON_CLASS;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_MODE_TOOLBAR_HEIGHT",
+    "CanvasModeToolbar",
+    "CountBadge",
+    "TOOLBAR_ICON_BUTTON_CLASS"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export declare const CANVAS_MODE_TOOLBAR_HEIGHT = 48;
+export declare const TOOLBAR_ICON_BUTTON_CLASS = "text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-5 [&_svg]:transition-all hover:[&_svg]:size-6 disabled:hover:[&_svg]:size-5";
+export declare const CountBadge: import("react").NamedExoticComponent<{
+    count: number;
+    variant?: "default" | "destructive";
+}>;
+export interface CanvasModeToolbarProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare const CanvasModeToolbar: import("react").NamedExoticComponent<CanvasModeToolbarProps>;
+//# sourceMappingURL=CanvasModeToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasModeToolbar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasModeToolbar/CanvasModeToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,eAAO,MAAM,yBAAyB,gKACyH,CAAC;AAMhK,eAAO,MAAM,UAAU;WAId,MAAM;cACH,SAAS,GAAG,aAAa;EAcnC,CAAC;AAMH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,iBAAiB,8DAgB5B,CAAC"}

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Row, cn } from "@uipath/apollo-wind";
+const CANVAS_MODE_TOOLBAR_HEIGHT = 48;
+const TOOLBAR_ICON_BUTTON_CLASS = 'text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-5 [&_svg]:transition-all hover:[&_svg]:size-6 disabled:hover:[&_svg]:size-5';
+const CanvasModeToolbar_CountBadge = /*#__PURE__*/ memo(function({ count, variant = 'default' }) {
+    if (count <= 0) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: `absolute -top-1 -right-1 min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full flex items-center justify-center ${'destructive' === variant ? 'bg-destructive text-destructive-foreground' : 'bg-muted text-muted-foreground'}`,
+        children: count
+    });
+});
+const CanvasModeToolbar_CanvasModeToolbar = /*#__PURE__*/ memo(function({ children, className }) {
+    return /*#__PURE__*/ jsx(Row, {
+        "data-testid": "canvas-toolbar",
+        className: cn('gap-2 items-center rounded-2xl border border-border-subtle bg-surface-raised text-foreground px-2.5 backdrop-blur-sm shadow-lg', className),
+        style: {
+            height: CANVAS_MODE_TOOLBAR_HEIGHT
+        },
+        children: children
+    });
+});
+export { CANVAS_MODE_TOOLBAR_HEIGHT, CanvasModeToolbar_CanvasModeToolbar as CanvasModeToolbar, CanvasModeToolbar_CountBadge as CountBadge, TOOLBAR_ICON_BUTTON_CLASS };

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.types.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__);
+for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.types.d.ts

@@ -0,0 +1,10 @@
+export type CanvasMode = 'design' | 'debug' | 'evaluate';
+export interface DebugControls {
+    isInitiated?: boolean;
+    status?: string;
+    onStep?: () => void;
+    onContinue?: () => void;
+    onRestart?: () => void;
+    onStop?: () => void;
+}
+//# sourceMappingURL=CanvasModeToolbar.types.d.ts.map

package/dist/canvas/components/CanvasModeToolbar/CanvasModeToolbar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasModeToolbar.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasModeToolbar/CanvasModeToolbar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/dist/canvas/components/CanvasModeToolbar/index.cjs

@@ -0,0 +1,45 @@
+"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__, {
+    CANVAS_MODE_TOOLBAR_HEIGHT: ()=>external_CanvasModeToolbar_cjs_namespaceObject.CANVAS_MODE_TOOLBAR_HEIGHT,
+    CountBadge: ()=>external_CanvasModeToolbar_cjs_namespaceObject.CountBadge,
+    CanvasModeToolbar: ()=>external_CanvasModeToolbar_cjs_namespaceObject.CanvasModeToolbar,
+    TOOLBAR_ICON_BUTTON_CLASS: ()=>external_CanvasModeToolbar_cjs_namespaceObject.TOOLBAR_ICON_BUTTON_CLASS
+});
+const external_CanvasModeToolbar_cjs_namespaceObject = require("./CanvasModeToolbar.cjs");
+exports.CANVAS_MODE_TOOLBAR_HEIGHT = __webpack_exports__.CANVAS_MODE_TOOLBAR_HEIGHT;
+exports.CanvasModeToolbar = __webpack_exports__.CanvasModeToolbar;
+exports.CountBadge = __webpack_exports__.CountBadge;
+exports.TOOLBAR_ICON_BUTTON_CLASS = __webpack_exports__.TOOLBAR_ICON_BUTTON_CLASS;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_MODE_TOOLBAR_HEIGHT",
+    "CanvasModeToolbar",
+    "CountBadge",
+    "TOOLBAR_ICON_BUTTON_CLASS"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasModeToolbar/index.d.ts

@@ -0,0 +1,4 @@
+export { CanvasModeToolbar, CountBadge, CANVAS_MODE_TOOLBAR_HEIGHT, TOOLBAR_ICON_BUTTON_CLASS, } from './CanvasModeToolbar';
+export type { CanvasModeToolbarProps } from './CanvasModeToolbar';
+export type { CanvasMode, DebugControls } from './CanvasModeToolbar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/CanvasModeToolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasModeToolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,UAAU,EACV,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/canvas/components/CanvasModeToolbar/index.js

@@ -0,0 +1,2 @@
+import { CANVAS_MODE_TOOLBAR_HEIGHT, CanvasModeToolbar, CountBadge, TOOLBAR_ICON_BUTTON_CLASS } from "./CanvasModeToolbar.js";
+export { CANVAS_MODE_TOOLBAR_HEIGHT, CanvasModeToolbar, CountBadge, TOOLBAR_ICON_BUTTON_CLASS };

package/dist/canvas/components/CanvasZoomControls/CanvasZoomControls.cjs

@@ -0,0 +1,120 @@
+"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__, {
+    CanvasZoomControls: ()=>CanvasZoomControls_CanvasZoomControls
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_ToolbarButton_cjs_namespaceObject = require("../ToolbarButton.cjs");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const ZOOM_ICON_BUTTON_CLASS = 'text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-[18px] [&_svg]:transition-all hover:[&_svg]:size-[22px] disabled:hover:[&_svg]:size-[18px]';
+const CanvasZoomControls_CanvasZoomControls = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(/*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ orientation = 'vertical', fitViewOptions, zoomInOptions, zoomOutOptions, onOrganize, onFitView }, ref) {
+    const { zoomIn, zoomOut, fitView } = (0, react_cjs_namespaceObject.useReactFlow)();
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const isVertical = 'vertical' === orientation;
+    const tooltipSide = isVertical ? 'left' : 'top';
+    const handleZoomIn = (0, external_react_namespaceObject.useCallback)(()=>{
+        zoomIn(zoomInOptions);
+    }, [
+        zoomIn,
+        zoomInOptions
+    ]);
+    const handleZoomOut = (0, external_react_namespaceObject.useCallback)(()=>{
+        zoomOut(zoomOutOptions);
+    }, [
+        zoomOut,
+        zoomOutOptions
+    ]);
+    const handleFitView = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (onFitView) onFitView();
+        else fitView(fitViewOptions);
+    }, [
+        onFitView,
+        fitView,
+        fitViewOptions
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: ref,
+        "data-testid": "canvas-controls",
+        className: `flex gap-1 items-center rounded-xl border border-border-subtle bg-surface-raised text-foreground p-1 backdrop-blur-sm shadow-lg ${isVertical ? 'flex-col' : 'flex-row'}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                testId: "zoom-in-button",
+                label: _({
+                    id: 'canvas.zoom.zoom_in',
+                    message: 'Zoom in'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleZoomIn,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ZoomIn, {})
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                testId: "zoom-out-button",
+                label: _({
+                    id: 'canvas.zoom.zoom_out',
+                    message: 'Zoom out'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleZoomOut,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ZoomOut, {})
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                testId: "fit-to-view-button",
+                label: _({
+                    id: 'canvas.zoom.fit_to_screen',
+                    message: 'Fit to screen'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleFitView,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Scan, {})
+            }),
+            onOrganize && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                testId: "organize-button",
+                label: _({
+                    id: 'canvas.zoom.tidy_up',
+                    message: 'Tidy up'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: onOrganize,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.BrushCleaning, {})
+            })
+        ]
+    });
+}));
+CanvasZoomControls_CanvasZoomControls.displayName = 'CanvasZoomControls';
+exports.CanvasZoomControls = __webpack_exports__.CanvasZoomControls;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasZoomControls"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasZoomControls/CanvasZoomControls.d.ts

@@ -0,0 +1,18 @@
+export interface CanvasZoomControlsProps {
+    orientation?: 'vertical' | 'horizontal';
+    fitViewOptions?: {
+        duration?: number;
+        padding?: number;
+        maxZoom?: number;
+    };
+    zoomInOptions?: {
+        duration?: number;
+    };
+    zoomOutOptions?: {
+        duration?: number;
+    };
+    onOrganize?: () => void;
+    onFitView?: () => void;
+}
+export declare const CanvasZoomControls: import("react").NamedExoticComponent<CanvasZoomControlsProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CanvasZoomControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasZoomControls.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasZoomControls/CanvasZoomControls.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,cAAc,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,aAAa,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,cAAc,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAKD,eAAO,MAAM,kBAAkB,+GAqF9B,CAAC"}

package/dist/canvas/components/CanvasZoomControls/CanvasZoomControls.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback } from "react";
+import { BrushCleaning, Scan, ZoomIn, ZoomOut } from "lucide-react";
+import { useReactFlow } from "../../xyflow/react.js";
+import { ToolbarButton } from "../ToolbarButton.js";
+import { useSafeLingui } from "../../../i18n/index.js";
+const ZOOM_ICON_BUTTON_CLASS = 'text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-[18px] [&_svg]:transition-all hover:[&_svg]:size-[22px] disabled:hover:[&_svg]:size-[18px]';
+const CanvasZoomControls_CanvasZoomControls = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function({ orientation = 'vertical', fitViewOptions, zoomInOptions, zoomOutOptions, onOrganize, onFitView }, ref) {
+    const { zoomIn, zoomOut, fitView } = useReactFlow();
+    const { _ } = useSafeLingui();
+    const isVertical = 'vertical' === orientation;
+    const tooltipSide = isVertical ? 'left' : 'top';
+    const handleZoomIn = useCallback(()=>{
+        zoomIn(zoomInOptions);
+    }, [
+        zoomIn,
+        zoomInOptions
+    ]);
+    const handleZoomOut = useCallback(()=>{
+        zoomOut(zoomOutOptions);
+    }, [
+        zoomOut,
+        zoomOutOptions
+    ]);
+    const handleFitView = useCallback(()=>{
+        if (onFitView) onFitView();
+        else fitView(fitViewOptions);
+    }, [
+        onFitView,
+        fitView,
+        fitViewOptions
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-testid": "canvas-controls",
+        className: `flex gap-1 items-center rounded-xl border border-border-subtle bg-surface-raised text-foreground p-1 backdrop-blur-sm shadow-lg ${isVertical ? 'flex-col' : 'flex-row'}`,
+        children: [
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                testId: "zoom-in-button",
+                label: _({
+                    id: 'canvas.zoom.zoom_in',
+                    message: 'Zoom in'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleZoomIn,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ jsx(ZoomIn, {})
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                testId: "zoom-out-button",
+                label: _({
+                    id: 'canvas.zoom.zoom_out',
+                    message: 'Zoom out'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleZoomOut,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ jsx(ZoomOut, {})
+            }),
+            /*#__PURE__*/ jsx(ToolbarButton, {
+                testId: "fit-to-view-button",
+                label: _({
+                    id: 'canvas.zoom.fit_to_screen',
+                    message: 'Fit to screen'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: handleFitView,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ jsx(Scan, {})
+            }),
+            onOrganize && /*#__PURE__*/ jsx(ToolbarButton, {
+                testId: "organize-button",
+                label: _({
+                    id: 'canvas.zoom.tidy_up',
+                    message: 'Tidy up'
+                }),
+                tooltipSide: tooltipSide,
+                onClick: onOrganize,
+                className: ZOOM_ICON_BUTTON_CLASS,
+                children: /*#__PURE__*/ jsx(BrushCleaning, {})
+            })
+        ]
+    });
+}));
+CanvasZoomControls_CanvasZoomControls.displayName = 'CanvasZoomControls';
+export { CanvasZoomControls_CanvasZoomControls as CanvasZoomControls };

package/dist/canvas/components/CanvasZoomControls/index.cjs

@@ -0,0 +1,36 @@
+"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__, {
+    CanvasZoomControls: ()=>external_CanvasZoomControls_cjs_namespaceObject.CanvasZoomControls
+});
+const external_CanvasZoomControls_cjs_namespaceObject = require("./CanvasZoomControls.cjs");
+exports.CanvasZoomControls = __webpack_exports__.CanvasZoomControls;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasZoomControls"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasZoomControls/index.d.ts

@@ -0,0 +1,3 @@
+export { CanvasZoomControls } from './CanvasZoomControls';
+export type { CanvasZoomControlsProps } from './CanvasZoomControls';
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/CanvasZoomControls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasZoomControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/canvas/components/CanvasZoomControls/index.js

@@ -0,0 +1,2 @@
+import { CanvasZoomControls } from "./CanvasZoomControls.js";
+export { CanvasZoomControls };

package/dist/canvas/components/ToolbarButton.cjs

@@ -0,0 +1,63 @@
+"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__, {
+    ToolbarButton: ()=>ToolbarButton_ToolbarButton
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const ToolbarButton_ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ label, tooltip, testId, onClick, disabled, className, tooltipSide, children }, ref) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Tooltip, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                    ref: ref,
+                    "data-testid": testId,
+                    "aria-label": label,
+                    variant: "ghost",
+                    size: "xs",
+                    icon: true,
+                    className: className,
+                    onClick: onClick,
+                    disabled: disabled,
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.TooltipContent, {
+                side: tooltipSide,
+                children: tooltip ?? label
+            })
+        ]
+    });
+});
+exports.ToolbarButton = __webpack_exports__.ToolbarButton;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ToolbarButton"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/ToolbarButton.d.ts

@@ -0,0 +1,14 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+interface ToolbarButtonProps {
+    label: string;
+    tooltip?: ReactNode;
+    testId?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+    className?: string;
+    tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
+    children: ReactNode;
+}
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=ToolbarButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/ToolbarButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,kHA0BzB,CAAC"}

package/dist/canvas/components/ToolbarButton.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@uipath/apollo-wind";
+const ToolbarButton_ToolbarButton = /*#__PURE__*/ forwardRef(function({ label, tooltip, testId, onClick, disabled, className, tooltipSide, children }, ref) {
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    ref: ref,
+                    "data-testid": testId,
+                    "aria-label": label,
+                    variant: "ghost",
+                    size: "xs",
+                    icon: true,
+                    className: className,
+                    onClick: onClick,
+                    disabled: disabled,
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                side: tooltipSide,
+                children: tooltip ?? label
+            })
+        ]
+    });
+});
+export { ToolbarButton_ToolbarButton as ToolbarButton };