@uipath/apollo-react 6.23.0 → 6.24.0

package/README.md

@@ -237,7 +237,8 @@ This approach allows you to integrate Apollo design tokens into existing Materia
 
 ## Icons
 
-Access to 1300+ Apollo icons as React components:
+Access to 1300+ Apollo icons as React components, generated from
+[`@uipath/apollo-ui-icons`](../apollo-ui-icons):
 
 ```typescript
 import {

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

@@ -0,0 +1,245 @@
+"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_LEFT_SIDEBAR_RAIL_WIDTH: ()=>CANVAS_LEFT_SIDEBAR_RAIL_WIDTH,
+    CANVAS_LEFT_SIDEBAR_WIDTH: ()=>CANVAS_LEFT_SIDEBAR_WIDTH,
+    CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS: ()=>CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS,
+    CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS: ()=>CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS,
+    CanvasLeftSidebar: ()=>CanvasLeftSidebar_CanvasLeftSidebar,
+    CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH: ()=>CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_ToolbarButton_cjs_namespaceObject = require("../ToolbarButton.cjs");
+const CANVAS_LEFT_SIDEBAR_RAIL_WIDTH = 60;
+const CANVAS_LEFT_SIDEBAR_WIDTH = 288;
+const CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH = CANVAS_LEFT_SIDEBAR_RAIL_WIDTH;
+const CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS = [
+    {
+        id: 'coding-agent',
+        label: 'Coding agent',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MessageCircle, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'files',
+        label: 'Files',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Files, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'variables',
+        label: 'Variables',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Variable, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'connections',
+        label: 'Connections',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Network, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'run-history',
+        label: 'Run history',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.History, {
+            strokeWidth: 1.75
+        })
+    }
+];
+const CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS = [
+    {
+        id: 'whats-new',
+        label: "What's new",
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Newspaper, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'account',
+        label: 'Account',
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.User, {
+            strokeWidth: 1.75
+        })
+    }
+];
+function UiPathLogo() {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+        "aria-hidden": "true",
+        width: "36",
+        height: "36",
+        viewBox: "0 0 36 36",
+        fill: "none",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
+                width: "36",
+                height: "36",
+                rx: "8",
+                fill: "#0092B8"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", {
+                transform: "translate(6 6)",
+                fill: "#FAFAFA",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                        d: "M18.57 11.4h-.297c-.959 0-1.555.601-1.555 1.568v9.465c0 .967.596 1.567 1.555 1.567h.297c.959 0 1.555-.6 1.555-1.567v-9.465c0-.967-.596-1.568-1.555-1.568Z"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                        d: "M22.689 5.541c-2.168-.348-3.878-2.057-4.226-4.222-.007-.041-.06-.041-.066 0-.348 2.165-2.059 3.874-4.226 4.222-.041.006-.041.059 0 .066 2.167.348 3.878 2.056 4.226 4.221.006.041.059.041.066 0 .348-2.165 2.058-3.873 4.226-4.221.041-.007.041-.06 0-.066Z"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                        d: "M23.985 2.159C22.9 2.333 22.046 3.187 21.872 4.27c-.004.02-.03.02-.034 0-.174-1.083-1.029-1.937-2.112-2.111-.021-.003-.021-.03 0-.033 1.083-.174 1.938-1.028 2.112-2.111.003-.02.03-.02.034 0 .174 1.083 1.029 1.937 2.113 2.111.02.003.02.03 0 .033Z"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                        d: "M12.765 6.859h-.359c-.936 0-1.517.578-1.517 1.509v7.485c0 3.549-1.086 4.996-3.748 4.996s-3.748-1.454-3.748-5.018V8.368c0-.931-.581-1.509-1.517-1.509h-.359C.581 6.859 0 7.437 0 8.368v7.485C0 21.259 2.403 24 7.141 24s7.141-2.741 7.141-8.147V8.368c0-.931-.581-1.509-1.517-1.509Z"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function RailButton({ item, activeItemId, onSelect }) {
+    const isActive = activeItemId === item.id;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+        label: item.label,
+        tooltipSide: "right",
+        onClick: ()=>onSelect(item.id),
+        disabled: item.disabled,
+        ariaPressed: isActive,
+        className: (0, apollo_wind_namespaceObject.cn)('size-9 rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground [&_svg]:size-5', isActive && 'bg-surface-overlay text-foreground'),
+        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 selectItem = (itemId)=>{
+        onItemSelect?.(itemId);
+        onExpandedChange(activeItemId === itemId ? !isExpanded : true);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("aside", {
+        "data-testid": "canvas-left-sidebar",
+        "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
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("nav", {
+                "aria-label": "Canvas navigation",
+                className: "flex h-full shrink-0 select-none flex-col items-center border-r border-border-subtle py-3",
+                style: {
+                    width: CANVAS_LEFT_SIDEBAR_RAIL_WIDTH
+                },
+                children: [
+                    onLogoClick ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                        label: "Home",
+                        tooltipSide: "right",
+                        onClick: onLogoClick,
+                        className: "mb-2 size-9 shrink-0 overflow-hidden rounded-lg p-0 transition-transform hover:opacity-90 active:scale-95 [&_svg]:!size-9",
+                        children: logo ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(UiPathLogo, {})
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "mb-2 size-9 shrink-0 overflow-hidden rounded-lg [&_svg]:!size-9",
+                        children: logo ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(UiPathLogo, {})
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex flex-1 flex-col items-center gap-1 pt-2",
+                        children: primaryItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RailButton, {
+                                item: item,
+                                activeItemId: activeItemId,
+                                onSelect: selectItem
+                            }, item.id))
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex flex-col items-center gap-2 pt-2",
+                        children: bottomItems.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RailButton, {
+                                item: item,
+                                activeItemId: activeItemId,
+                                onSelect: selectItem
+                            }, item.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                "aria-hidden": !isExpanded,
+                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
+                },
+                children: [
+                    /*#__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", {
+                                className: "min-w-0 truncate text-sm font-semibold tracking-[-0.35px]",
+                                children: title
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "flex shrink-0 items-center gap-1",
+                                children: [
+                                    headerActions,
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolbarButton_cjs_namespaceObject.ToolbarButton, {
+                                        label: "Collapse sidebar",
+                                        tooltipSide: "right",
+                                        onClick: ()=>onExpandedChange(false),
+                                        className: "shrink-0 text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-4",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelLeftClose, {})
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "min-h-0 flex-1 overflow-auto border-t border-border-subtle p-3",
+                        children: children
+                    })
+                ]
+            })
+        ]
+    });
+});
+exports.CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH = __webpack_exports__.CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH;
+exports.CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS = __webpack_exports__.CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS;
+exports.CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS = __webpack_exports__.CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS;
+exports.CANVAS_LEFT_SIDEBAR_RAIL_WIDTH = __webpack_exports__.CANVAS_LEFT_SIDEBAR_RAIL_WIDTH;
+exports.CANVAS_LEFT_SIDEBAR_WIDTH = __webpack_exports__.CANVAS_LEFT_SIDEBAR_WIDTH;
+exports.CanvasLeftSidebar = __webpack_exports__.CanvasLeftSidebar;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH",
+    "CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS",
+    "CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS",
+    "CANVAS_LEFT_SIDEBAR_RAIL_WIDTH",
+    "CANVAS_LEFT_SIDEBAR_WIDTH",
+    "CanvasLeftSidebar"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+export declare const CANVAS_LEFT_SIDEBAR_RAIL_WIDTH = 60;
+export declare const CANVAS_LEFT_SIDEBAR_WIDTH = 288;
+export declare const CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH = 60;
+export type CanvasLeftSidebarItemId = string;
+export interface CanvasLeftSidebarItem {
+    id: CanvasLeftSidebarItemId;
+    label: string;
+    icon: ReactNode;
+    disabled?: boolean;
+}
+export interface CanvasLeftSidebarProps {
+    title: ReactNode;
+    children?: ReactNode;
+    isExpanded: boolean;
+    onExpandedChange: (isExpanded: boolean) => void;
+    activeItemId?: CanvasLeftSidebarItemId;
+    onItemSelect?: (itemId: CanvasLeftSidebarItemId) => void;
+    onLogoClick?: () => void;
+    logo?: ReactNode;
+    primaryItems?: readonly CanvasLeftSidebarItem[];
+    bottomItems?: readonly CanvasLeftSidebarItem[];
+    headerActions?: ReactNode;
+    variant?: 'default' | 'floating';
+    className?: string;
+}
+export declare const CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS: readonly CanvasLeftSidebarItem[];
+export declare const CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS: readonly CanvasLeftSidebarItem[];
+export declare const CanvasLeftSidebar: import("react").NamedExoticComponent<CanvasLeftSidebarProps>;
+//# sourceMappingURL=CanvasLeftSidebar.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,196 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { Files, History, MessageCircle, Network, Newspaper, PanelLeftClose, User, Variable } from "lucide-react";
+import { memo } from "react";
+import { ToolbarButton } from "../ToolbarButton.js";
+const CANVAS_LEFT_SIDEBAR_RAIL_WIDTH = 60;
+const CANVAS_LEFT_SIDEBAR_WIDTH = 288;
+const CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH = CANVAS_LEFT_SIDEBAR_RAIL_WIDTH;
+const CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS = [
+    {
+        id: 'coding-agent',
+        label: 'Coding agent',
+        icon: /*#__PURE__*/ jsx(MessageCircle, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'files',
+        label: 'Files',
+        icon: /*#__PURE__*/ jsx(Files, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'variables',
+        label: 'Variables',
+        icon: /*#__PURE__*/ jsx(Variable, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'connections',
+        label: 'Connections',
+        icon: /*#__PURE__*/ jsx(Network, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'run-history',
+        label: 'Run history',
+        icon: /*#__PURE__*/ jsx(History, {
+            strokeWidth: 1.75
+        })
+    }
+];
+const CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS = [
+    {
+        id: 'whats-new',
+        label: "What's new",
+        icon: /*#__PURE__*/ jsx(Newspaper, {
+            strokeWidth: 1.75
+        })
+    },
+    {
+        id: 'account',
+        label: 'Account',
+        icon: /*#__PURE__*/ jsx(User, {
+            strokeWidth: 1.75
+        })
+    }
+];
+function UiPathLogo() {
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        width: "36",
+        height: "36",
+        viewBox: "0 0 36 36",
+        fill: "none",
+        children: [
+            /*#__PURE__*/ jsx("rect", {
+                width: "36",
+                height: "36",
+                rx: "8",
+                fill: "#0092B8"
+            }),
+            /*#__PURE__*/ jsxs("g", {
+                transform: "translate(6 6)",
+                fill: "#FAFAFA",
+                children: [
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M18.57 11.4h-.297c-.959 0-1.555.601-1.555 1.568v9.465c0 .967.596 1.567 1.555 1.567h.297c.959 0 1.555-.6 1.555-1.567v-9.465c0-.967-.596-1.568-1.555-1.568Z"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M22.689 5.541c-2.168-.348-3.878-2.057-4.226-4.222-.007-.041-.06-.041-.066 0-.348 2.165-2.059 3.874-4.226 4.222-.041.006-.041.059 0 .066 2.167.348 3.878 2.056 4.226 4.221.006.041.059.041.066 0 .348-2.165 2.058-3.873 4.226-4.221.041-.007.041-.06 0-.066Z"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M23.985 2.159C22.9 2.333 22.046 3.187 21.872 4.27c-.004.02-.03.02-.034 0-.174-1.083-1.029-1.937-2.112-2.111-.021-.003-.021-.03 0-.033 1.083-.174 1.938-1.028 2.112-2.111.003-.02.03-.02.034 0 .174 1.083 1.029 1.937 2.113 2.111.02.003.02.03 0 .033Z"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M12.765 6.859h-.359c-.936 0-1.517.578-1.517 1.509v7.485c0 3.549-1.086 4.996-3.748 4.996s-3.748-1.454-3.748-5.018V8.368c0-.931-.581-1.509-1.517-1.509h-.359C.581 6.859 0 7.437 0 8.368v7.485C0 21.259 2.403 24 7.141 24s7.141-2.741 7.141-8.147V8.368c0-.931-.581-1.509-1.517-1.509Z"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function RailButton({ item, activeItemId, onSelect }) {
+    const isActive = activeItemId === item.id;
+    return /*#__PURE__*/ jsx(ToolbarButton, {
+        label: item.label,
+        tooltipSide: "right",
+        onClick: ()=>onSelect(item.id),
+        disabled: item.disabled,
+        ariaPressed: isActive,
+        className: cn('size-9 rounded-lg text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground [&_svg]:size-5', isActive && 'bg-surface-overlay text-foreground'),
+        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 selectItem = (itemId)=>{
+        onItemSelect?.(itemId);
+        onExpandedChange(activeItemId === itemId ? !isExpanded : true);
+    };
+    return /*#__PURE__*/ jsxs("aside", {
+        "data-testid": "canvas-left-sidebar",
+        "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
+        },
+        children: [
+            /*#__PURE__*/ jsxs("nav", {
+                "aria-label": "Canvas navigation",
+                className: "flex h-full shrink-0 select-none flex-col items-center border-r border-border-subtle py-3",
+                style: {
+                    width: CANVAS_LEFT_SIDEBAR_RAIL_WIDTH
+                },
+                children: [
+                    onLogoClick ? /*#__PURE__*/ jsx(ToolbarButton, {
+                        label: "Home",
+                        tooltipSide: "right",
+                        onClick: onLogoClick,
+                        className: "mb-2 size-9 shrink-0 overflow-hidden rounded-lg p-0 transition-transform hover:opacity-90 active:scale-95 [&_svg]:!size-9",
+                        children: logo ?? /*#__PURE__*/ jsx(UiPathLogo, {})
+                    }) : /*#__PURE__*/ jsx("div", {
+                        className: "mb-2 size-9 shrink-0 overflow-hidden rounded-lg [&_svg]:!size-9",
+                        children: logo ?? /*#__PURE__*/ jsx(UiPathLogo, {})
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex flex-1 flex-col items-center gap-1 pt-2",
+                        children: primaryItems.map((item)=>/*#__PURE__*/ jsx(RailButton, {
+                                item: item,
+                                activeItemId: activeItemId,
+                                onSelect: selectItem
+                            }, item.id))
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex flex-col items-center gap-2 pt-2",
+                        children: bottomItems.map((item)=>/*#__PURE__*/ jsx(RailButton, {
+                                item: item,
+                                activeItemId: activeItemId,
+                                onSelect: selectItem
+                            }, item.id))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                "aria-hidden": !isExpanded,
+                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
+                },
+                children: [
+                    /*#__PURE__*/ jsxs("header", {
+                        className: "flex h-12 shrink-0 items-center justify-between gap-3 px-4",
+                        children: [
+                            /*#__PURE__*/ jsx("h2", {
+                                className: "min-w-0 truncate text-sm font-semibold tracking-[-0.35px]",
+                                children: title
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex shrink-0 items-center gap-1",
+                                children: [
+                                    headerActions,
+                                    /*#__PURE__*/ jsx(ToolbarButton, {
+                                        label: "Collapse sidebar",
+                                        tooltipSide: "right",
+                                        onClick: ()=>onExpandedChange(false),
+                                        className: "shrink-0 text-foreground-muted hover:bg-surface-hover hover:text-foreground [&_svg]:size-4",
+                                        children: /*#__PURE__*/ jsx(PanelLeftClose, {})
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "min-h-0 flex-1 overflow-auto border-t border-border-subtle p-3",
+                        children: children
+                    })
+                ]
+            })
+        ]
+    });
+});
+export { CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH, CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS, CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS, CANVAS_LEFT_SIDEBAR_RAIL_WIDTH, CANVAS_LEFT_SIDEBAR_WIDTH, CanvasLeftSidebar_CanvasLeftSidebar as CanvasLeftSidebar };

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

@@ -0,0 +1,51 @@
+"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_LEFT_SIDEBAR_RAIL_WIDTH: ()=>external_CanvasLeftSidebar_cjs_namespaceObject.CANVAS_LEFT_SIDEBAR_RAIL_WIDTH,
+    CANVAS_LEFT_SIDEBAR_WIDTH: ()=>external_CanvasLeftSidebar_cjs_namespaceObject.CANVAS_LEFT_SIDEBAR_WIDTH,
+    CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS: ()=>external_CanvasLeftSidebar_cjs_namespaceObject.CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS,
+    CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS: ()=>external_CanvasLeftSidebar_cjs_namespaceObject.CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS,
+    CanvasLeftSidebar: ()=>external_CanvasLeftSidebar_cjs_namespaceObject.CanvasLeftSidebar,
+    CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH: ()=>external_CanvasLeftSidebar_cjs_namespaceObject.CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH
+});
+const external_CanvasLeftSidebar_cjs_namespaceObject = require("./CanvasLeftSidebar.cjs");
+exports.CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH = __webpack_exports__.CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH;
+exports.CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS = __webpack_exports__.CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS;
+exports.CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS = __webpack_exports__.CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS;
+exports.CANVAS_LEFT_SIDEBAR_RAIL_WIDTH = __webpack_exports__.CANVAS_LEFT_SIDEBAR_RAIL_WIDTH;
+exports.CANVAS_LEFT_SIDEBAR_WIDTH = __webpack_exports__.CANVAS_LEFT_SIDEBAR_WIDTH;
+exports.CanvasLeftSidebar = __webpack_exports__.CanvasLeftSidebar;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH",
+    "CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS",
+    "CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS",
+    "CANVAS_LEFT_SIDEBAR_RAIL_WIDTH",
+    "CANVAS_LEFT_SIDEBAR_WIDTH",
+    "CanvasLeftSidebar"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,3 @@
+export type { CanvasLeftSidebarItem, CanvasLeftSidebarItemId, CanvasLeftSidebarProps, } from './CanvasLeftSidebar';
+export { CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH, CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS, CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS, CANVAS_LEFT_SIDEBAR_RAIL_WIDTH, CANVAS_LEFT_SIDEBAR_WIDTH, CanvasLeftSidebar, } from './CanvasLeftSidebar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasLeftSidebar/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,qBAAqB,EACrB,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,mCAAmC,EACnC,wCAAwC,EACxC,yCAAyC,EACzC,8BAA8B,EAC9B,yBAAyB,EACzB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,2 @@
+import { CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH, CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS, CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS, CANVAS_LEFT_SIDEBAR_RAIL_WIDTH, CANVAS_LEFT_SIDEBAR_WIDTH, CanvasLeftSidebar } from "./CanvasLeftSidebar.js";
+export { CANVAS_LEFT_SIDEBAR_COLLAPSED_WIDTH, CANVAS_LEFT_SIDEBAR_DEFAULT_BOTTOM_ITEMS, CANVAS_LEFT_SIDEBAR_DEFAULT_PRIMARY_ITEMS, CANVAS_LEFT_SIDEBAR_RAIL_WIDTH, CANVAS_LEFT_SIDEBAR_WIDTH, CanvasLeftSidebar };