@uipath/apollo-react 6.30.2 → 6.31.0

package/dist/canvas/components/CanvasLeftSidebar/CanvasLeftSidebar.cjs

@@ -139,7 +139,7 @@ function RailButton({ item, activeItemId, onSelect }) {
         children: item.icon
     });
 }
-const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ title, children, isExpanded, onExpandedChange, activeItemId, onItemSelect, onLogoClick, logo, primaryItems = CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS, bottomItems = CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS, headerActions, variant = 'default', className }) {
+const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ title, children, isExpanded, onExpandedChange, activeItemId, onItemSelect, onLogoClick, logo, primaryItems = CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS, bottomItems = CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS, headerActions, showContentHeader = true, variant = 'default', expandedContentWidth = CANVAS_LEFT_SIDEBAR_WIDTH, className }) {
     const selectItem = (itemId)=>{
         onItemSelect?.(itemId);
         onExpandedChange(activeItemId === itemId ? !isExpanded : true);
@@ -149,7 +149,7 @@ const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ (0, external_react_nam
         "data-expanded": isExpanded,
         className: (0, apollo_wind_namespaceObject.cn)('flex h-full shrink-0 overflow-hidden border border-border-subtle bg-surface-raised text-foreground transition-[width] duration-150 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none', 'floating' === variant && 'rounded-2xl shadow-lg', className),
         style: {
-            width: isExpanded ? CANVAS_LEFT_SIDEBAR_RAIL_WIDTH + CANVAS_LEFT_SIDEBAR_WIDTH : CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH
+            width: isExpanded ? CANVAS_LEFT_SIDEBAR_RAIL_WIDTH + expandedContentWidth : CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH
         },
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("nav", {
@@ -192,10 +192,10 @@ const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ (0, external_react_nam
                 inert: !isExpanded,
                 className: (0, apollo_wind_namespaceObject.cn)('flex h-full shrink-0 flex-col transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none', isExpanded ? 'translate-x-0 opacity-100' : 'invisible -translate-x-1 opacity-0'),
                 style: {
-                    width: CANVAS_LEFT_SIDEBAR_WIDTH
+                    width: expandedContentWidth
                 },
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("header", {
+                    showContentHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("header", {
                         className: "flex h-12 shrink-0 items-center justify-between gap-3 px-4",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
@@ -218,7 +218,7 @@ const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ (0, external_react_nam
                         ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: "min-h-0 flex-1 overflow-auto border-t border-border-subtle p-3",
+                        className: (0, apollo_wind_namespaceObject.cn)('min-h-0 flex-1 overflow-auto p-3', showContentHeader && 'border-t border-border-subtle'),
                         children: children
                     })
                 ]

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

@@ -21,7 +21,9 @@ export interface CanvasLeftSidebarProps {
     primaryItems?: readonly CanvasLeftSidebarItem[];
     bottomItems?: readonly CanvasLeftSidebarItem[];
     headerActions?: ReactNode;
+    showContentHeader?: boolean;
     variant?: 'default' | 'floating';
+    expandedContentWidth?: number;
     className?: string;
 }
 export declare const CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS: readonly CanvasLeftSidebarItem[];

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasLeftSidebar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasLeftSidebar/CanvasLeftSidebar.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,mCAAmC,KAAiC,CAAC;AAElF,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,uBAAuB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IAErC,KAAK,EAAE,SAAS,CAAC;IAEjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,UAAU,EAAE,OAAO,CAAC;IAEpB,gBAAgB,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAEvC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEzD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,YAAY,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAEhD,WAAW,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAE/C,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,yCAAyC,EAAE,SAAS,qBAAqB,EAMrF,CAAC;AAEF,eAAO,MAAM,wCAAwC,EAAE,SAAS,qBAAqB,EAGpF,CAAC;AA2CF,eAAO,MAAM,iBAAiB,8DA4G5B,CAAC"}
+{"version":3,"file":"CanvasLeftSidebar.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasLeftSidebar/CanvasLeftSidebar.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,mCAAmC,KAAiC,CAAC;AAElF,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,uBAAuB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IAErC,KAAK,EAAE,SAAS,CAAC;IAEjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,UAAU,EAAE,OAAO,CAAC;IAEpB,gBAAgB,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAEvC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEzD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,YAAY,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAEhD,WAAW,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAE/C,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAEjC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,yCAAyC,EAAE,SAAS,qBAAqB,EAMrF,CAAC;AAEF,eAAO,MAAM,wCAAwC,EAAE,SAAS,qBAAqB,EAGpF,CAAC;AA2CF,eAAO,MAAM,iBAAiB,8DAqH5B,CAAC"}

package/dist/canvas/components/CanvasLeftSidebar/CanvasLeftSidebar.js

@@ -106,7 +106,7 @@ function RailButton({ item, activeItemId, onSelect }) {
         children: item.icon
     });
 }
-const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ memo(function({ title, children, isExpanded, onExpandedChange, activeItemId, onItemSelect, onLogoClick, logo, primaryItems = CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS, bottomItems = CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS, headerActions, variant = 'default', className }) {
+const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ memo(function({ title, children, isExpanded, onExpandedChange, activeItemId, onItemSelect, onLogoClick, logo, primaryItems = CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS, bottomItems = CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS, headerActions, showContentHeader = true, variant = 'default', expandedContentWidth = CANVAS_LEFT_SIDEBAR_WIDTH, className }) {
     const selectItem = (itemId)=>{
         onItemSelect?.(itemId);
         onExpandedChange(activeItemId === itemId ? !isExpanded : true);
@@ -116,7 +116,7 @@ const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ memo(function({ title,
         "data-expanded": isExpanded,
         className: cn('flex h-full shrink-0 overflow-hidden border border-border-subtle bg-surface-raised text-foreground transition-[width] duration-150 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none', 'floating' === variant && 'rounded-2xl shadow-lg', className),
         style: {
-            width: isExpanded ? CANVAS_LEFT_SIDEBAR_RAIL_WIDTH + CANVAS_LEFT_SIDEBAR_WIDTH : CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH
+            width: isExpanded ? CANVAS_LEFT_SIDEBAR_RAIL_WIDTH + expandedContentWidth : CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH
         },
         children: [
             /*#__PURE__*/ jsxs("nav", {
@@ -159,10 +159,10 @@ const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ memo(function({ title,
                 inert: !isExpanded,
                 className: cn('flex h-full shrink-0 flex-col transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none', isExpanded ? 'translate-x-0 opacity-100' : 'invisible -translate-x-1 opacity-0'),
                 style: {
-                    width: CANVAS_LEFT_SIDEBAR_WIDTH
+                    width: expandedContentWidth
                 },
                 children: [
-                    /*#__PURE__*/ jsxs("header", {
+                    showContentHeader && /*#__PURE__*/ jsxs("header", {
                         className: "flex h-12 shrink-0 items-center justify-between gap-3 px-4",
                         children: [
                             /*#__PURE__*/ jsx("h2", {
@@ -185,7 +185,7 @@ const CanvasLeftSidebar_CanvasLeftSidebar = /*#__PURE__*/ memo(function({ title,
                         ]
                     }),
                     /*#__PURE__*/ jsx("div", {
-                        className: "min-h-0 flex-1 overflow-auto border-t border-border-subtle p-3",
+                        className: cn('min-h-0 flex-1 overflow-auto p-3', showContentHeader && 'border-t border-border-subtle'),
                         children: children
                     })
                 ]

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.cjs

@@ -74,7 +74,7 @@ function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar
         if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, apollo_wind_namespaceObject.cn)('absolute inset-0 z-50 flex items-center justify-center bg-ui-backdrop', expanded ? 'p-0' : 'p-3'),
+        className: (0, apollo_wind_namespaceObject.cn)('absolute inset-0 z-50 flex items-center justify-center bg-black/60', expanded ? 'p-0' : 'p-3'),
         onMouseDown: handleBackdropClick,
         "data-testid": "canvas-takeover-backdrop",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_focus_lock_default(), {

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.js

@@ -36,7 +36,7 @@ function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar
         if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
     };
     return /*#__PURE__*/ jsx("div", {
-        className: cn('absolute inset-0 z-50 flex items-center justify-center bg-ui-backdrop', expanded ? 'p-0' : 'p-3'),
+        className: cn('absolute inset-0 z-50 flex items-center justify-center bg-black/60', expanded ? 'p-0' : 'p-3'),
         onMouseDown: handleBackdropClick,
         "data-testid": "canvas-takeover-backdrop",
         children: /*#__PURE__*/ jsx(react_focus_lock, {

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.cjs

@@ -31,7 +31,7 @@ const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const SURFACE_REMAP = 'future:[--surface-raised:var(--surface-overlay)]';
-function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1.5rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange }) {
+function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1.5rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange }) {
     const hasNodeHeader = !!(nodeLabel || nodeCategory || nodeIcon || action);
     const formSchema = (0, external_react_namespaceObject.useMemo)(()=>schema && void 0 === schema.actions ? {
             ...schema,
@@ -46,13 +46,16 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
         },
         children: [
             panelTitle && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                "data-slot": "node-property-panel-titlebar",
                 className: "flex h-10 shrink-0 items-center justify-between px-2",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "flex items-center gap-1",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                className: "grid size-8 place-items-center text-foreground-subtle",
+                                ...dragHandleProps,
+                                "data-slot": "node-property-panel-drag-handle",
+                                className: "grid size-8 cursor-grab touch-none place-items-center text-foreground-subtle active:cursor-grabbing",
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GripVertical, {
                                     size: 14
                                 })

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

@@ -1,3 +1,3 @@
 import type { NodePropertyPanelProps } from './NodePropertyPanel.types';
-export declare function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset, children, headerExtra, sectionVariant, activeStepId, onActiveStepChange, }: NodePropertyPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset, children, headerExtra, sectionVariant, activeStepId, onActiveStepChange, }: NodePropertyPanelProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NodePropertyPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAmCxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,2CAgIxB"}
+{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAmCxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,eAAe,EACf,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,2CAuIxB"}

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.js

@@ -3,7 +3,7 @@ import { MetadataForm, cn } from "@uipath/apollo-wind";
 import { GripVertical, X } from "lucide-react";
 import { useMemo } from "react";
 const SURFACE_REMAP = 'future:[--surface-raised:var(--surface-overlay)]';
-function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1.5rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange }) {
+function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1.5rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange }) {
     const hasNodeHeader = !!(nodeLabel || nodeCategory || nodeIcon || action);
     const formSchema = useMemo(()=>schema && void 0 === schema.actions ? {
             ...schema,
@@ -18,13 +18,16 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
         },
         children: [
             panelTitle && /*#__PURE__*/ jsxs("div", {
+                "data-slot": "node-property-panel-titlebar",
                 className: "flex h-10 shrink-0 items-center justify-between px-2",
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         className: "flex items-center gap-1",
                         children: [
                             /*#__PURE__*/ jsx("div", {
-                                className: "grid size-8 place-items-center text-foreground-subtle",
+                                ...dragHandleProps,
+                                "data-slot": "node-property-panel-drag-handle",
+                                className: "grid size-8 cursor-grab touch-none place-items-center text-foreground-subtle active:cursor-grabbing",
                                 children: /*#__PURE__*/ jsx(GripVertical, {
                                     size: 14
                                 })

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

@@ -1,7 +1,8 @@
 import type { FormPlugin, FormSchema } from '@uipath/apollo-wind';
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export interface NodePropertyPanelProps {
     panelTitle?: string;
+    dragHandleProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
     onClose?: () => void;
     nodeIcon?: ReactNode;
     nodeLabel?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"NodePropertyPanel.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,sBAAsB;IAKrC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM,CAAC,EAAE,SAAS,CAAC;IAMnB,MAAM,CAAC,EAAE,UAAU,CAAC;IAMpB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAOvB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAMlC,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAM5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,WAAW,CAAC,EAAE,SAAS,CAAC;IAQxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}
+{"version":3,"file":"NodePropertyPanel.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,sBAAsB;IAKrC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,eAAe,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,CAAC;IAEpE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM,CAAC,EAAE,SAAS,CAAC;IAMnB,MAAM,CAAC,EAAE,UAAU,CAAC;IAMpB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IAOvB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAMlC,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAM5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,WAAW,CAAC,EAAE,SAAS,CAAC;IAQxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.cjs

@@ -33,6 +33,21 @@ const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
+function ModeIcon({ icon, size, className }) {
+    if ('string' == typeof icon) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        className: (0, apollo_wind_namespaceObject.cn)('inline-flex', className),
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+            icon: icon,
+            size: size
+        })
+    });
+    const Icon = icon;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+        size: size,
+        className: className
+    });
+}
 const MODE_DEFS = [
     {
         value: 'live',
@@ -60,7 +75,7 @@ const MODE_DEFS = [
     },
     {
         value: 'simulated',
-        icon: external_lucide_react_namespaceObject.Sparkles,
+        icon: 'file-sparkles-corner',
         label: {
             id: 'canvas.node_mode_select.simulated_label',
             message: 'Simulated'
@@ -110,8 +125,10 @@ function NodeOutputModeSelect({ value, onChange, options, disabled = false, clas
                     }),
                     className: (0, apollo_wind_namespaceObject.cn)('min-w-12 gap-1.5 rounded-full border border-border px-2 text-[11px] font-medium text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-2.5', className),
                     children: [
-                        CurrentIcon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CurrentIcon, {
-                            className: "text-foreground-subtle"
+                        CurrentIcon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ModeIcon, {
+                            icon: CurrentIcon,
+                            className: "text-foreground-subtle",
+                            size: 10
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                             className: "min-w-0 flex-1 truncate shrink-0",
@@ -134,7 +151,8 @@ function NodeOutputModeSelect({ value, onChange, options, disabled = false, clas
                             value: option.value,
                             className: (0, apollo_wind_namespaceObject.cn)('group flex items-center gap-2 [&>span:first-child]:text-foreground-accent', selectedValue === option.value && 'text-foreground'),
                             children: [
-                                Icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                                Icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ModeIcon, {
+                                    icon: Icon,
                                     size: 13,
                                     className: "shrink-0 text-foreground-subtle"
                                 }),

package/dist/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.d.ts

@@ -1,9 +1,10 @@
 import type { LucideIcon } from 'lucide-react';
+export type NodeOutputModeIcon = LucideIcon | string;
 export interface NodeOutputModeOption {
     value: string;
     label: string;
     description?: string;
-    icon?: LucideIcon;
+    icon?: NodeOutputModeIcon;
 }
 export declare const DEFAULT_NODE_OUTPUT_MODES: NodeOutputModeOption[];
 export declare function useDefaultNodeOutputModes(): NodeOutputModeOption[];

package/dist/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeOutputModeSelect.d.ts","sourceRoot":"","sources":["../../../../src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAwCD,eAAO,MAAM,yBAAyB,EAAE,oBAAoB,EAKzD,CAAC;AAGJ,wBAAgB,yBAAyB,IAAI,oBAAoB,EAAE,CAYlE;AAED,MAAM,WAAW,yBAAyB;IAExC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,2CAgE3B"}
+{"version":3,"file":"NodeOutputModeSelect.d.ts","sourceRoot":"","sources":["../../../../src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB/C,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B;AAqED,eAAO,MAAM,yBAAyB,EAAE,oBAAoB,EAKzD,CAAC;AAGJ,wBAAgB,yBAAyB,IAAI,oBAAoB,EAAE,CAYlE;AAED,MAAM,WAAW,yBAAyB;IAExC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,2CAoE3B"}

package/dist/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.js

@@ -1,8 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, cn } from "@uipath/apollo-wind";
-import { ChevronDown, CircleDot, FileBracesCorner, Sparkles } from "lucide-react";
+import { ChevronDown, CircleDot, FileBracesCorner } from "lucide-react";
 import { useMemo } from "react";
 import { useSafeLingui } from "../../../i18n/index.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
+function ModeIcon({ icon, size, className }) {
+    if ('string' == typeof icon) return /*#__PURE__*/ jsx("span", {
+        className: cn('inline-flex', className),
+        children: /*#__PURE__*/ jsx(CanvasIcon, {
+            icon: icon,
+            size: size
+        })
+    });
+    const Icon = icon;
+    return /*#__PURE__*/ jsx(Icon, {
+        size: size,
+        className: className
+    });
+}
 const MODE_DEFS = [
     {
         value: 'live',
@@ -30,7 +45,7 @@ const MODE_DEFS = [
     },
     {
         value: 'simulated',
-        icon: Sparkles,
+        icon: 'file-sparkles-corner',
         label: {
             id: 'canvas.node_mode_select.simulated_label',
             message: 'Simulated'
@@ -80,8 +95,10 @@ function NodeOutputModeSelect({ value, onChange, options, disabled = false, clas
                     }),
                     className: cn('min-w-12 gap-1.5 rounded-full border border-border px-2 text-[11px] font-medium text-foreground-muted hover:bg-surface-overlay hover:text-foreground [&_svg]:size-2.5', className),
                     children: [
-                        CurrentIcon && /*#__PURE__*/ jsx(CurrentIcon, {
-                            className: "text-foreground-subtle"
+                        CurrentIcon && /*#__PURE__*/ jsx(ModeIcon, {
+                            icon: CurrentIcon,
+                            className: "text-foreground-subtle",
+                            size: 10
                         }),
                         /*#__PURE__*/ jsx("span", {
                             className: "min-w-0 flex-1 truncate shrink-0",
@@ -104,7 +121,8 @@ function NodeOutputModeSelect({ value, onChange, options, disabled = false, clas
                             value: option.value,
                             className: cn('group flex items-center gap-2 [&>span:first-child]:text-foreground-accent', selectedValue === option.value && 'text-foreground'),
                             children: [
-                                Icon && /*#__PURE__*/ jsx(Icon, {
+                                Icon && /*#__PURE__*/ jsx(ModeIcon, {
+                                    icon: Icon,
                                     size: 13,
                                     className: "shrink-0 text-foreground-subtle"
                                 }),

package/dist/canvas/controls/NodeOutputModeSelect/index.d.ts

@@ -1,2 +1,2 @@
-export { DEFAULT_NODE_OUTPUT_MODES, type NodeOutputModeOption, NodeOutputModeSelect, type NodeOutputModeSelectProps, useDefaultNodeOutputModes, } from './NodeOutputModeSelect';
+export { DEFAULT_NODE_OUTPUT_MODES, type NodeOutputModeIcon, type NodeOutputModeOption, NodeOutputModeSelect, type NodeOutputModeSelectProps, useDefaultNodeOutputModes, } from './NodeOutputModeSelect';
 //# sourceMappingURL=index.d.ts.map

package/dist/canvas/controls/NodeOutputModeSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/controls/NodeOutputModeSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,KAAK,oBAAoB,EACzB,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/controls/NodeOutputModeSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC"}

package/dist/canvas/controls/index.d.ts

@@ -1,5 +1,5 @@
 export { Breadcrumb } from './Breadcrumb';
-export { DEFAULT_NODE_OUTPUT_MODES, type NodeOutputModeOption, NodeOutputModeSelect, type NodeOutputModeSelectProps, useDefaultNodeOutputModes, } from './NodeOutputModeSelect';
+export { DEFAULT_NODE_OUTPUT_MODES, type NodeOutputModeIcon, type NodeOutputModeOption, NodeOutputModeSelect, type NodeOutputModeSelectProps, useDefaultNodeOutputModes, } from './NodeOutputModeSelect';
 export { NodePropertyTrigger, NodePropertyTriggerCheckboxItem, NodePropertyTriggerRadioItem, NodePropertyTriggerSectionLabel, NodePropertyTriggerSeparator, } from './NodePropertyTrigger';
 export type { NodePropertyTriggerProps, NodePropertyTriggerItem, NodePropertyTriggerBehavior, NodePropertyTriggerBehaviorOption, NodePropertyTriggerCheckboxItemProps, NodePropertyTriggerLayout, NodePropertyTriggerLayoutOption, NodePropertyTriggerPreset, } from './NodePropertyTrigger';
 //# sourceMappingURL=index.d.ts.map

package/dist/canvas/controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/canvas/controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACL,yBAAyB,EACzB,KAAK,oBAAoB,EACzB,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,mBAAmB,EACnB,+BAA+B,EAC/B,4BAA4B,EAC5B,+BAA+B,EAC/B,4BAA4B,GAC7B,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,wBAAwB,EACxB,uBAAuB,EACvB,2BAA2B,EAC3B,iCAAiC,EACjC,oCAAoC,EACpC,yBAAyB,EACzB,+BAA+B,EAC/B,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/canvas/controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACL,yBAAyB,EACzB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,mBAAmB,EACnB,+BAA+B,EAC/B,4BAA4B,EAC5B,+BAA+B,EAC/B,4BAA4B,GAC7B,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,wBAAwB,EACxB,uBAAuB,EACvB,2BAA2B,EAC3B,iCAAiC,EACjC,oCAAoC,EACpC,yBAAyB,EACzB,+BAA+B,EAC/B,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC"}

package/dist/canvas/stories/templates/Flow.stories.css

@@ -0,0 +1,53 @@
+.canvas-template-dockview, .canvas-template-dockview :where(.dv-tabs-and-actions-container, .dv-groupview, .dv-tab, .dv-tabs-container, .dv-void-container) {
+  --dv-background-color: var(--surface);
+  --dv-paneview-active-outline-color: transparent;
+  --dv-group-view-background-color: var(--surface-raised);
+  --dv-tabs-and-actions-container-background-color: var(--surface-raised);
+  --dv-activegroup-visiblepanel-tab-background-color: var(--surface-raised);
+  --dv-activegroup-hiddenpanel-tab-background-color: var(--surface-raised);
+  --dv-inactivegroup-visiblepanel-tab-background-color: var(--surface-raised);
+  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--surface-raised);
+  --dv-tab-background-color: transparent;
+  --dv-activegroup-visiblepanel-tab-color: var(--foreground);
+  --dv-activegroup-hiddenpanel-tab-color: var(--foreground-muted);
+  --dv-inactivegroup-visiblepanel-tab-color: var(--foreground);
+  --dv-inactivegroup-hiddenpanel-tab-color: var(--foreground-muted);
+  --dv-separator-border: var(--border-subtle);
+  --dv-tab-divider-color: transparent;
+  --dv-drag-over-border: 2px solid var(--primary);
+  --dv-drag-over-background-color: color-mix(in srgb, var(--primary) 16%, transparent);
+  --dv-active-sash-color: var(--primary);
+  --dv-icon-hover-background-color: var(--surface-hover);
+  --dv-border-radius: 0;
+  --dv-tabs-and-actions-container-height: 36px;
+}
+
+.canvas-template-dockview .dv-groupview {
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  overflow: hidden;
+}
+
+.canvas-template-dockview .dv-tabs-and-actions-container {
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 0 2px;
+}
+
+.canvas-template-dockview .dv-tab {
+  height: 32px;
+  color: var(--foreground-muted);
+  cursor: grab;
+  border-radius: 8px;
+  margin: 2px;
+  padding: 0 10px;
+}
+
+.canvas-template-dockview .dv-tab:hover, .canvas-template-dockview .dv-tab.dv-active-tab {
+  background: var(--surface-overlay);
+  color: var(--foreground);
+}
+
+.canvas-template-dockview .dv-sash:hover, .canvas-template-dockview .dv-sash:active {
+  background: var(--primary);
+}
+